diff --git a/bin/view-palette b/bin/view-palette index d87351f6d..3c7fd38f4 100755 --- a/bin/view-palette +++ b/bin/view-palette @@ -2,8 +2,9 @@ """ # This is a development tool to see the colors in a stylesheet, via HTML in the browser. +# Works best on SCSS files or any textfile that defines colors. # Typical Usage: -# python view-palette _variables.css +# python view-palette _variables.scss # Copy and paste: # python view-palette ../Gazelle-repo/sass/apollostage/_variables.scss # python view-palette ../Gazelle-repo/sass/apollostage_paper/style.scss diff --git a/sass/apollostage/_base.scss b/sass/apollostage/_base.scss index 9f933efe8..159ff2018 100644 --- a/sass/apollostage/_base.scss +++ b/sass/apollostage/_base.scss @@ -27,7 +27,23 @@ // FULL CHANGELOG // ######################################################################## // +// Updated 2024-08-22: +// +// Feature: Add styling for autocompletes to match theme, and prevent +// white-on-white. Section 2.6. +// +// Fix: Styling and legibility improvements for tooltips. +// +// Fix: Sticky headers on most tables where it's possible. +// +// Formatting: Minor color adjustments to enable the above. +// +// Feature: Add new "Orpheus Haze" stylesheet, replacing Linohaze. +// This stylesheet includes 'haze' effects which respect are disabled for +// when the user/operating system requests for high-contrast. +// // Updated 2024-08-01: +// // Fix: Fixed the mobile view (media <575px) (thanks @hawkeye). Mobile // menu includes an animation, handling to prevent keyboard from opening // on iPh--e and other mobile devices, and a link to the home page. @@ -41,7 +57,7 @@ // Chore: Rewrote color support so all colors are defined by tokens. Colors // are defined in _variables.scss (and style.scss for derivative themes). // -// Feature: all fonts now hosted locally, via _fonts_base.scss. +// Feature: now using system font stack. // // Feature: New derivative theme, 'apollostage_paper' with light-mode. // By design, apollostage_paper uses and includes its own font stack. @@ -132,7 +148,8 @@ ## 2.3.2 additional treatment for messages that pop ## 2.4 Upload warnings ## ### 2.4.1 Post-Upload Download your Torrents Message - ## 2.5 Toolboxes */ + ## 2.5 Toolboxes + ## 2.6 Autocompletes */ /* # 3 DOCUMENTATION OF MOBILE CLASSES */ @@ -159,9 +176,9 @@ ### 4.13.2 Forum Table Structure ### 4.13.3 Forum Headers ## 4.14 Rules - ## 4.15 Reserved - ## 4.16 Handling for Sticky Table Headers on Mobile - ## 4.17 Site Header and Menu + ## 4.15 Friend List + ## 4.16 Handling for Sticky Table Headers on Mobile + ## 4.17 Site Header and Menu ### 4.17.1 Mobile Menu Setup ### 4.17.2 Mobile Menu Layout ### 4.17.3 Top Menubar @@ -209,6 +226,8 @@ $z-mobilemenu_closed-tab: 400; $z-mobilemenu_closed-tab-icons: 500; $z-desktop-menu-open: 800; $z-desktop-menu-closed: 900; +$z-sticky-table-headers: 1; +$z-avatar-mobile: 1; $height-mobilemenu_closed-tab: 32px; $wrapper-max-width: 1020px; @@ -362,11 +381,19 @@ textarea:focus { border-radius: 0.25rem; } -#content > .thin, +/* #developmentlife; #TODO additional bug checks on this. */ +/* The following overflow: hidden will be defeated when table is present; + sticky headers don't work inside overflow: hidden. */ + +/* TODO: user settings page sticky 'sections box' floats & that does not work + with stickys and is exempted. */ + +#content > .thin:not(:has(table)), .box, .box2, -.main_column, -.sidebar { +.main_column:not(:has(table)), +.sidebar, +body#user .main_column { overflow: hidden; } @@ -483,6 +510,9 @@ table ul.options_list { .colhead_dark { background-color: $color-background-table-row-th; line-height: 18px; + position: sticky; + top: 0; + z-index: $z-sticky-table-headers; } .colhead td, @@ -519,7 +549,7 @@ form { background-color: $color-background-form; } form table td.label { - color: $color-text-footer; + color: $color-text-base; padding-top: 9px; font-weight: 600; text-align: left; @@ -751,30 +781,6 @@ table.box2 { overflow: scroll !important; } -/* #2024 note: Many of these appear to be overridden by - * global.css or auto-complete.css: your mileage may vary. */ - -.autocomplete-suggestions { - background-color: $color-text-anchor; - border: none; - color: #26282e; - margin-top: 4px; -} - -.autocomplete-suggestions .autocomplete-suggestion { - line-height: 24px; - padding: 0 8px; -} - -.autocomplete-suggestions .autocomplete-suggestion.autocomplete-selected { - background-color: $color-accent-selection-background; - color: $color-accent-selection-text; -} - -.autocomplete-suggestions .autocomplete-suggestion strong { - color: #12a1e3; -} - .forum_post.forum_unread { border-top: 2px solid $color-accent-forum-unread; } @@ -1491,8 +1497,7 @@ blockquote { .filelist_table td, .reportinfo_table, -.torrentdetails, -blockquote { +.torrentdetails { background-color: $color-background-blockquote; } @@ -1659,22 +1664,22 @@ div#discog_table td.td_info:not(span.torrent_links_block) > a { } .tooltipster-default { - background-color: $color-background-base; - border: 0 solid $color-accent-border-tooltipster; + background-color: $color-background-tooltipster; + border: 4px solid $color-accent-border-tooltipster; border-radius: 2.5px; color: $color-text-tooltipster; } .tooltipster-default .tooltipster-content { - background-color: $color-background-base; + background-color: $color-background-tooltipster; color: $color-text-tooltipster; - font-size: 12px; + font-size: 13px; line-height: 1.4; padding: 4px 6px; } .tooltipster-default .tooltipster-content a { - background-color: $color-background-base; + background-color: $color-background-tooltipster; color: $color-text-tooltipster-anchor; font-weight: 600; } @@ -1717,31 +1722,31 @@ body#collage .cats_music { .cats_music { /* Memo: If you desire NO decoration on music uploads, /* turn this off. */ - border-right: thin solid darkslategray; + border-right: thin solid $color-accent-cats_music; } .cats_applications { - border-right: thick solid silver; + border-right: thick solid $color-accent-cats_applications; } .cats_audiobooks { - border-right: thick solid cornflowerblue; + border-right: thick solid $color-accent-cats_audiobooks; } .cats_comedy { - border-right: thick solid deepskyblue; + border-right: thick solid $color-accent-cats_comedy; } .cats_comics { - border-right: thick solid gold; + border-right: thick solid $color-accent-cats_comics; } .cats_ebooks { - border-right: thick solid chocolate; + border-right: thick solid $color-accent-cats_ebooks; } .cats_elearningvideos { - border-right: thick solid mediumpurple; + border-right: thick solid $color-accent-cats_elearningvideos; } /* END category decorations for torrent tables on torrent & collage pages */ @@ -2481,6 +2486,8 @@ tr.snatched_torrent div.tags::before { } } +/* ************************************************ */ + /* ## 2.4 Upload warnings ## */ .upload-error, @@ -2494,7 +2501,19 @@ ul#check.nobullet > * { background-size: 32px; } +.upload-error a, +ul#check.nobullet > * a { + color: $color-text-anchor-error !important; + text-decoration-line: underline; +} + +.upload-error a::after, +ul#check.nobullet > * a::after { + content: '↗︎'; +} + .upload-error, +.upload-error *, ul#check.nobullet *, ul#check.nobullet > * { color: $color-text-error !important; @@ -2504,6 +2523,9 @@ ul#check.nobullet > * { /* We also pop a message in header to draw attention when any upload warning occurs inline on the page */ +/* TODO: When HTML becomes available for this message, + content attribute will be deleted. */ + .upload-error::after, ul#check::after { content: "Warning! There were one or more errors in your submission. Check below for error messages."; @@ -2522,10 +2544,7 @@ ul#check::after { background-repeat: no-repeat; background-position: 8px center; background-size: 32px; - box-shadow: - 0 10px 18px rgb(0 0 0 / 55%), - 0 7px 7px rgb(0 0 0 / 52%), - 0 -5px 9px rgb(0 0 0 / 32%); + box-shadow: $ds-shadow-heavy; } /* ### 2.4.1 Post-Upload Download Message */ @@ -2546,6 +2565,8 @@ ul#check::after { // border-radius: 2.5rem; // } +/* ************************************************ */ + /* ## 2.5 Toolboxes ## */ /* TOOLBOXES */ @@ -2593,17 +2614,67 @@ ul#check::after { /* sticky headers ~ mobile */ @media (max-width: $phone-screen-size) { - body { - --header-row-height: $height-mobilemenu_closed-tab; - } + + #dnulist tr.colhead, .toolbox_container tr.colhead { position: sticky; - top: calc(var(--header-row-height) * 1); + top: $height-mobilemenu_closed-tab; font-size: 120%; font-weight: bold; } } +/* ************************************************ */ + +/* ## 2.6 Autocompletes */ + +/* foo */ + +/* Complete list of matches */ +.autocomplete-suggestions { + margin-top: 5px; + background: $color-background-autocompletes !important; + color: #888; //does nothing + width: auto !important; + text-align: left; + cursor: default; + border: 1px solid $midtone-300; //midtone-300 + border-top: 1px dashed $midtone-300; //midtone-300 + box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.8) !important; + + /* core styles should not be changed */ + position: absolute; + display: none; + z-index: $z-desktop-menu-open; + max-height: min(80vw, 254px); + overflow: hidden; + overflow-y: auto; + box-sizing: border-box; +} + +/* Each match in the list of matches */ +.autocomplete-suggestions .autocomplete-suggestion { + cursor: pointer; + position: relative; + padding: 0 6px; + line-height: 1.5rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: $color-text-input !important; //$color-text-input +} + +/* Portion that matches */ +.autocomplete-suggestions .autocomplete-suggestion strong { + font-weight: 400; + color: $color-text-autocomplete-highlight-match !important; // fore-1000 +} + +/* When one match is highlighted by mouse */ +.autocomplete-suggestions .autocomplete-suggestion.autocomplete-selected { + background-color: $color-menu-fx-selection !important; +} + /* ######################################################################## # 3 DOCUMENTATION OF MOBILE CLASSES ######################################################################## @@ -2747,7 +2818,6 @@ Documentation of mobile classes: order: -1; } - /* tired of specificity :( */ #settings_sections { position: static !important; } @@ -3329,7 +3399,9 @@ Documentation of mobile classes: min-height: 0; min-width: 0; position: absolute; + z-index: $z-avatar-mobile; } + /* END forum headers */ /* END forums */ @@ -3347,12 +3419,24 @@ Documentation of mobile classes: /* ************************************************ */ - /* ## 4.15 reserved */ + /* ## 4.15 friend list */ + /* TODO: Site HTML support to mobilize this table. */ + + body#friends div.avatar_container img { + display: none; + } /* ************************************************ */ /* ## 4.16 Handling for sticky table headers on Mobile */ - /* Deleted and burninated */ + + .colhead, + .colhead_dark { + position: sticky; + top: $height-mobilemenu_closed-tab; + font-size: 120%; + font-weight: bold; + } /* ************************************************ */ @@ -3404,7 +3488,7 @@ Documentation of mobile classes: } /* ## 4.17.2 Mobile Menu opens on hover */ - // Developers: when debugging, remove hover to force the menu open + // Developers: when debugging, remove hover to force the menu open // keyword: x-debug #header:hover { height: clamp(200px, calc(var(--row-height) * 15), 100%); @@ -3779,11 +3863,11 @@ Documentation of mobile classes: @media (max-width: $phone-screen-size) and (max-height: $phone-screen-size) { #header { - --row-height: 35px; + --row-height: 2rem; } } -@media (max-width: $phone-screen-size) and (height <= 510px) { +@media (max-width: $phone-screen-size) and (height <= calc(0.875 * $phone-screen-size)) { #userinfo_major, #userinfo_major > * { display: none; @@ -3799,7 +3883,7 @@ Documentation of mobile classes: ######################################################################## */ /* ## 6.1 Debugging Tools - various 'debug' and x-debug features are avail in this doc elsewhere */ + variou 'debug' and x-debug features are avail in this doc elsewhere */ #footer p:last-of-type::after { content: " | " + $build-slug; diff --git a/sass/apollostage/_variables.scss b/sass/apollostage/_variables.scss index f4d9b659e..92398dfc4 100644 --- a/sass/apollostage/_variables.scss +++ b/sass/apollostage/_variables.scss @@ -4,7 +4,7 @@ // //////////////////////////////////////////////////////////////////////////////// // SLUG -$build-slug: "Apollostage build 240808"; // must include quotes +$build-slug: "Apollostage build 240906"; // must include quotes // //////////////////////////////////////////////////////////////////////////////// // COLORS @@ -22,6 +22,7 @@ $back-700: #324041; $back-800: #384749; $back-900: #3c4d50; $back-1000: #405256; +$back-500-low: rgba(110.7, 149, 169, 0.15); $back-600-low: #2d393a54; $back-600-mid: #2d393a88; @@ -83,8 +84,8 @@ $ds-black: #000; // DEFINE FROM LOGICAL LAYOUT TO TOKENS $color-background-base: $back-100; -$color-background-blockquote: $back-400; -$color-background-box: $back-500; +$color-background-blockquote: $back-500-low; +$color-background-box: $back-500-low; $color-background-form: $back-200; // also boxes on frontpage $color-background-input: $back-400; $color-background-input-active: $back-500; @@ -93,11 +94,13 @@ $color-background-searchbars: $back-300; $color-background-searchbars-field-focus: $back-100; $color-background-searchbars-surround: $back-500; $color-background-table: $back-200; // tables/forms without odd-even treatment -$color-background-table-row-th: $back-500; -$color-background-table-row-odd: $back-300; -$color-background-table-row-even: $back-200; +$color-background-table-details: $back-400; // equal to blockquote +$color-background-table-row-th: $back-700; +$color-background-table-row-odd: $back-500; +$color-background-table-row-even: $back-300; $color-background-table-torrenttable: $back-300; // also form field in focus $color-background-table-torrents-group: $back-600; +$color-background-tooltipster: $back-100; $color-background-fx-unread: $ds-fx-mid; $color-background-torrent: $midtone-200; // edition in group-list $color-background-table-discog: $midtone-300; // navigation row ~ "jump down to.." @@ -147,9 +150,9 @@ $color-text-span-blue: hsl(235deg 90% 85%); $color-text-span-green: hsl(145deg 90% 70%); $color-text-span-red: $ds-red; $color-text-table-discog-titles: $midtone-900; -$color-text-tooltipster: $midtone-600; -$color-text-tooltipster-anchor: $midtone-800; -$color-text-tooltipster-anchor-hover: $midtone-1000; +$color-text-tooltipster: $fore-700; +$color-text-tooltipster-anchor: $fore-900; +$color-text-tooltipster-anchor-hover: $fore-800; // popup notifications $color-background-notification-gradient-1: $midtone-1000; // menu low/high suggested @@ -169,6 +172,13 @@ $color-obj-tag_bubble-background: $midtone-200; // menu-2 suggested $color-obj-tag_bubble-foreground: $midtone-900; // menu-9 suggested $color-obj-tag_bubble_snatched-background: $back-600; $color-obj-tag_bubble_snatched-foreground: $fore-800; + +// Autocompletes +$color-background-autocompletes: $color-background-searchbars; +$color-accent-border-autocompletes: $midtone-300; +$color-text-autocomplete: $color-text-input; +$color-text-autocomplete-highlight-match: $fore-1000; + $color-accent-border-blockquote: $back-900; // Dotted $color-accent-border-box: $back-900; $color-accent-border-input: $ds-fx-low; @@ -196,6 +206,7 @@ $color-accent-border-alert: $midtone-500; $color-background-alert: $midtone-100; $color-text-alert: $fore-700; $color-anchor-alert: $fore-1000; + $ds-shadow-heavy: 0 10px 18px rgb(0 0 0 / 55%), 0 7px 7px rgb(0 0 0 / 52%), @@ -206,9 +217,12 @@ $ds-shadow-raised: $ds-shadow-raised-hover: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%); + $color-accent-border-error: $ds-goldenrod; $color-background-error: $ds-gray-92; $color-text-error: $ds-black; +$color-text-anchor-error: $ds-red; + $color-accent-border-warning-1: hsl(348deg 99% 77%); $color-accent-border-warning-2: hsl(348deg 84% 51%); $color-background-warning: #633; diff --git a/sass/apollostage_coffee/style.scss b/sass/apollostage_coffee/style.scss index 1b83e6b5a..7cab0d86c 100644 --- a/sass/apollostage_coffee/style.scss +++ b/sass/apollostage_coffee/style.scss @@ -29,6 +29,7 @@ $back-700: #443B3A; $back-800: #4A3E3C; $back-900: #51413F; $back-1000: #574340; +$back-500-low: rgba(140.7, 125.3, 112, 0.15); // Mids $midtone-100: #3D2C29; @@ -69,8 +70,8 @@ $ds-rawsienna: #C98258; // DEFINE FROM LOGICAL LAYOUT TO TOKENS $color-background-base: $back-100; -$color-background-blockquote: $back-400; -$color-background-box: $back-500; +$color-background-blockquote: $back-500-low; +$color-background-box: $back-500-low; $color-background-form: $back-200; // also boxes on frontpage $color-background-input: $back-400; $color-background-input-active: $back-500; @@ -79,12 +80,14 @@ $color-background-searchbars: $back-300; $color-background-searchbars-field-focus: $back-100; $color-background-searchbars-surround: $back-500; $color-background-table: $back-200; // tables/forms without odd-even treatment -$color-background-table-row-th: $back-500; -$color-background-table-row-odd: $back-300; -$color-background-table-row-even: $back-200; +$color-background-table-row-th: $back-700; +$color-background-table-row-odd: $back-500; +$color-background-table-row-even: $back-300; $color-background-table-secondary: orangered; // no longer used $color-background-table-torrenttable: $back-300; // also form field in focus +$color-background-table-details: $back-400; // equal to blockquote $color-background-table-torrents-group: $back-600; +$color-background-tooltipster: $back-100; $color-background-torrent: $midtone-200; // edition in group-list $color-background-table-discog: $midtone-300; // navigation row ~ "jump down to.." $color-background-table-keyrows: $midtone-300; // navigation row ~ "jump up to.." @@ -136,9 +139,9 @@ $color-text-span-blue: hsl(235deg 90% 85%); $color-text-span-green: hsl(145deg 90% 70%); $color-text-span-red: $ds-red; $color-text-table-discog-titles: $midtone-900; -$color-text-tooltipster: $midtone-600; -$color-text-tooltipster-anchor: $midtone-800; -$color-text-tooltipster-anchor-hover: $midtone-1000; +$color-text-tooltipster: $fore-700; +$color-text-tooltipster-anchor: $fore-900; +$color-text-tooltipster-anchor-hover: $fore-800; $color-obj-button-base-1: $ds-gray-62; $color-obj-button-base-2: $ds-gray-92; $color-obj-poll: $midtone-900; // poll active part of bargraph @@ -147,11 +150,18 @@ $color-obj-tag_bubble-background: $midtone-700; // changed $color-obj-tag_bubble-foreground: $fore-600; // changed $color-obj-tag_bubble_snatched-background: $back-600; $color-obj-tag_bubble_snatched-foreground: $fore-800; + +// Autocompletes +$color-background-autocompletes: $color-background-searchbars; +$color-accent-border-autocompletes: $midtone-300; +$color-text-autocomplete: $color-text-input; +$color-text-autocomplete-highlight-match: $fore-1000; + $color-accent-border-blockquote: $back-900; // Dotted $color-accent-border-box: $back-900; $color-accent-border-input: $ds-fx-low; $color-accent-border-input-active: $ds-fx-mid; -$color-accent-border-tooltipster: $midtone-800; +$color-accent-border-tooltipster: $fore-500; $color-accent-border-popup: $midtone-800; $color-accent-border-tableouter: $back-600-mid; $color-accent-border-tablerows: $back-600-low; diff --git a/sass/apollostage_sunset/style.scss b/sass/apollostage_sunset/style.scss index cd351ef81..167468ff7 100644 --- a/sass/apollostage_sunset/style.scss +++ b/sass/apollostage_sunset/style.scss @@ -18,13 +18,19 @@ $build-slug: $build-slug + " " + "sunset"; // physical_layout -> token, and token -> raw value. -// Backgrounds -- 100-600 are used -$back-100: #19181A; -$back-200: #2A242C; -$back-300: #342A33; -$back-400: #3B2F36; -$back-500: #423438; -$back-600: #493B3D; +// Backgrounds -- not all are used; +$back-100: #1E1D1F; +$back-200: #252026; +$back-300: #2E232D; +$back-400: #352930; +$back-500: #3C2F33; +$back-600: #433437; +$back-700: #4A3A3F; +$back-800: #514048; +$back-900: #594653; +$back-1000: #5B4B60; +$back-500-low: rgba(230, 149, 164.3, 0.15); + $fore-400: #8D869D; $fore-500: #A595AF; $fore-600: #BCA5BE; @@ -70,8 +76,8 @@ $ds-menu-white: #fff8f8; // DEFINE FROM LOGICAL LAYOUT TO TOKENS $color-background-base: $back-100; -$color-background-blockquote: $back-400; -$color-background-box: $back-500; +$color-background-blockquote: $back-500-low; +$color-background-box: $back-500-low; $color-background-form: $back-200; // also boxes on frontpage $color-background-input: $back-400; $color-background-input-active: $back-500; @@ -80,11 +86,13 @@ $color-background-searchbars: $back-300; $color-background-searchbars-field-focus: $back-100; $color-background-searchbars-surround: $back-500; $color-background-table: $back-200; // tables/forms without odd-even treatment -$color-background-table-row-th: $back-500; +$color-background-table-row-th: $back-700; $color-background-table-row-odd: $back-300; $color-background-table-row-even: $back-200; $color-background-table-torrenttable: $back-300; // also form field in focus +$color-background-table-details: $back-400; // equal to blockquote $color-background-table-torrents-group: $back-600; +$color-background-tooltipster: $back-100; $color-background-torrent: $midtone-200; // edition in group-list $color-background-table-discog: $midtone-300; // navigation row ~ "jump down to.." $color-background-table-keyrows: $midtone-300; // navigation row ~ "jump up to.." @@ -136,9 +144,10 @@ $color-text-span-blue: hsl(235deg 90% 85%); $color-text-span-green: hsl(145deg 90% 70%); $color-text-span-red: $ds-red; $color-text-table-discog-titles: $midtone-900; -$color-text-tooltipster: $midtone-600; -$color-text-tooltipster-anchor: $midtone-800; -$color-text-tooltipster-anchor-hover: $midtone-1000; +$color-text-tooltipster: $fore-700; +$color-text-tooltipster-anchor: $fore-900; +$color-text-tooltipster-anchor-hover: $fore-800; + $color-obj-button-base-1: $ds-gray-62; $color-obj-button-base-2: $ds-gray-92; $color-obj-poll: $midtone-900; // poll active part of bargraph @@ -148,6 +157,12 @@ $color-obj-tag_bubble-foreground: $midtone-900; // menu-9 suggested $color-obj-tag_bubble_snatched-background: $back-600; $color-obj-tag_bubble_snatched-foreground: $midtone-1000; // Changed for sunset +// Autocompletes +$color-background-autocompletes: $color-background-searchbars; +$color-accent-border-autocompletes: $midtone-300; +$color-text-autocomplete: $color-text-input; +$color-text-autocomplete-highlight-match: $fore-1000; + $color-accent-border-blockquote: $back-900; // Dotted $color-accent-border-box: $back-900; $color-accent-border-input: $ds-fx-low; diff --git a/sass/global.scss b/sass/global.scss index b373ee6a5..b287d7a55 100644 --- a/sass/global.scss +++ b/sass/global.scss @@ -296,7 +296,6 @@ td.colhead_dark, .colhead_dark th { top: 0; position: sticky; - position: -webkit-sticky; z-index: 10; } @@ -842,7 +841,7 @@ tr.torrent .bookmark > a::after { /* make Safari treat as a regular text box */ input[type="search"] { - -webkit-appearance: textfield; + appearance: textfield; /* font-size: medium; background: #fff; */ } @@ -889,7 +888,7 @@ input[type="search"] { margin-right: 150px; } -@media only screen and (min-width: 768px) { +@media only screen and (width >= 768px) { .avatar_container > :last-child { margin-right: 150px; } diff --git a/sass/orpheus_paper/style.scss b/sass/orpheus_paper/style.scss index 4aaff0006..3fb08b153 100644 --- a/sass/orpheus_paper/style.scss +++ b/sass/orpheus_paper/style.scss @@ -15,7 +15,7 @@ @import '../apollostage/_variables'; // debug slugs: must be after import. -$build-slug: "Orpheus Paper build 240808"; +$build-slug: $build-slug + " " + "paper"; // override as follows: // //////////////////////////////////////////////////////////////////////////////// @@ -34,6 +34,7 @@ $back-700: #9A9E9F; $back-800: #8D9091; $back-900: #808384; $back-1000: #727576; +$back-800-low: #8D909155; // Mids $mid-100: #00AD89; @@ -118,8 +119,8 @@ $ds-gray-99: hsl(120deg 100% 99.6%); // DEFINE FROM LOGICAL LAYOUT TO TOKENS $color-background-base: $back-100; -$color-background-blockquote: $back-400; -$color-background-box: $back-500; +$color-background-blockquote: $back-800-low; +$color-background-box: $back-800-low; $color-background-form: $back-200; // also boxes on frontpage $color-background-input: $back-400; $color-background-input-active: $back-500; @@ -131,14 +132,17 @@ $color-background-searchbars-field-focus: $back-100; $color-background-searchbars-surround: $back-500; $color-background-table: $back-200; // tables/forms without odd-even treatment $color-background-table-discog: $mid-300; // navigation row ~ "jump down to.." -$color-background-table-row-th: $back-500; -$color-background-table-row-odd: $back-300; -$color-background-table-row-even: $back-200; +$color-background-table-row-th: $back-700; +$color-background-table-row-odd: $back-500; +$color-background-table-row-even: $back-300; $color-background-table-keyrows: $mid-300; // navigation row ~ "jump up to.." $color-background-table-torrenttable: $back-300; // also form field in focus +$color-background-table-details: $back-400; // equal to blockquote $color-background-table-torrents-group: $back-600; +$color-background-tooltipster: $back-100; $color-background-torrent: $mid-200; // edition in group-list $color-background-fx-unread: $ds-fx-blue; + $color-text-anchor-hover: $blue-800; $color-text-anchor: $blue-700; $color-text-base: $neutral-1000; @@ -165,9 +169,10 @@ $color-text-span-blue: hsl(235deg 90% 55%); //x lower $color-text-span-green: hsl(145deg 90% 35%); //x lower $color-text-span-red: $ds-red; $color-text-table-discog-titles: $fore-300; -$color-text-tooltipster: $fore-400; +$color-text-tooltipster: $fore-700; $color-text-tooltipster-anchor: $fore-900; -$color-text-tooltipster-anchor-hover: $fore-200; +$color-text-tooltipster-anchor-hover: $fore-800; + $color-menu-1: orangered; // unused (could be home) $color-menu-2: $menutheme-100; // torrents $color-menu-3: $menutheme-200; // collages @@ -196,6 +201,13 @@ $color-obj-tag_bubble-background: $mid-200; // menu-2 suggested $color-obj-tag_bubble-foreground: $mid-900; // menu-9 suggested $color-obj-tag_bubble_snatched-background: $back-600; $color-obj-tag_bubble_snatched-foreground: $fore-800; + +// Autocompletes +$color-background-autocompletes: $color-background-searchbars; +$color-accent-border-autocompletes: $midtone-300; +$color-text-autocomplete: $color-text-input; +$color-text-autocomplete-highlight-match: $fore-1000; + $color-accent-border-blockquote: $back-900; // Dotted $color-accent-border-box: $back-900; $color-accent-border-input: $ds-fx-low; diff --git a/templates/logchecker/test.twig b/templates/logchecker/test.twig index 8c69611fa..f102cdee9 100644 --- a/templates/logchecker/test.twig +++ b/templates/logchecker/test.twig @@ -12,7 +12,7 @@ to you what it would look like on our site. To verify the checksum of a log file, you will need to upload it.

- +
@@ -26,7 +26,7 @@
Upload file
- +
Paste log (No checksum verification)