cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: refine dark theme declarations + search ui

Browse source
This commit is contained in:
Cory Dransfeldt 2024-01-07 10:38:03 -08:00
parent 00b501d185
commit caa49cf69e
No known key found for this signature in database
12 changed files with 172 additions and 239 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/assets/styles/widgets/forms.css
View file

@ -2,15 +2,19 @@ input[type="text"],
input[type="email"],
input[type="search"],
textarea {
color: var(--black);
background-color: var(--white);
width: 100%;
border: 1px solid var(--blue-600);
/* necessary for pagefind overrides */
font-family: var(--font-sans) !important;
color: var(--text-color) !important;
background-color: var(--background-color) !important;
border: 1px solid var(--accent-color) !important;
padding: .5rem !important;
font-size: var(--font-size-base) !important;
width: 100% !important;
/* necessary for pagefind overrides */
outline: none;
padding: .5rem;
margin-bottom: 1.5rem;
font-weight: 400 !important;
font-size: var(--font-size-base);
line-height: var(--line-height-base);
transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out);
@ -21,15 +25,5 @@ input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"],
textarea:focus {
border: 1px solid var(--blue-800);
}
@media (prefers-color-scheme: dark) {
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
color: var(--white);
background-color: var(--black);
}
border: 1px solid var(--accent-color-hover) !important;
}

22
src/assets/styles/widgets/media-grid.css
View file

@ -24,7 +24,7 @@
position: relative;
height: 100%;
width: 100%;
border: 1px solid var(--blue-600);
border: 1px solid var(--accent-color);
border-radius: var(--rounded-lg);
overflow: hidden;
transition-property: border-color;
@ -32,8 +32,10 @@
transition-duration: 300ms;
}
.media__grid .item__wrapper:hover {
border-color: var(--blue-800)
.media__grid .item__wrapper:hover,
.media__grid .item__wrapper:focus,
.media__grid .item__wrapper:active {
border-color: var(--accent-color-hover)
}
.media__grid .item__cover {
@ -58,7 +60,7 @@
.media__grid .item__meta-text .header,
.media__grid .item__meta-text .subheader {
color: var(--white);
color: var(--color-lightest);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
@ -82,16 +84,4 @@
.media__grid.vertical .item__wrapper {
max-width: 121px;
}
}
@media (prefers-color-scheme: dark) {
.media__grid .item__wrapper {
border-color: var(--blue-400);
}
.media__grid .item__wrapper:hover,
.media__grid .item__wrapper:focus,
.media__grid .item__wrapper:active {
border-color: var(--blue-200);
}
}

92
src/assets/styles/widgets/pagefind.css
View file

@ -1,9 +1,9 @@
body {
--pagefind-ui-primary: var(--blue-600);
--pagefind-ui-text: var(--black);
--pagefind-ui-background: var(--white);
--pagefind-ui-border: var(--gray-200);
--pagefind-ui-tag: var(--gray-200);
.pagefind-ui {
--pagefind-ui-primary: var(--accent-color);
--pagefind-ui-text: var(--text-color);
--pagefind-ui-background: var(--color-lightest);
--pagefind-ui-border: var(--gray-light);
--pagefind-ui-tag: var(--gray-light);
--pagefind-ui-border-width: 1px;
--pagefind-ui-border-radius: 0;
--pagefind-ui-image-border-radius: 0;
@ -11,12 +11,76 @@ body {
--pagefind-ui-font: var(--font-sans);
}
@media (prefers-color-scheme: dark) {
body {
--pagefind-ui-primary: var(--blue-400);
--pagefind-ui-text: var(--white);
--pagefind-ui-background: var(--black);
--pagefind-ui-border: var(--gray-900);
--pagefind-ui-tag: var(--gray-900);
}
.pagefind-ui,
.pagefind-ui__filter-name,
.pagefind-ui__filter-label,
.pagefind-ui__result-excerpt,
.pagefind-ui__message,
.pagefind-ui__button {
font-size: var(--font-size-base) !important;
}
.pagefind-ui__result-title {
color: var(--accent-color);
font-size: var(--font-size-2xl);
line-height: var(--line-height-2xl);
font-weight: 900;
text-decoration: none;
margin: 0;
transition-property: color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
.pagefind-ui__result-title:hover,
.pagefind-ui__result-title:focus,
.pagefind-ui__result-title:active {
color: var(--accent-color-hover);
}
:is(input[type="text"], input[type="search"]).pagefind-ui__search-input {
padding-left: 2.375rem !important;
}
.pagefind-ui__search-clear {
color: var(--text-color);
background-color: transparent !important;
}
.pagefind-ui__result-title {
margin-bottom: .25rem !important;
}
.pagefind-ui__result-link {
font-size: var(--font-size-2xl) !important;
color: var(--accent-color) !important;
text-decoration: none !important;
}
.pagefind-ui__result-link:hover,
.pagefind-ui__result-link:focus,
.pagefind-ui__result-link:active {
color: var(--accent-color-hover) !important;
}
.pagefind-ui__button {
color: var(--color-lightest) !important;
line-height: var(--line-height-base);
border-radius: var(--rounded-full) !important;
padding: .5rem 1rem !important;
margin: 0 .25rem .75rem 0;
cursor: pointer !important;
height: unset !important;
text-decoration: none;
background-color: var(--accent-color) !important;
transition-property: background-color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
.pagefind-ui__button:hover,
.pagefind-ui__button:active,
.pagefind-ui__button:focus {
color: var(--color-lightest) !important;
background-color: var(--accent-color-hover) !important;
}

14
src/assets/styles/widgets/paginator.css
View file

@ -9,22 +9,12 @@
}
.pagination button > svg {
stroke: var(--blue-600);
stroke: var(--accent-color);
cursor: pointer;
}
.pagination button.disabled > svg {
cursor: not-allowed;
stroke: color-mix(in srgb, var(--black), transparent 50%);
stroke: color-mix(in srgb, var(--text-color), transparent 50%);
stroke-width: var(--stroke-width-default);
}
@media (prefers-color-scheme: dark) {
.pagination button > svg {
stroke: var(--blue-400);
}
.pagination button.disabled > svg {
stroke: var(--white);
}
}

8
src/assets/styles/widgets/post-graph.css
View file

@ -11,7 +11,7 @@
}
.post-graph__progress {
background-color: var(--blue-600);
background-color: var(--accent-color);
height: 100%;
}
@ -22,10 +22,4 @@
.post-graph__progress,
.post-graph__data {
margin-left: .625rem;
}
@media (prefers-color-scheme: dark) {
.post-graph__progress {
background-color: var(--blue-400);
}
}

8
src/assets/styles/widgets/progress-bar.css
View file

@ -9,11 +9,5 @@
}
.progress-bar {
background-color: var(--blue-600);
}
@media (prefers-color-scheme: dark) {
.progress-bar {
background-color: var(--blue-400);
}
background-color: var(--accent-color);
}

42
src/assets/styles/widgets/webmentions.css
View file

@ -1,6 +1,6 @@
.webmentions {
border-top: 1px solid var(--gray-200);
border-bottom: 1px solid var(--gray-200);
border-top: 1px solid var(--gray-light);
border-bottom: 1px solid var(--gray-light);
margin-top: 1.5rem;
margin-bottom: 3.25rem;
padding-top: 1rem;
@ -31,8 +31,12 @@
}
.webmentions .interaction .avatar__wrapper:hover,
.webmentions .interaction .comment__wrapper:hover .avatar__wrapper {
border-color: var(--blue-800);
.webmentions .interaction .avatar__wrapper:focus,
.webmentions .interaction .avatar__wrapper:active,
.webmentions .interaction .comment__wrapper:hover .avatar__wrapper,
.webmentions .interaction .comment__wrapper:focus .avatar__wrapper
.webmentions .interaction .comment__wrapper:active .avatar__wrapper {
border-color: var(--accent-color-hover);
}
.webmentions .interaction .comment__wrapper--interior {
@ -44,7 +48,7 @@
}
.webmentions .interaction .comment__wrapper--interior .comment a {
color: var(--black);
color: var(--text-color);
text-decoration: none;
}
@ -75,13 +79,13 @@
}
.webmentions .interaction .avatar__wrapper {
background-color: var(--black);
border: 4px solid var(--background-color);
background-color: var(--background-color-inverted);
width: 3.5rem;
height: 3.5rem;
margin-bottom: 0;
overflow: hidden;
border-radius: var(--rounded-full);
border: 4px solid var(--white);
transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
@ -106,28 +110,4 @@
display: flex;
flex-direction: column;
align-items: center;
}
@media (prefers-color-scheme: dark) {
.webmentions .interaction .comment__wrapper--interior .comment a {
color: var(--white);
}
.webmentions {
border-color: var(--gray-900);
}
.webmentions .interaction .avatar__wrapper {
background-color: var(--white);
border-color: var(--black);
}
.webmentions .interaction .avatar__wrapper:hover,
.webmentions .interaction .avatar__wrapper:focus,
.webmentions .interaction .avatar__wrapper:active,
.webmentions .interaction .comment__wrapper:hover .avatar__wrapper,
.webmentions .interaction .comment__wrapper:focus .avatar__wrapper
.webmentions .interaction .comment__wrapper:active .avatar__wrapper {
border-color: var(--blue-200);
}
}