jess
/
web-tuner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix some things

This commit is contained in:
Jess P.S 2025-03-30 09:12:05 -07:00
parent 62ddf40be4
commit d331c2be92
6 changed files with 13 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
www/chords-darcula.css
View File

@ -1,3 +1,5 @@
@import url('chords-light.css');
body { body {
font-family: "Work Sans", sans-serif; font-family: "Work Sans", sans-serif;
background-color: #383838; /* Darcula background */ background-color: #383838; /* Darcula background */

2
www/chords-default.css
View File

@ -1,3 +1,5 @@
@import url('chords-light.css');
body { body {
font-family: "Work Sans", sans-serif; font-family: "Work Sans", sans-serif;
background-color: #121212; background-color: #121212;

2
www/chords-solarized.css
View File

@ -1,3 +1,5 @@
@import url('chords-light.css');
body { body {
font-family: "Work Sans", sans-serif; font-family: "Work Sans", sans-serif;
background-color: #002b36; /* Solarized Dark base03 */ background-color: #002b36; /* Solarized Dark base03 */

2
www/chords-tomorrow-amoled.css
View File

@ -1,3 +1,5 @@
@import url('chords-light.css');
body { body {
font-family: "Work Sans", sans-serif; font-family: "Work Sans", sans-serif;
background-color: #000000; /* Tomorrow AMOLED background - pure black */ background-color: #000000; /* Tomorrow AMOLED background - pure black */

114
www/chords.css
View File

@ -1,114 +0,0 @@
body {
font-family: "Work Sans", sans-serif;
background-color: #121212;
color: #eec4e7;
padding: 1rem;
line-height: 1.5;
}
#chord-container {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.chord-card {
border: 1px solid rgb(151, 16, 137);
border-radius: 8px;
padding: 1rem;
background-color: #1a1a1a;
width: max-content;
}
.chord-card h2 {
margin-top: 0;
font-size: 1.2rem;
color: #ffd9f0;
}
.fretboard {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-left: .5rem;
border: .5px;
background-color: #56208bbe;
}
.fretboard .fret {
background-color: #130404!important;
}
.fret-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 2px;
}
.fret {
width: 2.1rem;
height: 1.6rem;
box-sizing: border-box;
border: .5px solid #48b9debd;
border-left: 2px solid #55555500;
border-right: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
text-align: center;
line-height: 1.6rem;
font-weight: bold;
background-color: #1e1e1e;
position: relative;
color: transparent;
}
.fret[data-dot]::after {
content: '';
width: 0.55rem;
height: 0.55rem;
background-color: #ff6b6b;
border: 1px solid white;
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgba(255, 0, 0, 0.346);
border-color:rgb(255, 6, 230)
}
.fret:empty {
background-color: #1e1e1e;
}
.alternatives {
margin-top: 1rem;
}
.alternatives h3 {
color: #ffffff;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.alternatives-container {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.alternative-fretboard {
margin-inline: 1.8rem;
}
.alternative-fretboard .fret {
width: 1.8rem;
height: 1.3rem;
}

10
www/chords.js
View File

@ -21,11 +21,11 @@ document.addEventListener("DOMContentLoaded", () => {
const themeSelect = document.createElement("select"); const themeSelect = document.createElement("select");
themeSelect.innerHTML = ` themeSelect.innerHTML = `
<option value="light">🌞 Light</option> <option value="light">Light</option>
<option value="default">🎸 Default Theme</option> <option value="default">Purple Theme</option>
<option value="solarized">🌅 Solarized</option> <option value="solarized">Solarized</option>
<option value="tomorrow-amoled">🌌 Tomorrow AMOLED</option> <option value="tomorrow-amoled">Tomorrow AMOLED</option>
<option value="darcula">🧛 Darcula</option> <option value="darcula">Darcula</option>
`; `;
controls.appendChild(themeSelect); controls.appendChild(themeSelect);