:root {
--vivaldi-red: #cf2e2e;
--accent: #cf2e2e;
--accent_select: rgb(0 0 0 / 21%);
--text: #efc414;
--text_accent: #fff;
--action_button: #4c70f0;
--text_a_button: #fff;
--text_link: #4c70f0;
--bg: #fff;
--bg_drawer: #303450;
--text_drawer: #bec0d7;
--inset_block: inset 1px 4px 7px rgb(0 0 0 / 42%);
--fav: rgb(255, 237, 0);
--bg_fav: #ffffd6;
--warning: #b60100;
--info: rgba(232, 240, 254, 0.75);
--scroll: #96a0ff;
--announcement: #ece7bf;
--mDefault: #282c37;
--text_mute: #bccdfa;
--action_push: scale(0.95);
--selected_card: #eee;
}
html {
text-rendering: optimizeLegibility;
}
.ui__header {
background: var(--accent);
border-bottom: 1px solid rgba(0,0,0,0.075);
}
.columns-area__panels__pane--navigational .navigation-panel {
background: var(--accent);
border-left: 1px solid #b3b2ce;
color: var(--accent_text);
}
.tabs-bar__wrapper {
background: var(--info);
backdrop-filter: blur(8px);
}
.column-back-button, .column-header {
background: transparent;
}
.column-header__button {
background: transparent;
}
a.column-link--transparent{
color: var(--text_accent);
transition: .25s box-shadow;
}
.column-header__collapsible-inner {
background: var(--info);
border-bottom: 1px solid rgb(0 0 0 / 18%);
box-shadow: var(--inset_block);
transition: 0.25s all;
}
.column-header__button.active {
background-color: var(--accent_select);
}
.button {
background-color: var(--action_button);
color: var(--text_a_button);
}
.button:active {
transform: var(--action_push);
}
a.column-link--transparent.active {
background-color: var(--accent_select);
box-shadow: var(--inset_block);
border-radius: 0 10px 10px 0;
transition: .25s box-shadow;
}
article {
border-radius: 16px;
box-shadow: rgb(0 0 0 / 5%) 0px 20px 14px 9px;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #fff;
margin-bottom: 3rem;
transition: 0.25s all;
}
article:has( button.icon-button.star-icon.active ) {
background-color: var(--bg_fav);
transition: 0.25s all;
}
.status {
border: none;
}
.column>.scrollable {
background: transparent;
border: none;
}
.focusable:focus {
background: var(--selected_card);
}
.account__section-headline .active, .account__section-headline a:hover {
color: var(--text_link);
}
.icon-button.star-icon.active {
z-index: 999999999999;
}
.icon-button.star-icon.active, .notification__favourite-icon-wrapper .fa.star-icon {
color: var(--fav);
filter: drop-shadow(0px 0px 5px black);
transition: 0.25s all;
}
.no-reduce-motion .icon-button.star-icon.activate>.fa-star {
animation-duration:1s;
animation-name:spinZoom;
animation-fill-mode:both;
animation-iteration-count:1;
animation-timing-function: ease;
}
.no-reduce-motion .icon-button.star-icon.deactivate>.fa-star {
animation-duration:1s;
animation-name:unSetItem;
animation-fill-mode:both;
animation-iteration-count:1;
}
.dismissable-banner {
background: var(--info);
}
@media screen and (max-width: 1174px){
}
@keyframes spinZoom {
0% {
z-index: 90000;
}
70% {
z-index:90000;
transform:scale(40) rotate(360deg);
filter:drop-shadow(3px 3px 50px black);
}
100% {
z-index:0;
filter:drop-shadow(0);
transform:scale(1) rotate(360deg);
}
}
@keyframes unSetItem {
70% {
transform:scale(.01) rotate(360deg);
}
100% {
transform:scale(1) rotate(360deg);
}
}
Comments