From 3696373962c4e8a0a067f80997f15fcbaf232d6e Mon Sep 17 00:00:00 2001 From: heliacer Date: Sat, 9 Nov 2024 18:25:40 +0100 Subject: [PATCH 1/2] Zinc Theme --- examples/demo/App.tsx | 11 +- examples/demo/zinc.css | 205 +++++++++++ package.json | 8 +- style/_base.scss | 128 +++---- style/dark.css | 2 - style/dark.scss | 61 ++-- style/gray.css | 2 - style/gray.scss | 68 ++-- style/light.css | 2 - style/light.scss | 75 ++-- style/rounded.css | 2 - style/rounded.css.map | 1 - style/underline.css | 2 - style/underline.css.map | 1 - style/underline.scss | 60 ++-- style/zinc.css | 773 ++++++++++++++++++++++++++++++++++++++++ style/zinc.scss | 278 +++++++++++++++ 17 files changed, 1429 insertions(+), 250 deletions(-) create mode 100644 examples/demo/zinc.css delete mode 100644 style/rounded.css.map delete mode 100644 style/underline.css.map create mode 100644 style/zinc.css create mode 100644 style/zinc.scss diff --git a/examples/demo/App.tsx b/examples/demo/App.tsx index 5c520a9d..93dcbf56 100755 --- a/examples/demo/App.tsx +++ b/examples/demo/App.tsx @@ -252,7 +252,7 @@ class App extends React.Component); + return (); } else if (component === "simpleform") { return @@ -423,10 +423,10 @@ class App extends React.ComponentGray + {/* */} diff --git a/examples/demo/zinc.css b/examples/demo/zinc.css new file mode 100644 index 00000000..501096ca --- /dev/null +++ b/examples/demo/zinc.css @@ -0,0 +1,205 @@ +:root { + /* Zinc color palette */ + --zinc-50: #fafafa; + --zinc-100: #f4f4f5; + --zinc-200: #e4e4e7; + --zinc-300: #d4d4d8; + --zinc-400: #a1a1aa; + --zinc-500: #71717a; + --zinc-600: #52525b; + --zinc-700: #3f3f46; + --zinc-800: #27272a; + --zinc-900: #18181b; + --zinc-950: #09090b; +} + +html, +body { + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; + font-size: medium; + font-family: Roboto, Arial, sans-serif; + background-color: white +} + +#container { + left: 10px; + top: 10px; + right: 10px; + bottom: 10px; + position: absolute; + display: flex; + overflow: hidden; + background-color: white +} + +/* Scrollbar */ + +::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-button { + width: 0px; + height: 0px; +} + +::-webkit-scrollbar-thumb { + cursor: pointer; + background: var(--zinc-200); + border: 4px solid transparent; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb:active { + background: var(--zinc-300); +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-corner { + background: transparent; +} + + + +.flexlayout { + --color-icon: gray !important; + /* To justify the color "gray" used by the separate .svg icons */ +} + +.app { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.toolbar { + margin-bottom: 8px; + display: flex; + align-items: center; + color: var(--zinc-950); +} + +.toolbar select, +.toolbar button { + cursor: pointer; + text-wrap: nowrap; + border: 1px solid var(--zinc-200); + background-color: var(--zinc-100); + border-radius: 5px; +} + +.toolbar button { + padding: 5px 10px; +} + +.toolbar select { + padding: 4px 10px; +} + +.drag-from { + height: auto !important; + background-color: var(--zinc-950) !important; + color: var(--zinc-50); +} + +.contents { + display: flex; + flex-grow: 1; + position: relative; +} + +/* simple_bundled table styling */ +.simple_table { + background-color: var(--zinc-50); + color: var(--zinc-950); + border-collapse: collapse; +} + +.simple_table th { + color: var(--zinc-950); + background-color: var(--zinc-50); + padding: 4px; + border-bottom-color: transparent; + text-align: left; + width: 100px; + min-width: 100px; +} + +.simple_table td { + border-right: 1px solid var(--zinc-300); + border-bottom: 1px solid var(--zinc-300); + padding: 4px; +} + +.simple_table tr:nth-child(even) { + background: var(--zinc-200); +} + +.simple_table tr:nth-child(odd) { + background: var(--zinc-100); +} + +.MuiDataGrid-container--top [role=row], +.MuiDataGrid-container--bottom [role=row] { + background-color: var(--zinc-100) !important; +} + +* { + --DataGrid-rowBorderColor: var(--zinc-200) !important; +} + +.MuiDataGrid-withBorderColor { + border-color: var(--zinc-200) !important; +} + +.MuiDataGrid-root, +.MuiDataGrid-root p { + border: none !important; + color: var(--zinc-950) !important; + +} + +.MuiDataGrid-root button { + color: var(--zinc-950) !important; +} + +.MuiDataGrid-columnSeparator--resizable:hover { + color: var(--zinc-950) !important; +} + +p { + color: var(--zinc-50) !important; +} + +.ag-theme-alpine, +.ag-theme-alpine-dark, +.ag-theme-alpine-auto-dark { + --ag-background-color: transparent !important; + --ag-foreground-color: var(--zinc-100); + --ag-border-color: var(--zinc-300) !important; + --ag-header-background-color: transparent; + --ag-odd-row-background-color: var(--zinc-200); + --ag-checkbox-unchecked-color: var(--zinc-950); +} + +.ag-theme-alpine * { + color: var(--zinc-950) !important; +} + +.ag-row { + border-color: var(--zinc-300); +} + +.token.operator, +.token.entity, +.token.url, +.token.variable { + background-color: transparent !important; +} \ No newline at end of file diff --git a/package.json b/package.json index 6d0755a7..28a12161 100755 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "build:demo": "webpack", "lint:eslint": "eslint src/*", "doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src", - "css": "sass style/rounded.scss style/rounded.css && sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/light.scss test/style/light.css && sass style/dark.scss style/dark.css" + "css": "sass --no-source-map style:style", + "css:dev": "sass --no-source-map --watch style:style" }, "author": "Caplin Systems Ltd", "repository": "https://github.com/caplin/FlexLayout", @@ -77,6 +78,5 @@ "webpack-dev-server": "^5.0.4", "@mui/x-data-grid": "^7.15.0" }, - "dependencies": { - } -} + "dependencies": {} +} \ No newline at end of file diff --git a/style/_base.scss b/style/_base.scss index dc91487b..758b34f7 100755 --- a/style/_base.scss +++ b/style/_base.scss @@ -16,7 +16,7 @@ .flexlayout { &__layout { @include absoluteFill; - display:flex; + display: flex; &_overlay { @include absoluteFill; @@ -24,9 +24,9 @@ } &_tab_stamps { - position:absolute; - top:-10000px; // offscreen - z-index:100; + position: absolute; + top: -10000px; // offscreen + z-index: 100; display: flex; flex-direction: column; align-items: start; @@ -34,22 +34,22 @@ &_moveables { visibility: hidden; - position:absolute; + position: absolute; width: 100px; // size is needed to tabs have something to draw into height: 100px; - top:-20000px; // offscreen + top: -20000px; // offscreen } &_main { @include flexFix; - flex-grow:1; - position:relative; + flex-grow: 1; + position: relative; } } &__layout_border_container { @include flexFix; - flex-grow:1; + flex-grow: 1; } &__layout_border_container_inner { @@ -74,29 +74,33 @@ @include splitter_hover_mixin; } } + &_border { @include splitter_border_mixin; } + &_drag { - position:absolute; - display:flex; + position: absolute; + display: flex; align-items: center; justify-content: center; z-index: 1000; background-color: var(--color-splitter-drag); @include splitter_drag_mixin; } + &_handle { - background-color:#ccc; - border-radius:3px; + background-color: #ccc; + border-radius: 3px; &_horz { - width: 3px; - height:30px; + width: 3px; + height: 30px; } + &_vert { - width: 30px; - height:3px; + width: 30px; + height: 3px; } } @@ -130,7 +134,7 @@ z-index: 1000; background-color: var(--color-edge-marker); pointer-events: none; - display:flex; + display: flex; align-items: center; justify-content: center; } @@ -161,21 +165,21 @@ } &__tabset { - display:flex; + display: flex; flex-direction: column; position: relative; background-color: var(--color-tabset-background); box-sizing: border-box; font-family: var(--font-family); overflow: hidden; - flex-grow:1; + flex-grow: 1; @include tabset_mixin; &_container { @include flexFix; flex-direction: column; overflow: hidden; - flex-grow:1; + flex-grow: 1; } &_tab_divider { @@ -219,7 +223,7 @@ } &_outer_top { - padding:0px 2px 0px 2px; + padding: 0px 2px 0px 2px; border-bottom: 1px solid var(--color-tabset-divider-line); } @@ -243,10 +247,11 @@ padding-right: 4px; box-sizing: border-box; white-space: nowrap; - + &_top { border-top: 2px solid transparent; // if you change this, update the _sizer above } + &_bottom { border-bottom: 2px solid transparent; } @@ -281,11 +286,11 @@ position: relative; &_moveable { - position:relative; - height:100%; - min-width:1px; - min-height:1px; - overflow:auto; + position: relative; + height: 100%; + min-width: 1px; + min-height: 1px; + overflow: auto; box-sizing: border-box; } @@ -311,7 +316,7 @@ &_stretch { background-color: transparent; - color:var(--color-tab-selected); + color: var(--color-tab-selected); width: 100%; padding: 3px 0em; text-wrap: nowrap; @@ -324,28 +329,29 @@ @media (hover: hover) { &:hover { - color:var(--color-tab-selected); + color: var(--color-tab-selected); @include tab_button_stretch_hovered_mixin; } } } &--selected { - background-color:var(--color-tab-selected-background); - color:var(--color-tab-selected); + background-color: var(--color-tab-selected-background); + color: var(--color-tab-selected); @include tab_button_selected_mixin; } + @media (hover: hover) { &:hover { - background-color:var(--color-tab-selected-background); - color:var(--color-tab-selected); + background-color: var(--color-tab-selected-background); + color: var(--color-tab-selected); @include tab_button_hovered_mixin; } } &--unselected { - background-color:var(--color-tab-unselected-background); - color:var(--color-tab-unselected); + background-color: var(--color-tab-unselected-background); + color: var(--color-tab-unselected); @include tab_button_unselected_mixin; } @@ -385,14 +391,16 @@ display: flex; visibility: hidden; border-radius: 4px; + &:hover { @include close_button_hovered_mixin; } } + @media (pointer: coarse) { - &_trailing { - } + &_trailing {} } + @media (hover: hover) { &:hover &_trailing { visibility: visible; @@ -437,23 +445,20 @@ background-color: transparent; border-radius: 4px; padding: 1px; + @media (hover: hover) { &:hover { @include toolbar_button_hovered_mixin; } } - &-min { - } + &-min {} - &-max { - } + &-max {} - &-float { - } + &-float {} - &-close { - } + &-close {} } &_sticky_buttons_container { @@ -505,7 +510,7 @@ &_tab_contents { box-sizing: border-box; - overflow:hidden; + overflow: hidden; background-color: var(--color-border-tab-content); } @@ -551,6 +556,7 @@ transform-origin: top left; transform: rotate(90deg); } + &_left { flex-direction: row-reverse; transform-origin: top right; @@ -562,7 +568,7 @@ &_tab_divider { width: 4px; @include border_tab_divider_mixin; - } + } &_button { display: flex; @@ -580,6 +586,7 @@ color: var(--color-border-tab-selected); @include border_button_selected_mixin; } + @media (hover: hover) { &:hover { background-color: var(--color-border-tab-selected-background); @@ -606,14 +613,16 @@ display: flex; border-radius: 4px; visibility: hidden; + &:hover { @include close_button_hovered_mixin; } } + @media (pointer: coarse) { - &_trailing { - } + &_trailing {} } + @media (hover: hover) { &:hover &_trailing { visibility: visible; @@ -650,14 +659,14 @@ background-color: transparent; border-radius: 4px; padding: 1px; + @media (hover: hover) { &:hover { @include toolbar_button_hovered_mixin; } } - - &-float { - } + + &-float {} &_overflow { display: flex; @@ -669,12 +678,10 @@ } &_overflow_top, - &_overflow_bottom { - } + &_overflow_bottom {} &_overflow_right, - &_overflow_left { - } + &_overflow_left {} } } } @@ -726,6 +733,7 @@ display: flex; justify-content: center; } + &__error_boundary_content { display: flex; align-items: center; @@ -750,11 +758,11 @@ } &__border_sizer { - position:absolute; - top:-30000px; // offscreen + position: absolute; + top: -30000px; // offscreen padding-top: 6px; padding-bottom: 5px; font-size: var(--font-size); font-family: var(--font-family); } -} +} \ No newline at end of file diff --git a/style/dark.css b/style/dark.css index 306cdaaa..20ef76a4 100644 --- a/style/dark.css +++ b/style/dark.css @@ -681,5 +681,3 @@ font-size: var(--font-size); font-family: var(--font-family); } - -/*# sourceMappingURL=dark.css.map */ diff --git a/style/dark.scss b/style/dark.scss index 6f21d0f2..db935b65 100755 --- a/style/dark.scss +++ b/style/dark.scss @@ -80,17 +80,14 @@ $font-family: Roboto, Arial, sans-serif !default; --color-edge-icon: #eee; } } -@mixin tabset_mixin { -} -@mixin tabset_tabbar_mixin { -} +@mixin tabset_mixin {} -@mixin tabset_header_mixin { -} +@mixin tabset_tabbar_mixin {} -@mixin tabset_selected_mixin { -} +@mixin tabset_header_mixin {} + +@mixin tabset_selected_mixin {} @mixin tabset_header_mixin { box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54); @@ -116,33 +113,26 @@ $font-family: Roboto, Arial, sans-serif !default; border-bottom-right-radius: 3px; } -@mixin tab_button_mixin { -} +@mixin tab_button_mixin {} -@mixin tab_button_selected_mixin { -} +@mixin tab_button_selected_mixin {} -@mixin tab_button_unselected_mixin { -} +@mixin tab_button_unselected_mixin {} -@mixin tab_button_hovered_mixin { -} +@mixin tab_button_hovered_mixin {} -@mixin tab_button_stretch_mixin { -} +@mixin tab_button_stretch_mixin {} -@mixin tab_button_stretch_hovered_mixin { -} +@mixin tab_button_stretch_hovered_mixin {} -@mixin border_mixin { -} +@mixin border_mixin {} @mixin close_button_hovered_mixin { - background-color:var(--color-6); + background-color: var(--color-6); } @mixin toolbar_button_hovered_mixin { - background-color:var(--color-4); + background-color: var(--color-4); } @mixin border_button_mixin { @@ -150,33 +140,26 @@ $font-family: Roboto, Arial, sans-serif !default; border-radius: 3px; } -@mixin border_button_selected_mixin { -} +@mixin border_button_selected_mixin {} -@mixin border_button_unselected_mixin { -} +@mixin border_button_unselected_mixin {} @mixin border_button_hovered_mixin { background-color: var(--color-4); } -@mixin splitter_mixin { -} +@mixin splitter_mixin {} -@mixin splitter_hover_mixin { -} +@mixin splitter_hover_mixin {} @mixin splitter_drag_mixin { border-radius: 5px; } -@mixin splitter_border_mixin { -} +@mixin splitter_border_mixin {} -@mixin tabset_tab_divider_mixin { -} +@mixin tabset_tab_divider_mixin {} -@mixin border_tab_divider_mixin { -} +@mixin border_tab_divider_mixin {} -@import "_base"; +@import "_base"; \ No newline at end of file diff --git a/style/gray.css b/style/gray.css index ea352fe4..bd0918c8 100644 --- a/style/gray.css +++ b/style/gray.css @@ -664,5 +664,3 @@ font-size: var(--font-size); font-family: var(--font-family); } - -/*# sourceMappingURL=gray.css.map */ diff --git a/style/gray.scss b/style/gray.scss index 7049b208..cd563b7c 100755 --- a/style/gray.scss +++ b/style/gray.scss @@ -81,17 +81,14 @@ $font_family: Roboto, Arial, sans-serif !default; } -@mixin tabset_mixin { -} +@mixin tabset_mixin {} -@mixin tabset_tabbar_mixin { -} +@mixin tabset_tabbar_mixin {} -@mixin tabset_header_mixin { -} +@mixin tabset_header_mixin {} @mixin tabset_selected_mixin { - background-image: linear-gradient(var(--color-background),var(--color-4)); + background-image: linear-gradient(var(--color-background), var(--color-4)); } @mixin tabset_header_mixin { @@ -99,11 +96,11 @@ $font_family: Roboto, Arial, sans-serif !default; } @mixin tabset_selected_mixin { - background-image: linear-gradient(var(--color-background),var(--color-4)); + background-image: linear-gradient(var(--color-background), var(--color-4)); } @mixin tabset_maximized_mixin { - background-image: linear-gradient(var(--color-6),var(--color-2)); + background-image: linear-gradient(var(--color-6), var(--color-2)); } @mixin tab_top_mixin { @@ -118,64 +115,47 @@ $font_family: Roboto, Arial, sans-serif !default; border-bottom-right-radius: 3px; } -@mixin tab_button_mixin { -} +@mixin tab_button_mixin {} -@mixin tab_button_selected_mixin { -} +@mixin tab_button_selected_mixin {} -@mixin tab_button_unselected_mixin { -} +@mixin tab_button_unselected_mixin {} -@mixin tab_button_hovered_mixin { -} +@mixin tab_button_hovered_mixin {} -@mixin close_button_hovered_mixin { -} +@mixin close_button_hovered_mixin {} -@mixin toolbar_button_hovered_mixin { -} +@mixin toolbar_button_hovered_mixin {} -@mixin border_mixin { -} +@mixin border_mixin {} @mixin border_button_mixin { box-shadow: inset 0 0 5px rgba(0, 0, 0, .15); border-radius: 3px; } -@mixin border_button_selected_mixin { -} +@mixin border_button_selected_mixin {} -@mixin border_button_unselected_mixin { -} +@mixin border_button_unselected_mixin {} -@mixin border_button_hovered_mixin { -} +@mixin border_button_hovered_mixin {} -@mixin tab_button_stretch_mixin { -} +@mixin tab_button_stretch_mixin {} -@mixin tab_button_stretch_hovered_mixin { -} +@mixin tab_button_stretch_hovered_mixin {} -@mixin splitter_mixin { -} +@mixin splitter_mixin {} -@mixin splitter_hover_mixin { -} +@mixin splitter_hover_mixin {} @mixin splitter_drag_mixin { border-radius: 5px; } -@mixin splitter_border_mixin { -} +@mixin splitter_border_mixin {} -@mixin tabset_tab_divider_mixin { -} +@mixin tabset_tab_divider_mixin {} -@mixin border_tab_divider_mixin { -} +@mixin border_tab_divider_mixin {} -@import "_base"; +@import "_base"; \ No newline at end of file diff --git a/style/light.css b/style/light.css index 2a23ca22..b4c924c8 100644 --- a/style/light.css +++ b/style/light.css @@ -665,5 +665,3 @@ font-size: var(--font-size); font-family: var(--font-family); } - -/*# sourceMappingURL=light.css.map */ diff --git a/style/light.scss b/style/light.scss index 3aadc0b5..94961a55 100755 --- a/style/light.scss +++ b/style/light.scss @@ -81,85 +81,62 @@ $font-family: Roboto, Arial, sans-serif !default; } } -@mixin tabset_mixin { -} +@mixin tabset_mixin {} -@mixin tabset_tabbar_mixin { -} +@mixin tabset_tabbar_mixin {} -@mixin tabset_header_mixin { -} +@mixin tabset_header_mixin {} -@mixin tabset_selected_mixin { -} +@mixin tabset_selected_mixin {} -@mixin tabset_maximized_mixin { -} +@mixin tabset_maximized_mixin {} -@mixin tab_top_mixin { -} +@mixin tab_top_mixin {} -@mixin tab_bottom_mixin { -} +@mixin tab_bottom_mixin {} -@mixin tab_button_mixin { -} +@mixin tab_button_mixin {} -@mixin tab_button_selected_mixin { -} +@mixin tab_button_selected_mixin {} @mixin tab_button_unselected_mixin { color: gray; } -@mixin tab_button_hovered_mixin { -} +@mixin tab_button_hovered_mixin {} -@mixin tab_button_stretch_mixin { -} +@mixin tab_button_stretch_mixin {} -@mixin tab_button_stretch_hovered_mixin { -} +@mixin tab_button_stretch_hovered_mixin {} @mixin close_button_hovered_mixin { - background-color:var(--color-3); + background-color: var(--color-3); } @mixin toolbar_button_hovered_mixin { - background-color:var(--color-2); + background-color: var(--color-2); } -@mixin border_mixin { -} +@mixin border_mixin {} -@mixin border_button_mixin { -} +@mixin border_button_mixin {} -@mixin border_button_selected_mixin { -} +@mixin border_button_selected_mixin {} -@mixin border_button_unselected_mixin { -} +@mixin border_button_unselected_mixin {} -@mixin border_button_hovered_mixin { -} +@mixin border_button_hovered_mixin {} -@mixin splitter_mixin { -} +@mixin splitter_mixin {} -@mixin splitter_hover_mixin { -} +@mixin splitter_hover_mixin {} -@mixin splitter_drag_mixin { -} +@mixin splitter_drag_mixin {} -@mixin splitter_border_mixin { -} +@mixin splitter_border_mixin {} -@mixin tabset_tab_divider_mixin { -} +@mixin tabset_tab_divider_mixin {} -@mixin border_tab_divider_mixin { -} +@mixin border_tab_divider_mixin {} -@import "_base"; +@import "_base"; \ No newline at end of file diff --git a/style/rounded.css b/style/rounded.css index 4dfcc6b2..560dce7f 100644 --- a/style/rounded.css +++ b/style/rounded.css @@ -693,5 +693,3 @@ .flexlayout__border_tab_contents { border-radius: 10px; } - -/*# sourceMappingURL=rounded.css.map */ diff --git a/style/rounded.css.map b/style/rounded.css.map deleted file mode 100644 index 458bd379..00000000 --- a/style/rounded.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["rounded.scss","_base.scss"],"names":[],"mappings":"AAkBI;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AChEJ;EAfA;EACA;EACA;EACA;EACA;EAaI;;AAEA;EAnBJ;EACA;EACA;EACA;EACA;EAiBQ;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAjCJ;EACA;EACA;EACA;EAgCQ;EACA;;AAIR;EAxCA;EACA;EACA;EACA;EAuCI;;AAGJ;EA7CA;EACA;EACA;EACA;EA4CI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;IACA;IACA;;;AAOR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAlJA;EACA;EACA;EACA;EAiJI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDrFJ;;ACwFI;EApKJ;EACA;EACA;EACA;EAmKQ;EACA;EACA;;AAGJ;EACI;;AAIJ;EAhLJ;EACA;EACA;EACA;EA+KQ;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EDzMR;EACA;;AC2MQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;EDxOZ;;ACoPQ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDnQZ;;AC2QQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDpThB;;;ACsUQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDnbR;EACA;;ACqbQ;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDheZ;;ACweQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDzgBhB;;;ACihBY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EA7sBJ;EACA;EACA;EACA;EACA;;AA8sBA;EAltBA;EACA;EACA;EACA;EACA;EAgtBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;ADzkBR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI","file":"rounded.css"} \ No newline at end of file diff --git a/style/underline.css b/style/underline.css index 4e877e70..1cf9f64d 100644 --- a/style/underline.css +++ b/style/underline.css @@ -686,5 +686,3 @@ .flexlayout__tab_button_textbox { border: none; } - -/*# sourceMappingURL=underline.css.map */ diff --git a/style/underline.css.map b/style/underline.css.map deleted file mode 100644 index b8d9578c..00000000 --- a/style/underline.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["underline.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;;;ACnEJ;EAfA;EACA;EACA;EACA;EACA;EAaI;;AAEA;EAnBJ;EACA;EACA;EACA;EACA;EAiBQ;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAjCJ;EACA;EACA;EACA;EAgCQ;EACA;;AAIR;EAxCA;EACA;EACA;EACA;EAuCI;;AAGJ;EA7CA;EACA;EACA;EACA;EA4CI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;IACA;IACA;;;AAOR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAlJA;EACA;EACA;EACA;EAiJI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EApKJ;EACA;EACA;EACA;EAmKQ;EACA;EACA;;AAGJ;EACI;EDVR;EACA;EACA;;ACYI;EAhLJ;EACA;EACA;EACA;EA+KQ;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EDvMR;;AC0MQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;ED7NZ;;ACgOQ;EACI;IACI;IACA;ID1NhB;;;AC+NQ;EACI;EACA;EDtOZ;EACA;;ACiPQ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDrQZ;;AC6QQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDtThB;;;ACwUQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EDjYR;EACA;EACA;;ACmYI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ED/aR;;ACkbQ;EACI;EACA;EDhbZ;;ACmbQ;EACI;IACI;IACA;ID9ahB;;;ACmbQ;EACI;EACA;EDzbZ;;AC6bQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDleZ;;AC0eQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID3gBhB;;;ACmhBY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EA7sBJ;EACA;EACA;EACA;EACA;;AA8sBA;EAltBA;EACA;EACA;EACA;EACA;EAgtBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AD7jBR;EACI","file":"underline.css"} \ No newline at end of file diff --git a/style/underline.scss b/style/underline.scss index ef443cbc..3bc27fe8 100755 --- a/style/underline.scss +++ b/style/underline.scss @@ -85,33 +85,26 @@ $font-family: Roboto, Arial, sans-serif !default; } } -@mixin tabset_mixin { -} +@mixin tabset_mixin {} -@mixin tabset_tabbar_mixin { -} +@mixin tabset_tabbar_mixin {} -@mixin tabset_header_mixin { -} +@mixin tabset_header_mixin {} -@mixin tabset_selected_mixin { -} +@mixin tabset_selected_mixin {} -@mixin tabset_maximized_mixin { -} +@mixin tabset_maximized_mixin {} -@mixin tab_top_mixin { -} +@mixin tab_top_mixin {} -@mixin tab_bottom_mixin { -} +@mixin tab_bottom_mixin {} @mixin tab_button_mixin { padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em; } @mixin tab_button_selected_mixin { - border-bottom: var(--underline_height) solid var(--color-underline); + border-bottom: var(--underline_height) solid var(--color-underline); } @mixin tab_button_unselected_mixin { @@ -120,53 +113,46 @@ $font-family: Roboto, Arial, sans-serif !default; } @mixin tab_button_hovered_mixin { - border-bottom: var(--underline_height) solid var(--color-underline-hover); + border-bottom: var(--underline_height) solid var(--color-underline-hover); } @mixin close_button_hovered_mixin { - background-color:var(--color-3); + background-color: var(--color-3); } @mixin toolbar_button_hovered_mixin { - background-color:var(--color-2); + background-color: var(--color-2); } -@mixin tab_button_stretch_mixin { -} +@mixin tab_button_stretch_mixin {} -@mixin tab_button_stretch_hovered_mixin { -} +@mixin tab_button_stretch_hovered_mixin {} -@mixin border_mixin { -} +@mixin border_mixin {} @mixin border_button_mixin { padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em; } @mixin border_button_selected_mixin { - border-bottom: var(--underline_height) solid var(--color-underline); + border-bottom: var(--underline_height) solid var(--color-underline); } @mixin border_button_unselected_mixin { border-bottom: var(--underline_height) solid transparent; - } +} @mixin border_button_hovered_mixin { - border-bottom: var(--underline_height) solid var(--color-underline-hover); + border-bottom: var(--underline_height) solid var(--color-underline-hover); } -@mixin splitter_mixin { -} +@mixin splitter_mixin {} -@mixin splitter_hover_mixin { -} +@mixin splitter_hover_mixin {} -@mixin splitter_drag_mixin { -} +@mixin splitter_drag_mixin {} -@mixin splitter_border_mixin { -} +@mixin splitter_border_mixin {} @mixin tabset_tab_divider_mixin { width: 1px; @@ -183,5 +169,5 @@ $font-family: Roboto, Arial, sans-serif !default; @import "_base"; .flexlayout__tab_button_textbox { - border:none; -} + border: none; +} \ No newline at end of file diff --git a/style/zinc.css b/style/zinc.css new file mode 100644 index 00000000..80f5b283 --- /dev/null +++ b/style/zinc.css @@ -0,0 +1,773 @@ +.dark .flexlayout__layout { + --color-1: #09090b; + --color-2: #18181b; + --color-3: #27272a; + --color-4: #3f3f46; + --color-5: #52525b; + --color-6: #71717a; + --color-text: #fafafa; + --color-background: #09090b; + --color-drag1: #fafafa; + --color-drag2: #fafafa; +} + +.flexlayout__layout { + --color-1: #fafafa; + --color-2: #f4f4f5; + --color-3: #e4e4e7; + --color-4: #d4d4d8; + --color-5: #a1a1aa; + --color-6: #71717a; + --color-text: #09090b; + --color-background: white; + --color-drag1: #09090b; + --color-drag2: #09090b; + --color-drag1-background: transparent; + --color-drag2-background: transparent; + --font-size: medium; + --font-family: Arial, sans-serif; + --color-overflow: var(--color-6); + --color-icon: var(--color-6); + --color-tabset-background: var(--color-background); + --color-tabset-background-selected: var(--color-background); + --color-tabset-background-maximized: var(--color-background); + --color-tabset-divider-line: var(--color-4); + --color-tabset-header-background: var(--color-background); + --color-tabset-header: var(--color-text); + --color-border-tab-content: var(--color-background); + --color-border-background: var(--color-background); + --color-border-divider-line: var(--color-background); + --color-tab-content: var(--color-background); + --color-tab-selected: var(--color-text); + --color-tab-selected-background: var(--color-3); + --color-tab-unselected: var(--color-6); + --color-tab-unselected-background: transparent; + --color-tab-textbox: var(--color-text); + --color-tab-textbox-background: var(--color-3); + --color-border-tab-selected: var(--color-text); + --color-border-tab-selected-background: var(--color-3); + --color-border-tab-unselected: var(--color-6); + --color-border-tab-unselected-background: transparent; + --color-splitter: var(--color-2); + --color-splitter-hover: var(--color-background); + --color-splitter-drag: var(--color-5); + --color-drag-rect-border: var(--color-3); + --color-drag-rect-background: var(--color-background); + --color-drag-rect: var(--color-text); + --color-popup-border: var(--color-3); + --color-popup-unselected: var(--color-text); + --color-popup-unselected-background: var(--color-background); + --color-popup-selected: var(--color-text); + --color-popup-selected-background: var(--color-4); + --color-edge-marker: var(--color-3); + --color-edge-icon: var(--color-text); + background-color: var(--color-background); + line-height: normal; +} +.flexlayout__border_sizer { + padding-top: 8px !important; + padding-bottom: 8px !important; +} +.flexlayout__popup_menu_item { + border-radius: 4px !important; +} +.flexlayout__popup_menu_item:hover { + background-color: var(--color-3) !important; +} +.flexlayout__popup_menu_container { + box-shadow: none !important; + padding: 4px !important; + border-radius: 6px !important; +} +.flexlayout__drag_rect { + border-width: 1px !important; +} +.flexlayout__outline_rect { + border-width: 1px !important; +} +.flexlayout__tab_border { + border: 1px solid var(--color-3); + border-radius: 6px; +} + +.flexlayout__layout { + left: 0; + top: 0; + right: 0; + bottom: 0; + position: absolute; + display: flex; +} +.flexlayout__layout_overlay { + left: 0; + top: 0; + right: 0; + bottom: 0; + position: absolute; + z-index: 1000; +} +.flexlayout__layout_tab_stamps { + position: absolute; + top: -10000px; + z-index: 100; + display: flex; + flex-direction: column; + align-items: start; +} +.flexlayout__layout_moveables { + visibility: hidden; + position: absolute; + width: 100px; + height: 100px; + top: -20000px; +} +.flexlayout__layout_main { + display: flex; + flex-basis: 0px; + min-width: 0; + min-height: 0; + flex-grow: 1; + position: relative; +} +.flexlayout__layout_border_container { + display: flex; + flex-basis: 0px; + min-width: 0; + min-height: 0; + flex-grow: 1; +} +.flexlayout__layout_border_container_inner { + display: flex; + flex-basis: 0px; + min-width: 0; + min-height: 0; + flex-grow: 1; +} +.flexlayout__splitter { + display: flex; + align-items: center; + justify-content: center; + background-color: var(--color-splitter); + touch-action: none; + z-index: 10; + background-color: var(--color-background); +} +.flexlayout__splitter_handle { + background-color: var(--color-3) !important; +} +@media (hover: hover) { + .flexlayout__splitter:hover { + background-color: var(--color-splitter-hover); + transition: background-color ease-in 0.1s; + transition-delay: 0.05s; + background-color: transparent; + } + .flexlayout__splitter:hover .flexlayout__splitter_handle { + background-color: var(--color-4) !important; + } +} +.flexlayout__splitter_drag { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + background-color: var(--color-splitter-drag); + background-color: transparent; +} +.flexlayout__splitter_drag .flexlayout__splitter_handle { + background-color: var(--color-4) !important; +} +.flexlayout__splitter_handle { + background-color: #ccc; + border-radius: 3px; +} +.flexlayout__splitter_handle_horz { + width: 3px; + height: 30px; +} +.flexlayout__splitter_handle_vert { + width: 30px; + height: 3px; +} +.flexlayout__splitter_extra { + touch-action: none; + background-color: transparent; +} +.flexlayout__outline_rect { + position: absolute; + pointer-events: none; + box-sizing: border-box; + border: 2px solid var(--color-drag1); + background: var(--color-drag1-background); + border-radius: 5px; + z-index: 1000; +} +.flexlayout__outline_rect_edge { + pointer-events: none; + border: 2px solid var(--color-drag2); + background: var(--color-drag2-background); + border-radius: 5px; + z-index: 1000; + box-sizing: border-box; +} +.flexlayout__edge_rect { + position: absolute; + z-index: 1000; + background-color: var(--color-edge-marker); + pointer-events: none; + display: flex; + align-items: center; + justify-content: center; +} +.flexlayout__drag_rect { + color: var(--color-drag-rect); + background-color: var(--color-drag-rect-background); + border: 2px solid var(--color-drag-rect-border); + border-radius: 5px; + box-sizing: border-box; + display: flex; + justify-content: center; + flex-direction: column; + overflow: hidden; + padding: 0.3em 0.8em; + word-wrap: break-word; + font-size: var(--font-size); + font-family: var(--font-family); +} +.flexlayout__row { + display: flex; + flex-basis: 0px; + min-width: 0; + min-height: 0; + position: relative; + box-sizing: border-box; + overflow: hidden; +} +.flexlayout__tabset { + display: flex; + flex-direction: column; + position: relative; + background-color: var(--color-tabset-background); + box-sizing: border-box; + font-family: var(--font-family); + overflow: hidden; + flex-grow: 1; +} +.flexlayout__tabset_content { + color: var(--color-text); +} +.flexlayout__tabset_container { + border: 1px solid var(--color-3); + border-radius: 6px; +} +.flexlayout__tabset_tabbar_inner_tab_container { + padding: 0 4px 0 4px !important; +} +.flexlayout__tabset_tabbar_inner_tab_container_top { + border-bottom: 4px solid transparent; + border-top-width: 4px !important; +} +.flexlayout__tabset_container { + display: flex; + flex-basis: 0px; + min-width: 0; + min-height: 0; + flex-direction: column; + overflow: hidden; + flex-grow: 1; +} +.flexlayout__tabset_tab_divider { + width: 4px; + width: 4px; +} +.flexlayout__tabset_content { + display: flex; + flex-basis: 0px; + min-width: 0; + min-height: 0; + flex-grow: 1; + box-sizing: border-box; + position: relative; +} +.flexlayout__tabset_header { + display: flex; + align-items: center; + padding: 3px 3px 3px 5px; + box-sizing: border-box; + border-bottom: 1px solid var(--color-tabset-divider-line); + color: var(--color-tabset-header); + background-color: var(--color-tabset-header-background); + font-size: var(--font-size); +} +.flexlayout__tabset_header_content { + flex-grow: 1; +} +.flexlayout__tabset_tabbar_outer { + box-sizing: border-box; + background-color: var(--color-tabset-background); + overflow: hidden; + display: flex; + font-size: var(--font-size); + border-color: var(--color-3) !important; + padding: 0 !important; + border-radius: 6px; +} +.flexlayout__tabset_tabbar_outer_top { + padding: 0px 2px 0px 2px; + border-bottom: 1px solid var(--color-tabset-divider-line); +} +.flexlayout__tabset_tabbar_outer_bottom { + padding: 0px 2px 0px 2px; + border-top: 1px solid var(--color-tabset-divider-line); +} +.flexlayout__tabset_tabbar_inner { + position: relative; + box-sizing: border-box; + display: flex; + flex-grow: 1; + overflow: hidden; +} +.flexlayout__tabset_tabbar_inner_tab_container { + position: relative; + display: flex; + padding-left: 4px; + padding-right: 4px; + box-sizing: border-box; + white-space: nowrap; +} +.flexlayout__tabset_tabbar_inner_tab_container_top { + border-top: 2px solid transparent; +} +.flexlayout__tabset_tabbar_inner_tab_container_bottom { + border-bottom: 2px solid transparent; +} +.flexlayout__tabset-selected { + background-color: var(--color-tabset-background-selected); +} +.flexlayout__tabset-maximized { + background-color: var(--color-tabset-background-maximized); +} +.flexlayout__tab_button_stamp { + display: inline-flex; + align-items: center; + gap: 0.3em; + white-space: nowrap; + box-sizing: border-box; +} +.flexlayout__tab { + overflow: hidden; + box-sizing: border-box; + background-color: var(--color-tab-content); + color: var(--color-text); + position: relative; +} +.flexlayout__tab_moveable { + position: relative; + height: 100%; + min-width: 1px; + min-height: 1px; + overflow: auto; + box-sizing: border-box; +} +.flexlayout__tab_overlay { + z-index: 20; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.2392156863); +} +.flexlayout__tab_button { + display: flex; + gap: 0.3em; + align-items: center; + box-sizing: border-box; + padding: 3px 0.5em; + cursor: pointer; + border-radius: 4px !important; + padding: 2px 0.6em; +} +.flexlayout__tab_button_stretch { + background-color: transparent; + color: var(--color-tab-selected); + width: 100%; + padding: 3px 0em; + text-wrap: nowrap; + display: flex; + gap: 0.3em; + align-items: center; + box-sizing: border-box; + cursor: pointer; +} +@media (hover: hover) { + .flexlayout__tab_button_stretch:hover { + color: var(--color-tab-selected); + } +} +.flexlayout__tab_button--selected { + background-color: var(--color-tab-selected-background); + color: var(--color-tab-selected); +} +@media (hover: hover) { + .flexlayout__tab_button:hover { + background-color: var(--color-tab-selected-background); + color: var(--color-tab-selected); + } +} +.flexlayout__tab_button--unselected { + background-color: var(--color-tab-unselected-background); + color: var(--color-tab-unselected); +} +.flexlayout__tab_button_top { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} +.flexlayout__tab_button_bottom { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} +.flexlayout__tab_button_leading { + display: flex; +} +.flexlayout__tab_button_content { + display: flex; + text-wrap: nowrap; +} +.flexlayout__tab_button_textbox { + border: none; + font-family: var(--font-family); + font-size: var(--font-size); + color: var(--color-tab-textbox); + background-color: var(--color-tab-textbox-background); + border: 1px inset var(--color-1); + border-radius: 3px; + width: 10em; +} +.flexlayout__tab_button_textbox:focus { + outline: none; +} +.flexlayout__tab_button_trailing { + display: flex; + visibility: hidden; + border-radius: 4px; +} +.flexlayout__tab_button_trailing:hover { + background-color: var(--color-2); +} +@media (hover: hover) { + .flexlayout__tab_button:hover .flexlayout__tab_button_trailing { + visibility: visible; + } +} +.flexlayout__tab_button--selected .flexlayout__tab_button_trailing { + visibility: visible; +} +.flexlayout__tab_button_overflow { + display: flex; + align-items: center; + border: none; + color: var(--color-overflow); + font-size: inherit; + background-color: transparent; +} +.flexlayout__tab_toolbar { + display: flex; + align-items: center; + gap: 0.3em; + padding-left: 0.5em; + padding-right: 0.3em; +} +.flexlayout__tab_toolbar_icon { + border: none; + outline: none; + font-size: inherit; + margin: 0px; + background-color: transparent; + padding: 1px; +} +.flexlayout__tab_toolbar_button { + border: none; + outline: none; + font-size: inherit; + margin: 0px; + background-color: transparent; + border-radius: 4px; + padding: 1px; +} +@media (hover: hover) { + .flexlayout__tab_toolbar_button:hover { + background-color: var(--color-3); + } +} +.flexlayout__tab_toolbar_sticky_buttons_container { + display: flex; + gap: 0.3em; + padding-left: 5px; + align-items: center; +} +.flexlayout__tab_floating { + overflow: auto; + position: absolute; + box-sizing: border-box; + color: var(--color-text); + background-color: var(--color-background); + display: flex; + justify-content: center; + align-items: center; +} +.flexlayout__tab_floating_inner { + overflow: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.flexlayout__tab_floating_inner div { + margin-bottom: 5px; + text-align: center; +} +.flexlayout__tab_floating_inner div a { + color: royalblue; +} +.flexlayout__border { + box-sizing: border-box; + overflow: hidden; + display: flex; + font-size: var(--font-size); + font-family: var(--font-family); + color: var(--color-border); + background-color: var(--color-border-background); + background-color: var(--color-background); +} +.flexlayout__border_inner { + border-radius: 6px; + border: 1px solid var(--color-3); + background-color: var(--color-background); +} +.flexlayout__border_inner_tab_container { + padding-left: 4px !important; + padding-right: 4px !important; +} +.flexlayout__border_top { + border-bottom-width: 8px !important; +} +.flexlayout__border_bottom { + border-top-width: 8px !important; +} +.flexlayout__border_left { + border-right-width: 8px !important; +} +.flexlayout__border_right { + border-left-width: 8px !important; +} +.flexlayout__border_tab_contents { + background-color: transparent; +} +.flexlayout__border_tab_contents { + box-sizing: border-box; + overflow: hidden; + background-color: var(--color-border-tab-content); +} +.flexlayout__border_top { + border-bottom: 1px solid var(--color-border-divider-line); + align-items: center; +} +.flexlayout__border_bottom { + border-top: 1px solid var(--color-border-divider-line); + align-items: center; +} +.flexlayout__border_left { + border-right: 1px solid var(--color-border-divider-line); + align-content: center; + flex-direction: column; +} +.flexlayout__border_right { + border-left: 1px solid var(--color-border-divider-line); + align-content: center; + flex-direction: column; +} +.flexlayout__border_inner { + position: relative; + box-sizing: border-box; + display: flex; + overflow: hidden; + flex-grow: 1; +} +.flexlayout__border_inner_tab_container { + white-space: nowrap; + display: flex; + padding-left: 2px; + padding-right: 2px; + box-sizing: border-box; + position: absolute; + width: 10000px; +} +.flexlayout__border_inner_tab_container_right { + transform-origin: top left; + transform: rotate(90deg); +} +.flexlayout__border_inner_tab_container_left { + flex-direction: row-reverse; + transform-origin: top right; + transform: rotate(-90deg); +} +.flexlayout__border_tab_divider { + width: 4px; +} +.flexlayout__border_button { + display: flex; + gap: 0.3em; + align-items: center; + cursor: pointer; + padding: 3px 0.5em; + margin: 2px 0px; + box-sizing: border-box; + white-space: nowrap; + border-radius: 4px; + padding: 2.6px 10px; + margin: 4px 0 !important; +} +.flexlayout__border_button--selected { + background-color: var(--color-border-tab-selected-background); + color: var(--color-border-tab-selected); +} +@media (hover: hover) { + .flexlayout__border_button:hover { + background-color: var(--color-border-tab-selected-background); + color: var(--color-border-tab-selected); + } +} +.flexlayout__border_button--unselected { + background-color: var(--color-border-tab-unselected-background); + color: var(--color-border-tab-unselected); +} +.flexlayout__border_button_leading { + display: flex; +} +.flexlayout__border_button_content { + display: flex; +} +.flexlayout__border_button_trailing { + display: flex; + border-radius: 4px; + visibility: hidden; +} +.flexlayout__border_button_trailing:hover { + background-color: var(--color-2); +} +@media (hover: hover) { + .flexlayout__border_button:hover .flexlayout__border_button_trailing { + visibility: visible; + } +} +.flexlayout__border_button--selected .flexlayout__border_button_trailing { + visibility: visible; +} +.flexlayout__border_toolbar { + display: flex; + gap: 0.3em; + align-items: center; +} +.flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right { + flex-direction: column; + padding-top: 0.5em; + padding-bottom: 0.3em; +} +.flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom { + padding-left: 0.5em; + padding-right: 0.3em; +} +.flexlayout__border_toolbar_button { + border: none; + outline: none; + font-size: inherit; + background-color: transparent; + border-radius: 4px; + padding: 1px; +} +@media (hover: hover) { + .flexlayout__border_toolbar_button:hover { + background-color: var(--color-3); + } +} +.flexlayout__border_toolbar_button_overflow { + display: flex; + align-items: center; + border: none; + color: var(--color-overflow); + font-size: inherit; + background-color: transparent; +} +.flexlayout__popup_menu { + font-size: var(--font-size); + font-family: var(--font-family); +} +.flexlayout__popup_menu_item { + padding: 2px 0.5em; + white-space: nowrap; + cursor: pointer; + border-radius: 2px; +} +@media (hover: hover) { + .flexlayout__popup_menu_item:hover { + background-color: var(--color-6); + } +} +.flexlayout__popup_menu_container { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15); + border: 1px solid var(--color-popup-border); + color: var(--color-popup-unselected); + background: var(--color-popup-unselected-background); + border-radius: 3px; + position: absolute; + z-index: 1000; + max-height: 50%; + min-width: 100px; + overflow: auto; + padding: 2px; +} +.flexlayout__floating_window _body { + height: 100%; +} +.flexlayout__floating_window_content { + left: 0; + top: 0; + right: 0; + bottom: 0; + position: absolute; +} +.flexlayout__error_boundary_container { + left: 0; + top: 0; + right: 0; + bottom: 0; + position: absolute; + display: flex; + justify-content: center; +} +.flexlayout__error_boundary_content { + display: flex; + align-items: center; +} +.flexlayout__tabset_sizer { + padding-top: 5px; + padding-bottom: 3px; + font-size: var(--font-size); + font-family: var(--font-family); +} +.flexlayout__tabset_header_sizer { + padding-top: 3px; + padding-bottom: 3px; + font-size: var(--font-size); + font-family: var(--font-family); +} +.flexlayout__border_sizer { + position: absolute; + top: -30000px; + padding-top: 6px; + padding-bottom: 5px; + font-size: var(--font-size); + font-family: var(--font-family); +} diff --git a/style/zinc.scss b/style/zinc.scss new file mode 100644 index 00000000..be8e626e --- /dev/null +++ b/style/zinc.scss @@ -0,0 +1,278 @@ +$zinc-50: #fafafa; +$zinc-100: #f4f4f5; +$zinc-200: #e4e4e7; +$zinc-300: #d4d4d8; +$zinc-400: #a1a1aa; +$zinc-500: #71717a; +$zinc-600: #52525b; +$zinc-700: #3f3f46; +$zinc-800: #27272a; +$zinc-900: #18181b; +$zinc-950: #09090b; + +.dark .flexlayout__layout { + --color-1: #{$zinc-950}; + --color-2: #{$zinc-900}; + --color-3: #{$zinc-800}; + --color-4: #{$zinc-700}; + --color-5: #{$zinc-600}; + --color-6: #{$zinc-500}; + --color-text: #{$zinc-50}; + --color-background: #{$zinc-950}; + --color-drag1: #{$zinc-50}; + --color-drag2: #{$zinc-50}; +} + +.flexlayout { + &__layout { + --color-1: #{$zinc-50}; + --color-2: #{$zinc-100}; + --color-3: #{$zinc-200}; + --color-4: #{$zinc-300}; + --color-5: #{$zinc-400}; + --color-6: #{$zinc-500}; + --color-text: #{$zinc-950}; + --color-background: white; + --color-drag1: #{$zinc-950}; + --color-drag2: #{$zinc-950}; + + --color-drag1-background: transparent; + --color-drag2-background: transparent; + + --font-size: medium; + --font-family: Arial, sans-serif; + + --color-overflow: var(--color-6); + --color-icon: var(--color-6); + + --color-tabset-background: var(--color-background); + --color-tabset-background-selected: var(--color-background); + --color-tabset-background-maximized: var(--color-background); + --color-tabset-divider-line: var(--color-4); + + --color-tabset-header-background: var(--color-background); + --color-tabset-header: var(--color-text); + + --color-border-tab-content: var(--color-background); + --color-border-background: var(--color-background); + --color-border-divider-line: var(--color-background); + + --color-tab-content: var(--color-background); + --color-tab-selected: var(--color-text); + --color-tab-selected-background: var(--color-3); + --color-tab-unselected: var(--color-6); + --color-tab-unselected-background: transparent; + --color-tab-textbox: var(--color-text); + --color-tab-textbox-background: var(--color-3); + + --color-border-tab-selected: var(--color-text); + --color-border-tab-selected-background: var(--color-3); + --color-border-tab-unselected: var(--color-6); + --color-border-tab-unselected-background: transparent; + + --color-splitter: var(--color-2); + --color-splitter-hover: var(--color-background); + --color-splitter-drag: var(--color-5); + + --color-drag-rect-border: var(--color-3); + --color-drag-rect-background: var(--color-background); + --color-drag-rect: var(--color-text); + + --color-popup-border: var(--color-3); + --color-popup-unselected: var(--color-text); + --color-popup-unselected-background: var(--color-background); + --color-popup-selected: var(--color-text); + --color-popup-selected-background: var(--color-4); + + --color-edge-marker: var(--color-3); + --color-edge-icon: var(--color-text); + background-color: var(--color-background); + line-height: normal; + } + + &__border_sizer { + + padding-top: 8px !important; + padding-bottom: 8px !important; + } + + &__popup_menu { + + &_item { + border-radius: 4px !important; + } + + &_item:hover { + background-color: var(--color-3) !important; + } + + &_container { + box-shadow: none !important; + padding: 4px !important; + border-radius: 6px !important; + } + } + + &__drag_rect { + border-width: 1px !important; + } + + &__outline_rect { + border-width: 1px !important; + } + + &__tab_border { + border: 1px solid var(--color-3); + border-radius: 6px; + } +} + +@mixin tabset_mixin { + &_content { + color: var(--color-text); + } + + &_container { + border: 1px solid var(--color-3); + border-radius: 6px; + } + + &_tabbar_inner_tab_container { + padding: 0 4px 0 4px !important; + } + + &_tabbar_inner_tab_container_top { + border-bottom: 4px solid transparent; + border-top-width: 4px !important; + } +} + +@mixin tabset_tabbar_mixin { + border-color: var(--color-3) !important; + padding: 0 !important; + border-radius: 6px; +} + +@mixin tabset_header_mixin {} + +@mixin tabset_selected_mixin {} + +@mixin tabset_header_mixin {} + +@mixin tabset_selected_mixin {} + +@mixin tabset_maximized_mixin {} + +@mixin tab_top_mixin { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +@mixin tab_bottom_mixin { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +@mixin tab_button_mixin { + border-radius: 4px !important; + padding: 2px 0.6em; +} + +@mixin tab_button_selected_mixin {} + +@mixin tab_button_unselected_mixin {} + +@mixin tab_button_hovered_mixin {} + +@mixin tab_button_stretch_mixin {} + +@mixin tab_button_stretch_hovered_mixin {} + +@mixin border_mixin { + background-color: var(--color-background); + + &_inner { + border-radius: 6px; + border: 1px solid var(--color-3); + background-color: var(--color-background); + + &_tab_container { + padding-left: 4px !important; + padding-right: 4px !important; + } + } + + &_top { + border-bottom-width: 8px !important; + } + + &_bottom { + border-top-width: 8px !important; + } + + &_left { + border-right-width: 8px !important; + } + + &_right { + border-left-width: 8px !important; + } + + &_tab_contents { + background-color: transparent; + } +} + +@mixin close_button_hovered_mixin { + background-color: var(--color-2); +} + +@mixin toolbar_button_hovered_mixin { + background-color: var(--color-3); +} + +@mixin border_button_mixin { + border-radius: 4px; + padding: 2.6px 10px; + margin: 4px 0 !important; +} + +@mixin border_button_selected_mixin {} + +@mixin border_button_unselected_mixin {} + +@mixin border_button_hovered_mixin {} + +@mixin splitter_mixin { + background-color: var(--color-background); + + &_handle { + background-color: var(--color-3) !important; + } +} + +@mixin splitter_hover_mixin { + background-color: transparent; + + .flexlayout__splitter_handle { + background-color: var(--color-4) !important; + } +} + +@mixin splitter_drag_mixin { + background-color: transparent; + + .flexlayout__splitter_handle { + background-color: var(--color-4) !important; + } +} + +@mixin splitter_border_mixin {} + +@mixin tabset_tab_divider_mixin { + width: 4px; +} + +@mixin border_tab_divider_mixin {} + +@import "_base"; \ No newline at end of file From f5781e6aadc0c921c467d8071f26cdee9231e3e0 Mon Sep 17 00:00:00 2001 From: heliacer Date: Sun, 10 Nov 2024 22:50:54 +0100 Subject: [PATCH 2/2] fix contrast --- style/zinc.css | 23 ++++++++++++----------- style/zinc.scss | 23 ++++++++++++----------- 2 files changed, 24 insertions(+), 22 deletions(-) diff --git a/style/zinc.css b/style/zinc.css index 80f5b283..a2406b7c 100644 --- a/style/zinc.css +++ b/style/zinc.css @@ -6,7 +6,7 @@ --color-5: #52525b; --color-6: #71717a; --color-text: #fafafa; - --color-background: #09090b; + --color-background: black; --color-drag1: #fafafa; --color-drag2: #fafafa; } @@ -28,16 +28,16 @@ --font-family: Arial, sans-serif; --color-overflow: var(--color-6); --color-icon: var(--color-6); - --color-tabset-background: var(--color-background); - --color-tabset-background-selected: var(--color-background); - --color-tabset-background-maximized: var(--color-background); + --color-tabset-background: var(--color-1); + --color-tabset-background-selected: var(--color-1); + --color-tabset-background-maximized: var(--color-1); --color-tabset-divider-line: var(--color-4); - --color-tabset-header-background: var(--color-background); + --color-tabset-header-background: var(--color-1); --color-tabset-header: var(--color-text); - --color-border-tab-content: var(--color-background); - --color-border-background: var(--color-background); + --color-border-tab-content: var(--color-1); + --color-border-background: var(--color-1); --color-border-divider-line: var(--color-background); - --color-tab-content: var(--color-background); + --color-tab-content: var(--color-1); --color-tab-selected: var(--color-text); --color-tab-selected-background: var(--color-3); --color-tab-unselected: var(--color-6); @@ -52,11 +52,11 @@ --color-splitter-hover: var(--color-background); --color-splitter-drag: var(--color-5); --color-drag-rect-border: var(--color-3); - --color-drag-rect-background: var(--color-background); + --color-drag-rect-background: var(--color-1); --color-drag-rect: var(--color-text); --color-popup-border: var(--color-3); --color-popup-unselected: var(--color-text); - --color-popup-unselected-background: var(--color-background); + --color-popup-unselected-background: var(--color-1); --color-popup-selected: var(--color-text); --color-popup-selected-background: var(--color-4); --color-edge-marker: var(--color-3); @@ -81,6 +81,7 @@ } .flexlayout__drag_rect { border-width: 1px !important; + padding: 4px 6px !important; } .flexlayout__outline_rect { border-width: 1px !important; @@ -544,7 +545,7 @@ .flexlayout__border_inner { border-radius: 6px; border: 1px solid var(--color-3); - background-color: var(--color-background); + background-color: var(--color-1); } .flexlayout__border_inner_tab_container { padding-left: 4px !important; diff --git a/style/zinc.scss b/style/zinc.scss index be8e626e..4aa50b24 100644 --- a/style/zinc.scss +++ b/style/zinc.scss @@ -18,7 +18,7 @@ $zinc-950: #09090b; --color-5: #{$zinc-600}; --color-6: #{$zinc-500}; --color-text: #{$zinc-50}; - --color-background: #{$zinc-950}; + --color-background: black; --color-drag1: #{$zinc-50}; --color-drag2: #{$zinc-50}; } @@ -45,19 +45,19 @@ $zinc-950: #09090b; --color-overflow: var(--color-6); --color-icon: var(--color-6); - --color-tabset-background: var(--color-background); - --color-tabset-background-selected: var(--color-background); - --color-tabset-background-maximized: var(--color-background); + --color-tabset-background: var(--color-1); + --color-tabset-background-selected: var(--color-1); + --color-tabset-background-maximized: var(--color-1); --color-tabset-divider-line: var(--color-4); - --color-tabset-header-background: var(--color-background); + --color-tabset-header-background: var(--color-1); --color-tabset-header: var(--color-text); - --color-border-tab-content: var(--color-background); - --color-border-background: var(--color-background); + --color-border-tab-content: var(--color-1); + --color-border-background: var(--color-1); --color-border-divider-line: var(--color-background); - --color-tab-content: var(--color-background); + --color-tab-content: var(--color-1); --color-tab-selected: var(--color-text); --color-tab-selected-background: var(--color-3); --color-tab-unselected: var(--color-6); @@ -75,12 +75,12 @@ $zinc-950: #09090b; --color-splitter-drag: var(--color-5); --color-drag-rect-border: var(--color-3); - --color-drag-rect-background: var(--color-background); + --color-drag-rect-background: var(--color-1); --color-drag-rect: var(--color-text); --color-popup-border: var(--color-3); --color-popup-unselected: var(--color-text); - --color-popup-unselected-background: var(--color-background); + --color-popup-unselected-background: var(--color-1); --color-popup-selected: var(--color-text); --color-popup-selected-background: var(--color-4); @@ -115,6 +115,7 @@ $zinc-950: #09090b; &__drag_rect { border-width: 1px !important; + padding: 4px 6px !important; } &__outline_rect { @@ -194,7 +195,7 @@ $zinc-950: #09090b; &_inner { border-radius: 6px; border: 1px solid var(--color-3); - background-color: var(--color-background); + background-color: var(--color-1); &_tab_container { padding-left: 4px !important;