mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 07:10:41 +00:00
1829 lines
30 KiB
CSS
1829 lines
30 KiB
CSS
:root {
|
|
--background-1: #1b1b1b;
|
|
--background-2: #252525;
|
|
--background-3: #222222;
|
|
--background-4: #3d3d3d;
|
|
--background-5: #383838;
|
|
--background-6: #575757;
|
|
--text-1: #ffffff;
|
|
--text-2: #dcdcdc;
|
|
--text-3: #c3c3c3;
|
|
--accent-primary: #50baf9;
|
|
--accent-success: #3eb84f;
|
|
--accent-warning: #b8893e;
|
|
--accent-danger: #cf4945;
|
|
--accent-sounds-1: #451475;
|
|
--accent-sounds-2: #39155e;
|
|
--accent-sounds-3: #6a08a3;
|
|
--accent-sounds-4: #d1a5e6;
|
|
--nav: #91908f;
|
|
--nav-hover: #b4b3b0;
|
|
--nav-faded: #4d4c4c;
|
|
--nav-faded-hover: #6e6e6e;
|
|
--selection: #445a9599;
|
|
--errors-background: #62190f;
|
|
--errors-text: #ffffffcc;
|
|
--invalid-text: #fd7951;
|
|
--text-saturation: 60%;
|
|
--text-lightness: 45%;
|
|
--editor-variable: #9CDCFE;
|
|
--editor-string: #CE9178;
|
|
--editor-constant: #569CD6;
|
|
--editor-number: #B5CEA8;
|
|
}
|
|
|
|
:root[data-theme=light] {
|
|
--background-1: #fafafa;
|
|
--background-2: #e2e2e2;
|
|
--background-3: #d4d3d3;
|
|
--background-4: #b8b8b8;
|
|
--background-5: #bdbdbd;
|
|
--background-6: #cecece;
|
|
--text-1: #000000;
|
|
--text-2: #2f2f2f;
|
|
--text-3: #494949;
|
|
--accent-primary: #088cdb;
|
|
--accent-success: #1a7f37;
|
|
--accent-warning: #a36f1c;
|
|
--accent-danger: #bd2f2a;
|
|
--accent-sounds-1: #b481e7;
|
|
--accent-sounds-2: #c18df5;
|
|
--accent-sounds-3: #af72d3;
|
|
--accent-sounds-4: #efd3fd;
|
|
--nav: #343a40;
|
|
--nav-hover: #565d64;
|
|
--nav-faded: #9fa2a7;
|
|
--nav-faded-hover: #bcbfc3;
|
|
--selection: #6786dd99;
|
|
--errors-background: #f66653;
|
|
--errors-text: #000000cc;
|
|
--invalid-text: #a32600;
|
|
--text-saturation: 100%;
|
|
--text-lightness: 30%;
|
|
--editor-variable: #0451A5;
|
|
--editor-string: #A31515;
|
|
--editor-constant: #0000FF;
|
|
--editor-number: #098658;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root[data-theme=system] {
|
|
--background-1: #fafafa;
|
|
--background-2: #e2e2e2;
|
|
--background-3: #d4d3d3;
|
|
--background-4: #b8b8b8;
|
|
--background-5: #bdbdbd;
|
|
--background-6: #cecece;
|
|
--text-1: #000000;
|
|
--text-2: #2f2f2f;
|
|
--text-3: #494949;
|
|
--accent-primary: #088cdb;
|
|
--accent-success: #1a7f37;
|
|
--accent-warning: #a36f1c;
|
|
--accent-danger: #bd2f2a;
|
|
--accent-sounds-1: #b481e7;
|
|
--accent-sounds-2: #c18df5;
|
|
--accent-sounds-3: #af72d3;
|
|
--accent-sounds-4: #efd3fd;
|
|
--nav: #343a40;
|
|
--nav-hover: #565d64;
|
|
--nav-faded: #9fa2a7;
|
|
--nav-faded-hover: #bcbfc3;
|
|
--selection: #6786dd99;
|
|
--errors-background: #f66653;
|
|
--errors-text: #000000cc;
|
|
--invalid-text: #a32600;
|
|
--text-saturation: 100%;
|
|
--text-lightness: 35%;
|
|
--editor-variable: #0451A5;
|
|
--editor-string: #A31515;
|
|
--editor-constant: #0000FF;
|
|
--editor-number: #098658;
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--selection);
|
|
}
|
|
|
|
a svg {
|
|
pointer-events: none;
|
|
}
|
|
|
|
body {
|
|
font-size: 18px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
background-color: var(--background-1);
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px;
|
|
width: 100%;
|
|
height: 56px;
|
|
z-index: 5;
|
|
position: fixed;
|
|
box-shadow: 0 0 9px -3px #000;
|
|
background-color: var(--background-2);
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.title h1 {
|
|
font-size: 27px;
|
|
color: var(--nav);
|
|
}
|
|
|
|
.home-link {
|
|
margin: 0 8px 0 0;
|
|
}
|
|
|
|
.home-link svg {
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 2px;
|
|
}
|
|
|
|
.home-link svg rect:nth-child(2n) {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.home-link:hover rect:nth-child(2) {
|
|
transform: translateX(-8px);
|
|
}
|
|
|
|
.home-link:hover rect:nth-child(4) {
|
|
transform: translateX(-11px);
|
|
}
|
|
|
|
.home-link:hover rect:nth-child(6) {
|
|
transform: translateX(-6px);
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
nav li {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin: 0 16px;
|
|
fill: var(--nav);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.home-link:hover svg{
|
|
fill: var(--nav-hover);
|
|
}
|
|
|
|
nav li .btn-menu {
|
|
height: 100%;
|
|
}
|
|
|
|
nav li.dimmed svg {
|
|
fill: var(--nav-faded);
|
|
}
|
|
|
|
nav li.dimmed:hover svg {
|
|
fill: var(--nav-faded-hover);
|
|
}
|
|
|
|
nav li > *,
|
|
nav li svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.title .btn-menu {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.title .btn-menu > .btn svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
header .btn-menu > .btn {
|
|
background: none !important;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
fill: var(--nav);
|
|
}
|
|
|
|
header .btn-menu > .btn:hover {
|
|
fill: var(--nav-hover);
|
|
}
|
|
|
|
main {
|
|
padding-top: 68px;
|
|
color: var(--text-1);
|
|
fill: var(--text-1);
|
|
transition: padding 0.3s;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
position: fixed;
|
|
top: 12px;
|
|
right: 16px;
|
|
left: 16px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.controls > * {
|
|
pointer-events: all;
|
|
}
|
|
|
|
main > .controls {
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
position: initial;
|
|
margin-right: 16px;
|
|
margin-left: 16px;
|
|
row-gap: 8px;
|
|
}
|
|
|
|
.generator-controls {
|
|
display: flex;
|
|
margin-left: auto;
|
|
position: sticky;
|
|
top: 68px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sounds-controls > *:not(:last-child),
|
|
.preview-controls > *:not(:last-child),
|
|
.generator-controls > *:not(:last-child),
|
|
.versions-controls > *:not(:last-child) {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.secondary-controls {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.project-controls {
|
|
position: relative;
|
|
display: flex;
|
|
width: max-content;
|
|
z-index: 2;
|
|
}
|
|
|
|
.project-controls > .btn-row > .btn-input {
|
|
background-color: var(--background-2);
|
|
}
|
|
|
|
.project-controls > .status-icon {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
align-self: center;
|
|
margin-right: 8px;
|
|
fill: var(--text-3);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.project-controls.has-file > .status-icon {
|
|
right: 38px;
|
|
}
|
|
|
|
.project-controls > .active {
|
|
fill: var(--accent-success);
|
|
}
|
|
|
|
.project-controls > .danger {
|
|
fill: var(--accent-danger);
|
|
}
|
|
|
|
.project-controls .btn-menu .btn-group {
|
|
left: 0;
|
|
right: unset;
|
|
}
|
|
|
|
.source-controls {
|
|
justify-content: flex-end;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tree {
|
|
overflow-x: auto;
|
|
padding: 8px 16px 50vh;
|
|
}
|
|
|
|
.error + .tree {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.popup-source {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 40vw;
|
|
left: 100%;
|
|
bottom: 0;
|
|
z-index: 3;
|
|
transition: transform 0.3s;
|
|
border-radius: 6px 0 0 0;
|
|
}
|
|
|
|
.popup-source.shown {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.source {
|
|
width: 100%;
|
|
height: 40vh;
|
|
max-height: 50vh;
|
|
padding: 12px;
|
|
border: none;
|
|
font-family: Consolas, monospace;
|
|
font-size: 14px;
|
|
white-space: pre;
|
|
overflow-wrap: normal;
|
|
overflow-x: auto;
|
|
tab-size: 4;
|
|
-moz-tab-size: 4;
|
|
-o-tab-size: 4;
|
|
-webkit-tab-size: 4;
|
|
outline: none;
|
|
resize: none;
|
|
position: static;
|
|
background-color: var(--background-2);
|
|
border-top-left-radius: 6px;
|
|
color: var(--text-1);
|
|
box-shadow: 0 0 7px -3px #000;
|
|
}
|
|
|
|
.popup-source .btn-menu > .btn-group {
|
|
right: 100%;
|
|
top: 50%;
|
|
margin-top: 0;
|
|
margin-right: 8px;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.popup-preview {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100% - 56px);
|
|
width: 40vw;
|
|
left: 100%;
|
|
bottom: 0;
|
|
z-index: 3;
|
|
background-color: var(--background-2);
|
|
box-shadow: 0 0 7px -3px #000;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
main.has-preview {
|
|
padding-right: 40vw;
|
|
}
|
|
|
|
.popup-preview.shown {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.popup-preview canvas {
|
|
width: 100%;
|
|
background-color: var(--nav-faded);
|
|
display: block;
|
|
cursor: crosshair;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: -webkit-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
image-rendering: pixelated;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.popup-share {
|
|
position: fixed;
|
|
display: flex;
|
|
width: 40vw;
|
|
min-height: 108px;
|
|
left: 100%;
|
|
bottom: 0;
|
|
z-index: 3;
|
|
padding: 12px;
|
|
background-color: var(--background-3);
|
|
box-shadow: 0 0 7px -3px #000;
|
|
color: var(--text-2);
|
|
transition: transform 0.3s;
|
|
border-radius: 6px 0 0 0;
|
|
}
|
|
|
|
.popup-share.shown {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.popup-share > input {
|
|
height: 32px;
|
|
background-color: var(--background-1);
|
|
color: var(--text-2);
|
|
border: none;
|
|
border-radius: 6px;
|
|
padding: 7px 11px;
|
|
margin-right: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.popup-share > .btn.active {
|
|
fill: var(--accent-success);
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
border: none;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
padding: 7px 11px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
font-size: 1rem;
|
|
white-space: nowrap;
|
|
background-color: var(--background-4);
|
|
box-shadow: 0 1px 7px -2px #000;
|
|
color: var(--text-2);
|
|
fill: var(--text-2);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.btn.active {
|
|
color: var(--accent-primary);
|
|
fill: var(--accent-primary);
|
|
}
|
|
|
|
.btn:not(.btn-input):hover {
|
|
background-color: var(--background-5);
|
|
}
|
|
|
|
.btn.no-pointer {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn svg:not(:last-child) {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.btn-link {
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.btn-link svg {
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.btn-link:not([href]) {
|
|
cursor: default;
|
|
background-color: var(--background-2) !important;
|
|
}
|
|
|
|
.btn-menu:not(.no-relative) {
|
|
position: relative;
|
|
}
|
|
|
|
.btn-menu .btn-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
margin-top: 8px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.btn-group {
|
|
border-radius: 6px;
|
|
box-shadow: 0 0 7px -2px #000;
|
|
}
|
|
|
|
.btn-group .btn {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-group .btn:not(:last-child) {
|
|
border-bottom-right-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
}
|
|
|
|
.btn-menu .result-list .btn:first-child,
|
|
.btn-group .btn:not(:first-child) {
|
|
border-top-right-radius: 0px;
|
|
border-top-left-radius: 0px;
|
|
}
|
|
|
|
.btn-group > hr {
|
|
border: 4px solid var(--background-4);
|
|
border-left: transparent;
|
|
border-right: transparent;
|
|
background-color: var(--background-6);
|
|
margin: 0;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.btn-row {
|
|
display: flex;
|
|
box-shadow: 0 1px 7px -2px #000;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.btn-row > *,
|
|
.btn-row > .btn-menu > * {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-row > *:not(:first-child),
|
|
.btn-row > .btn-menu:not(:first-child) > * {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.btn-row > *:not(:last-child),
|
|
.btn-row > .btn-menu:not(:last-child) > * {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.btn-input {
|
|
cursor: initial;
|
|
padding-right: 7px;
|
|
}
|
|
|
|
.btn-input input {
|
|
background: var(--background-1);
|
|
color: var(--text-1);
|
|
font-size: 17px;
|
|
border: none;
|
|
padding: 0 3px;
|
|
margin-left: 5px;
|
|
width: 100px;
|
|
}
|
|
|
|
.btn-input.larger-input input {
|
|
width: 200px;
|
|
}
|
|
|
|
.btn-input.large-input {
|
|
padding: 5px;
|
|
padding-left: 11px;
|
|
}
|
|
|
|
.btn-input.large-input input {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.btn-menu .result-list {
|
|
display: block;
|
|
width: 380px;
|
|
height: unset;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
max-height: 240px;
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
|
|
.popup-actions {
|
|
display: flex;
|
|
position: fixed;
|
|
bottom: 8px;
|
|
left: 100%;
|
|
z-index: 4;
|
|
padding-right: 16px;
|
|
background-color: var(--background-4);
|
|
box-shadow: 0 0 7px -3px #000;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
transform: translateX(var(--offset));
|
|
transition: padding 0.1s, transform 0.3s;
|
|
border-top-left-radius: 24px;
|
|
border-bottom-left-radius: 24px;
|
|
}
|
|
|
|
.popup-action {
|
|
padding: 12px;
|
|
fill: var(--text-3);
|
|
cursor: pointer;
|
|
border-top-left-radius: 50%;
|
|
border-bottom-left-radius: 50%;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.popup-action.shown ~ .popup-action {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.popup-action:not(.shown) {
|
|
pointer-events: none;
|
|
order: 1;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.popup-action > svg {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.popup-action:hover {
|
|
background-color: var(--background-5);
|
|
}
|
|
|
|
.popup-action.action-preview {
|
|
fill: var(--accent-primary);
|
|
}
|
|
|
|
.popup-action.action-copy.active {
|
|
fill: var(--accent-success);
|
|
}
|
|
|
|
.tooltipped {
|
|
position: relative;
|
|
}
|
|
|
|
.tooltipped::after {
|
|
content: attr(aria-label);
|
|
position: absolute;
|
|
z-index: 100;
|
|
padding: 3px 7px;
|
|
display: none;
|
|
white-space: pre;
|
|
pointer-events: none;
|
|
background-color: var(--background-6);
|
|
color: var(--text-1);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
text-align: left;
|
|
opacity: 0;
|
|
}
|
|
|
|
.tooltipped.tip-nw::after,
|
|
.tooltipped.tip-ne::after {
|
|
bottom: 100%;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.tooltipped.tip-se::after,
|
|
.tooltipped.tip-s::after,
|
|
.tooltipped.tip-sw::after {
|
|
top: 100%;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.tooltipped.tip-ne::after,
|
|
.tooltipped.tip-se::after {
|
|
left: 50%;
|
|
margin-left: -16px;
|
|
}
|
|
|
|
.tooltipped.tip-nw::after,
|
|
.tooltipped.tip-sw::after {
|
|
right: 50%;
|
|
margin-right: -16px;
|
|
}
|
|
|
|
.tooltipped.tip-ne::before,
|
|
.tooltipped.tip-n::before,
|
|
.tooltipped.tip-nw::before {
|
|
bottom: auto;
|
|
top: -7px;
|
|
border-top-color: var(--background-6);
|
|
}
|
|
|
|
.tooltipped.tip-se::before,
|
|
.tooltipped.tip-s::before,
|
|
.tooltipped.tip-sw::before {
|
|
top: auto;
|
|
bottom: -7px;
|
|
border-bottom-color: var(--background-6);
|
|
}
|
|
|
|
.tooltipped.tip-s::after,
|
|
.tooltipped.tip-n::after,
|
|
.tooltipped.tip-s::before,
|
|
.tooltipped.tip-n::before {
|
|
left: var(--x, 50%);
|
|
transform: translate(-50%, 8px);
|
|
}
|
|
|
|
.tooltipped::before {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 101;
|
|
display: none;
|
|
right: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
margin-right: -8px;
|
|
pointer-events: none;
|
|
border: 8px solid transparent;
|
|
opacity: 0;
|
|
}
|
|
|
|
.tooltipped.tip-shown::before,
|
|
.tooltipped.tip-shown::after,
|
|
.tooltipped:not([disabled]):hover::before,
|
|
.tooltipped:not([disabled]):hover::after {
|
|
display: inline-block;
|
|
animation: tooltip-appear 0.1s ease-in 0.4s forwards;
|
|
}
|
|
|
|
.tooltipped.tip-shown::after,
|
|
.tooltipped:not([disabled]):hover::after {
|
|
box-shadow: 0 1px 3px 0 #0007;
|
|
}
|
|
|
|
@keyframes tooltip-appear {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.error {
|
|
padding: 5px 14px;
|
|
margin: 12px 16px;
|
|
color: var(--text-1);
|
|
background-color: var(--errors-background);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.error > * {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.error h3 span {
|
|
margin-left: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.error .error-dismiss {
|
|
float: right;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.error-dismiss svg {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.error a {
|
|
color: var(--text-1)
|
|
}
|
|
|
|
.home, .category, .project, .versions, .guides, .guide {
|
|
padding: 16px;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.home {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0 8px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.home > *:nth-child(n+3) {
|
|
grid-column: 1 / 3;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 24px;
|
|
font-weight: unset;
|
|
}
|
|
|
|
.tool-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 8px;
|
|
color: var(--text-2);
|
|
background-color: var(--background-2);
|
|
box-shadow: 1px 1px 7px -3px #000;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.tool-card:hover {
|
|
background-color: var(--background-3);
|
|
}
|
|
|
|
.tool-head {
|
|
display: flex;
|
|
padding: 10px;
|
|
}
|
|
|
|
.tool-head svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
flex-shrink: 0;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.tool-head h3 {
|
|
font-weight: unset;
|
|
}
|
|
|
|
.tool-head p {
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.tool-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-top: 2px solid var(--background-1);
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.tool-body > .tool-card {
|
|
box-shadow: none;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
hr {
|
|
margin: 12px 0;
|
|
border: none;
|
|
}
|
|
|
|
.note {
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.settings {
|
|
padding: 20px;
|
|
}
|
|
|
|
.settings p {
|
|
color: var(--nav);
|
|
padding: 8px;
|
|
border-bottom: 2px solid var(--background-4);
|
|
}
|
|
|
|
.field-list {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.field-list li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 4px 0;
|
|
border-bottom: 1px solid var(--background-4);
|
|
}
|
|
|
|
.field-prop {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
margin: 4px;
|
|
}
|
|
|
|
.field-prop > label,
|
|
.field-prop > input {
|
|
height: 34px;
|
|
color: var(--text-1);
|
|
margin-right: -1px;
|
|
border: 1px solid;
|
|
border-color: var(--nav-faded-hover);
|
|
}
|
|
|
|
.field-prop label {
|
|
padding: 0 9px;
|
|
line-height: 1.94rem;
|
|
background-color: var(--node-background-label);
|
|
white-space: nowrap;
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
|
|
.field-prop input {
|
|
width: 100%;
|
|
line-height: 1.6rem;
|
|
background-color: var(--node-background-input);
|
|
color: var(--text-1);
|
|
padding-left: 9px;
|
|
font-size: 18px;
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.field-prop svg {
|
|
padding: 4px;
|
|
margin: 0 4px;
|
|
height: 28px;
|
|
width: 28px;
|
|
fill: var(--nav);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.field-prop .hidden svg {
|
|
fill: #be4b2e;
|
|
}
|
|
|
|
.field-prop .dimmed svg {
|
|
fill: var(--nav-faded);
|
|
}
|
|
|
|
.very-large {
|
|
font-size: 80px;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.project h2 {
|
|
color: var(--text-1);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.file-view {
|
|
background-color: var(--background-2);
|
|
border-radius: 6px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.tree-view .entry {
|
|
cursor: pointer;
|
|
padding: 4px 2px;
|
|
padding-left: calc(var(--indent, 0) * 24px);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
background-color: var(--background-2);
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.tree-view .entry:hover {
|
|
background-color: var(--background-3);
|
|
}
|
|
|
|
.tree-view .entry svg {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
[data-ea-publisher] {
|
|
margin: 0 16px 8px;
|
|
}
|
|
|
|
.ea-content {
|
|
margin: 0 !important;
|
|
background: var(--background-2) !important;
|
|
}
|
|
|
|
.ea-content span {
|
|
color: var(--text-2) !important;
|
|
}
|
|
|
|
.ea-content strong {
|
|
color: var(--accent-primary) !important;
|
|
}
|
|
|
|
.ea-callout {
|
|
margin: 0.25rem 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.ea-callout a {
|
|
color: var(--text-3) !important;
|
|
}
|
|
|
|
.sounds {
|
|
padding: 16px;
|
|
}
|
|
|
|
.sound-search-group {
|
|
flex-basis: 350px;
|
|
height: 32px;
|
|
display: flex;
|
|
border-radius: 6px;
|
|
box-shadow: 0 1px 7px -2px #000;
|
|
}
|
|
|
|
.sound-search {
|
|
flex-basis: 100%;
|
|
padding: 8px;
|
|
color: var(--text-1);
|
|
background-color: var(--background-2);
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
margin-right: 0 !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn.add-sound {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
background-color: var(--accent-sounds-1);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn.add-sound:hover {
|
|
background-color: var(--accent-sounds-2);
|
|
}
|
|
|
|
.spacer {
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
.sound-config {
|
|
display: grid;
|
|
grid-template-columns: min-content 2fr min-content min-content min-content 1fr min-content 1fr min-content min-content;
|
|
align-items: center;
|
|
gap: 12px 8px;
|
|
padding: 10px;
|
|
background-color: var(--background-2);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.sound-config:not(:last-child) {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.sound-config .btn {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.sound-config .sound {
|
|
width: 100%;
|
|
}
|
|
|
|
.sound-config label {
|
|
color: var(--text-2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sound-config .delay {
|
|
width: 50px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.sound-config input[type=range] {
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
.sound-config input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.sound-config input[type=range]:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.sound-config input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
border: none;
|
|
height: 16px;
|
|
width: 16px;
|
|
border-radius: 50%;
|
|
background: var(--text-3);
|
|
cursor: pointer;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.sound-config input[type=range]::-moz-range-thumb {
|
|
border: none;
|
|
height: 16px;
|
|
width: 16px;
|
|
border-radius: 50%;
|
|
background: var(--text-3);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sound-config input[type=range]::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 8px;
|
|
cursor: pointer;
|
|
background: var(--background-4);
|
|
border-radius: 2px;
|
|
border: none;
|
|
}
|
|
|
|
.sound-config input[type=range]:focus::-webkit-slider-runnable-track {
|
|
background: var(--background-5);
|
|
}
|
|
|
|
.sound-config input[type=range]::-moz-range-track {
|
|
width: 100%;
|
|
height: 8px;
|
|
cursor: pointer;
|
|
background: var(--background-4);
|
|
border-radius: 2px;
|
|
border: none;
|
|
}
|
|
|
|
.sound-config input[type=range]:focus::-moz-range-track {
|
|
background: var(--background-5);
|
|
}
|
|
|
|
.sound-config .copy[data-command] {
|
|
position: relative;
|
|
}
|
|
|
|
.sound-config .copy[data-command]::after {
|
|
content: attr(data-command);
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
margin-top: 6px;
|
|
padding: 8px 12px;
|
|
background-color: var(--background-3);
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 4px var(--background-1);
|
|
cursor: initial;
|
|
}
|
|
|
|
.sound-config.invalid .play,
|
|
.sound-config.loading .play {
|
|
cursor: initial;
|
|
}
|
|
|
|
.sound-config.playing {
|
|
background-color: var(--background-3);
|
|
}
|
|
|
|
.sound-config.playing .play {
|
|
background-image: linear-gradient(110deg, var(--accent-sounds-3), var(--accent-sounds-3) 45%, var(--accent-sounds-4) 47%, var(--accent-sounds-4) 53%, var(--accent-sounds-3) 55%);
|
|
background-size: 300%;
|
|
background-position: right;
|
|
animation: playing 1s infinite;
|
|
}
|
|
|
|
@keyframes playing {
|
|
0% {
|
|
background-position: left;
|
|
}
|
|
100% {
|
|
background-position: right;
|
|
}
|
|
}
|
|
|
|
.sound-config.loading:not(.invalid) .play svg {
|
|
animation: spinning 2s infinite linear;
|
|
}
|
|
|
|
.sound-config.invalid .sound {
|
|
color: var(--invalid-text);
|
|
}
|
|
|
|
.changelog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
}
|
|
|
|
.changelog-entry {
|
|
background: var(--background-2);
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
padding: 8px;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.changelog-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.changelog-tag {
|
|
--color: hsl(var(--tint, 0), var(--text-saturation), var(--text-lightness));
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 8px;
|
|
border: 1.5px solid var(--color);
|
|
height: 24px;
|
|
border-radius: 12px;
|
|
padding: 0 8px;
|
|
color: var(--color);
|
|
fill: var(--color);
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.changelog-entry .changelog-tag {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.changelog-tag svg {
|
|
margin-right: 4px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.changelog-tag.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.changelog-tag.active {
|
|
background-color: var(--color);
|
|
color: var(--background-2);
|
|
fill: var(--background-2);
|
|
}
|
|
|
|
.changelog-version {
|
|
float: right;
|
|
}
|
|
|
|
.changelog-version > * {
|
|
margin-left: auto;
|
|
font-size: 15px;
|
|
color: var(--text-3);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.changelog-version > *:first-child {
|
|
position: relative;
|
|
margin-right: 19px;
|
|
}
|
|
|
|
.changelog-version > *:first-child::after {
|
|
content: '•';
|
|
position: absolute;
|
|
text-decoration: none;
|
|
right: -12px;
|
|
top: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.changelog-version a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.changelog-content {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.changelog-content ul {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.changelog-entry code {
|
|
background-color: var(--background-5);
|
|
padding: 1px 4px;
|
|
border-radius: 4px;
|
|
color: var(--text-1);
|
|
}
|
|
|
|
.changelog-query {
|
|
display: flex;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.changelog-query > *:not(:first-child) {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.changelog-search {
|
|
flex-basis: 100%;
|
|
background-color: var(--background-2);
|
|
}
|
|
|
|
.changelog-tags {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.versions-controls {
|
|
display: flex;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.version-search {
|
|
min-width: 0px;
|
|
background-color: var(--background-2);
|
|
}
|
|
|
|
.checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 7px 11px;
|
|
border-radius: 6px;
|
|
height: 32px;
|
|
font-size: 1rem;
|
|
color: var(--text-2);
|
|
background-color: var(--background-2);
|
|
box-shadow: 0 1px 7px -2px #000;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.checkbox input {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.versions-controls .checkbox {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.version-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.version-entry {
|
|
display: grid;
|
|
grid-template-columns: 0.8fr 1.2fr 1fr 0.8fr;
|
|
gap: 8px;
|
|
background: var(--background-2);
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
padding: 8px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.version-entry:hover {
|
|
background: var(--background-3);
|
|
}
|
|
|
|
.version-entry > .version-metadata {
|
|
font-size: 1rem;
|
|
align-self: center;
|
|
}
|
|
|
|
.version-entry > .version-id {
|
|
color: var(--text-1);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.navigation {
|
|
display: flex;
|
|
}
|
|
|
|
.navigation > *:not(:last-child) {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.version-detail {
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.version-detail h2,
|
|
.version-detail h3,
|
|
.version-detail h4 {
|
|
color: var(--text-2);
|
|
margin-top: 24px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.version-info {
|
|
background: var(--background-2);
|
|
border-radius: 6px;
|
|
padding: 7px 11px;
|
|
box-shadow: 0 1px 5px -2px #000;
|
|
}
|
|
|
|
.version-metadata {
|
|
color: var(--text-3);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.version-metadata-value {
|
|
color: var(--text-1);
|
|
}
|
|
|
|
.version-metadata-link {
|
|
fill: var(--text-2);
|
|
vertical-align: middle;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.version-metadata-link:hover {
|
|
fill: var(--accent-primary);
|
|
}
|
|
|
|
.version-tabs {
|
|
display: flex;
|
|
margin: 20px 0 10px;
|
|
box-shadow: inset 0 -1px 0 var(--background-4);
|
|
}
|
|
|
|
.version-tabs > * {
|
|
border-bottom: 2px solid transparent;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
color: var(--text-3);
|
|
fill: var(--text-3);
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.version-tabs > * > svg {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.version-tabs > .selected {
|
|
border-color: var(--text-3);
|
|
color: var(--text-1);
|
|
}
|
|
|
|
.ace_editor,
|
|
.ace_gutter,
|
|
.ace_gutter .ace_layer,
|
|
.ace_content {
|
|
color: var(--text-2) !important;
|
|
background-color: var(--background-2) !important;
|
|
border: none;
|
|
}
|
|
|
|
.ace_cursor {
|
|
color: var(--text-1) !important;
|
|
}
|
|
|
|
.ace_gutter-active-line {
|
|
background-color: var(--background-3) !important;
|
|
}
|
|
|
|
.ace_tag,
|
|
.ace_variable {
|
|
color: var(--editor-variable) !important;
|
|
}
|
|
|
|
.ace_string {
|
|
color: var(--editor-string) !important;
|
|
}
|
|
|
|
.ace_constant {
|
|
color: var(--editor-constant) !important;
|
|
}
|
|
|
|
.ace_numeric {
|
|
color: var(--editor-number) !important;
|
|
}
|
|
|
|
.ace_markup,
|
|
.ace_keyword {
|
|
color: unset !important;
|
|
}
|
|
|
|
.ace_marker-layer .ace_selection {
|
|
background-color: var(--selection) !important;
|
|
}
|
|
|
|
.giscus-container {
|
|
margin-top: 16px;
|
|
min-height: 325.667px;
|
|
}
|
|
|
|
.guide-card {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: var(--text-2);
|
|
background-color: var(--background-2);
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.guide-card:not(:last-child) {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.guide-versions {
|
|
color: var(--text-3);
|
|
float: right;
|
|
}
|
|
|
|
.guide {
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.guide .navigation > :first-child {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.guide-share.active {
|
|
fill: var(--accent-success);
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.guide-tags {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.guide .ad {
|
|
margin: 12px 0 8px;
|
|
}
|
|
|
|
.guide .ad[data-ea-type="image"] {
|
|
float: right;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.guide-toc {
|
|
display: inline-block;
|
|
border: 2px solid var(--background-6);
|
|
border-radius: 6px;
|
|
padding: 8px 16px;
|
|
line-height: 1.2;
|
|
font-size: 90%;
|
|
}
|
|
|
|
.guide-content {
|
|
color: var(--text-2);
|
|
margin-top: 12px;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.guide-content p {
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.guide-content h1,
|
|
.guide-content h2,
|
|
.guide-content h3,
|
|
.guide-content h4,
|
|
.guide-content h5,
|
|
.guide-content h6 {
|
|
margin: 1.2em 0 0.4em;
|
|
position: relative;
|
|
}
|
|
|
|
.guide-content h1 > [id],
|
|
.guide-content h2 > [id],
|
|
.guide-content h3 > [id],
|
|
.guide-content h4 > [id],
|
|
.guide-content h5 > [id],
|
|
.guide-content h6 > [id] {
|
|
fill: var(--text-3);
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
float: left;
|
|
padding-right: 4px;
|
|
margin-left: -20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.guide-content h1 > [id] *,
|
|
.guide-content h2 > [id] *,
|
|
.guide-content h3 > [id] *,
|
|
.guide-content h4 > [id] *,
|
|
.guide-content h5 > [id] *,
|
|
.guide-content h6 > [id] * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.guide-content h1:hover > [id],
|
|
.guide-content h2:hover > [id],
|
|
.guide-content h3:hover > [id],
|
|
.guide-content h4:hover > [id],
|
|
.guide-content h5:hover > [id],
|
|
.guide-content h6:hover > [id] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.guide-content blockquote {
|
|
border-left: 4px solid var(--background-6);
|
|
color: var(--text-3);
|
|
padding-left: 0.7em;
|
|
margin: 0.7em 0;
|
|
}
|
|
|
|
.guide-content blockquote > p {
|
|
padding: 0.3em 0;
|
|
}
|
|
|
|
.guide-content a {
|
|
text-decoration: underline;
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.guide-content ul, .guide-content ol {
|
|
padding-left: 1.6em;
|
|
margin: 0.2em 0 0.5em;
|
|
}
|
|
|
|
.guide-content li + li {
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.guide-content img {
|
|
border-radius: 0.2em;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.guide-content code {
|
|
display: inline-block;
|
|
padding: 0.1em 0.4em;
|
|
margin: 0;
|
|
background-color: var(--background-2);
|
|
border-radius: 6px;
|
|
overflow-wrap: break-word;
|
|
word-break: break-all;
|
|
font-size: 85%;
|
|
}
|
|
|
|
.guide-content h1 code,
|
|
.guide-content h2 code,
|
|
.guide-content h3 code,
|
|
.guide-content h4 code,
|
|
.guide-content h5 code,
|
|
.guide-content h6 code {
|
|
font-size: 100%;
|
|
}
|
|
|
|
.guide-content pre > code {
|
|
display: block;
|
|
padding: 0.8em;
|
|
margin: 0.2em 0 0.5em;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.guide-content .hljs-attr {
|
|
color: var(--editor-variable);
|
|
}
|
|
|
|
.guide-content .hljs-string {
|
|
color: var(--editor-string);
|
|
}
|
|
|
|
.guide-content .hljs-number {
|
|
color: var(--editor-number);
|
|
}
|
|
|
|
.guide-content .hljs-keyword {
|
|
color: var(--editor-constant);
|
|
}
|
|
|
|
@media screen and (max-width: 720px) {
|
|
.sound-search-group {
|
|
margin-bottom: 8px;
|
|
flex-basis: 100%;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.sounds-controls {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sounds .btn {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.sounds .btn svg {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.sounds .btn span {
|
|
display: none;
|
|
}
|
|
|
|
.sound-config {
|
|
grid-template-columns: min-content min-content 1fr min-content 1fr min-content;
|
|
grid-template-areas:
|
|
"play sound sound sound sound copy"
|
|
"pitch-label pitch-label pitch volume-label volume remove";
|
|
}
|
|
.sound-config .play { grid-area: play; }
|
|
.sound-config .sound { grid-area: sound; }
|
|
.sound-config .delay-label { display: none; }
|
|
.sound-config .delay { display: none; }
|
|
.sound-config .pitch-label { grid-area: pitch-label; }
|
|
.sound-config .pitch { grid-area: pitch; }
|
|
.sound-config .volume-label { grid-area: volume-label; }
|
|
.sound-config .volume { grid-area: volume; }
|
|
.sound-config .copy { grid-area: copy; }
|
|
.sound-config .remove { grid-area: remove; }
|
|
|
|
.version-entry {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@keyframes spinning {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* SMALL */
|
|
@media screen and (max-width: 580px) {
|
|
.home {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.home > * {
|
|
grid-column: 1 / 2;
|
|
}
|
|
|
|
.title h1 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
body nav li {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
main.has-preview {
|
|
padding-right: 0;
|
|
}
|
|
|
|
main .controls {
|
|
top: 64px
|
|
}
|
|
|
|
.tree {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.popup-source {
|
|
width: 100vw;
|
|
}
|
|
|
|
.source {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.popup-preview {
|
|
width: 100vw;
|
|
height: unset;
|
|
bottom: 0;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.popup-preview canvas {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.btn.btn.large-input,
|
|
.btn-menu .result-list {
|
|
width: calc(100vw - 32px);
|
|
}
|
|
|
|
.generator-picker {
|
|
justify-content: center;
|
|
}
|
|
|
|
.version-metadata-hide {
|
|
display: none;
|
|
}
|
|
|
|
.guide-versions {
|
|
display: none;
|
|
}
|
|
}
|