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

fix: music now playing fallback; organize styles

Browse source
This commit is contained in:
Cory Dransfeldt 2024-08-11 11:28:11 -07:00
parent d99186caee
commit 32c6bc3ba2
No known key found for this signature in database
5 changed files with 49 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/assets/styles/components/buttons.css
View file

@ -1,50 +1,5 @@
/* music - chart toggle styles */
#tracks-recent ~ .tracks-recent,
#tracks-window ~ .tracks-window {
display: none;
}
@import url('./tab-buttons.css');
#tracks-recent:checked ~ .tracks-recent,
#tracks-window:checked ~ .tracks-window {
display: block;
}
input[id="tracks-recent"] ~ [for="tracks-recent"],
input[id="tracks-window"] ~ [for="tracks-window"] {
margin-bottom: var(--sizing-lg);
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
#tracks-window:not(:checked) ~ [for="tracks-window"]:hover,
#tracks-window:not(:checked) ~ [for="tracks-window"]:active {
color: var(--accent-color-hover);
background: transparent;
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus,
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus-within,
#tracks-window:not(:checked) ~ [for="tracks-window"]:focus,
#tracks-window:not(:checked) ~ [for="tracks-window"]:focus-within {
transition-property: none;
outline: 2px dashed var(--accent-color);
border: 0;
}
#tracks-recent:checked ~ [for="tracks-recent"],
#tracks-window:checked ~ [for="tracks-window"] {
cursor: not-allowed;
border-color: var(--accent-color);
background-color: var(--accent-color);
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"],
#tracks-window:not(:checked) ~ [for="tracks-window"] {
color: var(--accent-color);
background: transparent;
}
/* generic button styles */
button,
.button {
appearance: none;

44
src/assets/styles/components/tab-buttons.css Normal file
View file

@ -0,0 +1,44 @@
#tracks-recent ~ .tracks-recent,
#tracks-window ~ .tracks-window {
display: none;
}
#tracks-recent:checked ~ .tracks-recent,
#tracks-window:checked ~ .tracks-window {
display: block;
}
input[id="tracks-recent"] ~ [for="tracks-recent"],
input[id="tracks-window"] ~ [for="tracks-window"] {
margin-bottom: var(--sizing-lg);
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
#tracks-window:not(:checked) ~ [for="tracks-window"]:hover,
#tracks-window:not(:checked) ~ [for="tracks-window"]:active {
color: var(--accent-color-hover);
background: transparent;
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus,
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus-within,
#tracks-window:not(:checked) ~ [for="tracks-window"]:focus,
#tracks-window:not(:checked) ~ [for="tracks-window"]:focus-within {
transition-property: none;
outline: 2px dashed var(--accent-color);
border: 0;
}
#tracks-recent:checked ~ [for="tracks-recent"],
#tracks-window:checked ~ [for="tracks-window"] {
cursor: not-allowed;
border-color: var(--accent-color);
background-color: var(--accent-color);
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"],
#tracks-window:not(:checked) ~ [for="tracks-window"] {
color: var(--accent-color);
background: transparent;
}