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

Color refactoring part 9

Browse Source
This commit is contained in:
Tetrakern 2024-02-25 15:08:35 +01:00
parent a4f8f5aa98
commit 838649bfc9
25 changed files with 131 additions and 115 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/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/customize/footer-style-isolated.css
View File

@ -1 +1 @@
.footer._footer-isolated{--layout-link-hover: var(--fg-d200);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-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)}

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/story.css
View File

File diff suppressed because one or more lines are too long

2
css/taxonomies.css
View File

@ -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: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} .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-700);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}

2
src/scss/_recommendation.scss
View File

@ -42,7 +42,7 @@
} }
:is(i, .icon) { :is(i, .icon) {
color: var(--fg-600); color: var(--fg-600); // Done
margin-right: .5rem; margin-right: .5rem;
} }
} }

32
src/scss/_search.scss
View File

@ -6,7 +6,11 @@
.search-form[data-advanced="true"] { .search-form[data-advanced="true"] {
.search-form__bar .search-form__advanced-toggle { .search-form__bar .search-form__advanced-toggle {
color: var(--fg-600); color: var(--fg-500); // Done
&:hover {
color: var(--fg-300); // Done
}
} }
.search-form__current { .search-form__current {
@ -39,15 +43,11 @@
} }
&__current { &__current {
color: var(--fg-900); color: var(--fg-800); // Done
font-size: 11px; font-size: 11px;
line-height: 1.5; line-height: 1.5;
padding: 6px 2px 0; padding: 6px 2px 0;
&:not(:has(button)) {
display: none;
}
button { button {
color: currentColor; color: currentColor;
font-size: inherit; font-size: inherit;
@ -56,29 +56,27 @@
transition: color var(--transition-duration); transition: color var(--transition-duration);
&:hover { &:hover {
color: var(--fg-500); color: var(--fg-400); // Done
} }
} }
> :not(:last-child) { > :not(:last-child) {
&::after { &::after {
content: "\2022"; content: "\2022";
color: var(--fg-900); color: var(--fg-900); // Done
padding: 0 2px 0 6px; padding: 0 2px 0 6px;
} }
} }
} }
&__submit:is(button) { &__submit:is(button) {
--button-primary-background: transparent;
--button-primary-background-hover: transparent;
--button-primary-color: var(--fg-900); // Done
--button-primary-color-hover: var(--fg-400); // Done
display: grid; display: grid;
place-content: center; place-content: center;
background: transparent !important;
color: var(--fg-900) !important;
width: 32px; width: 32px;
&:hover {
color: var(--fg-500) !important;
}
} }
&__select-group { &__select-group {
@ -159,13 +157,13 @@
&-toggle { &-toggle {
display: grid; display: grid;
place-content: center; place-content: center;
color: var(--fg-900); color: var(--fg-700); // Done
font-size: 11px; font-size: 11px;
height: 32px; height: 32px;
transition: color var(--transition-duration); transition: color var(--transition-duration);
&:hover { &:hover {
color: var(--fg-600); color: var(--fg-400); // Done
} }
} }
@ -197,10 +195,10 @@
margin-top: 2rem; margin-top: 2rem;
&:is(._no-results, ._no-params) { &:is(._no-results, ._no-params) {
color: var(--fg-950); // Done
font: var(--font-weight-strong) var(--fs-ds)/1.5 var(--ff-note); font: var(--font-weight-strong) var(--fs-ds)/1.5 var(--ff-note);
text-align: center; text-align: center;
overflow-wrap: break-word; overflow-wrap: break-word;
opacity: 0.25;
} }
} }
} }

4
src/scss/_singular.scss
View File

@ -40,7 +40,7 @@
&-count { &-count {
flex-shrink: 0; flex-shrink: 0;
color: var(--fg-700); color: var(--fg-800); // Done
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
} }
@ -49,7 +49,7 @@
} }
&-description { &-description {
color: var(--fg-700); color: var(--fg-700); // Done
} }
} }
} }

2
src/scss/_socialmedia.scss
View File

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

2
src/scss/_statistics.scss
View File

@ -6,7 +6,7 @@
&__inline-stat { &__inline-stat {
flex: 1 1 auto; flex: 1 1 auto;
background: var(--infobox-background); background: var(--infobox-background);
color: var(--fg-600); color: var(--fg-600); // Done
font-family: var(--ff-note); font-family: var(--ff-note);
font-size: var(--fs-xs); font-size: var(--fs-xs);
text-shadow: none; text-shadow: none;

34
src/scss/_story.scss
View File

@ -167,7 +167,7 @@ $header_breakpoint: 640px;
&-meta { &-meta {
display: block; display: block;
color: var(--fg-600); color: var(--fg-600); // Done
font-size: var(--fs-xs); font-size: var(--fs-xs);
font-style: italic; font-style: italic;
line-height: 1.3; line-height: 1.3;
@ -186,7 +186,7 @@ $header_breakpoint: 640px;
} }
&__copyright-notice { &__copyright-notice {
color: var(--fg-800); color: var(--fg-800); // Done
font-size: var(--fs-xxs); font-size: var(--fs-xxs);
font-style: italic; font-style: italic;
margin-top: 1.5rem; margin-top: 1.5rem;
@ -275,7 +275,7 @@ $header_breakpoint: 640px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
color: var(--fg-800); color: var(--fg-700); // Done
font-size: var(--fs-dxs); font-size: var(--fs-dxs);
font-weight: var(--font-weight-semi-strong); font-weight: var(--font-weight-semi-strong);
padding: 0 6px; padding: 0 6px;
@ -299,7 +299,7 @@ $header_breakpoint: 640px;
&__folding-toggle { &__folding-toggle {
display: block; display: block;
content-visibility: visible; content-visibility: visible;
color: var(--fg-900); color: var(--fg-800); // Done
line-height: 1.125; line-height: 1.125;
text-align: center; text-align: center;
padding: 1.125rem 0; padding: 1.125rem 0;
@ -307,7 +307,7 @@ $header_breakpoint: 640px;
transition: color var(--transition-duration); transition: color var(--transition-duration);
&:hover { &:hover {
color: var(--fg-700); color: var(--fg-400); // Done
} }
} }
} }
@ -325,14 +325,14 @@ $header_breakpoint: 640px;
cursor: pointer; cursor: pointer;
display: grid; display: grid;
place-content: center; place-content: center;
color: var(--fg-600); color: var(--fg-600); // Done
font-size: var(--fs-ds); font-size: var(--fs-ds);
height: 2.25rem; height: 2.25rem;
width: 1.5rem; width: 1.5rem;
transition: opacity var(--transition-duration); transition: opacity var(--transition-duration);
&:not(:hover) { &:not(:hover) {
opacity: 0.15; opacity: 0.3;
} }
} }
@ -341,7 +341,7 @@ $header_breakpoint: 640px;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
color: var(--fg-600); color: var(--fg-600); // Done
font-family: var(--ff-note); font-family: var(--ff-note);
font-size: var(--fs-ds); // 14px (desktop) to 13px (mobile) font-size: var(--fs-ds); // 14px (desktop) to 13px (mobile)
line-height: 1.75rem; line-height: 1.75rem;
@ -355,7 +355,7 @@ $header_breakpoint: 640px;
&:not(.checkmark)::before { &:not(.checkmark)::before {
content: unicode("2022"); content: unicode("2022");
color: var(--fg-800); color: var(--fg-800); // Done
font-family: var(--ff-base); font-family: var(--ff-base);
padding: 0 .25rem 0 .35rem; padding: 0 .25rem 0 .35rem;
@ -366,13 +366,13 @@ $header_breakpoint: 640px;
} }
button.checkmark { button.checkmark {
color: var(--fg-600); color: var(--checkmark-checked); // Done
font-size: 18px; font-size: 18px;
padding: 0 4px; padding: 0 4px;
margin: 0 0 0 1.25rem; margin: 0 0 0 1.25rem;
&:not(.marked) { &:not(.marked) {
color: var(--checkmark-not-checked); color: var(--checkmark-not-checked); // Done
text-shadow: none; text-shadow: none;
} }
} }
@ -380,7 +380,7 @@ $header_breakpoint: 640px;
> :is(span, label) { > :is(span, label) {
:is(i, .icon) { :is(i, .icon) {
display: none; display: none;
color: var(--fg-800); color: var(--fg-800); // Done
margin-right: .25rem; margin-right: .25rem;
@include bp(640px) { @include bp(640px) {
@ -393,7 +393,7 @@ $header_breakpoint: 640px;
.icon-password { .icon-password {
&.grid-view { &.grid-view {
grid-area: 1/3/2/4; grid-area: 1/3/2/4;
color: var(--fg-600); color: var(--fg-700); // Done
text-align: right; text-align: right;
} }
} }
@ -423,12 +423,16 @@ $header_breakpoint: 640px;
} }
&-title { &-title {
color: var(--fg-400); color: var(--heading-link-color); // Done
font-weight: var(--font-weight-strong); font-weight: var(--font-weight-strong);
&:hover {
color: var(--heading-link-color-hover); // Done
}
} }
&-content { &-content {
color: var(--fg-600); color: var(--fg-600); // Done
} }
} }

4
src/scss/_suggestions.scss
View File

@ -40,7 +40,7 @@
&::before { &::before {
z-index: 1; z-index: 1;
border: 1px dashed var(--fg-900); border: 1px dashed var(--fg-900); // Done
} }
} }
@ -73,7 +73,7 @@
} }
&__text { &__text {
color: var(--fg-700); color: var(--fg-700); // Done
padding: 8px; padding: 8px;
border-radius: 2px; border-radius: 2px;
white-space: pre-wrap; white-space: pre-wrap;

2
src/scss/_tax-cloud.scss
View File

@ -23,7 +23,7 @@
} }
&__tax-description { &__tax-description {
color: var(--fg-800); color: var(--fg-700); // Done
font-size: var(--fs-xxs); font-size: var(--fs-xxs);
font-style: italic; font-style: italic;
line-height: 1.5; line-height: 1.5;

56
src/scss/comments.scss
View File

@ -46,7 +46,7 @@
margin: 16px 0 24px; margin: 16px 0 24px;
&__must-login { &__must-login {
color: var(--fg-900); color: var(--fg-800); // Done
font-size: var(--fs-xs); font-size: var(--fs-xs);
text-align: center; text-align: center;
@ -55,7 +55,7 @@
transition: color var(--transition-duration); transition: color var(--transition-duration);
&:hover { &:hover {
color: var(--fg-800); color: var(--fg-400); // Done
} }
} }
} }
@ -105,7 +105,7 @@
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--fg-900); color: var(--fg-800); // Done
font-size: 13px; font-size: 13px;
height: 32px; height: 32px;
} }
@ -113,7 +113,7 @@
.right { .right {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
color: var(--fg-800); color: var(--fg-800); // Done
font-size: 14px; font-size: 14px;
margin: 0 -4px; margin: 0 -4px;
} }
@ -123,6 +123,10 @@
place-content: center; place-content: center;
height: 32px; height: 32px;
width: 32px; width: 32px;
&:hover {
color: var(--fg-400); // Done
}
} }
} }
@ -191,14 +195,14 @@
} }
.private-comment-notice { .private-comment-notice {
color: var(--fg-800); color: var(--fg-700); // Done
} }
&__checkbox-label-pair { &__checkbox-label-pair {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: var(--fg-700); color: var(--fg-600); // Done
font-size: 13px; font-size: 13px;
line-height: 1.3; line-height: 1.3;
height: 32px; height: 32px;
@ -253,7 +257,6 @@
} }
&__title { &__title {
color: var(--fg-600);
font-size: var(--fs-m); font-size: var(--fs-m);
line-height: 1; line-height: 1;
text-transform: uppercase; text-transform: uppercase;
@ -262,13 +265,13 @@
} }
&__notice { &__notice {
color: var(--fg-900); color: var(--fg-800); // Done
font-size: 13px; font-size: 13px;
padding-top: 8px; padding-top: 8px;
} }
&__disabled { &__disabled {
color: var(--fg-900); color: var(--fg-800); // Done
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
margin-top: 40px; margin-top: 40px;
@ -351,7 +354,7 @@
} }
&._unapproved > .fictioneer-comment__container { &._unapproved > .fictioneer-comment__container {
color: var(--fg-700); color: var(--fg-800); // Done
:is([data-action=unapprove], .fictioneer-comment__actions) { :is([data-action=unapprove], .fictioneer-comment__actions) {
display: none; display: none;
@ -386,7 +389,7 @@
position: absolute; position: absolute;
top: -7px; top: -7px;
right: 6px; right: 6px;
color: var(--fg-700); color: var(--fg-600); // Done
transform: rotate(30deg); transform: rotate(30deg);
} }
} }
@ -503,7 +506,7 @@
} }
&__info { &__info {
color: var(--fg-700); color: var(--fg-700); // Done
font-size: 11px; font-size: 11px;
font-style: italic; font-style: italic;
line-height: 1.3; line-height: 1.3;
@ -513,16 +516,16 @@
&__in-moderation, &__in-moderation,
&__hidden-notice { &__hidden-notice {
color: var(--fg-900); color: var(--fg-900); // Done
font-size: var(--fs-xs); font-size: var(--fs-xs);
font-style: italic; font-style: italic;
} }
&__in-moderation { &__in-moderation {
color: var(--fg-700); color: var(--fg-700); // Done
:is(i, .icon) { :is(i, .icon) {
color: var(--fg-800); color: var(--fg-800); // Done
} }
} }
@ -547,7 +550,7 @@
} }
&__edit-note { &__edit-note {
color: var(--fg-700); color: var(--fg-900); // Done
font-size: var(--fs-xxs); font-size: var(--fs-xxs);
font-style: italic; font-style: italic;
margin-top: 16px; margin-top: 16px;
@ -623,7 +626,7 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
color: var(--fg-700); color: var(--fg-700); // Done
font-size: var(--fs-xs); font-size: var(--fs-xs);
line-height: 18px; line-height: 18px;
margin-top: 1rem; margin-top: 1rem;
@ -665,11 +668,12 @@
} }
.comment-quick-button { .comment-quick-button {
color: var(--fg-600); // Done
padding: 0 2px; padding: 0 2px;
transition: opacity var(--transition-duration); transition: opacity var(--transition-duration);
&:not(:hover, :focus-visible, .fictioneer-report-comment-button, .popup-menu-toggle) { &:not(:hover, :focus-visible, .fictioneer-report-comment-button, .popup-menu-toggle) {
opacity: .2; opacity: .3;
} }
} }
@ -688,11 +692,11 @@
.fictioneer-report-comment-button { .fictioneer-report-comment-button {
&:not(:hover, :focus-visible, .on) { &:not(:hover, :focus-visible, .on) {
opacity: .2; opacity: .3;
} }
&.on { &.on {
color: var(--red-400); color: var(--red-400); // Done
} }
} }
@ -706,6 +710,12 @@
} }
.comment-reply-link { .comment-reply-link {
color: var(--fg-700); // Done
&:hover {
color: var(--fg-400); // Done
}
i { i {
transform: translateY(-1px) scale(-1); transform: translateY(-1px) scale(-1);
} }
@ -738,12 +748,6 @@
} }
} }
.comment-ajax-error {
color: var(--fg-800);
font-size: var(--fs-xs);
text-align: center;
}
.comments-skeleton { .comments-skeleton {
--hr-border-color: var(--skeleton-shape-color); --hr-border-color: var(--skeleton-shape-color);
opacity: .5; opacity: .5;

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

@ -36,7 +36,7 @@
.main { .main {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
color: var(--fg-500); color: var(--fg-500); // Done
max-width: var(--site-width); max-width: var(--site-width);
width: 100%; width: 100%;
@ -253,7 +253,7 @@ button[type=submit]:where(:not(._inline)) {
.infobox { .infobox {
background: var(--infobox-background); background: var(--infobox-background);
color: var(--fg-600); color: var(--fg-600); // Done
border-radius: var(--layout-border-radius-small); border-radius: var(--layout-border-radius-small);
padding: 1rem; padding: 1rem;
} }
@ -320,10 +320,11 @@ button[type=submit]:where(:not(._inline)) {
&._inline { &._inline {
display: inline-block; display: inline-block;
color: var(--tag-inline-color);
font: var(--font-weight-medium) var(--fs-dxs)/1.5 var(--ff-base); font: var(--font-weight-medium) var(--fs-dxs)/1.5 var(--ff-base);
&:not(:hover) { &:hover {
color: var(--fg-600); color: var(--tag-inline-color-hover);
} }
} }
} }
@ -549,7 +550,7 @@ button[type=submit]:where(:not(._inline)) {
} }
.no-results { .no-results {
color: var(--fg-900); color: var(--fg-950); // Done
padding: 0 2px; padding: 0 2px;
} }
@ -592,7 +593,7 @@ html:not(.logged-in) body:not(.logged-in) {
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 12px;
background: none; background: none;
color: var(--fg-800); color: var(--fg-700); // Done
font-size: var(--fs-dxs); font-size: var(--fs-dxs);
font-weight: var(--font-weight-semi-strong); font-weight: var(--font-weight-semi-strong);
letter-spacing: calc(0.02em + var(--font-letter-spacing-base)); letter-spacing: calc(0.02em + var(--font-letter-spacing-base));
@ -630,7 +631,7 @@ html:not(.logged-in) body:not(.logged-in) {
&-icon { &-icon {
grid-area: 1 / 1 / 3 / 2; grid-area: 1 / 1 / 3 / 2;
color: var(--fg-600); color: var(--fg-600); // Done
font-size: var(--fs-s); font-size: var(--fs-s);
text-align: center; text-align: center;
content-visibility: auto; content-visibility: auto;
@ -658,19 +659,19 @@ html:not(.logged-in) body:not(.logged-in) {
&-subrow { &-subrow {
grid-area: 2 / 2 / 3 / 3; grid-area: 2 / 2 / 3 / 3;
color: var(--fg-700); color: var(--fg-600); // Done
font: var(--font-weight-normal) var(--fs-xxs)/1.2 var(--ff-note); font: var(--font-weight-normal) var(--fs-xxs)/1.2 var(--ff-note);
> :is(span, time):not(:last-child)::after { > :is(span, time):not(:last-child)::after {
content: " •"; content: " •";
color: var(--fg-800); color: var(--fg-800); // Done
font-family: var(--ff-base); font-family: var(--ff-base);
margin: 0 0.125em; margin: 0 0.125em;
} }
} }
&-protected { &-protected {
color: var(--fg-800); color: var(--fg-800); // Done
font-size: 0.8em; font-size: 0.8em;
margin-right: 0.5em; margin-right: 0.5em;
transform: translateY(-0.125em); transform: translateY(-0.125em);
@ -678,28 +679,28 @@ html:not(.logged-in) body:not(.logged-in) {
} }
&-warning { &-warning {
color: var(--red-400); color: var(--red-400); // Done
} }
.checkmark { .checkmark {
--focus-offset: 2px; --focus-offset: 2px;
grid-area: 1 / 3 / 3 / 4; grid-area: 1 / 3 / 3 / 4;
display: block; display: block;
color: var(--fg-600); color: var(--checkmark-checked); // Done
font-size: 18px; font-size: 18px;
line-height: 1; line-height: 1;
padding: 0 4px; padding: 0 4px;
margin-right: -4px; margin-right: -4px;
&:not(.marked) { &:not(.marked) {
color: var(--checkmark-not-checked); color: var(--checkmark-not-checked); // Done
text-shadow: none; text-shadow: none;
} }
} }
&._empty { &._empty {
display: block; display: block;
color: var(--fg-900); color: var(--fg-900); // Done
text-align: center; text-align: center;
padding: .875rem 8px .875rem 2px; padding: .875rem 8px .875rem 2px;
} }
@ -712,7 +713,7 @@ html:not(.logged-in) body:not(.logged-in) {
align-items: flex-start; align-items: flex-start;
gap: .5rem; gap: .5rem;
background: var(--infobox-background); background: var(--infobox-background);
color: var(--fg-600); color: var(--fg-600); // Done
font-size: var(--fs-xs); font-size: var(--fs-xs);
font-weight: 400; font-weight: 400;
line-height: 1.3; line-height: 1.3;
@ -751,14 +752,14 @@ html:not(.logged-in) body:not(.logged-in) {
.list-button { .list-button {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
color: var(--fg-900); color: var(--fg-900); // Done
font-size: var(--fs-s); font-size: var(--fs-s);
line-height: 1; line-height: 1;
padding: 5px 6px 4px; padding: 5px 6px 4px;
transition: color var(--transition-duration), opacity var(--transition-duration); transition: color var(--transition-duration), opacity var(--transition-duration);
&:hover { &:hover {
color: var(--fg-400); color: var(--fg-400); // Done
} }
&._on { &._on {

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

@ -1,7 +1,7 @@
:is(h1, h2, h3, h4, h5, h6) { :is(h1, h2, h3, h4, h5, h6) {
--font-weight-strong: var(--font-weight-heading); --font-weight-strong: var(--font-weight-heading);
display: block; display: block;
color: var(--fg-400); color: var(--fg-400); // Done
font: var(--font-weight-heading) 1em/1.3 var(--ff-heading); font: var(--font-weight-heading) 1em/1.3 var(--ff-heading);
} }
@ -245,7 +245,7 @@ p a,
:where(.list, ul.block-list) { :where(.list, ul.block-list) {
li::marker { li::marker {
color: var(--list-marker-color, var(--fg-700)); // Done color: var(--list-marker-color, var(--fg-600)); // Done
} }
} }
@ -267,7 +267,7 @@ p a,
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
color: var(--fg-600); color: var(--fg-600); // Done
font-size: var(--fs-xs); font-size: var(--fs-xs);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
text-align: center; text-align: center;
@ -277,7 +277,7 @@ p a,
transition: color var(--transition-duration); transition: color var(--transition-duration);
&:hover { &:hover {
color: var(--fg-400); color: var(--fg-400); // Done
} }
} }

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

@ -210,7 +210,7 @@ input[type=radio] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: var(--fg-700); color: var(--fg-600); // Done
font-size: 13px; font-size: 13px;
line-height: 1.3; line-height: 1.3;
padding: 1px; padding: 1px;
@ -225,7 +225,7 @@ input[type=radio] {
.keyword-input__track::before { .keyword-input__track::before {
content: attr(data-hint); content: attr(data-hint);
position: absolute; position: absolute;
color: var(--fg-900); color: var(--input-placeholder-color);
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
padding: 4px 0 4px 0; padding: 4px 0 4px 0;
@ -240,7 +240,7 @@ input[type=radio] {
display: grid; display: grid;
place-content: center; place-content: center;
background: var(--input-background); background: var(--input-background);
color: var(--fg-900); color: var(--fg-800); // Done
font-family: var(--ff-input); font-family: var(--ff-input);
font-size: 11px; font-size: 11px;
font-weight: 400; font-weight: 400;
@ -250,6 +250,10 @@ input[type=radio] {
width: 40px; width: 40px;
transform: translateY(-100%); transform: translateY(-100%);
&:hover {
color: var(--fg-400); // Done
}
.on { .on {
display: none; display: none;
} }
@ -336,7 +340,7 @@ input[type=radio] {
&__tab-suggestion { &__tab-suggestion {
pointer-events: none; pointer-events: none;
grid-area: a; grid-area: a;
color: var(--fg-900); color: var(--fg-950); // Done
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
letter-spacing: 0; letter-spacing: 0;
@ -346,21 +350,21 @@ input[type=radio] {
&__hints, &__hints,
&__no-suggestions, &__no-suggestions,
&__suggestion-list { &__suggestion-list {
color: var(--fg-900); color: var(--fg-700); // Done
font-size: 11px; font-size: 11px;
line-height: 2; line-height: 2;
margin: 4px 0 0 2px; margin: 4px 0 0 2px;
} }
&__suggestion { &__suggestion {
color: var(--fg-900); color: var(--fg-700); // Done
font-size: 11px; font-size: 11px;
line-height: 2; line-height: 2;
margin-right: 12px; margin-right: 12px;
transition: color var(--transition-duration); transition: color var(--transition-duration);
&:is(button):hover { &:is(button):hover {
color: var(--fg-500); color: var(--fg-400); // Done
} }
} }
} }

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

@ -38,7 +38,7 @@
top: 0; top: 0;
right: 0; right: 0;
display: block; display: block;
color: var(--fg-950); color: var(--fg-950); // Done
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
padding: 9px 12px 8px 16px; padding: 9px 12px 8px 16px;
@ -46,7 +46,7 @@
transition: color var(--transition-duration); transition: color var(--transition-duration);
&:hover { &:hover {
color: var(--fg-300); color: var(--fg-300); // Done
} }
} }
@ -96,7 +96,7 @@
} }
&__header:is(h4) { &__header:is(h4) {
color: var(--fg-400); color: var(--fg-400); // Done
font-size: 16px; font-size: 16px;
line-height: 1; line-height: 1;
text-transform: uppercase; text-transform: uppercase;
@ -108,7 +108,7 @@
&__horizontal-input-group { &__horizontal-input-group {
> :is(i, .icon) { > :is(i, .icon) {
flex-shrink: 0; flex-shrink: 0;
color: var(--fg-600); color: var(--fg-600); // Done
text-align: center; text-align: center;
min-width: 26px; min-width: 26px;
} }
@ -205,7 +205,7 @@
blockquote { blockquote {
background: var(--blockquote-background); background: var(--blockquote-background);
border-left: 2px solid var(--fg-600); border-left: 2px solid var(--fg-600); // Done
border-radius: var(--layout-border-radius-small); border-radius: var(--layout-border-radius-small);
padding: .34rem .5em; padding: .34rem .5em;
margin-bottom: .5rem; margin-bottom: .5rem;

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

@ -120,6 +120,7 @@
--kbd-background: var(--bg-900); --kbd-background: var(--bg-900);
--infobox-background: var(--bg-900); --infobox-background: var(--bg-900);
--text-shadow: -1px -1px 1px rgb(0 0 0 / 12%); --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-950);
--tax-cloud-current: var(--primary-500); --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); --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);
@ -320,6 +321,7 @@
// === FOOTER ================================================================ // === FOOTER ================================================================
--fg-isolated-footer: var(--fg-700); --fg-isolated-footer: var(--fg-700);
--fg-isolated-footer-hover: var(--fg-300);
--bg-isolated-footer: var(--bg-950); --bg-isolated-footer: var(--bg-950);
// === MODALS ================================================================ // === MODALS ================================================================
@ -481,7 +483,7 @@
// === INPUTS ================================================================ // === INPUTS ================================================================
--input-placeholder-color: var(--bg-300); --input-placeholder-color: var(--fg-950);
--input-background: rgb(0 0 0 / 30%); // Fallback --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-900), 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-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);
@ -613,6 +615,9 @@
--tag-secondary-border: .5px solid var(--bg-300); --tag-secondary-border: .5px solid var(--bg-300);
--tag-secondary-border-hover: .5px solid transparent; // Uses background --tag-secondary-border-hover: .5px solid transparent; // Uses background
--tag-inline-color: var(--fg-700);
--tag-inline-color-hover: var(--fg-400);
--tag-warning-background: rgb(246 96 85 / 5%); // Fallback --tag-warning-background: rgb(246 96 85 / 5%); // Fallback
--tag-warning-background: color-mix(in srgb, var(--red-500), transparent 90%); --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: rgb(246 96 85 / 50%); // Fallback

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

@ -43,7 +43,7 @@ input:is([type=checkbox], [type=radio], [type=range], [type=submit]):focus-visib
body { body {
background-color: var(--body-bg-color); background-color: var(--body-bg-color);
color: var(--fg-500); // CHECK color: var(--fg-500); // Done
font: var(--font-weight-normal) var(--fs-s)/var(--font-line-height-base) var(--ff-base); font: var(--font-weight-normal) var(--fs-s)/var(--font-line-height-base) var(--ff-base);
letter-spacing: var(--font-letter-spacing-base); letter-spacing: var(--font-letter-spacing-base);
-webkit-font-smoothing: var(--font-smoothing-webkit); -webkit-font-smoothing: var(--font-smoothing-webkit);
@ -169,7 +169,7 @@ video {
acronym, acronym,
abbr { abbr {
cursor: help; cursor: help;
text-decoration: underline var(--fg-900) dotted 1px; text-decoration: underline var(--fg-900) dotted 1px; // Done
text-underline-offset: 0.125em; text-underline-offset: 0.125em;
} }
@ -183,7 +183,7 @@ kbd {
white-space: nowrap; white-space: nowrap;
padding: 0 0.375em; padding: 0 0.375em;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 0 1px var(--fg-500), 0 1px 1px rgb(0 0 0 / 20%); box-shadow: 0 0 1px var(--fg-500), 0 1px 1px rgb(0 0 0 / 20%); // Done
transform: translateY(-1px); transform: translateY(-1px);
} }

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

@ -259,7 +259,7 @@ body:not(.is-editor):not(.is-admin) {
} }
.separator-dot { .separator-dot {
color: var(--fg-800); color: var(--fg-800); // Done
font-family: var(--ff-base); font-family: var(--ff-base);
} }

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

@ -2,9 +2,9 @@
@import '../common/_mixins'; @import '../common/_mixins';
.footer._footer-isolated { .footer._footer-isolated {
--layout-link-hover: var(--fg-d200); --layout-link-color-hover: var(--fg-isolated-footer-hover); // Done
background-color: var(--bg-isolated-footer); background-color: var(--bg-isolated-footer);
color: var(--fg-isolated-footer); color: var(--fg-isolated-footer); // Done
margin-top: 3rem; margin-top: 3rem;
.footer__wrapper { .footer__wrapper {
@ -12,6 +12,6 @@
} }
.breadcrumbs { .breadcrumbs {
color: var(--fg-isolated-footer); color: var(--fg-isolated-footer); // Done
} }
} }