:root {
--play-symbol: url('data:image/svg+xml,');
--pause-symbol: url('data:image/svg+xml,');
--prev-bar-symbol: url('data:image/svg+xml,');
--next-bar-symbol: url('data:image/svg+xml,');
--volume-symbol: url('data:image/svg+xml,');
--unmuted-symbol: url('data:image/svg+xml,');
--muted-symbol: url('data:image/svg+xml,');
--menu-down-symbol: url('data:image/svg+xml,');
--select-arrows-symbol: url('data:image/svg+xml,');
--file-page-symbol: url('data:image/svg+xml,');
--edit-pencil-symbol: url('data:image/svg+xml,');
--preferences-gear-symbol: url('data:image/svg+xml,');
--customize-dial-symbol: url('data:image/svg+xml,');
--export-symbol: url('data:image/svg+xml,');
--close-symbol: url('data:image/svg+xml,');
--checkmark-symbol: url('data:image/svg+xml,');
--drum-symbol: url('data:image/svg+xml,');
--piano-key-symbol: url('data:image/svg+xml,');
}
.obtrusive-scrollbars,
.obtrusive-scrollbars * {
scrollbar-width: thin;
}
.obtrusive-scrollbars::-webkit-scrollbar,
.obtrusive-scrollbars *::-webkit-scrollbar {
width: 12px;
}
/* General Editor Styles */
.arbitstudioEditor {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
touch-action: manipulation;
cursor: default;
font-size: small;
overflow: hidden;
-webkit-touch-callout: none;
user-select: none;
width: 100%;
min-height: 100%;
}
.arbitstudioEditor:focus-within {
outline: none;
}
.arbitstudioEditor svg {
height: 100%;
resize: none;
}
/* Prompt */
.promptContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* semi-transparent background */
display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* Ensure it's above other content */
}
.prompt {
background-color: var(--editor-background);
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 80%;
max-height: 80vh;
overflow-y: auto;
}
/* Layout Areas */
.pattern-area {
flex: 1 0 auto;
display: flex;
flex-direction: row;
padding: 0.5rem 1rem 1rem 1rem;
cursor: pointer;
height: 60vh;
}
.settings-area {
flex: 0 0 auto;
padding: 1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 6px;
}
.track-area {
display: flex;
justify-content: space-between;
flex-direction: row;
padding: 0 1rem;
}
/* Specific Area Styles */
.arbitstudioEditor .instrument-settings-area {
padding: 0 4rem;
width: 40vw;
}
/* Form Elements */
.arbitstudioEditor select,
.arbitstudioEditor button,
.arbitstudioEditor input[type="text"],
.arbitstudioEditor input[type="number"] {
margin: 0;
padding: 0 0.3em;
height: 2em;
border: none;
border-radius: 0.4em;
color: inherit;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
cursor: pointer;
}
.arbitstudioEditor select,
.arbitstudioEditor button {
-webkit-appearance: none;
appearance: none;
}
.arbitstudioEditor select:focus,
.arbitstudioEditor button:focus {
outline: none;
}
.arbitstudioEditor input[type="checkbox"] {
transform: scale(1.5);
}
/* Range Input Styles */
.arbitstudioEditor input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 2em;
margin: 0;
cursor: pointer;
touch-action: pan-y;
}
.arbitstudioEditor input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 0.5em;
cursor: pointer;
}
.arbitstudioEditor input[type="range"]::-webkit-slider-thumb {
height: 2em;
width: 0.5em;
border-radius: 0.25em;
background: currentColor;
cursor: pointer;
-webkit-appearance: none;
margin-top: -0.75em;
}
/* Button Styles */
.arbitstudioEditor button {
position: relative;
background-color: #444;
}
.arbitstudioEditor button.playButton,
.arbitstudioEditor button.pauseButton,
.arbitstudioEditor button.prevBarButton,
.arbitstudioEditor button.nextBarButton,
.arbitstudioEditor button.okayButton,
.arbitstudioEditor button.exportButton {
padding-left: 2em;
}
/* Button Icons */
/* .arbitstudioEditor button::before {
content: "";
position: absolute;
width: 2em;
height: 2em;
left: 0;
top: 50%;
margin-top: -1em;
background: currentColor;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
} */
.arbitstudioEditor button.playButton::before {
mask-image: var(--play-symbol);
-webkit-mask-image: var(--play-symbol);
}
.arbitstudioEditor button.pauseButton::before {
mask-image: var(--pause-symbol);
-webkit-mask-image: var(--pause-symbol);
}
.arbitstudioEditor button.prevBarButton::before {
mask-image: var(--prev-bar-symbol);
-webkit-mask-image: var(--prev-bar-symbol);
}
.arbitstudioEditor button.nextBarButton::before {
mask-image: var(--next-bar-symbol);
-webkit-mask-image: var(--next-bar-symbol);
}
.arbitstudioEditor button.cancelButton::before {
mask-image: var(--close-symbol);
-webkit-mask-image: var(--close-symbol);
}
.arbitstudioEditor button.okayButton::before {
mask-image: var(--checkmark-symbol);
-webkit-mask-image: var(--checkmark-symbol);
}
.arbitstudioEditor button.exportButton::before {
mask-image: var(--export-symbol);
-webkit-mask-image: var(--export-symbol);
}
.arbitstudioEditor .mute-button::before {
content: "";
pointer-events: none;
width: 100%;
height: 100%;
background: var(--editor-background);
display: inline-block;
-webkit-mask-image: var(--unmuted-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-image: var(--unmuted-symbol);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: white;
}
.arbitstudioEditor .mute-button.muted::before {
background: var(--editor-background);
-webkit-mask-image: var(--muted-symbol);
mask-image: var(--muted-symbol);
}
/* Responsive Styles */
@media (min-width: 701px) {
/* Container and overall layout */
#arbitstudioEditorContainer {
display: table;
max-width: initial;
overflow: hidden;
height: 100vh;
}
.arbitstudioEditor {
flex-direction: column;
}
/* Track and mute container */
.arbitstudioEditor .trackAndMuteContainer {
width: 100%;
}
/* Play/Pause area */
.arbitstudioEditor .play-pause-area {
display: flex;
flex-direction: column;
}
.arbitstudioEditor .playback-bar-controls {
display: flex;
flex-direction: row;
margin: 2px 0;
}
.arbitstudioEditor .playback-volume-controls {
display: flex;
flex-direction: row;
margin: 2px 0;
align-items: center;
}
.arbitstudioEditor .pauseButton,
.arbitstudioEditor .playButton,
.arbitstudioEditor .nextBarButton,
.arbitstudioEditor .prevBarButton {
flex-grow: 1;
}
.arbitstudioEditor .nextBarButton,
.arbitstudioEditor .prevBarButton {
margin-left: 10px;
}
/* Track area */
.arbitstudioEditor .track-area {
overflow-y: auto;
}
.play-pause-menu-area {
width: 30vw;
}
/* Settings area */
.arbitstudioEditor .settings-area {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto auto minmax(0, 1fr);
grid-template-areas:
"instrument-settings-area play-pause-area"
"instrument-settings-area menu-area"
"instrument-settings-area song-settings-area";
}
.arbitstudioEditor .instrument-settings-area {
overflow-y: auto;
position: relative;
}
.arbitstudioEditor .instrument-settings-area > .editor-controls {
position: absolute;
width: 100%;
}
.arbitstudioEditor .song-settings-area {
overflow-y: auto;
}
/* Scroll bars */
.arbitstudioEditor .barScrollBar {
display: none;
}
.arbitstudioEditor .trackContainer {
overflow-x: auto;
scrollbar-width: auto;
}
.arbitstudioEditor .trackContainer::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.settings-area * {
width: 30vw;
}
}
@media (max-width: 700px) {
/* Overall layout */
.arbitstudioEditor {
display: flex;
flex-direction: column;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: min-content 6px min-content min-content;
grid-template-areas:
"pattern-area"
"."
"track-area"
"settings-area";
grid-row-gap: 0;
overflow-x: hidden;
}
/* Pattern area */
.arbitstudioEditor .pattern-area {
height: 75vh;
width: 100%;
padding: 0;
}
/* Track area */
.arbitstudioEditor .track-area {
flex-direction: column;
padding: 0 0.5rem;
margin: 1rem 0 0.5rem 0;
gap: 1rem;
}
.arbitstudioEditor .trackContainer {
overflow-x: auto;
}
/* Settings area */
.arbitstudioEditor .settings-area {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: min-content min-content 1fr min-content;
grid-template-areas:
"play-pause-area play-pause-area"
"menu-area instrument-settings-area"
"song-settings-area instrument-settings-area"
"version-area version-area";
grid-column-gap: 8px;
padding: 0 1rem;
overflow-x: scroll;
}
.arbitstudioEditor .song-settings-area {
display: flex;
flex-direction: column;
}
.arbitstudioEditor .instrument-settings-area {
display: flex;
flex-direction: row;
}
/* Play/Pause area */
.arbitstudioEditor .play-pause-area {
display: flex;
flex-direction: row;
margin: 2px 0;
}
.arbitstudioEditor .playback-bar-controls {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.arbitstudioEditor .playback-volume-controls {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
margin: 0 2px;
}
.arbitstudioEditor .pauseButton,
.arbitstudioEditor .playButton,
.arbitstudioEditor .nextBarButton,
.arbitstudioEditor .prevBarButton {
flex-grow: 1;
margin: 0 2px;
}
/* Other areas */
.arbitstudioEditor .play-pause-area,
.arbitstudioEditor .menu-area,
.arbitstudioEditor .instrument-settings-area {
display: flex;
}
.play-pause-menu-area {
margin-bottom: 1rem;
}
/* Scroll bars */
.arbitstudioEditor .barScrollBar {
display: none;
}
}