This commit is contained in:
parent
31a7350a10
commit
06b1250d47
|
@ -77,7 +77,7 @@
|
||||||
codeString: '#ffb675',
|
codeString: '#ffb675',
|
||||||
codeNumber: '#cfff9e',
|
codeNumber: '#cfff9e',
|
||||||
codeBoolean: '#c59eff',
|
codeBoolean: '#c59eff',
|
||||||
deckDivider: '#000',
|
deckBg: '#000',
|
||||||
htmlThemeColor: '@bg',
|
htmlThemeColor: '@bg',
|
||||||
X2: ':darken<2<@panel',
|
X2: ':darken<2<@panel',
|
||||||
X3: 'rgba(255, 255, 255, 0.05)',
|
X3: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
|
|
@ -77,7 +77,7 @@
|
||||||
codeString: '#b98710',
|
codeString: '#b98710',
|
||||||
codeNumber: '#0fbbbb',
|
codeNumber: '#0fbbbb',
|
||||||
codeBoolean: '#62b70c',
|
codeBoolean: '#62b70c',
|
||||||
deckDivider: ':darken<3<@bg',
|
deckBg: ':darken<3<@bg',
|
||||||
htmlThemeColor: '@bg',
|
htmlThemeColor: '@bg',
|
||||||
X2: ':darken<2<@panel',
|
X2: ':darken<2<@panel',
|
||||||
X3: 'rgba(0, 0, 0, 0.05)',
|
X3: 'rgba(0, 0, 0, 0.05)',
|
||||||
|
|
|
@ -83,6 +83,6 @@
|
||||||
fgTransparentWeak: ':alpha<0.75<@fg',
|
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||||
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
|
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
|
||||||
deckDivider: '#142022',
|
deckBg: '#142022',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -282,7 +282,7 @@ async function deleteProfile() {
|
||||||
|
|
||||||
--margin: var(--marginHalf);
|
--margin: var(--marginHalf);
|
||||||
|
|
||||||
--deckDividerThickness: 5px;
|
--columnGap: 6px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100dvh;
|
height: 100dvh;
|
||||||
|
@ -306,6 +306,7 @@ async function deleteProfile() {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: clip;
|
overflow-y: clip;
|
||||||
|
background: var(--deckBg);
|
||||||
|
|
||||||
&.center {
|
&.center {
|
||||||
> .section:first-of-type {
|
> .section:first-of-type {
|
||||||
|
@ -327,14 +328,16 @@ async function deleteProfile() {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-right: solid var(--deckDividerThickness) var(--deckDivider);
|
margin-top: var(--columnGap);
|
||||||
|
margin-bottom: var(--columnGap);
|
||||||
|
margin-right: var(--columnGap);
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
border-left: solid var(--deckDividerThickness) var(--deckDivider);
|
margin-left: var(--columnGap);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .column:not(:last-of-type) {
|
> .column:not(:last-of-type) {
|
||||||
border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
|
margin-bottom: var(--columnGap);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -15,9 +15,10 @@
|
||||||
>
|
>
|
||||||
<svg viewBox="0 0 256 128" :class="$style.tabShape">
|
<svg viewBox="0 0 256 128" :class="$style.tabShape">
|
||||||
<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">
|
<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">
|
||||||
<path d="M149.512,4.707L108.507,4.707C116.252,4.719 118.758,14.958 118.758,14.958C118.758,14.958 121.381,25.283 129.009,25.209L149.512,25.209L149.512,4.707Z" style="fill:var(--deckDivider);"/>
|
<path d="M149.512,4.707L108.507,4.707C116.252,4.719 118.758,14.958 118.758,14.958C118.758,14.958 121.381,25.283 129.009,25.209L149.512,25.209L149.512,4.707Z" style="fill:var(--deckBg);"/>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
<div :class="$style.color"></div>
|
||||||
<button v-if="isStacked && !isMainColumn" :class="$style.toggleActive" class="_button" @click="toggleActive">
|
<button v-if="isStacked && !isMainColumn" :class="$style.toggleActive" class="_button" @click="toggleActive">
|
||||||
<template v-if="active"><i class="ti ti-chevron-up"></i></template>
|
<template v-if="active"><i class="ti ti-chevron-up"></i></template>
|
||||||
<template v-else><i class="ti ti-chevron-down"></i></template>
|
<template v-else><i class="ti ti-chevron-down"></i></template>
|
||||||
|
@ -240,6 +241,7 @@ function onDrop(ev) {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
&.draghover {
|
&.draghover {
|
||||||
&:after {
|
&:after {
|
||||||
|
@ -279,6 +281,7 @@ function onDrop(ev) {
|
||||||
&:not(.active) {
|
&:not(.active) {
|
||||||
flex-basis: var(--deckColumnHeaderHeight);
|
flex-basis: var(--deckColumnHeaderHeight);
|
||||||
min-height: var(--deckColumnHeaderHeight);
|
min-height: var(--deckColumnHeaderHeight);
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.naked {
|
&.naked {
|
||||||
|
@ -291,10 +294,22 @@ function onDrop(ev) {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .body {
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.paged {
|
&.paged {
|
||||||
background: var(--bg) !important;
|
background: var(--bg) !important;
|
||||||
|
|
||||||
|
> .body {
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -304,7 +319,7 @@ function onDrop(ev) {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
line-height: var(--deckColumnHeaderHeight);
|
line-height: var(--deckColumnHeaderHeight);
|
||||||
height: var(--deckColumnHeaderHeight);
|
height: var(--deckColumnHeaderHeight);
|
||||||
padding: 0 16px;
|
padding: 0 16px 0 28px;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
color: var(--panelHeaderFg);
|
color: var(--panelHeaderFg);
|
||||||
background: var(--panelHeaderBg);
|
background: var(--panelHeaderBg);
|
||||||
|
@ -313,6 +328,16 @@ function onDrop(ev) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.color {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
width: 3px;
|
||||||
|
height: calc(100% - 20px);
|
||||||
|
background: var(--accent);
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
.tabShape {
|
.tabShape {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -364,5 +389,9 @@ function onDrop(ev) {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
container-type: size;
|
container-type: size;
|
||||||
background-color: var(--bg);
|
background-color: var(--bg);
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue