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

Color refactoring part 14

Browse Source
This commit is contained in:
Tetrakern 2024-02-27 14:17:33 +01:00
parent 86e53d4c12
commit e63aa34e1c
14 changed files with 53 additions and 54 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/card-style-combined.css
View File

@ -1 +1 @@
.card._combined{--card-style-border-width: 0}.card._combined .card__footer._article .card__footer-box,.card._combined .card__body>.card__footer .card__footer-box:is(._left,:last-child){padding:calc(var(--this-padding)*.5) var(--this-padding) var(--this-padding)}.card._combined .rating-letter-label{font-weight:700;opacity:.5}
:root,:root[data-theme=base]{--card-footer-color: var(--fg-700);--card-footer-icon-color: var(--fg-900)}:root[data-mode=light]{--card-footer-color: var(--fg-700);--card-footer-icon-color: var(--fg-800)}.card._combined{--card-style-border-width: 0}.card._combined .card__footer._article .card__footer-box,.card._combined .card__body>.card__footer .card__footer-box:is(._left,:last-child){padding:calc(var(--this-padding)*.5) var(--this-padding) var(--this-padding)}.card._combined .rating-letter-label{font-weight:700;opacity:.5}

2
css/customize/card-style-unfolded-combined.css
View File

@ -1 +1 @@
.card:where(._unfolded,._combined):is(._small,._article) .card__body>.card__footer{margin-top:0}.card:where(._unfolded,._combined) .card__body{padding:0}.card:where(._unfolded,._combined) .card__body._article .card__tag-list._scrolling{padding:0 var(--this-padding);margin-top:calc(-1*var(--card-footer-margin-top, 1em));margin-bottom:0}.card:where(._unfolded,._combined) .card__body>.card__footer{gap:0}.card:where(._unfolded,._combined) .card__body>.card__footer .card__footer-box{background:none;border-top:var(--card-style-border-width, 1.5px) solid var(--card-style-border-color, var(--bg-900));border-radius:0}.card:where(._unfolded,._combined) .card__body>.card__footer .card__footer-box._right{border-left:var(--card-style-border-width, 1.5px) solid var(--card-style-border-color, var(--bg-900));min-width:9cqw}.card:where(._unfolded,._combined) .card__header{padding:var(--this-padding) var(--this-padding) 0}.card:where(._unfolded,._combined) .card__main{padding:0 var(--this-padding)}.card:where(._unfolded,._combined) .card__main:is(._small,._article,._hidden-result){padding:var(--this-padding)}.card:where(._unfolded,._combined)._recommendation .card__main{padding-bottom:var(--this-padding)}.card:where(._unfolded,._combined) .card__footer._article .card__footer-box,.card:where(._unfolded,._combined) .card__body>.card__footer .card__footer-box:is(._left,:last-child){padding:calc(var(--this-padding)*.75) var(--this-padding)}
:root,:root[data-theme=base]{--card-footer-color: var(--fg-600);--card-footer-icon-color: var(--fg-800)}:root[data-mode=light]{--card-footer-icon-color: var(--fg-700);--card-style-border-color: var(--bg-400)}.card:where(._unfolded,._combined):is(._small,._article) .card__body>.card__footer{margin-top:0}.card:where(._unfolded,._combined) .card__body{padding:0}.card:where(._unfolded,._combined) .card__body._article .card__tag-list._scrolling{padding:0 var(--this-padding);margin-top:calc(-1*var(--card-footer-margin-top, 1em));margin-bottom:0}.card:where(._unfolded,._combined) .card__body>.card__footer{gap:0}.card:where(._unfolded,._combined) .card__body>.card__footer .card__footer-box{background:none;border-top:var(--card-style-border-width, 1.5px) solid var(--card-style-border-color, var(--bg-900));border-radius:0}.card:where(._unfolded,._combined) .card__body>.card__footer .card__footer-box._right{border-left:var(--card-style-border-width, 1.5px) solid var(--card-style-border-color, var(--bg-900));min-width:9cqw}.card:where(._unfolded,._combined) .card__header{padding:var(--this-padding) var(--this-padding) 0}.card:where(._unfolded,._combined) .card__main{padding:0 var(--this-padding)}.card:where(._unfolded,._combined) .card__main:is(._small,._article,._hidden-result){padding:var(--this-padding)}.card:where(._unfolded,._combined)._recommendation .card__main{padding-bottom:var(--this-padding)}.card:where(._unfolded,._combined) .card__footer._article .card__footer-box,.card:where(._unfolded,._combined) .card__body>.card__footer .card__footer-box:is(._left,:last-child){padding:calc(var(--this-padding)*.75) var(--this-padding)}

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

6
src/scss/_card.scss
View File

@ -461,7 +461,7 @@
&__footer {
display: flex;
gap: 3px;
color: var(--fg-700);
color: var(--card-footer-color, var(--fg-700));
font-size: var(--card-footer-font-size, clamp(12px, 2.25cqw, 13px));
line-height: 1;
margin-top: var(--card-footer-margin-top, 1em);
@ -471,7 +471,7 @@
}
.card-footer-icon {
color: var(--fg-800);
color: var(--card-footer-icon-color, var(--fg-900));
margin-right: .3em;
&:not(:first-child) {
@ -484,7 +484,7 @@
flex: 0 0 auto;
display: grid;
place-content: center;
color: var(--fg-700);
color: var(--card-footer-rating-color, var(--fg-700));
font-family: var(--ff-heading);
font-weight: 600;
padding: 0 .5rem;

4
src/scss/_showcase.scss
View File

@ -72,11 +72,11 @@
display: block;
background: var(--caption-overlay-background);
color: var(--caption-overlay-color);
font: 500 var(--fs-dxs)/1.2 var(--ff-heading);
font: 400 var(--fs-dxs)/1.2 var(--ff-heading);
letter-spacing: 0;
text-align: center;
white-space: nowrap;
padding: .6rem .5rem .3rem;
padding: var(--caption-padding);
overflow: hidden;
text-overflow: ellipsis;
}

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

@ -94,6 +94,14 @@ sup[data-fn] {
&.has-background {
padding: max(var(--wp--style--unstable-gallery-gap, 1rem), 0.5rem);
}
&.has-nested-images figure.wp-block-image figcaption {
background: var(--caption-overlay-background);
color: var(--caption-overlay-color);
font: 400 var(--fs-dxs)/1.2 var(--ff-heading);
letter-spacing: 0;
padding: var(--caption-padding);
}
}
// =============================================================================
@ -111,14 +119,14 @@ sup[data-fn] {
margin: 0;
a {
color: var(--inline-link-color);
color: var(--inline-link-color) !important; // Override WP defaults
&:hover {
color: var(--inline-link-color-hover);
color: var(--inline-link-color-hover) !important; // Override WP defaults
}
&:visited {
color: var(--inline-link-color-visited);
color: var(--inline-link-color-visited) !important; // Override WP defaults
}
}
}

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

@ -20,14 +20,11 @@
--del-background: var(--red-400);
--del-color: inherit;
// --caption-overlay-background: linear-gradient(0deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 30%) 70%, transparent);
// --caption-overlay-color: var(--fg-200);
--caption-overlay-color: #fff;
// --progress-bar-background: var(--navigation-background);
// --progress-bar-color: var(--bg-200);
--progress-bar-background: var(--bg-900);
// --skeleton-shape-color: var(--bg-300);
// --skeleton-cutout-color: var(--page-bg-color);
--skeleton-shape-color: var(--bg-400);
--embed-box-shadow: 0 0 1px rgb(0 0 0 / 35%);
@ -55,7 +52,7 @@
--content-li-background-full: var(--bg-250);
--content-li-background-gradient: linear-gradient(to left, var(--bg-250) 0%, var(--bg-250) 55%, transparent 90%);
// --content-li-hr-border: 2px solid rgb(255 255 255 / 4%);
--content-li-hr-border: 2px solid rgb(0 0 0 / 4%);
// === COLORS ================================================================
@ -146,10 +143,6 @@
// --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 ================================================================
// --header-image-drop-shadow: drop-shadow(0 0 2px rgb(0 0 0 / 40%));
// === PAGE ==================================================================
--page-bg-color: var(--bg-100);
@ -163,9 +156,9 @@
--card-overlay-bg-color: var(--bg-300);
--card-content-li-background-full: var(--bg-200);
--card-content-li-background-gradient: linear-gradient(to left, var(--bg-200) 50%, transparent 90%);
// --card-label-color: var(--fg-inverted);
// --card-label-background: var(--fg-500);
// --card-unavailable-filter: grayscale(0.3) brightness(0.95);
--card-footer-color: var(--fg-600);
--card-footer-icon-color: var(--fg-700);
// === FOCUS =================================================================
@ -216,22 +209,6 @@
--modal-bg-color: var(--bg-50);
// === SHADOWS ===============================================================
--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(--bg-700);
@ -262,14 +239,7 @@
// === COLORS LINKS ==========================================================
// --heading-link-color: var(--fg-400);
// --heading-link-color-hover: var(--fg-200);
// --inline-link-color: var(--primary-500);
// --inline-link-color-hover: var(--primary-400);
// --inline-link-color-visited: var(--primary-600);
// --inline-link-color-border: 1px solid transparent;
// --inline-link-color-border-hover: 1px solid currentColor;
--heading-link-color-hover: var(--fg-500);
// === COLORS - BOOKMARKS ====================================================

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

@ -109,8 +109,9 @@
--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);
--caption-overlay-background: linear-gradient(0deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 40%) 70%, transparent);
--caption-overlay-color: #fff;
--caption-padding: .3rem .5rem .5rem;
--progress-bar-background: var(--navigation-background);
--progress-bar-color: var(--bg-200);

10
src/scss/customize/card-style-combined.scss
View File

@ -1,6 +1,16 @@
@import '../common/_functions';
@import '../common/_mixins';
:root, :root[data-theme=base] {
--card-footer-color: var(--fg-700);
--card-footer-icon-color: var(--fg-900);
}
:root[data-mode=light] {
--card-footer-color: var(--fg-700);
--card-footer-icon-color: var(--fg-800);
}
.card._combined {
--card-style-border-width: 0;

10
src/scss/customize/card-style-unfolded-combined.scss
View File

@ -1,6 +1,16 @@
@import '../common/_functions';
@import '../common/_mixins';
:root, :root[data-theme=base] {
--card-footer-color: var(--fg-600);
--card-footer-icon-color: var(--fg-800);
}
:root[data-mode=light] {
--card-footer-icon-color: var(--fg-700);
--card-style-border-color: var(--bg-400);
}
.card:where(._unfolded, ._combined) {
&:is(._small, ._article) .card__body > .card__footer {
margin-top: 0;

2
src/scss/editor.scss
View File

@ -61,7 +61,7 @@ body {
sup[data-fn] {
display: inline-block;
font-weight: 700;
font-weight: 500;
padding-left: .15em;
a {