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

Refactor style (among other things) #24

Merged
Tetrakern merged 94 commits from refactor_colors into main 2024-03-03 02:47:35 +08:00
Conversation 0 Commits 94 Files Changed 145 +194 -188
28 changed files with 194 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ccee625485 - Show all commits

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/chapter.css
View File

File diff suppressed because one or more lines are too long

2
css/comments.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/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

2
css/recommendation.css
View File

@ -1 +1 @@
.recommendation__header{margin-bottom:2rem}.recommendation__taxonomies{margin-bottom:1.5rem}.recommendation__thumbnail{--focus-offset: 2px;float:right;max-width:clamp(100px,25.4452926209vw + 4.5801526718px,200px);margin:0 0 clamp(10px,6.4957264957vw - 14.358974359px,48px) clamp(24px,4.1025641026vw + 8.6153846154px,48px)}.recommendation__thumbnail :is(a,img){display:block;cursor:zoom-in;border-radius:var(--layout-border-radius-small)}.recommendation__thumbnail-image{width:inherit;filter:var(--figure-drop-shadow)}@media(max-width: 768px){.recommendation__thumbnail-image{height:auto}}.recommendation__tags{margin:2rem 0 3rem}.recommendation__support,.recommendation__read-on{margin-top:1.5rem}.recommendation__support h5,.recommendation__read-on h5{margin-bottom:.5rem}.recommendation__support :is(i,.icon),.recommendation__read-on :is(i,.icon){color:var(--fg-600);margin-right:.5rem}.recommendation__list-item{line-height:1.3}.recommendation__list-item:not(:last-child){margin-bottom:.5rem}.recommendation__footer{clear:both}
.recommendation__header{margin-bottom:2rem}.recommendation__taxonomies{margin-bottom:1.5rem}.recommendation__thumbnail{--focus-offset: 2px;float:right;max-width:clamp(100px,25.4452926209vw + 4.5801526718px,200px);margin:0 0 clamp(10px,6.4957264957vw - 14.358974359px,48px) clamp(24px,4.1025641026vw + 8.6153846154px,48px)}.recommendation__thumbnail :is(a,img){display:block;cursor:zoom-in;border-radius:var(--layout-border-radius-small)}.recommendation__thumbnail-image{width:inherit;box-shadow:var(--recommendation-cover-box-shadow, var(--box-shadow-xl))}@media(max-width: 768px){.recommendation__thumbnail-image{height:auto}}.recommendation__tags{margin:2rem 0 3rem}.recommendation__support,.recommendation__read-on{margin-top:1.5rem}.recommendation__support h5,.recommendation__read-on h5{margin-bottom:.5rem}.recommendation__support :is(i,.icon),.recommendation__read-on :is(i,.icon){color:var(--fg-600);margin-right:.5rem}.recommendation__list-item{line-height:1.3}.recommendation__list-item:not(:last-child){margin-bottom:.5rem}.recommendation__footer{clear:both}

2
css/story.css
View File

File diff suppressed because one or more lines are too long

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

@ -736,27 +736,6 @@ function fictioneer_add_light_mode_customizer_settings( $manager ) {
)
);
$manager->add_setting(
'light_elevation_overlay',
array(
'capability' => 'manage_options',
'sanitize_callback' => 'sanitize_hex_color',
'default' => '#191b1f'
)
);
$manager->add_control(
new WP_Customize_Color_Control(
$manager,
'light_elevation_overlay',
array(
'label' => __( 'Light Overlays', 'fictioneer' ),
'section' => 'light_mode_colors',
'settings' => 'light_elevation_overlay'
)
)
);
$manager->add_setting(
'light_navigation_background_sticky',
array(
@ -1799,27 +1778,6 @@ function fictioneer_add_dark_mode_customizer_settings( $manager ) {
)
);
$manager->add_setting(
'dark_elevation_overlay',
array(
'capability' => 'manage_options',
'sanitize_callback' => 'sanitize_hex_color',
'default' => '#13151b'
)
);
$manager->add_control(
new WP_Customize_Color_Control(
$manager,
'dark_elevation_overlay',
array(
'label' => __( 'Dark Overlays', 'fictioneer' ),
'section' => 'dark_mode_colors',
'settings' => 'dark_elevation_overlay'
)
)
);
$manager->add_setting(
'dark_navigation_background_sticky',
array(

2
includes/functions/_customizer.php
View File

@ -790,7 +790,6 @@ function fictioneer_build_customize_css( $content = null ) {
--bg-700: " . fictioneer_hsl_code( get_theme_mod( 'dark_bg_700', '#323743' ) ) . ";
--bg-800: " . fictioneer_hsl_code( get_theme_mod( 'dark_bg_800', '#2b303b' ) ) . ";
--theme-color-base: " . fictioneer_hsl_code( get_theme_mod( 'dark_theme_color_base', '#252932' ), 'values' ) . ";
--e-overlay: " . fictioneer_hsl_code( get_theme_mod( 'dark_elevation_overlay', '#121317' ) ) . ";
--navigation-background: " . fictioneer_hsl_code( get_theme_mod( 'dark_navigation_background_sticky', '#121317' ) ) . ";
--primary-400: " . get_theme_mod( 'dark_primary_400', '#f7dd88' ) . ";
--primary-500: " . get_theme_mod( 'dark_primary_500', '#f4d171' ) . ";
@ -875,7 +874,6 @@ function fictioneer_build_customize_css( $content = null ) {
--bg-800: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_800', '#1f2937' ) ) . ";
--bg-900: " . fictioneer_hsl_code( get_theme_mod( 'light_bg_900', '#111827' ) ) . ";
--theme-color-base: " . fictioneer_hsl_code( get_theme_mod( 'light_theme_color_base', '#f3f4f6' ), 'values' ) . ";
--e-overlay: " . fictioneer_hsl_code( get_theme_mod( 'light_elevation_overlay', '#191b1f' ) ) . ";
--navigation-background: " . fictioneer_hsl_code( get_theme_mod( 'light_navigation_background_sticky', '#fcfcfd' ) ) . ";
--primary-400: " . get_theme_mod( 'light_primary_400', '#4287f5' ) . ";
--primary-500: " . get_theme_mod( 'light_primary_500', '#3c83f6' ) . ";

2
src/scss/_card.scss
View File

@ -30,7 +30,7 @@
position: relative;
border-radius: var(--layout-border-radius-small);
max-width: calc(100vw - 20px);
box-shadow: var(--card-box-shadow);
box-shadow: var(--card-box-shadow, var(--box-shadow-m));
clear: both;
contain: style layout; // Improve performance
container-type: inline-size; // Enable container query units

2
src/scss/_chapter.scss
View File

@ -260,7 +260,7 @@
}
&__warning.infobox {
color: var(--warning-400);
color: var(--red-400);
font-weight: var(--font-weight-medium);
p {

16
src/scss/_minimal.scss
View File

@ -2,15 +2,27 @@
body {
--text-shadow: none;
--mobile-menu-text-shadow: none;
--floating-shadow: none;
--container-drop-shadow: none;
--figure-drop-shadow: none;
--paragraph-tools-filter: none;
--content-li-background: var(--content-li-background-full);
--story-blog-li-background: var(--content-li-background-full);
--chapter-li-background: var(--content-li-background-full);
--card-content-li-background: var(--card-content-li-background-full);
--embed-box-shadow: var(--minimal-container-box-shadow);
// --box-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 10%);
// --box-shadow-s: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 1px 2px -1px rgb(0 0 0 / 10%);
// --box-shadow: 0 3px 6px -1px rgb(0 0 0 / 9%), 0 -1px 4px -2px rgb(0 0 0 / 10%);
// --box-shadow-m: rgb(0 0 0 / 15%) 0px 2px 5px 0px, rgb(0 0 0 / 5%) 0px 1px 1px 0px;
// --box-shadow-l: rgb(0 0 0 / 10%) 0px 6px 12px -2px, rgb(0 0 0 / 15%) 0px 3px 7px -3px;
// --box-shadow-xl: 0 3px 8px -1px rgb(0 0 0 / 9%), 0 3px 12px -1px rgb(0 0 0 / 17%);
// --drop-shadow-xs: drop-shadow(0 1px 2px rgb(0 0 0 / 10%));
// --drop-shadow-s: drop-shadow(0 1px 3px rgb(0 0 0 / 12%)) drop-shadow(0 1px 2px rgb(0 0 0 / 10%));
// --drop-shadow: drop-shadow(0 2px 6px rgb(0 0 0 / 9%)) drop-shadow(0 -1px 3px rgb(0 0 0 / 10%));
// --drop-shadow-m: drop-shadow(0 2px 5px rgb(0 0 0 / 15%)) drop-shadow(0 1px 1px rgb(0 0 0 / 5%));
// --drop-shadow-l: drop-shadow(0 5px 11px rgb(0 0 0 / 10%)) drop-shadow(0 2px 6px rgb(0 0 0 / 15%));
// --drop-shadow-xl: drop-shadow(0 3px 8px rgb(0 0 0 / 9%)) drop-shadow(0 3px 12px rgb(0 0 0 / 17%));
}
.custom-background {

4
src/scss/_profile.scss
View File

@ -9,7 +9,7 @@
font-size: var(--fs-xs);
&--alert {
color: var(--warning-400);
color: var(--red-400);
}
}
@ -283,7 +283,7 @@
.warning,
.warning > i {
color: var(--warning-400);
color: var(--red-400);
}
li {

2
src/scss/_recommendation.scss
View File

@ -21,7 +21,7 @@
&-image {
width: inherit;
filter: var(--figure-drop-shadow);
box-shadow: var(--recommendation-cover-box-shadow, var(--box-shadow-xl));
@media (max-width: 768px) {
height: auto;

8
src/scss/_showcase.scss
View File

@ -36,7 +36,7 @@
--focus-offset: 2px;
position: relative;
border-radius: var(--layout-border-radius-small);
box-shadow: var(--container-box-shadow);
box-shadow: var(--showcase-box-shadow, var(--box-shadow-m));
overflow: hidden;
max-width: max(420px, 100%);
height: max(64px, #{get_clamp(64, 96, 375, 768)});
@ -44,7 +44,7 @@
@include bp(mobile-l) {
&:first-child:last-child {
width: unquote('max(360px, 50%)');
width: max(360px, 50%);
margin: 0 auto;
}
}
@ -70,8 +70,8 @@
inset: 0;
top: unset;
display: block;
background: var(--caption-overlay-shadow);
color: var(--layout-collection-text);
background: var(--caption-overlay-background);
color: var(--caption-overlay-color);
font: 500 var(--fs-dxs)/1.2 var(--ff-heading);
letter-spacing: 0;
text-align: center;

3
src/scss/_socialmedia.scss
View File

@ -6,7 +6,7 @@
--focus-offset: 1px;
cursor: pointer;
display: block;
color: var(--media-button-color);
color: (--media-button-color, var(--fg-600));
font-size: get_clamp(22, 24, 320, 480);
line-height: 1;
opacity: .3;
@ -15,7 +15,6 @@
&:hover,
&:focus-visible {
color: var(--media-button-color-hover);
opacity: 1;
}

4
src/scss/_story.scss
View File

@ -167,7 +167,7 @@ $header_breakpoint: 640px;
height: 100%;
max-height: var(--this-img-height);
object-fit: cover;
filter: var(--figure-drop-shadow);
box-shadow: var(--story-cover-box-shadow, var(--box-shadow-xl));
content-visibility: auto;
}
}
@ -498,7 +498,7 @@ $header_breakpoint: 640px;
padding: .5rem;
border: none !important; // Accounts for minimalist mode
border-radius: var(--layout-border-radius-small); // Accounts for minimalist mode
box-shadow: var(--chapter-grid-item-box-shadow, var(--card-box-shadow));
box-shadow: var(--chapter-grid-item-box-shadow, var(--card-box-shadow, var(--box-shadow-m)));
&-icon {
display: none;

6
src/scss/comments.scss
View File

@ -571,7 +571,7 @@
}
&__replied-to {
margin-bottom: .25rem;
margin-bottom: .5rem;
summary {
font-style: italic;
@ -593,7 +593,7 @@
padding: .75rem;
border-radius: 2px;
margin: .5rem 0 .75rem;
box-shadow: 0 0 1px 0 var(--e-1);
box-shadow: 0 0 0 1px var(--page-bg-color);
}
> :is(ol, ul) {
@ -692,7 +692,7 @@
}
&.on {
color: var(--warning-400);
color: var(--red-400);
}
}

10
src/scss/common/_base.scss
View File

@ -89,7 +89,7 @@
position: absolute;
inset: 0;
display: block;
background-color: var(--e-1);
background-color: var(--page-bg-color);
}
}
@ -151,10 +151,6 @@ button[type=submit]:where(:not(._inline)) {
color: var(--button-secondary-color);
border: var(--button-secondary-border);
&:focus-visible {
box-shadow: var(--focus-box-shadow-small);
}
&:not(.current, .ajax-in-progress, [disabled]):hover {
background: var(--button-secondary-background-hover);
color: var(--button-secondary-color-hover);
@ -448,7 +444,7 @@ button[type=submit]:where(:not(._inline)) {
border-radius: var(--layout-border-radius-small);
min-width: 64px;
max-width: min(280px, 80vw);
box-shadow: var(--container-box-shadow);
box-shadow: var(--popup-menu-box-shadow, var(--box-shadow-m));
overflow: hidden;
transform: var(--translateX) var(--translateY);
contain: content; // Improve performance
@ -681,7 +677,7 @@ html:not(.logged-in) body:not(.logged-in) {
}
&-warning {
color: var(--warning-400);
color: var(--red-400);
}
.checkmark {

6
src/scss/common/_blocks.scss
View File

@ -357,7 +357,7 @@ figure {
transition-delay: .3s;
&:not([src]) {
background: var(--disabled-embed-background);
background: var(--embed-background);
box-shadow: var(--embed-box-shadow);
}
}
@ -636,8 +636,8 @@ figure {
position: absolute;
left: 50%;
bottom: 0;
background: var(--caption-overlay-shadow);
color: #fff;
background: var(--caption-overlay-background);
color: var(--caption-overlay-color);
font: 400 var(--fs-caption)/1.2 var(--ff-note);
letter-spacing: 0;
overflow-wrap: break-word;

10
src/scss/common/_formatting.scss
View File

@ -289,15 +289,15 @@ p a,
display: flex;
align-items: center;
justify-content: center;
background: var(--disabled-embed-background);
background: var(--embed-background);
border-radius: var(--layout-border-radius-small);
box-shadow: 0 0 3px rgb(0 0 0 / 30%);
height: 100%;
width: get_clamp(280, 500, 320, 550);
box-shadow: var(--embed-box-shadow);
}
.litrpg-box {
color: var(--litrpg-fg);
color: var(--litrpg-color);
font-size: 87.5%; // Fallback
font-size: get_relative_clamp(0.75, 0.875, 320, 480, 'vw', 'em');
font-weight: 400;
@ -426,8 +426,8 @@ p a,
}
.litrpg-frame {
background: var(--litrpg-bg);
clip-path: var(--lit-rpg-polygon);
background: var(--litrpg-background);
clip-path: var(--litrpg-polygon);
}
.litrpg-body {

8
src/scss/common/_fullscreen.scss
View File

@ -8,7 +8,7 @@
}
.site {
background: var(--e-fullscreen) !important;
background: var(--fullscreen-background) !important;
}
.progress {
@ -29,9 +29,13 @@
filter: none;
&__background {
background: var(--e-fullscreen) !important;
background: var(--fullscreen-background) !important;
box-shadow: none !important;
filter: none !important;
&::before {
content: none !important;
}
}
}

2
src/scss/common/_icons.scss
View File

@ -7,7 +7,7 @@
}
.text-icon {
font-family: var(--icon-text-font);
font-family: var(--icon-text-font, inherit);
}
.icon {

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

@ -41,7 +41,7 @@
// === LAYOUT ================================================================
--layout-link: inherit;
--layout-link-hover: var(--fg-200);
--layout-collection-text: var(--fg-1000);
--caption-overlay-color: var(--fg-1000);
--layout-color-lineart: var(--bg-600);
--layout-color-separator: rgb(0 0 0 / 8%);
@ -52,12 +52,10 @@
// === UNSORTED ==============================================================
--theme-color-base: 220 13 91;
--disabled-pattern: hsl(var(--bg-1000-free) / 3%) repeating-linear-gradient(-45deg, hsl(var(--bg-1000-free) / 5%), hsl(var(--bg-1000-free) / 5%) 2px, transparent 2px, transparent 5px);
--disabled-embed-background: var(--disabled-pattern);
--embed-background: var(--disabled-pattern);
--progress-bar-background: var(--bg-900);
--progress-bar-color: var(--bg-200);
--checkmark-not-checked: var(--bg-300);
--media-button-color: var(--fg-600);
--media-button-color-hover: var(--fg-600);
--spoiler-background: var(--fg-500);
--spoiler-color-visible: var(--fg-1000);
--ins-background: #7ec945;
@ -74,9 +72,8 @@
--success: #16a34a;
--success-caption: white;
--invert-filter: invert(1);
--red: #dc2626;
--litrpg-bg: var(--bg-10);
--litrpg-fg: var(--fg-500);
--litrpg-background: var(--bg-10);
--litrpg-color: var(--fg-500);
--litrpg-ins: #16c79a;
--litrpg-del: #be123c;
--card-unavailable-filter: grayscale(0.75) brightness(0.85);
@ -85,16 +82,15 @@
--read-ribbon-color: var(--fg-500);
// === FOCUS =================================================================
--focus-box-shadow: inset 0 0 0px 3px rgb(255 255 255 / 75%);
--focus-box-shadow-small: inset 0 0 0px 2px rgb(255 255 255 / 75%);
// === ELEVATIONS ============================================================
--e-body: var(--bg-300);
--e-fullscreen: var(--e-1);
--fullscreen-background: var(--e-1);
--e-0: var(--bg-100);
--e-1: var(--bg-50);
--e-2: var(--bg-10);
--e-overlay: var(--bg-1000);
// === HEADER ================================================================
--site-title-heading-color: var(--fg-1000);
@ -388,7 +384,7 @@
--tag-secondary-border-hover: 1px solid transparent;
--tag-warning-text-hover: var(--fg-1000);
--tag-warning-background: rgb(246 96 85 / 5%);
--tag-warning-background-hover: var(--warning-600);
--tag-warning-background-hover: var(--red-600);
}
.iframe-consent {

2
src/scss/common/_modals.scss
View File

@ -69,7 +69,7 @@
max-height: calc(100% - 20px);
width: var(--modal-width);
max-width: calc(100vw - 20px);
box-shadow: var(--floating-shadow);
box-shadow: var(--modal-box-shadow, var(--box-shadow-xl));
overflow: auto;
transform: translate(-50%, -50%);

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

@ -78,24 +78,56 @@
--theme-color-base: 219 15 17; // 900
--body-bg-color: var(--bg-950);
--site-bg-color: var(--bg-900);
--paragraph-spacing: 1.5rem;
--placeholder-background: var(--bg-950);
--kbd-background: var(--bg-900);
--infobox-background: var(--bg-900);
--fullscreen-background: var(--page-bg-color);
--read-ribbon-background: var(--bg-50);
--read-ribbon-color: var(--fg-inverted);
--read-ribbon-box-shadow: 0 0 2px rgb(0 0 0 / 30%);
--spoiler-background: var(--fg-700);
--spoiler-color-visible: var(--fg-inverted);
--code-background: rgb(0 0 0 / 25%);
--code-background-inline: rgb(0 0 0 / 25%);
--code-color: var(--fg-700);
--ins-background: var(--success-400);
--spoiler-background: var(--fg-700);
--spoiler-color-visible: var(--fg-inverted);
--ins-background: var(--green-400);
--ins-color: var(--fg-inverted);
--del-background: var(--warning-400);
--del-background: var(--red-400);
--del-color: var(--fg-inverted);
--caption-overlay-background: linear-gradient(0deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 30%) 70%, transparent);
--caption-overlay-color: var(--fg-200);
--progress-bar-background: var(--navigation-background);
--progress-bar-color: var(--bg-200);
--skeleton-shape-color: var(--bg-300);
--skeleton-cutout-color: var(--page-bg-color);
--embed-background: var(--disabled-pattern);
--embed-box-shadow: var(--box-shadow-m);
--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);
--text-shadow: -1px -1px 1px rgb(0 0 0 / 12%);
--checkmark-not-checked: var(--bg-950);
--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);
--invert-filter: invert(0);
// === LITRPG ================================================================
--litrpg-background: var(--bg-50);
--litrpg-color: var(--fg-inverted);
--litrpg-ins: var(--green-700);
--litrpg-del: var(--red-700);
--litrpg-polygon: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
--litrpg-drop-shadow: var(--drop-shadow-m);
// === CONTENT LISTS =========================================================
@ -130,12 +162,60 @@
--primary-500: hsl(44deg 86% 70%);
--primary-600: hsl(34deg 82% 70%);
--success-400: #9bd443;
--success-500: #78994d;
--yellow-100: #fee399;
--yellow-200: #fedc80;
--yellow-300: #fdd566;
--yellow-400: #fdce4d;
--yellow-500: #fdc733;
--yellow-600: #fcc01a;
--yellow-700: #fcb900;
--yellow-800: #e3a700;
--yellow-900: #ca9400;
--warning-400: #f96c6c;
--warning-500: #f15555;
--warning-600: #db4646;
--green-100: #aec294;
--green-200: #a1b882;
--green-300: #93ad71;
--green-400: #86a35f;
--green-500: #78994d;
--green-600: #6c8a45;
--green-700: #607a3e;
--green-800: #546b36;
--green-900: #485c2e;
--red-100: #f79999;
--red-200: #f58888;
--red-300: #f47777;
--red-400: #f26666;
--red-500: #f15555;
--red-600: #d94d4d;
--red-700: #c14444;
--red-800: #a93b3b;
--red-900: #913333;
--blue-100: #6ec9f2;
--blue-200: #56c0f0;
--blue-300: #3eb7ed;
--blue-400: #26aeeb;
--blue-500: #0ea5e9;
--blue-600: #0d95d2;
--blue-700: #0b84ba;
--blue-800: #0a73a3;
--blue-900: #08638c;
body {
--wp--preset--color--black: var(--fg-inverted);
// --wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: var(--fg-100);
// --wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: var(--red-400);
// --wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: var(--yellow-400);
--wp--preset--color--light-green-cyan: var(--green-400);
// --wp--preset--color--vivid-green-cyan: #00d084;
// --wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: var(--blue-400);
// --wp--preset--color--vivid-purple: #9b51e0;
}
// === BACKGROUNDS ===========================================================
@ -215,7 +295,7 @@
// --layout-color-lineart: var(--fg-800);
// --layout-collection-text: var(--fg-200);
// === MINIMAL ===============================================================
@ -244,49 +324,12 @@
--card-label-color: var(--fg-inverted);
--card-label-background: var(--fg-500);
--card-unavailable-filter: grayscale(0.5);
--card-box-shadow: var(--box-shadow-m);
// === UNSORTED ==============================================================
// --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);
// --disabled-embed-background: var(--disabled-pattern);
// --progress-bar-background: var(--navigation-background);
// --progress-bar-color: var(--fg-900);
// --media-button-color: var(--fg-600);
// --media-button-color-hover: var(--fg-500);
// --tax-cloud-current: var(--primary-500);
// --skeleton-shape-color: var(--fg-800);
// --skeleton-cutout-color: var(--e-1);
// --icon-text-font: inherit;
// --invert-filter: invert(0);
// --red: #ef4d4d;
// --litrpg-bg: var(--fg-400);
// --litrpg-fg: var(--fg-1000);
// --litrpg-ins: #363ea1;
// --litrpg-del: #be123c;
// --litrpg-drop-shadow: var(--container-drop-shadow);
// --lit-rpg-polygon: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
// === FOCUS =================================================================
--focus-border-color: #ef4d4d;
--focus-outline: 2px solid var(--focus-border-color);
// --focus-box-shadow: inset 0 0 0px 3px rgb(0 0 0 / 75%);
// --focus-box-shadow-small: inset 0 0 0px 2px rgb(0 0 0 / 75%);
// === ELEVATIONS ============================================================
// --e-fullscreen: var(--e-1);
// --e-1: var(--bg-800);
// --e-overlay: var(--bg-1000);
--focus-box-shadow: inset 0 0 0 2px rgb(0 0 0 / 75%);
// === NAVIGATION ============================================================
@ -333,18 +376,20 @@
--modal-bg-color: var(--bg-600);
// === SHADOWS ===============================================================
// --floating-shadow: 0 0 16px 4px rgb(0 0 0 / 30%), 1px 1px 0 0 rgb(255 255 255 / 1%) inset;
// --container-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
// --container-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 1px 2px -1px rgb(0 0 0 / 10%);
// --figure-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.12)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.1));
// --caption-overlay-shadow: linear-gradient(0deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 30%) 70%, transparent);
// --embed-box-shadow: 0 0 2px rgb(0 0 0 / 30%);
--box-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 10%);
--box-shadow-s: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 1px 2px -1px rgb(0 0 0 / 10%);
--box-shadow: 0 3px 6px -1px rgb(0 0 0 / 9%), 0 -1px 4px -2px rgb(0 0 0 / 10%);
--box-shadow-m: rgb(0 0 0 / 15%) 0px 2px 5px 0px, rgb(0 0 0 / 5%) 0px 1px 1px 0px;
--box-shadow-l: rgb(0 0 0 / 10%) 0px 6px 12px -2px, rgb(0 0 0 / 15%) 0px 3px 7px -3px;
--box-shadow-xl: 0 3px 8px -1px rgb(0 0 0 / 9%), 0 3px 12px -1px rgb(0 0 0 / 17%);
--drop-shadow-xs: drop-shadow(0 1px 2px rgb(0 0 0 / 10%));
--drop-shadow-s: drop-shadow(0 1px 3px rgb(0 0 0 / 12%)) drop-shadow(0 1px 2px rgb(0 0 0 / 10%));
--drop-shadow: drop-shadow(0 2px 6px rgb(0 0 0 / 9%)) drop-shadow(0 -1px 3px rgb(0 0 0 / 10%));
--drop-shadow-m: drop-shadow(0 2px 5px rgb(0 0 0 / 15%)) drop-shadow(0 1px 1px rgb(0 0 0 / 5%));
--drop-shadow-l: drop-shadow(0 5px 11px rgb(0 0 0 / 10%)) drop-shadow(0 2px 6px rgb(0 0 0 / 15%));
--drop-shadow-xl: drop-shadow(0 3px 8px rgb(0 0 0 / 9%)) drop-shadow(0 3px 12px rgb(0 0 0 / 17%));
// === MOBILE MENU ===========================================================
// --mobile-menu-background: var(--e-1);
@ -357,9 +402,6 @@
// --mobile-menu-current-chapter-text: var(--fg-400);
// --mobile-menu-current-chapter-background: rgb(0 0 0 / 25%);
// === CONTENT ===============================================================
// --blockquote-background: rgb(0 0 0 / 15%);
// === TABLES ================================================================
// --table-border-color: var(--fg-900);
// --table-stripe-background: hsl(var(--bg-1000-free) / 15%);
@ -412,17 +454,18 @@
--inline-link-color-border-hover: 1px solid currentColor;
// === COLORS - BOOKMARKS ====================================================
// --bookmark-color-alpha: var(--fg-900);
// --bookmark-color-beta: #e06552;
// --bookmark-color-gamma: #77BFA3;
// --bookmark-color-delta: #3C91E6;
// --bookmark-line: var(--primary-500);
// --bookmark-button-text-active-alpha: var(--fg-1000);
// --bookmark-button-text-active-beta: var(--fg-1000);
// --bookmark-button-text-active-gamma: var(--fg-1000);
// --bookmark-button-text-active-delta: var(--fg-1000);
// --bookmark-progress-opacity: .15;
// --bookmark-progress-mobile-opacity: .75;
--bookmark-color-alpha: var(--fg-900);
--bookmark-color-beta: #e06552;
--bookmark-color-gamma: #77BFA3;
--bookmark-color-delta: #3C91E6;
--bookmark-line: var(--primary-500);
--bookmark-button-text-active-alpha: var(--fg-inverted);
--bookmark-button-text-active-beta: var(--fg-inverted);
--bookmark-button-text-active-gamma: var(--fg-inverted);
--bookmark-button-text-active-delta: var(--fg-inverted);
--bookmark-progress-opacity: .15;
--bookmark-progress-mobile-opacity: .75;
// === BUTTONS - GENERAL =====================================================
@ -457,8 +500,8 @@
// === BUTTONS - WARNING ======================================================
--button-warning-background: var(--warning-500);
--button-warning-background-hover: var(--warning-600);
--button-warning-background: var(--red-500);
--button-warning-background-hover: var(--red-600);
--button-warning-color: #fff;
--button-warning-color-hover: #fff;
@ -518,9 +561,9 @@
--notice-default-background: var(--bg-50);
--notice-default-color: var(--fg-inverted);
--notice-warning-background: var(--warning-500);
--notice-warning-background: var(--red-500);
--notice-warning-color: #fff;
--notice-success-background: var(--success-500);
--notice-success-background: var(--green-500);
--notice-success-color: #fff;
--notice-box-shadow: var(--box-shadow-l);
@ -573,17 +616,17 @@
.selected-paragraph {
--paragraph-selection-background: rgb(255 255 255 / 10%);
--paragraph-tools-filter: drop-shadow(0 1px 4px rgb(0 0 0 / 33%));
// --button-bookmark-background-active: var(--primary-500);
--button-bookmark-background-active: var(--primary-500);
}
.tts-interface {
// --tts-background: var(--e-overlay);
// --tts-button-active-background: var(--primary-500);
// --tts-button-active-text: var(--fg-1000);
--tts-background: var(--bg-950);
--tts-button-active-background: var(--primary-500);
--tts-button-active-text: var(--fg-inverted);
}
.current-reading {
// --tts-current-reading-background: rgb(255 255 255 / 5%);
--tts-current-reading-background: rgb(255 255 255 / 5%);
}
.toggle {

14
src/scss/editor.scss
View File

@ -13,12 +13,12 @@ body {
}
--red: #dc2626;
--litrpg-bg: white;
--litrpg-fg: currentColor;
--litrpg-background: white;
--litrpg-color: currentColor;
--litrpg-ins: #1d3eaa;
--litrpg-del: #be123c;
--litrpg-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
--lit-rpg-polygon: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
--litrpg-polygon: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
:is(.is-root-container, .edit-post-visual-editor__post-title-wrapper) {
margin-left: auto;
@ -529,7 +529,7 @@ body {
position: absolute;
left: 50% !important;
bottom: 0 !important;
background: var(--caption-overlay-shadow);
background: var(--caption-overlay-background);
color: #fff;
font: 400 var(--fs-caption)/1.2 var(--ff-note);
letter-spacing: 0;
@ -661,7 +661,7 @@ body {
// =============================================================================
.litrpg-box {
color: var(--litrpg-fg);
color: var(--litrpg-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,Cantarell, "Helvetica Neue", sans-serif;
font-size: get_relative_clamp(0.75, 0.875, 320, 480, 'vw', 'em');
font-weight: 400;
@ -790,8 +790,8 @@ body {
}
.litrpg-frame {
background: var(--litrpg-bg);
clip-path: var(--lit-rpg-polygon);
background: var(--litrpg-background);
clip-path: var(--litrpg-polygon);
margin: 0 2px;
}