В якості експериментів, мусимо інколи робити зміни для пошуку кращого варіанту, або взагалі додати нові елементи дизайну, як то - стилізація картографії, тощо. Для проби робити перекомпіляцію, звісно, немає жодного смислу, тому необхідне для своїх сторінок ми будемо викладати одним додатковим файлом.
/* Темна тема до фреймворку 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);
}