You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

764 lines
24 KiB

*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--safe-area-inset-left: env(safe-area-inset-left,0px);
--safe-area-inset-right: env(safe-area-inset-right,0px);
--safe-area-inset-top: env(safe-area-inset-top,0px);
--safe-area-inset-bottom: env(safe-area-inset-bottom,0px);
--titlebar-area-inset-top: env(titlebar-area-y,0px);
--titlebar-area-inset-width-left: env(titlebar-area-x,0px);
--titlebar-area-inset-width-right: calc(100vw - env(titlebar-area-width,100vw) - var(--titlebar-area-inset-width-left));
--titlebar-area-inset-height: env(titlebar-area-height,0px);
}
@media not (display-mode: fullscreen) {
:root:not(.window-controls-overlay) {
--titlebar-area-inset-width-left: 0px;
--titlebar-area-inset-width-right: 0px;
--titlebar-area-inset-top: 0px;
--titlebar-area-inset-height: 0px;
}
}
:root {
--font-family-interface: -apple-system, BlinkMacSystemFont, "Rubik", sans-serif;
--font-family-code: ui-monospace, "Noto Sans Mono", "Cousine", monospace;
--line-height-code: 1.4;
--transition-fast: 80ms;
--selection-color: inherit;
--selection-background: #75b1ff38;
--selection-background-inactive: #a1a1a138;
--scrollbar-width: 16px;
--scrollbar-height: 16px;
--scrollbar-border-width: 4px;
}
:root:-moz-window-inactive {
--selection-background: var(--selection-background-inactive);
}
html {
width: 100%;
height: calc(100% + var(--safe-area-inset-top));
background: #121212;
overflow: hidden;
}
body {
position: fixed;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: #cccccc;
font-size: 14px;
font-family: var(--font-family-interface);
background: inherit;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
body::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #1e1e1e;
z-index: 4;
transition: opacity 250ms;
}
:root:not(.startup-fade) body::after {
opacity: 0;
pointer-events: none;
}
body.split.horizontal[data-scaling-change] {
cursor: col-resize;
}
body.split.vertical[data-scaling-change] {
cursor: row-resize;
}
header {
padding-top: calc(var(--safe-area-inset-top) + var(--titlebar-area-inset-top));
position: relative;
--header-height: max(var(--titlebar-area-inset-height),34px);
display: flex;
align-items: center;
--header-gap: 8px;
gap: var(--header-gap);
font-size: 13px;
background: #1e1e1e;
border-bottom: 1px solid #000000;
}
header::before, header::after {
content: "";
height: var(--header-height);
flex-shrink: 0;
-webkit-app-region: no-drag;
}
header::before {
width: calc(var(--safe-area-inset-left) + var(--titlebar-area-inset-width-left));
}
header::after {
width: calc(var(--safe-area-inset-right) + var(--titlebar-area-inset-width-right));
}
body[data-scaling-change] header {
pointer-events: none;
}
header .app-region {
margin: var(--app-region-margin);
margin-bottom: 0;
--app-region-margin: 4px;
position: absolute;
left: 0;
top: 0;
width: calc(100% - var(--app-region-margin) * 2);
height: calc(100% - var(--app-region-margin));
z-index: -1;
-webkit-app-region: drag;
}
:root.window-controls-overlay header .app-region {
--app-region-margin: calc(var(--titlebar-area-inset-height) * 0.12);
}
header .app-icon {
flex-shrink: 0;
display: flex;
}
:root.window-controls-overlay.macOS-device header .app-icon {
display: none;
}
header .app-icon img {
width: 16px;height: 16px;
/*aspect-ratio: 1/1;*/
}
header .app-menubar {
min-width: 0;
align-self: stretch;
display: flex;
z-index: 3;
-webkit-app-region: no-drag;
}
header .app-menubar menu-drop {
min-width: 0;
}
header .app-menubar menu-drop::part(opener) {
min-width: unset;
padding: 0 8px;
background: none;
overflow: hidden;
text-overflow: ellipsis;
}
header .app-menubar menu-drop::part(opener):hover, header .app-menubar menu-drop::part(opener):focus, header .app-menubar menu-drop[data-open]::part(opener) {
color: #ffffff;
background: #ffffff24;
}
header .app-menubar menu-drop:not([data-open])::part(opener):not(:hover):focus:not(:focus-visible) {
color: inherit;
background: none;
}
header .app-menubar menu-drop::part(opener):focus-visible {
color: #ffffff;
background: #ffffff24;
}
/* -- Future Focus Visible --
header .app-menubar menu-drop::part(opener):where(:hover,:focus-visible), header .app-menubar menu-drop[data-open]::part(opener) {
color: #ffffff;
background: #ffffff24;
}
*/
header .app-omnibox {
margin-left: auto;
height: var(--header-height);
align-self: flex-start;
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--header-gap);
color: #ffffff;
}
:root.window-controls-overlay header .app-omnibox {
height: var(--titlebar-area-inset-height);
gap: calc(var(--header-gap) / var(--device-pixel-ratio));
z-index: 5;
}
:root:not(.macOS-device).window-controls-overlay header .app-omnibox {
margin-right: calc(var(--header-gap) * -1);
}
:root.macOS-device.window-controls-overlay header .app-omnibox {
margin-right: -4px;
}
header .app-omnibox button {
background: none;
border: none;
outline: none;
}
header .app-omnibox a {
cursor: default;
}
header .app-omnibox .option {
padding: 5px;
display: flex;
gap: 8px;
align-items: center;
border-radius: 12px;
outline: none;
transition: background-color 250ms linear;
-webkit-app-region: no-drag;
}
:root.window-controls-overlay header .app-omnibox .option {
padding: calc(5px / var(--device-pixel-ratio));
}
header .app-omnibox .option:hover {
background-color: #ffffff14;
}
header .app-omnibox .option:where(:active,:focus-visible) {
background-color: #ffffff22;
}
/* Temp Where */
header .app-omnibox .option:-webkit-any(:active,:focus-visible) {
background-color: #ffffff22;
}
header .app-omnibox .option svg {
width: 14px;
height: 14px;
flex-shrink: 0;
fill: currentColor;
}
:root.window-controls-overlay header .app-omnibox .option svg {
width: calc(14px / var(--device-pixel-ratio));height: calc(14px / var(--device-pixel-ratio));
}
main {
padding: 0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
position: relative;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
--workspace-background: #222222;
--workspace-accent: #ffffff24;
--scaler-size: 16px;
--preview-border-color: #181818;
--main-transition-duration: 400ms;
}
main .workspace {
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
}
/* Temp Where */
body:-webkit-any([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace {
transition: var(--main-transition-duration);
transition-property: width, height, opacity;
}
body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace {
transition: var(--main-transition-duration);
transition-property: width, height, opacity;
}
body.code main .workspace {
width: 100%;
height: 100%;
}
body.split.horizontal main .workspace {
width: calc(50% - calc(var(--scaler-size) * 0.5));
height: 100%;
}
body.split.vertical main .workspace {
width: 100%;
height: calc(50% - calc(var(--scaler-size) * 0.5) - calc(var(--safe-area-inset-bottom) * 0.5));
}
body.split.horizontal[data-scaling-active] main .workspace {
width: calc(var(--scaling-offset) - calc(var(--scaler-size) * 0.5));
}
body.split.vertical[data-scaling-active] main .workspace {
height: calc(var(--scaling-offset) - calc(var(--scaler-size) * 0.5));
}
body.preview main .workspace {
opacity: 0;
}
body.preview.horizontal main .workspace {
width: 0%;
height: 100%;
}
body.preview.vertical main .workspace {
width: 100%;
height: 0%;
}
body[data-scaling-change] main .workspace {
pointer-events: none;
}
main .workspace .workspace-tabs {
--workspace-tabs-padding: 6px;
flex-shrink: 0;
display: flex;
align-items: center;
box-shadow: 0 -1px 0 var(--workspace-accent) inset, 0 -1px 0 var(--workspace-background) inset;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
transition: calc(var(--main-transition-duration) * 0.5);
transition-property: none;
}
main .workspace .workspace-tabs::before, main .workspace .workspace-tabs::after {
content: "";
height: 100%;
flex-shrink: 0;
pointer-events: none;
}
/* Temp Where */
body:-webkit-any([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-tabs::before, body:-webkit-any([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-tabs::after {
transition: width var(--main-transition-duration);
}
body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-tabs::before, body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-tabs::after {
transition: width var(--main-transition-duration);
}
main .workspace .workspace-tabs::before {
width: calc(var(--safe-area-inset-left) + var(--workspace-tabs-padding));
}
main .workspace .workspace-tabs::after {
margin-left: auto;
width: calc(var(--safe-area-inset-right) + var(--workspace-tabs-padding) + var(--minimize-tab-width,0px));
}
main .workspace .workspace-tabs[data-minimize-change]::after {
transition: width calc(var(--main-transition-duration) * 0.55);
}
body.split.horizontal main .workspace .workspace-tabs::after {
width: var(--workspace-tabs-padding);
}
body.preview.horizontal main .workspace .workspace-tabs::after {
width: var(--workspace-tabs-padding);
}
main .workspace .workspace-tabs::-webkit-scrollbar {
display: none;
}
main .workspace .workspace-tabs .tab {
margin-right: -1px;
margin-top: 3px;
padding: calc(6px - var(--tab-border-width));
padding-left: calc(10px - var(--tab-border-width));
padding-bottom: calc(8px - var(--tab-border-width));
position: relative;
min-width: 80px;
flex-shrink: 0;
gap: 6px;
justify-content: space-between;
color: #aaaaaa;
font-size: 12px;
background: none;
outline: none;
}
main .workspace .workspace-tabs .tab:not([data-editor-change]):not(.active) + .tab:not([data-editor-change]):not(.active)::before, main .workspace .workspace-tabs > .tab:not([data-editor-change]):not(.active) + :nth-last-child(2):not([data-editor-change]):not(.active)::before, main .workspace .workspace-tabs > .tab + :nth-last-child(2):not([data-editor-change]):not(.active)::after {
content: "";
position: absolute;
right: 100%;
width: 1px;
height: 14px;
background: currentColor;
opacity: 0.5;
pointer-events: none;
z-index: 1;
}
main .workspace .workspace-tabs > .tab + :nth-last-child(2):not([data-editor-change]):not(.active)::after {
left: 100%;
right: unset;
}
main .workspace .workspace-tabs .tab:focus-visible {
border-bottom-color: #ffffff80;
}
main .workspace .workspace-tabs .tab.active {
color: #eaeaea;
background: var(--workspace-background);
border-left-color: var(--workspace-accent);
border-top-color: var(--workspace-accent);
border-right-color: var(--workspace-accent);
}
body[data-editor-change] main .workspace .workspace-tabs .tab[data-editor-change] {
margin-right: var(--tab-margin-right);
opacity: 0;
pointer-events: none;
transform: scale(0);
transform-origin: left center;
transition: inherit;
transition-property: margin-right, opacity, transform;
}
main .workspace .workspace-tabs .tab[data-editor-unsaved] {
font-style: italic;
}
main .workspace .workspace-tabs .tab [data-editor-rename] {
margin: calc(calc(var(--editor-rename-padding-y) + var(--editor-rename-border-width)) * -1) calc(calc(var(--editor-rename-padding-x) + var(--editor-rename-border-width)) * -1);
padding: var(--editor-rename-padding-y) var(--editor-rename-padding-x);
--editor-rename-padding-x: 4px;
--editor-rename-padding-y: 3px;
min-width: calc(var(--editor-name-width) + calc(var(--editor-rename-padding-x) + var(--editor-rename-border-width)) * 2);
width: calc(var(--editor-rename-width,0px) + calc(var(--editor-rename-border-width) * 2));
color: inherit;
font: inherit;
background: none;
border: var(--editor-rename-border-width) solid #ffffff80;
--editor-rename-border-width: 1px;
border-radius: 4px;
}
main .workspace .workspace-tabs .tab [data-editor-name] {
pointer-events: none;
}
main .workspace .workspace-tabs .tab [data-editor-rename] ~ [data-editor-name] {
display: none;
}
main .workspace .workspace-tabs .tab[data-editor-unsaved] [data-editor-name]::after {
content: "*";
margin-left: 0.5ch;
font-size: 13px;
font-style: normal;
line-height: 12px;
}
main .workspace .workspace-tabs .create-editor-button {
margin-left: calc(var(--workspace-tabs-padding) + 1px);
margin-bottom: 1px;
padding: 6px;
display: flex;
align-items: center;
color: #aaaaaa;
background: none;
border: none;
border-radius: 6px;
outline: none;
}
main .workspace .workspace-tabs .create-editor-button:only-child {
display: none;
}
main .workspace .workspace-tabs .create-editor-button:hover, main .workspace .workspace-tabs .create-editor-button:active {
color: #ffffff;
background-color: #ffffff24;
}
main .workspace .workspace-tabs .create-editor-button:focus-visible {
color: #ffffff;
background-color: #ffffff24;
}
/* -- Future Where --
main .workspace .workspace-tabs .create-editor-button:where(:hover,:active,:focus-visible) {
color: #ffffff;
background-color: #ffffff24;
}
*/
main .workspace .workspace-tabs .create-editor-button svg {
width: 8px;height: 8px;
/*aspect-ratio: 1/1;*/
fill: currentColor;
transform: rotate(45deg);
}
main .workspace .workspace-editors {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border: 0 solid transparent;
}
:root:not(.startup-fade) main .workspace .workspace-editors:empty {
border-width: 0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}
/* Temp Where */
:root:not(.startup-fade) body:-webkit-any([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-editors:empty {
transition: var(--main-transition-duration);
transition-property: border-width, border-color;
}
:root:not(.startup-fade) body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-editors:empty {
transition: var(--main-transition-duration);
transition-property: border-width, border-color;
}
:root:not(.startup-fade) main .workspace .workspace-editors:empty::before {
content: "No Editors Open";
padding: 8px;
text-align: center;
}
/* Temp Where */
:root:not(.startup-fade) body:-webkit-any([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-editors:empty::before {
transition: transform var(--main-transition-duration);
}
:root:not(.startup-fade) body[data-view-change] main .workspace .workspace-editors:empty::before {
white-space: nowrap;
}
:root:not(.startup-fade) body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-editors:empty::before {
transition: transform var(--main-transition-duration);
}
:root:not(.startup-fade) body.preview main .workspace .workspace-editors:empty::before {
transform: scale(0);
}
:root:not(.startup-fade) body.split.horizontal main .workspace .workspace-editors:empty {
border-right-width: 0;
}
:root:not(.startup-fade) body.preview.horizontal main .workspace .workspace-editors:empty {
border-right-width: 0;
}
@media (orientation: portrait) and (max-aspect-ratio: 5/8) {
:root:not(.startup-fade) body.split.horizontal main .workspace .workspace-editors:empty {
border-bottom-color: var(--preview-border-color);
}
:root:not(.startup-fade) body.preview.horizontal main .workspace .workspace-editors:empty {
border-bottom-color: var(--preview-border-color);
}
}
:root:not(.startup-fade) body.split.vertical main .workspace .workspace-editors:empty {
border-bottom-width: 0;
}
:root:not(.startup-fade) body.preview.vertical main .workspace .workspace-editors:empty {
border-bottom-width: 0;
}
main .workspace .editor {
position: absolute;
width: 100%;
height: 100%;
--background: var(--workspace-background);
border: solid transparent;
border-width: 0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
visibility: hidden;
--scrollbar-width: 18px;
--scrollbar-height: 18px;
--scrollbar-border-width: 5px;
}
/* Temp Where */
body:-webkit-any([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .editor {
transition: var(--main-transition-duration);
transition-property: border-width, border-color;
}
body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .editor {
transition: var(--main-transition-duration);
transition-property: border-width, border-color;
}
body.split.horizontal main .workspace .editor {
border-right-width: 0;
}
body.preview.horizontal main .workspace .editor {
border-right-width: 0;
}
@media (orientation: portrait) and (max-aspect-ratio: 5/8) {
body.split.horizontal main .workspace .editor {
border-bottom-color: var(--preview-border-color);
}
body.preview.horizontal main .workspace .editor {
border-bottom-color: var(--preview-border-color);
}
}
body.split.vertical main .workspace .editor {
border-bottom-width: 0;
}
body.preview.vertical main .workspace .editor {
border-bottom-width: 0;
}
main .workspace .editor:not(.active) {
z-index: -1;
}
main .workspace .editor.active {
visibility: visible;
}
main .scaler {
position: absolute;
background: #424242;
border: 0 solid transparent;
box-shadow: 0 0 2px 1px #00000028;
touch-action: none;
z-index: 1;
transition: background-color var(--transition-fast);
}
/* Temp Where */
body:-webkit-any([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .scaler {
transition: var(--main-transition-duration);
transition-property: left, top, width, height, border-width, border-color, opacity;
}
body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .scaler {
transition: var(--main-transition-duration);
transition-property: left, top, width, height, border-width, border-color, opacity;
}
main .scaler:hover, body[data-scaling-change] main .scaler {
background: #4f4f4f;
}
body.code main .scaler {
--scaler-size: 0px;
opacity: 0;
}
body.preview main .scaler {
--scaler-size: 0px;
opacity: 0;
}
body.horizontal main .scaler {
top: 0;
width: var(--scaler-size);
height: 100%;
cursor: col-resize;
}
@media (orientation: portrait) and (max-aspect-ratio: 5/8) {
body.horizontal main .scaler {
border-bottom-width: var(--safe-area-inset-bottom);
border-bottom-color: var(--preview-border-color);
}
}
body.vertical main .scaler {
left: 0;
width: 100%;
height: var(--scaler-size);
cursor: row-resize;
}
body.code.horizontal main .scaler {
left: 100%;
}
body.code.vertical main .scaler {
top: 100%;
}
body.split.horizontal main .scaler {
left: calc(50% - calc(var(--scaler-size) * 0.5));
}
body.split.vertical main .scaler {
top: calc(50% - calc(var(--scaler-size) * 0.5) - calc(var(--safe-area-inset-bottom) * 0.5));
}
body.split.horizontal[data-scaling-active] main .scaler {
left: calc(var(--scaling-offset) - calc(var(--scaler-size) * 0.5));
}
body.split.vertical[data-scaling-active] main .scaler {
top: calc(var(--scaling-offset) - calc(var(--scaler-size) * 0.5));
}
body.preview.horizontal main .scaler {
left: calc(var(--scaler-size) * -1);
}
body.preview.vertical main .scaler {
top: calc(var(--scaler-size) * -1);
}
main .preview {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 50%;
background: #ffffff;
border: solid var(--preview-border-color);
border-width: 0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
z-index: 1;
}
/* Temp Where */
body:-webkit-any([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .preview {
transition: var(--main-transition-duration);
transition-property: width, height, border-width, visibility, opacity;
}
body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .preview {
transition: var(--main-transition-duration);
transition-property: width, height, border-width, visibility, opacity;
}
body.code main .preview {
visibility: hidden;
opacity: 0;
}
body.code.horizontal main .preview {
width: 0%;
height: 100%;
border-left-width: 0;
}
body.code.vertical main .preview {
width: 100%;
height: 0%;
}
body.split.horizontal main .preview {
width: calc(50% - calc(var(--scaler-size) * 0.5));
height: 100%;
border-left-width: 0;
}
body.split.vertical main .preview {
width: 100%;
height: calc(50% - calc(var(--scaler-size) * 0.5) + var(--safe-area-inset-bottom) * 0.5);
}
body.split.horizontal[data-scaling-active] main .preview {
width: calc(100% - var(--scaling-offset) - calc(var(--scaler-size) * 0.5));
}
body.split.vertical[data-scaling-active] main .preview {
height: calc(100% - var(--scaling-offset) - calc(var(--scaler-size) * 0.5));
}
body.preview main .preview {
width: 100%;
height: 100%;
}
body[data-scaling-change] main .preview {
pointer-events: none;
}
button {
color: inherit;
font: inherit;
border-radius: 0;
}
a {
color: inherit;
text-decoration: none;
}
num-text {
--padding: 8px;
caret-color: var(--color);
font-family: var(--font-family-code);
line-height: var(--line-height-code);
--selection-background: inherit;
--selection-background-inactive: inherit;
background: var(--background);
--background: #2d2d2d;
scrollbar-color: #808080 var(--background);
}
num-text::part(container) {
border-radius: inherit;
}
input:is([type="text"],[type="url"]) {
padding: 8px;
color: #eaeaea;
caret-color: #eaeaea;
font-size: 13px;
font-family: var(--font-family-code);
line-height: var(--line-height-code);
background: #2d2d2d;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
appearance: none;
}
input[type="url"]:invalid {
color: #ffa600;
caret-color: #ffa600;
background: #362f21;
}
input[type="url"]:valid:not(:placeholder-shown):focus {
color: #60df20;
caret-color: #60df20;
background: #2a3126;
}
::placeholder {
color: inherit;
opacity: 0.55;
white-space: pre-wrap;
}
::selection {
color: var(--selection-color);
background: var(--selection-background);
}
::selection:window-inactive {
background: var(--selection-background-inactive);
}