: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); } }