mirror of
https://github.com/OrcaSlicer/OrcaSlicer.git
synced 2026-07-27 21:02:23 +00:00
unify orca web dialog style
This commit is contained in:
SoftFever
@@ -1,116 +0,0 @@
|
||||
:root {
|
||||
--bg: #1b1f24;
|
||||
--panel: #242a31;
|
||||
--border: #3a424d;
|
||||
--border-strong: #3a424d;
|
||||
--border-soft: #313843;
|
||||
--col-sep: #3a424d;
|
||||
|
||||
--text: #e6ebf0;
|
||||
--muted: #b9c0c8;
|
||||
--row-hover: #2b3340;
|
||||
--row-selected: #244945;
|
||||
--row-selected-outline: #00bfa5;
|
||||
|
||||
--plugin-status-danger: #ff7b72;
|
||||
--plugin-status-ok: #37c871;
|
||||
--plugin-status-warn: #f0b45a;
|
||||
--plugin-status-inactive: #b9c0c8;
|
||||
--plugin-status-danger-bg: rgba(255, 123, 114, 0.16);
|
||||
--plugin-status-ok-bg: rgba(55, 200, 113, 0.16);
|
||||
--plugin-status-warn-bg: rgba(240, 180, 90, 0.18);
|
||||
--plugin-status-inactive-bg: #36363b;
|
||||
--plugin-status-inactive-text: #c7ccd2;
|
||||
--plugin-source-mine-bg: rgba(0, 150, 136, 0.18);
|
||||
--plugin-source-mine-text: #8de5d6;
|
||||
--plugin-source-neutral-bg: #36363b;
|
||||
--plugin-source-neutral-text: #c7ccd2;
|
||||
--plugin-source-subscribed-bg: rgba(88, 166, 255, 0.18);
|
||||
--plugin-source-subscribed-text: #8fc0f0;
|
||||
--plugin-link-text: #62d8ca;
|
||||
|
||||
--footer-bg: #20262d;
|
||||
--btn-bg: #2a313a;
|
||||
--btn-border: #4b5664;
|
||||
--btn-hover: #333c47;
|
||||
|
||||
--ctx-bg: #2a313a;
|
||||
--ctx-border: #4b5664;
|
||||
--ctx-hover: #3a4451;
|
||||
}
|
||||
|
||||
*
|
||||
{
|
||||
color: #efeff0;
|
||||
border-color: #B9B9BC;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
background-color:#2D2D31; /* ORCA match background color */
|
||||
color: #efeff0;
|
||||
}
|
||||
|
||||
.ZScrol::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
|
||||
background-color: #939594;
|
||||
}
|
||||
|
||||
.ZScrol::-webkit-scrollbar-track {/*滚动条里面轨道*/
|
||||
background: #161817;
|
||||
}
|
||||
|
||||
#Title div
|
||||
{
|
||||
color: #009688;
|
||||
}
|
||||
|
||||
.search>input[type=text]{
|
||||
background-color:#2D2D31;
|
||||
}
|
||||
|
||||
/*---Checkboxes ORCA---*/
|
||||
input[type=checkbox]{
|
||||
background-color:#2D2D31;
|
||||
border-color:#4A4A51;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked{
|
||||
background-color:#009688;
|
||||
}
|
||||
|
||||
/*-------Text------*/
|
||||
|
||||
.TextS1
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
.TextS2
|
||||
{
|
||||
color:#B9B9BC;
|
||||
}
|
||||
|
||||
/*---Policy---*/
|
||||
.TextArea1
|
||||
{
|
||||
background-color: #4A4A51;
|
||||
color: #BEBEC0;
|
||||
}
|
||||
|
||||
/*----Region---*/
|
||||
.RegionItem:hover
|
||||
{
|
||||
background-color:#4C4C55;
|
||||
}
|
||||
|
||||
.RegionSelected:hover
|
||||
{
|
||||
background-color:#009688;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*----Menu----*/
|
||||
#Title div.TitleUnselected
|
||||
{
|
||||
color: #BEBEC0;
|
||||
}
|
||||
100
resources/web/dialog/css/theme.css
Normal file
100
resources/web/dialog/css/theme.css
Normal file
@@ -0,0 +1,100 @@
|
||||
/* Shared theme for resources/web/dialog/* pages.
|
||||
*
|
||||
* App-matched roles are pulled from the host theme "contract" (:root{--orca-*}),
|
||||
* injected from live C++ app colors by WebViewHostDialog. Web-only semantics (row
|
||||
* selection, status/source badges, footer/button/context surfaces) have no native
|
||||
* equivalent, so they are curated here for light and selected for dark by the
|
||||
* [data-orca-theme="dark"] attribute the host sets — the single authoritative theme
|
||||
* signal on all platforms (prefers-color-scheme is intentionally not used).
|
||||
*
|
||||
* This file is linked AFTER common.css so its element rules re-theme the shared chrome
|
||||
* via variables (replacing the retired dark.css). It replaces each page's own :root
|
||||
* palette and the dark.css <link>. */
|
||||
|
||||
:root {
|
||||
/* --- app-matched roles (from the injected contract) --- */
|
||||
--bg: var(--orca-bg);
|
||||
--panel: var(--orca-bg);
|
||||
--text: var(--orca-fg);
|
||||
--muted: var(--orca-muted);
|
||||
--border: var(--orca-border);
|
||||
--border-strong: var(--orca-border);
|
||||
--border-soft: var(--orca-border);
|
||||
--col-sep: var(--orca-border);
|
||||
--row-selected-outline: var(--orca-accent);
|
||||
--main-color: var(--orca-accent);
|
||||
--main-color-hover: var(--orca-accent);
|
||||
--plugin-link-text: var(--orca-accent);
|
||||
|
||||
/* --- web-only semantics: LIGHT --- */
|
||||
--row-hover: #f7f9fb;
|
||||
--row-selected: #eaf2ff;
|
||||
--plugin-status-danger: #b42318;
|
||||
--plugin-status-ok: #137333;
|
||||
--plugin-status-warn: #a15c00;
|
||||
--plugin-status-inactive: var(--muted);
|
||||
--plugin-status-danger-bg: rgba(180, 35, 24, 0.12);
|
||||
--plugin-status-ok-bg: rgba(19, 115, 51, 0.12);
|
||||
--plugin-status-warn-bg: rgba(199, 122, 22, 0.12);
|
||||
--plugin-status-inactive-bg: #edf1f5;
|
||||
--plugin-status-inactive-text: #44505c;
|
||||
--plugin-source-mine-bg: rgba(0, 137, 123, 0.12);
|
||||
--plugin-source-mine-text: #00897b;
|
||||
--plugin-source-neutral-bg: #edf1f5;
|
||||
--plugin-source-neutral-text: #44505c;
|
||||
--plugin-source-subscribed-bg: rgba(37, 99, 170, 0.12);
|
||||
--plugin-source-subscribed-text: #2563aa;
|
||||
--footer-bg: #fafafa;
|
||||
--btn-bg: #ffffff;
|
||||
--btn-border: #cccccc;
|
||||
--btn-hover: #f0f0f0;
|
||||
--ctx-bg: #ffffff;
|
||||
--ctx-border: #cccccc;
|
||||
--ctx-hover: #efefef;
|
||||
}
|
||||
|
||||
:root[data-orca-theme="dark"] {
|
||||
/* The app-injected border (var(--orca-border) ≈ #36363B in dark) sits almost on top of
|
||||
the dark panels; lift the border roles a touch so dividers/outlines stay visible. */
|
||||
--border: #4a4a51;
|
||||
--border-strong: #4a4a51;
|
||||
--border-soft: #4a4a51;
|
||||
--col-sep: #4a4a51;
|
||||
--row-hover: #2b3340;
|
||||
--row-selected: #244945;
|
||||
--plugin-status-danger: #ff7b72;
|
||||
--plugin-status-ok: #37c871;
|
||||
--plugin-status-warn: #f0b45a;
|
||||
--plugin-status-inactive: #b9c0c8;
|
||||
--plugin-status-danger-bg: rgba(255, 123, 114, 0.16);
|
||||
--plugin-status-ok-bg: rgba(55, 200, 113, 0.16);
|
||||
--plugin-status-warn-bg: rgba(240, 180, 90, 0.18);
|
||||
--plugin-status-inactive-bg: #36363b;
|
||||
--plugin-status-inactive-text: #c7ccd2;
|
||||
--plugin-source-mine-bg: rgba(0, 150, 136, 0.18);
|
||||
--plugin-source-mine-text: #8de5d6;
|
||||
--plugin-source-neutral-bg: #36363b;
|
||||
--plugin-source-neutral-text: #c7ccd2;
|
||||
--plugin-source-subscribed-bg: rgba(88, 166, 255, 0.18);
|
||||
--plugin-source-subscribed-text: #8fc0f0;
|
||||
--footer-bg: #20262d;
|
||||
--btn-bg: #2a313a;
|
||||
--btn-border: #4b5664;
|
||||
--btn-hover: #333c47;
|
||||
--ctx-bg: #2a313a;
|
||||
--ctx-border: #4b5664;
|
||||
--ctx-hover: #3a4451;
|
||||
}
|
||||
|
||||
/* Re-theme the shared common.css chrome through variables (replaces dark.css's
|
||||
* hardcoded element overrides). Placed after common.css in every page's <head>. */
|
||||
html { background: var(--bg); }
|
||||
body { background: var(--bg); color: var(--text); }
|
||||
#Content { color: var(--text); }
|
||||
#Title div, #Title div.TitleUnselected { color: var(--orca-accent); }
|
||||
.HyperLink { color: var(--orca-accent); }
|
||||
.ZScrol::-webkit-scrollbar-thumb { background-color: var(--border); }
|
||||
.ZScrol::-webkit-scrollbar-track { background: var(--bg); }
|
||||
input[type="checkbox"] { background-color: var(--bg); border-color: var(--border); }
|
||||
input[type="checkbox"]:checked { background-color: var(--orca-accent); border-color: var(--orca-accent); }
|
||||
input[type="checkbox"]::before { box-shadow: inset 1em 1em var(--orca-accent-fg); }
|
||||
Reference in New Issue
Block a user