/** * DeepSID / CSS */ /* ---- Custom color variables (default theme) ------------------------------- */ :root { --color-top: #fff; /* Full white for e.g. hovering on elements */ --color-bottom: #000; /* Full black for e.g. bolded text in settings */ --color-bg: #e7e8e0; /* Body background */ --color-bg-box: #f7f8f5; /* General background color for various boxes and pages */ --color-avatar-bg: var(--color-top); /* Background color for all types of avatars */ --color-logo: #d3d4c6; /* Color for e.g. top left logo and disabled song rows */ --color-disabled: var(--color-logo); --color-dot: #8a8c7a; /* Color for e.g. small split dots in text */ --color-bg-sid-selected: #ebebe5; /* Background of e.g. a selected SID row in the browser */ --color-bg-sid-hover: #f1f1ed; /* Background when hovering on a SID row in the browser */ --color-bg-edit-area: rgb(71, 73, 55, 0.08); --color-bg-scope: var(--color-top); --color-bg-slider: var(--color-top); /* Color of the dragging bar for changing the sundry box size */ --color-bg-songs-buttons: var(--color-top); /* The top container with the root/back buttons and path */ --color-new-bg: #ef0; /* Color for small "NEW" labels on SID rows in the browser */ --color-new-shadow: var(--color-bottom); --color-bg-ptype: var(--color-top); /* Color for the small "RSID" labels */ --color-code-bg: #f4f3ee; /* Colors for element */ --color-code-border: #ebeae1; --color-anchor: #5a6701; /* Standard hyperlink */ --color-anchor-hover: #e95927; --color-anchor-notable: var(--color-anchor); --color-anchor-hover-notable: var(--color-anchor-hover); --color-table: #a8ad95; /* Standard colors for ,
and elements */ --color-outline: rgba(168, 173, 149, 0.5); --color-table-th-bg: #f5f6f2; --color-table-border: #b0b29a; --color-table-border-thandle: #d5d5c9; /* Color of line below tiny handle in group table */ --color-input-text: #666; /* When text is present in an edit box but not being edited */ --color-input-text-focus: #111; /* When typing in an edit box */ --color-selection-bg: #d2d5cb; /* When marking text to be copied */ --color-selection-text: #222; --color-notable: #f8f848; /* Color for notable achievements in composer profile */ --color-oldest-in-top: #c86d55; /* Color for right corner line above CSDb comments table */ --color-emphasize: #ffff80; /* Color for emphasizing handles or groups in CSDb releases */ --color-empSec: #cfc; --color-empThird: #fdd; --color-bg-block-data: var(--color-top); --color-text-block: var(--color-bottom); --color-text-block-toggled: #9a9a90; /* #7c7e60 #929292 */ --color-text-block-changed: #c00; --color-text-spottext: var(--color-top); --color-text-new-user: #0a0; --color-text-tag: var(--color-top); /* Default tag colors */ --color-bg-tag: #a8ad95; --color-bg-tag-hover: #b6b9a5; --color-text-tag-event: var(--color-text-tag); --color-bg-tag-event: #8aad85; --color-text-tag-prod: var(--color-text-tag); --color-bg-tag-prod: #959aad; --color-text-tag-origin: var(--color-text-tag); --color-bg-tag-origin: #b09292; --color-text-tag-mixorigin: var(--color-text-tag); --color-bg-tag-mixorigin: linear-gradient(to right, #b09292 5%,#a8ad95 95%); --color-bg-tag-digi: #6c6c6c; --color-text-tag-digi: var(--color-text-tag); --color-bg-tag-r64start: #6c7cc0; --color-bg-tag-remix64: linear-gradient(to right, var(--color-bg-tag-r64start) 0%,#5458b0 100%); --color-bg-tag-gb64start: #7b7363; /*#634e42;*/ --color-bg-tag-gamebase64: var(--color-bg-tag-gb64start); --color-text-tag-warning: var(--color-text-tag); --color-bg-tag-warning: #c33; --color-bg-cshelldb: #d5dde9; --color-bg-stats-filterbg: #f8f4e8; --color-border: #ced0c0; /* For borders and text labels where its container is disabled */ --color-border-box: #c8c8b9; /* For borders around various boxes and input fields */ --color-border-info: #7a88c8; /* Bottom border color for top info box */ --color-border-comments: var(--color-border); --color-border-scope: var(--color-timebar-border); --color-button: #474937; /* Darkest green typically used on buttons */ --color-button-border: var(--color-button); --color-button-border-idle: transparent; --color-button-border-select: var(--color-button); --color-button-text: var(--color-top); --color-button-bg-select: #f5f5f1; --color-button-text-select: var(--color-button); --color-button-hover: #62644c; /* When hovering on an ACTIVE button */ --color-button-bg-hovsel: var(--color-button-text); --color-button-text-hovsel: var(--color-button-hover); --color-button-border-hovsel: var(--color-button-hover); --color-button-inverted: #f5f5f1; /* Almost white */ --color-button-disabled: #c8c9b9; /* Disabled button */ --color-button-disabled-text: var(--color-button-inverted); --color-button-shadow: #808270; /* Button shadow */ --color-button-logout: var(--color-button-inverted); --border-button-select: var(--color-button-border-select); --shadow-button-select: 0 0 0 transparent; --shadow-button-triangle: #d2d2d2; --color-theme-selector-bg: var(--color-button); --color-theme-selector-border: var(--color-button-border); --color-theme-bg-hovtop: var(--color-top); --color-theme-bg-hovbot: var(--color-button-hover); --shadow-theme-selector: 1px 1px 2px var(--color-text-minor); --url-biglogo: url(../images/biglogo.png); --color-link-hover: #e95927; /* Hovering on a link */ --color-text-body: #404040; /* Default text color */ --color-text-notable: var(--color-text-body); --color-text-subtle: #a1a294; /* For e.g. top links */ --color-text-fine: #68695a; /* For e.g. login user name */ --color-text-dim: #b0b29a; /* For e.g. edit box border and small text on white background */ --color-text-player: #7c7e60; /* For e.g. login response text and small text in players tab */ --color-text-faint: #a8ad95; /* For e.g. HVSC version text in info box */ --color-text-del: var(--color-text-faint); --color-text-distinct: #555; /* For e.g. SID title and digi sample rates in info box */ --color-text-ptype: var(--color-text-distinct); --color-text-sid-selected: var(--color-button); --color-text-minor: #969787; /* For e.g. small text lines in SID rows */ --color-text-info-selected: none; --color-text-c64font: #555743; /* Used for the C64 font in the CGSC folder */ --color-text-label-disabled: var(--color-border); --color-text-time: #c6c6c6; --color-text-sundry-disabled: #b2b3ad; --color-text-fa-common: #c8c8c8; --color-tags-bracket: #a1a294; /* Used for horizontal tag start-to-end brackets */ --color-tags-bracket-up: #949494; --color-border-subtune: #888; /* Border for round sub tune indicators in playlists */ --color-text-subtune: #222; /* Text color for sub tune indicators in playlists */ --color-bg-subtune: var(--color-top); --color-text-resp-good: #494; /* Good response text color in user form */ --color-text-resp-bad: #a44; /* Bad response text color in user form */ --color-bg-ffi: var(--color-top); --color-text-ffi: #181818; --color-text-sidsp-2sid: #44b; --color-border-sidsp-2sid: #44b; --color-bg-sidsp-2sid: #f6f6fa; --color-text-sidsp-3sid: #b44; --color-border-sidsp-3sid: #b44; --color-bg-sidsp-3sid: #faf6f6; --color-scrollbar-thumb: #ccccbe; --color-scrollbar-thumb-hover: #a5a59a; --color-scrollbar-thumb-active: #606059; --color-scrollbar-track: #ecece6; --color-settings-cog-icon: var(--color-button-hover); --color-settings-bold: var(--color-bottom); --color-bg-playerinfo: var(--color-top); --color-player-package: #f8f1f1; /* Background colors for headers in player/editor table */ --color-player-features: #fafaee; --color-player-player: #f1f1f8; --color-player-editor: #f2f8f2; --color-forum-admin: #b44; --color-forum-moderator: #44b; --color-forum-trusted: #1a1; --color-dialog-cover: var(--color-bottom); --color-dialog-shadow: #040404; --color-ctp-circle: #111; --color-pwd-good: #080; /* When changing the password in settings */ --color-pwd-bad: #a00; --color-viz-msg-emu: var(--color-pwd-bad); --color-viz-msg-buffer: #00a; --color-viz-msg-enable: var(--color-pwd-good); --color-sid-row-error-entry: #a33; /* Error colors for SID file row that can't be played */ --color-sid-row-error-info: #cc8282; --color-sid-row-error-bg: #f5eaea; --color-graph-channel-text: #777; --color-graph-channel-bg: var(--color-top); --color-graph-border: #aaa; --color-graph-bg: var(--color-top); --url-vote: url(../images/vote_bright.png); --bottom-connect-down: -9px; /* SVG images */ /* @link https://codepen.io/sosuke/pen/Pjoqqp - NOTE: The SVG must be black as default for this to work! */ --svg-filter-white: invert(100%) sepia(0%) saturate(7487%) hue-rotate(319deg) brightness(103%) contrast(104%); --svg-filter-button: invert(26%) sepia(15%) saturate(581%) hue-rotate(27deg) brightness(96%) contrast(93%); --svg-filter-button-hover: invert(36%) sepia(21%) saturate(406%) hue-rotate(26deg) brightness(99%) contrast(91%); --svg-filter-button-disabled: invert(86%) sepia(12%) saturate(216%) hue-rotate(25deg) brightness(93%) contrast(89%); --svg-filter-text-player: invert(50%) sepia(14%) saturate(593%) hue-rotate(25deg) brightness(94%) contrast(88%); --svg-filter-viz-msg-buffer: none; --svg-filter-icon-bottom: none; --svg-filter-loading-spinner: var(--svg-filter-button); --svg-filter-row-spinner: var(--svg-filter-button); --svg-filter-icon-flash: invert(52%) sepia(69%) saturate(1670%) hue-rotate(8deg) brightness(95%) contrast(101%); --svg-filter-icon-plus: invert(18%) sepia(67%) saturate(7064%) hue-rotate(93deg) brightness(103%) contrast(106%); --svg-filter-icon-office: invert(23%) sepia(37%) saturate(2924%) hue-rotate(28deg) brightness(96%) contrast(101%); --svg-filter-icon-editor: invert(26%) sepia(11%) saturate(0%) hue-rotate(244deg) brightness(90%) contrast(90%); --svg-filter-icon-cstar: invert(8%) sepia(84%) saturate(5326%) hue-rotate(5deg) brightness(93%) contrast(114%); --svg-filter-icon-time: invert(50%) sepia(0%) saturate(0%) hue-rotate(184deg) brightness(93%) contrast(91%); --svg-filter-icon-to-top: var(--svg-filter-white); --svg-filter-icon-visuals: var(--svg-filter-button); --svg-filter-icon-sticky: var(--svg-filter-icon-editor); --svg-filter-icon-disabled: var(--svg-filter-white); --svg-filter-edit-tags: var(--svg-filter-white); --svg-filter-close: var(--svg-filter-button); --svg-filter-money: invert(59%) sepia(11%) saturate(1135%) hue-rotate(38deg) brightness(90%) contrast(84%); --svg-filter-tn-disabled: var(--svg-filter-white); --svg-bg-star-orange: url(../images/if_star_orange.svg) 0 0 / 18px 18px no-repeat; --svg-bg-star-empty-voted: url(../images/if_star_empty_voted.svg) 0 0 / 18px 18px no-repeat; --svg-bg-star-empty-unvoted: url(../images/if_star_empty_unvoted.svg) 0 0 / 18px 18px no-repeat; /* Custom context menu */ --color-context-bg: var(--color-top); --color-context-border: var(--color-border-box); --color-context-shadow: rgba(0, 0, 0, 0.2); --color-context-bg-hover: #eeeee8; /* Color when hovering on a line in a context menu */ --color-context-text-hover: var(--color-text-body); --color-context-divider: var(--color-border-box); --color-context-triangle: var(--color-button); --color-context-disabled: var(--color-border); /* Tabs */ --color-tab-bg: #eff1eb; /* Background color of a tab */ --color-tab-border: var(--color-border-box); --color-tab-text-color: var(--color-button-shadow); --color-tab-selected-bg: var(--color-bg-box); --color-tab-selected-text: var(--color-text-fine); --color-tab-hover-bg: var(--color-top); --color-tab-hover-text: var(--color-button-hover); --color-tab-text-disabled: #d7d7cb; /* For when a tab is disabled */ --color-tab-border-disabled: #dadace; --color-tab-bg-disabled: var(--color-context-item-hover); --color-notification-text: var(--color-top); --color-notification-default: #a00; /* Background color of notifications in the corner of tabs */ --color-notification-csdb: #100098; /* Original CSDb color */ --color-notification-gb64: #070; --color-notification-player: #808; --color-notification-remix: #777; --color-notification-stil: #088; /* SOASC status in top */ --color-soasc-status-bg: var(--color-tab-border-disabled); --color-soasc-status-border: var(--color-logo); --color-soasc-status-text: var(--color-button-hover); --color-soasc-status-unknown: #999; /* SOASC status field in top */ --color-soasc-status-up: #0b0; --color-soasc-status-down: #c22; --color-soasc-status-out: #aa0; --color-soasc-handlers-down: #d00; /* Used in the drop-down box for SID handlers */ /* Colors in root (front page) boxes */ --color-root-good-bg: #efe; /* Colors for good front page news */ --color-root-good-border: #aca; --color-root-good-text: #070; --color-root-bad-bg: #fee; /* Colors for bad front page news */ --color-root-bad-border: #caa; --color-root-bad-news-text: var(--color-text-body); --color-root-bg-random: #fafff8; /* Color for root random folder box when hovering on it */ --color-root-bg-rec: #eeefe9; /* Color for root recommended folder box when hovering on it */ --color-root-random-text: #5e6048; --color-root-random-bigfont: #333; --color-root-random-shadow: var(--color-bg-box); /* Corner flags in info box */ --color-pal: #669; /* Color for PAL corner flag box */ --color-pal-hover: #77a; --color-ntsc: #955; /* Color for NTSC corner flag box */ --color-ntsc-hover: #b06c6c; --color-6581-bg: var(--color-button); --color-6581-text: var(--color-button-inverted); --color-6581-border: var(--color-button); --color-6581-bg-hover: var(--color-button-hover); --color-6581-text-hover: var(--color-top); --color-6581-border-hover: var(--color-button-hover); --color-8580-bg: #fafafa; /* Background color of 8580 corner flag box */ --color-8580-text: var(--color-text-body); --color-8580-bg-hover: var(--color-top); --color-8580-text-hover: var(--color-button-hover); /* Memory bar colors */ --color-memory-bg: #a4aeda; /* Color of the inside of the memory bar */ --color-memory-border-top: #44529d; /* Typical dark blue C64 color */ --color-memory-chunk: var(--color-memory-border-top); --color-memory-border-lr: rgba(68, 82, 157, 0.3); --color-memory-lid-side: rgba(68, 82, 157, 0); --color-memory-lid-middle: rgba(68, 82, 157, 1); --color-memory-rom: #cdd3eb; --shadow-memory: none; --shadow-memory-chunk: var(--shadow-memory); /* Time bar colors */ --color-timebar-bg: #fcfcfc; /* Color of the inside of the time bar */ --color-timebar-border: #c4c5b3; /* Color for border of e.g. time bar, permalinks, etc. */ --color-timebar-resid: #964; --color-timebar-jsidplay2: #6f7608; --color-timebar-websid: var(--color-memory-border-top); --color-timebar-hermit: rgb(38, 99, 41); --color-timebar-asid: #666; --color-timebar-lemon: rgb(104, 44, 116); --color-timebar-youtube: #a44; /* This and above are time bar colors for various SID handlers */ --color-slider-track: #7e8260; /* Color of the rail track of the volume slider */ /* CSDb music competition folder icons */ --color-compo-bg: var(--color-root-bg-random); --color-compo-text: var(--color-bottom); --color-compo-border: var(--color-bottom); --color-compo-copy: #900; --color-compo-demo: #080; --color-compo-meeting: #6c6c6c; --color-compo-internal: #6f7608; --color-compo-c64: #6c7bc2; --color-compo-8bit: #000; --color-compo-standalone: #00a; --shadow-compo: 1px 1.5px 3px var(--color-text-dim); /* Player type strips */ --color-strip-pl-a: #c0c0c0; --color-strip-pl-b: #7b7; --color-strip-pl-c: #7bb; --color-strip-pl-d: #99b; --color-strip-pl-e: #bb7; --color-strip-pl-f: #b7b; /* Styled select colors */ --color-styled-select-text: var(--color-button); --color-styled-select-border: var(--color-border-box); --color-styled-select-bg: var(--color-top); --color-styled-active-bg: var(--color-button-inverted); --color-styled-arrow: var(--color-button); --color-styled-disabled: #777; --color-styled-arrow-disabled: var(--color-styled-disabled); --color-styled-shadow: rgba(0, 0, 0, 0.3); --color-styled-item-disabled: #c8c8ba; --color-styled-dotted-line: #a4a4a4; --color-styled-resetcolor: #444; /* Piano synth box colors */ /* NOTE: File 'viz.js' also contains direct color settings for both piano and graphs views. The scope line color is set with a small array in the top of the 'viz.js' file. */ --color-piano-inverted: #ddd; /* Bright gray */ --color-piano-bg: #444; /* Background of synth box (overridden by a gradient) */ --color-piano-bg-lg1: #555; /* Linear gradient colors for background of synth box */ --color-piano-bg-lg2: #080808; --color-piano-pv-wrap1: #111; /* The wrap box (border) gradient colors of a voice button */ --color-piano-pv-wrap2: #3c3c3c; --color-piano-vc-on: #222; /* Voice button (overridden by a gradient) */ --color-piano-vc-on-rg1: #f6fcf6; /* Radial gradient colors for voice button */ --color-piano-vc-on-rg2: #2c2; --color-piano-vc-on-rg2-2sid: #44d; --color-piano-vc-on-rg2-3sid: #d44; --color-piano-vc-on-border: #3c3c3c; --color-piano-vc-on-shadow: #afa; --color-piano-vc-on-hover1: #fff; /* Radial gradient colors for hovering on a voice button */ --color-piano-vc-on-hover2: #4e4; --color-piano-vc-on-h2-2sid: #66f; --color-piano-vc-on-h2-3sid: #f66; --color-piano-vc-off-lg1: #636363; /* Colors for hovering on a voice button turned off */ --color-piano-vc-off-lg2: #171717; --color-piano-tr-border: #888; /* Bottom border of the flat pulsating info triangle */ --color-piano-pmc-lg1: #303030; /* Linear gradient colors (border) for modulation arrows */ --color-piano-pmc-lg2: #434343; --color-piano-pr-on-lg1: #faa; /* Ring modulation arrow */ --color-piano-pr-on-lg2: #f44; --color-piano-pr-shadow: #f66; --color-piano-ph-on-lg1: #bbf; /* Hard sync arrow */ --color-piano-ph-on-lg2: #66f; --color-piano-ph-shadow: #7272ff; --color-piano-pm-off: #232323; /* Background color for when ring mod or hard sync is off */ --color-piano-bar: #333; /* Background of pulse/filter bars (overridden by gradient) */ --color-piano-bar-lg1: #0c0c0c; /* Linear gradient colors for background of pulse/filter bars */ --color-piano-bar-lg2: #3c3c3c; --color-piano-pb-lp-lg1: #1e1e1e; /* Filter passband colors (border) */ --color-piano-pb-lp-lg2: #464646; --color-piano-pb-bp-lg1: #111; --color-piano-pb-bp-lg2: #3c3c3c; --color-piano-pb-hp-lg1: #0e0e0e; --color-piano-pb-hp-lg2: #333; --color-piano-pb-on: #f55; /* Filter passband when on */ --color-piano-pb-on-lg1: #fdd; --color-piano-pb-on-lg2: #f66; --color-piano-pb-on-border: #e44; --color-piano-pb-on-shadow: #f88; --color-piano-pb-off: #1e1e1e; /* Filter passband when off */ --color-piano-pb-off-lg1: #333; --color-piano-pb-off-lg2: #1e1e1e; --color-piano-pb-off-border: #111; /* Solo button */ --height-button-solo: 17px; --top-button-solo: 1px; } /* ---- Custom color variables (dark theme) ---------------------------------- */ [data-theme="dark"] { --color-bg: #181818; /* Body background */ --color-bg-box: #242424; /* General background color for various boxes and pages */ --color-avatar-bg: #393939; --color-logo: #31362e; --color-disabled: #444; --color-bg-sid-selected: #343434; /* Background of e.g. a selected SID row in the browser */ --color-bg-sid-hover: #2c2c2c; /* Background when hovering on a SID row in the browser */ --color-bg-edit-area: var(--color-bg); --color-bg-scope: #111; --color-bg-slider: #5a5a5a; --color-bg-songs-buttons: linear-gradient(to bottom, #343434 10%,#181818 100%); --color-new-bg: #d9ce6f; --color-bg-ptype: #888; --color-code-bg: #383838; --color-code-border: #484848; --color-anchor: #e0d68a; --color-anchor-hover: #f5f5f1; --color-anchor-notable: #980000; --color-anchor-hover-notable: #e80000; --color-table: #606060; /* Standard colors for ,
and elements */ --color-outline: rgba(96, 96, 96, 0.3); --color-table-th-bg: transparent; --color-table-border: #4c4c4c; --color-table-border-thandle: #3c3c3c; --color-selection-bg: #e0d68a; --color-selection-text: #222; --color-notable: #d9ce6f; --color-emphasize: #449; --color-empSec: #005000; --color-empThird: #700000; --color-bg-block-data: var(--color-bottom); --color-text-block: #bcbebc; --color-text-block-toggled: var(--color-top); --color-text-block-changed: #e66; --color-text-spottext: var(--color-bottom); --color-text-new-user: #0f0; --color-text-tag: var(--color-bottom); /* Default tag colors */ --color-bg-tag: #b6b9a5; --color-bg-tag-hover: #c8cbbb; --color-text-tag-event: var(--color-text-tag); --color-bg-tag-event: #a9c9a5; --color-text-tag-prod: var(--color-text-tag); --color-bg-tag-prod: #a5a9b9; --color-text-tag-origin: var(--color-text-tag); --color-bg-tag-origin: #bca3a2; --color-text-tag-mixorigin: var(--color-text-tag); --color-bg-tag-mixorigin: linear-gradient(to right, #bca3a2 25%,#b6b9a5 100%); --color-bg-tag-digi: #fafafa; --color-text-tag-digi: var(--color-text-tag); --color-bg-tag-r64start: #6878b0; --color-bg-tag-remix64: linear-gradient(to right, var(--color-bg-tag-r64start) 25%,#465692 100%); --color-bg-tag-gb64start: #685246; /* #634e42; */ --color-bg-tag-gamebase64: var(--color-bg-tag-gb64start); --color-text-tag-warning: var(--color-text-tag); --color-bg-tag-warning: #f88; --color-bg-cshelldb: #1b2433; --color-bg-stats-filterbg: #2e2724; --color-border: #0c0c0c; /* For borders and text labels where its container is disabled */ --color-border-box: #2c2c2c; /* For borders around various boxes and input fields */ --color-border-info: #303a70; /* Bottom border color for top info box */ --color-border-comments: #4c4c4c; --color-border-scope: #3e3e3e; --color-button: linear-gradient(to bottom, #6e7965 0%,#4b5345 85%); /* #4e5648 #565f4f #4a5244 #5a6650 #415d43 */ --color-button-border: #555e4e; --color-button-border-idle: var(--color-button-border); --color-button-border-select: #f5f5f1; --color-button-bg-select: linear-gradient(to bottom, #daddd7 0%,#a0a999 95%); --color-button-text-select: #4b5345; --color-button-hover: linear-gradient(to bottom, #828e78 0%,#5f6957 85%); --color-button-bg-hovsel: linear-gradient(to bottom, #eeefed 0%,#b4bbaf 95%); --color-button-text-hovsel: #565f4f; --color-button-border-hovsel: #c8cdc3; --color-button-inverted: #f5f5f1; /* Almost white */ --color-button-disabled: #31362e; /* Disabled button */ --color-button-disabled-text: #5a5f56; --color-button-shadow: none; --border-button-select: #b4bbad; --shadow-button-select: none; /*inset 1px 1px 6px #111;*/ --shadow-button-triangle: #181818; --color-theme-selector-bg: #242424; --color-theme-selector-border: var(--color-theme-selector-bg); --color-theme-bg-hovtop: #fff; --color-theme-bg-hovbot: #000; --shadow-theme-selector: 0 0 4px #f5f5f1; --url-biglogo: url(../images/biglogo_dark.png); --color-link-hover: var(--color-anchor-hover); --color-text-body: #bcbebc; /* Default text color */ /* #bec0ba */ --color-text-notable: #404040; --color-text-subtle: #666; /* For e.g. top links */ --color-text-fine: #a8ada0; /* For e.g. login user name*/ --color-text-dim: #777; --color-text-player: #777; --color-text-faint: #666; /* For e.g. HVSC version text in info box */ --color-text-del: #6c631c; --color-text-distinct: #cecece; --color-text-ptype: #000; /* For e.g. digi sample rates in info box */ --color-text-sid-selected: #fff; --color-text-minor: #888; /* For e.g. small text lines in SID rows */ --color-text-info-selected: #aaa; --color-text-c64font: #a8a8a8; --color-text-label-disabled: #555; --color-text-time: #484848; --color-text-sundry-disabled: #4a4a4a; --color-text-fa-common: #464646; --color-tags-bracket: #808080; /* Used for horizontal tag start-to-end brackets */ --color-tags-bracket-up: #949494; --color-border-subtune: #000; --color-bg-subtune: #d4d4d4; --color-text-resp-good: #6b6; --color-text-resp-bad: #d77; --color-bg-ffi: var(--color-bg); --color-text-ffi: var(--color-text-body); --color-text-sidsp-2sid: #bbe; --color-border-sidsp-2sid: #bbe; --color-bg-sidsp-2sid: #262e46; --color-text-sidsp-3sid: #ebb; --color-border-sidsp-3sid: #ebb; --color-bg-sidsp-3sid: #361e24; --color-scrollbar-thumb: #555; --color-scrollbar-thumb-hover: #6a6a6a; --color-scrollbar-thumb-active: #b7b7b7; --color-scrollbar-track: #1c1c1c; --color-settings-cog-icon: #6a6c68; --color-settings-bold: var(--color-top); --color-bg-playerinfo: #181818; --color-player-package: linear-gradient(to bottom, #906868 0%,#704848 90%); /* #805858; */ --color-player-features: linear-gradient(to bottom, #808068 0%,#606048 90%); /* #707058; */ --color-player-player: linear-gradient(to bottom, #707090 0%,#505070 90%); /* #606080; */ --color-player-editor: linear-gradient(to bottom, #709070 0%,#507050 90%); /* #608060; */ --color-forum-admin: #ebb; --color-forum-moderator: #bbe; --color-forum-trusted: #beb; --color-dialog-cover: #111; --color-dialog-shadow: #000; --color-ctp-circle: #0a0a0a; --color-pwd-good: #0a0; --color-pwd-bad: #c00; --color-viz-msg-emu: #f44; --color-viz-msg-buffer: #88f; --color-viz-msg-enable: #2d2; --color-sid-row-error-entry: #fdd; --color-sid-row-error-bg: #382828; --color-graph-channel-text: #181818; --color-graph-channel-bg: #a4a4a4; --color-graph-border: #373737; --color-graph-bg: #181818; --url-vote: url(../images/vote_dark.png); --bottom-connect-down: -8px; /* SVG images */ /* @link https://codepen.io/sosuke/pen/Pjoqqp - NOTE: The SVG must be black as default for this to work! */ --svg-filter-viz-msg-buffer: var(--svg-filter-white); --svg-filter-icon-bottom: invert(87%) sepia(6%) saturate(56%) hue-rotate(71deg) brightness(101%) contrast(90%); --svg-filter-loading-spinner: var(--svg-filter-icon-time); --svg-filter-row-spinner: var(--svg-filter-button-disabled); --svg-filter-icon-office: var(--svg-filter-icon-flash); --svg-filter-icon-visuals: invert(25%) sepia(10%) saturate(629%) hue-rotate(52deg) brightness(96%) contrast(87%); --svg-filter-icon-sticky: var(--svg-filter-viz-msg-buffer); --svg-filter-icon-disabled: var(--svg-filter-icon-visuals); --svg-filter-edit-tags: none; --svg-filter-close: var(--svg-filter-icon-bottom); --svg-filter-money: invert(58%) sepia(12%) saturate(928%) hue-rotate(38deg) brightness(98%) contrast(94%); --svg-filter-tn-disabled: invert(0%) sepia(9%) saturate(4037%) hue-rotate(328deg) brightness(104%) contrast(73%); --svg-bg-star-orange: url(../images/if_star_orange_dark.svg) 0 0 / 18px 18px no-repeat; --svg-bg-star-empty-voted: url(../images/if_star_empty_voted_dark.svg) 0 0 / 18px 18px no-repeat; --svg-bg-star-empty-unvoted: url(../images/if_star_empty_unvoted_dark.svg) 0 0 / 18px 18px no-repeat; /* Custom context menu */ --color-context-bg: #383838; --color-context-border: #666; --color-context-shadow: rgba(0, 0, 0, 0.6); --color-context-bg-hover: var(--color-context-border); --color-context-text-hover: var(--color-button-inverted); --color-context-divider: var(--color-context-border); --color-context-triangle: #aaa; --color-context-disabled: #555; /* Tabs */ --color-tab-bg: linear-gradient(to bottom, #303030 0%,var(--color-bg) 100%); --color-tab-border: var(--color-border-box); --color-tab-text-color: #6a6c68; --color-tab-selected-bg: linear-gradient(to bottom, #4c4c4c 0%,var(--color-bg-box) 100%); --color-tab-selected-text: var(--color-text-body); --color-tab-hover-bg: linear-gradient(to bottom, var(--color-text-body) 0%,#484848 100%); --color-tab-hover-text: var(--color-bottom); --color-tab-text-disabled: #3c3c3c; --color-tab-border-disabled: #202020; --color-tab-bg-disabled: #202020; --color-notification-default: #a33; --color-notification-csdb: #404c92; --color-notification-gb64: #474; --color-notification-player: #848; --color-notification-remix: #666; --color-notification-stil: #077; /* SOASC status in top */ --color-soasc-status-bg: #2a2a2a; --color-soasc-status-border: #383838; --color-soasc-status-text: var(--color-text-minor); /* Colors in root (front page) boxes */ --color-root-bg-random: #333; --color-root-bg-rec: #333; --color-root-bad-bg: #281414; --color-root-bad-border: #c00; --color-root-bad-news-text: var(--color-text-body); --color-root-random-text: #f5f5f1; --color-root-random-bigfont: #e0d68a; --color-root-random-shadow: #000; /* Corner flags in info box */ --color-6581-bg: var(--color-button); /* #585858 */ --color-6581-text: var(--color-button-inverted); --color-6581-border: #4e5648; --color-6581-bg-hover: var(--color-button-hover); --color-6581-text-hover: var(--color-top); --color-6581-border-hover: var(--color-6581-border); --color-8580-bg: #f5f5f1; --color-8580-text: #333; --color-8580-bg-hover: #fff; --color-8580-text-hover: var(--color-text-subtle); /* Memory bar colors */ --color-memory-bg: #8b97cf; --color-memory-border-top: #000; --color-memory-chunk: linear-gradient(to bottom, #5766b7 5%,#424f98 95%); /* #616fbb to #44529d */ --color-memory-border-lr: #303a70; --color-memory-lid-side: transparent; --color-memory-lid-middle: transparent; --shadow-memory: inset 0 1px 1px #dee1f0; /* #28305c #dee1f0 */ --shadow-memory-chunk: inset 0 1px 1px #99a2d3; /* Time bar colors */ --color-timebar-bg: linear-gradient(to bottom, #1c1c1c 0%,#3a3a3a 75%); --color-timebar-border: #555; --color-timebar-resid: linear-gradient(to bottom, #a0604b 20%,#78402f 100%); /* #964; */ --color-timebar-jsidplay2: linear-gradient(to bottom, #969e0a 20%,#6f7608 100%); /* #6f7608 */ --color-timebar-websid: linear-gradient(to bottom, #616fbb 20%,#44529d 100%); /* #44529d */ --color-timebar-hermit: linear-gradient(to bottom, #368e39 20%,#266329 100%); /* #266329 */ --color-timebar-asid: linear-gradient(to bottom, #777 20%,#555 100%); /* #666 */ --color-timebar-lemon: linear-gradient(to bottom, #a651bd 20%,#843a98 100%); /* #682c74 */ --color-timebar-youtube: linear-gradient(to bottom, #bd5b5b 20%,#9d3f3f 100%); /* #a44; */ --color-slider-track: #4a4a4a; /* CSDb music competition folder icons */ --shadow-compo: 0 0 4px #f5f5f1; /* Player type strips */ --color-strip-pl-a: #606060; --color-strip-pl-b: #373; --color-strip-pl-c: #377; --color-strip-pl-d: #555590; --color-strip-pl-e: #773; --color-strip-pl-f: #884888; /* Styled select colors */ --color-styled-select-text: #404040; --color-styled-select-bg: #f0f0f0; --color-styled-arrow: var(--color-styled-select-text); --color-styled-shadow: #000; --color-styled-item-disabled: #bababa; /* Solo button */ --height-button-solo: 16px; --top-button-solo: 1.5px; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color: var(--color-text-notable); } [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="password"] { background: var(--color-styled-select-bg); } /*[data-theme="dark"] select option { background: var(--color-styled-select-bg); }*/ [data-theme="dark"] input:disabled, [data-theme="dark"] select:disabled, [data-theme="dark"] textarea:disabled { color: var(--color-text-distinct); } [data-theme="dark"] [type="text"]:disabled { border-color: var(--color-disabled); background: var(--color-bg-sid-selected); } [data-theme="dark"] h2 { color: #fff; } [data-theme="dark"] h3 { color: #d8dad8; } [data-theme="dark"] #page .ext .name { color: #f5f5f1; } [data-theme="dark"] #page .ext .name:hover { text-decoration: underline; } [data-theme="dark"] #topic-player table { border-top-width: 1px !important; } [data-theme="dark"] #topic-player table, [data-theme="dark"] #topic-player th, [data-theme="dark"] #topic-player td { border-color: #363636 !important; } [data-theme="dark"] #topic-player td.corner { color: #ddd; } [data-theme="dark"] #page .ext table.tight th { color: #e4e4e4; } [data-theme="dark"] #songs .folder span.compo-year:before { border-color: #000; } [data-theme="dark"] #theme-selector:hover { box-shadow: 0 0 6px #f5f5f1; } [data-theme="dark"] #tabs .tab:not(.selected):hover.tab:not(.disabled):hover .g2 { fill: var(--color-tab-hover-text); } [data-theme="dark"] #tabs .selected .g2 { fill: var(--color-tab-selected-text); } [data-theme="dark"] #sticky-visuals .visuals-buttons { top: 13px; } [data-theme="dark"] #sticky-visuals .visuals-buttons > button, [data-theme="dark"] #visuals-stats button.stats-solo { height: 25px; border: none; } [data-theme="dark"] .ct-label { color: #909090; fill: #909090; } [data-theme="dark"] .ct-grid { stroke: #505050; } [data-theme="dark"] blockquote:before { background: url(../images/blockquote.png) no-repeat; opacity: 0.11; } /* ---- Overriding Olivi CSS ------------------------------------------------- */ body, button, input, select, textarea { color: var(--color-text-body); } /* Added July 2025 to ensure white background color (Firefox issue) */ select { background: #fff; border: 1px solid var(--color-border-box); } code { background: var(--color-code-bg); border-color: var(--color-code-border); } a { color: var(--color-anchor); } a:hover, a:focus, a:active { color: var(--color-anchor-hover); } table, th, td { border-color: var(--color-table); } th { background: var(--color-table-th-bg); } button, input[type="submit"], input[type="button"] { color: var(--color-button-text); background: var(--color-button); } button:hover, input[type="button"]:hover, input[type="submit"]:hover { background: var(--color-button-hover); } input[type="text"], input[type="password"], input[type="search"] { color: var(--color-input-text); } input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus { color: var(--color-input-text-focus); } ::selection { background:var(--color-selection-bg); color:var(--color-selection-text); } ::-moz-selection { background:var(--color-selection-bg); color:var(--color-selection-text); } /* ---- DeepSID -------------------------------------------------------------- */ body, html { overflow-y: hidden; height: 100%; margin: 0; background: var(--color-bg); } /* Remove pointer events to simplify event handling in jQuery */ button svg, button b, td span.info, td div, .no-hover { pointer-events: none; } /* Add to elements you don't want to get marked when clicking fast */ .unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } /* Move sundry checkboxes slightly upwards */ #sundry input[type="checkbox"], #sundry-tabs input[type="checkbox"] { position: relative; top: 0; } /* Hack for Firefox: Move the checkbox slightly upwards */ @-moz-document url-prefix() { #search input[type="checkbox"] { position: relative; top: -0.5px; } #sundry input[type="checkbox"], #sundry-tabs input[type="checkbox"] { position: relative; top: -1.5px; } } /* For the "? ? ?" unknown fields */ small.u1 { margin-right: 2px; } small.u2 { margin-left: 2px; } /* This should be a container ONLY around the text (not any images or other extra stuff) or some browsers might get confused */ .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* @link http://style64.org/c64-truetype */ @font-face { font-family: 'Commodore 64'; src: url('../fonts/C64_Pro_Mono-STYLE.woff2') format('woff2'), url('../fonts/C64_Pro_Mono-STYLE.woff') format('woff'), url('../fonts/C64_Pro_Mono-STYLE.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Container for entire left side (top, info/memory/stil, controls, browser, search) */ #panel { display: flex; flex-flow: column; height: 100%; width: 430px; margin: 0 10px; } #credits { position: relative; } #credits .c-left { display: inline-block; width: 170px; font-weight: bold; color: var(--color-button-hover); } #credits span { position: absolute; right: 0; font-size: 12px; line-height: 19px; } #sites { position: absolute; top: 12px; right: 0; width: 100%; font: normal 10px/0 "Montserrat", sans-serif; text-transform: uppercase; color: var(--color-button-disabled); z-index: 100; text-align: right; } #sites span { margin: 0 4px; } #sites a { text-decoration: none; color: var(--color-text-subtle); } #sites a:hover { color: var(--color-link-hover); } #click-to-play-cover { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, var(--color-ctp-circle), 40%, transparent 100%); z-index: 9999; cursor: pointer; text-align: center; } /* Box in center with image and text */ #click-to-play-cover .center { display: inline-block; position: relative; top: 50%; /* These three lines centers the DIV in the cover */ transform: translateY(-50%); z-index: 9999; } /* The example play image */ #click-to-play-cover .play { width: 154px; height: 154px; margin-bottom: 6px; background: url(../images/center_play.png) 0 0 / 200% 100% no-repeat; box-shadow: 0 0 12px #000; border: 2px solid #e7e8e0; } #click-to-play-cover .play:hover { background: url(../images/center_play.png) -150px 0 / 200% 100% no-repeat; } #click-to-play-cover .text-below { font: normal 21px "Montserrat", sans-serif; color: #e7e8e0; } /* ---- Top (Login / Register) ----------------------------------------------- */ #top, #tabs { flex: 0 0 45px; /*overflow: hidden;*/ position: relative; margin: 6px 0; } #logo { position: absolute; top: -25px; left: -7px; color: var(--color-logo); font: bold 43px "Kanit", sans-serif; } #theme-selector { position: absolute; bottom: 6px; left: 143px; width: 14px; height: 14px; background: var(--color-button-inverted); border: 2px solid var(--color-theme-selector-border); border-radius: 10px; cursor: pointer; transition: all .12s linear; box-shadow: var(--shadow-theme-selector); z-index: 2; } #theme-selector div { float: right; height: 100%; width: 50%; background: var(--color-theme-selector-bg); } #theme-selector:hover { background: var(--color-theme-bg-hovtop); border-color: var(--color-theme-bg-hovbot); } #theme-selector:hover > div { background: var(--color-theme-bg-hovbot); } #theme-selector:active { box-shadow: none; } #logged-in { position: absolute; bottom: 3px; right: 0; } #logged-username { font: normal 15px "Montserrat", sans-serif; color: var(--color-text-fine); } /* Additional styling for the emulator drop-down box in top */ #top .emulator { position: absolute; left: 0; bottom: 3px; width: 116px; z-index: 5; font-family: "Asap Condensed", sans-serif; } /* Additional styling for the emulator drop-down box in the settings */ #topic-settings .emulator { position: relative; top: 3px; width: 136px; margin-left: 5px; } /* Additional styling for the MIDI selector drop-down box for ASID */ /*#asid-midi .midi-outputs { margin-bottom: 10px; margin-right: 50px; width: 207px; float: right; }*/ /* Version for unstyled drop-down box */ #asid-midi-outputs { margin-bottom: 10px; margin-right: 50px; width: 207px; float: right; } #asid-midi label { font: normal 13px/0 "Montserrat", sans-serif; position: relative; left: 50px; /*top: -2px;*/ } #userform { display: inline-block; } #userform fieldset { position: absolute; bottom: 3px; right: 0; width: 310px; padding: 0; margin: 0; text-align: right; border: none; } #userform label, #top label { font: normal 13px/0 "Montserrat", sans-serif; } #userform input[type="text"], #userform input[type="password"], #topic-settings input[type="text"], #topic-settings input[type="password"] { font-size: 14px; padding: 4px; height: 20px; width: 82px; border: 1px solid var(--color-border-box); border-radius: 1px; } #topic-settings input[type="text"], #topic-settings input[type="password"] { height: 21px; width: 130px; border-color: var(--color-text-dim); } #userform button, #logout { position: relative; top: 2.5px; height: 20px; line-height: 0; padding: 0 4px; } #logout svg, #userform button svg { fill: var(--color-button-logout); } #response { font-size: 12px; color: var(--color-text-player); } #userform .good { color: var(--color-text-resp-good); } #userform .bad { color: var(--color-text-resp-bad); } /* ---- Controls Panel (Buttons) -------------------------------------------- */ #interactive { flex: 0 0 50px; margin-top: 9px; } #controls { height: 44px; margin-left: 10px; /* To line up with the folder controls further down */ } #controls button, #songs button, .edit button, #sundry button, #sticky-visuals button, #topic-remix .action button, .dialog-transfer button, .dialog-new button, #sticky-right-buttons button, .block-info button { transition: all .05s linear; box-shadow: 2px 2px 4px var(--color-button-shadow); } [data-theme="dark"] { button { transition: all .03s linear; } } #controls button:active, #songs button:active, .edit button:active, #sundry button:active, #faster.button-selected, #topic-remix .action button:active, .dialog-transfer button:active, .dialog-new button:active, #sticky-right-buttons button:active, .block-info button:active { box-shadow: var(--shadow-button-selected); } [data-theme="dark"] { button:active { transform: scale(0.935); transform-origin: center center; } button:disabled { transform: none; } } #controls button.disabled, #songs button.disabled, #userform button.disabled, .edit button.disabled, .dialog-new button.disabled, #sticky-right-buttons button.disabled, .block-info button.disabled, .dialog-box button.disabled, #filter-revisions button.disabled, #filter-6581 button.disabled, #sticky-visuals button.disabled, #csdb-sort button.disabled { cursor: default; background: var(--color-button-disabled); border-color: var(--color-button-disabled); box-shadow: 0 0 0 transparent; color: var(--color-button-disabled-text); fill: var(--color-button-disabled-text); } #sticky-visuals button.disabled:before { filter: var(--svg-filter-icon-disabled); } #controls .divider, .edit .divider { display: inline-block; width: 7px; /* 10px */ height: 100%; margin-left: 4px; /* 7px */ border-left: 3px solid var(--color-button-disabled); } .button-big, .button-lady, .button-tiny { width: 50px; height: 44px; padding: 0; border-radius: 10px; fill: currentColor; vertical-align: top; } #topic-remix .button-big { height: 44px !important; margin-bottom: 5px; } .button-lady { width: 100%; height: 30px; } .button-tiny { width: 100%; height: 13px; } .button-tiny svg { position: relative; top: -5px; } .button-idle, .button-off { color: var(--color-button-inverted); border: 2px solid var(--color-button-border-idle); } .button-idle:hover, .button-off:hover { color: var(--color-button-text); } .button-selected, .button-on { border: 2px solid var(--border-button-select); padding: 0; color: var(--color-button-text-select); background: var(--color-button-bg-select); box-shadow: var(--shadow-button-select); } .button-on { box-shadow: none !important; } .button-selected:hover, .button-on:hover { border-color: var(--color-button-border-hovsel); color: var(--color-button-text-hovsel); background: var(--color-button-bg-hovsel); } .button-area { display: inline-block; position: relative; height: 100%; width: 42px; vertical-align: top; } .button-area div.disabled { color: var(--color-button-disabled); } /* Used in e.g. the piano view */ .edit { border: 1px solid var(--color-border); width: calc(100% - 5px); /* To match the width of the keyboards */ padding: 8px; margin: 0 0 10px 2px; background: var(--color-bg-edit-area); border-radius: 3px; } #tabs .g2 { fill: var(--color-settings-cog-icon); } #topic-settings .edit { padding: 20px 16px; } #topic-settings h3 { margin-top: 0; } #topic-settings h4 { font-size: 18.5px; } #topic-settings label b, #dialog-upload-wiz3 label b, #dialog-upload-wiz5 label b { color: var(--color-settings-bold); } #topic-settings .edit p { font-size: 14px; margin-bottom: 16px !important; } .waveform-colors { display: none; position: absolute; top: 16px; left: 704px; /* Don't use 'right' here or it might be pushed by the scrollbar */ } /* Width of emulator button in visuals tab */ .viz-emu { width: 55px !important; font-family: "Asap Condensed", sans-serif; font-size: 12px !important; } .viz-warning { display: none; position: relative; top: 1px; margin-left: 8px; font-size: 14px; font-family: "Asap Condensed", sans-serif; } .viz-warning img { filter: var(--svg-filter-viz-msg-buffer); } .viz-msg-emu { color: var(--color-viz-msg-emu); } .viz-msg-buffer { color: var(--color-viz-msg-buffer); top: 0; left: 18px; } .viz-msg-enable { color: var(--color-viz-msg-enable); } .viz-buffer { float: right; } .viz-buffer label { margin-right: 4px !important; } .dropdown-buffer, .dropdown-unstyled { position: relative; top: 1px; font-size: 13px; } #piano-combine-area span { display: none; position: relative; top: 2px; font-weight: bold; } #piano-combine-area span.color-2sid { color: var(--color-viz-msg-buffer); } #piano-combine-area span.color-3sid { color: var(--color-text-resp-bad); } .piano-top-panel { position: relative; top: 2px; left: 2px; height: 50px; width: 834px; /*font: normal 13px/0 "Montserrat", sans-serif;*/ color: var(--color-piano-inverted); background: var(--color-piano-bg); background: linear-gradient(to bottom, var(--color-piano-bg-lg1) 0%,var(--color-piano-bg-lg2) 100%); border-top-left-radius: 3px; border-top-right-radius: 3px; /* border-bottom is set in main.js */ } .pv-wrap { position: absolute; top: 11px; left: 12px; padding: 1px; background: linear-gradient(to bottom, var(--color-piano-pv-wrap1) 0%,var(--color-piano-pv-wrap2) 100%); border-radius: 4px; } /* Button 1, 2 or 3 on keyboard that toggles ON or OFF */ .piano-voice { padding: 0; height: 25px !important; width: 30px; border-radius: 4px; vertical-align: top; font-size: 15px !important; font-weight: bold; } .voice-on { color: var(--color-piano-vc-on); background: radial-gradient(circle 27px, var(--color-piano-vc-on-rg1), var(--color-piano-vc-on-rg2)); background-repeat: no-repeat; border: 2px solid var(--color-piano-vc-on-border); box-shadow: 0 0 2px var(--color-piano-vc-on-shadow); } .pv-c2sid .voice-on { background: radial-gradient(circle 27px, var(--color-piano-vc-on-rg1), var(--color-piano-vc-on-rg2-2sid)); } .pv-c3sid .voice-on { background: radial-gradient(circle 27px, var(--color-piano-vc-on-rg1), var(--color-piano-vc-on-rg2-3sid)); } .voice-on:hover { background: radial-gradient(circle 30px, var(--color-piano-vc-on-hover1), var(--color-piano-vc-on-hover2)); } .pv-c2sid:hover .voice-on { background: radial-gradient(circle 30px, var(--color-piano-vc-on-hover1), var(--color-piano-vc-on-h2-2sid)); } .pv-c3sid:hover .voice-on { background: radial-gradient(circle 30px, var(--color-piano-vc-on-hover1), var(--color-piano-vc-on-h2-3sid)); } .voice-off { color: var(--color-piano-inverted); background: linear-gradient(to bottom, var(--color-piano-bg-lg1) 0%,var(--color-piano-bg-lg2) 100%); } .voice-off:hover { background: linear-gradient(to bottom, var(--color-piano-vc-off-lg1) 0%,var(--color-piano-vc-off-lg2) 100%); } /* The flat triangle above the pulse width bars */ .flat-triangle { position: absolute; top: 20px; left: 81px; width: 0; height: 0; border-left: 100px solid transparent; /* Each must be half width of pulse width bar + 2px */ border-right: 100px solid transparent; border-bottom: 7px solid var(--color-piano-tr-border); } .edges { position: absolute; top: 20px; width: 200px; /* Width of pulse width bar */ height: 7px; border-left: 1px solid var(--color-piano-inverted); border-right: 1px solid var(--color-piano-inverted); } .edges-pulse { left: 82px; } .edges-fc { right: 115px; } .edges-res { position: absolute; top: 10px; right: 78px; width: 3px; height: 30px; /* Height of vertical resonance bar */ border-top: 1px solid var(--color-piano-inverted); border-bottom: 1px solid var(--color-piano-inverted); } .bar-num { position: absolute; top: 12px; /* Left is set in 'piano.php' */ font: normal 10px/0 "Montserrat", sans-serif; line-height: 0; } .num-res { right: 83px; font-size: 9px; } /* RM / HS triangle arrows */ .pm-carpet-left { position: absolute; top: 7px; height: 17px; width: 6px; transform: rotate(45deg); border-radius: 3px; background: linear-gradient(to bottom, var(--color-piano-pmc-lg1) 0%,var(--color-piano-pmc-lg2) 50%); } .pcl-ringmod { left: 376px; } .pcl-hardsync { left: 412px; } .pm-carpet-right { position: absolute; top: 7px; left: 338px; height: 17px; width: 6px; transform: rotate(-45deg); border-radius: 3px; background: linear-gradient(to bottom, var(--color-piano-pmc-lg1) 0%,var(--color-piano-pmc-lg2) 50%); } .pcr-ringmod { left: 384px; } .pcr-hardsync { left: 420px; } .piano-ringmod-left, .piano-hardsync-left { position: absolute; top: 8.5px; height: 14px; width: 3px; transform: rotate(45deg); } .piano-ringmod-left { left: 377.5px; } .piano-hardsync-left { left: 413.5px; } .piano-ringmod-right, .piano-hardsync-right { position: absolute; top: 8.5px; height: 14px; width: 3px; transform: rotate(-45deg); } .piano-ringmod-right { left: 385.5px; } .piano-hardsync-right { left: 421.5px; } .pr-on { background: linear-gradient(to bottom, var(--color-piano-pr-on-lg1) 0%,var(--color-piano-pr-on-lg2) 100%); box-shadow: 0 2px 11px var(--color-piano-pr-shadow); } .ph-on { background: linear-gradient(to bottom, var(--color-piano-ph-on-lg1) 0%,var(--color-piano-ph-on-lg2) 100%); box-shadow: 0 2px 11px var(--color-piano-ph-shadow); } .pr-off, .ph-off { background: var(--color-piano-pm-off); } .label-mod { top: 29px; font-size: 9px; } .piano-top-panel .bar { margin-top: 30px; margin-left: 80px; padding: 2px; border-radius: 4px; background: var(--color-piano-bar); background: linear-gradient(to bottom, var(--color-piano-bar-lg1) 0%,var(--color-piano-bar-lg2) 100%); } /* Area for showing SID chip address (2SID and 3SID modes only) */ .piano-top-panel .chip-address { display: none; position: absolute; top: 17px; left: 309px; font: normal 10px/0 "Montserrat", sans-serif; } .piano-top-panel .chip-address span { position: relative; top: 7px; font: bold 14px "Courier New", serif; color: #ff0; } /* The brown filter cutoff bar */ #piano-fc0, #piano-fc1, #piano-fc2 { float: right; margin-right: 112px; } /* The vertical resonance bar */ #piano-res0, #piano-res1, #piano-res2 { position: absolute; top: 8px; right: 69px; margin: 0; border-radius: 1px; } .pb-wrap { position: absolute; right: 10px; padding: 2px; } .pb-lp { top: 8px; background: linear-gradient(to bottom, var(--color-piano-pb-lp-lg1) 0%,var(--color-piano-pb-lp-lg2) 100%); } .pb-bp { top: 20px; background: linear-gradient(to bottom, var(--color-piano-pb-bp-lg1) 0%,var(--color-piano-pb-bp-lg2) 100%); } .pb-hp { top: 32px; background: linear-gradient(to bottom, var(--color-piano-pb-hp-lg1) 0%,var(--color-piano-pb-hp-lg2) 100%); } .pb-wrap span { position: absolute; top: 5px; left: -29px; font: normal 9px/0 "Montserrat", sans-serif; } /* The small filter passband LED indicators */ .piano-pb-led { width: 17px; height: 6px; } .pb-on { background: var(--color-piano-pb-on); background: linear-gradient(to bottom, var(--color-piano-pb-on-lg1) 0%,var(--color-piano-pb-on-lg2) 100%); border: 0.3px solid var(--color-piano-pb-on-border); box-shadow: 0 0 11px var(--color-piano-pb-on-shadow); } .pb-off { background: var(--color-piano-pb-off); background: linear-gradient(to bottom, var(--color-piano-pb-off-lg1) 0%,var(--color-piano-pb-off-lg2) 100%); border: 0.3px solid var(--color-piano-pb-off-border); } .button-edit, #sundry button { height: 25px !important; padding: 0; border-radius: 10px; vertical-align: top; } /* Used for "require" messages */ #sundry button { position: relative; top: -4px; font-size: 11px; padding-left: 10px; padding-right: 10px; margin: 0 2px; } #slider-button { display: inline-block; position: absolute; top: -35px; right: 10px; padding: 4px 0 8px 8px; background: var(--color-bg-box); z-index: 2; } #slider-button button.rect { height: auto !important; padding-left: 6px; padding-right: 6px; border-radius: 0; font-size: 9px; line-height: 18px; } /* Radio-button style buttons where the text needs to stay the same and only one button may be active */ .button-radio { width: 70px; margin-right: 2px; } /* Radio-button style buttons with an icon instead of text */ .button-icon { width: 32px; margin-right: 0; } .button-left { border-top-right-radius: 0; border-bottom-right-radius: 0; } .button-right { border-top-left-radius: 0; border-bottom-left-radius: 0; } .button-icon img { position: relative; top: 1.75px; left: 1px; height: 12px; pointer-events: none; } .button-right img { left: -1px; } .button-icon.button-off img { filter: var(--svg-filter-white); } .button-icon.button-on img { filter: var(--svg-filter-icon-visuals); } /* Checkbox style toggle buttons that also toggles the text between ON and OFF */ .button-toggle { width: 42px; } .edit label, #sticky-right-buttons label { font: normal 13px/0 "Montserrat", sans-serif; color: var(--color-text-fine); margin: 0 16px 0 1px; } #topic-settings .edit label { margin-left: 10px; } /* Space between settings */ #topic-settings .space { height: 16px; } #topic-settings .splitline { border-bottom: 1px solid var(--color-button-disabled); margin-bottom: 16px; } .button-tag { position: relative; top: 4px; width: 100%; text-align: center; } .button-tag, .tag { font: normal 13px/0 "Montserrat", sans-serif; color: var(--color-text-fine); } .tag { position: relative; top: -2px; } .button-counter { width: 100%; text-align: center; font-size: 11px; font-weight: bold; } #graph { overflow: hidden; position: relative; margin: 0 2px; } /* A down-scrolling canvas area in the 'Graph' view */ .graph-area { position: absolute; border: 0.5px solid var(--color-graph-border); background: var(--color-graph-bg); } /* Round voice numbers in bottom left corner of canvas areas */ .graph-area div { position: absolute; bottom: 6px; left: 6px; width: 20px; height: 20px; font: bold 12px/19px "Montserrat", sans-serif; color: var(--color-graph-channel-text); background: var(--color-graph-channel-bg); border: 0.5px solid var(--color-graph-border); border-radius: 20px; text-align: center; } .thinner { width: 32px; } #faster, #skip-prev, #skip-next, #loop { position: absolute; bottom: 0; } #subtune-value { position: absolute; top: 13px; } #subtune-plus, #subtune-minus { outline: none; } #subtune-minus { position: absolute; left: 0; bottom: 0; } /* Volume slider - @link https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ NOTE: These can't be comma-huddled! */ input[type=range] { -webkit-appearance: none; height: 100%; background: transparent; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-thumb { /* WebKit / Blink */ -webkit-appearance: none; border: 2px solid var(--color-button-border); height: 16px; width: 6px; background: var(--color-button); cursor: pointer; box-shadow: -1.5px 1.5px 4px var(--color-button-shadow); border-radius: 12px; box-sizing: content-box; margin-top: -9px; transition: all .05s linear; } input[type=range]::-webkit-slider-thumb:active { background: var(--color-button-text); box-shadow: none; } input[type=range]:disabled::-webkit-slider-thumb { background: var(--color-button-disabled); border-color: var(--color-button-disabled); box-shadow: 0 0 0 transparent; cursor: default; } input[type=range]::-moz-range-thumb { /* Firefox */ border: 2px solid var(--color-button-border); height: 16px; width: 6px; background: var(--color-button); cursor: pointer; box-shadow: -1.5px 1.5px 4px var(--color-button-shadow); border-radius: 12px; box-sizing: content-box; transition: all .05s linear; } input[type=range]::-moz-range-thumb:active { background: var(--color-button-text); box-shadow: none; } input[type=range]:disabled::-moz-range-thumb { background: var(--color-button-disabled); border-color: var(--color-button-disabled); box-shadow: 0 0 0 transparent; cursor: default; } input[type=range]::-ms-thumb { /* IE / Edge */ border: 2px solid var(--color-button-border); height: 16px; width: 6px; background: var(--color-button); cursor: pointer; box-shadow: -1.5px 1.5px 4px var(--color-button-shadow); border-radius: 12px; box-sizing: content-box; margin-top: 0; transition: all .05s linear; } input[type=range]::-ms-thumb:active { background: var(--color-button-text); box-shadow: none; } input[type=range]:disabled::-ms-thumb { background: var(--color-button-disabled); border-color: var(--color-button-disabled); box-shadow: 0 0 0 transparent; cursor: default; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 3px; background: var(--color-slider-track); border-radius: 1.3px; cursor: pointer; } input[type=range]:disabled::-webkit-slider-runnable-track { background: var(--color-button-disabled); cursor: default; } input[type=range]::-moz-range-track { width: 100%; height: 3px; background: var(--color-slider-track); border-radius: 1.3px; cursor: pointer; } input[type=range]:disabled::-moz-range-track { background: var(--color-button-disabled); cursor: default; } input[type=range]::-ms-track { width: 100%; height: 3px; border-color: transparent; color: transparent; background: var(--color-slider-track); border-radius: 1.3px; cursor: pointer; } input[type=range]:disabled::-ms-track { background: var(--color-button-disabled); cursor: default; } #volume { position: absolute; right: -40px; top: -106px; width: 45px; transform-origin: 75px 75px; transform: rotate(-90deg); } #osc-zoom { width: 45px; margin: 0 2px; } #osc-zoom::-webkit-slider-thumb { height: 12px; position: relative; top: 2px; } #osc-zoom::-moz-range-thumb { height: 12px; } #osc-zoom::-ms-thumb { height: 12px; } /* ---- The Time/Length Bar ------------------------------------------------- */ #time { margin-top: 2px; text-align: center; font-size: 14px; color: var(--color-button); } #time-bar { overflow: hidden; display: inline-block; position: relative; /* Adding this gets rid of an invisible DIV subtune overlap */ width: 346px; /* Width also used in browser.js */ height: 9px; border: 0.5px solid var(--color-timebar-border); border-radius: 3px; background: var(--color-timebar-bg); } #time-bar div { float: left; height: 100%; width: 0; /* Changed in jQuery */ background: var(--color-bottom); transition: all 1s linear; pointer-events: none; } #time .resid div { background: var(--color-timebar-resid); } #time .jsidplay2 div { background: var(--color-timebar-jsidplay2); } #time .websid div, #time .legacy div { background: var(--color-timebar-websid); } #time .hermit div { background: var(--color-timebar-hermit); } #time .asid div { background: var(--color-timebar-asid); } #time .lemon div { background: var(--color-timebar-lemon); } #time .youtube div { background: var(--color-timebar-youtube); } /* Small dot that indicates this time length has millseconds too */ #time-length div { position: absolute; top: 9px; right: -6px; font-size: 12px; line-height: 0; color: var(--color-text-minor); } /* ---- Info Box (Name, Author, Copyright) ---------------------------------- */ #info { position: relative; flex: 0 0 84px; border: 0.5px solid var(--color-border-box); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-color: var(--color-border-info); background: var(--color-bg-box); font-size: 14px; } /* A smaller version of the avatar image in the left side of the info box */ #info-composer { display: none; float: left; width: 58px; height: 58px; margin: 8px -3px 0 8px; border: 1px solid var(--color-border); background: var(--color-avatar-bg); } /* The '#info-text' and '#youtube' boxes are mutually exclusive */ #info-text { display: none; overflow: hidden; padding: 6px 10px; height: 70px; hyphens: auto; } /* The '#info-text' and '#youtube' boxes are mutually exclusive */ #youtube { position: relative; display: none; height: 248px; } #youtube-loading { display: inline-block; position: absolute; top: 50%; /* These three lines centers the DIV in the cover */ transform: translateY(-50%); text-align: center; font-size: 17px; width: 430px; } /* Black box for the MUS info text */ .c64blackbg { position: relative; top: 3px; background: var(--color-bottom); color: var(--color-bottom); border: 1px solid var(--color-bottom); border-radius: 4px; } #info .c64blackbg { /*left: -2px;*/ border-width: 5px; width: 330px; /* 320 + (BORDER * 2) */ } #sundry .c64blackbg { border-top-width: 5px; border-bottom-width: 5px; } #topic-stil .c64blackbg { border-width: 5px; } /* C64 colors for MUS info text (supplied by Peter Weighill) - don't change these for other color schemes! */ .c0 { color: #000000; } .c1 { color: #ffffff; } .c2 { color: #880000; } .c3 { color: #aaffee; } .c4 { color: #cc44cc; } .c5 { color: #00cc55; } .c6 { color: #0000aa; } .c7 { color: #eeee77; } .c8 { color: #dd8855; } .c9 { color: #664400; } .c10 { color: #ff7777; } .c11 { color: #333333; } .c12 { color: #777777; } .c13 { color: #aaff66; } .c14 { color: #0088ff; } .c15 { color: #bbbbbb; } .b0 { background-color: #000000; } .b1 { background-color: #ffffff; } .b2 { background-color: #880000; } .b3 { background-color: #aaffee; } .b4 { background-color: #cc44cc; } .b5 { background-color: #00cc55; } .b6 { background-color: #0000aa; } .b7 { background-color: #eeee77; } .b8 { background-color: #dd8855; } .b9 { background-color: #664400; } .b10 { background-color: #ff7777; } .b11 { background-color: #333333; } .b12 { background-color: #777777; } .b13 { background-color: #aaff66; } .b14 { background-color: #0088ff; } .b15 { background-color: #bbbbbb; } /* A corner box to make sure text never appear below the small flag boxes */ #corner { float: right; width: 80px; height: 22px; } #sid-model, #clockspeed { position: absolute; height: 16px; padding: 7px 4px 0; font-family: "Open Sans", helvetica, sans-serif; font-size: 11px; line-height: 0; border: 1px solid var(--color-dot); border-radius: 3px; text-align: center; vertical-align: top; cursor: pointer; } #sid-model { top: 9px; right: 9px; } #clockspeed { top: 9px; right: 47px; } #info .MOS6581 { background: var(--color-6581-bg); color: var(--color-6581-text); border-color: var(--color-6581-border); } #info .MOS6581:hover { background: var(--color-6581-bg-hover); color: var(--color-6581-text-hover); border-color: var(--color-6581-border-hover); } #info .MOS8580 { background: var(--color-8580-bg); color: var(--color-8580-text); } #info .MOS8580:hover { color: var(--color-8580-text-hover); background: var(--color-8580-bg-hover); } #info .PAL { background: var(--color-pal); color: var(--color-button-inverted); border-color: var(--color-pal); } #info .PAL:hover { background: var(--color-pal-hover); color: var(--color-top); border-color: var(--color-pal-hover); } #info .NTSC { background: var(--color-ntsc); color: var(--color-button-inverted); border-color: var(--color-ntsc); } #info .NTSC:hover { background: var(--color-ntsc-hover); color: var(--color-top); border-color: var(--color-ntsc-hover); } #hvsc-version, #pace { position: absolute; right: 0; bottom: 2px; font-family: "Open Sans", helvetica, sans-serif; font-size: 11px; } #hvsc-version { color: var(--color-text-faint); } #pace { right: 9px; bottom: 36px; } /* Encapsulates tags - they are allowed to line up through the next cell and to the edge of #songs */ .tags-line { position: relative; display: table-cell; overflow: visible; max-height: 15px; max-width: 100px; z-index: 3; } /* For the bracket-style line below tags that connects two of the tags */ .tags-bracket { position: absolute; height: 5px; /* Enough to allow vertical side lines */ border-bottom: 1.5px solid var(--color-tags-bracket); border-left: 1.75px solid var(--color-tags-bracket-up); border-right: 1.75px solid var(--color-tags-bracket-up); border-radius: 1px; bottom: -5px; display: none; /* Hidden until JS sets position */ /*z-index: 1;*/ } .disabled .tags-bracket { border-color: var(--color-disabled); } .tag { pointer-events: auto; } /* Where the digi sample rate is displayed */ #pace div, .ptype, .tag, .edit-tags { display: inline-block; width: 40px; padding: 0 3px; border: 0.5px solid var(--color-border-box); border-radius: 2px; color: var(--color-text-ptype); background: var(--color-top); text-align: right; line-height: 13.5px; } /* RSID and "Jazz" tags */ .ptype, .tag, .edit-tags { width: auto; padding: 0.68em 2px; font-size: 9px; height: 13px; line-height: 0; margin-left: 5px; background: var(--color-bg-ptype); } #stopic-tags .tag { margin-left: 0; margin-right: 5px; cursor: pointer; } #stopic-tags .tag-transparent { margin-left: -5px; } .disabled .ptype { color: var(--color-disabled); border-color: var(--color-disabled); background: transparent; } /* Tags like "Jazz" in browser list */ .tag, .edit-tags { position: relative; top: -0.5px; padding: 0 3px 0 0; border-radius: 1.75px; color: var(--color-text-tag); border: none; background: var(--color-bg-tag); line-height: 1.35em; } .tag-event { color: var(--color-text-tag-event); background: var(--color-bg-tag-event); } .tag-notes img { position: absolute; top: 2px; width: 9px; height: 9px; filter: var(--svg-filter-edit-tags); pointer-events: none; } .tag-notes span { padding-left: 12px; pointer-events: none; } /* Turn the "Winner" tag into gold */ .tag-winner { position: relative; background: linear-gradient(180deg, #ffd700, #e6c200 40%, #bfa000 100%); color: #544200; font-weight: bold; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6), 0 -1px 1px rgba(0, 0, 0, 0.2); } .tag-winner:before { border-color: transparent #d8b800 transparent transparent !important; } .tag-production { color: var(--color-text-tag-prod); background: var(--color-bg-tag-prod); } .tag-origin, .tag-suborigin { color: var(--color-text-tag-origin); background: var(--color-bg-tag-origin); } .tag-mixorigin { color: var(--color-text-tag-mixorigin); background: var(--color-bg-tag-mixorigin); } .tag-digi, .tag-subdigi { color: var(--color-text-tag-digi); background: var(--color-bg-tag-digi); } .tag-warning { color: var(--color-text-tag-warning); background: var(--color-bg-tag-warning); } .tag-remix64 { width: 69px; background: url(../images/remix64.png) 11px 2.5px / 54px 7.5px no-repeat, var(--color-bg-tag-remix64); } .tag-gamebase64 { width: 81px; background: url(../images/gamebase64.png) 11px 3px / 66px 7.5px no-repeat, var(--color-bg-tag-gamebase64); } .tag-transparent { position: relative; top: 1px; left: 3px; padding: 0 1px 0 1.5px; margin: 0; color: var(--color-text-distinct); background: transparent; font-size: 12px; z-index: 1; } .edit-tags { display: none; padding: 0; pointer-events: auto; } .edit-tags:before { content: ""; float: left; width: 11.5px; height: 10px; background: url(../images/composer_plus.svg) 2px 1px / 10px 11px no-repeat; filter: var(--svg-filter-edit-tags); } .edit-tags:hover { background: var(--color-bg-tag-hover); } /* The pointy triangle part of the tag */ .tag:before { content: ""; float: left; position: relative; left: -5px; padding: 0; margin-right: -3px; width: 0; height: 100%; border: 6px solid transparent; border-color: transparent var(--color-bg-tag) transparent transparent; background: var(--color-bg-box); } .tag-event:before { border-color: transparent var(--color-bg-tag-event) transparent transparent; } .tag-production:before { border-color: transparent var(--color-bg-tag-prod) transparent transparent; } .tag-origin:before, .tag-suborigin:before, .tag-mixorigin:before { border-color: transparent var(--color-bg-tag-origin) transparent transparent; } .tag-digi:before, .tag-subdigi:before { border-color: transparent var(--color-bg-tag-digi) transparent transparent; } .tag-warning:before { border-color: transparent var(--color-bg-tag-warning) transparent transparent; } .tag-remix64:before { border-color: transparent var(--color-bg-tag-r64start) transparent transparent; } .tag-gamebase64:before { border-color: transparent var(--color-bg-tag-gb64start) transparent transparent; } .tag-transparent:before { border: 0; } #songs tr.selected .tag:before, #songs tr.selected:hover .tag:before { background: var(--color-bg-sid-selected); } #songs tr:hover .tag:before { background: var(--color-bg-sid-hover); } .disabled .tag, .disabled .tag-winner { color: var(--color-text-tag); background: var(--color-disabled) !important; text-shadow: none; font-weight: normal; } .disabled .tag-notes img { filter: var(--svg-filter-tn-disabled); } .disabled .tag:before, .disabled .tag-winner:before { border-color: transparent var(--color-disabled) transparent transparent !important; } .disabled:hover .tag:before, .disabled:hover .tag-winner:before { background: var(--color-bg-box) !important; } /* The small "hole" in the triangle part of the tag */ .tag:after { content: "."; float: left; position: relative; top: 2px; margin-left: -10px; padding: 0; width: 8px; height: 100%; font-size: 15px; color: var(--color-text-tag); line-height: 0; } .tag-event:after { color: var(--color-text-tag-event); } .tag-production:after { color: var(--color-text-tag-prod); } .tag-origin:after, .tag-suborigin:after { color: var(--color-text-tag-origin); } .tag-mixorigin:after { color: var(--color-text-tag-mixorigin); } .tag-transparent:after { color: transparent; } /* Light blue bar indicating all of 64 KB RAM */ #memory-bar { overflow: hidden; display: inline-block; position: absolute; bottom: 0; width: 100%; /* Width also used in main.js */ height: 8px; border-top: 1px solid var(--color-memory-border-top); border-left: 1px solid var(--color-memory-border-lr); border-right: 1px solid var(--color-memory-border-lr); background: var(--color-memory-bg); box-shadow: var(--shadow-memory); } #memory-lid { position: relative; top: 0; left: 0; height: 2px; width: 100%; background-image: linear-gradient(90deg, var(--color-memory-lid-side), var(--color-memory-lid-middle), var(--color-memory-lid-side)); z-index: 4; } #memory-screen, #memory-basic, #memory-kernel { position: absolute; top: 0; left: 268.75px; height: 100%; width: 53.75px; background: #005; border-left: 1px solid #bbd; border-right: 1px solid #bbd; opacity: 0.25; z-index: 3; pointer-events: none; font: normal 7px arial, sans-serif; letter-spacing: 2px; color: #fff; text-align: center; } #memory-screen { left: 6.71px; width: 6.71px; } #memory-kernel { left: 376.25px; } /* Dark blue indicating the tune in memory */ #memory-chunk { position: relative; top: -2px; left: 0; /* Changed in jQuery */ height: 100%; width: 0; /* Changed in jQuery */ background: var(--color-memory-chunk); box-shadow: var(--shadow-memory-chunk); z-index: 2; cursor: pointer; } /* ---- Sundry Box ---------------------------------------------------------- */ /* See also #tabs below for styling shared for the actual tabs */ #sundry-tabs { flex: 0 0 13px; position: relative; margin: 2px 0 6px; } #sundry-ctrls { position: absolute; top: 6px; right: 0; height: 21px; width: 185px; /* This leaves room for a maximum of four sundry tabs */ /* 177 px is too small for iOS */ text-align: right; } #sundry-ctrls label { position: relative; top: -6px; font: normal 13px/0 "Montserrat", sans-serif; color: var(--color-text-fine); } #sundry { /* KCS overflow: hidden;*/ overflow: auto; flex: 0 0 119px; padding: 6px 10px; border-top: 1px solid var(--color-border-box); border-left: 1px solid var(--color-border-box); border-right: 1px solid var(--color-border-box); border-bottom: 0.5px solid var(--color-border-box); border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; font-size: 14px; background: var(--color-bg-box); z-index: 2; } #sundry-news { position: relative; display: table; height: 100%; width: 96%; text-align: center; margin: 0 auto; font-size: 17px; } #sundry-news span { display: table-cell; vertical-align: middle; font-weight: bold; } #sundry-news pre { overflow: visible; font: normal 15px/21px "Montserrat", sans-serif; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; position: relative; top: 1px; left: -8px; width: 104.2%; height: 104px; color: #fff; padding: 0; margin: 0; background: none; border: 0; text-align: left; cursor: pointer; } #sundry .stopic { overflow: none; /* Scrollbar appears in #sundry instead to make sure it glues to the side of the box */ height: 100%; } /*#stopic-stereo .stereo-scope { Used if drop-down box is styled position: relative; }*/ #stopic-stereo .stereo-mode { width: 133px; z-index: 5; } #dropdown-stereo-mode, #stereo-jsidplay2 select { font-size: 13px; } #dropdown-jp2-fake-read { width: 104px; } #svg-headphones { position: relative; top: 3px; fill: var(--color-text-c64font); } /* Canvas for an oscilloscope voice */ #sundry .scope { position: relative; top: -0.3px; left: -4.5px; width: 417.5px; height: 70px; border: 0.5px solid var(--color-border-scope); background: var(--color-bg-scope); border-radius: 1px; cursor: pointer; } #stopic-stereo .scope { position: absolute; top: 0; left: 0; width: 100%; height: 64px; padding: 0 22px; border: none; background: transparent; cursor: default; opacity: 0.5; z-index: -1; } #stopic-stereo tr:first-child .scope { top: -5px; } #sundry .sundry-control { position: relative; width: 100%; height: 38px; } #sundry label, #stopic-stereo .stereo-letter { position: relative; top: -2px; font: normal 13px/0 "Montserrat", sans-serif; color: var(--color-text-fine); } #sundry label.disabled, #stopic-stereo td.stereo-header > .disabled, #topic-visuals label.disabled, #page .dropdown-buffer-label.disabled, #csdb-emp-filter-label.disabled { color: var(--color-text-label-disabled); } #sundry input[type="text"] { position: absolute; top: 0; right: 0; font-size: 14px; padding: 4px; height: 21px; width: 90px; border: 1px solid var(--color-border-box); border-radius: 1px; } #sundry input[type="text"].disabled { color: var(--color-text-label-disabled); } #stopic-filter input[type="text"] { text-align: right; } #sundry input[type="range"] { position: relative; top: -4px; width: 100%; height: 20px; } #stopic-filter { position: relative; } #filter-revisions { position: absolute; top: 165px; right: 0; } #filter-6581 { position: relative; top: -2px; right: 1px; font-size:11px; } #sundry-ctrls .disable-6581 { color: var(--color-text-sundry-disabled); } #filter-6581 button, #filter-6581 button:disabled { height: 17px; width: 33px; padding: 0 5px; font-size: 10px; border: none; line-height: 0.3em; margin: 0 1px; } #stopic-stereo table { margin-bottom: 0; border: none; } #stopic-stereo th { text-align: center; padding-top: 0; } #stopic-stereo td { position: relative; width: 12%; height: 10px; padding: 5px 0 0; border-right: none; } #stopic-stereo tr:first-child td { padding-top: 0; } #stopic-stereo td.stereo-header { vertical-align: middle; width: 3%; } #stopic-stereo td.stereo-header span { position:relative; top: 3px; } #stereo-jsidplay2 td.stereo-header { width: 1%; } #stopic-stereo .voice { display: inline-block; width: 100%; text-align: center; } #stopic-stereo input[type="range"] { pointer-events: auto !important; position: relative; top: -4px; width: 68%; height: 20px; } #stereo-jsidplay2 input[type="range"] { width: 48%; } #stereo-jsidplay2 .edit label { font-family: "Asap Condensed", sans-serif; font-size: 13px; } #stopic-stereo .stereo-cell { text-align: center; } #stopic-stereo .stereo-letter, #stopic-stereo .stereo-letter-indent { top: -10px; font-weight: bold; } #stereo-jsidplay2 .left { margin-left: 8px !important; } #stereo-jsidplay2 .left-dense { margin-left: -2px !important; } #stopic-stereo .stereo-letter-dense { top: -10px; font-family: "Asap Condensed", sans-serif; } #stopic-stereo .left { margin-left: 8px; margin-right: 4px; } #stopic-stereo .right { margin-left: 4px; } /* NOTE: This is also used for centered lines such as "No STIL information" or "No lyrics" etc. */ #tips, /* Deprecated ID from back when the STIL box was used for tips */ .sundryMsg { position: relative; top: 50%; /* These three lines centers the DIV in the sundry box */ transform: translateY(-50%); font-size: 12px; text-align: center; } #tips p, .sundryMsg p { margin: 0 0 6px 0; } #tips code, .sundryMsg code { font-size: 12px; } #stopic-stil .no-info, #stopic-tags .no-info { color: var(--color-text-subtle); } /* C64 font for INFO and STIL boxes when browsing CGSC */ .c64font { font-family: "Commodore 64", sans-serif; font-size: 10px !important; line-height: 10px; color: var(--color-text-c64font); } #sundry .subtune, #topic-stil .subtune { display: inline-block; height: 16px; padding: 0 4px; font-size: 12px; line-height: 15px; font-weight: bold; color: var(--color-button-inverted); background: var(--color-button); border-radius: 3px; text-align: center; cursor: pointer; } #sundry .subtune:hover, #topic-stil .subtune:hover { background: var(--color-button-hover); } #sundry hr, #topic-stil hr { background: transparent; border-bottom: 1px dashed var(--color-text-faint); height: 1px; margin: 8px 0 9px; } /* Line below STIL box for dragging it smaller or larger */ #slider { position: relative; flex: 0 0 3px; border-left: 1px solid var(--color-border-box); border-right: 1px solid var(--color-border-box); border-bottom: 0.5px solid var(--color-border-box); background: var(--color-bg-slider); text-align: center; cursor: n-resize; } /* ---- Browser List -------------------------------------------------------- */ #songs { flex: 1 1 auto; flex: 1; /* Chrome hack */ position: relative; padding: 0; margin: 3.5px 0 10px; border: 1px solid var(--color-border-box); border-radius: 1px; color: var(--color-text-distinct); background: var(--color-bg-box); } /* Container for GIF loading spinner IMG */ #loading { position: absolute; top: 0; /* Changed in jQuery */ left: 165px; /* (430 / 2) - 50 */ } .loading-spinner { filter: var(--svg-filter-loading-spinner); } /* The top container with root/back buttons, path and sort drop-down box */ #songs-buttons { height: 50px; padding: 10px; background: var(--color-bg-songs-buttons); } /* The root/back buttons */ .browser-ctrls { width: 34px; } .browser-ctrls svg { position: relative; top: 2px; } #path { display: inline-block; position: relative; top: 5px; margin-left: 8px; font-size: 14px; width: 61%; /* If you change the panel box width you may have to finetune this */ height: 34px; color: var(--color-button-shadow); } /* For the small HVSC or CGSC in the path line */ #path .dim, #folders .dim, #page .dim { position: relative; top: -1px; color: var(--color-text-dim); font-size: 9px; margin-right: 1px; } #folders .dim, #page .dim { font-size: 11px; color: var(--color-text-minor); } #path .playlist { position: relative; top: -3px; font-weight: bold; } #path .maintainer, #path .counts { position: relative; top: -9px; font-size: 10px; color: var(--color-text-minor); font-style: italic; } #path .counts { top: -7px; } #upload-wizard { position: absolute; top: 0; left: 40px; height: 20px; line-height: 0; padding: 10px; font-size: 11px; } /* The drop-down box for how the list is sorted */ #sort { position: absolute; top: 13px; right: 11px; } #sort label { font: normal 13px/0 "Montserrat", sans-serif; color: var(--color-text-fine); } #dropdown-sort { font-size: 13px; } #songs table { font-size: 14px; border: 0; } /* Scrollable box with folders and SID files */ #folders { position: relative; height: calc(100% - 100px); /* Minus the height of #songs-buttons and #search */ border-top: 1px solid var(--color-border-box); border-bottom: 1px solid var(--color-border-box); } #folders, #sundry, #page, #dialog-all-tags, #dialog-song-tags, #dialog-list-start-tag, #dialog-list-end-tag, #upload-stil-text, #annex-tips { overflow-y: auto; overflow-x: hidden !important; scrollbar-width: thin; scroll-behavior: smooth; scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track); } #folders:focus { outline: none; } /* Not visible in Firefox but has a subtle effect in Chrome */ #folders:focus-visible { outline: 0.5px solid var(--color-outline); outline-offset: -1px; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-scrollbar-track); } ::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar-thumb); } ::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); } ::-webkit-scrollbar-thumb:active { background-color: var(--color-scrollbar-thumb-active); } /* A clicked SID file for playing */ #songs .selected { color: var(--color-text-sid-selected) !important; background: var(--color-bg-sid-selected); font-weight: bold; } :root { --color-border-sid-kb: var(--color-bg-sid-selected); /* or #d5d5c9 and 1.5px border*/ --color-border-sid-kb: #e4e4dc; --color-sid-kb-radius: -7px; --color-sid-kb-opacity: 0.4; } [data-theme="dark"] { --color-border-sid-kb: var(--color-bg-sid-selected); /* or #393939 and 1.5px border */ --color-border-sid-kb: #3b3b3b; --color-sid-kb-radius: -6px; --color-sid-kb-opacity: 0.9; } /* The selection for a keyboard-controlled SID row */ #kb-marker { display: none; position: absolute; left: 0; right: 0; height: 100%; pointer-events: none; border-top: 1.5px solid var(--color-border-sid-kb); border-bottom: 1.5px solid var(--color-border-sid-kb); /*box-shadow: inset 0 6px 6px var(--color-sid-kb-radius) rgba(0, 0, 0, var(--color-sid-kb-opacity)), inset 0 -6px 6px var(--color-sid-kb-radius) rgba(0, 0, 0, var(--color-sid-kb-opacity));*/ transition: top 0.1s ease; z-index: 0; /* Avoíds disturbing the text when smooth scrolling past a row */ } #songs .selected .info, #songs .selected .factoid { font-weight: normal; color: var(--color-button-hover); } #songs td { border: 0; padding: 0 0 0 10px; cursor: pointer; } /* Loading spinner shown for slow-loading handlers like Lemon */ #spinner { float: right; position: relative; top: -1px; right: 20px; width: 42px; height: 42px; background: url(../images/spinner.svg) no-repeat; filter: var(--svg-filter-row-spinner); } #songs td.stars { width: 101px; padding: 0; } /* Stars for SID files need to be aligned with the first line (the SID filename itself) */ #songs td.filestars { vertical-align: top; padding-top: 6px; } #songs .rating, #info-rating, #topic-profile .folder-rating { position: relative; unicode-bidi: isolate; /*bidi-override;*/ /* @link https://css-tricks.com/star-ratings/ */ direction: rtl; } #songs .rating { display: block; } #info-rating, #topic-profile .folder-rating { cursor: pointer; } #songs b.s, #songs b.sh, #info-rating b.s, #info-rating b.sh, #topic-profile b.s, #topic-profile b.sh { /* Star */ display: inline-block; position: relative; top: 3px; width: 18px; height: 18px; } #info-rating { position: absolute; bottom: 13px; right: 7px; } /* Show filled stars when hovering on them (only when logged in) */ #songs .rating > b.sh:hover:before, #songs .rating > b.sh:hover ~ b.sh:before, #info-rating > b.sh:hover:before, #info-rating > b.sh:hover ~ b.sh:before, #topic-profile .folder-rating > b.sh:hover:before, #topic-profile .folder-rating > b.sh:hover ~ b.sh:before { content: ""; display: inline-block; position: relative; top: 0; width: 18px; height: 18px; background: var(--svg-bg-star-orange); } #songs b.xv, #info-rating b.xv, #topic-profile b.xv { /* User voted */ background: var(--svg-bg-star-orange); } #songs b.ev, #info-rating b.ev, #topic-profile b.ev { /* Empty voted */ background: var(--svg-bg-star-empty-voted); } #songs b.eu, #info-rating b.eu, #topic-profile b.eu { /* Empty unvoted */ background: var(--svg-bg-star-empty-unvoted); } #songs .fdiv { position: relative; } #songs .factoid, #songs .uploaded-time { float: right; position: relative; top: 2px; right: 13px; font-size: 11px; line-height: 11px; /*color: var(--color-text-minor);*/ color: var(--color-text-player); z-index: 2; } /* Static width factoid field */ #songs .factoid span { display: inline-block; width: 22px; text-align: right; } /* Wider static field for e.g. ID type values */ #songs .factoid span.id { width: 32px; } /* Even wider */ #songs .factoid span.big { width: 38px; } /* Faded factoid field for a very common value */ #songs .factoid div { color: var(--color-text-fa-common); } :root { --color-fbar1: #c8c9b9ff 0%; --color-fbar2: #c8c9b9c0 70%; --color-fbar3: #c8c9b900 100%; } [data-theme="dark"] { --color-fbar1: #6e7965ff 0%; --color-fbar2: #6e796570 70%; --color-fbar3: #6e796500 100%; } /* Horizontal bar below factoid value */ #songs .fbar { position: absolute; top: 1.5px; right: 12px; height: 13.5px; width: 0; /* Set in browser.js */ max-width: 200px; border-radius: 1px; /*background: #d4d4ff;*/ /*background: linear-gradient(to right, #acbb78ff 0%, #acbb7800 100%);*/ background: linear-gradient(to right, var(--color-fbar1), var(--color-fbar2), var(--color-fbar3)); background-size: 200px 100%; /* Anchor scale */ background-repeat: no-repeat; background-position: right center; /* Gradient anchored at right edge */ z-index: 1; } /* Container for the two corner buttons in the bottom */ #corner-buttons { overflow: hidden; position: absolute; bottom: 50px; width: 100%; height: 60px; z-index: 4; pointer-events: none; } :root { --color-border-message: #444; } [data-theme="dark"] { --color-border-message: transparent; } #corner-buttons .message { display: none; position: relative; left: 50%; margin-top: 10px; padding: 4px 8px; transform: translateX(-50%); font: normal 14px "Montserrat", sans-serif; color: #000; background: #fff; box-shadow: 2px 2px 4px var(--color-button-shadow); border-radius: 5px; border: 1px solid var(--color-border-message); z-index: 4; } /* Base triangle button look (shared) */ #corner-buttons .corner-svg { position: absolute; width: 38px; height: 38px; background: var(--color-button); display: inline-flex; align-items: flex-end; justify-content: flex-end; padding: 6px; border: 0; box-shadow: none; cursor: pointer; color: var(--color-button-text); pointer-events: auto; } /* Right corner button */ #corner-buttons .corner-right { clip-path: url(#cb-corner-clip-right); right: -14px; /* Collapsed */ bottom: -13px; transition: right 100ms linear, bottom 100ms linear; } /* Reveal button on corner buttons AND search containers */ #songs.cb-prox .corner-right { right: 0; bottom: 1px; } /* Currently selected factoid number */ #songs .corner-right div { position: relative; font: bold 13px "Open Sans", sans-serif; opacity: 0; pointer-events: none; } /* Shadow borders for the triangle towards the corner of the container */ #corner-buttons .corner-shadow-right { position: absolute; right: 0; bottom: 1px; width: 0; height: 0; border-bottom: 2px solid var(--shadow-button-triangle); border-right: 2px solid var(--shadow-button-triangle); z-index: -1; transition: all 100ms linear; } #songs.cb-prox .corner-shadow-right { width: 34px; height: 34px; } /* Left corner button */ #corner-buttons .corner-left { clip-path: url(#cb-corner-clip-left); left: -14px; /* Collapsed */ bottom: -13px; transition: left 100ms linear, bottom 100ms linear; } /* Reveal button on corner buttons AND search containers */ #songs.cb-prox .corner-left { left: 0; bottom: 1px; } /* Shadow borders for the triangle towards the corner of the container */ #corner-buttons .corner-shadow-left { position: absolute; left: 0; bottom: 1px; width: 0; height: 0; border-bottom: 2px solid var(--shadow-button-triangle); border-left: 2px solid var(--shadow-button-triangle); z-index: -1; transition: all 100ms linear; } #songs.cb-prox .corner-shadow-left { width: 34px; height: 34px; } #corner-buttons .corner-svg:hover { background: var(--color-button-hover); } #corner-buttons .corner-svg:active { transform: scale(0.935); transform-origin: center center; } #corner-buttons .cb-icon { display: block; position: relative; opacity: 0; } #corner-buttons .corner-left .cb-icon { bottom: -1px; left: -4px; } #songs.cb-prox .cb-icon, #songs.cb-prox .corner-right div { opacity: 1; } #songs .disqus-sh { display: none !important; } #songs .block-wrap, #page .block-wrap { position: relative; display: inline-block; max-width: 300px; /* Width before right end turns in to "..." ellipsis */ } #page .block-wrap { max-width: 320px; padding-left: 14px; vertical-align: bottom; } #songs .block, #page .block { width: 100%; } /* Used for both folders and files (wrapper to force a maximum width with "..." in the end) */ #songs .entry, #page .top-item { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Competition placeholder GIF animation for filename */ #songs .gif1 { height: 10px; width: 140px; opacity: 0.8; } /* Competition placeholder GIF animation for second line */ #songs .gif2 { height: 9px; width: 120px; margin-left: 2px; opacity: 0.3; } #page .top-item { pointer-events: auto; } #songs td.sid { position: relative; max-width: 325px; /* This fix prevents the left TD from pushing the TD with star ratings */ } /* A SID special label for info like "2SID" etc. */ #songs .sid-special { position: absolute; top: 11px; right: 7px; height: 14px; padding: 0 3px; font-size: 9px; font-weight: bold; letter-spacing: 0.2px; line-height: 13px; background: transparent; border: 1px solid var(--color-timebar-border); text-align: center; pointer-events: none; } /* SID special label for 2SID files */ #songs .sidsp-2sid { color: var(--color-text-sidsp-2sid); border-color: var(--color-border-sidsp-2sid); background: var(--color-bg-sidsp-2sid); } /* SID special label for 3SID files */ #songs .sidsp-3sid { color: var(--color-text-sidsp-3sid); border-color: var(--color-border-sidsp-3sid); background: var(--color-bg-sidsp-3sid); } /* A smaller block-wrap width for the SID filename when the SID special label is present */ #songs .bw-sidsp { max-width: 272px; } #songs .disabled .sid-special { color: var(--color-disabled); border-color: var(--color-disabled); background: transparent; } :root { --svg-url-circle-p: url(../images/circle_p_light.svg); --svg-url-circle-s: url(../images/circle_s_light.svg); --svg-url-circle-c: url(../images/circle_c_light.svg); --svg-url-circle-b: url(../images/circle_b_light.svg); --svg-url-circle-m: url(../images/circle_m_light.svg); --svg-url-circle-l: url(../images/circle_l_light.svg); --svg-url-circle-d: url(../images/circle_d_light.svg); --svg-url-circle-basic: url(../images/circle_basic_light.svg); --svg-url-circle-none: url(../images/circle_none_light.svg); } [data-theme="dark"] { --svg-url-circle-p: url(../images/circle_p_dark.svg); --svg-url-circle-s: url(../images/circle_s_dark.svg); --svg-url-circle-c: url(../images/circle_c_dark.svg); --svg-url-circle-b: url(../images/circle_b_dark.svg); --svg-url-circle-m: url(../images/circle_m_dark.svg); --svg-url-circle-l: url(../images/circle_l_dark.svg); --svg-url-circle-d: url(../images/circle_d_dark.svg); --svg-url-circle-basic: url(../images/circle_basic_dark.svg); --svg-url-circle-none: url(../images/circle_none_dark.svg); } /* Container for focus icons */ #songs .folder-focus { position: absolute; top: 7px; right: 9px; } #topic-profile .folder-focus { display: inline-block; position: relative; top: 0; left: 10px; } .folder-focus div { display: inline-block; height: 16px; width: 16px; margin-right: 1px; } #topic-profile .folder-focus div { height: 18px; width: 18px; background-size: 20px 20px !important; pointer-events: auto; } .folder-focus .p { background: var(--svg-url-circle-p) 0 0 / 18px 18px no-repeat; } .folder-focus .s { background: var(--svg-url-circle-s) 0 0 / 18px 18px no-repeat; } .folder-focus .c { background: var(--svg-url-circle-c) 0 0 / 18px 18px no-repeat; } .folder-focus .b { background: var(--svg-url-circle-b) 0 0 / 18px 18px no-repeat; } .folder-focus .m { background: var(--svg-url-circle-m) 0 0 / 18px 18px no-repeat; } .folder-focus .l { background: var(--svg-url-circle-l) 0 0 / 18px 18px no-repeat; } .folder-focus .d { background: var(--svg-url-circle-d) 0 0 / 18px 18px no-repeat; } .folder-focus .bc { background: var(--svg-url-circle-basic) 0 0 / 18px 18px no-repeat; } .folder-focus .none { background: var(--svg-url-circle-none) 0 0 / 18px 18px no-repeat; } #focus-explainer { position: absolute; top: 10px; left: 0; /* Set in browser.js */ width: 16px; height: 16px; padding-left: 4.25px; font: bold 12px/12px "Open Sans", sans-serif; border: 1.5px solid var(--color-text-player); border-radius: 20px; color: var(--color-text-player); cursor: default; } #songs .pl-strip { position: absolute; top: 4px; /* 2px 4px */ left: 0; width: 3px; height: 45px; /* 49px 45px */ border-radius: 1px; } #songs .pl-a { background: var(--color-strip-pl-a); } #songs .pl-b { background: var(--color-strip-pl-b); } #songs .pl-c { background: var(--color-strip-pl-c); } #songs .pl-d { background: var(--color-strip-pl-d); } #songs .pl-e { background: var(--color-strip-pl-e); } #songs .pl-f { background: var(--color-strip-pl-f); } #songs tr.disabled .pl-a, #songs tr.disabled .pl-b, #songs tr.disabled .pl-c, #songs tr.disabled .pl-d, #songs tr.disabled .pl-e, #songs tr.disabled .pl-f { background: var(--color-disabled); } #songs .has-stil { position: absolute; top: 10px; left: 5px; width: 3.5px; } #songs .has-stil div { height: 1px; margin-bottom: 1px; border-top: 1px solid var(--color-text-body); } #songs tr.disabled .has-stil div { border-top-color: var(--color-disabled); } /* Alloyrun.sid (file) */ #songs .file { padding-top: 6px; } #songs .selected .info { color: var(--color-text-info-selected); } /* A narrower font for search queries in case path + name gets long */ #songs .search, .slimfont { /*font-family: "Barlow Condensed", sans-serif;*/ font-family: "Asap Condensed", sans-serif; } /* Number of subtunes (indicated in the end of the SID filename) */ #songs .subtunes, #page .subtunes { float: right; position: relative; top: 9px; margin-left: 6px; height: 16px; padding: 0 4px; font-size: 12px; line-height: 15px; font-weight: bold; color: var(--color-button-inverted); background: var(--color-button); border-radius: 3px; text-align: center; } /* For subtunes in "The longest SID tunes" top list */ #page .subtunes { top: 3px; } #songs .disabled .subtunes { background: var(--color-disabled); } /* In symlists a specific subtune to be played is shown instead */ #songs .specific, #page .subtunes { font-size: 9px; line-height: 1.65em; background: var(--color-bg-subtune); padding: 0 5px; color: var(--color-text-subtune); border: 0.8px solid var(--color-border-subtune); border-radius: 10px; } /*#songs .specific:before { content: "# "; }*/ /* 1988 in MoN/FutureComposer (second line below SID filename itself) */ #songs .info { overflow: hidden; position: relative; top: -7px; font-size: 11px; color: var(--color-text-minor); white-space: nowrap; /* Needed for the line of tags to work */ } /* Tel_Jeroen (folder) */ #songs .folder { font-size: 16px; line-height: 0; position: relative; top: -2px; } #songs td.compo { padding-top: 4px; } #songs .folder span { height: 26px; } #songs .folder span.compo { padding-left: 4px; line-height: 30px; } #songs .folder span.compo-year { position: relative; left: 4px; top: -11px; } #songs .folder span.compo-internal { top: -9px; } #songs .folder span.compo-c64 { top: -7.5px; } #songs .folder span.compo-8bit { top: -6.5px; } /* Folder SVG icon */ #songs .folder span:before { content: ""; display: inline-block; position: relative; top: 2px; margin-right: 2px; background: url(../images/if_folder.svg) 0 0 / 26px 26px no-repeat; width: 26px; height: 21px; } #songs .folder span.compo:before { width: 32px; background: none; } /* Competition type "icon" */ #songs .folder span.compo-year:before { content: ""; left: -4px; top: -7px; height: 32px; width: 32px; font-size: 21px; line-height: 26px; font-weight: bold; text-align: center; background: var(--color-compo-bg); color: var(--color-compo-text); border: 2px solid var(--color-compo-border); border-radius: 10px; /* 13px 14px 20px (circle) */ box-shadow: var(--shadow-compo); margin-bottom: -10px; } #songs .folder span.compo-copy:before { content: "C"; color: var(--color-compo-copy); border-color: var(--color-compo-copy); padding: 0 1px 0 0; } #songs .folder span.compo-demo:before { content: "D"; color: var(--color-compo-demo); border-color: var(--color-compo-demo); padding: 0 0 0 1px; } #songs .folder span.compo-meeting:before { content: "M"; color: var(--color-compo-meeting); border-color: var(--color-compo-meeting); padding: 0; } #songs .folder span.compo-internal:before { content: "IM"; color: var(--color-compo-internal); top: -9px; border-color: var(--color-compo-internal); font-size: 17px; padding: 0.5px 0 0 0; } #songs .folder span.compo-c64:before { content: "C64"; color: var(--color-compo-c64); top: -10.5px; border-color: var(--color-compo-c64); font-size: 13px; padding: 0; } #songs .folder span.compo-8bit:before { content: "8BIT"; color: var(--color-compo-8bit); top: -12px; border-color: var(--color-compo-8bit); font-size: 10px; padding: 0.5px 0 0 0; } #songs .folder span.compo-standalone:before { content: "S"; color: var(--color-compo-standalone); border-color: var(--color-compo-standalone); padding: 0; } #songs .single span:before { background: url(../images/if_folder_single.svg) 0 0 / 26px 26px no-repeat; } #songs .single-photo span:before { background: url(../images/if_folder_single_photo.svg) 0 0 / 26px 26px no-repeat; } #songs .group span:before { background: url(../images/if_folder_group.svg) 0 0 / 26px 26px no-repeat; } #songs .group-photo span:before { background: url(../images/if_folder_group_photo.svg) 0 0 / 26px 26px no-repeat; } #songs .playlist span:before { background: url(../images/if_folder_star.svg) 0 0 / 26px 26px no-repeat; } #songs .search-shortcut span:before { background: url(../images/if_folder_search.svg) 0 0 / 26px 26px no-repeat; } #songs span.q { margin-left: 1px; color: var(--color-dot); } #songs span.dot { color: var(--color-dot); } /* #songs .playlist span:before { top: 6px; background: url(../images/playlist.svg) 4px 0 / 19px 19px no-repeat; } (Shows a list-with-note icon instead) */ #songs td.new:before, #songs td.sid .newsid:before, #songs td.sid .newst:before { content: "*"; position: absolute; top: 16px; left: 24px; padding: 6px 2px 3px; color: var(--color-text-ptype); background: var(--color-new-bg); font: bold 11px/0 "Open Sans", sans-serif; border-radius: 1px; z-index: 2; box-shadow: 0 0 2px var(--color-new-shadow); } #songs td.sid .newsid:before, #songs td.sid .newst:before { content: "NEW"; display: inline-block; top: 18px; left: auto; right: -9px; font-size: 8px; border-radius: 2px; padding-bottom: 6px; } #songs td.sid .newst:before { top: 9px; left: -20px; right: auto; } #songs .filescount { float: right; position: relative; top: 8px; margin-left: 6px; height: 16px; padding: 7px 4px 0; font-size: 11px; line-height: none; background: transparent; border: 1px solid var(--color-timebar-border); border-radius: 3px; text-align: center; } #songs .new-uploads { float: right; position: relative; top: 9px; margin-left: 12px; height: 14px; padding: 7.5px 3.5px 1.5px; color: var(--color-text-ptype); background: var(--color-new-bg); font: bold 9px/0 "Open Sans", sans-serif; border-radius: 2px; text-transform: uppercase; box-shadow: 0 0 2px var(--color-new-shadow); } #songs .no-new { box-shadow: none; color: var(--color-text-fine); background: var(--color-disabled); } #songs .sid_fm { float: right; position: relative; top: 9px; margin-left: 12px; height: 14px; padding: 7.5px 3.5px 1.5px; box-shadow: none; color: var(--color-text-fine); background: var(--color-disabled); font: bold 9px/0 "Open Sans", sans-serif; border-radius: 2px; text-transform: uppercase; } /* Breathing room in top of folders */ #songs .spacer { padding-bottom: 5px; cursor: default; } /* Divider below folders (end of folder or divider before SID files) */ #songs .divider { padding-bottom: 6px; border-bottom: 1px dashed var(--color-text-faint); cursor: default; } #songs tr:hover { /*color: var(--color-link-hover);*/ background: var(--color-bg-sid-hover); } #songs tr.selected:hover { background: var(--color-bg-sid-selected); } #songs tr.disabled:hover { background: var(--color-bg-box); /* Same as box background */ } /* Used for e.g. BASIC tunes (the two emulators can't play these) */ #songs .disabled, #songs .disabled tr:hover, #songs .disabled .info { color: var(--color-disabled); cursor: default; } /* The bottom container for searching */ #search { position: relative; padding: 10px; height: 50px; background: var(--color-bg-songs-buttons); } #dropdown-search { position: absolute; top: 14px; left: 11px; font-size: 13px; width: 88px; } #search input[type="text"] { position: absolute; top: 14px; left: 105px; width: 184px; /* 242px */ font-size: 14px; padding: 4px; height: 21px; border: 0.5px solid var(--color-border-box); border-radius: 1px; } #songs .medium, #topic-settings .medium { padding: 0 7px; font-size: 11px; box-shadow: none !important; } #search-here-container { display: inline-block; position: absolute; top: 14px; right: 82px; } #search-here-container input { margin-right: 0; } #search-here-container label { position: relative; top: -1px; font: normal 13px/0 "Montserrat", sans-serif; } #search-here-container label.disabled, #ev-dd2 label.disabled { color: var(--color-text-label-disabled); } #search-button { position: absolute; top: 14px; right: 11px; height: 21px; line-height: 22px; } #search-cancel { position: relative; top: -2.5px; height: 23px; line-height: 26px; } /* ---- Thumbnails for links ------------------------------------------------- */ .site-list { list-style: none; margin: 0; padding: 0 !important; } .site-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: auto; } .site-link { display: flex; align-items: center; gap: 6px; text-decoration: none; width: 300px; } .thumb { width: 40px; height: 25px; object-fit: cover; background: #eee; } .site-header { position: relative; top: 2px; margin-left: 1px; font-size: 17px !important; background: transparent; border: none; white-space: nowrap; transition: all .07s linear; } [data-theme="dark"] .site-header:hover { color: #fff !important; } .site-type { float: right !important; position: relative; top: -2px; font: normal 13px "Asap Condensed", sans-serif; white-space: nowrap; opacity: .4; } /* ---- Context menu -------------------------------------------------------- */ .context { visibility: hidden; position: absolute; z-index: 5; background: var(--color-context-bg); border: 1px solid var(--color-context-border); padding: 4px 6px; box-shadow: 2px 2px 2px var(--color-context-shadow); } #contextsubmenu { z-index: 6; } .context .line { position: relative; height: 24px; padding: 0 6px; margin: 2px 0; font-size: 13px; line-height: 25px; cursor: pointer; } .context .line:hover { color: var(--color-context-text-hover); background: var(--color-context-bg-hover); } .context .divider { height: 2px; margin-bottom: 1px; border-bottom: 1px solid var(--color-context-divider); } .context .submenu { padding-right: 18px; } .context .submenu:after { content: ""; position: absolute; top: 6px; right: 0; width: 0; height: 0; border: 6px solid transparent; border-color: transparent transparent transparent var(--color-context-triangle); } .context .disabled { color: var(--color-context-disabled); cursor: default; } .context .disabled:hover { color: var(--color-context-disabled); background: transparent; } .context .disabled.submenu:after { /* Chained classes */ border-color: transparent transparent transparent var(--color-context-disabled); } #small-edit { position: relative; text-align: right; margin-right: 30px; } #sym-rename, #sym-specify-subtune { height: 20px; font-size: 14px; font-weight: normal; pointer-events: auto; } /* Edit box for renaming a file or folder (symlists only) */ #sym-rename { width: 264px; } /* Edit box for specifying a different default sub tune for a symlist SID file */ #sym-specify-subtune { /*position: absolute; top: 2px; right: 30px;*/ width: 32px; } /* ---- Right side container with tabs -------------------------------------- */ /* Container for entire left side (top, info/memory/stil, controls, browser, search) */ #dexter { position: absolute; top: 0; left: 450px; display: flex; flex-flow: column; height: calc(100% - 10px); width: 860px; } #dexter .soasc-status { position: absolute; top: -7.5px; left: 348px; padding: 3px 2px 3px 6px; border-radius: 3px; background: var(--color-soasc-status-bg); border: 0.5px solid var(--color-soasc-status-border); color: var(--color-soasc-status-text); } #soasc-status-led { display: inline-block; position: relative; top: 0; width: 7px; height: 7px; background: var(--color-soasc-status-unknown); margin: 0 0 0 2px; } #tabs { /* See also #top for additional styling (flex) */ width: 860px; } #youtube-tabs { display: none; flex: 0 0 13px; position: relative; } #edityttabs { position: absolute; top: 2px; right: 1px; font-size: 11px; text-align: right; } #tabs .tab, #sundry-tabs .tab, #youtube-tabs .tab, #annex .annex-tab { float: left; position: relative; top: 30.5px; width: 60px; height: 22px; font: normal 13px/0 "Montserrat", sans-serif; padding-top: 10px; color: var(--color-tab-text-color); margin-right: 3px; border-top: 1px solid var(--color-tab-border); border-left: 1px solid var(--color-tab-border); border-right: 1px solid var(--color-tab-border); border-top-left-radius: 1px; border-top-right-radius: 1px; text-align: center; background: var(--color-tab-bg); z-index: 1; cursor: pointer; } #sundry-tabs .tab { top: 7.5px; width: 45px; font-family: "Asap Condensed", sans-serif; } #youtube-tabs .tab { top: 0; width: auto; padding-left: 8px; padding-right: 8px; font-family: "Asap Condensed", sans-serif; } #annex .annex-tab { top: 0; width: auto; padding-left: 10px; padding-right: 24px; } #tabs .selected, #sundry-tabs .selected, #youtube-tabs .selected, #annex .selected { border-top: 1px solid var(--color-tab-border); border-left: 1px solid var(--color-tab-border); border-right: 1px solid var(--color-tab-border); color: var(--color-tab-selected-text); background: var(--color-tab-selected-bg); z-index: 4; cursor: default; } #tabs .disabled, #sundry-tabs .disabled, #youtube-tabs .disabled { border-top: 1px solid var(--color-tab-border-disabled); border-left: 1px solid var(--color-tab-border-disabled); border-right: 1px solid var(--color-tab-border-disabled); color: var(--color-tab-text-disabled); background: var(--color-tab-bg-disabled); cursor: default; } #tabs .tab:not(.selected):hover.tab:not(.disabled):hover, #sundry-tabs .tab:not(.selected):hover.tab:not(.disabled):hover, #youtube-tabs .tab:not(.selected):hover.tab:not(.disabled):hover { color: var(--color-tab-hover-text); background: var(--color-tab-hover-bg); } #tabs .right, #sundry-tabs .right, #youtube-tabs .right { float: right; margin-left: 3px; margin-right: 0; } /* Small value bubbles at the tab corners */ #tabs .notification { display: none; position: absolute; top: -6px; right: -2px; font-size: 9px; line-height: 0; height: 12.5px; background: var(--color-notification-default); color: var(--color-notification-text); padding: 6px 3px 0; border-radius: 3px; font-weight: bold; } #tabs .csdbcolor { background: var(--color-notification-csdb); } #tabs .gb64color { background: var(--color-notification-gb64); } #tabs .playercolor { background: var(--color-notification-player); } #tabs .remixcolor { background: var(--color-notification-remix); } #tabs .stilcolor { background: var(--color-notification-stil); } /* Where the contents of a dexter tab is shown */ #page { position: relative; flex: 1 1 auto; flex: 1; /* Chrome hack */ overflow: auto; padding: 10px; border: 1px solid var(--color-border-box); border-radius: 1px; background: var(--color-bg-box); z-index: 2; } /* Make the big logo crawl up under the white sticky header bar */ .big-logo { background: var(--color-bg-box) var(--url-biglogo) -14px -2px / 890px no-repeat !important; image-rendering: crisp-edges; } /* Tabs with no big logo should start at the top */ #page h2:first-child { margin-top: 0; } /* Tabs with the big logo present should leave room for it to begin with */ #dexter .big-logo h2:first-child { margin-top: 140px !important; } #page .h2-note { position: relative; top: -3px; display: inline-block; margin-left: 16px; font: italic 14px "Open Sans", helvetica, sans-serif; } #disqus-title { display: block; /*font-size: 19px;*/ margin: 20px 0 14px; color: var(--color-text-fine); } /* Tighter paragraphs for the profile, CSDb and GB64 pages */ #page .ext p { margin: 10px 0; } #compo-profile p { margin: 0 0 10px; } /* Add a "halo" outline to event graphics to circumvent background color expectations */ #page img.event { filter: drop-shadow(0 0 0.75px rgba(0,0,0,.75)) drop-shadow(0 0 0.75px rgba(255,255,255,.9)); } /* Also known as plinks */ #page .redirect { position: relative; padding-left: 20px; } #page .quote .redirect { padding-left: 15.5px; } #page blockquote .redirect { padding-left: 14px; } #page .redirect:before, #page .redirect:after { content: ""; top: 2px; left: 0; display: inline-block; position: absolute; width: 16px; height: 16px; transition: all .05s linear; } #page .quote .redirect:before, #page .quote .redirect:after { width: 12.5px; height: 12.5px; } #page blockquote .redirect:before, #page blockquote .redirect:after { width: 10.5px; height: 10.5px; } #page .redirect:before { border: 1.5px solid var(--color-button-border-idle); background: var(--color-button); } #page .redirect.playing:before { border: 1.5px solid var(--border-button-select); background: var(--color-button-bg-select); } #page .redirect:after { top: 4px; left: 2px; background: url(../images/redirect_play.svg) 0 0.5px / 12px 12px no-repeat; filter: var(--svg-filter-white); } #page .quote .redirect:after { background-size: 8px 8px; } #page blockquote .redirect:after { top: 3px; background-size: 7px 7px; } #page .redirect.playing:after { top: 3px; left: 1px; background: url(../images/redirect_play.svg) 0.5px 0 / 13px 14px no-repeat; filter: var(--svg-filter-button); } #page .quote .redirect.playing:after { background-size: 9px 10px; } #page blockquote .redirect.playing:after { background-size: 8px 9px; } #page .redirect:hover:before { background: var(--color-button-hover); } #page .redirect.playing:hover:before { border-color: var(--color-button-border-hovsel); background: var(--color-button-bg-hovsel); } #page .redirect.playing:hover:after { filter: var(--svg-filter-button-hover); } #page .ext del { color: var(--color-text-faint); } #page .ext a > del { color: var(--color-text-del); } #page .ext .screenshot { width: 384px; height: 272px; border: 1px solid var(--color-border); cursor: pointer; } #page .ext .no-profile { margin-top: 5px; font-size: 12px; color: var(--color-text-subtle); } #page .ext .composer { width: 184px; height: 184px; border: 1px solid var(--color-border); background: var(--color-avatar-bg); } #page .ext .nobg { border: none; background: none; } #page .ext .root-thumbnail { background: var(--color-avatar-bg); width: 80px; height: 80px; } /* Born / Died */ #page .ext .line { position: relative; top: -4px; margin-right: 20px; } /* Deprecated */ #page .ext .onsid { padding: 2px 6px 3px; border: 1px solid var(--color-text-dim); border-radius: 4px; background: var(--color-top); } #page .ext .notable { display: block; position: absolute; height: 22px; left: 10px; bottom: 52px; color: var(--color-text-notable); background: var(--color-notable); border-radius: 4px; } #page .ext .notable a { color: var(--color-anchor-notable); } #page .ext .notable a:hover { color: var(--color-anchor-hover-notable); } /* Flag image added after countries */ #page .ext .flag { height: 11px; border: 1px solid var(--color-button-hover); margin: 0 1px; } #page .ext img.icon { position: relative; top: 4px; height: 21px; margin-right: 3px; } #page .ext img.iconbigger { position: relative; top: 6px; height: 21px; margin-right: 4px; } #page .ext img.arrow { position: relative; top: 4px; height: 18px; margin-right: 2px; filter: var(--svg-filter-icon-bottom); } #page .ext img.cake, #page .ext img.earth, #page .ext img.stone, #page .ext img.clinks, .doublenote { filter: var(--svg-filter-icon-bottom); } #clink-list li { position: relative; } /* A composer link in a bullet list of links for a composer (annex box) */ #annex a.clink { display: inline-block; width: 170px; /* Also adjusted in main.js */ font-family: "Asap Condensed", sans-serif; vertical-align: bottom; } /* And edit icon in the right side of a composer link */ #annex .clink-icon { display: none; position: absolute; top: 0; right: -1px; height: 20px; width: 20px; background: #ccc; filter: var(--svg-filter-icon-bottom); cursor: pointer; opacity: 0.6; } #annex .clink-icon:hover { opacity: 1; } #annex .clink-edit { right: 19px; background: url(../images/edit.svg) 0 0 / 18px 18px no-repeat; } #annex .clink-delete { background: url(../images/close.svg) 0 0 / 18px 18px no-repeat; } /*.icon-editor { filter: var(--svg-filter-icon-editor); }*/ /* Composer star used in notable line */ #page .ext img.cstar { filter: var(--svg-filter-icon-cstar); } #page .ext .up { position: relative; top: -2px; } #page .ext .tinyhandle { font-size: 10px; padding-top: 4px !important; /*padding-bottom: 1px !important;*/ border-bottom: 1px solid var(--color-table-border-thandle) !important; } #page .ext .tinytop { font-size: 2px; } #page .ext .tinybottom { font-size: 6px; } #page .ext .filler { visibility: hidden; } #page .ext .icon-before:before, #page .ext .compo-pos:before { content: ""; position: relative; display: inline-block; } #page .ext .icon-arrowright:before { top: 4px; height: 18px; width: 18px; background: url(../images/composer_arrowright.svg) 0 0 / 18px 18px no-repeat; filter: var(--svg-filter-icon-bottom); margin-right: 2px; } #page .ext .compo-pos:before { top: 1px; height: 16px; width: 18px; background: url(../images/composer_arrowright.svg) 0 0 / 18px 18px no-repeat; filter: var(--svg-filter-icon-bottom); } #page .ext .icon-founder:before { top: 4px; height: 18px; width: 18px; background: url(../images/composer_flash.svg) 0 0 / 18px 18px no-repeat; filter: var(--svg-filter-icon-flash); margin-right: 2px; } #page .ext .icon-random:before { top: 4px; height: 17px; width: 17px; background: url(../images/composer_random.svg) 0 0 / 17px 17px no-repeat; filter: var(--svg-filter-icon-bottom); margin-right: 2px; } #page .ext .icon-created:before { top: 2px; left: 1px; height: 16px; width: 16px; background: url(../images/composer_plus.svg) 0 0 / 16px 16px no-repeat; filter: var(--svg-filter-icon-plus); margin-right: 4px; } #page .ext .icon-work:before { top: 2px; height: 15px; width: 15px; background: url(../images/composer_office.svg) 0 0 / 15px 15px no-repeat; filter: var(--svg-filter-icon-office); margin-right: 4px; } #page .ext .icon-etc:before { top: 2px; left: -1px; height: 16px; width: 16px; background: url(../images/composer_downwards.svg) 0 0 / 18px 18px no-repeat; filter: var(--svg-filter-icon-bottom); margin-right: 3px; } #page .ext .icon-swing:before { top: 4px; height: 18px; width: 18px; background: url(../images/composer_arrowswing.svg) 0 0 / 18px 18px no-repeat; filter: var(--svg-filter-icon-bottom); margin-right: 2px; } #page .ext .icon-note:before { top: 4px; left: 1px; height: 18px; width: 11px; background: url(../images/composer_singlenote.svg) 0 0 / 11px 18px no-repeat; filter: var(--svg-filter-icon-bottom); margin-right: 6px; } /* Some composer profiles may show a group logo/name image too */ #page .brand { position: absolute; right: 0; bottom: 6px; } /* The 'Report a profile change' link in the composer profile corner */ #profilechange { position: absolute; top: 4px; /* Horizontal position is set in composer.php */ width: 140px; font-size: 11px; } /* Container table in root welcome page for the two side-by-side tables */ #page table.root { border: none; } #page table.pseudo:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } #page table.decent:before { background: url(../images/decent.png) -68px 4px no-repeat; background-size: 54%; opacity: 0.7; transition: all .1s linear; } #page table.cshelldb:before { background: var(--color-bg-cshelldb) url(../images/cshelldb.png) -70px -28px no-repeat; background-size: 140%; opacity: 0.8; transition: all .1s linear; } #page table.playmod:before { background: url(../images/soundtracker.png) -236px -100px no-repeat; background-size: 140%; opacity: 0.8; transition: all .1s linear; } #page table.spotlight:before { background: url(../images/spotlamp.png) 140px 7px no-repeat; background-size: 45%; opacity: 0.7; transition: all .1s linear; } .spottext { text-shadow: 0 0 4px var(--color-bg-block-data); } .new-user { color: var(--color-text-new-user); font-weight: bold; } #page table.root div { pointer-events: auto; } #page table.root td { border: none; padding: 0; text-align: right; vertical-align: top; } #page table.rec table.tight { max-width: 100%; padding: 8px 0 6px 11px; cursor: pointer; transition: all .07s linear; } #page table.rec table.tight:hover { background: var(--color-root-bg-rec); } #page table.rec table.pseudo .random-container { position: absolute; top: 10px; right: 10px; text-align: right; font-size: 17px; font-weight: bold; color: var(--color-root-random-text); text-shadow: 0 0 9px var(--color-root-random-shadow); } #page table.rec table.cshelldb .random-container { left: 0; text-align: left; } #page table.rec .random-container span { font-size: 36px; color: var(--color-root-random-bigfont); line-height: 0; } #page table.rec table.pseudo:hover { background: none; } #page table.rec table.pseudo:hover:before { background-color: var(--color-root-bg-random); /*background: linear-gradient(to right, var(--color-bg-box), --color-root-bg-rec);*/ opacity: 1.0; } /* Recommendations */ #page table.rec td { position: relative; text-align: left; margin-bottom: 10px; } /* "Recommended Folder" */ #page table.rec h3 { display: inline-block; margin: 0 0 7px 30px; font-size: 22px; line-height: 1.16em; } /* "J. Bjerregaard" */ #page table.rec h4 { margin: 0; font-size: 19px; } /* "Jozz" */ #page table.rec h5 { margin: 0; font-size: 16px; } #page table.rec .folder { position: absolute; top: -4px; left: -4px; width: 31px; } /* The double-note icon */ #page table.rec img.icon { position: relative; top: 3px; height: 15px; margin-right: 5px; } #page table.root td.middle { text-align: left; } #page table.root label { position: relative; top: -2px; right: 6px; font: normal 13px/0 "Montserrat", sans-serif; color: var(--color-text-fine); } /* Additional styling for the top list dropdown boxes */ .toplist, .toprows { margin-bottom: 4px; text-align: left; float: left; z-index: 2; } .toprows { float: right; } table.quicklinks { margin-bottom: 2em !important; padding: 8px 12px 10px 0 !important; } table.quicklinks th { padding: 0 0 6px 12px !important; width: 25%; font: normal 19px "Montserrat", sans-serif; border-right: 1px solid var(--color-table-border) !important; vertical-align: top; } table.quicklinks td { padding-left: 12px !important; padding-right: 12px !important; border-right: 1px solid var(--color-table-border) !important; } table.quicklinks th:last-child, table.quicklinks td:last-child { padding-right: 0 !important; border-right: 0 !important; } table.quickbox { min-width: 100%; margin: 0 10px 6px 0 !important; padding: 0 !important; /*border: 1px solid var(--color-table-border) !important;*/ } table.quickbox td { border-right: 0 !important; } table.quickbox td:last-child { padding-left: 4px !important; } table.quickbox h4 { font-size: 17px !important; } table.quickbox h5 { font-size: 14px !important; } td.quickline { height: 6px; border-top: 1px dashed var(--color-table-border) !important; } .quickyear { float: right; position: relative; top: 4px; margin-right: 10px; font: normal 13px "Open Sans", helvetica, sans-serif; color: var(--color-text-minor); } #page .ext .quick-thumbnail { float: left; background: var(--color-avatar-bg) !important; width: 40px !important; height: 40px !important; } /* Container for group name in table list to have ellipsis on it */ #page .ext .group, #page .ext .participant { display: inline-block; max-width: 195px; vertical-align: bottom; } #page .ext .participant { max-width: 250px; } /* Container for a sticky white top header box (used by e.g. the 'CSDb' tab) */ #sticky-csdb, #sticky-gb64, #sticky-remix, #sticky-player, #sticky-stil, #sticky-visuals { display: none; position: relative; padding: 8px 10px; height: 51px; border: 1px solid var(--color-border-box); border-bottom: none; background: var(--color-bg-songs-buttons); /* url(../images/biglogo.png) -14px -2px / 890px no-repeat; */ z-index: 3; } #sticky-visuals { overflow: visible; } #dropdown-visuals { position: absolute; top: 14px; left: 125px; font-size: 13px; } #sticky-visuals .visuals-buttons { position: absolute; top: 12px; left: 120px; } #sticky-visuals .visuals-buttons > button { height: 27px; width: 88px; padding: 0 6px; margin-right: 5px; line-height: 0; border-radius: 3px; } #sticky-visuals button:before { content: ""; position: relative; top: 1px; width: 14px; height: 14px; padding-right: 20px; filter: var(--svg-filter-white); } #sticky-visuals .button-on { font-weight: bold; } #sticky-visuals .button-on:before { filter: var(--svg-filter-icon-visuals); } #sticky-visuals .icon-piano:before { background: url(../images/visuals_piano.svg) 0 0 / 14.5px 14.5px no-repeat; } #sticky-visuals .icon-graph:before { background: url(../images/visuals_graph.svg) 0 0 / 14px 14px no-repeat; } #sticky-visuals .icon-memory:before { background: url(../images/visuals_memory.svg) 0 -2.4px / 14px 19px no-repeat; } #sticky-visuals .icon-stats:before { background: url(../images/visuals_stats.svg) 0 -5px / 14.5px 24px no-repeat; } /* Container for buttons in the right side of the sticky white top header box */ #sticky-right-buttons { width: 338px; position: absolute; top: 13px; right: 10px; text-align: right; } /* Resets the padding for the icon in the visual page selector buttons */ #sticky-right-buttons button:before { padding: 0; } #memory-lc { display: none; } #visuals-toggle { float: left; } #page .ext .permalink, #sticky-csdb .permalink, #sticky-player .permalink, #path .permalink { width: 12px; height: 12px; fill: var(--color-timebar-border); margin: 0 0 2px 8px; cursor: pointer; transition: all .07s linear; } /* Permalink for search results */ #path .permalink { position: relative; top: 0.5px; margin: 0 8px 0 5px; } .corner-icons { position: absolute; top: 12px; right: 14px; height: 24px; text-align: right; } #sticky-csdb .corner-icons { top: 12px; right: 14px; } .corner-icons svg { width: 24px; height: 24px; cursor: pointer; transition: all .07s linear; } .corner-icons .profile, .corner-icons .close { width: 23px; height: 23px; margin-right: 3px; fill: var(--color-timebar-border); } .corner-icons .close { position: relative; top: 1px; } .corner-icons .close:hover, .corner-icons .profile:hover, #page .ext .permalink:hover { fill: var(--color-text-minor); } .corner-icons .outlink { stroke: var(--color-timebar-border); } .corner-icons .outlink:hover { stroke: var(--color-text-minor); } /* Icons inline in text (typically in field with notable achievements) */ #page .ext .inline-icon { position: relative; top: 3px; width: 15px; margin-right: 2px; } #page .ext .count { position: relative; top: -1px; margin-left: 6px; height: 16px; padding: 0 4px 0; font-size: 11px; line-height: none; background: transparent; border: 1px solid var(--color-timebar-border); border-radius: 3px; text-align: center; } #page .ext table.comments .count { font-size: 9px; } #page .ext table.comments, #page .ext table.releases { font-size: 14px; margin: 0; border-width: 1.5px; } #page .ext table.comments td { border-top-color: var(--color-border-comments); } #sticky-csdb img.arrow { position: relative; top: 2px; height: 22px; filter: var(--svg-filter-icon-sticky); } #sticky-csdb .topic-wrap { position: relative; top: 3px; display: inline-block; max-width: 416px; } #sticky-csdb .topic { width: 100%; line-height: 25px; } #sticky-csdb .topic-inner { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #page .ext .oldest-in-top, #page .ext .post-count { float: right; position: relative; top: 24px; font-size: 11px; } #page .ext .oldest-in-top { color: var(--color-oldest-in-top); } #page .ext .zero-releases-line { border-top: 1px solid var(--color-border); } /* Used to emphasize handles or groups in a list of CSDb releases */ #page .ext .emphasize { background: var(--color-emphasize); } /* Used to emphasize other groups in a list of CSDb releases */ #page .ext .empSec { background: var(--color-empSec); } /* Used to emphasize the real name or handle of the scener in a list of CSDb releases */ #page .ext .empThird { background: var(--color-empThird); } #page .ext .shared-all-comments { color: var(--color-text-minor); } #page .ext .forum-user-admin { color: var(--color-forum-admin); } #page .ext .forum-user-moderator { color: var(--color-forum-moderator); } #page .ext .forum-user-trusted { color: var(--color-forum-trusted); } #page .ext .forum-user-admin:hover, #page .ext .forum-user-moderator:hover, #page .ext .forum-user-trusted:hover { color: var(--color-anchor-hover); } #page .ext .user { position: relative; width: 170px; vertical-align: top; border-right-color: var(--color-border-comments); color: var(--color-text-minor); } #page .ext .user a { text-decoration: none; } #page .ext .date { position: relative; top: -4px; font-size: 11px; color: var(--color-text-player); } #page .ext .time { color: var(--color-text-time); } #page .ext .pm { position: absolute; top: auto; bottom: 6px; right: 6px; } /* Folder icon in comments that goes to his/her DeepSID folder */ #page .ext .home-folder { position: absolute; top: auto; bottom: 6px; right: 32px; cursor: pointer; } #page .ext .avatar { /*position: absolute; top: auto; bottom: 6px; left: 6px;*/ width: 57px; height: 57px; border: 0.5px solid var(--color-border); margin-bottom: -3px; background: var(--color-avatar-bg); } /* The table cell with the actual CSDb comment text */ #page .ext .comment { vertical-align: top; } /* Used to encapsulate extremely long words and force them to wrap around */ #page .ext .long { display: inline-block; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; } /* Table showing releases for a SID tune (CSDb type: "SID") */ #page .ext table.releases { border-left: none; border-right: none; border-top: none; border-bottom: 1px solid var(--color-border); margin: 0; } #page .ext table.releases td { border-right: none; border-top: 1px solid var(--color-border); padding: 7px 0 2px; } #visuals-piano .piano { position: relative; width: 100%; height: 96px; transition: all .2s linear; } #visuals-memory .sid-info { float: left; height: 133px; width: 405px; padding: 8px 16px; } #visuals-memory .label, #visuals-memory .m { font: normal 13px "Montserrat", sans-serif; } #visuals-memory .label { display: inline-block; width: 130px; } #visuals-memory .si { font: normal 10px "Commodore 64", sans-serif; } #visuals-memory .sid-info-left { margin: 0 10px 10px 0; } #visuals-memory .sid-info-right { margin: 0 0 10px 0; } /* For a monitor-style output with a row of hexadecimal bytes and their PETSCII characters */ #visuals-memory .monitor { font: normal 10px/12px "Commodore 64", sans-serif; } #block-memory { width: 820px; } #visuals-memory td.block-info { /*font: normal 15px "Asap Condensed", sans-serif;*/ font: normal 13px "Open Sans", helvetica, sans-serif; vertical-align: top; padding: 4px 8px; width: 107px; } #visuals-memory .player-to-left { margin-top: 6px; } #visuals-memory td.block-info button { height: 24px; } #visuals-memory td.block-zp { height: 204px; } #visuals-memory td.block-data { padding: 6px 0 6px 10px; color: var(--color-text-block); background: var(--color-bg-block-data); } #visuals-memory .bt { color: var(--color-text-block-toggled); } /* Negative PETSCII character */ #visuals-memory .n { color: var(--color-bg-box); background: var(--color-text-body); } #visuals-memory .bt.n { background: var(--color-text-block-toggled); } #visuals-memory .ch { color: var(--color-text-block-changed); } #visuals-memory .n.ch { color: var(--color-bg-box); background: var(--color-text-block-changed); } #visuals-memory .msg { font: normal 14px "Open Sans", helvetica, sans-serif; color: var(--color-text-subtle); margin: 12px 0; text-align: center; } #table-stats, #table-global-stats, #stats-notes p { font-size: 13px; font-family: "Asap Condensed", sans-serif; } #stats-notes { margin-left: 1px; padding: 2px 10px; width: 270px; } #table-stats button.stats-solo { position: relative; top: var(--top-button-solo); margin-left: 10px; width: 50px; height: var(--height-button-solo) !important; font-size: 10px !important; line-height: 10px !important; border-radius: 5px; } #table-global-stats { float: right; width: 66.7%; margin-top: -9px; } #table-stats th, #table-global-stats th { position: relative; width: 33%; } #table-global-stats td { width: 33%; vertical-align: top; } #table-stats div, #table-global-stats div { position: relative; color: var(--color-text-faint); } #table-stats .stats-used, #table-global-stats .stats-used { color: var(--color-text-body); } #table-stats .stats-used:after, #table-global-stats .stats-used:after { content: "\2714"; float: right; } #table-stats span, #table-global-stats span { position: absolute; top: 10px; left: 190px; font: normal 10px/0 "Commodore 64", sans-serif; } #table-stats font, #table-global-stats font { display: block; position: relative; left: 30px; /* 16px */ top: -1px; height: 12px; /*width: 12px;*/ animation: fadeOut linear 300ms; /* 600ms */ animation-fill-mode: forwards; /*background: url(../images/loading_threedots.svg) 0 0 / 40px 10px no-repeat;*/ font: normal 13px/0 Arial, Helvetica, sans-serif; color: var(--color-text-block-changed); } #table-stats th font { top: -19.5px; /* -19.5px -27.5px */ left: 22.5px; color: var(--color-text-body); font-weight: bold; font-size: 20px; } @keyframes fadeOut { from { opacity: 1; } to { color: var(--color-text-body); opacity: 0.15; } } #table-stats img { width: 16px; } #table-stats .stats-space, #table-global-stats .stats-space { margin-top: 8px; } #topic-csdb .thumbnail, #topic-player .thumbnail { width: 116px; } #topic-gb64 .thumbnail { text-align: right; } #page .ext .thumbnail img { width: 116px; height: 82px; border: 1px solid var(--color-border); } #topic-gb64 .thumbnail img { margin-left: 8px; } #zoomed { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 960px; z-index: 9999; image-rendering: pixelated; /* To avoid a blurred image */ image-rendering: crisp-edges; /* For better browser compatibility */ cursor: pointer; } #page .ext .info { position: relative; padding: 7px 0 0 6px !important; vertical-align: top; font-size: 12px; } #page .ext .name { font-size: 16px; font-weight: bold; text-decoration: none; } #page .ext .remix64-connect { position: relative; display: inline-block; width: 57px; height: 32px; padding: 2px; margin: 0; vertical-align: top; } #page .ext .action .down { display: none; position: absolute; bottom: var(--bottom-connect-down); left: 23px; width: 1px; height: 15px; border-left: 2px solid var(--color-table-border); z-index: 2; } #page .ext .remix64-connect .up { position: absolute; top: 6px; left: 23px; width: 5px; height: 8px; border-left: 2px solid var(--color-table-border); background: var(--color-bg-box); z-index: 2; } #page .ext .remix64-connect .right { position: absolute; top: 10px; right: -6px; width: 40px; height: 8px; border-left: 2px solid var(--color-table-border); border-bottom: 2px solid var(--color-table-border); border-radius: 8px; } /* Container for the audio element below */ #page .ext .remix64-audio { position: relative; display: inline-block; padding: 2px; height: 32px; /* containing the square play button for a remix */ #topic-remix .action { position: relative; width: 53px; vertical-align: top; } #page .ext .remixer_badge { display: inline-block; width: 45px; background: rgba(51, 136, 170, 0.7); color: var(--color-top); font-size: 75%; padding: 2px 0; margin: 0 1px; border-radius: 6px; text-align: center; } .badge_newcomer { background: rgba(71, 190, 51, 0.7) !important; } .badge_veteran_bronce { background: rgba(170, 136, 51, 0.7) !important; } .badge_veteran_silver { background: rgba(170, 170, 170, 0.7) !important; } .badge_veteran_gold { background: rgba(200, 180, 0, 0.8) !important; } #topic-remix h3 { position: relative; } /* The "Click a smiley to vote!" graphics */ #page .ext .remix64-vote { position: absolute; top: 6px; right: 0; width: 179px; height: 50px; background: var(--url-vote) 0 0 / 177px 41px no-repeat; z-index: 2; pointer-events: none; } #page .ext .remix64-smiley { position: absolute; top: 8px; right: 0; font-size: 13px; pointer-events: auto; } #page .ext .remix64-smiley img { position: relative; top: 3px; width: 16px; height: 16px; } #page .ext .remix64-rank { position: absolute; top: 31px; right: 0; color: var(--color-text-player); } #page .ext .remix64-more td { border-top: none !important; margin: 0 !important; padding: 0 !important; } /* The container that may expand in height to show an