mirror of
https://github.com/OPSnet/Gazelle.git
synced 2026-01-16 18:04:34 -05:00
feat: haze, autocomplete, tooltipster, sticky
This commit is contained in:
wally-crunk
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 <input type="search" /> 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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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.
|
||||
</p>
|
||||
<table class="forum_post vertical_margin">
|
||||
<table class="vertical_margin">
|
||||
<tr class="colhead">
|
||||
<td colspan="2">Upload file</td>
|
||||
</tr>
|
||||
@@ -26,7 +26,7 @@
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="forum_post vertical_margin">
|
||||
<table class="vertical_margin">
|
||||
<tr class="colhead">
|
||||
<td colspan="2">Paste log (No checksum verification)</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user