eric/twtxt-lib
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update color theme in demo.

Browse Source 
save current theme preference to localstorage.
update to v0.10.0.
This commit is contained in:
Eric Woodward
2026-03-30 23:53:20 -04:00
parent c776b5df6a
commit ed9bd8ac34
9 changed files with 92 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
public/demo/styles.css
View File

@@ -11,6 +11,7 @@
--link-active: lch(from var(--main-link) calc(l + 20) c h);
--gray-light: #5F758E;
--gray-dark: #404f60;
}
@keyframes riseInDetails {
@@ -59,9 +60,10 @@ a:active {
}
a:hover {
background-color: var(--link-active);
border-color: var(--link-active);
border-radius: .5rem;
color: var(--link-active);
color: var(--bg-main);
}
button {
@@ -77,6 +79,7 @@ code {
}
details figure {
background-color: transparent;
margin: 1rem .5rem;
}
@@ -141,6 +144,8 @@ textarea {
summary {
cursor: pointer;
}
/** Classes */
.code-cmd {
color: var(--gray-light);
@@ -218,6 +223,10 @@ summary {
padding: 0;
}
.tab:target .tab-link {
background-color: var(--bg-main);
}
.tab:target .tab-panel {
display: block;
}
@@ -226,10 +235,6 @@ body:not(:has(:target)) #tabOverview-panel {
display: block;
}
.tab:target .tab-link {
background: linear-gradient(var(--bg-dark), var(--bg-main));
}
.tab:target + .tab {
margin-top: auto;
}
@@ -317,7 +322,7 @@ body:not(:has(:target)) #tabOverview-link {
}
.tab-link {
background-color: transparent;;
background-color: transparent;
border: 2px solid var(--fg-main);
border-bottom-color: transparent;
margin-top: -4.5rem;
@@ -358,15 +363,15 @@ body:not(:has(:target)) #tabOverview-link {
}
.tab:target .tab-link {
background-color: var(--bg-main);
border-bottom: 0;
font-size: 1.2rem;
margin-top: -4.55rem;
}
.tab:target .tab-link:hover {
background-color: var(--link-active);
border-radius: .5rem .5rem 0 0;
background-color: var(--bg-dark);
color: var(--main-link);
font-size: 1.2rem;
margin-top: -4.55rem;
}
@@ -411,19 +416,27 @@ body.invertedTheme {
color: var(--bg-main);
}
body.invertedTheme a {
color: var(--gray-dark);
}
body.invertedTheme a:hover {
background-color: var(--main-link);
background-color: var(--bg-dark);
border-color: var(--bg-dark);
color: var(--fg-main);
}
body.invertedTheme code {
background-color: var(--bg-light);
color: var(--bg-main);
}
body.invertedTheme figcaption {
border-color: var(--bg-main);
}
body.invertedTheme figure {
background-color: var(--gray-light);
background-color: transparent;
border-color: var(--bg-main);
}
@@ -442,27 +455,33 @@ body.invertedTheme .code-cmd {
color: var(--bg-dark);
}
body.invertedTheme .code-cmnt {
color: var(--bg-dark);
}
body.invertedTheme .code-str {
color: var(--bg-dark);
}
body.invertedTheme .tab-link {
color: var(--bg-dark);
background-color: var(--fg-main);
border-color: var(--bg-main);
}
body.invertedTheme .tab:target .tab-link {
background: linear-gradient(var(--link-active), var(--fg-main));
}
body.invertedTheme .tab-link:hover {
background-color: var(--main-link);
background-color: var(--bg-dark);
border-color: var(--bg-dark);
}
body.invertedTheme .tab:target .tab-link {
background-color: var(--fg-main);
border-color: var(--bg-main);
border-color: var(--bg-main);
}
body.invertedTheme .tab:target .tab-link:hover {
background-color: var(--bg-dark);
}
body.invertedTheme .tab-panel {