168 lines
3.4 KiB
CSS
168 lines
3.4 KiB
CSS
:root {
|
|
--color-ui-accent: #00b3ba;
|
|
--color-ui-accent-hover: #00c1c9;
|
|
--color-ui-accent-active: #008e93;
|
|
--color-ui-neutral-light: #fdfdfe;
|
|
--color-ui-neutral-light-hover: #fdfdfe;
|
|
--color-ui-neutral-light-active: #fdfdfe;
|
|
--color-ui-neutral-dark: #8b8b8b;
|
|
--color-ui-neutral-dark-hover: #a1a1a1;
|
|
--color-ui-neutral-dark-active: #c1c1c1;
|
|
--color-bg-light: #464646;
|
|
--color-bg-medium: #323232;
|
|
--color-bg-dark: #282828;
|
|
--color-p-light: #fafafa;
|
|
--color-p-light-hover: #fafafa;
|
|
--color-p-light-active: #fafafa;
|
|
--color-p-dark: #282828;
|
|
--color-p-dark-hover: #464646;
|
|
--color-p-dark-active: #464646;
|
|
--color-title-light: #fafafa;
|
|
--color-title-dark: #282828;
|
|
}
|
|
|
|
.root {
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: var(--color-p-light);
|
|
background-color: var(--color-bg-dark);
|
|
height: 100vh;
|
|
align-content: center;
|
|
}
|
|
|
|
.root-sidebar {
|
|
position: absolute;
|
|
left: -28em;
|
|
width: 30em;
|
|
height: 100vh;
|
|
display: flex;
|
|
transition: left 400ms;
|
|
}
|
|
|
|
.sidebar-visible .root-sidebar {
|
|
left: 0;
|
|
}
|
|
|
|
.root-settings {
|
|
z-index: 1;
|
|
width: 28em;
|
|
background-color: var(--color-bg-light);
|
|
overflow: scroll;
|
|
display: inline-block;
|
|
}
|
|
|
|
.root-settings .root-title {
|
|
color: var(--color-title-light);
|
|
text-align: center;
|
|
}
|
|
|
|
.root-sidebar-toggle {
|
|
z-index: 1;
|
|
height: 100vh;
|
|
min-width: 2em;
|
|
background-color: var(--color-bg-light);
|
|
left: 0;
|
|
}
|
|
|
|
.root-quick-access-button {
|
|
right: 0;
|
|
width: 2em;
|
|
height: 2em;
|
|
cursor: pointer;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.root-beat-stage-container {
|
|
position: absolute;
|
|
height: 100%;
|
|
left: 0;
|
|
width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: left 400ms, width 400ms;
|
|
}
|
|
|
|
.sidebar-visible .root-beat-stage-container {
|
|
left: 30em;
|
|
width: calc(100vw - 30em);
|
|
}
|
|
|
|
.root-beat-stage {
|
|
position: relative;
|
|
padding: 2em;
|
|
max-height: 100vh;
|
|
margin: auto;
|
|
max-width: 100vw;
|
|
transition: max-width 400ms;
|
|
}
|
|
|
|
.vertical-mode .root-beat-stage {
|
|
margin: auto auto;
|
|
padding-left: 3em;
|
|
height: 100vh;
|
|
}
|
|
|
|
.sidebar-visible .root-beat-stage {
|
|
max-width: calc(100vw - 30em);
|
|
}
|
|
|
|
.root-sidebar-left-strip {
|
|
writing-mode: vertical-rl;
|
|
background-color: var(--color-bg-light);
|
|
}
|
|
|
|
.root-sidebar-left-strip > * {
|
|
display: inline-block;
|
|
}
|
|
|
|
.root-sidebar-left-tab {
|
|
transform: rotate(-180deg);
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding: 8px 3px 8px 3px;
|
|
}
|
|
|
|
.root-sidebar-left-tab.active {
|
|
background-color: var(--color-bg-medium);
|
|
display: inline-block;
|
|
}
|
|
|
|
.root-sidebar-add-beat {
|
|
width: 100%;
|
|
padding: 8px 3px 8px 3px;
|
|
}
|
|
|
|
.root-sidebar-add-beat:hover,
|
|
.root-sidebar-left-tab:hover:not(.active) {
|
|
cursor: pointer;
|
|
background-color: var(--color-ui-neutral-dark);
|
|
transition: background-color 200ms;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
.sidebar-visible .root-sidebar {
|
|
left: 0;
|
|
width: 100vw;
|
|
}
|
|
.root-sidebar {
|
|
left: calc(-100vw + 2em);
|
|
width: 100vw;
|
|
}
|
|
.root-settings {
|
|
width: calc(100vw - 2em);
|
|
}
|
|
.sidebar-visible .root-beat-stage-container {
|
|
left: 100vw;
|
|
}
|
|
.root-beat-stage-container {
|
|
left: 0;
|
|
}
|
|
.sidebar-visible .root-beat-stage {
|
|
max-width: 100vw;
|
|
}
|
|
}
|
|
|
|
* {
|
|
user-drag: none;
|
|
user-select: none;
|
|
} |