forked from nikita/muzika-gromche
364 lines
10 KiB
CSS
364 lines
10 KiB
CSS
@font-face {
|
|
font-family: '3270';
|
|
src: url('./assets/fonts/3270-Regular.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@import './reset.css' layer(base);
|
|
@import 'tailwindcss' prefix(tw);
|
|
|
|
@layer base {
|
|
* {
|
|
--main-background-color: #28282e;
|
|
--inactive-text-color: #909090;
|
|
--active-text-color: #ffffff;
|
|
|
|
--view-separator-color: #090909;
|
|
--view-separator-border: 1px solid var(--view-separator-color);
|
|
|
|
--header-background-color: #17181a;
|
|
--toolbar-background-color: #212126;
|
|
--view-background-color: #212126;
|
|
--card-background-color: #2a2a2d;
|
|
--card-border-color: #000000;
|
|
--card-border-width: 1px;
|
|
--card-border-radius: 4px;
|
|
--card-border: var(--card-border-width) solid var(--card-border-color);
|
|
--card-separator-color: #212126;
|
|
--card-separator-width: 2px;
|
|
--card-outline-color: #929292;
|
|
--card-outline-selected-color: #fa5b4a;
|
|
--card-min-width: 24rem;
|
|
|
|
--input-background-color: #1f1f1f;
|
|
--input-outline-color: #070707;
|
|
/* disabled */
|
|
--input-disabled-text-color: #525256;
|
|
--input-disabled-background-color: #242428;
|
|
--input-disabled-outline-color: #1a1a1d;
|
|
/* selected */
|
|
--input-selected-outline-color: #e64b3d;
|
|
--input-border-width: 1px;
|
|
--input-border-radius: 4px;
|
|
--input-selection-color: #4b4b4b;
|
|
|
|
--timeline-background-color: var(--main-background-color);
|
|
--timeline-background-top-color: #18181e;
|
|
--timeline-border-top-color: var(--view-separator-color);
|
|
--timeline-header-separator-color: #000000;
|
|
--timeline-header-tick-edge-color: #2f3036;
|
|
/*
|
|
track layout:
|
|
border-top
|
|
...track content...
|
|
border-bottom
|
|
--- border (separator) ---
|
|
border-top
|
|
...track content...
|
|
border-bottom
|
|
*/
|
|
--timeline-track-border-color: #00000080;
|
|
--timeline-track-border: 1px solid var(--timeline-track-border-color);
|
|
--timeline-track-border-top-color: #00000033;
|
|
--timeline-track-border-top: 1px solid var(--timeline-track-border-top-color);
|
|
--timeline-track-border-bottom-color: #0000003a;
|
|
--timeline-track-border-bottom: 1px solid var(--timeline-track-border-bottom-color);
|
|
--timeline-text-color: #909090;
|
|
--timeline-bar-color: #fffff0;
|
|
--timeline-bar-opacity: 11%;
|
|
--timeline-bar-width: 1px;
|
|
|
|
--timeline-playhead-color: #e64b3d;
|
|
/* TODO: playhead color has some transparency, which is hard to calculate */
|
|
--timeline-playhead-color-1: #000000c0;
|
|
--timeline-playhead-color-2: #00000059;
|
|
--timeline-playhead-pressed-color: #e85c4f;
|
|
|
|
--timeline-marker-beat-color: #ffffff1c;
|
|
|
|
/* See ./lib/colors/markers.ts */
|
|
--timeline-marker-color-blue: #007fe3;
|
|
--timeline-marker-color-cyan: #00ced0;
|
|
--timeline-marker-color-green: #00ad00;
|
|
--timeline-marker-color-yellow: #f09d00;
|
|
--timeline-marker-color-red: #e12401;
|
|
--timeline-marker-color-pink: #ff44c8;
|
|
--timeline-marker-color-purple: #9013fe;
|
|
--timeline-marker-color-fuchsia: #c02e6f;
|
|
--timeline-marker-color-rose: #ffa1b9;
|
|
--timeline-marker-color-lavender: #a193c8;
|
|
--timeline-marker-color-sky: #a193c8;
|
|
--timeline-marker-color-mint: #72db00;
|
|
--timeline-marker-color-lemon: #dce95a;
|
|
--timeline-marker-color-sand: #c4915e;
|
|
--timeline-marker-color-cocoa: #6e5143;
|
|
--timeline-marker-color-cream: #f5ebe1;
|
|
|
|
--timeline-clip-border-color: #15151580;
|
|
--timeline-clip-border-color-inner: #151515;
|
|
--timeline-clip-border-radius: 4px;
|
|
|
|
/*
|
|
* TODO:
|
|
* timeline clip selected outline:
|
|
* inner 1px black
|
|
* outer 2px red
|
|
*/
|
|
--timeline-clip-outline-selected-color: #e64b3d;
|
|
--timeline-clip-outline-selected-width: 2px;
|
|
--timeline-clip-outline-selected: var(--timeline-clip-outline-selected-width) solid
|
|
var(--timeline-clip-outline-selected-color);
|
|
|
|
/* See ./lib/colors/clips.ts */
|
|
--timeline-clip-color-orange: #eb6e01;
|
|
--timeline-clip-color-apricot: #ffa833;
|
|
--timeline-clip-color-yellow: #d4ad1f;
|
|
--timeline-clip-color-lime: #9fc615;
|
|
--timeline-clip-color-olive: #5f9921;
|
|
--timeline-clip-color-green: #448f65;
|
|
--timeline-clip-color-teal: #019899;
|
|
--timeline-clip-color-navy: #005278;
|
|
--timeline-clip-color-blue: #4376a1;
|
|
--timeline-clip-color-purple: #9972a0;
|
|
--timeline-clip-color-violet: #d0568d;
|
|
--timeline-clip-color-pink: #e98cb5;
|
|
--timeline-clip-color-tan: #b9af97;
|
|
--timeline-clip-color-beige: #c4a07c;
|
|
--timeline-clip-color-brown: #996601;
|
|
--timeline-clip-color-chocolate: #8c5a3f;
|
|
|
|
--timeline-clip-label-background-color: #00000099;
|
|
--timeline-clip-label-border-color: #00000060;
|
|
|
|
--timeline-clip-baseline-color: #00000033;
|
|
|
|
--player-background-color: #1a1a1a;
|
|
|
|
--inspector-section-separator-color: #1e1e1e;
|
|
|
|
--control-button-text-color: #929292;
|
|
--control-button-background-color: var(--main-background-color);
|
|
--control-button-border-color: #43474d;
|
|
/* active */
|
|
--control-button-active-text-color: #ffffff;
|
|
--control-button-active-background-color: #17181a;
|
|
--control-button-active-border-color: #ffffff;
|
|
/* disabled */
|
|
--control-button-disabled-text-color: #525256;
|
|
--control-button-disabled-border-color: #33343b;
|
|
}
|
|
|
|
:root {
|
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
|
|
color-scheme: light dark;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
background-color: var(--main-background-color);
|
|
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
a {
|
|
font-weight: 500;
|
|
color: #646cff;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
a:hover {
|
|
color: #535bf2;
|
|
}
|
|
|
|
body {
|
|
padding: 0;
|
|
min-width: 320px;
|
|
height: 100vh;
|
|
}
|
|
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
@theme {
|
|
--font-3270: '3270', monospace;
|
|
--font-mono: '3270', monospace;
|
|
}
|
|
|
|
@layer utilities {
|
|
.toolbar-background {
|
|
background-color: var(--toolbar-background-color);
|
|
}
|
|
|
|
.timeline-background {
|
|
background-color: var(--timeline-background-color);
|
|
}
|
|
|
|
.scrollbar-none {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.toolbar-icon-shadow {
|
|
filter: drop-shadow(rgb(0 0 0 / 0.75) 0px 1px);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.card-border {
|
|
border: 1px solid var(--card-border-color);
|
|
border-radius: var(--card-border-radius);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.input-text {
|
|
--input-text-color: var(--active-text-color);
|
|
color: var(--input-text-color);
|
|
background-color: var(--input-background-color);
|
|
border-radius: var(--input-border-radius);
|
|
outline: var(--input-border-width) solid var(--input-outline-color);
|
|
|
|
& input,
|
|
& textarea {
|
|
padding: 1px 2px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
&:has(input:disabled),
|
|
&:has(textarea:disabled),
|
|
&:disabled {
|
|
--input-text-color: var(--input-disabled-text-color);
|
|
--input-background-color: var(--input-disabled-background-color);
|
|
--input-outline-color: var(--input-disabled-outline-color);
|
|
}
|
|
|
|
&:has(input:not(:disabled):read-write:focus),
|
|
&:has(textarea:not(:disabled):read-write:focus) {
|
|
outline-color: var(--input-selected-outline-color);
|
|
}
|
|
|
|
/* Selection background for text inside input-text containers */
|
|
& ::selection,
|
|
& input::selection,
|
|
& textarea::selection {
|
|
background-color: var(--input-selection-color);
|
|
color: inherit;
|
|
}
|
|
|
|
& ::-moz-selection,
|
|
& input::-moz-selection,
|
|
& textarea::-moz-selection {
|
|
background-color: var(--input-selection-color);
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
input.input-text,
|
|
textarea.input-text {
|
|
padding: 1px 2px;
|
|
|
|
&:not(:disabled):read-write:focus,
|
|
&:not(:disabled):read-write:focus {
|
|
outline-color: var(--input-selected-outline-color);
|
|
}
|
|
|
|
&::selection {
|
|
background-color: var(--input-selection-color);
|
|
color: inherit;
|
|
}
|
|
|
|
&::-moz-selection {
|
|
background-color: var(--input-selection-color);
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.input-number,
|
|
input.input-number {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.control-label {
|
|
&.control-label__disabled {
|
|
color: var(--inactive-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.control-button {
|
|
@apply tw:inline-flex tw:items-center tw:justify-center;
|
|
@apply tw:gap-1 tw:px-2 tw:py-0 tw:min-w-24;
|
|
|
|
color: var(--control-button-text-color);
|
|
border-radius: 1em;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: var(--control-button-border-color);
|
|
background-color: var(--control-button-background-color);
|
|
|
|
& > .control-button__icon {
|
|
@apply tw:flex-none tw:w-4 tw:h-4 tw:fill-current;
|
|
}
|
|
|
|
& > .control-button__text {
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: none;
|
|
--control-button-border-color: var(--control-button-active-border-color);
|
|
}
|
|
|
|
&:not(:disabled) {
|
|
@variant hover {
|
|
--control-button-text-color: var(--control-button-active-text-color);
|
|
--control-button-border-color: var(--control-button-active-border-color);
|
|
}
|
|
@variant active {
|
|
--control-button-text-color: var(--control-button-active-text-color);
|
|
--control-button-border-color: var(--control-button-active-border-color);
|
|
@variant hover {
|
|
--control-button-background-color: var(--control-button-active-background-color);
|
|
}
|
|
}
|
|
}
|
|
@variant disabled {
|
|
--control-button-text-color: var(--control-button-disabled-text-color);
|
|
--control-button-border-color: var(--control-button-disabled-border-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.control-select {
|
|
--input-text-color: var(--active-text-color);
|
|
color: var(--input-text-color);
|
|
background-color: var(--input-background-color);
|
|
border-radius: var(--input-border-radius);
|
|
outline: var(--input-border-width) solid var(--input-outline-color);
|
|
|
|
padding: 1px 16px;
|
|
|
|
&:disabled {
|
|
--input-text-color: var(--input-disabled-text-color);
|
|
--input-background-color: var(--input-disabled-background-color);
|
|
--input-outline-color: var(--input-disabled-outline-color);
|
|
}
|
|
|
|
/* not sure about this */
|
|
&:not(:disabled):focus {
|
|
outline-color: var(--input-selected-outline-color);
|
|
}
|
|
}
|
|
}
|