Update styles.css
This commit is contained in:
+387
@@ -0,0 +1,387 @@
|
||||
:root {
|
||||
--bg-1: #fef9ee;
|
||||
--bg-2: #d7e8f2;
|
||||
--ink: #1f2a44;
|
||||
--card: #ffffffde;
|
||||
--accent: #d94841;
|
||||
--accent-alt: #116466;
|
||||
--muted: #5a6480;
|
||||
--border: #24345f2b;
|
||||
--shadow: 0 20px 50px #1f2a4424;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
color: var(--ink);
|
||||
background: radial-gradient(circle at 10% 10%, #fff6db 0%, transparent 40%),
|
||||
radial-gradient(circle at 90% 20%, #b6dce8 0%, transparent 45%),
|
||||
linear-gradient(155deg, var(--bg-1), var(--bg-2));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
width: min(1440px, 100vw);
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0.7rem 0.8rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
margin: 0;
|
||||
font-family: "Fraunces", serif;
|
||||
font-size: clamp(2rem, 5vw, 3.2rem);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.topbar p {
|
||||
margin: 0.2rem 0 0.5rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 20% 80%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.top-half {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.bottom-half {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 16px;
|
||||
padding: 1rem;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.panel h2,
|
||||
.panel h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.35rem;
|
||||
font-family: "Fraunces", serif;
|
||||
}
|
||||
|
||||
.panel h3 {
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
button,
|
||||
textarea {
|
||||
width: 100%;
|
||||
font: inherit;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 0.55rem 0.7rem;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.65rem 0.8rem;
|
||||
background: #f8fbff;
|
||||
transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 24px #1f2a441f;
|
||||
background: #f1f8ff;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: #ffeae7;
|
||||
border-color: #f5b6b0;
|
||||
}
|
||||
|
||||
.actions-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.55rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.score-canvas {
|
||||
width: 100%;
|
||||
height: calc(100% - 2.2rem);
|
||||
min-height: 260px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, #ffffff, #f9fcff);
|
||||
border: 1px solid var(--border);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.note-list {
|
||||
list-style: decimal;
|
||||
padding-left: 1.2rem;
|
||||
margin: 0.25rem 0 0;
|
||||
max-height: 150px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.note-list li {
|
||||
margin: 0.25rem 0;
|
||||
padding: 0.35rem 0.45rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.note-list li:hover {
|
||||
background: #edf5fc;
|
||||
}
|
||||
|
||||
.note-list li.active {
|
||||
background: #d8ebff;
|
||||
color: #0b2d4e;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-top: 0.45rem;
|
||||
resize: vertical;
|
||||
min-height: 74px;
|
||||
}
|
||||
|
||||
.toolbar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.toolbar-card {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.notes-card,
|
||||
.rests-card,
|
||||
.meter-card,
|
||||
.clef-card {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.systems-card {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.symbols-card {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.chip-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.systems-controls {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.system-tabs {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button.system-tab {
|
||||
width: auto;
|
||||
padding: 0.36rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #8fa9bb;
|
||||
background: #f7fbff;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
button.system-tab.active {
|
||||
background: #d9ecff;
|
||||
border-color: #3f8ac8;
|
||||
color: #0d3556;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.systems-actions {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.symbol-groups {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.symbol-group {
|
||||
padding: 0.42rem 0.48rem 0.5rem;
|
||||
border: 1px solid #d8e2ea;
|
||||
border-radius: 10px;
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.symbol-group h3 {
|
||||
margin: 0;
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.symbol-group .chip-list {
|
||||
margin-top: 0.28rem;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
button.chip {
|
||||
width: auto;
|
||||
padding: 0.42rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #8fa9bb;
|
||||
background: #f8fcff;
|
||||
}
|
||||
|
||||
button.icon-chip {
|
||||
width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button.icon-chip svg {
|
||||
width: 1.12rem;
|
||||
height: 1.12rem;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.8;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
button.chip.active {
|
||||
background: #d9ecff;
|
||||
border-color: #3f8ac8;
|
||||
color: #0d3556;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sequence-area {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.sequence-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.inline-actions {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.inline-actions button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.io-area {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.time-signature-picker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.ts-number {
|
||||
width: auto;
|
||||
min-width: 3.1rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #8fa9bb;
|
||||
background: #ffffff;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ts-separator {
|
||||
font-family: "Fraunces", serif;
|
||||
font-size: 1.3rem;
|
||||
color: #355170;
|
||||
}
|
||||
|
||||
.ts-select {
|
||||
margin-top: 0.45rem;
|
||||
width: 6rem;
|
||||
min-height: 8.2rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
background: #ffffff;
|
||||
padding: 0.3rem;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
body {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
|
||||
.toolbar-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.symbols-card {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.symbol-groups {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sequence-head {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.actions-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user