343 lines
9.8 KiB
SCSS
Executable File
343 lines
9.8 KiB
SCSS
Executable File
// Defined in scss file instead of sass because indented syntax does not have multiline maps
|
|
// https://github.com/sass/sass/issues/216
|
|
|
|
@use "sass:map";
|
|
|
|
// This section is for colour shades
|
|
$theme: (
|
|
// darker
|
|
"bg-0": #252628,
|
|
"bg-1": #303336,
|
|
// regular
|
|
"bg-2": #36393f,
|
|
// lighter
|
|
"bg-3": #3f4247, // slightly
|
|
"bg-4": #44474b, // noticably
|
|
"bg-5": #4f5359, // brightly
|
|
|
|
"fg-bright": #fff,
|
|
"fg-main": #ddd,
|
|
"fg-dim": #bbb,
|
|
"fg-dimmer": #888,
|
|
"fg-warning": #fdca6d,
|
|
|
|
"edge-grey": #a0a0a0,
|
|
"placeholder": #c4c4c4,
|
|
|
|
"link": #8ac2f9,
|
|
|
|
"power-deep": #c62727,
|
|
"power-fg": "#fff",
|
|
|
|
"image-dropdown": url(/static/images/arrow-down-wide-dark.svg),
|
|
"disabled-image-dropdown": url(/static/images/arrow-down-disabled-wide-dark.svg),
|
|
|
|
/////
|
|
|
|
"bg-overlay": #20202080,
|
|
"bg-panel": rgba(0.9803921568627451, 0.6666666666666666, 0.6705882352941176, 0.875),
|
|
"bg-hover": #2f323f,
|
|
"bg-input": #292b36,
|
|
"bg-input-disabled": #15161c
|
|
);
|
|
|
|
// This section is for colour meanings
|
|
$theme: map.merge($theme, (
|
|
"bg-dim": map.get($theme, "bg-0"),
|
|
"bg-nav": map.get($theme, "bg-5"),
|
|
));
|
|
|
|
// Eir's stuff...
|
|
|
|
@font-face {
|
|
font-family: Terminess;
|
|
src: url(/static/fonts/TerminessNerdFontMono-Regular.ttf);
|
|
}
|
|
@font-face {
|
|
font-family: Terminess;
|
|
src: url(/static/fonts/TerminessNerdFontMono-Bold.ttf);
|
|
font-weight: bold;
|
|
}
|
|
@font-face {
|
|
font-family: Terminess;
|
|
src: url(/static/fonts/TerminessNerdFontMono-Italic.ttf);
|
|
font-style: italic;
|
|
}
|
|
@font-face {
|
|
font-family: Terminess;
|
|
src: url(/static/fonts/TerminessNerdFontMono-BoldItalic.ttf);
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(rgba(130, 88, 88, 0.875), rgba(130, 88, 88, 0.5)), url("https://eir-nya.gay/res/images/cubes.png");
|
|
background: -webkit-linear-gradient(rgba(130, 88, 88, 0.875), rgba(130, 88, 88, 0.5)), url("https://eir-nya.gay/res/images/cubes.png");
|
|
background: -moz-linear-gradient(rgba(130, 88, 88, 0.875), rgba(130, 88, 88, 0.5)), url("https://eir-nya.gay/res/images/cubes.png");
|
|
background: -o-linear-gradient(rgba(130, 88, 88, 0.875), rgba(130, 88, 88, 0.5)), url("https://eir-nya.gay/res/images/cubes.png");
|
|
background: -ms-linear-gradient(rgba(130, 88, 88, 0.875), rgba(130, 88, 88, 0.5)), url("https://eir-nya.gay/res/images/cubes.png");
|
|
background-color: transparent !important;
|
|
background-attachment: fixed !important;
|
|
|
|
font-family: Terminess, hack, 'Courier New', courier, monospace !important;
|
|
font-size: 14px !important;
|
|
}
|
|
body.dark {
|
|
background: url("https://eir-nya.gay/res/images/cubes-dark.png"), linear-gradient(rgba(130, 88, 88, 0.875), rgba(130, 88, 88, 0.5));
|
|
background: url("https://eir-nya.gay/res/images/cubes-dark.png"), -webkit-linear-gradient(rgba(130, 88, 88, 0.875), rgba(130, 88, 88, 0.5));
|
|
background: url("https://eir-nya.gay/res/images/cubes-dark.png"), -moz-linear-gradient(rgba(130, 88, 88, 0.875), rgba(130, 88, 88, 0.5));
|
|
background: url("https://eir-nya.gay/res/images/cubes-dark.png"), -o-linear-gradient(rgba(130, 88, 88, 0.875), rgba(130, 88, 88, 0.5));
|
|
background: url("https://eir-nya.gay/res/images/cubes-dark.png"), -ms-linear-gradient(rgba(130, 88, 88, 0.875), rgba(130, 88, 88, 0.5));
|
|
}
|
|
|
|
/* Light toggle */
|
|
.light-button {
|
|
position: relative;
|
|
margin: 0 !important;
|
|
padding-right: 16px !important;
|
|
|
|
.light-toggle {
|
|
z-index: 1;
|
|
position: absolute;
|
|
padding: 0;
|
|
margin: 0;
|
|
bottom: 8px;
|
|
left: 0;
|
|
width: calc(100% - 8px);
|
|
height: calc(100% - 16px);
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
|
|
cursor: url("/static/images/cursors/pointer.cur"), pointer;
|
|
|
|
&:checked ~ .light-off,
|
|
&:not(:checked) ~ .light-on {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
* {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
&.hidden {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
button:not([disabled]),
|
|
.main-nav .search-form .search-icon {
|
|
cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
|
|
}
|
|
button[disabled], select {
|
|
cursor: url("/static/images/cursors/default.cur"), default !important;
|
|
}
|
|
button:not(.videoControlBtn):not(.captionBtn):not(.redownloadBtn), select, input:not([type="range"]):not(.dearrow-button-list):not(.dearrow-button-video):not(.light-toggle), .continuation-btn {
|
|
background-color: map.get($theme, "bg-input") !important;
|
|
}
|
|
button[disabled]:not(.redownloadBtn), select[disabled], input[disabled] {
|
|
background-color: map.get($theme, "bg-input-disabled") !important;
|
|
}
|
|
.checkbox-hider__container, .data-management .delete-confirm-container {
|
|
background-color: map.get($theme, "bg-input") !important;
|
|
border-radius: 0px;
|
|
}
|
|
.checkbox-hider__label {
|
|
cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
|
|
}
|
|
.border-look:not([disabled]) {
|
|
background-color: map.get($theme, "bg-input") !important;
|
|
}
|
|
|
|
details:not(.thumbnail__more):not(.fetch-error) {
|
|
background-color: map.get($theme, "bg-input") !important;
|
|
border-radius: 0px !important;
|
|
border: none;
|
|
}
|
|
details summary {
|
|
cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
|
|
}
|
|
.toast-container .close-overlay {
|
|
cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
|
|
}
|
|
.description, .info-secondary {
|
|
cursor: url("/static/images/cursors/text.cur"), text !important;
|
|
}
|
|
|
|
body > div > main:not(.home-page)/*, main.error*/ {
|
|
background-color: map.get($theme, "bg-overlay") !important;
|
|
padding: 40px 20px 20px;
|
|
}
|
|
|
|
.main-nav {
|
|
background-color: map.get($theme, "bg-overlay") !important;
|
|
|
|
.link:focus,
|
|
.link:hover {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.search-form .search {
|
|
background-color: map.get($theme, "bg-input") !important;
|
|
}
|
|
}
|
|
.home-page {
|
|
.text-content {
|
|
background-color: map.get($theme, "bg-overlay");
|
|
}
|
|
.encouraging-message {
|
|
background-color: transparent;
|
|
}
|
|
input {
|
|
background-color: map.get($theme, "bg-input");
|
|
}
|
|
}
|
|
.settings-page {
|
|
.more-settings {
|
|
border-radius: 0px;
|
|
background-color: map.get($theme, "bg-input") !important;
|
|
}
|
|
}
|
|
.related-videos, .search-page {
|
|
background-color: map.get($theme, "bg-panel") !important;
|
|
margin-top: 20px;
|
|
}
|
|
#below-video-container .below-video-radio-container label {
|
|
cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
|
|
}
|
|
.channel-page {
|
|
.channel-data {
|
|
background-color: transparent !important;
|
|
border-radius: 0px;
|
|
}
|
|
.channel-tabs-header .header.selected {
|
|
background: none !important;
|
|
}
|
|
.channel-tabs-inner {
|
|
background: none !important;
|
|
border: none !important;
|
|
}
|
|
.videos {
|
|
background-color: transparent !important;
|
|
padding: 24px;
|
|
padding-bottom: 0px;
|
|
}
|
|
}
|
|
.video-list-item--watched {
|
|
background: map.get($theme, "bg-overlay") !important;
|
|
}
|
|
.main-video-section {
|
|
background-color: map.get($theme, "bg-panel");
|
|
padding: none;
|
|
margin: 20px;
|
|
height: fit-content;
|
|
|
|
.ctrlf5notice {
|
|
border-bottom: 1px solid map.get($theme, "edge-grey")
|
|
}
|
|
|
|
.videoControls {
|
|
--accent-color: #b44c4d !important;
|
|
|
|
// Can't replace mixin so manually apply to the same elements.
|
|
> button.active, > button:active,
|
|
.settingsPopout .setting.active:not([disabled]) .icon,
|
|
.settingsPopout .setting:active:not([disabled]) .icon,
|
|
.settingsPopout .setting.active:not([disabled]) .submenuIcon,
|
|
.settingsPopout .setting:active:not([disabled]) .submenuIcon {
|
|
filter: saturate(0.25) brightness(4) !important;
|
|
}
|
|
|
|
.settingsPopout .setting:not(.header:not(.goBack)) {
|
|
cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
|
|
}
|
|
|
|
.popout {
|
|
background-color: map.get($theme, "bg-overlay") !important;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.timeline {
|
|
.seek {
|
|
cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
|
|
|
|
& + .fakeThumb {
|
|
background-image: url(/static/images/eir-walk.gif);
|
|
background-color: transparent !important;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
image-rendering: pixelated;
|
|
transform: translateY(-0.375em);
|
|
scale: 2;
|
|
border: none;
|
|
|
|
transition: transform 0.2s;
|
|
|
|
--outline-width: 1px;
|
|
--outline-color: #00000080;
|
|
filter:
|
|
drop-shadow(calc(var(--outline-width) * -1) 0px var(--outline-color))
|
|
drop-shadow(calc(var(--outline-width) * 1) 0px var(--outline-color))
|
|
drop-shadow(0px calc(var(--outline-width) * -1) var(--outline-color))
|
|
drop-shadow(0px calc(var(--outline-width) * 1) var(--outline-color));
|
|
}
|
|
|
|
&.paused + .fakeThumb {
|
|
background-image: url(/static/images/eir-stand.png);
|
|
}
|
|
|
|
&:active + .fakeThumb {
|
|
background-image: url(/static/images/eir-stand.png);
|
|
transform: translateY(-0.625em);
|
|
}
|
|
}
|
|
}
|
|
.volumePopout .volumeBar {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
#sb-skip-prompt {
|
|
background-color: map.get($theme, "bg-overlay") !important;
|
|
backdrop-filter: blur(10px);
|
|
cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
|
|
}
|
|
|
|
/* This doesn't seem to work... */
|
|
.video::-webkit-media-controls-volume-slider,
|
|
.video::-webkit-media-controls-play-button,
|
|
.video::-webkit-media-controls-mute-button,
|
|
.video::-webkit-media-controls-seek-back-button,
|
|
.video::-webkit-media-controls-seek-forward-button,
|
|
.video::-webkit-media-controls-fullscreen-button,
|
|
.video::-webkit-media-controls-rewind-button,
|
|
.video::-webkit-media-controls-toggle-closed-captions-button {
|
|
cursor: url("/static/images/cursors/default.cur"), default !important;
|
|
}
|
|
}
|
|
.description {
|
|
background-color: transparent !important;
|
|
--regular-background: transparent !important;
|
|
--highlight-background: #2f323f !important; // uggghhh why
|
|
font-size: inherit !important;
|
|
|
|
.timestamp--active::after {
|
|
border-color: var(--highlight-background);
|
|
}
|
|
}
|
|
.comment-base {
|
|
.comment-content, .comment-stats {
|
|
cursor: url("/static/images/cursors/text.cur"), text !important;
|
|
}
|
|
}
|
|
.footer__center {
|
|
background-color: map.get($theme, "bg-overlay") !important;
|
|
}
|
|
|
|
.dearrow-button-list, .dearrow-button-video {
|
|
cursor: url("/static/images/cursors/pointer.cur"), pointer !important;
|
|
}
|