mirror of https://gitee.com/godoos/godoos.git
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
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);
|
|
}
|