malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Replace background 800

Browse Source
This commit is contained in:
Tetrakern 2024-03-01 21:28:45 +01:00
parent f612c991c4
commit a829be9aa2
12 changed files with 58 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
css/customize/footer-style-isolated.css
View File

@ -1 +1 @@
.footer._footer-isolated{--layout-link-color-hover: var(--fg-isolated-footer-hover);background-color:var(--bg-isolated-footer);color:var(--fg-isolated-footer);margin-top:3rem}.footer._footer-isolated .footer__wrapper{margin:2rem auto}.footer._footer-isolated .breadcrumbs{color:var(--fg-isolated-footer)}
.footer._footer-isolated{--layout-link-color-hover: var(--fg-isolated-footer-hover);background:var(--bg-isolated-footer);color:var(--fg-isolated-footer);margin-top:3rem}.footer._footer-isolated .footer__wrapper{margin:2rem auto}.footer._footer-isolated .breadcrumbs{color:var(--fg-isolated-footer)}

2
css/editor.css
View File

File diff suppressed because one or more lines are too long

2
css/properties.css
View File

File diff suppressed because one or more lines are too long

8
includes/functions/_customizer-settings.php
View File

@ -758,19 +758,19 @@ function fictioneer_add_dark_mode_customizer_settings( $manager ) {
),
'dark_bg_700' => array(
'label' => __( 'Dark Background 700', 'fictioneer' ),
'description' => __( 'Used for the page, slide-in mobile menu, password cutouts, and card content lists (and gradients).', 'fictioneer' )
'description' => __( 'Used for the page, slide-in mobile menu, password cutouts, and navigation subitem dividers.', 'fictioneer' )
),
'dark_bg_800' => array(
'label' => __( 'Dark Background 800', 'fictioneer' ),
'description' => __( 'Used for content lists (and gradients) and navigation subitem dividers.', 'fictioneer' )
'description' => __( 'Used for the site, &ltkbd> elements, card footers and overlays, info boxes, content lists (and gradients), and mixed into input fields (with 19% black).', 'fictioneer' )
),
'dark_bg_900' => array(
'label' => __( 'Dark Background 900', 'fictioneer' ),
'description' => __( 'Used for the site, &ltkbd> elements, card footers and overlays, info boxes, and mixed into input fields (with 19% black).', 'fictioneer' )
'description' => __( 'Used for the &ltbody>, unset checkmarks, navigation, isolated footer, chapter micro menu, TTS interface, image placeholders, consent banner, and mixed into the default mobile menu (with 3% white).', 'fictioneer' )
),
'dark_bg_950' => array(
'label' => __( 'Dark Background 950', 'fictioneer' ),
'description' => __( 'Used for the &ltbody>, unset checkmarks, navigation, isolated footer, chapter micro menu, TTS interface, image placeholders, consent banner, and mixed into the default mobile menu (with 3% white).', 'fictioneer' )
'description' => __( 'Currently not used.', 'fictioneer' )
),
'dark_fg_100' => array(
'label' => __( 'Dark Foreground 100', 'fictioneer' ),

20
includes/functions/colors.json
View File

@ -40,17 +40,17 @@
"hsl": [215, 14, 34]
},
"light_bg_800": {
"hex": "#374151",
"hsl": [217, 19, 27]
},
"light_bg_900": {
"hex": "#1f2937",
"hsl": [215, 28, 17]
},
"light_bg_950": {
"light_bg_900": {
"hex": "#111827",
"hsl": [221, 39, 11]
},
"light_bg_950": {
"hex": "#030712",
"hsl": [224, 71, 4]
},
"light_fg_100": {
"hex": "#010309",
"hsl": [225, 80, 2]
@ -236,17 +236,17 @@
"hsl": [221, 16, 20]
},
"dark_bg_800": {
"hex": "#282c37",
"hsl": [221, 16, 18.5]
},
"dark_bg_900": {
"hex": "#252932",
"hsl": [219, 15, 17]
},
"dark_bg_950": {
"dark_bg_900": {
"hex": "#10121a",
"hsl": [222, 25, 8]
},
"dark_bg_950": {
"hex": "#040810",
"hsl": [222, 60, 4]
},
"dark_fg_100": {
"hex": "#e6eaf4",
"hsl": [222, 40, 93]

2
src/scss/_consent.scss
View File

@ -5,7 +5,7 @@
z-index: 1000;
display: flex;
background: var(--consent-banner-background);
color: var(--consent-banner-text);
color: var(--consent-banner-color);
padding: 1.25rem 1rem;
width: 100%;
max-width: 100vw;

2
src/scss/_profile.scss
View File

@ -139,7 +139,7 @@
&._connected {
cursor: default;
background: var(--bg-50);
background: var(--button-oauth-connected, var(--bg-50));
color: var(--fg-inverted);
text-shadow: none;
border: none;

24
src/scss/common/_lightmode.scss
View File

@ -12,7 +12,7 @@
--code-background-inline: hsl(var(--bg-950-free) / 7%);
--code-color: var(--fg-600);
--spoiler-background: var(--bg-900);
--spoiler-background: var(--bg-800);
--ins-background: var(--green-400);
--ins-color: inherit;
@ -22,7 +22,7 @@
--caption-overlay-color: #fff;
--progress-bar-background: var(--bg-900);
--progress-bar-background: var(--bg-800);
--skeleton-shape-color: var(--bg-400);
@ -76,9 +76,9 @@
--bg-500-free: #{hsl_code_free(219, 11, 65)}; // #9ca3b0
--bg-600-free: #{hsl_code_free(220, 9, 46)}; // #6b7280 (Tailwind Gray 500)
--bg-700-free: #{hsl_code_free(215, 14, 34)}; // #4b5563 (Tailwind Gray 600)
--bg-800-free: #{hsl_code_free(217, 19, 27)}; // #374151 (Tailwind Gray 700)
--bg-900-free: #{hsl_code_free(215, 28, 17)}; // #1f2937 (Tailwind Gray 800)
--bg-950-free: #{hsl_code_free(221, 39, 11)}; // #111827 (Tailwind Gray 900)
--bg-800-free: #{hsl_code_free(215, 28, 17)}; // #1f2937 (Tailwind Gray 800)
--bg-900-free: #{hsl_code_free(221, 39, 11)}; // #111827 (Tailwind Gray 900)
--bg-950-free: #{hsl_code_free(224, 71, 4)}; // #030712 (Tailwind Gray 950)
// === FOREGROUNDS ===========================================================
@ -159,7 +159,6 @@
--fg-isolated-footer: var(--fg-950);
--fg-isolated-footer-hover: var(--fg-inverted);
--bg-isolated-footer: var(--bg-950);
// === MODALS ================================================================
@ -268,21 +267,21 @@
// === POPUP MENU ============================================================
--popup-menu-background: var(--bg-900);
--popup-menu-background: var(--bg-800);
--popup-menu-background-hover: var(--bg-700);
--popup-menu-background-selected: var(--bg-800);
--popup-menu-background-selected: var(--bg-700);
// === MICRO MENU ============================================================
--micro-menu-background: var(--bg-900);
--micro-menu-background: var(--bg-800);
--micro-menu-color: var(--fg-inverted);
--micro-menu-color-hover: var(--fg-inverted);
// === TOOLTIPS/NOTIFICATIONS ================================================
--tooltip-background: var(--bg-900);
--tooltip-background: var(--bg-800);
--notice-default-background: var(--bg-900);
--notice-default-background: var(--bg-800);
--notice-default-color: #fff;
// === COMMENTS ==============================================================
@ -324,8 +323,7 @@
.consent-banner {
--inline-link-color: var(--primary-400);
--inline-link-color-visited: var(--primary-400);
--consent-banner-text: var(--fg-inverted);
--consent-banner-background: var(--bg-950);
--consent-banner-color: var(--fg-inverted);
--button-primary-color: var(--fg-500);
--button-primary-color-hover: var(--fg-500);
--button-primary-background: var(--fg-inverted);

50
src/scss/common/_properties.scss
View File

@ -93,9 +93,9 @@
:root, :root[data-theme=base] {
// === UNSORTED ==============================================================
--theme-color-base: 219 15 17; // 900
--body-bg-color: var(--bg-950);
--site-bg-color: var(--bg-900);
--theme-color-base: 219 15 17; // 800
--body-bg-color: var(--bg-900);
--site-bg-color: var(--bg-800);
--fullscreen-background: var(--page-bg-color);
--read-ribbon-background: var(--bg-50);
@ -134,12 +134,12 @@
--paragraph-spacing: 1.5rem;
--blockquote-background: rgb(0 0 0 / 15%);
--placeholder-background: var(--bg-950);
--kbd-background: var(--bg-900);
--infobox-background: var(--bg-900);
--placeholder-background: var(--bg-900);
--kbd-background: var(--bg-800);
--infobox-background: var(--bg-800);
--text-shadow: -1px -1px 1px rgb(0 0 0 / 12%);
--checkmark-checked: var(--fg-600);
--checkmark-not-checked: var(--bg-950);
--checkmark-not-checked: var(--bg-900);
--tax-cloud-current: var(--primary-500);
--disabled-pattern: rgb(0 0 0 / 8%) repeating-linear-gradient(-45deg, rgb(0 0 0 / 8%), rgb(0 0 0 / 8%) 2px, transparent 2px, transparent 5px);
--strong-filter: brightness(1.05);
@ -157,8 +157,8 @@
// === CONTENT LISTS =========================================================
--content-li-background: var(--content-li-background-gradient); // Base assignment
--content-li-background-full: var(--bg-800);
--content-li-background-gradient: linear-gradient(to left, var(--bg-800) 0%, var(--bg-800) 55%, transparent 90%);
--content-li-background-full: hsl(var(--bg-900-free) / 12%);
--content-li-background-gradient: linear-gradient(to left, hsl(var(--bg-900-free) / 12%) 0%, hsl(var(--bg-900-free) / 12%) 55%, transparent 90%);
--content-li-hr-border: 2px solid rgb(255 255 255 / 4%);
// === COLORS ================================================================
@ -185,9 +185,9 @@
--bg-500-free: #{hsl_code_free(222, 13, 26.5)};
--bg-600-free: #{hsl_code_free(222, 14, 23.5)};
--bg-700-free: #{hsl_code_free(221, 16, 20)};
--bg-800-free: #{hsl_code_free(221, 16, 18.5)};
--bg-900-free: #{hsl_code_free(219, 15, 17)};
--bg-950-free: #{hsl_code_free(222, 25, 8)};
--bg-800-free: #{hsl_code_free(219, 15, 17)};
--bg-900-free: #{hsl_code_free(222, 25, 8)};
--bg-950-free: #{hsl_code_free(222, 60, 4)};
--bg-50: hsl(var(--bg-50-free));
--bg-100: hsl(var(--bg-100-free));
@ -258,11 +258,11 @@
// === CARDS =================================================================
--card-bg-color: var(--bg-600);
--card-footer-bg-color: var(--bg-900);
--card-overlay-bg-color: var(--bg-900);
--card-footer-bg-color: var(--bg-800);
--card-overlay-bg-color: var(--bg-800);
--card-content-li-background: var(--card-content-li-background-gradient);
--card-content-li-background-full: var(--bg-700);
--card-content-li-background-gradient: linear-gradient(to left, var(--bg-700) 50%, transparent 90%);
--card-content-li-background-full: hsl(var(--bg-900-free) / 20%);
--card-content-li-background-gradient: linear-gradient(to left, hsl(var(--bg-900-free) / 20%) 0%, hsl(var(--bg-900-free) / 20%) 55%, transparent 90%);
--card-label-color: var(--fg-inverted);
--card-label-background: var(--fg-500);
--card-unavailable-filter: grayscale(0.5) blur(1.5px);
@ -275,7 +275,7 @@
// === NAVIGATION ============================================================
--navigation-background: var(--bg-950);
--navigation-background: var(--bg-900);
--navigation-background-start-opacity: 0;
--navigation-background-end-opacity: 1;
--navigation-submenu-background: var(--bg-400);
@ -283,7 +283,7 @@
--navigation-subitem-background-hover: var(--bg-300);
--navigation-color: var(--fg-400);
--navigation-color-hover: var(--fg-300);
--navigation-subitem-divider: 1px solid var(--bg-800);
--navigation-subitem-divider: 1px solid var(--bg-700);
--navigation-submenu-box-shadow: 0 4px 3px -2px rgb(0 0 0 / 30%);
--navigation-drop-shadow: drop-shadow(0 3px 2px rgb(0 0 0 / 20%));
--navigation-new-follow-background: var(--primary-500);
@ -312,7 +312,7 @@
--fg-isolated-footer: var(--fg-700);
--fg-isolated-footer-hover: var(--fg-300);
--bg-isolated-footer: var(--bg-950);
--bg-isolated-footer: var(--bg-900);
// === MODALS ================================================================
@ -338,7 +338,7 @@
// === MOBILE MENU ===========================================================
--mobile-menu-background: var(--bg-700);
--mobile-menu-advanced-background: color-mix(in srgb, var(--bg-950), white 3%);
--mobile-menu-advanced-background: color-mix(in srgb, var(--bg-900), white 3%);
--mobile-menu-box-shadow: 2px 0 3px rgb(0 0 0 / 30%);
--mobile-advanced-menu-site-box-shadow: inset -5px 0 3px -4px rgb(0 0 0 / 30%);
--mobile-menu-overlay: rgb(0 0 0 / 50%);
@ -475,7 +475,7 @@
--input-placeholder-color: var(--fg-950);
--input-background: rgb(0 0 0 / 30%); // Fallback
--input-background: color-mix(in srgb, var(--bg-900), black 19%);
--input-background: color-mix(in srgb, var(--bg-800), black 19%);
--input-background-disabled: rgb(0 0 0 / 15%) repeating-linear-gradient(-45deg, rgb(0 0 0 / 15%), rgb(0 0 0 / 15%) 2px, transparent 2px, transparent 5px);
--input-color: var(--fg-500);
--input-color-disabled: var(--fg-800);
@ -495,7 +495,7 @@
// === MICRO MENU ============================================================
--micro-menu-background: var(--bg-950);
--micro-menu-background: var(--bg-900);
--micro-menu-color: var(--fg-400);
--micro-menu-color-hover: var(--fg-200);
--micro-menu-box-shadow: var(--box-shadow-l);
@ -557,8 +557,8 @@
// === SCOPES ================================================================
.consent-banner {
--consent-banner-text: var(--fg-600);
--consent-banner-background: var(--bg-950);
--consent-banner-color: var(--fg-600);
--consent-banner-background: var(--bg-900);
}
.selected-paragraph {
@ -568,7 +568,7 @@
}
.tts-interface {
--tts-background: var(--bg-950);
--tts-background: var(--bg-900);
--tts-button-active-background: var(--primary-500);
--tts-button-active-text: var(--fg-inverted);
}

2
src/scss/customize/footer-style-isolated.scss
View File

@ -3,7 +3,7 @@
.footer._footer-isolated {
--layout-link-color-hover: var(--fg-isolated-footer-hover);
background-color: var(--bg-isolated-footer);
background: var(--bg-isolated-footer);
color: var(--fg-isolated-footer);
margin-top: 3rem;