Template:Peking/hov/pater

.pater { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important; position: fixed; z-index: 1000; right: 0; bottom: 0; display: grid; width: 100%; padding: 1em 0; text-align: left; color: #333; background: #ddd; grid-template-columns: auto; grid-template-rows: auto auto auto; }

.pater:hover { color: #000; }

.pater::before { content: 'Our Sponsor'; font-size: 0.75em; display: inline-block; padding: 0 0 5px 10px; vertical-align: middle; grid-area: 1 / 1 / 2 / 2; }

.pater__img { display: none; background-image: url(FullStory.jpg); background-size: cover; grid-area: 2 / 1 / 3 / 2; }

.pater__title { font-size: 0.85em; font-weight: normal; font-weight: bold; align-self: end; margin: 0; }

.pater__title::before { content: 'FullStory: '; }

.pater__title, .pater__description { align-self: start; padding: 10px 0 0 10px; grid-area: 2 / 1 / 3 / 3; }

.pater__description { font-size: 0.85em; display: none; margin: 0; opacity: 0; }

.pater__description strong { display: block; padding-top: 5px; color: #ee4e97; }

/* Themes */ .demo-tsula .pater { color: #f0f0f0; background: #2d2e32; }

.demo-tsula .pater:hover { color: #fff; }

.demo-yona .pater { color: #fff; background: #4523e4; }

.demo-yona .pater:hover { color: #fff; }

.demo-yona .pater__img { transition: filter 0.3s; filter: grayscale(1); }

.demo-yona .pater:hover .pater__img { filter: grayscale(0); }

.demo-yona .pater__description strong, .demo-mohe .pater__description strong { color: #000; }

.demo-inola .pater { color: #8c8c8c; background: #181818; }

.demo-salal .pater { color: #b5b5b5; background: #2d2e2f; }

.demo-dustu .pater { color: #b5b5b5; background: #000; }

.demo-mohe .pater { color: #fff; background: #3128d2; }

@media screen and (min-width: 60em) { .pater { top: 0; right: 0; bottom: auto; width: calc(180px + 2em); margin: 0 1.5em 0 0; padding: 0; padding: 1em; text-align: right; border-radius: 0 0 5px 5px; background: #f9f9f9; } .pater__img { display: flex; width: 100%; height: 180px; } .pater::before { display: block; padding: 0 0 10px 0; } .pater:hover .pater__title { opacity: 0; } .pater__title::before { display: none; } .pater:hover .pater__description { opacity: 1; } .pater__description { display: block; } .pater__title { padding: 10px; } .pater__title, .pater__description { padding-left: 0; transition: opacity 0.5s; grid-area: 3 / 1 / 4 / 2; } }