style(control/app.css)

This commit is contained in:
2025-11-23 13:33:56 +01:00
parent 497f7c6fe1
commit 6fe3a5f1c9
+47 -71
View File
@@ -2,93 +2,69 @@
/* Adding more color steps */ /* Adding more color steps */
@theme { @theme {
--color-stone-150: oklch(0.9465 0.002 77.571); --color-stone-150: oklch(0.9465 0.002 77.571);
--color-stone-250: oklch(0.896 0.004 52.542); --color-stone-250: oklch(0.896 0.004 52.542);
--color-stone-350: oklch(0.789 0.0075 56.313); --color-stone-350: oklch(0.789 0.0075 56.313);
--color-stone-450: oklch(0.631 0.0115 57.165); --color-stone-450: oklch(0.631 0.0115 57.165);
--color-stone-550: oklch(0.4985 0.012 65.855); --color-stone-550: oklch(0.4985 0.012 65.855);
--color-stone-650: oklch(0.409 0.0105 70.599); --color-stone-650: oklch(0.409 0.0105 70.599);
--color-stone-750: oklch(0.321 0.0085 50.928); --color-stone-750: oklch(0.321 0.0085 50.928);
--color-stone-850: oklch(0.242 0.0065 45.171); --color-stone-850: oklch(0.242 0.0065 45.171);
} }
/* Splitpanes */ /* Splitpanes */
.splitpanes.mudics-stone-theme { .splitpanes.mudics-stone-theme {
.splitpanes__pane { .splitpanes__pane {
@apply bg-stone-900; @apply bg-stone-900;
} }
.splitpanes__splitter { .splitpanes__splitter {
@apply bg-transparent hover:bg-stone-700 active:bg-stone-600 transition-colors duration-200 shrink-0 relative box-border rounded mx-5; @apply bg-transparent hover:bg-stone-700 active:bg-stone-600 transition-colors duration-200 shrink-0 relative box-border rounded mx-5;
/* box-sizing: border-box; /* box-sizing: border-box;
position: relative; position: relative;
flex-shrink: 0; */ flex-shrink: 0; */
&:before, &:before,
&:after { &:after {
@apply bg-stone-750 transition-colors duration-200 absolute top-[50%] left-[50%] content-[''] rounded; @apply bg-stone-750 transition-colors duration-200 absolute top-[50%] left-[50%] content-[''] rounded;
} }
&:hover:before, &:hover:before,
&:hover:after { &:hover:after {
@apply bg-stone-400; @apply bg-stone-400;
} }
&:active:before, &:active:before,
&:active:after { &:active:after {
@apply bg-stone-300; @apply bg-stone-300;
} }
&:first-child { &:first-child {
/* cursor: auto; */ /* cursor: auto; */
} }
} }
} }
.mudics-stone-theme { .mudics-stone-theme {
&.splitpanes .splitpanes .splitpanes__splitter { &.splitpanes .splitpanes .splitpanes__splitter {
@apply z-10; @apply z-10;
} }
/* &.splitpanes--vertical>.splitpanes__splitter, &.splitpanes--horizontal > .splitpanes__splitter,
.splitpanes--vertical>.splitpanes__splitter { .splitpanes--horizontal > .splitpanes__splitter {
@apply w-2.5 cursor-col-resize; @apply h-2 cursor-row-resize;
&:before, &:before,
&:after { &:after {
@apply w-0.5 h-10 translate-y-[-50%]; @apply h-0.5 w-10 translate-x-[-50%];
} }
&:before { &:before {
@apply ml-[calc(-0.75*var(--spacing))]; @apply mt-[calc(-0.7*var(--spacing))];
} }
&:after { &:after {
@apply ml-[calc(0.25*var(--spacing))]; @apply mt-[calc(0.1*var(--spacing))];
} }
} */ }
&.splitpanes--horizontal>.splitpanes__splitter,
.splitpanes--horizontal>.splitpanes__splitter {
@apply h-2 cursor-row-resize;
&:before,
&:after {
@apply h-0.5 w-10 translate-x-[-50%];
}
&:before {
@apply mt-[calc(-0.7*var(--spacing))];
}
&:after {
@apply mt-[calc(0.1*var(--spacing))];
}
}
} }