Color refactoring part 6
This commit is contained in:
Tetrakern
parent
b107776a57
commit
05f1d82f41
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
:is(:root,:root.minimal) .content-list-style-lines{--content-li-background: none;--card-content-li-background: none}:is(:root,:root.minimal) .content-list-style-lines :is(.chapter-group__list-item,.story__blog-list-item,.card__link-list-item){border-radius:0;border-bottom:1.5px solid var(--layout-color-separator)}:is(:root,:root.minimal) .content-list-style-lines .card__link-list-item:last-child{border-bottom:none}
|
||||
:is(:root,:root.minimal) .content-list-style-lines{--content-li-background: none;--card-content-li-background: none}:is(:root,:root.minimal) .content-list-style-lines :is(.chapter-group__list-item,.story__blog-list-item,.card__link-list-item){border-radius:0;border-bottom:var(--content-li-hr-border)}:is(:root,:root.minimal) .content-list-style-lines .card__link-list-item:last-child{border-bottom:none}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
.tax-cloud{display:flex;flex-wrap:wrap;gap:.5rem .75rem;line-height:1;margin-bottom:3rem}.tax-cloud__header{flex:1 0 100%;padding-bottom:.75rem;margin-bottom:.25rem;border-bottom:2px dashed var(--layout-color-lineart)}.tax-cloud__current{font-size:var(--fs-ml);text-transform:uppercase}.tax-cloud__current em{font-style:normal;color:var(--tax-cloud-current)}.tax-cloud__tax-description{color:var(--fg-800);font-size:var(--fs-xxs);font-style:italic;line-height:1.5;padding-top:.5rem}.tax-cloud>a{display:inline-flex;align-items:flex-end;letter-spacing:clamp(-0.02rem,0.2vw - 0.96px,0rem);height:20px}.tax-cloud>a span{margin-left:.25rem}
|
||||
.tax-cloud{display:flex;flex-wrap:wrap;gap:.5rem .75rem;line-height:1;margin-bottom:3rem}.tax-cloud__header{flex:1 0 100%;padding-bottom:.75rem;margin-bottom:.25rem;border-bottom:var(--layout-hr-border-dashed)}.tax-cloud__current{font-size:var(--fs-ml);text-transform:uppercase}.tax-cloud__current em{font-style:normal;color:var(--tax-cloud-current)}.tax-cloud__tax-description{color:var(--fg-800);font-size:var(--fs-xxs);font-style:italic;line-height:1.5;padding-top:.5rem}.tax-cloud>a{display:inline-flex;align-items:flex-end;letter-spacing:clamp(-0.02rem,0.2vw - 0.96px,0rem);height:20px}.tax-cloud>a span{margin-left:.25rem}
|
||||
|
||||
@ -1234,7 +1234,7 @@ function fictioneer_add_dark_mode_customizer_settings( $manager ) {
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_hex_color',
|
||||
'default' => '#dadde2'
|
||||
'default' => '#dbdde1'
|
||||
)
|
||||
);
|
||||
|
||||
@ -1256,7 +1256,7 @@ function fictioneer_add_dark_mode_customizer_settings( $manager ) {
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_hex_color',
|
||||
'default' => '#dadde2'
|
||||
'default' => '#dbdde1'
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
@ -772,8 +772,8 @@ function fictioneer_build_customize_css( $content = null ) {
|
||||
// --- Dark mode colors ------------------------------------------------------
|
||||
|
||||
$css .= ":root {
|
||||
--site-title-heading-color: " . fictioneer_hsl_code( get_theme_mod( 'dark_header_title_color', '#dadde2' ) ) . ";
|
||||
--site-title-tagline-color: " . fictioneer_hsl_code( get_theme_mod( 'dark_header_tagline_color', '#dadde2' ) ) . ";
|
||||
--site-title-heading-color: " . fictioneer_hsl_code( get_theme_mod( 'dark_header_title_color', '#dbdde1' ) ) . ";
|
||||
--site-title-tagline-color: " . fictioneer_hsl_code( get_theme_mod( 'dark_header_tagline_color', '#dbdde1' ) ) . ";
|
||||
}";
|
||||
|
||||
if ( get_theme_mod( 'use_custom_dark_mode', false ) ) {
|
||||
@ -953,8 +953,8 @@ function fictioneer_build_customize_css( $content = null ) {
|
||||
|
||||
if ( ! get_theme_mod( 'page_shadow', true ) ) {
|
||||
$css .= ':root.no-page-shadow {
|
||||
--minimal-page-box-shadow: none;
|
||||
--page-box-shadow: none;
|
||||
--minimal-main-box-shadow: none;
|
||||
--page-drop-shadow: none;
|
||||
}';
|
||||
}
|
||||
|
||||
@ -2,27 +2,24 @@
|
||||
body {
|
||||
--text-shadow: none;
|
||||
--mobile-menu-text-shadow: none;
|
||||
--container-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%));
|
||||
--embed-box-shadow: none;
|
||||
--box-shadow-xs: none;
|
||||
--box-shadow-s: none;
|
||||
--box-shadow: none;
|
||||
--box-shadow-m: none;
|
||||
--box-shadow-l: none;
|
||||
--box-shadow-xl: none;
|
||||
--drop-shadow-xs: none;
|
||||
--drop-shadow-s: none;
|
||||
--drop-shadow: none;
|
||||
--drop-shadow-m: none;
|
||||
--drop-shadow-l: none;
|
||||
--drop-shadow-xl: none;
|
||||
}
|
||||
|
||||
.custom-background {
|
||||
@ -35,11 +32,12 @@
|
||||
}
|
||||
|
||||
:is(.card, .showcase__list-item, .story__thumbnail-image, .modal__wrapper, .cookies__list, .litrpg-frame) {
|
||||
box-shadow: var(--minimal-container-box-shadow);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:not(:fullscreen, :-webkit-full-screen) .main__background {
|
||||
box-shadow: var(--minimal-main-box-shadow);
|
||||
--page-box-shadow: none;
|
||||
--page-drop-shadow: none;
|
||||
}
|
||||
|
||||
@include bp(640px) {
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
&:not(:first-child) {
|
||||
.post__header {
|
||||
border-top: 2px solid var(--layout-color-separator);
|
||||
border-top: var(--layout-hr-border);
|
||||
padding-top: var(--layout-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
@ -218,7 +218,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--badge-generic-background);
|
||||
color: var(--badge-generic-text);
|
||||
color: var(--badge-generic-color);
|
||||
font: var(--font-weight-badge) 10px/1 var(--ff-base);
|
||||
letter-spacing: -0.03em;
|
||||
text-shadow: none;
|
||||
@ -230,27 +230,27 @@
|
||||
|
||||
&.badge-override {
|
||||
background: var(--badge-override-background);
|
||||
color: var(--badge-override-text);
|
||||
color: var(--badge-override-color);
|
||||
}
|
||||
|
||||
&.is-moderator {
|
||||
background: var(--badge-moderator-background);
|
||||
color: var(--badge-moderator-text);
|
||||
color: var(--badge-moderator-color);
|
||||
}
|
||||
|
||||
&.is-admin {
|
||||
background: var(--badge-admin-background);
|
||||
color: var(--badge-admin-text);
|
||||
color: var(--badge-admin-color);
|
||||
}
|
||||
|
||||
&.is-author {
|
||||
background: var(--badge-author-background);
|
||||
color: var(--badge-author-text);
|
||||
color: var(--badge-author-color);
|
||||
}
|
||||
|
||||
&.is-supporter {
|
||||
background: var(--badge-supporter-background);
|
||||
color: var(--badge-supporter-text);
|
||||
color: var(--badge-supporter-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -48,12 +48,12 @@
|
||||
&[aria-checked="true"] {
|
||||
.reader-settings__toggle-icon {
|
||||
background: var(--toggle-background-checked);
|
||||
color: var(--toggle-text-checked);
|
||||
color: var(--toggle-color-checked);
|
||||
border-color: var(--toggle-border-checked);
|
||||
|
||||
&:hover {
|
||||
background: var(--toggle-background-hover);
|
||||
color: var(--toggle-text-checked-hover);
|
||||
color: var(--toggle-color-checked-hover);
|
||||
border-color: var(--toggle-border-hover);
|
||||
}
|
||||
}
|
||||
@ -65,7 +65,7 @@
|
||||
display: grid;
|
||||
place-content: center;
|
||||
background: var(--toggle-background);
|
||||
color: var(--toggle-text);
|
||||
color: var(--toggle-color);
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
text-shadow: none;
|
||||
@ -78,7 +78,7 @@
|
||||
color var(--transition-duration);
|
||||
|
||||
&:hover {
|
||||
color: var(--toggle-text-hover);
|
||||
color: var(--toggle-color-hover);
|
||||
border-color: var(--toggle-border-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@ -185,7 +185,7 @@
|
||||
&__header {
|
||||
padding-bottom: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 2px dashed var(--layout-color-lineart);
|
||||
border-bottom: var(--layout-hr-border-dashed);
|
||||
}
|
||||
|
||||
&__title {
|
||||
|
||||
@ -36,16 +36,8 @@ $header_breakpoint: 640px;
|
||||
}
|
||||
|
||||
:root.minimal {
|
||||
.story__chapters[data-view="grid"] {
|
||||
.chapter-group__list-item{
|
||||
box-shadow: var(--minimal-container-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.story__blog-list-item {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--layout-color-separator);
|
||||
padding: .5rem 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -100,11 +100,11 @@
|
||||
|
||||
button {
|
||||
background: var(--button-suggestion-background);
|
||||
color: var(--button-suggestion-text);
|
||||
color: var(--button-suggestion-color);
|
||||
|
||||
&:not(.current, [disabled]):hover {
|
||||
background: var(--button-suggestion-background-hover);
|
||||
color: var(--button-suggestion-text-hover);
|
||||
color: var(--button-suggestion-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
flex: 1 0 100%;
|
||||
padding-bottom: .75rem;
|
||||
margin-bottom: .25rem;
|
||||
border-bottom: 2px dashed var(--layout-color-lineart);
|
||||
border-bottom: var(--layout-hr-border-dashed);
|
||||
}
|
||||
|
||||
&__current {
|
||||
|
||||
@ -258,7 +258,7 @@
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: .75rem;
|
||||
border-bottom: 2px dashed var(--layout-color-lineart);
|
||||
border-bottom: var(--layout-hr-border-dashed);
|
||||
}
|
||||
|
||||
&__notice {
|
||||
@ -466,7 +466,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--badge-generic-background);
|
||||
color: var(--badge-generic-text);
|
||||
color: var(--badge-generic-color);
|
||||
font: var(--font-weight-badge) 10px/1 var(--ff-base);
|
||||
letter-spacing: -0.03em;
|
||||
text-shadow: none;
|
||||
@ -478,27 +478,27 @@
|
||||
|
||||
&.badge-override {
|
||||
background: var(--badge-override-background);
|
||||
color: var(--badge-override-text);
|
||||
color: var(--badge-override-color);
|
||||
}
|
||||
|
||||
&.is-moderator {
|
||||
background: var(--badge-moderator-background);
|
||||
color: var(--badge-moderator-text);
|
||||
color: var(--badge-moderator-color);
|
||||
}
|
||||
|
||||
&.is-admin {
|
||||
background: var(--badge-admin-background);
|
||||
color: var(--badge-admin-text);
|
||||
color: var(--badge-admin-color);
|
||||
}
|
||||
|
||||
&.is-author {
|
||||
background: var(--badge-author-background);
|
||||
color: var(--badge-author-text);
|
||||
color: var(--badge-author-color);
|
||||
}
|
||||
|
||||
&.is-supporter {
|
||||
background: var(--badge-supporter-background);
|
||||
color: var(--badge-supporter-text);
|
||||
color: var(--badge-supporter-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -745,7 +745,7 @@
|
||||
}
|
||||
|
||||
.comments-skeleton {
|
||||
--layout-color-lineart: var(--skeleton-shape-color);
|
||||
--hr-border-color: var(--skeleton-shape-color);
|
||||
opacity: .5;
|
||||
animation: skeleton-animation 2s linear infinite;
|
||||
|
||||
|
||||
@ -277,7 +277,7 @@ button[type=submit]:where(:not(._inline)) {
|
||||
--focus-offset: -2px;
|
||||
display: block;
|
||||
background: var(--tag-background);
|
||||
color: var(--tag-text);
|
||||
color: var(--tag-color);
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
border-radius: var(--layout-border-radius-small);
|
||||
@ -292,27 +292,30 @@ button[type=submit]:where(:not(._inline)) {
|
||||
}
|
||||
|
||||
&:not(._inline):hover {
|
||||
color: var(--tag-text-hover);
|
||||
color: var(--tag-color-hover);
|
||||
background: var(--tag-background-hover);
|
||||
}
|
||||
|
||||
&._secondary {
|
||||
background: var(--tag-secondary-background);
|
||||
color: var(--tag-secondary-text);
|
||||
color: var(--tag-secondary-color);
|
||||
border: var(--tag-secondary-border);
|
||||
|
||||
&:hover {
|
||||
background: var(--tag-secondary-background-hover);
|
||||
color: var(--tag-secondary-text-hover);
|
||||
color: var(--tag-secondary-color-hover);
|
||||
border: var(--tag-secondary-border-hover);
|
||||
}
|
||||
|
||||
&._taxonomy-content_warning {
|
||||
background: var(--tag-warning-background);
|
||||
color: var(--tag-warning-color);
|
||||
border: var(--tag-warning-border);
|
||||
|
||||
&:hover {
|
||||
background: var(--tag-warning-background-hover);
|
||||
color: var(--tag-warning-text-hover);
|
||||
color: var(--tag-warning-color-hover);
|
||||
border: var(--tag-warning-border-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -571,8 +574,8 @@ html:not(.logged-in) body:not(.logged-in) {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.chapter-group__label {
|
||||
padding-left: 2px;
|
||||
.chapter-group__list-item {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -707,10 +710,18 @@ html:not(.logged-in) body:not(.logged-in) {
|
||||
}
|
||||
|
||||
:root.minimal {
|
||||
.chapter-group__list-item {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1.5px solid var(--layout-color-separator);
|
||||
.chapter-group__list-item-link {
|
||||
grid-area: 1 / 1 / 2 / 3;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.chapter-group__list-item-subrow {
|
||||
grid-area: 2 / 1 / 3 / 3;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.chapter-group__list-item-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -571,12 +571,12 @@ figure {
|
||||
|
||||
&:hover :is(a, a.wp-block-file__button) {
|
||||
background: var(--button-file-block-background-hover);
|
||||
color: var(--button-file-block-text-hover) !important;
|
||||
color: var(--button-file-block-color-hover) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--button-file-block-text);
|
||||
color: var(--button-file-block-color);
|
||||
padding: .5rem;
|
||||
transition: background-color var(--transition-duration);
|
||||
|
||||
@ -589,7 +589,7 @@ figure {
|
||||
|
||||
.wp-block-file__button:is(a) {
|
||||
background: var(--button-file-block-background);
|
||||
color: var(--button-file-block-text) !important;
|
||||
color: var(--button-file-block-color) !important;
|
||||
font-size: var(--fs-dxs);
|
||||
font-weight: var(--button-font-weight);
|
||||
border-radius: 0;
|
||||
|
||||
@ -245,7 +245,7 @@ p a,
|
||||
|
||||
:where(.list, ul:not([class])) {
|
||||
li::marker {
|
||||
color: var(--fg-700);
|
||||
color: var(--list-marker-color, var(--fg-700)); // Done
|
||||
}
|
||||
}
|
||||
|
||||
@ -297,6 +297,7 @@ p a,
|
||||
}
|
||||
|
||||
.litrpg-box {
|
||||
--list-marker-color: currentColor;
|
||||
color: var(--litrpg-color);
|
||||
font-size: 87.5%; // Fallback
|
||||
font-size: get_relative_clamp(0.75, 0.875, 320, 480, 'vw', 'em');
|
||||
|
||||
@ -42,12 +42,10 @@
|
||||
--layout-link: inherit;
|
||||
--layout-link-hover: var(--fg-200);
|
||||
--caption-overlay-color: var(--fg-1000);
|
||||
--layout-color-lineart: var(--bg-600);
|
||||
--layout-color-separator: rgb(0 0 0 / 8%);
|
||||
|
||||
// === MINIMAL ===============================================================
|
||||
--minimal-main-box-shadow: 0 0 1px rgb(0 0 0 / 40%);
|
||||
--minimal-container-box-shadow: 0 0 1px rgb(0 0 0 / 40%);
|
||||
--minimal-page-box-shadow: 0 0 1px rgb(0 0 0 / 40%);
|
||||
--minimal-box-shadow: 0 0 1px rgb(0 0 0 / 40%);
|
||||
|
||||
// === UNSORTED ==============================================================
|
||||
--theme-color-base: 220 13 91;
|
||||
@ -219,8 +217,8 @@
|
||||
--button-quick-border-hover: none;
|
||||
|
||||
// === BUTTONS - FILE BLOCK ==================================================
|
||||
--button-file-block-text: var(--fg-1000);
|
||||
--button-file-block-text-hover: var(--fg-1000);
|
||||
--button-file-block-color: var(--fg-1000);
|
||||
--button-file-block-color-hover: var(--fg-1000);
|
||||
--button-file-block-background: var(--bg-500);
|
||||
--button-file-block-background-hover: var(--bg-700);
|
||||
|
||||
@ -308,17 +306,17 @@
|
||||
--scrollbar-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
|
||||
|
||||
// === BADGES ================================================================
|
||||
--badge-generic-text: var(--fg-1000);
|
||||
--badge-generic-color: var(--fg-1000);
|
||||
--badge-generic-background: var(--bg-400);
|
||||
--badge-supporter-text: var(--fg-1000);
|
||||
--badge-supporter-color: var(--fg-1000);
|
||||
--badge-supporter-background: #ed5e76;
|
||||
--badge-moderator-text: var(--fg-1000);
|
||||
--badge-moderator-color: var(--fg-1000);
|
||||
--badge-moderator-background: #5369ac;
|
||||
--badge-admin-text: var(--fg-1000);
|
||||
--badge-admin-color: var(--fg-1000);
|
||||
--badge-admin-background: var(--bg-700);
|
||||
--badge-author-text: var(--fg-1000);
|
||||
--badge-author-color: var(--fg-1000);
|
||||
--badge-author-background: var(--bg-700);
|
||||
--badge-override-text: var(--fg-1000);
|
||||
--badge-override-color: var(--fg-1000);
|
||||
--badge-override-background: var(--bg-400);
|
||||
|
||||
// === SCOPES ================================================================
|
||||
@ -352,10 +350,10 @@
|
||||
}
|
||||
|
||||
.toggle {
|
||||
--toggle-text: var(--button-primary-background);
|
||||
--toggle-text-hover: var(--button-primary-background-hover);
|
||||
--toggle-text-checked: var(--fg-1000);
|
||||
--toggle-text-checked-hover: var(--fg-1000);
|
||||
--toggle-color: var(--button-primary-background);
|
||||
--toggle-color-hover: var(--button-primary-background-hover);
|
||||
--toggle-color-checked: var(--fg-1000);
|
||||
--toggle-color-checked-hover: var(--fg-1000);
|
||||
--toggle-background: transparent;
|
||||
--toggle-background-checked: var(--button-primary-background);
|
||||
--toggle-background-hover: var(--button-primary-background-hover);
|
||||
@ -365,24 +363,24 @@
|
||||
}
|
||||
|
||||
.suggestion-tools {
|
||||
--button-suggestion-text: var(--fg-1000);
|
||||
--button-suggestion-text-hover: var(--fg-1000);
|
||||
--button-suggestion-color: var(--fg-1000);
|
||||
--button-suggestion-color-hover: var(--fg-1000);
|
||||
--button-suggestion-background: var(--bg-500);
|
||||
--button-suggestion-background-hover: var(--bg-700);
|
||||
}
|
||||
|
||||
.tag-pill {
|
||||
--tag-text: var(--fg-600);
|
||||
--tag-text-hover: var(--fg-1000);
|
||||
--tag-color: var(--fg-600);
|
||||
--tag-color-hover: var(--fg-1000);
|
||||
--tag-background: var(--bg-300);
|
||||
--tag-background-hover: var(--bg-700);
|
||||
--tag-secondary-text: var(--fg-900);
|
||||
--tag-secondary-text-hover: var(--fg-1000);
|
||||
--tag-secondary-color: var(--fg-900);
|
||||
--tag-secondary-color-hover: var(--fg-1000);
|
||||
--tag-secondary-background: transparent;
|
||||
--tag-secondary-background-hover: var(--bg-700);
|
||||
--tag-secondary-border: 1px solid var(--bg-300);
|
||||
--tag-secondary-border-hover: 1px solid transparent;
|
||||
--tag-warning-text-hover: var(--fg-1000);
|
||||
--tag-warning-color-hover: var(--fg-1000);
|
||||
--tag-warning-background: rgb(246 96 85 / 5%);
|
||||
--tag-warning-background-hover: var(--red-600);
|
||||
}
|
||||
|
||||
@ -52,11 +52,11 @@
|
||||
--header-height: calc(#{get_clamp(190, 380, 320, $full-width)} - var(--page-inset-top));
|
||||
--header-logo-height: 210px;
|
||||
|
||||
// --site-title-font-size: #{get_clamp(32, 60, 320, $full-width)};
|
||||
// --site-title-tagline-font-size: #{get_clamp(13, 18, 320, $full-width)};
|
||||
// --site-title-heading-color: var(--fg-100);
|
||||
// --site-title-tagline-color: var(--fg-100);
|
||||
// --site-title-text-shadow: 0 0 4px rgb(0 0 0 / 80%), 0 0 2px rgb(0 0 0 / 60%);
|
||||
--site-title-font-size: #{get_clamp(32, 60, 320, $full-width)};
|
||||
--site-title-tagline-font-size: #{get_clamp(13, 18, 320, $full-width)};
|
||||
--site-title-heading-color: var(--fg-300);
|
||||
--site-title-tagline-color: var(--fg-300);
|
||||
--site-title-text-shadow: 0 0 4px rgb(0 0 0 / 80%), 0 0 2px rgb(0 0 0 / 60%);
|
||||
|
||||
// === ASSETS ================================================================
|
||||
|
||||
@ -109,6 +109,9 @@
|
||||
--embed-background: var(--disabled-pattern);
|
||||
--embed-box-shadow: var(--box-shadow-m);
|
||||
|
||||
--table-border-color: var(--fg-900);
|
||||
--table-stripe-background: rgb(0 0 0 / 15%);
|
||||
|
||||
--paragraph-spacing: 1.5rem;
|
||||
--blockquote-background: rgb(0 0 0 / 15%);
|
||||
--placeholder-background: var(--bg-950);
|
||||
@ -124,8 +127,8 @@
|
||||
|
||||
--litrpg-background: var(--bg-50);
|
||||
--litrpg-color: var(--fg-inverted);
|
||||
--litrpg-ins: var(--green-700);
|
||||
--litrpg-del: var(--red-700);
|
||||
--litrpg-ins: #607a3e;
|
||||
--litrpg-del: #c14444;
|
||||
--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);
|
||||
|
||||
@ -134,6 +137,7 @@
|
||||
--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-hr-border: 2px solid rgb(255 255 255 / 4%);
|
||||
|
||||
// Derived from: https://larsenwork.com/easing-gradients/
|
||||
// --content-li-background-gradient: linear-gradient(
|
||||
@ -162,59 +166,18 @@
|
||||
--primary-500: hsl(44deg 86% 70%);
|
||||
--primary-600: hsl(34deg 82% 70%);
|
||||
|
||||
--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;
|
||||
|
||||
--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;
|
||||
--wp--preset--color--vivid-red: var(--red-400); // Change for dark mode
|
||||
--wp--preset--color--vivid-cyan-blue: #26aeeb; // Change for dark mode
|
||||
--wp--preset--color--vivid-purple: #c792fc; // Change for dark mode
|
||||
}
|
||||
|
||||
// === BACKGROUNDS ===========================================================
|
||||
@ -262,18 +225,6 @@
|
||||
--fg-950: #{hsl_font_code(222, 9, 49)}; // Contrast ratio vs bg-700 ~ 3
|
||||
--fg-tinted: #{hsl_font_code(222, 20, 74)}; // Contrast ratio vs bg-700 ~ 6.6
|
||||
--fg-inverted: #{hsl_font_code(222, 20, 5)}; // Contrast ratio vs bg-200 ~ 4.51
|
||||
|
||||
// Colors for dark backgrounds (not changed in light mode)
|
||||
// --fg-d100: #{hsl_font_code(220, 10, 88)}; // Contrast ~ 9.9, #dddfe3
|
||||
// --fg-d200: #{hsl_font_code(223, 11, 84)}; // Contrast ~ 8.9, #d2d4db
|
||||
// --fg-d300: #{hsl_font_code(224, 11, 79)}; // Contrast ~ 7.8, #c4c7cf
|
||||
// --fg-d400: #{hsl_font_code(221, 13, 74)}; // Contrast ~ 6.8, #b4bac5
|
||||
// --fg-d500: #{hsl_font_code(222, 14, 69)}; // Contrast ~ 5.8, #a5acbb
|
||||
// --fg-d600: #{hsl_font_code(222, 13, 65)}; // Contrast ~ 5.1, #9aa1b1
|
||||
// --fg-d700: #{hsl_font_code(221, 12, 62)}; // Contrast ~ 4.7, #929aaa
|
||||
// --fg-d800: #{hsl_font_code(221, 10, 61)}; // Contrast ~ 4.56, #9298a5
|
||||
// --fg-d900: #{hsl_font_code(223, 10, 52)}; // Contrast ~ 3.3, #787f91
|
||||
// --fg-d1000: #{hsl_font_code(220, 10, 8)}; // Contrast ~ 1.4, #121416
|
||||
}
|
||||
|
||||
// === CUSTOMIZER (FOR REFERENCE) ============================================
|
||||
@ -289,18 +240,15 @@
|
||||
--layout-border-radius-small: 2px;
|
||||
--layout-link-color: inherit;
|
||||
--layout-link-color-hover: inherit;
|
||||
--layout-hr-border: 2px solid var(--bg-300);
|
||||
|
||||
|
||||
|
||||
// --layout-color-lineart: var(--fg-800);
|
||||
|
||||
|
||||
--layout-hr-border: 2px solid var(--hr-border-color, var(--bg-300));
|
||||
--layout-hr-border-dashed: 2px dashed var(--hr-border-color, var(--bg-200));
|
||||
|
||||
// === MINIMAL ===============================================================
|
||||
|
||||
// --minimal-main-box-shadow: 0 0 1px rgb(0 0 0 / 50%);
|
||||
// --minimal-container-box-shadow: 0 0 1px rgb(0 0 0 / 50%);
|
||||
--minimal-page-box-shadow: 0 0 1px rgb(0 0 0 / 40%);
|
||||
--minimal-page-drop-shadow: drop-shadow(0 0 1px rgb(0 0 0 / 40%));
|
||||
--minimal-box-shadow: 0 0 1px rgb(0 0 0 / 40%);
|
||||
--minimal-drop-shadow: drop-shadow(0 0 1px rgb(0 0 0 / 40%));
|
||||
|
||||
// === HEADER ================================================================
|
||||
|
||||
@ -367,8 +315,9 @@
|
||||
--pagination-color-current: var(--fg-inverted);
|
||||
|
||||
// === FOOTER ================================================================
|
||||
// --fg-isolated-footer: var(--fg-d900);
|
||||
// --bg-isolated-footer: var(--bg-1000);
|
||||
|
||||
--fg-isolated-footer: var(--fg-700);
|
||||
--bg-isolated-footer: var(--bg-950);
|
||||
|
||||
// === MODALS ================================================================
|
||||
|
||||
@ -402,10 +351,6 @@
|
||||
// --mobile-menu-current-chapter-text: var(--fg-400);
|
||||
// --mobile-menu-current-chapter-background: rgb(0 0 0 / 25%);
|
||||
|
||||
// === TABLES ================================================================
|
||||
// --table-border-color: var(--fg-900);
|
||||
// --table-stripe-background: hsl(var(--bg-1000-free) / 15%);
|
||||
|
||||
// === FONT SETTINGS =========================================================
|
||||
|
||||
--font-smoothing-webkit: subpixel-antialiased; // Default
|
||||
@ -424,6 +369,7 @@
|
||||
--font-letter-spacing-base: 0.01em;
|
||||
|
||||
// === FONT SIZES ============================================================
|
||||
|
||||
--fs-xxxs: .625rem; // 10px
|
||||
--fs-xxs: .75rem; // 12px
|
||||
--fs-xs: .875rem; // 14px
|
||||
@ -440,13 +386,11 @@
|
||||
--fs-dxs: #{get_clamp(12, 13, 400, 768)};
|
||||
--fs-ds: #{get_clamp(13, 14, 400, 768)};
|
||||
|
||||
// === COLORS - HEADING LINKS ================================================
|
||||
// === COLORS LINKS ==========================================================
|
||||
|
||||
--heading-link-color: var(--fg-400);
|
||||
--heading-link-color-hover: var(--fg-200);
|
||||
|
||||
// === COLORS - INLINE LINKS =================================================
|
||||
|
||||
--inline-link-color: var(--primary-500);
|
||||
--inline-link-color-hover: var(--primary-400);
|
||||
--inline-link-color-visited: var(--primary-600);
|
||||
@ -505,7 +449,15 @@
|
||||
--button-warning-color: #fff;
|
||||
--button-warning-color-hover: #fff;
|
||||
|
||||
// === BUTTONS - SUGGESTION ===================================================
|
||||
|
||||
--button-suggestion-color: var(--fg-inverted);
|
||||
--button-suggestion-color-hover: var(--fg-inverted);
|
||||
--button-suggestion-background: var(--bg-100);
|
||||
--button-suggestion-background-hover: var(--bg-50);
|
||||
|
||||
// === BUTTONS - QUICK =======================================================
|
||||
|
||||
// --button-quick-background: var(--bg-500);
|
||||
// --button-quick-background-hover: var(--bg-300);
|
||||
// --button-quick-text: var(--fg-600);
|
||||
@ -514,10 +466,11 @@
|
||||
// --button-quick-border-hover: none;
|
||||
|
||||
// === BUTTONS - FILE BLOCK ==================================================
|
||||
// --button-file-block-text: var(--fg-1000);
|
||||
// --button-file-block-text-hover: var(--fg-1000);
|
||||
// --button-file-block-background: var(--fg-600);
|
||||
// --button-file-block-background-hover: var(--fg-400);
|
||||
|
||||
--button-file-block-color: var(--fg-inverted);
|
||||
--button-file-block-color-hover: var(--fg-inverted);
|
||||
--button-file-block-background: var(--bg-100);
|
||||
--button-file-block-background-hover: var(--bg-50);
|
||||
|
||||
// === PASSWORD FORM =========================================================
|
||||
|
||||
@ -588,23 +541,25 @@
|
||||
--text-selection-color: var(--fg-100);
|
||||
|
||||
// === SCROLL BARS ===========================================================
|
||||
// --scrollbar-background: rgb(0 0 0 / 20%);
|
||||
// --scrollbar-thumb: var(--fg-900);
|
||||
// --scrollbar-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
|
||||
|
||||
--scrollbar-background: rgb(0 0 0 / 20%);
|
||||
--scrollbar-thumb: var(--fg-950);
|
||||
--scrollbar-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
|
||||
|
||||
// === BADGES ================================================================
|
||||
// --badge-generic-text: var(--fg-400);
|
||||
// --badge-generic-background: var(--bg-300);
|
||||
// --badge-supporter-text: var(--fg-100);
|
||||
// --badge-supporter-background: hsl(350deg 75% 60%);
|
||||
// --badge-moderator-text: var(--fg-200);
|
||||
// --badge-moderator-background: #4d628f;
|
||||
// --badge-admin-text: var(--fg-200);
|
||||
// --badge-admin-background: #505062;
|
||||
// --badge-author-text: var(--fg-200);
|
||||
// --badge-author-background: #505062;
|
||||
// --badge-override-text: var(--fg-400);
|
||||
// --badge-override-background: var(--bg-300);
|
||||
|
||||
--badge-generic-color: var(--fg-400);
|
||||
--badge-generic-background: #505062;
|
||||
--badge-supporter-color: var(--fg-100);
|
||||
--badge-supporter-background: #e4445e;
|
||||
--badge-moderator-color: var(--fg-200);
|
||||
--badge-moderator-background: #4d628f;
|
||||
--badge-admin-color: var(--fg-inverted);
|
||||
--badge-admin-background: var(--bg-50);
|
||||
--badge-author-color: var(--fg-200);
|
||||
--badge-author-background: #b1355a;
|
||||
--badge-override-color: var(--fg-300);
|
||||
--badge-override-background: #5a5a7f;
|
||||
|
||||
// === SCOPES ================================================================
|
||||
|
||||
@ -630,48 +585,50 @@
|
||||
}
|
||||
|
||||
.toggle {
|
||||
// --toggle-text: var(--fg-600);
|
||||
// --toggle-text-hover: var(--fg-400);
|
||||
// --toggle-text-checked: var(--fg-1000);
|
||||
// --toggle-text-checked-hover: var(--fg-1000);
|
||||
// --toggle-background: transparent;
|
||||
// --toggle-background-checked: var(--fg-600);
|
||||
// --toggle-background-hover: var(--fg-400);
|
||||
// --toggle-border: var(--fg-600);
|
||||
// --toggle-border-checked: var(--fg-600);
|
||||
// --toggle-border-hover: var(--fg-400);
|
||||
}
|
||||
--toggle-background: transparent;
|
||||
--toggle-background-checked: var(--bg-100);
|
||||
--toggle-background-hover: var(--bg-50);
|
||||
|
||||
.suggestion-tools {
|
||||
// --button-suggestion-text: var(--fg-1000);
|
||||
// --button-suggestion-text-hover: var(--fg-1000);
|
||||
// --button-suggestion-background: var(--fg-300);
|
||||
// --button-suggestion-background-hover: var(--fg-200);
|
||||
--toggle-color: var(--fg-600);
|
||||
--toggle-color-hover: var(--fg-300);
|
||||
--toggle-color-checked: var(--fg-inverted);
|
||||
--toggle-color-checked-hover: var(--fg-inverted);
|
||||
|
||||
--toggle-border: var(--fg-600);
|
||||
--toggle-border-checked: var(--fg-600);
|
||||
--toggle-border-hover: var(--fg-300);
|
||||
}
|
||||
|
||||
.tag-pill {
|
||||
// --tag-text: var(--fg-400);
|
||||
// --tag-text-hover: var(--fg-300);
|
||||
// --tag-background: var(--bg-500);
|
||||
// --tag-background-hover: var(--bg-100);
|
||||
// --tag-secondary-text: var(--fg-900);
|
||||
// --tag-secondary-text-hover: var(--fg-300);
|
||||
// --tag-secondary-background: transparent;
|
||||
// --tag-secondary-background-hover: var(--bg-100);
|
||||
// --tag-secondary-border: .5px solid var(--bg-200);
|
||||
// --tag-secondary-border-hover: .5px solid transparent; // Uses background
|
||||
// --tag-warning-text-hover: var(--fg-100);
|
||||
// --tag-warning-background: rgb(246 96 85 / 5%);
|
||||
// --tag-warning-background-hover: rgb(246 96 85 / 50%);
|
||||
--tag-background: var(--bg-400);
|
||||
--tag-background-hover: var(--bg-300);
|
||||
--tag-color: var(--fg-400);
|
||||
--tag-color-hover: var(--fg-200);
|
||||
|
||||
--tag-secondary-background: transparent;
|
||||
--tag-secondary-background-hover: var(--bg-400);
|
||||
--tag-secondary-color: var(--fg-800);
|
||||
--tag-secondary-color-hover: var(--fg-200);
|
||||
--tag-secondary-border: .5px solid var(--bg-300);
|
||||
--tag-secondary-border-hover: .5px solid transparent; // Uses background
|
||||
|
||||
--tag-warning-background: rgb(246 96 85 / 5%); // Fallback
|
||||
--tag-warning-background: color-mix(in srgb, var(--red-500), transparent 90%);
|
||||
--tag-warning-background-hover: rgb(246 96 85 / 50%); // Fallback
|
||||
--tag-warning-background-hover: color-mix(in srgb, var(--red-500), transparent 35%);
|
||||
--tag-warning-color: var(--fg-800);
|
||||
--tag-warning-color-hover: var(--fg-100);
|
||||
--tag-warning-border: .5px solid var(--bg-300);
|
||||
--tag-warning-border-hover: .5px solid transparent; // Uses background
|
||||
}
|
||||
}
|
||||
|
||||
:root.minimal,
|
||||
:root[data-theme=base].minimal {
|
||||
.header__title {
|
||||
// --site-title-heading-color: var(--fg-200);
|
||||
// --site-title-tagline-color: var(--fg-500);
|
||||
// --site-title-text-shadow: none;
|
||||
--site-title-heading-color: var(--fg-300);
|
||||
--site-title-tagline-color: var(--fg-300);
|
||||
--site-title-text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
:is(.chapter-group__list-item, .story__blog-list-item, .card__link-list-item) {
|
||||
border-radius: 0;
|
||||
border-bottom: 1.5px solid var(--layout-color-separator);
|
||||
border-bottom: var(--content-li-hr-border);
|
||||
}
|
||||
|
||||
.card__link-list-item:last-child {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user