Шляхом Альбірео

НовиниЗаписиCSSТемний Berry4.0

2021.09.09
Ми не володіємо навичками компіляції в SASS, тому оформлюємо свої забаганки в додатковому файлі CSS.
Note

В якості експериментів, мусимо інколи робити зміни для пошуку кращого варіанту, або взагалі додати нові елементи дизайну, як то - стилізація картографії, тощо. Для проби робити перекомпіляцію, звісно, немає жодного смислу, тому необхідне для своїх сторінок ми будемо викладати одним додатковим файлом.

/* Темна тема до фреймворку Berry 3.0 */

[CSS]

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap'); html, body { min-height: 100%; width: 100%; height: auto; } body { background: #063B41; font-family: 'Roboto', sans-serif; font-size: 1.0rem; font-weight: 300; color: #A1A5AA; } h1, h2, h3, h4, h5, h6 { color: #FED294; opacity: 1.0; } /* Оформлення коду і приміток */ code { --code-background: #26555A; white-space: pre-wrap; } pre { --pre-text-color:#bbbbbb; --pre-bg-color:#2B303B; --pre-border-left:#1d6b73 solid 5px; --pre-border-top:none; --pre-border-right:none; --pre-border-bottom:none } blockquote { --blockquote-border-left:5px solid #1F5B62; --blockquote-color:#c8e5fb; --blockquote-background:#063B41; margin:30px 0px 30px 0px; } cite { color: #FFFFFF; opacity: 0.7; white-space: pre-wrap; } /* Оформлення посилань */ a:link { color: #BD82F9; } a:visited { color: #A4AFEF; } a:hover { color: #FED294; } /* Оформлення таблиць і бордерів */ hr, th, td, thead { background-color:transparent; height:0; border:none; border-bottom:1px solid rgba(255, 255, 255, 0.08); } /* Буквиця для абзацу */ .drop-cap:first-letter { float:left; font-size:1.2em; font-weight: 400; color:#FED294; margin-right:.1rem; text-transform:uppercase; line-height:1.2; } /* Анімація контейнера при наведенні мишкою class="hover" */ @-webkit-keyframes hover { 50% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes hover { 50% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } .hover { display: inline-block; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hover:hover, .hover:focus, .hover:active { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-name: hover; animation-name: hover; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Стилізація полоси прокрутки вікна тільки для webkit*/ .element::-webkit-scrollbar { width: 10px; background-color: #2B303B; } .element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #218a8a; } .element::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #56626D; } /* Стилізація кола навкруги штампа */ .round { width: 150px; height: 150px; border-radius: 50%; border:none; border-top:1px solid rgba(199, 201, 204, .58); border-bottom:0px solid rgba(199, 201, 204, .58); border-left:0px solid rgba(199, 201, 204, .58); border-right:1px solid rgba(199, 201, 204, .58); }