From dea247663e214c17db7ad2f0bdfcfa06ac82521e Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 10 May 2023 17:48:41 +0800 Subject: [PATCH 01/54] test theme --- web_src/css/themes/theme-edge-auto.css | 724 ++++++++++++++++++ web_src/css/themes/theme-edge-dark.css | 360 +++++++++ web_src/css/themes/theme-edge-light.css | 359 +++++++++ web_src/css/themes/theme-enterprise-light.css | 222 ++++++ .../themes/theme-gruvbox-material-auto.css | 724 ++++++++++++++++++ .../themes/theme-gruvbox-material-dark.css | 360 +++++++++ .../themes/theme-gruvbox-material-light.css | 360 +++++++++ 7 files changed, 3109 insertions(+) create mode 100644 web_src/css/themes/theme-edge-auto.css create mode 100644 web_src/css/themes/theme-edge-dark.css create mode 100644 web_src/css/themes/theme-edge-light.css create mode 100644 web_src/css/themes/theme-enterprise-light.css create mode 100644 web_src/css/themes/theme-gruvbox-material-auto.css create mode 100644 web_src/css/themes/theme-gruvbox-material-dark.css create mode 100644 web_src/css/themes/theme-gruvbox-material-light.css diff --git a/web_src/css/themes/theme-edge-auto.css b/web_src/css/themes/theme-edge-auto.css new file mode 100644 index 0000000000000..f890dd4fd1de3 --- /dev/null +++ b/web_src/css/themes/theme-edge-auto.css @@ -0,0 +1,724 @@ +@media (prefers-color-scheme: dark) { + :root { + --is-dark-theme: true; + --color-primary: #6cb6eb; + --color-primary-contrast: #2b2d37; + --color-primary-dark-1: #6cb6eb; + --color-primary-dark-2: #7bbae8; + --color-primary-dark-3: #8abee5; + --color-primary-dark-4: #99c2e2; + --color-primary-dark-5: #a7c5df; + --color-primary-dark-6: #b6c9dc; + --color-primary-dark-7: #c5cdd9; + --color-primary-light-1: #6cb6eb; + --color-primary-light-2: #63a1d0; + --color-primary-light-3: #5a8db5; + --color-primary-light-4: #51789a; + --color-primary-light-5: #48637f; + --color-primary-light-6: #3f4f64; + --color-primary-light-7: #363a49; + --color-primary-alpha-10: rgba(108, 182, 235, 0.1); + --color-primary-alpha-20: rgba(108, 182, 235, 0.2); + --color-primary-alpha-30: rgba(108, 182, 235, 0.3); + --color-primary-alpha-40: rgba(108, 182, 235, 0.4); + --color-primary-alpha-50: rgba(108, 182, 235, 0.5); + --color-primary-alpha-60: rgba(108, 182, 235, 0.6); + --color-primary-alpha-70: rgba(108, 182, 235, 0.7); + --color-primary-alpha-80: rgba(108, 182, 235, 0.8); + --color-primary-alpha-90: rgba(108, 182, 235, 0.9); + --color-secondary: #404455; + --color-secondary-dark-1: #404455; + --color-secondary-dark-2: #4b4f60; + --color-secondary-dark-3: #565b6b; + --color-secondary-dark-4: #616676; + --color-secondary-dark-5: #6c7281; + --color-secondary-dark-6: #777d8c; + --color-secondary-dark-7: #838997; + --color-secondary-dark-8: #8e94a2; + --color-secondary-dark-9: #999fad; + --color-secondary-dark-10: #a4abb8; + --color-secondary-dark-11: #afb6c3; + --color-secondary-dark-12: #bac2ce; + --color-secondary-dark-13: #c5cdd9; + --color-secondary-light-1: #404455; + --color-secondary-light-2: #3a3e4e; + --color-secondary-light-3: #363a49; + --color-secondary-light-4: #333644; + --color-secondary-alpha-10: rgba(64, 68, 85, 0.1); + --color-secondary-alpha-20: rgba(64, 68, 85, 0.2); + --color-secondary-alpha-30: rgba(64, 68, 85, 0.3); + --color-secondary-alpha-40: rgba(64, 68, 85, 0.4); + --color-secondary-alpha-50: rgba(64, 68, 85, 0.5); + --color-secondary-alpha-60: rgba(64, 68, 85, 0.6); + --color-secondary-alpha-70: rgba(64, 68, 85, 0.7); + --color-secondary-alpha-80: rgba(64, 68, 85, 0.8); + --color-secondary-alpha-90: rgba(64, 68, 85, 0.9); + /* colors */ + --color-red: #ec7279; + --color-orange: #deb974; + --color-yellow: #deb974; + --color-olive: #a0c980; + --color-green: #a0c980; + --color-teal: #5dbbc1; + --color-blue: #6cb6eb; + --color-violet: #d38aea; + --color-purple: #d38aea; + --color-pink: #d38aea; + --color-brown: #deb974; + --color-grey: #758094; + /* light variants */ + --color-red-light: #ec7279; + --color-orange-light: #deb974; + --color-yellow-light: #deb974; + --color-olive-light: #a0c980; + --color-green-light: #a0c980; + --color-teal-light: #5dbbc1; + --color-blue-light: #6cb6eb; + --color-violet-light: #d38aea; + --color-purple-light: #d38aea; + --color-pink-light: #d38aea; + --color-brown-light: #deb974; + --color-grey-light: #758094; + /* other colors */ + --color-black: #363a49; + --color-gold: #deb974; + --color-white: #2b2d37; + --color-diff-removed-word-bg: #824a4f; + --color-diff-added-word-bg: #586d4b; + --color-diff-removed-row-bg: #55393d; + --color-diff-moved-row-bg: #354157; + --color-diff-added-row-bg: #394634; + --color-diff-removed-row-border: #a1565b; + --color-diff-moved-row-border: #517ca1; + --color-diff-added-row-border: #6d885a; + --color-diff-inactive: #363a49; + --color-error-border: #a1565b; + --color-error-bg: #55393d; + --color-error-text: #ec7279; + --color-success-border: #6d885a; + --color-success-bg: #394634; + --color-success-text: #a0c980; + --color-warning-border: #967e52; + --color-warning-bg: #4e432f; + --color-warning-text: #deb974; + --color-info-border: #517ca1; + --color-info-bg: #354157; + --color-info-text: #6cb6eb; + /* target-based colors */ + --color-body: #2b2d37; + --color-box-header: #3a3e4e; + --color-box-body: #333644; + --color-box-body-highlight: #363a49; + --color-text-dark: #d38aea; + --color-text: #c5cdd9; + --color-text-hover: rgba(197, 205, 217, 0.8); + --color-text-light: #a0c980; + --color-text-light-1: #758094; + --color-text-light-2: #c5cdd9; + --color-text-light-3: #758094; + --color-footer: #333644; + --color-timeline: #404455; + --color-input-text: #c5cdd9; + --color-input-background: #2b2d37; + --color-input-toggle-background: #333644; + --color-input-border: #404455; + --color-input-border-hover: #5b6275; + --color-navbar: #333644; + --color-navbar-transparent: #333644; + --color-light: #333644; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #404455; + --color-hover: rgba(64, 68, 85, 0.5); + --color-active: rgba(64, 68, 85, 0.5); + --color-menu: #333644; + --color-card: #333644; + --color-markup-table-row: #3a3e4e; + --color-markup-code-block: #2b2d37; + --color-button: #3a3e4e; + --color-code-bg: #2b2d37; + --color-code-sidebar-bg: #333644; + --color-shadow: #00000060; + --color-secondary-bg: #333644; + --color-text-focus: #fff; + --color-expand-button: #363a49; + --color-placeholder-text: #758094; + --color-editor-line-highlight: #333644; + --color-project-board-bg: #2b2d37; + --color-project-board-light-label: #6cb6eb; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-bar: #333644; + --color-label-active-bg: #404455; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #333644; + accent-color: var(--color-accent); + color-scheme: dark; + } + .chroma .nx { + color: #c5cdd9; + } + .chroma .c, + .chroma .c1, + .chroma .ch, + .chroma .cm, + .chroma .sd { + color: #758094; + } + .chroma .k, + .chroma .kc, + .chroma .kd, + .chroma .kn, + .chroma .kp, + .chroma .kr { + color: #ec7279; + } + .chroma .o, + .chroma .ow { + color: #d38aea; + } + .chroma .s, + .chroma .s1, + .chroma .s2, + .chroma .sa, + .chroma .sb, + .chroma .sc, + .chroma .sh, + .chroma .si, + .chroma .sr, + .chroma .ss, + .chroma .sx, + .chroma .nt, + .chroma .cpf { + color: #a0c980; + } + .chroma .m, + .chroma .mb, + .chroma .mf, + .chroma .mh, + .chroma .mi, + .chroma .mo, + .chroma .nl { + color: #a0c980; + } + .chroma .kt, + .chroma .nc, + .chroma .nn, + .chroma .nv { + color: #deb974; + } + .chroma .nf, + .chroma .nb, + .chroma .na { + color: #6cb6eb; + } + .chroma .bp, + .chroma .cp, + .chroma .ne, + .chroma .nd, + .chroma .se { + color: #5dbbc1; + } + /* primary buttons */ + .ui.primary.button, + .ui.primary.buttons .button { + background: #6cb6eb; + background-color: #6cb6eb !important; + color: #2b2d37; + } + .ui.primary.button:hover, + .ui.primary.buttons .button:hover { + background: rgba(108, 182, 235, 0.8); + background-color: rgba(108, 182, 235, 0.8) !important; + color: #2b2d37; + } + /* secondary buttons */ + .ui.green.buttons .button, + .ui.green.button { + background: #a0c980; + background-color: #a0c980; + color: #2b2d37; + } + .ui.green.buttons .button:hover, + .ui.green.button:hover { + background: rgba(160, 201, 128, 0.8); + background-color: rgba(160, 201, 128, 0.8); + color: #2b2d37; + } + /* text based buttons (purple) */ + .ui.labeled.button.disabled > .button, + .ui.basic.buttons .button, + .ui.basic.button { + color: #d38aea; + } + .ui.labeled.button.disabled > .button:hover, + .ui.basic.buttons .button:hover, + .ui.basic.button:hover { + color: #d38aea; + } + /* repo title && header */ + .repo-title { + color: #d38aea; + } + /* star number && fork number */ + .repo-buttons button[disabled] ~ .label, + .repo-buttons .ui.labeled.button.disabled > .label { + color: #6cb6eb; + } + .ui.basic.labels .label, + .ui.basic.label { + color: #6cb6eb; + } + /* hover on commits, branch, tags in project home page */ + .repository .ui.segment.sub-menu .list .item a:hover, + .ui.tabular.menu .item:hover { + color: var(--color-text-hover); + } + /* commit label */ + .ui.primary.labels .label, + .ui.ui.ui.primary.label { + color: #2b2d37; + } + /* issue label */ + .ui.green.labels .label, + .ui.ui.ui.green.label { + color: #2b2d37; + } + /* grey button (rss feed button in repository home page) */ + i.grey.icon.icon.icon.icon { + color: #758094; + } + /* scroll bar */ + * { + scrollbar-color: #d38aea transparent !important; + } + ::-webkit-scrollbar { + width: 10px; + height: 10px; + } + ::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px #d38aea !important; + border: 2px solid transparent; + border-radius: 5px !important; + } + ::-webkit-scrollbar-thumb:window-inactive { + box-shadow: inset 0 0 0 6px #d38aea !important; + } + ::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px #d38aea !important; + } + ::-webkit-scrollbar-corner { + background: transparent; + } + /* red buttons */ + .ui.red.labels .label, + .ui.ui.ui.red.label, + .ui.red.button, + .ui.red.buttons .button { + background: #ec7279; + background-color: #ec7279; + color: #2b2d37; + } + .ui.red.labels .label:hover, + .ui.ui.ui.red.label:hover, + .ui.red.button:hover, + .ui.red.buttons .button:hover { + background: rgba(236, 114, 121, 0.8); + background-color: rgba(236, 114, 121, 0.8); + color: #2b2d37; + } + /* grey buttons */ + .ui.grey.labels .label, + .ui.ui.ui.grey.label, + .ui.grey.button, + .ui.grey.buttons .button { + color: #2b2d37; + } + .ui.grey.labels .label:hover, + .ui.ui.ui.grey.label:hover, + .ui.grey.button:hover, + .ui.grey.buttons .button:hover { + color: #2b2d37; + } + /* orange buttons */ + .ui.orange.labels .label, + .ui.ui.ui.orange.label, + .ui.orange.button, + .ui.orange.buttons .button { + background: #deb974; + background-color: #deb974; + color: #2b2d37; + } + .ui.orange.labels .label:hover, + .ui.ui.ui.orange.label:hover, + .ui.orange.button:hover, + .ui.orange.buttons .button:hover { + background: rgba(222, 185, 116, 0.8); + background-color: rgba(222, 185, 116, 0.8); + color: #2b2d37; + } +} +@media (prefers-color-scheme: light) { + :root { + --is-dark-theme: true; + --color-primary: #5079be; + --color-primary-contrast: #fafafa; + --color-primary-dark-1: #5079be; + --color-primary-dark-2: #4f72ad; + --color-primary-dark-3: #4e6b9d; + --color-primary-dark-4: #4e658d; + --color-primary-dark-5: #4d5e7c; + --color-primary-dark-6: #4c576c; + --color-primary-dark-7: #4b505b; + --color-primary-light-1: #5079be; + --color-primary-light-2: #698cc6; + --color-primary-light-3: #839fcf; + --color-primary-light-4: #9cb2d7; + --color-primary-light-5: #b5c5df; + --color-primary-light-6: #cfd8e8; + --color-primary-light-7: #e8ebf0; + --color-primary-alpha-10: rgba(80, 121, 190, 0.1); + --color-primary-alpha-20: rgba(80, 121, 190, 0.2); + --color-primary-alpha-30: rgba(80, 121, 190, 0.3); + --color-primary-alpha-40: rgba(80, 121, 190, 0.4); + --color-primary-alpha-50: rgba(80, 121, 190, 0.5); + --color-primary-alpha-60: rgba(80, 121, 190, 0.6); + --color-primary-alpha-70: rgba(80, 121, 190, 0.7); + --color-primary-alpha-80: rgba(80, 121, 190, 0.8); + --color-primary-alpha-90: rgba(80, 121, 190, 0.9); + --color-secondary: #dde2e7; + --color-secondary-dark-1: #dde2e7; + --color-secondary-dark-2: #d1d6db; + --color-secondary-dark-3: #c5cad0; + --color-secondary-dark-4: #b9bec4; + --color-secondary-dark-5: #acb1b8; + --color-secondary-dark-6: #a0a5ad; + --color-secondary-dark-7: #9499a1; + --color-secondary-dark-8: #888d95; + --color-secondary-dark-9: #7c818a; + --color-secondary-dark-10: #70757e; + --color-secondary-dark-11: #636872; + --color-secondary-dark-12: #575c67; + --color-secondary-dark-13: #4b505b; + --color-secondary-light-1: #dde2e7; + --color-secondary-light-2: #e8ebf0; + --color-secondary-light-3: #e8ebf0; + --color-secondary-light-4: #eef1f4; + --color-secondary-alpha-10: rgba(221, 226, 231, 0.1); + --color-secondary-alpha-20: rgba(221, 226, 231, 0.2); + --color-secondary-alpha-30: rgba(221, 226, 231, 0.3); + --color-secondary-alpha-40: rgba(221, 226, 231, 0.4); + --color-secondary-alpha-50: rgba(221, 226, 231, 0.5); + --color-secondary-alpha-60: rgba(221, 226, 231, 0.6); + --color-secondary-alpha-70: rgba(221, 226, 231, 0.7); + --color-secondary-alpha-80: rgba(221, 226, 231, 0.8); + --color-secondary-alpha-90: rgba(221, 226, 231, 0.9); + /* colors */ + --color-red: #d05858; + --color-orange: #be7e05; + --color-yellow: #be7e05; + --color-olive: #608e32; + --color-green: #608e32; + --color-teal: #3a8b84; + --color-blue: #5079be; + --color-violet: #b05ccc; + --color-purple: #b05ccc; + --color-pink: #b05ccc; + --color-brown: #be7e05; + --color-grey: #8790a0; + /* light variants */ + --color-red-light: #d05858; + --color-orange-light: #be7e05; + --color-yellow-light: #be7e05; + --color-olive-light: #608e32; + --color-green-light: #608e32; + --color-teal-light: #3a8b84; + --color-blue-light: #5079be; + --color-violet-light: #b05ccc; + --color-purple-light: #b05ccc; + --color-pink-light: #b05ccc; + --color-brown-light: #be7e05; + --color-grey-light: #8790a0; + /* other colors */ + --color-black: #e8ebf0; + --color-gold: #be7e05; + --color-white: #fafafa; + --color-diff-removed-word-bg: #ebbaba; + --color-diff-added-word-bg: #bdd1af; + --color-diff-removed-row-bg: #f6e4e4; + --color-diff-moved-row-bg: #e3eaf6; + --color-diff-added-row-bg: #e5eee4; + --color-diff-removed-row-border: #e39e9e; + --color-diff-moved-row-border: #9ab2da; + --color-diff-added-row-border: #a3be8b; + --color-diff-inactive: #e8ebf0; + --color-error-border: #e39e9e; + --color-error-bg: #f6e4e4; + --color-error-text: #d05858; + --color-success-border: #a3be8b; + --color-success-bg: #e5eee4; + --color-success-text: #608e32; + --color-warning-border: #d7b574; + --color-warning-bg: #f0ece2; + --color-warning-text: #be7e05; + --color-info-border: #9ab2da; + --color-info-bg: #e3eaf6; + --color-info-text: #5079be; + /* target-based colors */ + --color-body: #fafafa; + --color-box-header: #e8ebf0; + --color-box-body: #eef1f4; + --color-box-body-highlight: #e8ebf0; + --color-text-dark: #b05ccc; + --color-text: #4b505b; + --color-text-hover: rgba(75, 80, 91, 0.8); + --color-text-light: #608e32; + --color-text-light-1: #8790a0; + --color-text-light-2: #4b505b; + --color-text-light-3: #8790a0; + --color-footer: #eef1f4; + --color-timeline: #dde2e7; + --color-input-text: #4b505b; + --color-input-background: #fafafa; + --color-input-toggle-background: #eef1f4; + --color-input-border: #dde2e7; + --color-input-border-hover: #b2b9c4; + --color-navbar: #eef1f4; + --color-navbar-transparent: #eef1f4; + --color-light: #eef1f4; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #dde2e7; + --color-hover: rgba(221, 226, 231, 0.5); + --color-active: rgba(221, 226, 231, 0.5); + --color-menu: #eef1f4; + --color-card: #eef1f4; + --color-markup-table-row: #e8ebf0; + --color-markup-code-block: #fafafa; + --color-button: #e8ebf0; + --color-code-bg: #fafafa; + --color-code-sidebar-bg: #eef1f4; + --color-shadow: #00000060; + --color-secondary-bg: #eef1f4; + --color-text-focus: #fff; + --color-expand-button: #e8ebf0; + --color-placeholder-text: #8790a0; + --color-editor-line-highlight: #eef1f4; + --color-project-board-bg: #fafafa; + --color-project-board-light-label: #5079be; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-bar: #eef1f4; + --color-label-active-bg: #dde2e7; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #eef1f4; + accent-color: var(--color-accent); + color-scheme: dark; + } + .chroma .nx { + color: #4b505b; + } + .chroma .c, + .chroma .c1, + .chroma .ch, + .chroma .cm, + .chroma .sd { + color: #8790a0; + } + .chroma .k, + .chroma .kc, + .chroma .kd, + .chroma .kn, + .chroma .kp, + .chroma .kr { + color: #d05858; + } + .chroma .o, + .chroma .ow { + color: #b05ccc; + } + .chroma .s, + .chroma .s1, + .chroma .s2, + .chroma .sa, + .chroma .sb, + .chroma .sc, + .chroma .sh, + .chroma .si, + .chroma .sr, + .chroma .ss, + .chroma .sx, + .chroma .nt, + .chroma .cpf { + color: #608e32; + } + .chroma .m, + .chroma .mb, + .chroma .mf, + .chroma .mh, + .chroma .mi, + .chroma .mo, + .chroma .nl { + color: #608e32; + } + .chroma .kt, + .chroma .nc, + .chroma .nn, + .chroma .nv { + color: #be7e05; + } + .chroma .nf, + .chroma .nb, + .chroma .na { + color: #5079be; + } + .chroma .bp, + .chroma .cp, + .chroma .ne, + .chroma .nd, + .chroma .se { + color: #3a8b84; + } + /* primary buttons */ + .ui.primary.button, + .ui.primary.buttons .button { + background: #6996e0; + background-color: #6996e0 !important; + color: #fafafa; + } + .ui.primary.button:hover, + .ui.primary.buttons .button:hover { + background: rgba(105, 150, 224, 0.8); + background-color: rgba(105, 150, 224, 0.8) !important; + color: #fafafa; + } + /* secondary buttons */ + .ui.green.buttons .button, + .ui.green.button { + background: #76af6f; + background-color: #76af6f; + color: #fafafa; + } + .ui.green.buttons .button:hover, + .ui.green.button:hover { + background: rgba(118, 175, 111, 0.8); + background-color: rgba(118, 175, 111, 0.8); + color: #fafafa; + } + /* text based buttons (purple) */ + .ui.labeled.button.disabled > .button, + .ui.basic.buttons .button, + .ui.basic.button { + color: #b05ccc; + } + .ui.labeled.button.disabled > .button:hover, + .ui.basic.buttons .button:hover, + .ui.basic.button:hover { + color: #b05ccc; + } + /* repo title && header */ + .repo-title { + color: #b05ccc; + } + /* star number && fork number */ + .repo-buttons button[disabled] ~ .label, + .repo-buttons .ui.labeled.button.disabled > .label { + color: #5079be; + } + .ui.basic.labels .label, + .ui.basic.label { + color: #5079be; + } + /* hover on commits, branch, tags in project home page */ + .repository .ui.segment.sub-menu .list .item a:hover, + .ui.tabular.menu .item:hover { + color: var(--color-text-hover); + } + /* commit label */ + .ui.primary.labels .label, + .ui.ui.ui.primary.label { + color: #fafafa; + } + /* issue label */ + .ui.green.labels .label, + .ui.ui.ui.green.label { + color: #fafafa; + } + /* grey button (rss feed button in repository home page) */ + i.grey.icon.icon.icon.icon { + color: #8790a0; + } + /* scroll bar */ + * { + scrollbar-color: #b05ccc transparent !important; + } + ::-webkit-scrollbar { + width: 10px; + height: 10px; + } + ::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px #b05ccc !important; + border: 2px solid transparent; + border-radius: 5px !important; + } + ::-webkit-scrollbar-thumb:window-inactive { + box-shadow: inset 0 0 0 6px #b05ccc !important; + } + ::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px #b05ccc !important; + } + ::-webkit-scrollbar-corner { + background: transparent; + } + /* red buttons */ + .ui.red.labels .label, + .ui.ui.ui.red.label, + .ui.red.button, + .ui.red.buttons .button { + background: #e17373; + background-color: #e17373; + color: #fafafa; + } + .ui.red.labels .label:hover, + .ui.ui.ui.red.label:hover, + .ui.red.button:hover, + .ui.red.buttons .button:hover { + background: rgba(225, 115, 115, 0.8); + background-color: rgba(225, 115, 115, 0.8); + color: #fafafa; + } + /* grey buttons */ + .ui.grey.labels .label, + .ui.ui.ui.grey.label, + .ui.grey.button, + .ui.grey.buttons .button { + color: #fafafa; + } + .ui.grey.labels .label:hover, + .ui.ui.ui.grey.label:hover, + .ui.grey.button:hover, + .ui.grey.buttons .button:hover { + color: #fafafa; + } + /* orange buttons */ + .ui.orange.labels .label, + .ui.ui.ui.orange.label, + .ui.orange.button, + .ui.orange.buttons .button { + background: #be7e05; + background-color: #be7e05; + color: #fafafa; + } + .ui.orange.labels .label:hover, + .ui.ui.ui.orange.label:hover, + .ui.orange.button:hover, + .ui.orange.buttons .button:hover { + background: rgba(190, 126, 5, 0.8); + background-color: rgba(190, 126, 5, 0.8); + color: #fafafa; + } +} diff --git a/web_src/css/themes/theme-edge-dark.css b/web_src/css/themes/theme-edge-dark.css new file mode 100644 index 0000000000000..54602f35f3ccf --- /dev/null +++ b/web_src/css/themes/theme-edge-dark.css @@ -0,0 +1,360 @@ +:root { + --is-dark-theme: true; + --color-primary: #6cb6eb; + --color-primary-contrast: #2b2d37; + --color-primary-dark-1: #6cb6eb; + --color-primary-dark-2: #7bbae8; + --color-primary-dark-3: #8abee5; + --color-primary-dark-4: #99c2e2; + --color-primary-dark-5: #a7c5df; + --color-primary-dark-6: #b6c9dc; + --color-primary-dark-7: #c5cdd9; + --color-primary-light-1: #6cb6eb; + --color-primary-light-2: #63a1d0; + --color-primary-light-3: #5a8db5; + --color-primary-light-4: #51789a; + --color-primary-light-5: #48637f; + --color-primary-light-6: #3f4f64; + --color-primary-light-7: #363a49; + --color-primary-alpha-10: rgba(108, 182, 235, 0.1); + --color-primary-alpha-20: rgba(108, 182, 235, 0.2); + --color-primary-alpha-30: rgba(108, 182, 235, 0.3); + --color-primary-alpha-40: rgba(108, 182, 235, 0.4); + --color-primary-alpha-50: rgba(108, 182, 235, 0.5); + --color-primary-alpha-60: rgba(108, 182, 235, 0.6); + --color-primary-alpha-70: rgba(108, 182, 235, 0.7); + --color-primary-alpha-80: rgba(108, 182, 235, 0.8); + --color-primary-alpha-90: rgba(108, 182, 235, 0.9); + --color-secondary: #404455; + --color-secondary-dark-1: #404455; + --color-secondary-dark-2: #4b4f60; + --color-secondary-dark-3: #565b6b; + --color-secondary-dark-4: #616676; + --color-secondary-dark-5: #6c7281; + --color-secondary-dark-6: #777d8c; + --color-secondary-dark-7: #838997; + --color-secondary-dark-8: #8e94a2; + --color-secondary-dark-9: #999fad; + --color-secondary-dark-10: #a4abb8; + --color-secondary-dark-11: #afb6c3; + --color-secondary-dark-12: #bac2ce; + --color-secondary-dark-13: #c5cdd9; + --color-secondary-light-1: #404455; + --color-secondary-light-2: #3a3e4e; + --color-secondary-light-3: #363a49; + --color-secondary-light-4: #333644; + --color-secondary-alpha-10: rgba(64, 68, 85, 0.1); + --color-secondary-alpha-20: rgba(64, 68, 85, 0.2); + --color-secondary-alpha-30: rgba(64, 68, 85, 0.3); + --color-secondary-alpha-40: rgba(64, 68, 85, 0.4); + --color-secondary-alpha-50: rgba(64, 68, 85, 0.5); + --color-secondary-alpha-60: rgba(64, 68, 85, 0.6); + --color-secondary-alpha-70: rgba(64, 68, 85, 0.7); + --color-secondary-alpha-80: rgba(64, 68, 85, 0.8); + --color-secondary-alpha-90: rgba(64, 68, 85, 0.9); + /* colors */ + --color-red: #ec7279; + --color-orange: #deb974; + --color-yellow: #deb974; + --color-olive: #a0c980; + --color-green: #a0c980; + --color-teal: #5dbbc1; + --color-blue: #6cb6eb; + --color-violet: #d38aea; + --color-purple: #d38aea; + --color-pink: #d38aea; + --color-brown: #deb974; + --color-grey: #758094; + /* light variants */ + --color-red-light: #ec7279; + --color-orange-light: #deb974; + --color-yellow-light: #deb974; + --color-olive-light: #a0c980; + --color-green-light: #a0c980; + --color-teal-light: #5dbbc1; + --color-blue-light: #6cb6eb; + --color-violet-light: #d38aea; + --color-purple-light: #d38aea; + --color-pink-light: #d38aea; + --color-brown-light: #deb974; + --color-grey-light: #758094; + /* other colors */ + --color-black: #363a49; + --color-gold: #deb974; + --color-white: #2b2d37; + --color-diff-removed-word-bg: #824a4f; + --color-diff-added-word-bg: #586d4b; + --color-diff-removed-row-bg: #55393d; + --color-diff-moved-row-bg: #354157; + --color-diff-added-row-bg: #394634; + --color-diff-removed-row-border: #a1565b; + --color-diff-moved-row-border: #517ca1; + --color-diff-added-row-border: #6d885a; + --color-diff-inactive: #363a49; + --color-error-border: #a1565b; + --color-error-bg: #55393d; + --color-error-text: #ec7279; + --color-success-border: #6d885a; + --color-success-bg: #394634; + --color-success-text: #a0c980; + --color-warning-border: #967e52; + --color-warning-bg: #4e432f; + --color-warning-text: #deb974; + --color-info-border: #517ca1; + --color-info-bg: #354157; + --color-info-text: #6cb6eb; + /* target-based colors */ + --color-body: #2b2d37; + --color-box-header: #3a3e4e; + --color-box-body: #333644; + --color-box-body-highlight: #363a49; + --color-text-dark: #d38aea; + --color-text: #c5cdd9; + --color-text-hover: rgba(197, 205, 217, 0.8); + --color-text-light: #a0c980; + --color-text-light-1: #758094; + --color-text-light-2: #c5cdd9; + --color-text-light-3: #758094; + --color-footer: #333644; + --color-timeline: #404455; + --color-input-text: #c5cdd9; + --color-input-background: #2b2d37; + --color-input-toggle-background: #333644; + --color-input-border: #404455; + --color-input-border-hover: #5b6275; + --color-navbar: #333644; + --color-navbar-transparent: #333644; + --color-light: #333644; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #404455; + --color-hover: rgba(64, 68, 85, 0.5); + --color-active: rgba(64, 68, 85, 0.5); + --color-menu: #333644; + --color-card: #333644; + --color-markup-table-row: #3a3e4e; + --color-markup-code-block: #2b2d37; + --color-button: #3a3e4e; + --color-code-bg: #2b2d37; + --color-code-sidebar-bg: #333644; + --color-shadow: #00000060; + --color-secondary-bg: #333644; + --color-text-focus: #fff; + --color-expand-button: #363a49; + --color-placeholder-text: #758094; + --color-editor-line-highlight: #333644; + --color-project-board-bg: #2b2d37; + --color-project-board-light-label: #6cb6eb; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-bar: #333644; + --color-label-active-bg: #404455; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #333644; + accent-color: var(--color-accent); + color-scheme: dark; +} +.chroma .nx { + color: #c5cdd9; +} +.chroma .c, +.chroma .c1, +.chroma .ch, +.chroma .cm, +.chroma .sd { + color: #758094; +} +.chroma .k, +.chroma .kc, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr { + color: #ec7279; +} +.chroma .o, +.chroma .ow { + color: #d38aea; +} +.chroma .s, +.chroma .s1, +.chroma .s2, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .sh, +.chroma .si, +.chroma .sr, +.chroma .ss, +.chroma .sx, +.chroma .nt, +.chroma .cpf { + color: #a0c980; +} +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .mo, +.chroma .nl { + color: #a0c980; +} +.chroma .kt, +.chroma .nc, +.chroma .nn, +.chroma .nv { + color: #deb974; +} +.chroma .nf, +.chroma .nb, +.chroma .na { + color: #6cb6eb; +} +.chroma .bp, +.chroma .cp, +.chroma .ne, +.chroma .nd, +.chroma .se { + color: #5dbbc1; +} +/* primary buttons */ +.ui.primary.button, +.ui.primary.buttons .button { + background: #6cb6eb; + background-color: #6cb6eb !important; + color: #2b2d37; +} +.ui.primary.button:hover, +.ui.primary.buttons .button:hover { + background: rgba(108, 182, 235, 0.8); + background-color: rgba(108, 182, 235, 0.8) !important; + color: #2b2d37; +} +/* secondary buttons */ +.ui.green.buttons .button, +.ui.green.button { + background: #a0c980; + background-color: #a0c980; + color: #2b2d37; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover { + background: rgba(160, 201, 128, 0.8); + background-color: rgba(160, 201, 128, 0.8); + color: #2b2d37; +} +/* text based buttons (purple) */ +.ui.labeled.button.disabled > .button, +.ui.basic.buttons .button, +.ui.basic.button { + color: #d38aea; +} +.ui.labeled.button.disabled > .button:hover, +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + color: #d38aea; +} +/* repo title && header */ +.repo-title { + color: #d38aea; +} +/* star number && fork number */ +.repo-buttons button[disabled] ~ .label, +.repo-buttons .ui.labeled.button.disabled > .label { + color: #6cb6eb; +} +.ui.basic.labels .label, +.ui.basic.label { + color: #6cb6eb; +} +/* hover on commits, branch, tags in project home page */ +.repository .ui.segment.sub-menu .list .item a:hover, +.ui.tabular.menu .item:hover { + color: var(--color-text-hover); +} +/* commit label */ +.ui.primary.labels .label, +.ui.ui.ui.primary.label { + color: #2b2d37; +} +/* issue label */ +.ui.green.labels .label, +.ui.ui.ui.green.label { + color: #2b2d37; +} +/* grey button (rss feed button in repository home page) */ +i.grey.icon.icon.icon.icon { + color: #758094; +} +/* scroll bar */ +* { + scrollbar-color: #d38aea transparent !important; +} +::-webkit-scrollbar { + width: 10px; + height: 10px; +} +::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px #d38aea !important; + border: 2px solid transparent; + border-radius: 5px !important; +} +::-webkit-scrollbar-thumb:window-inactive { + box-shadow: inset 0 0 0 6px #d38aea !important; +} +::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px #d38aea !important; +} +::-webkit-scrollbar-corner { + background: transparent; +} +/* red buttons */ +.ui.red.labels .label, +.ui.ui.ui.red.label, +.ui.red.button, +.ui.red.buttons .button { + background: #ec7279; + background-color: #ec7279; + color: #2b2d37; +} +.ui.red.labels .label:hover, +.ui.ui.ui.red.label:hover, +.ui.red.button:hover, +.ui.red.buttons .button:hover { + background: rgba(236, 114, 121, 0.8); + background-color: rgba(236, 114, 121, 0.8); + color: #2b2d37; +} +/* grey buttons */ +.ui.grey.labels .label, +.ui.ui.ui.grey.label, +.ui.grey.button, +.ui.grey.buttons .button { + color: #2b2d37; +} +.ui.grey.labels .label:hover, +.ui.ui.ui.grey.label:hover, +.ui.grey.button:hover, +.ui.grey.buttons .button:hover { + color: #2b2d37; +} +/* orange buttons */ +.ui.orange.labels .label, +.ui.ui.ui.orange.label, +.ui.orange.button, +.ui.orange.buttons .button { + background: #deb974; + background-color: #deb974; + color: #2b2d37; +} +.ui.orange.labels .label:hover, +.ui.ui.ui.orange.label:hover, +.ui.orange.button:hover, +.ui.orange.buttons .button:hover { + background: rgba(222, 185, 116, 0.8); + background-color: rgba(222, 185, 116, 0.8); + color: #2b2d37; +} diff --git a/web_src/css/themes/theme-edge-light.css b/web_src/css/themes/theme-edge-light.css new file mode 100644 index 0000000000000..3dae7851aece3 --- /dev/null +++ b/web_src/css/themes/theme-edge-light.css @@ -0,0 +1,359 @@ +:root { + --color-primary: #5079be; + --color-primary-contrast: #fafafa; + --color-primary-dark-1: #5079be; + --color-primary-dark-2: #4f72ad; + --color-primary-dark-3: #4e6b9d; + --color-primary-dark-4: #4e658d; + --color-primary-dark-5: #4d5e7c; + --color-primary-dark-6: #4c576c; + --color-primary-dark-7: #4b505b; + --color-primary-light-1: #5079be; + --color-primary-light-2: #698cc6; + --color-primary-light-3: #839fcf; + --color-primary-light-4: #9cb2d7; + --color-primary-light-5: #b5c5df; + --color-primary-light-6: #cfd8e8; + --color-primary-light-7: #e8ebf0; + --color-primary-alpha-10: rgba(80, 121, 190, 0.1); + --color-primary-alpha-20: rgba(80, 121, 190, 0.2); + --color-primary-alpha-30: rgba(80, 121, 190, 0.3); + --color-primary-alpha-40: rgba(80, 121, 190, 0.4); + --color-primary-alpha-50: rgba(80, 121, 190, 0.5); + --color-primary-alpha-60: rgba(80, 121, 190, 0.6); + --color-primary-alpha-70: rgba(80, 121, 190, 0.7); + --color-primary-alpha-80: rgba(80, 121, 190, 0.8); + --color-primary-alpha-90: rgba(80, 121, 190, 0.9); + --color-secondary: #dde2e7; + --color-secondary-dark-1: #dde2e7; + --color-secondary-dark-2: #d1d6db; + --color-secondary-dark-3: #c5cad0; + --color-secondary-dark-4: #b9bec4; + --color-secondary-dark-5: #acb1b8; + --color-secondary-dark-6: #a0a5ad; + --color-secondary-dark-7: #9499a1; + --color-secondary-dark-8: #888d95; + --color-secondary-dark-9: #7c818a; + --color-secondary-dark-10: #70757e; + --color-secondary-dark-11: #636872; + --color-secondary-dark-12: #575c67; + --color-secondary-dark-13: #4b505b; + --color-secondary-light-1: #dde2e7; + --color-secondary-light-2: #e8ebf0; + --color-secondary-light-3: #e8ebf0; + --color-secondary-light-4: #eef1f4; + --color-secondary-alpha-10: rgba(221, 226, 231, 0.1); + --color-secondary-alpha-20: rgba(221, 226, 231, 0.2); + --color-secondary-alpha-30: rgba(221, 226, 231, 0.3); + --color-secondary-alpha-40: rgba(221, 226, 231, 0.4); + --color-secondary-alpha-50: rgba(221, 226, 231, 0.5); + --color-secondary-alpha-60: rgba(221, 226, 231, 0.6); + --color-secondary-alpha-70: rgba(221, 226, 231, 0.7); + --color-secondary-alpha-80: rgba(221, 226, 231, 0.8); + --color-secondary-alpha-90: rgba(221, 226, 231, 0.9); + /* colors */ + --color-red: #d05858; + --color-orange: #be7e05; + --color-yellow: #be7e05; + --color-olive: #608e32; + --color-green: #608e32; + --color-teal: #3a8b84; + --color-blue: #5079be; + --color-violet: #b05ccc; + --color-purple: #b05ccc; + --color-pink: #b05ccc; + --color-brown: #be7e05; + --color-grey: #8790a0; + /* light variants */ + --color-red-light: #d05858; + --color-orange-light: #be7e05; + --color-yellow-light: #be7e05; + --color-olive-light: #608e32; + --color-green-light: #608e32; + --color-teal-light: #3a8b84; + --color-blue-light: #5079be; + --color-violet-light: #b05ccc; + --color-purple-light: #b05ccc; + --color-pink-light: #b05ccc; + --color-brown-light: #be7e05; + --color-grey-light: #8790a0; + /* other colors */ + --color-black: #e8ebf0; + --color-gold: #be7e05; + --color-white: #fafafa; + --color-diff-removed-word-bg: #ebbaba; + --color-diff-added-word-bg: #bdd1af; + --color-diff-removed-row-bg: #f6e4e4; + --color-diff-moved-row-bg: #e3eaf6; + --color-diff-added-row-bg: #e5eee4; + --color-diff-removed-row-border: #e39e9e; + --color-diff-moved-row-border: #9ab2da; + --color-diff-added-row-border: #a3be8b; + --color-diff-inactive: #e8ebf0; + --color-error-border: #e39e9e; + --color-error-bg: #f6e4e4; + --color-error-text: #d05858; + --color-success-border: #a3be8b; + --color-success-bg: #e5eee4; + --color-success-text: #608e32; + --color-warning-border: #d7b574; + --color-warning-bg: #f0ece2; + --color-warning-text: #be7e05; + --color-info-border: #9ab2da; + --color-info-bg: #e3eaf6; + --color-info-text: #5079be; + /* target-based colors */ + --color-body: #fafafa; + --color-box-header: #e8ebf0; + --color-box-body: #eef1f4; + --color-box-body-highlight: #e8ebf0; + --color-text-dark: #b05ccc; + --color-text: #4b505b; + --color-text-hover: rgba(75, 80, 91, 0.8); + --color-text-light: #608e32; + --color-text-light-1: #8790a0; + --color-text-light-2: #4b505b; + --color-text-light-3: #8790a0; + --color-footer: #eef1f4; + --color-timeline: #dde2e7; + --color-input-text: #4b505b; + --color-input-background: #fafafa; + --color-input-toggle-background: #eef1f4; + --color-input-border: #dde2e7; + --color-input-border-hover: #b2b9c4; + --color-navbar: #eef1f4; + --color-navbar-transparent: #eef1f4; + --color-light: #eef1f4; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #dde2e7; + --color-hover: rgba(221, 226, 231, 0.5); + --color-active: rgba(221, 226, 231, 0.5); + --color-menu: #eef1f4; + --color-card: #eef1f4; + --color-markup-table-row: #e8ebf0; + --color-markup-code-block: #fafafa; + --color-button: #e8ebf0; + --color-code-bg: #fafafa; + --color-code-sidebar-bg: #eef1f4; + --color-shadow: #00000060; + --color-secondary-bg: #eef1f4; + --color-text-focus: #fff; + --color-expand-button: #e8ebf0; + --color-placeholder-text: #8790a0; + --color-editor-line-highlight: #eef1f4; + --color-project-board-bg: #fafafa; + --color-project-board-light-label: #5079be; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-bar: #eef1f4; + --color-label-active-bg: #dde2e7; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #eef1f4; + accent-color: var(--color-accent); + color-scheme: dark; +} +.chroma .nx { + color: #4b505b; +} +.chroma .c, +.chroma .c1, +.chroma .ch, +.chroma .cm, +.chroma .sd { + color: #8790a0; +} +.chroma .k, +.chroma .kc, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr { + color: #d05858; +} +.chroma .o, +.chroma .ow { + color: #b05ccc; +} +.chroma .s, +.chroma .s1, +.chroma .s2, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .sh, +.chroma .si, +.chroma .sr, +.chroma .ss, +.chroma .sx, +.chroma .nt, +.chroma .cpf { + color: #608e32; +} +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .mo, +.chroma .nl { + color: #608e32; +} +.chroma .kt, +.chroma .nc, +.chroma .nn, +.chroma .nv { + color: #be7e05; +} +.chroma .nf, +.chroma .nb, +.chroma .na { + color: #5079be; +} +.chroma .bp, +.chroma .cp, +.chroma .ne, +.chroma .nd, +.chroma .se { + color: #3a8b84; +} +/* primary buttons */ +.ui.primary.button, +.ui.primary.buttons .button { + background: #6996e0; + background-color: #6996e0 !important; + color: #fafafa; +} +.ui.primary.button:hover, +.ui.primary.buttons .button:hover { + background: rgba(105, 150, 224, 0.8); + background-color: rgba(105, 150, 224, 0.8) !important; + color: #fafafa; +} +/* secondary buttons */ +.ui.green.buttons .button, +.ui.green.button { + background: #76af6f; + background-color: #76af6f; + color: #fafafa; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover { + background: rgba(118, 175, 111, 0.8); + background-color: rgba(118, 175, 111, 0.8); + color: #fafafa; +} +/* text based buttons (purple) */ +.ui.labeled.button.disabled > .button, +.ui.basic.buttons .button, +.ui.basic.button { + color: #b05ccc; +} +.ui.labeled.button.disabled > .button:hover, +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + color: #b05ccc; +} +/* repo title && header */ +.repo-title { + color: #b05ccc; +} +/* star number && fork number */ +.repo-buttons button[disabled] ~ .label, +.repo-buttons .ui.labeled.button.disabled > .label { + color: #5079be; +} +.ui.basic.labels .label, +.ui.basic.label { + color: #5079be; +} +/* hover on commits, branch, tags in project home page */ +.repository .ui.segment.sub-menu .list .item a:hover, +.ui.tabular.menu .item:hover { + color: var(--color-text-hover); +} +/* commit label */ +.ui.primary.labels .label, +.ui.ui.ui.primary.label { + color: #fafafa; +} +/* issue label */ +.ui.green.labels .label, +.ui.ui.ui.green.label { + color: #fafafa; +} +/* grey button (rss feed button in repository home page) */ +i.grey.icon.icon.icon.icon { + color: #8790a0; +} +/* scroll bar */ +* { + scrollbar-color: #b05ccc transparent !important; +} +::-webkit-scrollbar { + width: 10px; + height: 10px; +} +::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px #b05ccc !important; + border: 2px solid transparent; + border-radius: 5px !important; +} +::-webkit-scrollbar-thumb:window-inactive { + box-shadow: inset 0 0 0 6px #b05ccc !important; +} +::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px #b05ccc !important; +} +::-webkit-scrollbar-corner { + background: transparent; +} +/* red buttons */ +.ui.red.labels .label, +.ui.ui.ui.red.label, +.ui.red.button, +.ui.red.buttons .button { + background: #e17373; + background-color: #e17373; + color: #fafafa; +} +.ui.red.labels .label:hover, +.ui.ui.ui.red.label:hover, +.ui.red.button:hover, +.ui.red.buttons .button:hover { + background: rgba(225, 115, 115, 0.8); + background-color: rgba(225, 115, 115, 0.8); + color: #fafafa; +} +/* grey buttons */ +.ui.grey.labels .label, +.ui.ui.ui.grey.label, +.ui.grey.button, +.ui.grey.buttons .button { + color: #fafafa; +} +.ui.grey.labels .label:hover, +.ui.ui.ui.grey.label:hover, +.ui.grey.button:hover, +.ui.grey.buttons .button:hover { + color: #fafafa; +} +/* orange buttons */ +.ui.orange.labels .label, +.ui.ui.ui.orange.label, +.ui.orange.button, +.ui.orange.buttons .button { + background: #be7e05; + background-color: #be7e05; + color: #fafafa; +} +.ui.orange.labels .label:hover, +.ui.ui.ui.orange.label:hover, +.ui.orange.button:hover, +.ui.orange.buttons .button:hover { + background: rgba(190, 126, 5, 0.8); + background-color: rgba(190, 126, 5, 0.8); + color: #fafafa; +} diff --git a/web_src/css/themes/theme-enterprise-light.css b/web_src/css/themes/theme-enterprise-light.css new file mode 100644 index 0000000000000..b6387cdf29b32 --- /dev/null +++ b/web_src/css/themes/theme-enterprise-light.css @@ -0,0 +1,222 @@ +:root { + --color-primary: #415a77; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #415a77; + --color-primary-dark-2: #3b516d; + --color-primary-dark-3: #344963; + --color-primary-dark-4: #2e4059; + --color-primary-dark-5: #28374f; + --color-primary-dark-6: #212f45; + --color-primary-dark-7: #1b263b; + --color-primary-light-1: #415a77; + --color-primary-light-2: #5d728b; + --color-primary-light-3: #798a9f; + --color-primary-light-4: #95a3b4; + --color-primary-light-5: #b0bbc8; + --color-primary-light-6: #ccd3dc; + --color-primary-light-7: #e8ebf0; + --color-primary-alpha-10: rgba(65, 90, 119, 0.1); + --color-primary-alpha-20: rgba(65, 90, 119, 0.2); + --color-primary-alpha-30: rgba(65, 90, 119, 0.3); + --color-primary-alpha-40: rgba(65, 90, 119, 0.4); + --color-primary-alpha-50: rgba(65, 90, 119, 0.5); + --color-primary-alpha-60: rgba(65, 90, 119, 0.6); + --color-primary-alpha-70: rgba(65, 90, 119, 0.7); + --color-primary-alpha-80: rgba(65, 90, 119, 0.8); + --color-primary-alpha-90: rgba(65, 90, 119, 0.9); + --color-secondary: #e0e1dd; + --color-secondary-dark-1: #e0e1dd; + --color-secondary-dark-2: #d0d1d0; + --color-secondary-dark-3: #bfc2c2; + --color-secondary-dark-4: #afb2b5; + --color-secondary-dark-5: #9ea3a7; + --color-secondary-dark-6: #8e9399; + --color-secondary-dark-7: #7e848c; + --color-secondary-dark-8: #6d747f; + --color-secondary-dark-9: #5d6471; + --color-secondary-dark-10: #4c5564; + --color-secondary-dark-11: #3c4556; + --color-secondary-dark-12: #2b3648; + --color-secondary-dark-13: #1b263b; + --color-secondary-light-1: #e0e1dd; + --color-secondary-light-2: #e1e3e0; + --color-secondary-light-3: #e3e4e3; + --color-secondary-light-4: #e4e6e7; + --color-secondary-alpha-10: rgba(224, 225, 221, 0.1); + --color-secondary-alpha-20: rgba(224, 225, 221, 0.2); + --color-secondary-alpha-30: rgba(224, 225, 221, 0.3); + --color-secondary-alpha-40: rgba(224, 225, 221, 0.4); + --color-secondary-alpha-50: rgba(224, 225, 221, 0.5); + --color-secondary-alpha-60: rgba(224, 225, 221, 0.6); + --color-secondary-alpha-70: rgba(224, 225, 221, 0.7); + --color-secondary-alpha-80: rgba(224, 225, 221, 0.8); + --color-secondary-alpha-90: rgba(224, 225, 221, 0.9); + /* colors */ + --color-red: #f44336; + --color-orange: #ff9800; + --color-yellow: #ffeb3b; + --color-olive: #4caf50; + --color-green: #4caf50; + --color-teal: #00bcd4; + --color-blue: #2196f3; + --color-violet: #9c27b0; + --color-purple: #9c27b0; + --color-pink: #e91e63; + --color-brown: #ff9800; + --color-grey: #9e9e9e; + /* light variants */ + --color-red-light: #f44336; + --color-orange-light: #ff9800; + --color-yellow-light: #ffeb3b; + --color-olive-light: #4caf50; + --color-green-light: #4caf50; + --color-teal-light: #00bcd4; + --color-blue-light: #2196f3; + --color-violet-light: #9c27b0; + --color-purple-light: #9c27b0; + --color-pink-light: #e91e63; + --color-brown-light: #ff9800; + --color-grey-light: #9e9e9e; + /* other colors */ + --color-black: #0d1b2a; + --color-gold: #ff9800; + --color-white: #ffffff; + --color-diff-removed-word-bg: #fcb9b7; + --color-diff-added-word-bg: #b9e0bb; + --color-diff-removed-row-bg: #ffebee; + --color-diff-moved-row-bg: #e3f2fd; + --color-diff-added-row-bg: #e8f5e9; + --color-diff-removed-row-border: #fa9792; + --color-diff-moved-row-border: #82c4f8; + --color-diff-added-row-border: #9ad29d; + --color-diff-inactive: #e8ebf0; + --color-error-border: #fa9792; + --color-error-bg: #ffebee; + --color-error-text: #f44336; + --color-success-border: #9ad29d; + --color-success-bg: #e8f5e9; + --color-success-text: #4caf50; + --color-warning-border: #ffc670; + --color-warning-bg: #fff3e0; + --color-warning-text: #ff9800; + --color-info-border: #82c4f8; + --color-info-bg: #e3f2fd; + --color-info-text: #2196f3; + /* target-based colors */ + --color-body: #fafafa; + --color-box-header: #e8ebf0; + --color-box-body: #fafafa; + --color-box-body-highlight: #e8ebf0; + --color-text: #1b263b; + --color-text-dark: #0d1b2a; + --color-text-light: #555555; + --color-text-light-1: #6a6a6a; + --color-text-light-2: #808080; + --color-text-light-3: #a0a0a0; + --color-footer: #fafafa; + --color-timeline: #dde2e7; + --color-input-text: #1b263b; + --color-input-background: #fafafa; + --color-input-toggle-background: #fafafa; + --color-input-border: #dde2e7; + --color-input-border-hover: #bec0c3; + --color-navbar: #fafafa; + --color-navbar-transparent: #fafafa; + --color-light: #fafafa; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #dde2e7; + --color-hover: rgba(221, 226, 231, 0.5); + --color-active: rgba(221, 226, 231, 0.5); + --color-menu: #fafafa; + --color-card: #fafafa; + --color-markup-table-row: #e8ebf0; + --color-markup-code-block: #ffffff; + --color-button: #e8ebf0; + --color-code-bg: #fafafa; + --color-code-sidebar-bg: #ffffff; + --color-shadow: #00000060; + --color-secondary-bg: #e8ebf0; + --color-text-focus: #fff; + --color-expand-button: #e8ebf0; + --color-placeholder-text: #9e9e9e; + --color-editor-line-highlight: #fafafa; + --color-project-board-bg: #ffffff; + --color-project-board-light-label: #415a77; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-tooltip-bg: #000000f0; + --color-tooltip-text: #fafafa; + --color-header-bar: #fafafa; + --color-label-active-bg: #dde2e7; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #fffbdd; + accent-color: var(--color-accent); + color-scheme: light; +} +.chroma .nx { + color: #1b263b; +} +.chroma .c, +.chroma .c1, +.chroma .ch, +.chroma .cm, +.chroma .sd { + color: #9e9e9e; +} +.chroma .k, +.chroma .kc, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr { + color: #f44336; +} +.chroma .o, +.chroma .ow { + color: #9c27b0; +} +.chroma .s, +.chroma .s1, +.chroma .s2, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .sh, +.chroma .si, +.chroma .sr, +.chroma .ss, +.chroma .sx, +.chroma .nt, +.chroma .cpf { + color: #4caf50; +} +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .mo, +.chroma .nl { + color: #4caf50; +} +.chroma .kt, +.chroma .nc, +.chroma .nn, +.chroma .nv { + color: #ffeb3b; +} +.chroma .nf, +.chroma .nb, +.chroma .na { + color: #2196f3; +} +.chroma .bp, +.chroma .cp, +.chroma .ne, +.chroma .nd, +.chroma .se { + color: #00bcd4; +} diff --git a/web_src/css/themes/theme-gruvbox-material-auto.css b/web_src/css/themes/theme-gruvbox-material-auto.css new file mode 100644 index 0000000000000..7c2ad8a3734b1 --- /dev/null +++ b/web_src/css/themes/theme-gruvbox-material-auto.css @@ -0,0 +1,724 @@ +@media (prefers-color-scheme: dark) { + :root { + --is-dark-theme: true; + --color-primary: #a9b665; + --color-primary-contrast: #282828; + --color-primary-dark-1: #a9b665; + --color-primary-dark-2: #b2b96f; + --color-primary-dark-3: #babc79; + --color-primary-dark-4: #c3bf83; + --color-primary-dark-5: #ccc18d; + --color-primary-dark-6: #d4c497; + --color-primary-dark-7: #ddc7a1; + --color-primary-light-1: #a9b665; + --color-primary-light-2: #96a15d; + --color-primary-light-3: #848c55; + --color-primary-light-4: #72774d; + --color-primary-light-5: #5f6145; + --color-primary-light-6: #4d4c3d; + --color-primary-light-7: #3a3735; + --color-primary-alpha-10: rgba(169, 182, 101, 0.1); + --color-primary-alpha-20: rgba(169, 182, 101, 0.2); + --color-primary-alpha-30: rgba(169, 182, 101, 0.3); + --color-primary-alpha-40: rgba(169, 182, 101, 0.4); + --color-primary-alpha-50: rgba(169, 182, 101, 0.5); + --color-primary-alpha-60: rgba(169, 182, 101, 0.6); + --color-primary-alpha-70: rgba(169, 182, 101, 0.7); + --color-primary-alpha-80: rgba(169, 182, 101, 0.8); + --color-primary-alpha-90: rgba(169, 182, 101, 0.9); + --color-secondary: #504945; + --color-secondary-dark-1: #504945; + --color-secondary-dark-2: #5c534d; + --color-secondary-dark-3: #685e54; + --color-secondary-dark-4: #73695c; + --color-secondary-dark-5: #7f7364; + --color-secondary-dark-6: #8b7e6b; + --color-secondary-dark-7: #978873; + --color-secondary-dark-8: #a2927b; + --color-secondary-dark-9: #ae9d82; + --color-secondary-dark-10: #baa88a; + --color-secondary-dark-11: #c5b292; + --color-secondary-dark-12: #d1bd99; + --color-secondary-dark-13: #ddc7a1; + --color-secondary-light-1: #504945; + --color-secondary-light-2: #45403d; + --color-secondary-light-3: #3a3735; + --color-secondary-light-4: #32302f; + --color-secondary-alpha-10: rgba(80, 73, 69, 0.1); + --color-secondary-alpha-20: rgba(80, 73, 69, 0.2); + --color-secondary-alpha-30: rgba(80, 73, 69, 0.3); + --color-secondary-alpha-40: rgba(80, 73, 69, 0.4); + --color-secondary-alpha-50: rgba(80, 73, 69, 0.5); + --color-secondary-alpha-60: rgba(80, 73, 69, 0.6); + --color-secondary-alpha-70: rgba(80, 73, 69, 0.7); + --color-secondary-alpha-80: rgba(80, 73, 69, 0.8); + --color-secondary-alpha-90: rgba(80, 73, 69, 0.9); + /* colors */ + --color-red: #ea6962; + --color-orange: #e78a4e; + --color-yellow: #d8a657; + --color-olive: #a9b665; + --color-green: #a9b665; + --color-teal: #89b482; + --color-blue: #7daea3; + --color-violet: #d3869b; + --color-purple: #d3869b; + --color-pink: #d3869b; + --color-brown: #e78a4e; + --color-grey: #928374; + /* light variants */ + --color-red-light: #ea6962; + --color-orange-light: #e78a4e; + --color-yellow-light: #d8a657; + --color-olive-light: #a9b665; + --color-green-light: #a9b665; + --color-teal-light: #89b482; + --color-blue-light: #7daea3; + --color-violet-light: #d3869b; + --color-purple-light: #d3869b; + --color-pink-light: #d3869b; + --color-brown-light: #e78a4e; + --color-grey-light: #928374; + /* other colors */ + --color-black: #3a3735; + --color-gold: #e78a4e; + --color-white: #282828; + --color-diff-removed-word-bg: #7b4440; + --color-diff-added-word-bg: #5c6646; + --color-diff-removed-row-bg: #4c3432; + --color-diff-moved-row-bg: #374141; + --color-diff-added-row-bg: #3b4439; + --color-diff-removed-row-border: #9b4f4a; + --color-diff-moved-row-border: #5a7872; + --color-diff-added-row-border: #727d4f; + --color-diff-inactive: #3a3735; + --color-error-border: #9b4f4a; + --color-error-bg: #4c3432; + --color-error-text: #ea6962; + --color-success-border: #727d4f; + --color-success-bg: #3b4439; + --color-success-text: #a9b665; + --color-warning-border: #947443; + --color-warning-bg: #4f422e; + --color-warning-text: #d8a657; + --color-info-border: #5a7872; + --color-info-bg: #374141; + --color-info-text: #7daea3; + /* target-based colors */ + --color-body: #282828; + --color-box-header: #45403d; + --color-box-body: #32302f; + --color-box-body-highlight: #3a3735; + --color-text-dark: #e78a4e; + --color-text: #ddc7a1; + --color-text-hover: rgba(221, 199, 161, 0.8); + --color-text-light: #d8a657; + --color-text-light-1: #928374; + --color-text-light-2: #ddc7a1; + --color-text-light-3: #928374; + --color-footer: #32302f; + --color-timeline: #504945; + --color-input-text: #ddc7a1; + --color-input-background: #282828; + --color-input-toggle-background: #32302f; + --color-input-border: #504945; + --color-input-border-hover: #71665d; + --color-navbar: #32302f; + --color-navbar-transparent: #32302f; + --color-light: #32302f; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #504945; + --color-hover: rgba(80, 73, 69, 0.5); + --color-active: rgba(80, 73, 69, 0.5); + --color-menu: #32302f; + --color-card: #32302f; + --color-markup-table-row: #45403d; + --color-markup-code-block: #282828; + --color-button: #45403d; + --color-code-bg: #282828; + --color-code-sidebar-bg: #32302f; + --color-shadow: #00000060; + --color-secondary-bg: #32302f; + --color-text-focus: #fff; + --color-expand-button: #3a3735; + --color-placeholder-text: #928374; + --color-editor-line-highlight: #32302f; + --color-project-board-bg: #282828; + --color-project-board-light-label: #a9b665; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-bar: #32302f; + --color-label-active-bg: #504945; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #32302f; + accent-color: var(--color-accent); + color-scheme: dark; + } + .chroma .nx { + color: #ddc7a1; + } + .chroma .c, + .chroma .c1, + .chroma .ch, + .chroma .cm, + .chroma .sd { + color: #928374; + } + .chroma .k, + .chroma .kc, + .chroma .kd, + .chroma .kn, + .chroma .kp, + .chroma .kr { + color: #ea6962; + } + .chroma .o, + .chroma .ow { + color: #e78a4e; + } + .chroma .s, + .chroma .s1, + .chroma .s2, + .chroma .sa, + .chroma .sb, + .chroma .sc, + .chroma .sh, + .chroma .si, + .chroma .sr, + .chroma .ss, + .chroma .sx, + .chroma .nt, + .chroma .cpf { + color: #89b482; + } + .chroma .m, + .chroma .mb, + .chroma .mf, + .chroma .mh, + .chroma .mi, + .chroma .mo, + .chroma .nl { + color: #d3869b; + } + .chroma .kt, + .chroma .nc, + .chroma .nn, + .chroma .nv { + color: #d8a657; + } + .chroma .nf, + .chroma .nb, + .chroma .na { + color: #a9b665; + } + .chroma .bp, + .chroma .cp, + .chroma .ne, + .chroma .nd, + .chroma .se { + color: #7daea3; + } + /* primary buttons */ + .ui.primary.button, + .ui.primary.buttons .button { + background: #a9b665; + background-color: #a9b665 !important; + color: #282828; + } + .ui.primary.button:hover, + .ui.primary.buttons .button:hover { + background: rgba(169, 182, 101, 0.8); + background-color: rgba(169, 182, 101, 0.8) !important; + color: #282828; + } + /* secondary buttons */ + .ui.green.buttons .button, + .ui.green.button { + background: #a89984; + background-color: #a89984; + color: #282828; + } + .ui.green.buttons .button:hover, + .ui.green.button:hover { + background: rgba(168, 153, 132, 0.8); + background-color: rgba(168, 153, 132, 0.8); + color: #282828; + } + /* text based buttons (purple) */ + .ui.labeled.button.disabled > .button, + .ui.basic.buttons .button, + .ui.basic.button { + color: #e78a4e; + } + .ui.labeled.button.disabled > .button:hover, + .ui.basic.buttons .button:hover, + .ui.basic.button:hover { + color: #e78a4e; + } + /* repo title && header */ + .repo-title { + color: #e78a4e; + } + /* star number && fork number */ + .repo-buttons button[disabled] ~ .label, + .repo-buttons .ui.labeled.button.disabled > .label { + color: #a9b665; + } + .ui.basic.labels .label, + .ui.basic.label { + color: #a9b665; + } + /* hover on commits, branch, tags in project home page */ + .repository .ui.segment.sub-menu .list .item a:hover, + .ui.tabular.menu .item:hover { + color: var(--color-text-hover); + } + /* commit label */ + .ui.primary.labels .label, + .ui.ui.ui.primary.label { + color: #282828; + } + /* issue label */ + .ui.green.labels .label, + .ui.ui.ui.green.label { + color: #282828; + } + /* grey button (rss feed button in repository home page) */ + i.grey.icon.icon.icon.icon { + color: #928374; + } + /* scroll bar */ + * { + scrollbar-color: #e78a4e transparent !important; + } + ::-webkit-scrollbar { + width: 10px; + height: 10px; + } + ::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px #e78a4e !important; + border: 2px solid transparent; + border-radius: 5px !important; + } + ::-webkit-scrollbar-thumb:window-inactive { + box-shadow: inset 0 0 0 6px #e78a4e !important; + } + ::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px #e78a4e !important; + } + ::-webkit-scrollbar-corner { + background: transparent; + } + /* red buttons */ + .ui.red.labels .label, + .ui.ui.ui.red.label, + .ui.red.button, + .ui.red.buttons .button { + background: #ea6962; + background-color: #ea6962; + color: #282828; + } + .ui.red.labels .label:hover, + .ui.ui.ui.red.label:hover, + .ui.red.button:hover, + .ui.red.buttons .button:hover { + background: rgba(234, 105, 98, 0.8); + background-color: rgba(234, 105, 98, 0.8); + color: #282828; + } + /* grey buttons */ + .ui.grey.labels .label, + .ui.ui.ui.grey.label, + .ui.grey.button, + .ui.grey.buttons .button { + color: #282828; + } + .ui.grey.labels .label:hover, + .ui.ui.ui.grey.label:hover, + .ui.grey.button:hover, + .ui.grey.buttons .button:hover { + color: #282828; + } + /* orange buttons */ + .ui.orange.labels .label, + .ui.ui.ui.orange.label, + .ui.orange.button, + .ui.orange.buttons .button { + background: #e78a4e; + background-color: #e78a4e; + color: #282828; + } + .ui.orange.labels .label:hover, + .ui.ui.ui.orange.label:hover, + .ui.orange.button:hover, + .ui.orange.buttons .button:hover { + background: rgba(231, 138, 78, 0.8); + background-color: rgba(231, 138, 78, 0.8); + color: #282828; + } +} +@media (prefers-color-scheme: light) { + :root { + --is-dark-theme: true; + --color-primary: #6c782e; + --color-primary-contrast: #fbf1c7; + --color-primary-dark-1: #6c782e; + --color-primary-dark-2: #6b702f; + --color-primary-dark-3: #6a6830; + --color-primary-dark-4: #696032; + --color-primary-dark-5: #675733; + --color-primary-dark-6: #664f34; + --color-primary-dark-7: #654735; + --color-primary-light-1: #6c782e; + --color-primary-light-2: #828a46; + --color-primary-light-3: #999c5d; + --color-primary-light-4: #afaf75; + --color-primary-light-5: #c5c18d; + --color-primary-light-6: #dcd3a4; + --color-primary-light-7: #f2e5bc; + --color-primary-alpha-10: rgba(108, 120, 46, 0.1); + --color-primary-alpha-20: rgba(108, 120, 46, 0.2); + --color-primary-alpha-30: rgba(108, 120, 46, 0.3); + --color-primary-alpha-40: rgba(108, 120, 46, 0.4); + --color-primary-alpha-50: rgba(108, 120, 46, 0.5); + --color-primary-alpha-60: rgba(108, 120, 46, 0.6); + --color-primary-alpha-70: rgba(108, 120, 46, 0.7); + --color-primary-alpha-80: rgba(108, 120, 46, 0.8); + --color-primary-alpha-90: rgba(108, 120, 46, 0.9); + --color-secondary: #e5d5ad; + --color-secondary-dark-1: #e5d5ad; + --color-secondary-dark-2: #dac9a3; + --color-secondary-dark-3: #d0bd99; + --color-secondary-dark-4: #c5b28f; + --color-secondary-dark-5: #baa685; + --color-secondary-dark-6: #b09a7b; + --color-secondary-dark-7: #a58e71; + --color-secondary-dark-8: #9a8267; + --color-secondary-dark-9: #90765d; + --color-secondary-dark-10: #856b53; + --color-secondary-dark-11: #7a5f49; + --color-secondary-dark-12: #70533f; + --color-secondary-dark-13: #654735; + --color-secondary-light-1: #e5d5ad; + --color-secondary-light-2: #eee0b7; + --color-secondary-light-3: #f2e5bc; + --color-secondary-light-4: #f4e8be; + --color-secondary-alpha-10: rgba(229, 213, 173, 0.1); + --color-secondary-alpha-20: rgba(229, 213, 173, 0.2); + --color-secondary-alpha-30: rgba(229, 213, 173, 0.3); + --color-secondary-alpha-40: rgba(229, 213, 173, 0.4); + --color-secondary-alpha-50: rgba(229, 213, 173, 0.5); + --color-secondary-alpha-60: rgba(229, 213, 173, 0.6); + --color-secondary-alpha-70: rgba(229, 213, 173, 0.7); + --color-secondary-alpha-80: rgba(229, 213, 173, 0.8); + --color-secondary-alpha-90: rgba(229, 213, 173, 0.9); + /* colors */ + --color-red: #c14a4a; + --color-orange: #c35e0a; + --color-yellow: #b47109; + --color-olive: #6c782e; + --color-green: #6c782e; + --color-teal: #4c7a5d; + --color-blue: #45707a; + --color-violet: #945e80; + --color-purple: #945e80; + --color-pink: #945e80; + --color-brown: #c35e0a; + --color-grey: #928374; + /* light variants */ + --color-red-light: #c14a4a; + --color-orange-light: #c35e0a; + --color-yellow-light: #b47109; + --color-olive-light: #6c782e; + --color-green-light: #6c782e; + --color-teal-light: #4c7a5d; + --color-blue-light: #45707a; + --color-violet-light: #945e80; + --color-purple-light: #945e80; + --color-pink-light: #945e80; + --color-brown-light: #c35e0a; + --color-grey-light: #928374; + /* other colors */ + --color-black: #f2e5bc; + --color-gold: #c35e0a; + --color-white: #fbf1c7; + --color-diff-removed-word-bg: #e3ae95; + --color-diff-added-word-bg: #bcc28d; + --color-diff-removed-row-bg: #f1d9b5; + --color-diff-moved-row-bg: #dadec0; + --color-diff-added-row-bg: #dee2b6; + --color-diff-removed-row-border: #d99280; + --color-diff-moved-row-border: #90a79d; + --color-diff-added-row-border: #a5ad72; + --color-diff-inactive: #f2e5bc; + --color-error-border: #d99280; + --color-error-bg: #f1d9b5; + --color-error-text: #c14a4a; + --color-success-border: #a5ad72; + --color-success-bg: #dee2b6; + --color-success-text: #6c782e; + --color-warning-border: #d7ac5e; + --color-warning-bg: #fae7b3; + --color-warning-text: #b47109; + --color-info-border: #90a79d; + --color-info-bg: #dadec0; + --color-info-text: #45707a; + /* target-based colors */ + --color-body: #fbf1c7; + --color-box-header: #eee0b7; + --color-box-body: #f4e8be; + --color-box-body-highlight: #f2e5bc; + --color-text-dark: #c35e0a; + --color-text: #654735; + --color-text-hover: rgba(101, 71, 53, 0.8); + --color-text-light: #b47109; + --color-text-light-1: #928374; + --color-text-light-2: #654735; + --color-text-light-3: #928374; + --color-footer: #f4e8be; + --color-timeline: #e5d5ad; + --color-input-text: #654735; + --color-input-background: #fbf1c7; + --color-input-toggle-background: #f4e8be; + --color-input-border: #e5d5ad; + --color-input-border-hover: #bcac91; + --color-navbar: #f4e8be; + --color-navbar-transparent: #f4e8be; + --color-light: #f4e8be; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #e5d5ad; + --color-hover: rgba(229, 213, 173, 0.5); + --color-active: rgba(229, 213, 173, 0.5); + --color-menu: #f4e8be; + --color-card: #f4e8be; + --color-markup-table-row: #eee0b7; + --color-markup-code-block: #fbf1c7; + --color-button: #eee0b7; + --color-code-bg: #fbf1c7; + --color-code-sidebar-bg: #f4e8be; + --color-shadow: #00000060; + --color-secondary-bg: #f4e8be; + --color-text-focus: #fff; + --color-expand-button: #f2e5bc; + --color-placeholder-text: #928374; + --color-editor-line-highlight: #f4e8be; + --color-project-board-bg: #fbf1c7; + --color-project-board-light-label: #6c782e; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-bar: #f4e8be; + --color-label-active-bg: #e5d5ad; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #f4e8be; + accent-color: var(--color-accent); + color-scheme: dark; + } + .chroma .nx { + color: #654735; + } + .chroma .c, + .chroma .c1, + .chroma .ch, + .chroma .cm, + .chroma .sd { + color: #928374; + } + .chroma .k, + .chroma .kc, + .chroma .kd, + .chroma .kn, + .chroma .kp, + .chroma .kr { + color: #c14a4a; + } + .chroma .o, + .chroma .ow { + color: #c35e0a; + } + .chroma .s, + .chroma .s1, + .chroma .s2, + .chroma .sa, + .chroma .sb, + .chroma .sc, + .chroma .sh, + .chroma .si, + .chroma .sr, + .chroma .ss, + .chroma .sx, + .chroma .nt, + .chroma .cpf { + color: #4c7a5d; + } + .chroma .m, + .chroma .mb, + .chroma .mf, + .chroma .mh, + .chroma .mi, + .chroma .mo, + .chroma .nl { + color: #945e80; + } + .chroma .kt, + .chroma .nc, + .chroma .nn, + .chroma .nv { + color: #b47109; + } + .chroma .nf, + .chroma .nb, + .chroma .na { + color: #6c782e; + } + .chroma .bp, + .chroma .cp, + .chroma .ne, + .chroma .nd, + .chroma .se { + color: #45707a; + } + /* primary buttons */ + .ui.primary.button, + .ui.primary.buttons .button { + background: #6f8352; + background-color: #6f8352 !important; + color: #fbf1c7; + } + .ui.primary.button:hover, + .ui.primary.buttons .button:hover { + background: rgba(111, 131, 82, 0.8); + background-color: rgba(111, 131, 82, 0.8) !important; + color: #fbf1c7; + } + /* secondary buttons */ + .ui.green.buttons .button, + .ui.green.button { + background: #7c6f64; + background-color: #7c6f64; + color: #fbf1c7; + } + .ui.green.buttons .button:hover, + .ui.green.button:hover { + background: rgba(124, 111, 100, 0.8); + background-color: rgba(124, 111, 100, 0.8); + color: #fbf1c7; + } + /* text based buttons (purple) */ + .ui.labeled.button.disabled > .button, + .ui.basic.buttons .button, + .ui.basic.button { + color: #c35e0a; + } + .ui.labeled.button.disabled > .button:hover, + .ui.basic.buttons .button:hover, + .ui.basic.button:hover { + color: #c35e0a; + } + /* repo title && header */ + .repo-title { + color: #c35e0a; + } + /* star number && fork number */ + .repo-buttons button[disabled] ~ .label, + .repo-buttons .ui.labeled.button.disabled > .label { + color: #6c782e; + } + .ui.basic.labels .label, + .ui.basic.label { + color: #6c782e; + } + /* hover on commits, branch, tags in project home page */ + .repository .ui.segment.sub-menu .list .item a:hover, + .ui.tabular.menu .item:hover { + color: var(--color-text-hover); + } + /* commit label */ + .ui.primary.labels .label, + .ui.ui.ui.primary.label { + color: #fbf1c7; + } + /* issue label */ + .ui.green.labels .label, + .ui.ui.ui.green.label { + color: #fbf1c7; + } + /* grey button (rss feed button in repository home page) */ + i.grey.icon.icon.icon.icon { + color: #928374; + } + /* scroll bar */ + * { + scrollbar-color: #c35e0a transparent !important; + } + ::-webkit-scrollbar { + width: 10px; + height: 10px; + } + ::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px #c35e0a !important; + border: 2px solid transparent; + border-radius: 5px !important; + } + ::-webkit-scrollbar-thumb:window-inactive { + box-shadow: inset 0 0 0 6px #c35e0a !important; + } + ::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px #c35e0a !important; + } + ::-webkit-scrollbar-corner { + background: transparent; + } + /* red buttons */ + .ui.red.labels .label, + .ui.ui.ui.red.label, + .ui.red.button, + .ui.red.buttons .button { + background: #ae5858; + background-color: #ae5858; + color: #fbf1c7; + } + .ui.red.labels .label:hover, + .ui.ui.ui.red.label:hover, + .ui.red.button:hover, + .ui.red.buttons .button:hover { + background: rgba(174, 88, 88, 0.8); + background-color: rgba(174, 88, 88, 0.8); + color: #fbf1c7; + } + /* grey buttons */ + .ui.grey.labels .label, + .ui.ui.ui.grey.label, + .ui.grey.button, + .ui.grey.buttons .button { + color: #fbf1c7; + } + .ui.grey.labels .label:hover, + .ui.ui.ui.grey.label:hover, + .ui.grey.button:hover, + .ui.grey.buttons .button:hover { + color: #fbf1c7; + } + /* orange buttons */ + .ui.orange.labels .label, + .ui.ui.ui.orange.label, + .ui.orange.button, + .ui.orange.buttons .button { + background: #c35e0a; + background-color: #c35e0a; + color: #fbf1c7; + } + .ui.orange.labels .label:hover, + .ui.ui.ui.orange.label:hover, + .ui.orange.button:hover, + .ui.orange.buttons .button:hover { + background: rgba(195, 94, 10, 0.8); + background-color: rgba(195, 94, 10, 0.8); + color: #fbf1c7; + } +} diff --git a/web_src/css/themes/theme-gruvbox-material-dark.css b/web_src/css/themes/theme-gruvbox-material-dark.css new file mode 100644 index 0000000000000..a87fe68fd934a --- /dev/null +++ b/web_src/css/themes/theme-gruvbox-material-dark.css @@ -0,0 +1,360 @@ +:root { + --is-dark-theme: true; + --color-primary: #a9b665; + --color-primary-contrast: #282828; + --color-primary-dark-1: #a9b665; + --color-primary-dark-2: #b2b96f; + --color-primary-dark-3: #babc79; + --color-primary-dark-4: #c3bf83; + --color-primary-dark-5: #ccc18d; + --color-primary-dark-6: #d4c497; + --color-primary-dark-7: #ddc7a1; + --color-primary-light-1: #a9b665; + --color-primary-light-2: #96a15d; + --color-primary-light-3: #848c55; + --color-primary-light-4: #72774d; + --color-primary-light-5: #5f6145; + --color-primary-light-6: #4d4c3d; + --color-primary-light-7: #3a3735; + --color-primary-alpha-10: rgba(169, 182, 101, 0.1); + --color-primary-alpha-20: rgba(169, 182, 101, 0.2); + --color-primary-alpha-30: rgba(169, 182, 101, 0.3); + --color-primary-alpha-40: rgba(169, 182, 101, 0.4); + --color-primary-alpha-50: rgba(169, 182, 101, 0.5); + --color-primary-alpha-60: rgba(169, 182, 101, 0.6); + --color-primary-alpha-70: rgba(169, 182, 101, 0.7); + --color-primary-alpha-80: rgba(169, 182, 101, 0.8); + --color-primary-alpha-90: rgba(169, 182, 101, 0.9); + --color-secondary: #504945; + --color-secondary-dark-1: #504945; + --color-secondary-dark-2: #5c534d; + --color-secondary-dark-3: #685e54; + --color-secondary-dark-4: #73695c; + --color-secondary-dark-5: #7f7364; + --color-secondary-dark-6: #8b7e6b; + --color-secondary-dark-7: #978873; + --color-secondary-dark-8: #a2927b; + --color-secondary-dark-9: #ae9d82; + --color-secondary-dark-10: #baa88a; + --color-secondary-dark-11: #c5b292; + --color-secondary-dark-12: #d1bd99; + --color-secondary-dark-13: #ddc7a1; + --color-secondary-light-1: #504945; + --color-secondary-light-2: #45403d; + --color-secondary-light-3: #3a3735; + --color-secondary-light-4: #32302f; + --color-secondary-alpha-10: rgba(80, 73, 69, 0.1); + --color-secondary-alpha-20: rgba(80, 73, 69, 0.2); + --color-secondary-alpha-30: rgba(80, 73, 69, 0.3); + --color-secondary-alpha-40: rgba(80, 73, 69, 0.4); + --color-secondary-alpha-50: rgba(80, 73, 69, 0.5); + --color-secondary-alpha-60: rgba(80, 73, 69, 0.6); + --color-secondary-alpha-70: rgba(80, 73, 69, 0.7); + --color-secondary-alpha-80: rgba(80, 73, 69, 0.8); + --color-secondary-alpha-90: rgba(80, 73, 69, 0.9); + /* colors */ + --color-red: #ea6962; + --color-orange: #e78a4e; + --color-yellow: #d8a657; + --color-olive: #a9b665; + --color-green: #a9b665; + --color-teal: #89b482; + --color-blue: #7daea3; + --color-violet: #d3869b; + --color-purple: #d3869b; + --color-pink: #d3869b; + --color-brown: #e78a4e; + --color-grey: #928374; + /* light variants */ + --color-red-light: #ea6962; + --color-orange-light: #e78a4e; + --color-yellow-light: #d8a657; + --color-olive-light: #a9b665; + --color-green-light: #a9b665; + --color-teal-light: #89b482; + --color-blue-light: #7daea3; + --color-violet-light: #d3869b; + --color-purple-light: #d3869b; + --color-pink-light: #d3869b; + --color-brown-light: #e78a4e; + --color-grey-light: #928374; + /* other colors */ + --color-black: #3a3735; + --color-gold: #e78a4e; + --color-white: #282828; + --color-diff-removed-word-bg: #7b4440; + --color-diff-added-word-bg: #5c6646; + --color-diff-removed-row-bg: #4c3432; + --color-diff-moved-row-bg: #374141; + --color-diff-added-row-bg: #3b4439; + --color-diff-removed-row-border: #9b4f4a; + --color-diff-moved-row-border: #5a7872; + --color-diff-added-row-border: #727d4f; + --color-diff-inactive: #3a3735; + --color-error-border: #9b4f4a; + --color-error-bg: #4c3432; + --color-error-text: #ea6962; + --color-success-border: #727d4f; + --color-success-bg: #3b4439; + --color-success-text: #a9b665; + --color-warning-border: #947443; + --color-warning-bg: #4f422e; + --color-warning-text: #d8a657; + --color-info-border: #5a7872; + --color-info-bg: #374141; + --color-info-text: #7daea3; + /* target-based colors */ + --color-body: #282828; + --color-box-header: #45403d; + --color-box-body: #32302f; + --color-box-body-highlight: #3a3735; + --color-text-dark: #e78a4e; + --color-text: #ddc7a1; + --color-text-hover: rgba(221, 199, 161, 0.8); + --color-text-light: #d8a657; + --color-text-light-1: #928374; + --color-text-light-2: #ddc7a1; + --color-text-light-3: #928374; + --color-footer: #32302f; + --color-timeline: #504945; + --color-input-text: #ddc7a1; + --color-input-background: #282828; + --color-input-toggle-background: #32302f; + --color-input-border: #504945; + --color-input-border-hover: #71665d; + --color-navbar: #32302f; + --color-navbar-transparent: #32302f; + --color-light: #32302f; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #504945; + --color-hover: rgba(80, 73, 69, 0.5); + --color-active: rgba(80, 73, 69, 0.5); + --color-menu: #32302f; + --color-card: #32302f; + --color-markup-table-row: #45403d; + --color-markup-code-block: #282828; + --color-button: #45403d; + --color-code-bg: #282828; + --color-code-sidebar-bg: #32302f; + --color-shadow: #00000060; + --color-secondary-bg: #32302f; + --color-text-focus: #fff; + --color-expand-button: #3a3735; + --color-placeholder-text: #928374; + --color-editor-line-highlight: #32302f; + --color-project-board-bg: #282828; + --color-project-board-light-label: #a9b665; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-bar: #32302f; + --color-label-active-bg: #504945; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #32302f; + accent-color: var(--color-accent); + color-scheme: dark; +} +.chroma .nx { + color: #ddc7a1; +} +.chroma .c, +.chroma .c1, +.chroma .ch, +.chroma .cm, +.chroma .sd { + color: #928374; +} +.chroma .k, +.chroma .kc, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr { + color: #ea6962; +} +.chroma .o, +.chroma .ow { + color: #e78a4e; +} +.chroma .s, +.chroma .s1, +.chroma .s2, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .sh, +.chroma .si, +.chroma .sr, +.chroma .ss, +.chroma .sx, +.chroma .nt, +.chroma .cpf { + color: #89b482; +} +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .mo, +.chroma .nl { + color: #d3869b; +} +.chroma .kt, +.chroma .nc, +.chroma .nn, +.chroma .nv { + color: #d8a657; +} +.chroma .nf, +.chroma .nb, +.chroma .na { + color: #a9b665; +} +.chroma .bp, +.chroma .cp, +.chroma .ne, +.chroma .nd, +.chroma .se { + color: #7daea3; +} +/* primary buttons */ +.ui.primary.button, +.ui.primary.buttons .button { + background: #a9b665; + background-color: #a9b665 !important; + color: #282828; +} +.ui.primary.button:hover, +.ui.primary.buttons .button:hover { + background: rgba(169, 182, 101, 0.8); + background-color: rgba(169, 182, 101, 0.8) !important; + color: #282828; +} +/* secondary buttons */ +.ui.green.buttons .button, +.ui.green.button { + background: #a89984; + background-color: #a89984; + color: #282828; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover { + background: rgba(168, 153, 132, 0.8); + background-color: rgba(168, 153, 132, 0.8); + color: #282828; +} +/* text based buttons (purple) */ +.ui.labeled.button.disabled > .button, +.ui.basic.buttons .button, +.ui.basic.button { + color: #e78a4e; +} +.ui.labeled.button.disabled > .button:hover, +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + color: #e78a4e; +} +/* repo title && header */ +.repo-title { + color: #e78a4e; +} +/* star number && fork number */ +.repo-buttons button[disabled] ~ .label, +.repo-buttons .ui.labeled.button.disabled > .label { + color: #a9b665; +} +.ui.basic.labels .label, +.ui.basic.label { + color: #a9b665; +} +/* hover on commits, branch, tags in project home page */ +.repository .ui.segment.sub-menu .list .item a:hover, +.ui.tabular.menu .item:hover { + color: var(--color-text-hover); +} +/* commit label */ +.ui.primary.labels .label, +.ui.ui.ui.primary.label { + color: #282828; +} +/* issue label */ +.ui.green.labels .label, +.ui.ui.ui.green.label { + color: #282828; +} +/* grey button (rss feed button in repository home page) */ +i.grey.icon.icon.icon.icon { + color: #928374; +} +/* scroll bar */ +* { + scrollbar-color: #e78a4e transparent !important; +} +::-webkit-scrollbar { + width: 10px; + height: 10px; +} +::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px #e78a4e !important; + border: 2px solid transparent; + border-radius: 5px !important; +} +::-webkit-scrollbar-thumb:window-inactive { + box-shadow: inset 0 0 0 6px #e78a4e !important; +} +::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px #e78a4e !important; +} +::-webkit-scrollbar-corner { + background: transparent; +} +/* red buttons */ +.ui.red.labels .label, +.ui.ui.ui.red.label, +.ui.red.button, +.ui.red.buttons .button { + background: #ea6962; + background-color: #ea6962; + color: #282828; +} +.ui.red.labels .label:hover, +.ui.ui.ui.red.label:hover, +.ui.red.button:hover, +.ui.red.buttons .button:hover { + background: rgba(234, 105, 98, 0.8); + background-color: rgba(234, 105, 98, 0.8); + color: #282828; +} +/* grey buttons */ +.ui.grey.labels .label, +.ui.ui.ui.grey.label, +.ui.grey.button, +.ui.grey.buttons .button { + color: #282828; +} +.ui.grey.labels .label:hover, +.ui.ui.ui.grey.label:hover, +.ui.grey.button:hover, +.ui.grey.buttons .button:hover { + color: #282828; +} +/* orange buttons */ +.ui.orange.labels .label, +.ui.ui.ui.orange.label, +.ui.orange.button, +.ui.orange.buttons .button { + background: #e78a4e; + background-color: #e78a4e; + color: #282828; +} +.ui.orange.labels .label:hover, +.ui.ui.ui.orange.label:hover, +.ui.orange.button:hover, +.ui.orange.buttons .button:hover { + background: rgba(231, 138, 78, 0.8); + background-color: rgba(231, 138, 78, 0.8); + color: #282828; +} diff --git a/web_src/css/themes/theme-gruvbox-material-light.css b/web_src/css/themes/theme-gruvbox-material-light.css new file mode 100644 index 0000000000000..30cb4564d3fbd --- /dev/null +++ b/web_src/css/themes/theme-gruvbox-material-light.css @@ -0,0 +1,360 @@ +:root { + --is-dark-theme: true; + --color-primary: #6c782e; + --color-primary-contrast: #fbf1c7; + --color-primary-dark-1: #6c782e; + --color-primary-dark-2: #6b702f; + --color-primary-dark-3: #6a6830; + --color-primary-dark-4: #696032; + --color-primary-dark-5: #675733; + --color-primary-dark-6: #664f34; + --color-primary-dark-7: #654735; + --color-primary-light-1: #6c782e; + --color-primary-light-2: #828a46; + --color-primary-light-3: #999c5d; + --color-primary-light-4: #afaf75; + --color-primary-light-5: #c5c18d; + --color-primary-light-6: #dcd3a4; + --color-primary-light-7: #f2e5bc; + --color-primary-alpha-10: rgba(108, 120, 46, 0.1); + --color-primary-alpha-20: rgba(108, 120, 46, 0.2); + --color-primary-alpha-30: rgba(108, 120, 46, 0.3); + --color-primary-alpha-40: rgba(108, 120, 46, 0.4); + --color-primary-alpha-50: rgba(108, 120, 46, 0.5); + --color-primary-alpha-60: rgba(108, 120, 46, 0.6); + --color-primary-alpha-70: rgba(108, 120, 46, 0.7); + --color-primary-alpha-80: rgba(108, 120, 46, 0.8); + --color-primary-alpha-90: rgba(108, 120, 46, 0.9); + --color-secondary: #e5d5ad; + --color-secondary-dark-1: #e5d5ad; + --color-secondary-dark-2: #dac9a3; + --color-secondary-dark-3: #d0bd99; + --color-secondary-dark-4: #c5b28f; + --color-secondary-dark-5: #baa685; + --color-secondary-dark-6: #b09a7b; + --color-secondary-dark-7: #a58e71; + --color-secondary-dark-8: #9a8267; + --color-secondary-dark-9: #90765d; + --color-secondary-dark-10: #856b53; + --color-secondary-dark-11: #7a5f49; + --color-secondary-dark-12: #70533f; + --color-secondary-dark-13: #654735; + --color-secondary-light-1: #e5d5ad; + --color-secondary-light-2: #eee0b7; + --color-secondary-light-3: #f2e5bc; + --color-secondary-light-4: #f4e8be; + --color-secondary-alpha-10: rgba(229, 213, 173, 0.1); + --color-secondary-alpha-20: rgba(229, 213, 173, 0.2); + --color-secondary-alpha-30: rgba(229, 213, 173, 0.3); + --color-secondary-alpha-40: rgba(229, 213, 173, 0.4); + --color-secondary-alpha-50: rgba(229, 213, 173, 0.5); + --color-secondary-alpha-60: rgba(229, 213, 173, 0.6); + --color-secondary-alpha-70: rgba(229, 213, 173, 0.7); + --color-secondary-alpha-80: rgba(229, 213, 173, 0.8); + --color-secondary-alpha-90: rgba(229, 213, 173, 0.9); + /* colors */ + --color-red: #c14a4a; + --color-orange: #c35e0a; + --color-yellow: #b47109; + --color-olive: #6c782e; + --color-green: #6c782e; + --color-teal: #4c7a5d; + --color-blue: #45707a; + --color-violet: #945e80; + --color-purple: #945e80; + --color-pink: #945e80; + --color-brown: #c35e0a; + --color-grey: #928374; + /* light variants */ + --color-red-light: #c14a4a; + --color-orange-light: #c35e0a; + --color-yellow-light: #b47109; + --color-olive-light: #6c782e; + --color-green-light: #6c782e; + --color-teal-light: #4c7a5d; + --color-blue-light: #45707a; + --color-violet-light: #945e80; + --color-purple-light: #945e80; + --color-pink-light: #945e80; + --color-brown-light: #c35e0a; + --color-grey-light: #928374; + /* other colors */ + --color-black: #f2e5bc; + --color-gold: #c35e0a; + --color-white: #fbf1c7; + --color-diff-removed-word-bg: #e3ae95; + --color-diff-added-word-bg: #bcc28d; + --color-diff-removed-row-bg: #f1d9b5; + --color-diff-moved-row-bg: #dadec0; + --color-diff-added-row-bg: #dee2b6; + --color-diff-removed-row-border: #d99280; + --color-diff-moved-row-border: #90a79d; + --color-diff-added-row-border: #a5ad72; + --color-diff-inactive: #f2e5bc; + --color-error-border: #d99280; + --color-error-bg: #f1d9b5; + --color-error-text: #c14a4a; + --color-success-border: #a5ad72; + --color-success-bg: #dee2b6; + --color-success-text: #6c782e; + --color-warning-border: #d7ac5e; + --color-warning-bg: #fae7b3; + --color-warning-text: #b47109; + --color-info-border: #90a79d; + --color-info-bg: #dadec0; + --color-info-text: #45707a; + /* target-based colors */ + --color-body: #fbf1c7; + --color-box-header: #eee0b7; + --color-box-body: #f4e8be; + --color-box-body-highlight: #f2e5bc; + --color-text-dark: #c35e0a; + --color-text: #654735; + --color-text-hover: rgba(101, 71, 53, 0.8); + --color-text-light: #b47109; + --color-text-light-1: #928374; + --color-text-light-2: #654735; + --color-text-light-3: #928374; + --color-footer: #f4e8be; + --color-timeline: #e5d5ad; + --color-input-text: #654735; + --color-input-background: #fbf1c7; + --color-input-toggle-background: #f4e8be; + --color-input-border: #e5d5ad; + --color-input-border-hover: #bcac91; + --color-navbar: #f4e8be; + --color-navbar-transparent: #f4e8be; + --color-light: #f4e8be; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #e5d5ad; + --color-hover: rgba(229, 213, 173, 0.5); + --color-active: rgba(229, 213, 173, 0.5); + --color-menu: #f4e8be; + --color-card: #f4e8be; + --color-markup-table-row: #eee0b7; + --color-markup-code-block: #fbf1c7; + --color-button: #eee0b7; + --color-code-bg: #fbf1c7; + --color-code-sidebar-bg: #f4e8be; + --color-shadow: #00000060; + --color-secondary-bg: #f4e8be; + --color-text-focus: #fff; + --color-expand-button: #f2e5bc; + --color-placeholder-text: #928374; + --color-editor-line-highlight: #f4e8be; + --color-project-board-bg: #fbf1c7; + --color-project-board-light-label: #6c782e; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-bar: #f4e8be; + --color-label-active-bg: #e5d5ad; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #f4e8be; + accent-color: var(--color-accent); + color-scheme: dark; +} +.chroma .nx { + color: #654735; +} +.chroma .c, +.chroma .c1, +.chroma .ch, +.chroma .cm, +.chroma .sd { + color: #928374; +} +.chroma .k, +.chroma .kc, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr { + color: #c14a4a; +} +.chroma .o, +.chroma .ow { + color: #c35e0a; +} +.chroma .s, +.chroma .s1, +.chroma .s2, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .sh, +.chroma .si, +.chroma .sr, +.chroma .ss, +.chroma .sx, +.chroma .nt, +.chroma .cpf { + color: #4c7a5d; +} +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .mo, +.chroma .nl { + color: #945e80; +} +.chroma .kt, +.chroma .nc, +.chroma .nn, +.chroma .nv { + color: #b47109; +} +.chroma .nf, +.chroma .nb, +.chroma .na { + color: #6c782e; +} +.chroma .bp, +.chroma .cp, +.chroma .ne, +.chroma .nd, +.chroma .se { + color: #45707a; +} +/* primary buttons */ +.ui.primary.button, +.ui.primary.buttons .button { + background: #6f8352; + background-color: #6f8352 !important; + color: #fbf1c7; +} +.ui.primary.button:hover, +.ui.primary.buttons .button:hover { + background: rgba(111, 131, 82, 0.8); + background-color: rgba(111, 131, 82, 0.8) !important; + color: #fbf1c7; +} +/* secondary buttons */ +.ui.green.buttons .button, +.ui.green.button { + background: #7c6f64; + background-color: #7c6f64; + color: #fbf1c7; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover { + background: rgba(124, 111, 100, 0.8); + background-color: rgba(124, 111, 100, 0.8); + color: #fbf1c7; +} +/* text based buttons (purple) */ +.ui.labeled.button.disabled > .button, +.ui.basic.buttons .button, +.ui.basic.button { + color: #c35e0a; +} +.ui.labeled.button.disabled > .button:hover, +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + color: #c35e0a; +} +/* repo title && header */ +.repo-title { + color: #c35e0a; +} +/* star number && fork number */ +.repo-buttons button[disabled] ~ .label, +.repo-buttons .ui.labeled.button.disabled > .label { + color: #6c782e; +} +.ui.basic.labels .label, +.ui.basic.label { + color: #6c782e; +} +/* hover on commits, branch, tags in project home page */ +.repository .ui.segment.sub-menu .list .item a:hover, +.ui.tabular.menu .item:hover { + color: var(--color-text-hover); +} +/* commit label */ +.ui.primary.labels .label, +.ui.ui.ui.primary.label { + color: #fbf1c7; +} +/* issue label */ +.ui.green.labels .label, +.ui.ui.ui.green.label { + color: #fbf1c7; +} +/* grey button (rss feed button in repository home page) */ +i.grey.icon.icon.icon.icon { + color: #928374; +} +/* scroll bar */ +* { + scrollbar-color: #c35e0a transparent !important; +} +::-webkit-scrollbar { + width: 10px; + height: 10px; +} +::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 0 6px #c35e0a !important; + border: 2px solid transparent; + border-radius: 5px !important; +} +::-webkit-scrollbar-thumb:window-inactive { + box-shadow: inset 0 0 0 6px #c35e0a !important; +} +::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 6px #c35e0a !important; +} +::-webkit-scrollbar-corner { + background: transparent; +} +/* red buttons */ +.ui.red.labels .label, +.ui.ui.ui.red.label, +.ui.red.button, +.ui.red.buttons .button { + background: #ae5858; + background-color: #ae5858; + color: #fbf1c7; +} +.ui.red.labels .label:hover, +.ui.ui.ui.red.label:hover, +.ui.red.button:hover, +.ui.red.buttons .button:hover { + background: rgba(174, 88, 88, 0.8); + background-color: rgba(174, 88, 88, 0.8); + color: #fbf1c7; +} +/* grey buttons */ +.ui.grey.labels .label, +.ui.ui.ui.grey.label, +.ui.grey.button, +.ui.grey.buttons .button { + color: #fbf1c7; +} +.ui.grey.labels .label:hover, +.ui.ui.ui.grey.label:hover, +.ui.grey.button:hover, +.ui.grey.buttons .button:hover { + color: #fbf1c7; +} +/* orange buttons */ +.ui.orange.labels .label, +.ui.ui.ui.orange.label, +.ui.orange.button, +.ui.orange.buttons .button { + background: #c35e0a; + background-color: #c35e0a; + color: #fbf1c7; +} +.ui.orange.labels .label:hover, +.ui.ui.ui.orange.label:hover, +.ui.orange.button:hover, +.ui.orange.buttons .button:hover { + background: rgba(195, 94, 10, 0.8); + background-color: rgba(195, 94, 10, 0.8); + color: #fbf1c7; +} From ee2c2b7baa1c9b4a4a91c93824eebb3e9e03da5e Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 16 May 2023 16:49:12 +0800 Subject: [PATCH 02/54] save for test --- web_src/css/themes/theme-enterprise-light.css | 158 +++++++++--------- 1 file changed, 79 insertions(+), 79 deletions(-) diff --git a/web_src/css/themes/theme-enterprise-light.css b/web_src/css/themes/theme-enterprise-light.css index b6387cdf29b32..f1b7f7d2f9f9a 100644 --- a/web_src/css/themes/theme-enterprise-light.css +++ b/web_src/css/themes/theme-enterprise-light.css @@ -1,56 +1,56 @@ :root { - --color-primary: #415a77; + --color-primary: #3F72AF; --color-primary-contrast: #ffffff; - --color-primary-dark-1: #415a77; - --color-primary-dark-2: #3b516d; - --color-primary-dark-3: #344963; - --color-primary-dark-4: #2e4059; - --color-primary-dark-5: #28374f; - --color-primary-dark-6: #212f45; - --color-primary-dark-7: #1b263b; - --color-primary-light-1: #415a77; - --color-primary-light-2: #5d728b; - --color-primary-light-3: #798a9f; - --color-primary-light-4: #95a3b4; - --color-primary-light-5: #b0bbc8; - --color-primary-light-6: #ccd3dc; - --color-primary-light-7: #e8ebf0; - --color-primary-alpha-10: rgba(65, 90, 119, 0.1); - --color-primary-alpha-20: rgba(65, 90, 119, 0.2); - --color-primary-alpha-30: rgba(65, 90, 119, 0.3); - --color-primary-alpha-40: rgba(65, 90, 119, 0.4); - --color-primary-alpha-50: rgba(65, 90, 119, 0.5); - --color-primary-alpha-60: rgba(65, 90, 119, 0.6); - --color-primary-alpha-70: rgba(65, 90, 119, 0.7); - --color-primary-alpha-80: rgba(65, 90, 119, 0.8); - --color-primary-alpha-90: rgba(65, 90, 119, 0.9); - --color-secondary: #e0e1dd; - --color-secondary-dark-1: #e0e1dd; - --color-secondary-dark-2: #d0d1d0; - --color-secondary-dark-3: #bfc2c2; - --color-secondary-dark-4: #afb2b5; - --color-secondary-dark-5: #9ea3a7; - --color-secondary-dark-6: #8e9399; - --color-secondary-dark-7: #7e848c; - --color-secondary-dark-8: #6d747f; - --color-secondary-dark-9: #5d6471; - --color-secondary-dark-10: #4c5564; - --color-secondary-dark-11: #3c4556; - --color-secondary-dark-12: #2b3648; - --color-secondary-dark-13: #1b263b; - --color-secondary-light-1: #e0e1dd; - --color-secondary-light-2: #e1e3e0; - --color-secondary-light-3: #e3e4e3; - --color-secondary-light-4: #e4e6e7; - --color-secondary-alpha-10: rgba(224, 225, 221, 0.1); - --color-secondary-alpha-20: rgba(224, 225, 221, 0.2); - --color-secondary-alpha-30: rgba(224, 225, 221, 0.3); - --color-secondary-alpha-40: rgba(224, 225, 221, 0.4); - --color-secondary-alpha-50: rgba(224, 225, 221, 0.5); - --color-secondary-alpha-60: rgba(224, 225, 221, 0.6); - --color-secondary-alpha-70: rgba(224, 225, 221, 0.7); - --color-secondary-alpha-80: rgba(224, 225, 221, 0.8); - --color-secondary-alpha-90: rgba(224, 225, 221, 0.9); + --color-primary-dark-1: #3F72AF; + --color-primary-dark-2: #37669f; + --color-primary-dark-3: #305b8f; + --color-primary-dark-4: #28507f; + --color-primary-dark-5: #20446e; + --color-primary-dark-6: #19395e; + --color-primary-dark-7: #112D4E; + --color-primary-light-1: #5a85b9; + --color-primary-light-2: #7498c4; + --color-primary-light-3: #8fabce; + --color-primary-light-4: #a9bed8; + --color-primary-light-4: #c4d1e2; + --color-primary-light-6: #dee4ed; + --color-primary-light-7: #F9F7F7; + --color-primary-alpha-10: rgba(63, 114, 175, 0.1); + --color-primary-alpha-20: rgba(63, 114, 175, 0.2); + --color-primary-alpha-30: rgba(63, 114, 175, 0.3); + --color-primary-alpha-40: rgba(63, 114, 175, 0.4); + --color-primary-alpha-50: rgba(63, 114, 175, 0.5); + --color-primary-alpha-60: rgba(63, 114, 175, 0.6); + --color-primary-alpha-70: rgba(63, 114, 175, 0.7); + --color-primary-alpha-80: rgba(63, 114, 175, 0.8); + --color-primary-alpha-90: rgba(63, 114, 175, 0.9); + --color-secondary: #DBE2EF; + --color-secondary-dark-1: #cbd4e3; + --color-secondary-dark-2: #bcc6d6; + --color-secondary-dark-3: #acb8ca; + --color-secondary-dark-4: #9daabd; + --color-secondary-dark-5: #8d9cb1; + --color-secondary-dark-6: #7e8fa5; + --color-secondary-dark-7: #6e8198; + --color-secondary-dark-8: #5f738c; + --color-secondary-dark-9: #4f6580; + --color-secondary-dark-10: #405773; + --color-secondary-dark-11: #304967; + --color-secondary-dark-12: #213b5a; + --color-secondary-dark-13: #112D4E; + --color-secondary-light-1: #e3e7f1; + --color-secondary-light-2: #eaedf3; + --color-secondary-light-3: #f2f2f5; + --color-secondary-light-4: #F9F7F7; + --color-secondary-alpha-10: rgba(219, 226, 239, 0.1); + --color-secondary-alpha-20: rgba(219, 226, 239, 0.2); + --color-secondary-alpha-30: rgba(219, 226, 239, 0.3); + --color-secondary-alpha-40: rgba(219, 226, 239, 0.4); + --color-secondary-alpha-50: rgba(219, 226, 239, 0.5); + --color-secondary-alpha-60: rgba(219, 226, 239, 0.6); + --color-secondary-alpha-70: rgba(219, 226, 239, 0.7); + --color-secondary-alpha-80: rgba(219, 226, 239, 0.8); + --color-secondary-alpha-90: rgba(219, 226, 239, 0.9); /* colors */ --color-red: #f44336; --color-orange: #ff9800; @@ -89,7 +89,7 @@ --color-diff-removed-row-border: #fa9792; --color-diff-moved-row-border: #82c4f8; --color-diff-added-row-border: #9ad29d; - --color-diff-inactive: #e8ebf0; + --color-diff-inactive: #F9F7F7; --color-error-border: #fa9792; --color-error-bg: #ffebee; --color-error-text: #f44336; @@ -103,52 +103,52 @@ --color-info-bg: #e3f2fd; --color-info-text: #2196f3; /* target-based colors */ - --color-body: #fafafa; + --color-body: #ffffff; --color-box-header: #e8ebf0; - --color-box-body: #fafafa; - --color-box-body-highlight: #e8ebf0; - --color-text: #1b263b; + --color-box-body: #ffffff; + --color-box-body-highlight: var(--color-secondary-light-3); + --color-text: #112D4E; --color-text-dark: #0d1b2a; --color-text-light: #555555; --color-text-light-1: #6a6a6a; --color-text-light-2: #808080; --color-text-light-3: #a0a0a0; - --color-footer: #fafafa; + --color-footer: #ffffff; --color-timeline: #dde2e7; - --color-input-text: #1b263b; - --color-input-background: #fafafa; - --color-input-toggle-background: #fafafa; - --color-input-border: #dde2e7; - --color-input-border-hover: #bec0c3; - --color-navbar: #fafafa; - --color-navbar-transparent: #fafafa; - --color-light: #fafafa; + --color-input-text: #112D4E; + --color-input-background: #ffffff; + --color-input-toggle-background: #DBE2EF; + --color-input-border: #DBE2EF; + --color-input-border-hover: var(--color-secondary-dark-1); + --color-navbar: var(--color-secondary-light-3); + --color-navbar-transparent: #e4e6e700; + --color-light: #00000006; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #dde2e7; --color-hover: rgba(221, 226, 231, 0.5); --color-active: rgba(221, 226, 231, 0.5); - --color-menu: #fafafa; - --color-card: #fafafa; - --color-markup-table-row: #e8ebf0; - --color-markup-code-block: #ffffff; - --color-button: #e8ebf0; - --color-code-bg: #fafafa; - --color-code-sidebar-bg: #ffffff; + --color-menu: #ffffff; + --color-card: #ffffff; + --color-markup-table-row: #00000008; + --color-markup-code-block: #00000010; + --color-button: #ffffff; + --color-code-bg: #ffffff; + --color-code-sidebar-bg: #f5f5f5; --color-shadow: #00000060; - --color-secondary-bg: #e8ebf0; + --color-secondary-bg: #F9F7F7; --color-text-focus: #fff; - --color-expand-button: #e8ebf0; + --color-expand-button: #F9F7F7; --color-placeholder-text: #9e9e9e; - --color-editor-line-highlight: #fafafa; + --color-editor-line-highlight: var(--color-primary-light-6); --color-project-board-bg: #ffffff; - --color-project-board-light-label: #415a77; + --color-project-board-light-label: #a6aab5; --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ --color-reaction-bg: #ffffff12; --color-reaction-active-bg: var(--color-primary-alpha-40); --color-tooltip-bg: #000000f0; - --color-tooltip-text: #fafafa; - --color-header-bar: #fafafa; + --color-tooltip-text: #ffffff; + --color-header-bar: #ffffff; --color-label-active-bg: #dde2e7; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); @@ -157,7 +157,7 @@ color-scheme: light; } .chroma .nx { - color: #1b263b; + color: #112D4E; } .chroma .c, .chroma .c1, From 1bf304c356b81307aafc2381da8e9deae0c85959 Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 17 May 2023 10:28:03 +0800 Subject: [PATCH 03/54] save --- web_src/css/themes/theme-enterprise-auto.css | 449 ++++++++++++++++++ web_src/css/themes/theme-enterprise-dark.css | 223 +++++++++ web_src/css/themes/theme-enterprise-light.css | 64 +-- 3 files changed, 704 insertions(+), 32 deletions(-) create mode 100644 web_src/css/themes/theme-enterprise-auto.css create mode 100644 web_src/css/themes/theme-enterprise-dark.css diff --git a/web_src/css/themes/theme-enterprise-auto.css b/web_src/css/themes/theme-enterprise-auto.css new file mode 100644 index 0000000000000..dc1ad357f1346 --- /dev/null +++ b/web_src/css/themes/theme-enterprise-auto.css @@ -0,0 +1,449 @@ +@media (prefers-color-scheme: dark) { + :root { + --is-dark-theme: true; + --color-primary: #fca311; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #fca311; + --color-primary-dark-2: #f8ae34; + --color-primary-dark-3: #f4b958; + --color-primary-dark-4: #f1c47b; + --color-primary-dark-5: #edcf9e; + --color-primary-dark-6: #e9dac2; + --color-primary-dark-7: #e5e5e5; + --color-primary-light-1: #efa62f; + --color-primary-light-2: #e2a84c; + --color-primary-light-3: #d6ab6a; + --color-primary-light-4: #c9ae88; + --color-primary-light-4: #bcb1a5; + --color-primary-light-6: #afb3c3; + --color-primary-light-7: #a2b6e1; + --color-primary-alpha-10: rgba(252, 163, 17, 0.1); + --color-primary-alpha-20: rgba(252, 163, 17, 0.2); + --color-primary-alpha-30: rgba(252, 163, 17, 0.3); + --color-primary-alpha-40: rgba(252, 163, 17, 0.4); + --color-primary-alpha-50: rgba(252, 163, 17, 0.5); + --color-primary-alpha-60: rgba(252, 163, 17, 0.6); + --color-primary-alpha-70: rgba(252, 163, 17, 0.7); + --color-primary-alpha-80: rgba(252, 163, 17, 0.8); + --color-primary-alpha-90: rgba(252, 163, 17, 0.9); + --color-secondary: #14213d; + --color-secondary-dark-1: #24304a; + --color-secondary-dark-2: #343f57; + --color-secondary-dark-3: #444e64; + --color-secondary-dark-4: #545d71; + --color-secondary-dark-5: #646c7e; + --color-secondary-dark-6: #747b8a; + --color-secondary-dark-7: #848a97; + --color-secondary-dark-8: #959aa4; + --color-secondary-dark-9: #a5a9b1; + --color-secondary-dark-10: #b5b8be; + --color-secondary-dark-11: #c5c7cb; + --color-secondary-dark-12: #d5d6d8; + --color-secondary-dark-13: #e5e5e5; + --color-secondary-light-1: #2d4b8a; + --color-secondary-light-2: #567ac7; + --color-secondary-light-3: #a2b6e1; + --color-secondary-light-4: #eff3fa; + --color-secondary-alpha-10: rgba(20, 33, 61, 0.1); + --color-secondary-alpha-20: rgba(20, 33, 61, 0.2); + --color-secondary-alpha-30: rgba(20, 33, 61, 0.3); + --color-secondary-alpha-40: rgba(20, 33, 61, 0.4); + --color-secondary-alpha-50: rgba(20, 33, 61, 0.5); + --color-secondary-alpha-60: rgba(20, 33, 61, 0.6); + --color-secondary-alpha-70: rgba(20, 33, 61, 0.7); + --color-secondary-alpha-80: rgba(20, 33, 61, 0.8); + --color-secondary-alpha-90: rgba(20, 33, 61, 0.9); + /* colors */ + --color-red: #f44336; + --color-orange: #ff9800; + --color-yellow: #ffeb3b; + --color-olive: #4caf50; + --color-green: #4caf50; + --color-teal: #00bcd4; + --color-blue: #2196f3; + --color-violet: #9c27b0; + --color-purple: #9c27b0; + --color-pink: #e91e63; + --color-brown: #ff9800; + --color-grey: #9e9e9e; + /* light variants */ + --color-red-light: #f44336; + --color-orange-light: #ff9800; + --color-yellow-light: #ffeb3b; + --color-olive-light: #4caf50; + --color-green-light: #4caf50; + --color-teal-light: #00bcd4; + --color-blue-light: #2196f3; + --color-violet-light: #9c27b0; + --color-purple-light: #9c27b0; + --color-pink-light: #e91e63; + --color-brown-light: #ff9800; + --color-grey-light: #9e9e9e; + /* other colors */ + --color-black: #000000; + --color-gold: #ff9800; + --color-white: #ffffff; + --color-diff-removed-word-bg: #fcb9b7; + --color-diff-added-word-bg: #b9e0bb; + --color-diff-removed-row-bg: #ffebee; + --color-diff-moved-row-bg: #e3f2fd; + --color-diff-added-row-bg: #e8f5e9; + --color-diff-removed-row-border: #fa9792; + --color-diff-moved-row-border: #82c4f8; + --color-diff-added-row-border: #9ad29d; + --color-diff-inactive: #a2b6e1; + --color-error-border: #fa9792; + --color-error-bg: #ffebee; + --color-error-text: #f44336; + --color-success-border: #9ad29d; + --color-success-bg: #e8f5e9; + --color-success-text: #4caf50; + --color-warning-border: #ffc670; + --color-warning-bg: #fff3e0; + --color-warning-text: #ff9800; + --color-info-border: #82c4f8; + --color-info-bg: #e3f2fd; + --color-info-text: #2196f3; + /* target-based colors */ + --color-body: #ffffff; + --color-box-header: #567ac7; + --color-box-body: #a2b6e1; + --color-box-body-highlight: #eff3fa; + --color-text: #e5e5e5; + --color-text-dark: #0d1b2a; + --color-text-light: #555555; + --color-text-light-1: #6a6a6a; + --color-text-light-2: #808080; + --color-text-light-3: #a0a0a0; + --color-footer: #a2b6e1; + --color-timeline: #2d4b8a; + --color-input-text: #e5e5e5; + --color-input-background: #ffffff; + --color-input-toggle-background: #a2b6e1; + --color-input-border: #14213d; + --color-input-border-hover: var(--color-secondary-dark-1); + --color-navbar: #a2b6e1; + --color-navbar-transparent: rgba(162, 182, 225, 0.1); + --color-light: #a2b6e1; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #2d4b8a; + --color-hover: rgba(45, 75, 138, 0.5); + --color-active: rgba(45, 75, 138, 0.5); + --color-menu: #ffffff; + --color-card: #ffffff; + --color-markup-table-row: #567ac7; + --color-markup-code-block: #00000010; + --color-button: #567ac7; + --color-code-bg: #ffffff; + --color-code-sidebar-bg: #f5f5f5; + --color-shadow: #00000060; + --color-secondary-bg: #a2b6e1; + --color-text-focus: #fff; + --color-expand-button: #a2b6e1; + --color-placeholder-text: #9e9e9e; + --color-editor-line-highlight: #a2b6e1; + --color-project-board-bg: #ffffff; + --color-project-board-light-label: #a6aab5; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-tooltip-bg: #000000f0; + --color-tooltip-text: #ffffff; + --color-header-bar: #ffffff; + --color-label-active-bg: #2d4b8a; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #fffbdd; + accent-color: var(--color-accent); + color-scheme: dark; + } + .chroma .nx { + color: #e5e5e5; + } + .chroma .c, + .chroma .c1, + .chroma .ch, + .chroma .cm, + .chroma .sd { + color: #9e9e9e; + } + .chroma .k, + .chroma .kc, + .chroma .kd, + .chroma .kn, + .chroma .kp, + .chroma .kr { + color: #f44336; + } + .chroma .o, + .chroma .ow { + color: #ff9800; + } + .chroma .s, + .chroma .s1, + .chroma .s2, + .chroma .sa, + .chroma .sb, + .chroma .sc, + .chroma .sh, + .chroma .si, + .chroma .sr, + .chroma .ss, + .chroma .sx, + .chroma .nt, + .chroma .cpf { + color: #00bcd4; + } + .chroma .m, + .chroma .mb, + .chroma .mf, + .chroma .mh, + .chroma .mi, + .chroma .mo, + .chroma .nl { + color: #9c27b0; + } + .chroma .kt, + .chroma .nc, + .chroma .nn, + .chroma .nv { + color: #ffeb3b; + } + .chroma .nf, + .chroma .nb, + .chroma .na { + color: #4caf50; + } + .chroma .bp, + .chroma .cp, + .chroma .ne, + .chroma .nd, + .chroma .se { + color: #2196f3; + } +} +@media (prefers-color-scheme: light) { + :root { + --color-primary: #3F72AF; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #3F72AF; + --color-primary-dark-2: #37669f; + --color-primary-dark-3: #305b8f; + --color-primary-dark-4: #28507f; + --color-primary-dark-5: #20446e; + --color-primary-dark-6: #19395e; + --color-primary-dark-7: #112D4E; + --color-primary-light-1: #5a86ba; + --color-primary-light-2: #769ac6; + --color-primary-light-3: #91aed1; + --color-primary-light-4: #adc3dd; + --color-primary-light-4: #c8d7e8; + --color-primary-light-6: #e4ebf4; + --color-primary-light-7: #ffffff; + --color-primary-alpha-10: rgba(63, 114, 175, 0.1); + --color-primary-alpha-20: rgba(63, 114, 175, 0.2); + --color-primary-alpha-30: rgba(63, 114, 175, 0.3); + --color-primary-alpha-40: rgba(63, 114, 175, 0.4); + --color-primary-alpha-50: rgba(63, 114, 175, 0.5); + --color-primary-alpha-60: rgba(63, 114, 175, 0.6); + --color-primary-alpha-70: rgba(63, 114, 175, 0.7); + --color-primary-alpha-80: rgba(63, 114, 175, 0.8); + --color-primary-alpha-90: rgba(63, 114, 175, 0.9); + --color-secondary: #DBE2EF; + --color-secondary-dark-1: #cbd4e3; + --color-secondary-dark-2: #bcc6d6; + --color-secondary-dark-3: #acb8ca; + --color-secondary-dark-4: #9daabd; + --color-secondary-dark-5: #8d9cb1; + --color-secondary-dark-6: #7e8fa5; + --color-secondary-dark-7: #6e8198; + --color-secondary-dark-8: #5f738c; + --color-secondary-dark-9: #4f6580; + --color-secondary-dark-10: #405773; + --color-secondary-dark-11: #304967; + --color-secondary-dark-12: #213b5a; + --color-secondary-dark-13: #112D4E; + --color-secondary-light-1: #ffffff; + --color-secondary-light-2: #ffffff; + --color-secondary-light-3: #ffffff; + --color-secondary-light-4: #ffffff; + --color-secondary-alpha-10: rgba(219, 226, 239, 0.1); + --color-secondary-alpha-20: rgba(219, 226, 239, 0.2); + --color-secondary-alpha-30: rgba(219, 226, 239, 0.3); + --color-secondary-alpha-40: rgba(219, 226, 239, 0.4); + --color-secondary-alpha-50: rgba(219, 226, 239, 0.5); + --color-secondary-alpha-60: rgba(219, 226, 239, 0.6); + --color-secondary-alpha-70: rgba(219, 226, 239, 0.7); + --color-secondary-alpha-80: rgba(219, 226, 239, 0.8); + --color-secondary-alpha-90: rgba(219, 226, 239, 0.9); + /* colors */ + --color-red: #f44336; + --color-orange: #ff9800; + --color-yellow: #ffeb3b; + --color-olive: #4caf50; + --color-green: #4caf50; + --color-teal: #00bcd4; + --color-blue: #2196f3; + --color-violet: #9c27b0; + --color-purple: #9c27b0; + --color-pink: #e91e63; + --color-brown: #ff9800; + --color-grey: #9e9e9e; + /* light variants */ + --color-red-light: #f44336; + --color-orange-light: #ff9800; + --color-yellow-light: #ffeb3b; + --color-olive-light: #4caf50; + --color-green-light: #4caf50; + --color-teal-light: #00bcd4; + --color-blue-light: #2196f3; + --color-violet-light: #9c27b0; + --color-purple-light: #9c27b0; + --color-pink-light: #e91e63; + --color-brown-light: #ff9800; + --color-grey-light: #9e9e9e; + /* other colors */ + --color-black: #0d1b2a; + --color-gold: #ff9800; + --color-white: #ffffff; + --color-diff-removed-word-bg: #fcb9b7; + --color-diff-added-word-bg: #b9e0bb; + --color-diff-removed-row-bg: #ffebee; + --color-diff-moved-row-bg: #e3f2fd; + --color-diff-added-row-bg: #e8f5e9; + --color-diff-removed-row-border: #fa9792; + --color-diff-moved-row-border: #82c4f8; + --color-diff-added-row-border: #9ad29d; + --color-diff-inactive: #ffffff; + --color-error-border: #fa9792; + --color-error-bg: #ffebee; + --color-error-text: #f44336; + --color-success-border: #9ad29d; + --color-success-bg: #e8f5e9; + --color-success-text: #4caf50; + --color-warning-border: #ffc670; + --color-warning-bg: #fff3e0; + --color-warning-text: #ff9800; + --color-info-border: #82c4f8; + --color-info-bg: #e3f2fd; + --color-info-text: #2196f3; + /* target-based colors */ + --color-body: #ffffff; + --color-box-header: #ffffff; + --color-box-body: #ffffff; + --color-box-body-highlight: #ffffff; + --color-text: #112D4E; + --color-text-dark: #0d1b2a; + --color-text-light: #555555; + --color-text-light-1: #6a6a6a; + --color-text-light-2: #808080; + --color-text-light-3: #a0a0a0; + --color-footer: #ffffff; + --color-timeline: #ffffff; + --color-input-text: #112D4E; + --color-input-background: #ffffff; + --color-input-toggle-background: #ffffff; + --color-input-border: #DBE2EF; + --color-input-border-hover: var(--color-secondary-dark-1); + --color-navbar: #ffffff; + --color-navbar-transparent: rgba(255, 255, 255, 0.1); + --color-light: #ffffff; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #ffffff; + --color-hover: rgba(255, 255, 255, 0.5); + --color-active: rgba(255, 255, 255, 0.5); + --color-menu: #ffffff; + --color-card: #ffffff; + --color-markup-table-row: #ffffff; + --color-markup-code-block: #00000010; + --color-button: #ffffff; + --color-code-bg: #ffffff; + --color-code-sidebar-bg: #f5f5f5; + --color-shadow: #00000060; + --color-secondary-bg: #ffffff; + --color-text-focus: #fff; + --color-expand-button: #ffffff; + --color-placeholder-text: #9e9e9e; + --color-editor-line-highlight: #ffffff; + --color-project-board-bg: #ffffff; + --color-project-board-light-label: #a6aab5; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-tooltip-bg: #000000f0; + --color-tooltip-text: #ffffff; + --color-header-bar: #ffffff; + --color-label-active-bg: #ffffff; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #fffbdd; + accent-color: var(--color-accent); + color-scheme: light; + } + .chroma .nx { + color: #112D4E; + } + .chroma .c, + .chroma .c1, + .chroma .ch, + .chroma .cm, + .chroma .sd { + color: #9e9e9e; + } + .chroma .k, + .chroma .kc, + .chroma .kd, + .chroma .kn, + .chroma .kp, + .chroma .kr { + color: #f44336; + } + .chroma .o, + .chroma .ow { + color: #ff9800; + } + .chroma .s, + .chroma .s1, + .chroma .s2, + .chroma .sa, + .chroma .sb, + .chroma .sc, + .chroma .sh, + .chroma .si, + .chroma .sr, + .chroma .ss, + .chroma .sx, + .chroma .nt, + .chroma .cpf { + color: #00bcd4; + } + .chroma .m, + .chroma .mb, + .chroma .mf, + .chroma .mh, + .chroma .mi, + .chroma .mo, + .chroma .nl { + color: #9c27b0; + } + .chroma .kt, + .chroma .nc, + .chroma .nn, + .chroma .nv { + color: #ffeb3b; + } + .chroma .nf, + .chroma .nb, + .chroma .na { + color: #4caf50; + } + .chroma .bp, + .chroma .cp, + .chroma .ne, + .chroma .nd, + .chroma .se { + color: #2196f3; + } +} diff --git a/web_src/css/themes/theme-enterprise-dark.css b/web_src/css/themes/theme-enterprise-dark.css new file mode 100644 index 0000000000000..fa995fd93a65d --- /dev/null +++ b/web_src/css/themes/theme-enterprise-dark.css @@ -0,0 +1,223 @@ +:root { + --is-dark-theme: true; + --color-primary: #fca311; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #fca311; + --color-primary-dark-2: #f8ae34; + --color-primary-dark-3: #f4b958; + --color-primary-dark-4: #f1c47b; + --color-primary-dark-5: #edcf9e; + --color-primary-dark-6: #e9dac2; + --color-primary-dark-7: #e5e5e5; + --color-primary-light-1: #efa62f; + --color-primary-light-2: #e2a84c; + --color-primary-light-3: #d6ab6a; + --color-primary-light-4: #c9ae88; + --color-primary-light-4: #bcb1a5; + --color-primary-light-6: #afb3c3; + --color-primary-light-7: #a2b6e1; + --color-primary-alpha-10: rgba(252, 163, 17, 0.1); + --color-primary-alpha-20: rgba(252, 163, 17, 0.2); + --color-primary-alpha-30: rgba(252, 163, 17, 0.3); + --color-primary-alpha-40: rgba(252, 163, 17, 0.4); + --color-primary-alpha-50: rgba(252, 163, 17, 0.5); + --color-primary-alpha-60: rgba(252, 163, 17, 0.6); + --color-primary-alpha-70: rgba(252, 163, 17, 0.7); + --color-primary-alpha-80: rgba(252, 163, 17, 0.8); + --color-primary-alpha-90: rgba(252, 163, 17, 0.9); + --color-secondary: #14213d; + --color-secondary-dark-1: #24304a; + --color-secondary-dark-2: #343f57; + --color-secondary-dark-3: #444e64; + --color-secondary-dark-4: #545d71; + --color-secondary-dark-5: #646c7e; + --color-secondary-dark-6: #747b8a; + --color-secondary-dark-7: #848a97; + --color-secondary-dark-8: #959aa4; + --color-secondary-dark-9: #a5a9b1; + --color-secondary-dark-10: #b5b8be; + --color-secondary-dark-11: #c5c7cb; + --color-secondary-dark-12: #d5d6d8; + --color-secondary-dark-13: #e5e5e5; + --color-secondary-light-1: #2d4b8a; + --color-secondary-light-2: #567ac7; + --color-secondary-light-3: #a2b6e1; + --color-secondary-light-4: #eff3fa; + --color-secondary-alpha-10: rgba(20, 33, 61, 0.1); + --color-secondary-alpha-20: rgba(20, 33, 61, 0.2); + --color-secondary-alpha-30: rgba(20, 33, 61, 0.3); + --color-secondary-alpha-40: rgba(20, 33, 61, 0.4); + --color-secondary-alpha-50: rgba(20, 33, 61, 0.5); + --color-secondary-alpha-60: rgba(20, 33, 61, 0.6); + --color-secondary-alpha-70: rgba(20, 33, 61, 0.7); + --color-secondary-alpha-80: rgba(20, 33, 61, 0.8); + --color-secondary-alpha-90: rgba(20, 33, 61, 0.9); + /* colors */ + --color-red: #f44336; + --color-orange: #ff9800; + --color-yellow: #ffeb3b; + --color-olive: #4caf50; + --color-green: #4caf50; + --color-teal: #00bcd4; + --color-blue: #2196f3; + --color-violet: #9c27b0; + --color-purple: #9c27b0; + --color-pink: #e91e63; + --color-brown: #ff9800; + --color-grey: #9e9e9e; + /* light variants */ + --color-red-light: #f44336; + --color-orange-light: #ff9800; + --color-yellow-light: #ffeb3b; + --color-olive-light: #4caf50; + --color-green-light: #4caf50; + --color-teal-light: #00bcd4; + --color-blue-light: #2196f3; + --color-violet-light: #9c27b0; + --color-purple-light: #9c27b0; + --color-pink-light: #e91e63; + --color-brown-light: #ff9800; + --color-grey-light: #9e9e9e; + /* other colors */ + --color-black: #000000; + --color-gold: #ff9800; + --color-white: #ffffff; + --color-diff-removed-word-bg: #fcb9b7; + --color-diff-added-word-bg: #b9e0bb; + --color-diff-removed-row-bg: #ffebee; + --color-diff-moved-row-bg: #e3f2fd; + --color-diff-added-row-bg: #e8f5e9; + --color-diff-removed-row-border: #fa9792; + --color-diff-moved-row-border: #82c4f8; + --color-diff-added-row-border: #9ad29d; + --color-diff-inactive: #a2b6e1; + --color-error-border: #fa9792; + --color-error-bg: #ffebee; + --color-error-text: #f44336; + --color-success-border: #9ad29d; + --color-success-bg: #e8f5e9; + --color-success-text: #4caf50; + --color-warning-border: #ffc670; + --color-warning-bg: #fff3e0; + --color-warning-text: #ff9800; + --color-info-border: #82c4f8; + --color-info-bg: #e3f2fd; + --color-info-text: #2196f3; + /* target-based colors */ + --color-body: #ffffff; + --color-box-header: #567ac7; + --color-box-body: #a2b6e1; + --color-box-body-highlight: #eff3fa; + --color-text: #e5e5e5; + --color-text-dark: #0d1b2a; + --color-text-light: #555555; + --color-text-light-1: #6a6a6a; + --color-text-light-2: #808080; + --color-text-light-3: #a0a0a0; + --color-footer: #a2b6e1; + --color-timeline: #2d4b8a; + --color-input-text: #e5e5e5; + --color-input-background: #ffffff; + --color-input-toggle-background: #a2b6e1; + --color-input-border: #14213d; + --color-input-border-hover: var(--color-secondary-dark-1); + --color-navbar: #a2b6e1; + --color-navbar-transparent: rgba(162, 182, 225, 0.1); + --color-light: #a2b6e1; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #2d4b8a; + --color-hover: rgba(45, 75, 138, 0.5); + --color-active: rgba(45, 75, 138, 0.5); + --color-menu: #ffffff; + --color-card: #ffffff; + --color-markup-table-row: #567ac7; + --color-markup-code-block: #00000010; + --color-button: #567ac7; + --color-code-bg: #ffffff; + --color-code-sidebar-bg: #f5f5f5; + --color-shadow: #00000060; + --color-secondary-bg: #a2b6e1; + --color-text-focus: #fff; + --color-expand-button: #a2b6e1; + --color-placeholder-text: #9e9e9e; + --color-editor-line-highlight: #a2b6e1; + --color-project-board-bg: #ffffff; + --color-project-board-light-label: #a6aab5; + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-tooltip-bg: #000000f0; + --color-tooltip-text: #ffffff; + --color-header-bar: #ffffff; + --color-label-active-bg: #2d4b8a; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #fffbdd; + accent-color: var(--color-accent); + color-scheme: true; +} +.chroma .nx { + color: #e5e5e5; +} +.chroma .c, +.chroma .c1, +.chroma .ch, +.chroma .cm, +.chroma .sd { + color: #9e9e9e; +} +.chroma .k, +.chroma .kc, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr { + color: #f44336; +} +.chroma .o, +.chroma .ow { + color: #ff9800; +} +.chroma .s, +.chroma .s1, +.chroma .s2, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .sh, +.chroma .si, +.chroma .sr, +.chroma .ss, +.chroma .sx, +.chroma .nt, +.chroma .cpf { + color: #00bcd4; +} +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .mo, +.chroma .nl { + color: #9c27b0; +} +.chroma .kt, +.chroma .nc, +.chroma .nn, +.chroma .nv { + color: #ffeb3b; +} +.chroma .nf, +.chroma .nb, +.chroma .na { + color: #4caf50; +} +.chroma .bp, +.chroma .cp, +.chroma .ne, +.chroma .nd, +.chroma .se { + color: #2196f3; +} diff --git a/web_src/css/themes/theme-enterprise-light.css b/web_src/css/themes/theme-enterprise-light.css index f1b7f7d2f9f9a..769ee62d1c5a6 100644 --- a/web_src/css/themes/theme-enterprise-light.css +++ b/web_src/css/themes/theme-enterprise-light.css @@ -8,13 +8,13 @@ --color-primary-dark-5: #20446e; --color-primary-dark-6: #19395e; --color-primary-dark-7: #112D4E; - --color-primary-light-1: #5a85b9; - --color-primary-light-2: #7498c4; - --color-primary-light-3: #8fabce; - --color-primary-light-4: #a9bed8; - --color-primary-light-4: #c4d1e2; - --color-primary-light-6: #dee4ed; - --color-primary-light-7: #F9F7F7; + --color-primary-light-1: #5a86ba; + --color-primary-light-2: #769ac6; + --color-primary-light-3: #91aed1; + --color-primary-light-4: #adc3dd; + --color-primary-light-4: #c8d7e8; + --color-primary-light-6: #e4ebf4; + --color-primary-light-7: #ffffff; --color-primary-alpha-10: rgba(63, 114, 175, 0.1); --color-primary-alpha-20: rgba(63, 114, 175, 0.2); --color-primary-alpha-30: rgba(63, 114, 175, 0.3); @@ -38,10 +38,10 @@ --color-secondary-dark-11: #304967; --color-secondary-dark-12: #213b5a; --color-secondary-dark-13: #112D4E; - --color-secondary-light-1: #e3e7f1; - --color-secondary-light-2: #eaedf3; - --color-secondary-light-3: #f2f2f5; - --color-secondary-light-4: #F9F7F7; + --color-secondary-light-1: #ffffff; + --color-secondary-light-2: #ffffff; + --color-secondary-light-3: #ffffff; + --color-secondary-light-4: #ffffff; --color-secondary-alpha-10: rgba(219, 226, 239, 0.1); --color-secondary-alpha-20: rgba(219, 226, 239, 0.2); --color-secondary-alpha-30: rgba(219, 226, 239, 0.3); @@ -89,7 +89,7 @@ --color-diff-removed-row-border: #fa9792; --color-diff-moved-row-border: #82c4f8; --color-diff-added-row-border: #9ad29d; - --color-diff-inactive: #F9F7F7; + --color-diff-inactive: #ffffff; --color-error-border: #fa9792; --color-error-bg: #ffebee; --color-error-text: #f44336; @@ -104,9 +104,9 @@ --color-info-text: #2196f3; /* target-based colors */ --color-body: #ffffff; - --color-box-header: #e8ebf0; + --color-box-header: #ffffff; --color-box-body: #ffffff; - --color-box-body-highlight: var(--color-secondary-light-3); + --color-box-body-highlight: #ffffff; --color-text: #112D4E; --color-text-dark: #0d1b2a; --color-text-light: #555555; @@ -114,32 +114,32 @@ --color-text-light-2: #808080; --color-text-light-3: #a0a0a0; --color-footer: #ffffff; - --color-timeline: #dde2e7; + --color-timeline: #ffffff; --color-input-text: #112D4E; --color-input-background: #ffffff; - --color-input-toggle-background: #DBE2EF; + --color-input-toggle-background: #ffffff; --color-input-border: #DBE2EF; --color-input-border-hover: var(--color-secondary-dark-1); - --color-navbar: var(--color-secondary-light-3); - --color-navbar-transparent: #e4e6e700; - --color-light: #00000006; + --color-navbar: #ffffff; + --color-navbar-transparent: rgba(255, 255, 255, 0.1); + --color-light: #ffffff; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #dde2e7; - --color-hover: rgba(221, 226, 231, 0.5); - --color-active: rgba(221, 226, 231, 0.5); + --color-light-border: #ffffff; + --color-hover: rgba(255, 255, 255, 0.5); + --color-active: rgba(255, 255, 255, 0.5); --color-menu: #ffffff; --color-card: #ffffff; - --color-markup-table-row: #00000008; + --color-markup-table-row: #ffffff; --color-markup-code-block: #00000010; --color-button: #ffffff; --color-code-bg: #ffffff; --color-code-sidebar-bg: #f5f5f5; --color-shadow: #00000060; - --color-secondary-bg: #F9F7F7; + --color-secondary-bg: #ffffff; --color-text-focus: #fff; - --color-expand-button: #F9F7F7; + --color-expand-button: #ffffff; --color-placeholder-text: #9e9e9e; - --color-editor-line-highlight: var(--color-primary-light-6); + --color-editor-line-highlight: #ffffff; --color-project-board-bg: #ffffff; --color-project-board-light-label: #a6aab5; --color-caret: var(--color-text); @@ -149,7 +149,7 @@ --color-tooltip-bg: #000000f0; --color-tooltip-text: #ffffff; --color-header-bar: #ffffff; - --color-label-active-bg: #dde2e7; + --color-label-active-bg: #ffffff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #fffbdd; @@ -176,7 +176,7 @@ } .chroma .o, .chroma .ow { - color: #9c27b0; + color: #ff9800; } .chroma .s, .chroma .s1, @@ -191,7 +191,7 @@ .chroma .sx, .chroma .nt, .chroma .cpf { - color: #4caf50; + color: #00bcd4; } .chroma .m, .chroma .mb, @@ -200,7 +200,7 @@ .chroma .mi, .chroma .mo, .chroma .nl { - color: #4caf50; + color: #9c27b0; } .chroma .kt, .chroma .nc, @@ -211,12 +211,12 @@ .chroma .nf, .chroma .nb, .chroma .na { - color: #2196f3; + color: #4caf50; } .chroma .bp, .chroma .cp, .chroma .ne, .chroma .nd, .chroma .se { - color: #00bcd4; + color: #2196f3; } From d4352ad19b52d7d42eff3b378ff61fc90144a508 Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 17 May 2023 10:41:35 +0800 Subject: [PATCH 04/54] save --- web_src/css/themes/theme-enterprise-dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/themes/theme-enterprise-dark.css b/web_src/css/themes/theme-enterprise-dark.css index fa995fd93a65d..13fbd31b6c4b5 100644 --- a/web_src/css/themes/theme-enterprise-dark.css +++ b/web_src/css/themes/theme-enterprise-dark.css @@ -155,7 +155,7 @@ --color-small-accent: var(--color-primary-light-5); --color-active-line: #fffbdd; accent-color: var(--color-accent); - color-scheme: true; + color-scheme: dark; } .chroma .nx { color: #e5e5e5; From 91f25611eb350aabd3b96c4732daf77da0475de3 Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 17 May 2023 15:12:54 +0800 Subject: [PATCH 05/54] save --- web_src/css/themes/theme-edge-auto.css | 724 ------------------ web_src/css/themes/theme-edge-dark.css | 360 --------- web_src/css/themes/theme-edge-light.css | 359 --------- web_src/css/themes/theme-enterprise-auto.css | 224 ++---- web_src/css/themes/theme-enterprise-dark.css | 86 +-- web_src/css/themes/theme-enterprise-light.css | 76 +- .../themes/theme-gruvbox-material-auto.css | 724 ------------------ .../themes/theme-gruvbox-material-dark.css | 360 --------- .../themes/theme-gruvbox-material-light.css | 360 --------- 9 files changed, 161 insertions(+), 3112 deletions(-) delete mode 100644 web_src/css/themes/theme-edge-auto.css delete mode 100644 web_src/css/themes/theme-edge-dark.css delete mode 100644 web_src/css/themes/theme-edge-light.css delete mode 100644 web_src/css/themes/theme-gruvbox-material-auto.css delete mode 100644 web_src/css/themes/theme-gruvbox-material-dark.css delete mode 100644 web_src/css/themes/theme-gruvbox-material-light.css diff --git a/web_src/css/themes/theme-edge-auto.css b/web_src/css/themes/theme-edge-auto.css deleted file mode 100644 index f890dd4fd1de3..0000000000000 --- a/web_src/css/themes/theme-edge-auto.css +++ /dev/null @@ -1,724 +0,0 @@ -@media (prefers-color-scheme: dark) { - :root { - --is-dark-theme: true; - --color-primary: #6cb6eb; - --color-primary-contrast: #2b2d37; - --color-primary-dark-1: #6cb6eb; - --color-primary-dark-2: #7bbae8; - --color-primary-dark-3: #8abee5; - --color-primary-dark-4: #99c2e2; - --color-primary-dark-5: #a7c5df; - --color-primary-dark-6: #b6c9dc; - --color-primary-dark-7: #c5cdd9; - --color-primary-light-1: #6cb6eb; - --color-primary-light-2: #63a1d0; - --color-primary-light-3: #5a8db5; - --color-primary-light-4: #51789a; - --color-primary-light-5: #48637f; - --color-primary-light-6: #3f4f64; - --color-primary-light-7: #363a49; - --color-primary-alpha-10: rgba(108, 182, 235, 0.1); - --color-primary-alpha-20: rgba(108, 182, 235, 0.2); - --color-primary-alpha-30: rgba(108, 182, 235, 0.3); - --color-primary-alpha-40: rgba(108, 182, 235, 0.4); - --color-primary-alpha-50: rgba(108, 182, 235, 0.5); - --color-primary-alpha-60: rgba(108, 182, 235, 0.6); - --color-primary-alpha-70: rgba(108, 182, 235, 0.7); - --color-primary-alpha-80: rgba(108, 182, 235, 0.8); - --color-primary-alpha-90: rgba(108, 182, 235, 0.9); - --color-secondary: #404455; - --color-secondary-dark-1: #404455; - --color-secondary-dark-2: #4b4f60; - --color-secondary-dark-3: #565b6b; - --color-secondary-dark-4: #616676; - --color-secondary-dark-5: #6c7281; - --color-secondary-dark-6: #777d8c; - --color-secondary-dark-7: #838997; - --color-secondary-dark-8: #8e94a2; - --color-secondary-dark-9: #999fad; - --color-secondary-dark-10: #a4abb8; - --color-secondary-dark-11: #afb6c3; - --color-secondary-dark-12: #bac2ce; - --color-secondary-dark-13: #c5cdd9; - --color-secondary-light-1: #404455; - --color-secondary-light-2: #3a3e4e; - --color-secondary-light-3: #363a49; - --color-secondary-light-4: #333644; - --color-secondary-alpha-10: rgba(64, 68, 85, 0.1); - --color-secondary-alpha-20: rgba(64, 68, 85, 0.2); - --color-secondary-alpha-30: rgba(64, 68, 85, 0.3); - --color-secondary-alpha-40: rgba(64, 68, 85, 0.4); - --color-secondary-alpha-50: rgba(64, 68, 85, 0.5); - --color-secondary-alpha-60: rgba(64, 68, 85, 0.6); - --color-secondary-alpha-70: rgba(64, 68, 85, 0.7); - --color-secondary-alpha-80: rgba(64, 68, 85, 0.8); - --color-secondary-alpha-90: rgba(64, 68, 85, 0.9); - /* colors */ - --color-red: #ec7279; - --color-orange: #deb974; - --color-yellow: #deb974; - --color-olive: #a0c980; - --color-green: #a0c980; - --color-teal: #5dbbc1; - --color-blue: #6cb6eb; - --color-violet: #d38aea; - --color-purple: #d38aea; - --color-pink: #d38aea; - --color-brown: #deb974; - --color-grey: #758094; - /* light variants */ - --color-red-light: #ec7279; - --color-orange-light: #deb974; - --color-yellow-light: #deb974; - --color-olive-light: #a0c980; - --color-green-light: #a0c980; - --color-teal-light: #5dbbc1; - --color-blue-light: #6cb6eb; - --color-violet-light: #d38aea; - --color-purple-light: #d38aea; - --color-pink-light: #d38aea; - --color-brown-light: #deb974; - --color-grey-light: #758094; - /* other colors */ - --color-black: #363a49; - --color-gold: #deb974; - --color-white: #2b2d37; - --color-diff-removed-word-bg: #824a4f; - --color-diff-added-word-bg: #586d4b; - --color-diff-removed-row-bg: #55393d; - --color-diff-moved-row-bg: #354157; - --color-diff-added-row-bg: #394634; - --color-diff-removed-row-border: #a1565b; - --color-diff-moved-row-border: #517ca1; - --color-diff-added-row-border: #6d885a; - --color-diff-inactive: #363a49; - --color-error-border: #a1565b; - --color-error-bg: #55393d; - --color-error-text: #ec7279; - --color-success-border: #6d885a; - --color-success-bg: #394634; - --color-success-text: #a0c980; - --color-warning-border: #967e52; - --color-warning-bg: #4e432f; - --color-warning-text: #deb974; - --color-info-border: #517ca1; - --color-info-bg: #354157; - --color-info-text: #6cb6eb; - /* target-based colors */ - --color-body: #2b2d37; - --color-box-header: #3a3e4e; - --color-box-body: #333644; - --color-box-body-highlight: #363a49; - --color-text-dark: #d38aea; - --color-text: #c5cdd9; - --color-text-hover: rgba(197, 205, 217, 0.8); - --color-text-light: #a0c980; - --color-text-light-1: #758094; - --color-text-light-2: #c5cdd9; - --color-text-light-3: #758094; - --color-footer: #333644; - --color-timeline: #404455; - --color-input-text: #c5cdd9; - --color-input-background: #2b2d37; - --color-input-toggle-background: #333644; - --color-input-border: #404455; - --color-input-border-hover: #5b6275; - --color-navbar: #333644; - --color-navbar-transparent: #333644; - --color-light: #333644; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #404455; - --color-hover: rgba(64, 68, 85, 0.5); - --color-active: rgba(64, 68, 85, 0.5); - --color-menu: #333644; - --color-card: #333644; - --color-markup-table-row: #3a3e4e; - --color-markup-code-block: #2b2d37; - --color-button: #3a3e4e; - --color-code-bg: #2b2d37; - --color-code-sidebar-bg: #333644; - --color-shadow: #00000060; - --color-secondary-bg: #333644; - --color-text-focus: #fff; - --color-expand-button: #363a49; - --color-placeholder-text: #758094; - --color-editor-line-highlight: #333644; - --color-project-board-bg: #2b2d37; - --color-project-board-light-label: #6cb6eb; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-header-bar: #333644; - --color-label-active-bg: #404455; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #333644; - accent-color: var(--color-accent); - color-scheme: dark; - } - .chroma .nx { - color: #c5cdd9; - } - .chroma .c, - .chroma .c1, - .chroma .ch, - .chroma .cm, - .chroma .sd { - color: #758094; - } - .chroma .k, - .chroma .kc, - .chroma .kd, - .chroma .kn, - .chroma .kp, - .chroma .kr { - color: #ec7279; - } - .chroma .o, - .chroma .ow { - color: #d38aea; - } - .chroma .s, - .chroma .s1, - .chroma .s2, - .chroma .sa, - .chroma .sb, - .chroma .sc, - .chroma .sh, - .chroma .si, - .chroma .sr, - .chroma .ss, - .chroma .sx, - .chroma .nt, - .chroma .cpf { - color: #a0c980; - } - .chroma .m, - .chroma .mb, - .chroma .mf, - .chroma .mh, - .chroma .mi, - .chroma .mo, - .chroma .nl { - color: #a0c980; - } - .chroma .kt, - .chroma .nc, - .chroma .nn, - .chroma .nv { - color: #deb974; - } - .chroma .nf, - .chroma .nb, - .chroma .na { - color: #6cb6eb; - } - .chroma .bp, - .chroma .cp, - .chroma .ne, - .chroma .nd, - .chroma .se { - color: #5dbbc1; - } - /* primary buttons */ - .ui.primary.button, - .ui.primary.buttons .button { - background: #6cb6eb; - background-color: #6cb6eb !important; - color: #2b2d37; - } - .ui.primary.button:hover, - .ui.primary.buttons .button:hover { - background: rgba(108, 182, 235, 0.8); - background-color: rgba(108, 182, 235, 0.8) !important; - color: #2b2d37; - } - /* secondary buttons */ - .ui.green.buttons .button, - .ui.green.button { - background: #a0c980; - background-color: #a0c980; - color: #2b2d37; - } - .ui.green.buttons .button:hover, - .ui.green.button:hover { - background: rgba(160, 201, 128, 0.8); - background-color: rgba(160, 201, 128, 0.8); - color: #2b2d37; - } - /* text based buttons (purple) */ - .ui.labeled.button.disabled > .button, - .ui.basic.buttons .button, - .ui.basic.button { - color: #d38aea; - } - .ui.labeled.button.disabled > .button:hover, - .ui.basic.buttons .button:hover, - .ui.basic.button:hover { - color: #d38aea; - } - /* repo title && header */ - .repo-title { - color: #d38aea; - } - /* star number && fork number */ - .repo-buttons button[disabled] ~ .label, - .repo-buttons .ui.labeled.button.disabled > .label { - color: #6cb6eb; - } - .ui.basic.labels .label, - .ui.basic.label { - color: #6cb6eb; - } - /* hover on commits, branch, tags in project home page */ - .repository .ui.segment.sub-menu .list .item a:hover, - .ui.tabular.menu .item:hover { - color: var(--color-text-hover); - } - /* commit label */ - .ui.primary.labels .label, - .ui.ui.ui.primary.label { - color: #2b2d37; - } - /* issue label */ - .ui.green.labels .label, - .ui.ui.ui.green.label { - color: #2b2d37; - } - /* grey button (rss feed button in repository home page) */ - i.grey.icon.icon.icon.icon { - color: #758094; - } - /* scroll bar */ - * { - scrollbar-color: #d38aea transparent !important; - } - ::-webkit-scrollbar { - width: 10px; - height: 10px; - } - ::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 0 6px #d38aea !important; - border: 2px solid transparent; - border-radius: 5px !important; - } - ::-webkit-scrollbar-thumb:window-inactive { - box-shadow: inset 0 0 0 6px #d38aea !important; - } - ::-webkit-scrollbar-thumb:hover { - box-shadow: inset 0 0 0 6px #d38aea !important; - } - ::-webkit-scrollbar-corner { - background: transparent; - } - /* red buttons */ - .ui.red.labels .label, - .ui.ui.ui.red.label, - .ui.red.button, - .ui.red.buttons .button { - background: #ec7279; - background-color: #ec7279; - color: #2b2d37; - } - .ui.red.labels .label:hover, - .ui.ui.ui.red.label:hover, - .ui.red.button:hover, - .ui.red.buttons .button:hover { - background: rgba(236, 114, 121, 0.8); - background-color: rgba(236, 114, 121, 0.8); - color: #2b2d37; - } - /* grey buttons */ - .ui.grey.labels .label, - .ui.ui.ui.grey.label, - .ui.grey.button, - .ui.grey.buttons .button { - color: #2b2d37; - } - .ui.grey.labels .label:hover, - .ui.ui.ui.grey.label:hover, - .ui.grey.button:hover, - .ui.grey.buttons .button:hover { - color: #2b2d37; - } - /* orange buttons */ - .ui.orange.labels .label, - .ui.ui.ui.orange.label, - .ui.orange.button, - .ui.orange.buttons .button { - background: #deb974; - background-color: #deb974; - color: #2b2d37; - } - .ui.orange.labels .label:hover, - .ui.ui.ui.orange.label:hover, - .ui.orange.button:hover, - .ui.orange.buttons .button:hover { - background: rgba(222, 185, 116, 0.8); - background-color: rgba(222, 185, 116, 0.8); - color: #2b2d37; - } -} -@media (prefers-color-scheme: light) { - :root { - --is-dark-theme: true; - --color-primary: #5079be; - --color-primary-contrast: #fafafa; - --color-primary-dark-1: #5079be; - --color-primary-dark-2: #4f72ad; - --color-primary-dark-3: #4e6b9d; - --color-primary-dark-4: #4e658d; - --color-primary-dark-5: #4d5e7c; - --color-primary-dark-6: #4c576c; - --color-primary-dark-7: #4b505b; - --color-primary-light-1: #5079be; - --color-primary-light-2: #698cc6; - --color-primary-light-3: #839fcf; - --color-primary-light-4: #9cb2d7; - --color-primary-light-5: #b5c5df; - --color-primary-light-6: #cfd8e8; - --color-primary-light-7: #e8ebf0; - --color-primary-alpha-10: rgba(80, 121, 190, 0.1); - --color-primary-alpha-20: rgba(80, 121, 190, 0.2); - --color-primary-alpha-30: rgba(80, 121, 190, 0.3); - --color-primary-alpha-40: rgba(80, 121, 190, 0.4); - --color-primary-alpha-50: rgba(80, 121, 190, 0.5); - --color-primary-alpha-60: rgba(80, 121, 190, 0.6); - --color-primary-alpha-70: rgba(80, 121, 190, 0.7); - --color-primary-alpha-80: rgba(80, 121, 190, 0.8); - --color-primary-alpha-90: rgba(80, 121, 190, 0.9); - --color-secondary: #dde2e7; - --color-secondary-dark-1: #dde2e7; - --color-secondary-dark-2: #d1d6db; - --color-secondary-dark-3: #c5cad0; - --color-secondary-dark-4: #b9bec4; - --color-secondary-dark-5: #acb1b8; - --color-secondary-dark-6: #a0a5ad; - --color-secondary-dark-7: #9499a1; - --color-secondary-dark-8: #888d95; - --color-secondary-dark-9: #7c818a; - --color-secondary-dark-10: #70757e; - --color-secondary-dark-11: #636872; - --color-secondary-dark-12: #575c67; - --color-secondary-dark-13: #4b505b; - --color-secondary-light-1: #dde2e7; - --color-secondary-light-2: #e8ebf0; - --color-secondary-light-3: #e8ebf0; - --color-secondary-light-4: #eef1f4; - --color-secondary-alpha-10: rgba(221, 226, 231, 0.1); - --color-secondary-alpha-20: rgba(221, 226, 231, 0.2); - --color-secondary-alpha-30: rgba(221, 226, 231, 0.3); - --color-secondary-alpha-40: rgba(221, 226, 231, 0.4); - --color-secondary-alpha-50: rgba(221, 226, 231, 0.5); - --color-secondary-alpha-60: rgba(221, 226, 231, 0.6); - --color-secondary-alpha-70: rgba(221, 226, 231, 0.7); - --color-secondary-alpha-80: rgba(221, 226, 231, 0.8); - --color-secondary-alpha-90: rgba(221, 226, 231, 0.9); - /* colors */ - --color-red: #d05858; - --color-orange: #be7e05; - --color-yellow: #be7e05; - --color-olive: #608e32; - --color-green: #608e32; - --color-teal: #3a8b84; - --color-blue: #5079be; - --color-violet: #b05ccc; - --color-purple: #b05ccc; - --color-pink: #b05ccc; - --color-brown: #be7e05; - --color-grey: #8790a0; - /* light variants */ - --color-red-light: #d05858; - --color-orange-light: #be7e05; - --color-yellow-light: #be7e05; - --color-olive-light: #608e32; - --color-green-light: #608e32; - --color-teal-light: #3a8b84; - --color-blue-light: #5079be; - --color-violet-light: #b05ccc; - --color-purple-light: #b05ccc; - --color-pink-light: #b05ccc; - --color-brown-light: #be7e05; - --color-grey-light: #8790a0; - /* other colors */ - --color-black: #e8ebf0; - --color-gold: #be7e05; - --color-white: #fafafa; - --color-diff-removed-word-bg: #ebbaba; - --color-diff-added-word-bg: #bdd1af; - --color-diff-removed-row-bg: #f6e4e4; - --color-diff-moved-row-bg: #e3eaf6; - --color-diff-added-row-bg: #e5eee4; - --color-diff-removed-row-border: #e39e9e; - --color-diff-moved-row-border: #9ab2da; - --color-diff-added-row-border: #a3be8b; - --color-diff-inactive: #e8ebf0; - --color-error-border: #e39e9e; - --color-error-bg: #f6e4e4; - --color-error-text: #d05858; - --color-success-border: #a3be8b; - --color-success-bg: #e5eee4; - --color-success-text: #608e32; - --color-warning-border: #d7b574; - --color-warning-bg: #f0ece2; - --color-warning-text: #be7e05; - --color-info-border: #9ab2da; - --color-info-bg: #e3eaf6; - --color-info-text: #5079be; - /* target-based colors */ - --color-body: #fafafa; - --color-box-header: #e8ebf0; - --color-box-body: #eef1f4; - --color-box-body-highlight: #e8ebf0; - --color-text-dark: #b05ccc; - --color-text: #4b505b; - --color-text-hover: rgba(75, 80, 91, 0.8); - --color-text-light: #608e32; - --color-text-light-1: #8790a0; - --color-text-light-2: #4b505b; - --color-text-light-3: #8790a0; - --color-footer: #eef1f4; - --color-timeline: #dde2e7; - --color-input-text: #4b505b; - --color-input-background: #fafafa; - --color-input-toggle-background: #eef1f4; - --color-input-border: #dde2e7; - --color-input-border-hover: #b2b9c4; - --color-navbar: #eef1f4; - --color-navbar-transparent: #eef1f4; - --color-light: #eef1f4; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #dde2e7; - --color-hover: rgba(221, 226, 231, 0.5); - --color-active: rgba(221, 226, 231, 0.5); - --color-menu: #eef1f4; - --color-card: #eef1f4; - --color-markup-table-row: #e8ebf0; - --color-markup-code-block: #fafafa; - --color-button: #e8ebf0; - --color-code-bg: #fafafa; - --color-code-sidebar-bg: #eef1f4; - --color-shadow: #00000060; - --color-secondary-bg: #eef1f4; - --color-text-focus: #fff; - --color-expand-button: #e8ebf0; - --color-placeholder-text: #8790a0; - --color-editor-line-highlight: #eef1f4; - --color-project-board-bg: #fafafa; - --color-project-board-light-label: #5079be; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-header-bar: #eef1f4; - --color-label-active-bg: #dde2e7; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #eef1f4; - accent-color: var(--color-accent); - color-scheme: dark; - } - .chroma .nx { - color: #4b505b; - } - .chroma .c, - .chroma .c1, - .chroma .ch, - .chroma .cm, - .chroma .sd { - color: #8790a0; - } - .chroma .k, - .chroma .kc, - .chroma .kd, - .chroma .kn, - .chroma .kp, - .chroma .kr { - color: #d05858; - } - .chroma .o, - .chroma .ow { - color: #b05ccc; - } - .chroma .s, - .chroma .s1, - .chroma .s2, - .chroma .sa, - .chroma .sb, - .chroma .sc, - .chroma .sh, - .chroma .si, - .chroma .sr, - .chroma .ss, - .chroma .sx, - .chroma .nt, - .chroma .cpf { - color: #608e32; - } - .chroma .m, - .chroma .mb, - .chroma .mf, - .chroma .mh, - .chroma .mi, - .chroma .mo, - .chroma .nl { - color: #608e32; - } - .chroma .kt, - .chroma .nc, - .chroma .nn, - .chroma .nv { - color: #be7e05; - } - .chroma .nf, - .chroma .nb, - .chroma .na { - color: #5079be; - } - .chroma .bp, - .chroma .cp, - .chroma .ne, - .chroma .nd, - .chroma .se { - color: #3a8b84; - } - /* primary buttons */ - .ui.primary.button, - .ui.primary.buttons .button { - background: #6996e0; - background-color: #6996e0 !important; - color: #fafafa; - } - .ui.primary.button:hover, - .ui.primary.buttons .button:hover { - background: rgba(105, 150, 224, 0.8); - background-color: rgba(105, 150, 224, 0.8) !important; - color: #fafafa; - } - /* secondary buttons */ - .ui.green.buttons .button, - .ui.green.button { - background: #76af6f; - background-color: #76af6f; - color: #fafafa; - } - .ui.green.buttons .button:hover, - .ui.green.button:hover { - background: rgba(118, 175, 111, 0.8); - background-color: rgba(118, 175, 111, 0.8); - color: #fafafa; - } - /* text based buttons (purple) */ - .ui.labeled.button.disabled > .button, - .ui.basic.buttons .button, - .ui.basic.button { - color: #b05ccc; - } - .ui.labeled.button.disabled > .button:hover, - .ui.basic.buttons .button:hover, - .ui.basic.button:hover { - color: #b05ccc; - } - /* repo title && header */ - .repo-title { - color: #b05ccc; - } - /* star number && fork number */ - .repo-buttons button[disabled] ~ .label, - .repo-buttons .ui.labeled.button.disabled > .label { - color: #5079be; - } - .ui.basic.labels .label, - .ui.basic.label { - color: #5079be; - } - /* hover on commits, branch, tags in project home page */ - .repository .ui.segment.sub-menu .list .item a:hover, - .ui.tabular.menu .item:hover { - color: var(--color-text-hover); - } - /* commit label */ - .ui.primary.labels .label, - .ui.ui.ui.primary.label { - color: #fafafa; - } - /* issue label */ - .ui.green.labels .label, - .ui.ui.ui.green.label { - color: #fafafa; - } - /* grey button (rss feed button in repository home page) */ - i.grey.icon.icon.icon.icon { - color: #8790a0; - } - /* scroll bar */ - * { - scrollbar-color: #b05ccc transparent !important; - } - ::-webkit-scrollbar { - width: 10px; - height: 10px; - } - ::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 0 6px #b05ccc !important; - border: 2px solid transparent; - border-radius: 5px !important; - } - ::-webkit-scrollbar-thumb:window-inactive { - box-shadow: inset 0 0 0 6px #b05ccc !important; - } - ::-webkit-scrollbar-thumb:hover { - box-shadow: inset 0 0 0 6px #b05ccc !important; - } - ::-webkit-scrollbar-corner { - background: transparent; - } - /* red buttons */ - .ui.red.labels .label, - .ui.ui.ui.red.label, - .ui.red.button, - .ui.red.buttons .button { - background: #e17373; - background-color: #e17373; - color: #fafafa; - } - .ui.red.labels .label:hover, - .ui.ui.ui.red.label:hover, - .ui.red.button:hover, - .ui.red.buttons .button:hover { - background: rgba(225, 115, 115, 0.8); - background-color: rgba(225, 115, 115, 0.8); - color: #fafafa; - } - /* grey buttons */ - .ui.grey.labels .label, - .ui.ui.ui.grey.label, - .ui.grey.button, - .ui.grey.buttons .button { - color: #fafafa; - } - .ui.grey.labels .label:hover, - .ui.ui.ui.grey.label:hover, - .ui.grey.button:hover, - .ui.grey.buttons .button:hover { - color: #fafafa; - } - /* orange buttons */ - .ui.orange.labels .label, - .ui.ui.ui.orange.label, - .ui.orange.button, - .ui.orange.buttons .button { - background: #be7e05; - background-color: #be7e05; - color: #fafafa; - } - .ui.orange.labels .label:hover, - .ui.ui.ui.orange.label:hover, - .ui.orange.button:hover, - .ui.orange.buttons .button:hover { - background: rgba(190, 126, 5, 0.8); - background-color: rgba(190, 126, 5, 0.8); - color: #fafafa; - } -} diff --git a/web_src/css/themes/theme-edge-dark.css b/web_src/css/themes/theme-edge-dark.css deleted file mode 100644 index 54602f35f3ccf..0000000000000 --- a/web_src/css/themes/theme-edge-dark.css +++ /dev/null @@ -1,360 +0,0 @@ -:root { - --is-dark-theme: true; - --color-primary: #6cb6eb; - --color-primary-contrast: #2b2d37; - --color-primary-dark-1: #6cb6eb; - --color-primary-dark-2: #7bbae8; - --color-primary-dark-3: #8abee5; - --color-primary-dark-4: #99c2e2; - --color-primary-dark-5: #a7c5df; - --color-primary-dark-6: #b6c9dc; - --color-primary-dark-7: #c5cdd9; - --color-primary-light-1: #6cb6eb; - --color-primary-light-2: #63a1d0; - --color-primary-light-3: #5a8db5; - --color-primary-light-4: #51789a; - --color-primary-light-5: #48637f; - --color-primary-light-6: #3f4f64; - --color-primary-light-7: #363a49; - --color-primary-alpha-10: rgba(108, 182, 235, 0.1); - --color-primary-alpha-20: rgba(108, 182, 235, 0.2); - --color-primary-alpha-30: rgba(108, 182, 235, 0.3); - --color-primary-alpha-40: rgba(108, 182, 235, 0.4); - --color-primary-alpha-50: rgba(108, 182, 235, 0.5); - --color-primary-alpha-60: rgba(108, 182, 235, 0.6); - --color-primary-alpha-70: rgba(108, 182, 235, 0.7); - --color-primary-alpha-80: rgba(108, 182, 235, 0.8); - --color-primary-alpha-90: rgba(108, 182, 235, 0.9); - --color-secondary: #404455; - --color-secondary-dark-1: #404455; - --color-secondary-dark-2: #4b4f60; - --color-secondary-dark-3: #565b6b; - --color-secondary-dark-4: #616676; - --color-secondary-dark-5: #6c7281; - --color-secondary-dark-6: #777d8c; - --color-secondary-dark-7: #838997; - --color-secondary-dark-8: #8e94a2; - --color-secondary-dark-9: #999fad; - --color-secondary-dark-10: #a4abb8; - --color-secondary-dark-11: #afb6c3; - --color-secondary-dark-12: #bac2ce; - --color-secondary-dark-13: #c5cdd9; - --color-secondary-light-1: #404455; - --color-secondary-light-2: #3a3e4e; - --color-secondary-light-3: #363a49; - --color-secondary-light-4: #333644; - --color-secondary-alpha-10: rgba(64, 68, 85, 0.1); - --color-secondary-alpha-20: rgba(64, 68, 85, 0.2); - --color-secondary-alpha-30: rgba(64, 68, 85, 0.3); - --color-secondary-alpha-40: rgba(64, 68, 85, 0.4); - --color-secondary-alpha-50: rgba(64, 68, 85, 0.5); - --color-secondary-alpha-60: rgba(64, 68, 85, 0.6); - --color-secondary-alpha-70: rgba(64, 68, 85, 0.7); - --color-secondary-alpha-80: rgba(64, 68, 85, 0.8); - --color-secondary-alpha-90: rgba(64, 68, 85, 0.9); - /* colors */ - --color-red: #ec7279; - --color-orange: #deb974; - --color-yellow: #deb974; - --color-olive: #a0c980; - --color-green: #a0c980; - --color-teal: #5dbbc1; - --color-blue: #6cb6eb; - --color-violet: #d38aea; - --color-purple: #d38aea; - --color-pink: #d38aea; - --color-brown: #deb974; - --color-grey: #758094; - /* light variants */ - --color-red-light: #ec7279; - --color-orange-light: #deb974; - --color-yellow-light: #deb974; - --color-olive-light: #a0c980; - --color-green-light: #a0c980; - --color-teal-light: #5dbbc1; - --color-blue-light: #6cb6eb; - --color-violet-light: #d38aea; - --color-purple-light: #d38aea; - --color-pink-light: #d38aea; - --color-brown-light: #deb974; - --color-grey-light: #758094; - /* other colors */ - --color-black: #363a49; - --color-gold: #deb974; - --color-white: #2b2d37; - --color-diff-removed-word-bg: #824a4f; - --color-diff-added-word-bg: #586d4b; - --color-diff-removed-row-bg: #55393d; - --color-diff-moved-row-bg: #354157; - --color-diff-added-row-bg: #394634; - --color-diff-removed-row-border: #a1565b; - --color-diff-moved-row-border: #517ca1; - --color-diff-added-row-border: #6d885a; - --color-diff-inactive: #363a49; - --color-error-border: #a1565b; - --color-error-bg: #55393d; - --color-error-text: #ec7279; - --color-success-border: #6d885a; - --color-success-bg: #394634; - --color-success-text: #a0c980; - --color-warning-border: #967e52; - --color-warning-bg: #4e432f; - --color-warning-text: #deb974; - --color-info-border: #517ca1; - --color-info-bg: #354157; - --color-info-text: #6cb6eb; - /* target-based colors */ - --color-body: #2b2d37; - --color-box-header: #3a3e4e; - --color-box-body: #333644; - --color-box-body-highlight: #363a49; - --color-text-dark: #d38aea; - --color-text: #c5cdd9; - --color-text-hover: rgba(197, 205, 217, 0.8); - --color-text-light: #a0c980; - --color-text-light-1: #758094; - --color-text-light-2: #c5cdd9; - --color-text-light-3: #758094; - --color-footer: #333644; - --color-timeline: #404455; - --color-input-text: #c5cdd9; - --color-input-background: #2b2d37; - --color-input-toggle-background: #333644; - --color-input-border: #404455; - --color-input-border-hover: #5b6275; - --color-navbar: #333644; - --color-navbar-transparent: #333644; - --color-light: #333644; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #404455; - --color-hover: rgba(64, 68, 85, 0.5); - --color-active: rgba(64, 68, 85, 0.5); - --color-menu: #333644; - --color-card: #333644; - --color-markup-table-row: #3a3e4e; - --color-markup-code-block: #2b2d37; - --color-button: #3a3e4e; - --color-code-bg: #2b2d37; - --color-code-sidebar-bg: #333644; - --color-shadow: #00000060; - --color-secondary-bg: #333644; - --color-text-focus: #fff; - --color-expand-button: #363a49; - --color-placeholder-text: #758094; - --color-editor-line-highlight: #333644; - --color-project-board-bg: #2b2d37; - --color-project-board-light-label: #6cb6eb; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-header-bar: #333644; - --color-label-active-bg: #404455; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #333644; - accent-color: var(--color-accent); - color-scheme: dark; -} -.chroma .nx { - color: #c5cdd9; -} -.chroma .c, -.chroma .c1, -.chroma .ch, -.chroma .cm, -.chroma .sd { - color: #758094; -} -.chroma .k, -.chroma .kc, -.chroma .kd, -.chroma .kn, -.chroma .kp, -.chroma .kr { - color: #ec7279; -} -.chroma .o, -.chroma .ow { - color: #d38aea; -} -.chroma .s, -.chroma .s1, -.chroma .s2, -.chroma .sa, -.chroma .sb, -.chroma .sc, -.chroma .sh, -.chroma .si, -.chroma .sr, -.chroma .ss, -.chroma .sx, -.chroma .nt, -.chroma .cpf { - color: #a0c980; -} -.chroma .m, -.chroma .mb, -.chroma .mf, -.chroma .mh, -.chroma .mi, -.chroma .mo, -.chroma .nl { - color: #a0c980; -} -.chroma .kt, -.chroma .nc, -.chroma .nn, -.chroma .nv { - color: #deb974; -} -.chroma .nf, -.chroma .nb, -.chroma .na { - color: #6cb6eb; -} -.chroma .bp, -.chroma .cp, -.chroma .ne, -.chroma .nd, -.chroma .se { - color: #5dbbc1; -} -/* primary buttons */ -.ui.primary.button, -.ui.primary.buttons .button { - background: #6cb6eb; - background-color: #6cb6eb !important; - color: #2b2d37; -} -.ui.primary.button:hover, -.ui.primary.buttons .button:hover { - background: rgba(108, 182, 235, 0.8); - background-color: rgba(108, 182, 235, 0.8) !important; - color: #2b2d37; -} -/* secondary buttons */ -.ui.green.buttons .button, -.ui.green.button { - background: #a0c980; - background-color: #a0c980; - color: #2b2d37; -} -.ui.green.buttons .button:hover, -.ui.green.button:hover { - background: rgba(160, 201, 128, 0.8); - background-color: rgba(160, 201, 128, 0.8); - color: #2b2d37; -} -/* text based buttons (purple) */ -.ui.labeled.button.disabled > .button, -.ui.basic.buttons .button, -.ui.basic.button { - color: #d38aea; -} -.ui.labeled.button.disabled > .button:hover, -.ui.basic.buttons .button:hover, -.ui.basic.button:hover { - color: #d38aea; -} -/* repo title && header */ -.repo-title { - color: #d38aea; -} -/* star number && fork number */ -.repo-buttons button[disabled] ~ .label, -.repo-buttons .ui.labeled.button.disabled > .label { - color: #6cb6eb; -} -.ui.basic.labels .label, -.ui.basic.label { - color: #6cb6eb; -} -/* hover on commits, branch, tags in project home page */ -.repository .ui.segment.sub-menu .list .item a:hover, -.ui.tabular.menu .item:hover { - color: var(--color-text-hover); -} -/* commit label */ -.ui.primary.labels .label, -.ui.ui.ui.primary.label { - color: #2b2d37; -} -/* issue label */ -.ui.green.labels .label, -.ui.ui.ui.green.label { - color: #2b2d37; -} -/* grey button (rss feed button in repository home page) */ -i.grey.icon.icon.icon.icon { - color: #758094; -} -/* scroll bar */ -* { - scrollbar-color: #d38aea transparent !important; -} -::-webkit-scrollbar { - width: 10px; - height: 10px; -} -::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 0 6px #d38aea !important; - border: 2px solid transparent; - border-radius: 5px !important; -} -::-webkit-scrollbar-thumb:window-inactive { - box-shadow: inset 0 0 0 6px #d38aea !important; -} -::-webkit-scrollbar-thumb:hover { - box-shadow: inset 0 0 0 6px #d38aea !important; -} -::-webkit-scrollbar-corner { - background: transparent; -} -/* red buttons */ -.ui.red.labels .label, -.ui.ui.ui.red.label, -.ui.red.button, -.ui.red.buttons .button { - background: #ec7279; - background-color: #ec7279; - color: #2b2d37; -} -.ui.red.labels .label:hover, -.ui.ui.ui.red.label:hover, -.ui.red.button:hover, -.ui.red.buttons .button:hover { - background: rgba(236, 114, 121, 0.8); - background-color: rgba(236, 114, 121, 0.8); - color: #2b2d37; -} -/* grey buttons */ -.ui.grey.labels .label, -.ui.ui.ui.grey.label, -.ui.grey.button, -.ui.grey.buttons .button { - color: #2b2d37; -} -.ui.grey.labels .label:hover, -.ui.ui.ui.grey.label:hover, -.ui.grey.button:hover, -.ui.grey.buttons .button:hover { - color: #2b2d37; -} -/* orange buttons */ -.ui.orange.labels .label, -.ui.ui.ui.orange.label, -.ui.orange.button, -.ui.orange.buttons .button { - background: #deb974; - background-color: #deb974; - color: #2b2d37; -} -.ui.orange.labels .label:hover, -.ui.ui.ui.orange.label:hover, -.ui.orange.button:hover, -.ui.orange.buttons .button:hover { - background: rgba(222, 185, 116, 0.8); - background-color: rgba(222, 185, 116, 0.8); - color: #2b2d37; -} diff --git a/web_src/css/themes/theme-edge-light.css b/web_src/css/themes/theme-edge-light.css deleted file mode 100644 index 3dae7851aece3..0000000000000 --- a/web_src/css/themes/theme-edge-light.css +++ /dev/null @@ -1,359 +0,0 @@ -:root { - --color-primary: #5079be; - --color-primary-contrast: #fafafa; - --color-primary-dark-1: #5079be; - --color-primary-dark-2: #4f72ad; - --color-primary-dark-3: #4e6b9d; - --color-primary-dark-4: #4e658d; - --color-primary-dark-5: #4d5e7c; - --color-primary-dark-6: #4c576c; - --color-primary-dark-7: #4b505b; - --color-primary-light-1: #5079be; - --color-primary-light-2: #698cc6; - --color-primary-light-3: #839fcf; - --color-primary-light-4: #9cb2d7; - --color-primary-light-5: #b5c5df; - --color-primary-light-6: #cfd8e8; - --color-primary-light-7: #e8ebf0; - --color-primary-alpha-10: rgba(80, 121, 190, 0.1); - --color-primary-alpha-20: rgba(80, 121, 190, 0.2); - --color-primary-alpha-30: rgba(80, 121, 190, 0.3); - --color-primary-alpha-40: rgba(80, 121, 190, 0.4); - --color-primary-alpha-50: rgba(80, 121, 190, 0.5); - --color-primary-alpha-60: rgba(80, 121, 190, 0.6); - --color-primary-alpha-70: rgba(80, 121, 190, 0.7); - --color-primary-alpha-80: rgba(80, 121, 190, 0.8); - --color-primary-alpha-90: rgba(80, 121, 190, 0.9); - --color-secondary: #dde2e7; - --color-secondary-dark-1: #dde2e7; - --color-secondary-dark-2: #d1d6db; - --color-secondary-dark-3: #c5cad0; - --color-secondary-dark-4: #b9bec4; - --color-secondary-dark-5: #acb1b8; - --color-secondary-dark-6: #a0a5ad; - --color-secondary-dark-7: #9499a1; - --color-secondary-dark-8: #888d95; - --color-secondary-dark-9: #7c818a; - --color-secondary-dark-10: #70757e; - --color-secondary-dark-11: #636872; - --color-secondary-dark-12: #575c67; - --color-secondary-dark-13: #4b505b; - --color-secondary-light-1: #dde2e7; - --color-secondary-light-2: #e8ebf0; - --color-secondary-light-3: #e8ebf0; - --color-secondary-light-4: #eef1f4; - --color-secondary-alpha-10: rgba(221, 226, 231, 0.1); - --color-secondary-alpha-20: rgba(221, 226, 231, 0.2); - --color-secondary-alpha-30: rgba(221, 226, 231, 0.3); - --color-secondary-alpha-40: rgba(221, 226, 231, 0.4); - --color-secondary-alpha-50: rgba(221, 226, 231, 0.5); - --color-secondary-alpha-60: rgba(221, 226, 231, 0.6); - --color-secondary-alpha-70: rgba(221, 226, 231, 0.7); - --color-secondary-alpha-80: rgba(221, 226, 231, 0.8); - --color-secondary-alpha-90: rgba(221, 226, 231, 0.9); - /* colors */ - --color-red: #d05858; - --color-orange: #be7e05; - --color-yellow: #be7e05; - --color-olive: #608e32; - --color-green: #608e32; - --color-teal: #3a8b84; - --color-blue: #5079be; - --color-violet: #b05ccc; - --color-purple: #b05ccc; - --color-pink: #b05ccc; - --color-brown: #be7e05; - --color-grey: #8790a0; - /* light variants */ - --color-red-light: #d05858; - --color-orange-light: #be7e05; - --color-yellow-light: #be7e05; - --color-olive-light: #608e32; - --color-green-light: #608e32; - --color-teal-light: #3a8b84; - --color-blue-light: #5079be; - --color-violet-light: #b05ccc; - --color-purple-light: #b05ccc; - --color-pink-light: #b05ccc; - --color-brown-light: #be7e05; - --color-grey-light: #8790a0; - /* other colors */ - --color-black: #e8ebf0; - --color-gold: #be7e05; - --color-white: #fafafa; - --color-diff-removed-word-bg: #ebbaba; - --color-diff-added-word-bg: #bdd1af; - --color-diff-removed-row-bg: #f6e4e4; - --color-diff-moved-row-bg: #e3eaf6; - --color-diff-added-row-bg: #e5eee4; - --color-diff-removed-row-border: #e39e9e; - --color-diff-moved-row-border: #9ab2da; - --color-diff-added-row-border: #a3be8b; - --color-diff-inactive: #e8ebf0; - --color-error-border: #e39e9e; - --color-error-bg: #f6e4e4; - --color-error-text: #d05858; - --color-success-border: #a3be8b; - --color-success-bg: #e5eee4; - --color-success-text: #608e32; - --color-warning-border: #d7b574; - --color-warning-bg: #f0ece2; - --color-warning-text: #be7e05; - --color-info-border: #9ab2da; - --color-info-bg: #e3eaf6; - --color-info-text: #5079be; - /* target-based colors */ - --color-body: #fafafa; - --color-box-header: #e8ebf0; - --color-box-body: #eef1f4; - --color-box-body-highlight: #e8ebf0; - --color-text-dark: #b05ccc; - --color-text: #4b505b; - --color-text-hover: rgba(75, 80, 91, 0.8); - --color-text-light: #608e32; - --color-text-light-1: #8790a0; - --color-text-light-2: #4b505b; - --color-text-light-3: #8790a0; - --color-footer: #eef1f4; - --color-timeline: #dde2e7; - --color-input-text: #4b505b; - --color-input-background: #fafafa; - --color-input-toggle-background: #eef1f4; - --color-input-border: #dde2e7; - --color-input-border-hover: #b2b9c4; - --color-navbar: #eef1f4; - --color-navbar-transparent: #eef1f4; - --color-light: #eef1f4; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #dde2e7; - --color-hover: rgba(221, 226, 231, 0.5); - --color-active: rgba(221, 226, 231, 0.5); - --color-menu: #eef1f4; - --color-card: #eef1f4; - --color-markup-table-row: #e8ebf0; - --color-markup-code-block: #fafafa; - --color-button: #e8ebf0; - --color-code-bg: #fafafa; - --color-code-sidebar-bg: #eef1f4; - --color-shadow: #00000060; - --color-secondary-bg: #eef1f4; - --color-text-focus: #fff; - --color-expand-button: #e8ebf0; - --color-placeholder-text: #8790a0; - --color-editor-line-highlight: #eef1f4; - --color-project-board-bg: #fafafa; - --color-project-board-light-label: #5079be; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-header-bar: #eef1f4; - --color-label-active-bg: #dde2e7; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #eef1f4; - accent-color: var(--color-accent); - color-scheme: dark; -} -.chroma .nx { - color: #4b505b; -} -.chroma .c, -.chroma .c1, -.chroma .ch, -.chroma .cm, -.chroma .sd { - color: #8790a0; -} -.chroma .k, -.chroma .kc, -.chroma .kd, -.chroma .kn, -.chroma .kp, -.chroma .kr { - color: #d05858; -} -.chroma .o, -.chroma .ow { - color: #b05ccc; -} -.chroma .s, -.chroma .s1, -.chroma .s2, -.chroma .sa, -.chroma .sb, -.chroma .sc, -.chroma .sh, -.chroma .si, -.chroma .sr, -.chroma .ss, -.chroma .sx, -.chroma .nt, -.chroma .cpf { - color: #608e32; -} -.chroma .m, -.chroma .mb, -.chroma .mf, -.chroma .mh, -.chroma .mi, -.chroma .mo, -.chroma .nl { - color: #608e32; -} -.chroma .kt, -.chroma .nc, -.chroma .nn, -.chroma .nv { - color: #be7e05; -} -.chroma .nf, -.chroma .nb, -.chroma .na { - color: #5079be; -} -.chroma .bp, -.chroma .cp, -.chroma .ne, -.chroma .nd, -.chroma .se { - color: #3a8b84; -} -/* primary buttons */ -.ui.primary.button, -.ui.primary.buttons .button { - background: #6996e0; - background-color: #6996e0 !important; - color: #fafafa; -} -.ui.primary.button:hover, -.ui.primary.buttons .button:hover { - background: rgba(105, 150, 224, 0.8); - background-color: rgba(105, 150, 224, 0.8) !important; - color: #fafafa; -} -/* secondary buttons */ -.ui.green.buttons .button, -.ui.green.button { - background: #76af6f; - background-color: #76af6f; - color: #fafafa; -} -.ui.green.buttons .button:hover, -.ui.green.button:hover { - background: rgba(118, 175, 111, 0.8); - background-color: rgba(118, 175, 111, 0.8); - color: #fafafa; -} -/* text based buttons (purple) */ -.ui.labeled.button.disabled > .button, -.ui.basic.buttons .button, -.ui.basic.button { - color: #b05ccc; -} -.ui.labeled.button.disabled > .button:hover, -.ui.basic.buttons .button:hover, -.ui.basic.button:hover { - color: #b05ccc; -} -/* repo title && header */ -.repo-title { - color: #b05ccc; -} -/* star number && fork number */ -.repo-buttons button[disabled] ~ .label, -.repo-buttons .ui.labeled.button.disabled > .label { - color: #5079be; -} -.ui.basic.labels .label, -.ui.basic.label { - color: #5079be; -} -/* hover on commits, branch, tags in project home page */ -.repository .ui.segment.sub-menu .list .item a:hover, -.ui.tabular.menu .item:hover { - color: var(--color-text-hover); -} -/* commit label */ -.ui.primary.labels .label, -.ui.ui.ui.primary.label { - color: #fafafa; -} -/* issue label */ -.ui.green.labels .label, -.ui.ui.ui.green.label { - color: #fafafa; -} -/* grey button (rss feed button in repository home page) */ -i.grey.icon.icon.icon.icon { - color: #8790a0; -} -/* scroll bar */ -* { - scrollbar-color: #b05ccc transparent !important; -} -::-webkit-scrollbar { - width: 10px; - height: 10px; -} -::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 0 6px #b05ccc !important; - border: 2px solid transparent; - border-radius: 5px !important; -} -::-webkit-scrollbar-thumb:window-inactive { - box-shadow: inset 0 0 0 6px #b05ccc !important; -} -::-webkit-scrollbar-thumb:hover { - box-shadow: inset 0 0 0 6px #b05ccc !important; -} -::-webkit-scrollbar-corner { - background: transparent; -} -/* red buttons */ -.ui.red.labels .label, -.ui.ui.ui.red.label, -.ui.red.button, -.ui.red.buttons .button { - background: #e17373; - background-color: #e17373; - color: #fafafa; -} -.ui.red.labels .label:hover, -.ui.ui.ui.red.label:hover, -.ui.red.button:hover, -.ui.red.buttons .button:hover { - background: rgba(225, 115, 115, 0.8); - background-color: rgba(225, 115, 115, 0.8); - color: #fafafa; -} -/* grey buttons */ -.ui.grey.labels .label, -.ui.ui.ui.grey.label, -.ui.grey.button, -.ui.grey.buttons .button { - color: #fafafa; -} -.ui.grey.labels .label:hover, -.ui.ui.ui.grey.label:hover, -.ui.grey.button:hover, -.ui.grey.buttons .button:hover { - color: #fafafa; -} -/* orange buttons */ -.ui.orange.labels .label, -.ui.ui.ui.orange.label, -.ui.orange.button, -.ui.orange.buttons .button { - background: #be7e05; - background-color: #be7e05; - color: #fafafa; -} -.ui.orange.labels .label:hover, -.ui.ui.ui.orange.label:hover, -.ui.orange.button:hover, -.ui.orange.buttons .button:hover { - background: rgba(190, 126, 5, 0.8); - background-color: rgba(190, 126, 5, 0.8); - color: #fafafa; -} diff --git a/web_src/css/themes/theme-enterprise-auto.css b/web_src/css/themes/theme-enterprise-auto.css index dc1ad357f1346..b61dd70d57d73 100644 --- a/web_src/css/themes/theme-enterprise-auto.css +++ b/web_src/css/themes/theme-enterprise-auto.css @@ -10,13 +10,13 @@ --color-primary-dark-5: #edcf9e; --color-primary-dark-6: #e9dac2; --color-primary-dark-7: #e5e5e5; - --color-primary-light-1: #efa62f; - --color-primary-light-2: #e2a84c; - --color-primary-light-3: #d6ab6a; - --color-primary-light-4: #c9ae88; - --color-primary-light-4: #bcb1a5; - --color-primary-light-6: #afb3c3; - --color-primary-light-7: #a2b6e1; + --color-primary-light-1: #dc921b; + --color-primary-light-2: #bc8124; + --color-primary-light-3: #9c712e; + --color-primary-light-4: #7c6037; + --color-primary-light-4: #5c4f41; + --color-primary-light-6: #3c3e4a; + --color-primary-light-7: #1c2d54; --color-primary-alpha-10: rgba(252, 163, 17, 0.1); --color-primary-alpha-20: rgba(252, 163, 17, 0.2); --color-primary-alpha-30: rgba(252, 163, 17, 0.3); @@ -40,10 +40,10 @@ --color-secondary-dark-11: #c5c7cb; --color-secondary-dark-12: #d5d6d8; --color-secondary-dark-13: #e5e5e5; - --color-secondary-light-1: #2d4b8a; - --color-secondary-light-2: #567ac7; - --color-secondary-light-3: #a2b6e1; - --color-secondary-light-4: #eff3fa; + --color-secondary-light-1: #172545; + --color-secondary-light-2: #19294c; + --color-secondary-light-3: #1c2d54; + --color-secondary-light-4: #1e325c; --color-secondary-alpha-10: rgba(20, 33, 61, 0.1); --color-secondary-alpha-20: rgba(20, 33, 61, 0.2); --color-secondary-alpha-30: rgba(20, 33, 61, 0.3); @@ -82,7 +82,7 @@ /* other colors */ --color-black: #000000; --color-gold: #ff9800; - --color-white: #ffffff; + --color-white: #000000; --color-diff-removed-word-bg: #fcb9b7; --color-diff-added-word-bg: #b9e0bb; --color-diff-removed-row-bg: #ffebee; @@ -91,7 +91,7 @@ --color-diff-removed-row-border: #fa9792; --color-diff-moved-row-border: #82c4f8; --color-diff-added-row-border: #9ad29d; - --color-diff-inactive: #a2b6e1; + --color-diff-inactive: #1c2d54; --color-error-border: #fa9792; --color-error-bg: #ffebee; --color-error-text: #f44336; @@ -105,43 +105,43 @@ --color-info-bg: #e3f2fd; --color-info-text: #2196f3; /* target-based colors */ - --color-body: #ffffff; - --color-box-header: #567ac7; - --color-box-body: #a2b6e1; - --color-box-body-highlight: #eff3fa; + --color-body: #000000; + --color-box-header: #19294c; + --color-box-body: #14213d; + --color-box-body-highlight: #1e325c; --color-text: #e5e5e5; - --color-text-dark: #0d1b2a; - --color-text-light: #555555; - --color-text-light-1: #6a6a6a; - --color-text-light-2: #808080; - --color-text-light-3: #a0a0a0; - --color-footer: #a2b6e1; - --color-timeline: #2d4b8a; + --color-text-dark: #f2f2f2; + --color-text-light: #cccccc; + --color-text-light-1: #b2b2b2; + --color-text-light-2: #999999; + --color-text-light-3: #7f7f7f; + --color-footer: #1c2d54; + --color-timeline: #172545; --color-input-text: #e5e5e5; - --color-input-background: #ffffff; - --color-input-toggle-background: #a2b6e1; + --color-input-background: #000000; + --color-input-toggle-background: #1c2d54; --color-input-border: #14213d; --color-input-border-hover: var(--color-secondary-dark-1); - --color-navbar: #a2b6e1; - --color-navbar-transparent: rgba(162, 182, 225, 0.1); - --color-light: #a2b6e1; + --color-navbar: #14213d; + --color-navbar-transparent: rgba(28, 45, 84, 0.1); + --color-light: #1c2d54; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #2d4b8a; - --color-hover: rgba(45, 75, 138, 0.5); - --color-active: rgba(45, 75, 138, 0.5); - --color-menu: #ffffff; - --color-card: #ffffff; - --color-markup-table-row: #567ac7; + --color-light-border: #172545; + --color-hover: rgba(23, 37, 69, 0.5); + --color-active: rgba(23, 37, 69, 0.5); + --color-menu: #000000; + --color-card: #000000; + --color-markup-table-row: #19294c; --color-markup-code-block: #00000010; - --color-button: #567ac7; - --color-code-bg: #ffffff; + --color-button: #19294c; + --color-code-bg: #000000; --color-code-sidebar-bg: #f5f5f5; --color-shadow: #00000060; - --color-secondary-bg: #a2b6e1; + --color-secondary-bg: #1c2d54; --color-text-focus: #fff; - --color-expand-button: #a2b6e1; + --color-expand-button: #1c2d54; --color-placeholder-text: #9e9e9e; - --color-editor-line-highlight: #a2b6e1; + --color-editor-line-highlight: #1c2d54; --color-project-board-bg: #ffffff; --color-project-board-light-label: #a6aab5; --color-caret: var(--color-text); @@ -149,9 +149,9 @@ --color-reaction-bg: #ffffff12; --color-reaction-active-bg: var(--color-primary-alpha-40); --color-tooltip-bg: #000000f0; - --color-tooltip-text: #ffffff; - --color-header-bar: #ffffff; - --color-label-active-bg: #2d4b8a; + --color-tooltip-text: #000000; + --color-header-bar: #000000; + --color-label-active-bg: #172545; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #fffbdd; @@ -234,13 +234,13 @@ --color-primary-dark-5: #20446e; --color-primary-dark-6: #19395e; --color-primary-dark-7: #112D4E; - --color-primary-light-1: #5a86ba; - --color-primary-light-2: #769ac6; - --color-primary-light-3: #91aed1; - --color-primary-light-4: #adc3dd; - --color-primary-light-4: #c8d7e8; - --color-primary-light-6: #e4ebf4; - --color-primary-light-7: #ffffff; + --color-primary-light-1: #5884b9; + --color-primary-light-2: #7297c4; + --color-primary-light-3: #8ba9ce; + --color-primary-light-4: #a4bcd9; + --color-primary-light-4: #becee3; + --color-primary-light-6: #d7e1ee; + --color-primary-light-7: #f0f3f8; --color-primary-alpha-10: rgba(63, 114, 175, 0.1); --color-primary-alpha-20: rgba(63, 114, 175, 0.2); --color-primary-alpha-30: rgba(63, 114, 175, 0.3); @@ -264,10 +264,10 @@ --color-secondary-dark-11: #304967; --color-secondary-dark-12: #213b5a; --color-secondary-dark-13: #112D4E; - --color-secondary-light-1: #ffffff; - --color-secondary-light-2: #ffffff; - --color-secondary-light-3: #ffffff; - --color-secondary-light-4: #ffffff; + --color-secondary-light-1: #e2e8f2; + --color-secondary-light-2: #e9edf5; + --color-secondary-light-3: #f0f3f8; + --color-secondary-light-4: #f7f9fc; --color-secondary-alpha-10: rgba(219, 226, 239, 0.1); --color-secondary-alpha-20: rgba(219, 226, 239, 0.2); --color-secondary-alpha-30: rgba(219, 226, 239, 0.3); @@ -315,7 +315,7 @@ --color-diff-removed-row-border: #fa9792; --color-diff-moved-row-border: #82c4f8; --color-diff-added-row-border: #9ad29d; - --color-diff-inactive: #ffffff; + --color-diff-inactive: #f0f3f8; --color-error-border: #fa9792; --color-error-bg: #ffebee; --color-error-text: #f44336; @@ -330,42 +330,42 @@ --color-info-text: #2196f3; /* target-based colors */ --color-body: #ffffff; - --color-box-header: #ffffff; - --color-box-body: #ffffff; - --color-box-body-highlight: #ffffff; - --color-text: #112D4E; - --color-text-dark: #0d1b2a; - --color-text-light: #555555; - --color-text-light-1: #6a6a6a; - --color-text-light-2: #808080; - --color-text-light-3: #a0a0a0; - --color-footer: #ffffff; - --color-timeline: #ffffff; - --color-input-text: #112D4E; + --color-box-header: #e9edf5; + --color-box-body: #f0f3f8; + --color-box-body-highlight: #f7f9fc; + --color-text: #212121; + --color-text-dark: #141414; + --color-text-light: #545454; + --color-text-light-1: #7a7a7a; + --color-text-light-2: #a1a1a1; + --color-text-light-3: #c7c7c7; + --color-footer: #f0f3f8; + --color-timeline: #e2e8f2; + --color-input-text: #212121; --color-input-background: #ffffff; - --color-input-toggle-background: #ffffff; + --color-input-toggle-background: #f0f3f8; --color-input-border: #DBE2EF; --color-input-border-hover: var(--color-secondary-dark-1); - --color-navbar: #ffffff; - --color-navbar-transparent: rgba(255, 255, 255, 0.1); - --color-light: #ffffff; + --color-navbar: #f0f3f8; + --color-navbar-transparent: rgba(240, 243, 248, 0.1); + --color-light: #f7f9fc; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #ffffff; - --color-hover: rgba(255, 255, 255, 0.5); - --color-active: rgba(255, 255, 255, 0.5); + --color-light-border: #e2e8f2; + --color-hover: rgba(226, 232, 242, 0.5); + --color-active: rgba(226, 232, 242, 0.5); --color-menu: #ffffff; --color-card: #ffffff; - --color-markup-table-row: #ffffff; + --color-markup-table-row: #e9edf5; --color-markup-code-block: #00000010; - --color-button: #ffffff; + --color-button: #e9edf5; --color-code-bg: #ffffff; --color-code-sidebar-bg: #f5f5f5; --color-shadow: #00000060; - --color-secondary-bg: #ffffff; + --color-secondary-bg: #f0f3f8; --color-text-focus: #fff; - --color-expand-button: #ffffff; + --color-expand-button: #f0f3f8; --color-placeholder-text: #9e9e9e; - --color-editor-line-highlight: #ffffff; + --color-editor-line-highlight: #f0f3f8; --color-project-board-bg: #ffffff; --color-project-board-light-label: #a6aab5; --color-caret: var(--color-text); @@ -375,75 +375,11 @@ --color-tooltip-bg: #000000f0; --color-tooltip-text: #ffffff; --color-header-bar: #ffffff; - --color-label-active-bg: #ffffff; + --color-label-active-bg: #e2e8f2; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #fffbdd; accent-color: var(--color-accent); color-scheme: light; } - .chroma .nx { - color: #112D4E; - } - .chroma .c, - .chroma .c1, - .chroma .ch, - .chroma .cm, - .chroma .sd { - color: #9e9e9e; - } - .chroma .k, - .chroma .kc, - .chroma .kd, - .chroma .kn, - .chroma .kp, - .chroma .kr { - color: #f44336; - } - .chroma .o, - .chroma .ow { - color: #ff9800; - } - .chroma .s, - .chroma .s1, - .chroma .s2, - .chroma .sa, - .chroma .sb, - .chroma .sc, - .chroma .sh, - .chroma .si, - .chroma .sr, - .chroma .ss, - .chroma .sx, - .chroma .nt, - .chroma .cpf { - color: #00bcd4; - } - .chroma .m, - .chroma .mb, - .chroma .mf, - .chroma .mh, - .chroma .mi, - .chroma .mo, - .chroma .nl { - color: #9c27b0; - } - .chroma .kt, - .chroma .nc, - .chroma .nn, - .chroma .nv { - color: #ffeb3b; - } - .chroma .nf, - .chroma .nb, - .chroma .na { - color: #4caf50; - } - .chroma .bp, - .chroma .cp, - .chroma .ne, - .chroma .nd, - .chroma .se { - color: #2196f3; - } } diff --git a/web_src/css/themes/theme-enterprise-dark.css b/web_src/css/themes/theme-enterprise-dark.css index 13fbd31b6c4b5..1ab3c6354a61a 100644 --- a/web_src/css/themes/theme-enterprise-dark.css +++ b/web_src/css/themes/theme-enterprise-dark.css @@ -9,13 +9,13 @@ --color-primary-dark-5: #edcf9e; --color-primary-dark-6: #e9dac2; --color-primary-dark-7: #e5e5e5; - --color-primary-light-1: #efa62f; - --color-primary-light-2: #e2a84c; - --color-primary-light-3: #d6ab6a; - --color-primary-light-4: #c9ae88; - --color-primary-light-4: #bcb1a5; - --color-primary-light-6: #afb3c3; - --color-primary-light-7: #a2b6e1; + --color-primary-light-1: #dc921b; + --color-primary-light-2: #bc8124; + --color-primary-light-3: #9c712e; + --color-primary-light-4: #7c6037; + --color-primary-light-4: #5c4f41; + --color-primary-light-6: #3c3e4a; + --color-primary-light-7: #1c2d54; --color-primary-alpha-10: rgba(252, 163, 17, 0.1); --color-primary-alpha-20: rgba(252, 163, 17, 0.2); --color-primary-alpha-30: rgba(252, 163, 17, 0.3); @@ -39,10 +39,10 @@ --color-secondary-dark-11: #c5c7cb; --color-secondary-dark-12: #d5d6d8; --color-secondary-dark-13: #e5e5e5; - --color-secondary-light-1: #2d4b8a; - --color-secondary-light-2: #567ac7; - --color-secondary-light-3: #a2b6e1; - --color-secondary-light-4: #eff3fa; + --color-secondary-light-1: #172545; + --color-secondary-light-2: #19294c; + --color-secondary-light-3: #1c2d54; + --color-secondary-light-4: #1e325c; --color-secondary-alpha-10: rgba(20, 33, 61, 0.1); --color-secondary-alpha-20: rgba(20, 33, 61, 0.2); --color-secondary-alpha-30: rgba(20, 33, 61, 0.3); @@ -81,7 +81,7 @@ /* other colors */ --color-black: #000000; --color-gold: #ff9800; - --color-white: #ffffff; + --color-white: #000000; --color-diff-removed-word-bg: #fcb9b7; --color-diff-added-word-bg: #b9e0bb; --color-diff-removed-row-bg: #ffebee; @@ -90,7 +90,7 @@ --color-diff-removed-row-border: #fa9792; --color-diff-moved-row-border: #82c4f8; --color-diff-added-row-border: #9ad29d; - --color-diff-inactive: #a2b6e1; + --color-diff-inactive: #1c2d54; --color-error-border: #fa9792; --color-error-bg: #ffebee; --color-error-text: #f44336; @@ -104,43 +104,43 @@ --color-info-bg: #e3f2fd; --color-info-text: #2196f3; /* target-based colors */ - --color-body: #ffffff; - --color-box-header: #567ac7; - --color-box-body: #a2b6e1; - --color-box-body-highlight: #eff3fa; + --color-body: #000000; + --color-box-header: #19294c; + --color-box-body: #14213d; + --color-box-body-highlight: #1e325c; --color-text: #e5e5e5; - --color-text-dark: #0d1b2a; - --color-text-light: #555555; - --color-text-light-1: #6a6a6a; - --color-text-light-2: #808080; - --color-text-light-3: #a0a0a0; - --color-footer: #a2b6e1; - --color-timeline: #2d4b8a; + --color-text-dark: #f2f2f2; + --color-text-light: #cccccc; + --color-text-light-1: #b2b2b2; + --color-text-light-2: #999999; + --color-text-light-3: #7f7f7f; + --color-footer: #1c2d54; + --color-timeline: #172545; --color-input-text: #e5e5e5; - --color-input-background: #ffffff; - --color-input-toggle-background: #a2b6e1; + --color-input-background: #000000; + --color-input-toggle-background: #1c2d54; --color-input-border: #14213d; --color-input-border-hover: var(--color-secondary-dark-1); - --color-navbar: #a2b6e1; - --color-navbar-transparent: rgba(162, 182, 225, 0.1); - --color-light: #a2b6e1; + --color-navbar: #14213d; + --color-navbar-transparent: rgba(28, 45, 84, 0.1); + --color-light: #1c2d54; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #2d4b8a; - --color-hover: rgba(45, 75, 138, 0.5); - --color-active: rgba(45, 75, 138, 0.5); - --color-menu: #ffffff; - --color-card: #ffffff; - --color-markup-table-row: #567ac7; + --color-light-border: #172545; + --color-hover: rgba(23, 37, 69, 0.5); + --color-active: rgba(23, 37, 69, 0.5); + --color-menu: #000000; + --color-card: #000000; + --color-markup-table-row: #19294c; --color-markup-code-block: #00000010; - --color-button: #567ac7; - --color-code-bg: #ffffff; + --color-button: #19294c; + --color-code-bg: #000000; --color-code-sidebar-bg: #f5f5f5; --color-shadow: #00000060; - --color-secondary-bg: #a2b6e1; + --color-secondary-bg: #1c2d54; --color-text-focus: #fff; - --color-expand-button: #a2b6e1; + --color-expand-button: #1c2d54; --color-placeholder-text: #9e9e9e; - --color-editor-line-highlight: #a2b6e1; + --color-editor-line-highlight: #1c2d54; --color-project-board-bg: #ffffff; --color-project-board-light-label: #a6aab5; --color-caret: var(--color-text); @@ -148,9 +148,9 @@ --color-reaction-bg: #ffffff12; --color-reaction-active-bg: var(--color-primary-alpha-40); --color-tooltip-bg: #000000f0; - --color-tooltip-text: #ffffff; - --color-header-bar: #ffffff; - --color-label-active-bg: #2d4b8a; + --color-tooltip-text: #000000; + --color-header-bar: #000000; + --color-label-active-bg: #172545; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #fffbdd; diff --git a/web_src/css/themes/theme-enterprise-light.css b/web_src/css/themes/theme-enterprise-light.css index 769ee62d1c5a6..b1775b4ab2d17 100644 --- a/web_src/css/themes/theme-enterprise-light.css +++ b/web_src/css/themes/theme-enterprise-light.css @@ -8,13 +8,13 @@ --color-primary-dark-5: #20446e; --color-primary-dark-6: #19395e; --color-primary-dark-7: #112D4E; - --color-primary-light-1: #5a86ba; - --color-primary-light-2: #769ac6; - --color-primary-light-3: #91aed1; - --color-primary-light-4: #adc3dd; - --color-primary-light-4: #c8d7e8; - --color-primary-light-6: #e4ebf4; - --color-primary-light-7: #ffffff; + --color-primary-light-1: #5884b9; + --color-primary-light-2: #7297c4; + --color-primary-light-3: #8ba9ce; + --color-primary-light-4: #a4bcd9; + --color-primary-light-4: #becee3; + --color-primary-light-6: #d7e1ee; + --color-primary-light-7: #f0f3f8; --color-primary-alpha-10: rgba(63, 114, 175, 0.1); --color-primary-alpha-20: rgba(63, 114, 175, 0.2); --color-primary-alpha-30: rgba(63, 114, 175, 0.3); @@ -38,10 +38,10 @@ --color-secondary-dark-11: #304967; --color-secondary-dark-12: #213b5a; --color-secondary-dark-13: #112D4E; - --color-secondary-light-1: #ffffff; - --color-secondary-light-2: #ffffff; - --color-secondary-light-3: #ffffff; - --color-secondary-light-4: #ffffff; + --color-secondary-light-1: #e2e8f2; + --color-secondary-light-2: #e9edf5; + --color-secondary-light-3: #f0f3f8; + --color-secondary-light-4: #f7f9fc; --color-secondary-alpha-10: rgba(219, 226, 239, 0.1); --color-secondary-alpha-20: rgba(219, 226, 239, 0.2); --color-secondary-alpha-30: rgba(219, 226, 239, 0.3); @@ -89,7 +89,7 @@ --color-diff-removed-row-border: #fa9792; --color-diff-moved-row-border: #82c4f8; --color-diff-added-row-border: #9ad29d; - --color-diff-inactive: #ffffff; + --color-diff-inactive: #f0f3f8; --color-error-border: #fa9792; --color-error-bg: #ffebee; --color-error-text: #f44336; @@ -104,42 +104,42 @@ --color-info-text: #2196f3; /* target-based colors */ --color-body: #ffffff; - --color-box-header: #ffffff; - --color-box-body: #ffffff; - --color-box-body-highlight: #ffffff; - --color-text: #112D4E; - --color-text-dark: #0d1b2a; - --color-text-light: #555555; - --color-text-light-1: #6a6a6a; - --color-text-light-2: #808080; - --color-text-light-3: #a0a0a0; - --color-footer: #ffffff; - --color-timeline: #ffffff; - --color-input-text: #112D4E; + --color-box-header: #e9edf5; + --color-box-body: #f0f3f8; + --color-box-body-highlight: #f7f9fc; + --color-text: #212121; + --color-text-dark: #141414; + --color-text-light: #545454; + --color-text-light-1: #7a7a7a; + --color-text-light-2: #a1a1a1; + --color-text-light-3: #c7c7c7; + --color-footer: #f0f3f8; + --color-timeline: #e2e8f2; + --color-input-text: #212121; --color-input-background: #ffffff; - --color-input-toggle-background: #ffffff; + --color-input-toggle-background: #f0f3f8; --color-input-border: #DBE2EF; --color-input-border-hover: var(--color-secondary-dark-1); - --color-navbar: #ffffff; - --color-navbar-transparent: rgba(255, 255, 255, 0.1); - --color-light: #ffffff; + --color-navbar: #f0f3f8; + --color-navbar-transparent: rgba(240, 243, 248, 0.1); + --color-light: #f7f9fc; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #ffffff; - --color-hover: rgba(255, 255, 255, 0.5); - --color-active: rgba(255, 255, 255, 0.5); + --color-light-border: #e2e8f2; + --color-hover: rgba(226, 232, 242, 0.5); + --color-active: rgba(226, 232, 242, 0.5); --color-menu: #ffffff; --color-card: #ffffff; - --color-markup-table-row: #ffffff; + --color-markup-table-row: #e9edf5; --color-markup-code-block: #00000010; - --color-button: #ffffff; + --color-button: #e9edf5; --color-code-bg: #ffffff; --color-code-sidebar-bg: #f5f5f5; --color-shadow: #00000060; - --color-secondary-bg: #ffffff; + --color-secondary-bg: #f0f3f8; --color-text-focus: #fff; - --color-expand-button: #ffffff; + --color-expand-button: #f0f3f8; --color-placeholder-text: #9e9e9e; - --color-editor-line-highlight: #ffffff; + --color-editor-line-highlight: #f0f3f8; --color-project-board-bg: #ffffff; --color-project-board-light-label: #a6aab5; --color-caret: var(--color-text); @@ -149,7 +149,7 @@ --color-tooltip-bg: #000000f0; --color-tooltip-text: #ffffff; --color-header-bar: #ffffff; - --color-label-active-bg: #ffffff; + --color-label-active-bg: #e2e8f2; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-active-line: #fffbdd; @@ -191,7 +191,7 @@ .chroma .sx, .chroma .nt, .chroma .cpf { - color: #00bcd4; + color: #2196f3; } .chroma .m, .chroma .mb, diff --git a/web_src/css/themes/theme-gruvbox-material-auto.css b/web_src/css/themes/theme-gruvbox-material-auto.css deleted file mode 100644 index 7c2ad8a3734b1..0000000000000 --- a/web_src/css/themes/theme-gruvbox-material-auto.css +++ /dev/null @@ -1,724 +0,0 @@ -@media (prefers-color-scheme: dark) { - :root { - --is-dark-theme: true; - --color-primary: #a9b665; - --color-primary-contrast: #282828; - --color-primary-dark-1: #a9b665; - --color-primary-dark-2: #b2b96f; - --color-primary-dark-3: #babc79; - --color-primary-dark-4: #c3bf83; - --color-primary-dark-5: #ccc18d; - --color-primary-dark-6: #d4c497; - --color-primary-dark-7: #ddc7a1; - --color-primary-light-1: #a9b665; - --color-primary-light-2: #96a15d; - --color-primary-light-3: #848c55; - --color-primary-light-4: #72774d; - --color-primary-light-5: #5f6145; - --color-primary-light-6: #4d4c3d; - --color-primary-light-7: #3a3735; - --color-primary-alpha-10: rgba(169, 182, 101, 0.1); - --color-primary-alpha-20: rgba(169, 182, 101, 0.2); - --color-primary-alpha-30: rgba(169, 182, 101, 0.3); - --color-primary-alpha-40: rgba(169, 182, 101, 0.4); - --color-primary-alpha-50: rgba(169, 182, 101, 0.5); - --color-primary-alpha-60: rgba(169, 182, 101, 0.6); - --color-primary-alpha-70: rgba(169, 182, 101, 0.7); - --color-primary-alpha-80: rgba(169, 182, 101, 0.8); - --color-primary-alpha-90: rgba(169, 182, 101, 0.9); - --color-secondary: #504945; - --color-secondary-dark-1: #504945; - --color-secondary-dark-2: #5c534d; - --color-secondary-dark-3: #685e54; - --color-secondary-dark-4: #73695c; - --color-secondary-dark-5: #7f7364; - --color-secondary-dark-6: #8b7e6b; - --color-secondary-dark-7: #978873; - --color-secondary-dark-8: #a2927b; - --color-secondary-dark-9: #ae9d82; - --color-secondary-dark-10: #baa88a; - --color-secondary-dark-11: #c5b292; - --color-secondary-dark-12: #d1bd99; - --color-secondary-dark-13: #ddc7a1; - --color-secondary-light-1: #504945; - --color-secondary-light-2: #45403d; - --color-secondary-light-3: #3a3735; - --color-secondary-light-4: #32302f; - --color-secondary-alpha-10: rgba(80, 73, 69, 0.1); - --color-secondary-alpha-20: rgba(80, 73, 69, 0.2); - --color-secondary-alpha-30: rgba(80, 73, 69, 0.3); - --color-secondary-alpha-40: rgba(80, 73, 69, 0.4); - --color-secondary-alpha-50: rgba(80, 73, 69, 0.5); - --color-secondary-alpha-60: rgba(80, 73, 69, 0.6); - --color-secondary-alpha-70: rgba(80, 73, 69, 0.7); - --color-secondary-alpha-80: rgba(80, 73, 69, 0.8); - --color-secondary-alpha-90: rgba(80, 73, 69, 0.9); - /* colors */ - --color-red: #ea6962; - --color-orange: #e78a4e; - --color-yellow: #d8a657; - --color-olive: #a9b665; - --color-green: #a9b665; - --color-teal: #89b482; - --color-blue: #7daea3; - --color-violet: #d3869b; - --color-purple: #d3869b; - --color-pink: #d3869b; - --color-brown: #e78a4e; - --color-grey: #928374; - /* light variants */ - --color-red-light: #ea6962; - --color-orange-light: #e78a4e; - --color-yellow-light: #d8a657; - --color-olive-light: #a9b665; - --color-green-light: #a9b665; - --color-teal-light: #89b482; - --color-blue-light: #7daea3; - --color-violet-light: #d3869b; - --color-purple-light: #d3869b; - --color-pink-light: #d3869b; - --color-brown-light: #e78a4e; - --color-grey-light: #928374; - /* other colors */ - --color-black: #3a3735; - --color-gold: #e78a4e; - --color-white: #282828; - --color-diff-removed-word-bg: #7b4440; - --color-diff-added-word-bg: #5c6646; - --color-diff-removed-row-bg: #4c3432; - --color-diff-moved-row-bg: #374141; - --color-diff-added-row-bg: #3b4439; - --color-diff-removed-row-border: #9b4f4a; - --color-diff-moved-row-border: #5a7872; - --color-diff-added-row-border: #727d4f; - --color-diff-inactive: #3a3735; - --color-error-border: #9b4f4a; - --color-error-bg: #4c3432; - --color-error-text: #ea6962; - --color-success-border: #727d4f; - --color-success-bg: #3b4439; - --color-success-text: #a9b665; - --color-warning-border: #947443; - --color-warning-bg: #4f422e; - --color-warning-text: #d8a657; - --color-info-border: #5a7872; - --color-info-bg: #374141; - --color-info-text: #7daea3; - /* target-based colors */ - --color-body: #282828; - --color-box-header: #45403d; - --color-box-body: #32302f; - --color-box-body-highlight: #3a3735; - --color-text-dark: #e78a4e; - --color-text: #ddc7a1; - --color-text-hover: rgba(221, 199, 161, 0.8); - --color-text-light: #d8a657; - --color-text-light-1: #928374; - --color-text-light-2: #ddc7a1; - --color-text-light-3: #928374; - --color-footer: #32302f; - --color-timeline: #504945; - --color-input-text: #ddc7a1; - --color-input-background: #282828; - --color-input-toggle-background: #32302f; - --color-input-border: #504945; - --color-input-border-hover: #71665d; - --color-navbar: #32302f; - --color-navbar-transparent: #32302f; - --color-light: #32302f; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #504945; - --color-hover: rgba(80, 73, 69, 0.5); - --color-active: rgba(80, 73, 69, 0.5); - --color-menu: #32302f; - --color-card: #32302f; - --color-markup-table-row: #45403d; - --color-markup-code-block: #282828; - --color-button: #45403d; - --color-code-bg: #282828; - --color-code-sidebar-bg: #32302f; - --color-shadow: #00000060; - --color-secondary-bg: #32302f; - --color-text-focus: #fff; - --color-expand-button: #3a3735; - --color-placeholder-text: #928374; - --color-editor-line-highlight: #32302f; - --color-project-board-bg: #282828; - --color-project-board-light-label: #a9b665; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-header-bar: #32302f; - --color-label-active-bg: #504945; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #32302f; - accent-color: var(--color-accent); - color-scheme: dark; - } - .chroma .nx { - color: #ddc7a1; - } - .chroma .c, - .chroma .c1, - .chroma .ch, - .chroma .cm, - .chroma .sd { - color: #928374; - } - .chroma .k, - .chroma .kc, - .chroma .kd, - .chroma .kn, - .chroma .kp, - .chroma .kr { - color: #ea6962; - } - .chroma .o, - .chroma .ow { - color: #e78a4e; - } - .chroma .s, - .chroma .s1, - .chroma .s2, - .chroma .sa, - .chroma .sb, - .chroma .sc, - .chroma .sh, - .chroma .si, - .chroma .sr, - .chroma .ss, - .chroma .sx, - .chroma .nt, - .chroma .cpf { - color: #89b482; - } - .chroma .m, - .chroma .mb, - .chroma .mf, - .chroma .mh, - .chroma .mi, - .chroma .mo, - .chroma .nl { - color: #d3869b; - } - .chroma .kt, - .chroma .nc, - .chroma .nn, - .chroma .nv { - color: #d8a657; - } - .chroma .nf, - .chroma .nb, - .chroma .na { - color: #a9b665; - } - .chroma .bp, - .chroma .cp, - .chroma .ne, - .chroma .nd, - .chroma .se { - color: #7daea3; - } - /* primary buttons */ - .ui.primary.button, - .ui.primary.buttons .button { - background: #a9b665; - background-color: #a9b665 !important; - color: #282828; - } - .ui.primary.button:hover, - .ui.primary.buttons .button:hover { - background: rgba(169, 182, 101, 0.8); - background-color: rgba(169, 182, 101, 0.8) !important; - color: #282828; - } - /* secondary buttons */ - .ui.green.buttons .button, - .ui.green.button { - background: #a89984; - background-color: #a89984; - color: #282828; - } - .ui.green.buttons .button:hover, - .ui.green.button:hover { - background: rgba(168, 153, 132, 0.8); - background-color: rgba(168, 153, 132, 0.8); - color: #282828; - } - /* text based buttons (purple) */ - .ui.labeled.button.disabled > .button, - .ui.basic.buttons .button, - .ui.basic.button { - color: #e78a4e; - } - .ui.labeled.button.disabled > .button:hover, - .ui.basic.buttons .button:hover, - .ui.basic.button:hover { - color: #e78a4e; - } - /* repo title && header */ - .repo-title { - color: #e78a4e; - } - /* star number && fork number */ - .repo-buttons button[disabled] ~ .label, - .repo-buttons .ui.labeled.button.disabled > .label { - color: #a9b665; - } - .ui.basic.labels .label, - .ui.basic.label { - color: #a9b665; - } - /* hover on commits, branch, tags in project home page */ - .repository .ui.segment.sub-menu .list .item a:hover, - .ui.tabular.menu .item:hover { - color: var(--color-text-hover); - } - /* commit label */ - .ui.primary.labels .label, - .ui.ui.ui.primary.label { - color: #282828; - } - /* issue label */ - .ui.green.labels .label, - .ui.ui.ui.green.label { - color: #282828; - } - /* grey button (rss feed button in repository home page) */ - i.grey.icon.icon.icon.icon { - color: #928374; - } - /* scroll bar */ - * { - scrollbar-color: #e78a4e transparent !important; - } - ::-webkit-scrollbar { - width: 10px; - height: 10px; - } - ::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 0 6px #e78a4e !important; - border: 2px solid transparent; - border-radius: 5px !important; - } - ::-webkit-scrollbar-thumb:window-inactive { - box-shadow: inset 0 0 0 6px #e78a4e !important; - } - ::-webkit-scrollbar-thumb:hover { - box-shadow: inset 0 0 0 6px #e78a4e !important; - } - ::-webkit-scrollbar-corner { - background: transparent; - } - /* red buttons */ - .ui.red.labels .label, - .ui.ui.ui.red.label, - .ui.red.button, - .ui.red.buttons .button { - background: #ea6962; - background-color: #ea6962; - color: #282828; - } - .ui.red.labels .label:hover, - .ui.ui.ui.red.label:hover, - .ui.red.button:hover, - .ui.red.buttons .button:hover { - background: rgba(234, 105, 98, 0.8); - background-color: rgba(234, 105, 98, 0.8); - color: #282828; - } - /* grey buttons */ - .ui.grey.labels .label, - .ui.ui.ui.grey.label, - .ui.grey.button, - .ui.grey.buttons .button { - color: #282828; - } - .ui.grey.labels .label:hover, - .ui.ui.ui.grey.label:hover, - .ui.grey.button:hover, - .ui.grey.buttons .button:hover { - color: #282828; - } - /* orange buttons */ - .ui.orange.labels .label, - .ui.ui.ui.orange.label, - .ui.orange.button, - .ui.orange.buttons .button { - background: #e78a4e; - background-color: #e78a4e; - color: #282828; - } - .ui.orange.labels .label:hover, - .ui.ui.ui.orange.label:hover, - .ui.orange.button:hover, - .ui.orange.buttons .button:hover { - background: rgba(231, 138, 78, 0.8); - background-color: rgba(231, 138, 78, 0.8); - color: #282828; - } -} -@media (prefers-color-scheme: light) { - :root { - --is-dark-theme: true; - --color-primary: #6c782e; - --color-primary-contrast: #fbf1c7; - --color-primary-dark-1: #6c782e; - --color-primary-dark-2: #6b702f; - --color-primary-dark-3: #6a6830; - --color-primary-dark-4: #696032; - --color-primary-dark-5: #675733; - --color-primary-dark-6: #664f34; - --color-primary-dark-7: #654735; - --color-primary-light-1: #6c782e; - --color-primary-light-2: #828a46; - --color-primary-light-3: #999c5d; - --color-primary-light-4: #afaf75; - --color-primary-light-5: #c5c18d; - --color-primary-light-6: #dcd3a4; - --color-primary-light-7: #f2e5bc; - --color-primary-alpha-10: rgba(108, 120, 46, 0.1); - --color-primary-alpha-20: rgba(108, 120, 46, 0.2); - --color-primary-alpha-30: rgba(108, 120, 46, 0.3); - --color-primary-alpha-40: rgba(108, 120, 46, 0.4); - --color-primary-alpha-50: rgba(108, 120, 46, 0.5); - --color-primary-alpha-60: rgba(108, 120, 46, 0.6); - --color-primary-alpha-70: rgba(108, 120, 46, 0.7); - --color-primary-alpha-80: rgba(108, 120, 46, 0.8); - --color-primary-alpha-90: rgba(108, 120, 46, 0.9); - --color-secondary: #e5d5ad; - --color-secondary-dark-1: #e5d5ad; - --color-secondary-dark-2: #dac9a3; - --color-secondary-dark-3: #d0bd99; - --color-secondary-dark-4: #c5b28f; - --color-secondary-dark-5: #baa685; - --color-secondary-dark-6: #b09a7b; - --color-secondary-dark-7: #a58e71; - --color-secondary-dark-8: #9a8267; - --color-secondary-dark-9: #90765d; - --color-secondary-dark-10: #856b53; - --color-secondary-dark-11: #7a5f49; - --color-secondary-dark-12: #70533f; - --color-secondary-dark-13: #654735; - --color-secondary-light-1: #e5d5ad; - --color-secondary-light-2: #eee0b7; - --color-secondary-light-3: #f2e5bc; - --color-secondary-light-4: #f4e8be; - --color-secondary-alpha-10: rgba(229, 213, 173, 0.1); - --color-secondary-alpha-20: rgba(229, 213, 173, 0.2); - --color-secondary-alpha-30: rgba(229, 213, 173, 0.3); - --color-secondary-alpha-40: rgba(229, 213, 173, 0.4); - --color-secondary-alpha-50: rgba(229, 213, 173, 0.5); - --color-secondary-alpha-60: rgba(229, 213, 173, 0.6); - --color-secondary-alpha-70: rgba(229, 213, 173, 0.7); - --color-secondary-alpha-80: rgba(229, 213, 173, 0.8); - --color-secondary-alpha-90: rgba(229, 213, 173, 0.9); - /* colors */ - --color-red: #c14a4a; - --color-orange: #c35e0a; - --color-yellow: #b47109; - --color-olive: #6c782e; - --color-green: #6c782e; - --color-teal: #4c7a5d; - --color-blue: #45707a; - --color-violet: #945e80; - --color-purple: #945e80; - --color-pink: #945e80; - --color-brown: #c35e0a; - --color-grey: #928374; - /* light variants */ - --color-red-light: #c14a4a; - --color-orange-light: #c35e0a; - --color-yellow-light: #b47109; - --color-olive-light: #6c782e; - --color-green-light: #6c782e; - --color-teal-light: #4c7a5d; - --color-blue-light: #45707a; - --color-violet-light: #945e80; - --color-purple-light: #945e80; - --color-pink-light: #945e80; - --color-brown-light: #c35e0a; - --color-grey-light: #928374; - /* other colors */ - --color-black: #f2e5bc; - --color-gold: #c35e0a; - --color-white: #fbf1c7; - --color-diff-removed-word-bg: #e3ae95; - --color-diff-added-word-bg: #bcc28d; - --color-diff-removed-row-bg: #f1d9b5; - --color-diff-moved-row-bg: #dadec0; - --color-diff-added-row-bg: #dee2b6; - --color-diff-removed-row-border: #d99280; - --color-diff-moved-row-border: #90a79d; - --color-diff-added-row-border: #a5ad72; - --color-diff-inactive: #f2e5bc; - --color-error-border: #d99280; - --color-error-bg: #f1d9b5; - --color-error-text: #c14a4a; - --color-success-border: #a5ad72; - --color-success-bg: #dee2b6; - --color-success-text: #6c782e; - --color-warning-border: #d7ac5e; - --color-warning-bg: #fae7b3; - --color-warning-text: #b47109; - --color-info-border: #90a79d; - --color-info-bg: #dadec0; - --color-info-text: #45707a; - /* target-based colors */ - --color-body: #fbf1c7; - --color-box-header: #eee0b7; - --color-box-body: #f4e8be; - --color-box-body-highlight: #f2e5bc; - --color-text-dark: #c35e0a; - --color-text: #654735; - --color-text-hover: rgba(101, 71, 53, 0.8); - --color-text-light: #b47109; - --color-text-light-1: #928374; - --color-text-light-2: #654735; - --color-text-light-3: #928374; - --color-footer: #f4e8be; - --color-timeline: #e5d5ad; - --color-input-text: #654735; - --color-input-background: #fbf1c7; - --color-input-toggle-background: #f4e8be; - --color-input-border: #e5d5ad; - --color-input-border-hover: #bcac91; - --color-navbar: #f4e8be; - --color-navbar-transparent: #f4e8be; - --color-light: #f4e8be; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #e5d5ad; - --color-hover: rgba(229, 213, 173, 0.5); - --color-active: rgba(229, 213, 173, 0.5); - --color-menu: #f4e8be; - --color-card: #f4e8be; - --color-markup-table-row: #eee0b7; - --color-markup-code-block: #fbf1c7; - --color-button: #eee0b7; - --color-code-bg: #fbf1c7; - --color-code-sidebar-bg: #f4e8be; - --color-shadow: #00000060; - --color-secondary-bg: #f4e8be; - --color-text-focus: #fff; - --color-expand-button: #f2e5bc; - --color-placeholder-text: #928374; - --color-editor-line-highlight: #f4e8be; - --color-project-board-bg: #fbf1c7; - --color-project-board-light-label: #6c782e; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-header-bar: #f4e8be; - --color-label-active-bg: #e5d5ad; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #f4e8be; - accent-color: var(--color-accent); - color-scheme: dark; - } - .chroma .nx { - color: #654735; - } - .chroma .c, - .chroma .c1, - .chroma .ch, - .chroma .cm, - .chroma .sd { - color: #928374; - } - .chroma .k, - .chroma .kc, - .chroma .kd, - .chroma .kn, - .chroma .kp, - .chroma .kr { - color: #c14a4a; - } - .chroma .o, - .chroma .ow { - color: #c35e0a; - } - .chroma .s, - .chroma .s1, - .chroma .s2, - .chroma .sa, - .chroma .sb, - .chroma .sc, - .chroma .sh, - .chroma .si, - .chroma .sr, - .chroma .ss, - .chroma .sx, - .chroma .nt, - .chroma .cpf { - color: #4c7a5d; - } - .chroma .m, - .chroma .mb, - .chroma .mf, - .chroma .mh, - .chroma .mi, - .chroma .mo, - .chroma .nl { - color: #945e80; - } - .chroma .kt, - .chroma .nc, - .chroma .nn, - .chroma .nv { - color: #b47109; - } - .chroma .nf, - .chroma .nb, - .chroma .na { - color: #6c782e; - } - .chroma .bp, - .chroma .cp, - .chroma .ne, - .chroma .nd, - .chroma .se { - color: #45707a; - } - /* primary buttons */ - .ui.primary.button, - .ui.primary.buttons .button { - background: #6f8352; - background-color: #6f8352 !important; - color: #fbf1c7; - } - .ui.primary.button:hover, - .ui.primary.buttons .button:hover { - background: rgba(111, 131, 82, 0.8); - background-color: rgba(111, 131, 82, 0.8) !important; - color: #fbf1c7; - } - /* secondary buttons */ - .ui.green.buttons .button, - .ui.green.button { - background: #7c6f64; - background-color: #7c6f64; - color: #fbf1c7; - } - .ui.green.buttons .button:hover, - .ui.green.button:hover { - background: rgba(124, 111, 100, 0.8); - background-color: rgba(124, 111, 100, 0.8); - color: #fbf1c7; - } - /* text based buttons (purple) */ - .ui.labeled.button.disabled > .button, - .ui.basic.buttons .button, - .ui.basic.button { - color: #c35e0a; - } - .ui.labeled.button.disabled > .button:hover, - .ui.basic.buttons .button:hover, - .ui.basic.button:hover { - color: #c35e0a; - } - /* repo title && header */ - .repo-title { - color: #c35e0a; - } - /* star number && fork number */ - .repo-buttons button[disabled] ~ .label, - .repo-buttons .ui.labeled.button.disabled > .label { - color: #6c782e; - } - .ui.basic.labels .label, - .ui.basic.label { - color: #6c782e; - } - /* hover on commits, branch, tags in project home page */ - .repository .ui.segment.sub-menu .list .item a:hover, - .ui.tabular.menu .item:hover { - color: var(--color-text-hover); - } - /* commit label */ - .ui.primary.labels .label, - .ui.ui.ui.primary.label { - color: #fbf1c7; - } - /* issue label */ - .ui.green.labels .label, - .ui.ui.ui.green.label { - color: #fbf1c7; - } - /* grey button (rss feed button in repository home page) */ - i.grey.icon.icon.icon.icon { - color: #928374; - } - /* scroll bar */ - * { - scrollbar-color: #c35e0a transparent !important; - } - ::-webkit-scrollbar { - width: 10px; - height: 10px; - } - ::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 0 6px #c35e0a !important; - border: 2px solid transparent; - border-radius: 5px !important; - } - ::-webkit-scrollbar-thumb:window-inactive { - box-shadow: inset 0 0 0 6px #c35e0a !important; - } - ::-webkit-scrollbar-thumb:hover { - box-shadow: inset 0 0 0 6px #c35e0a !important; - } - ::-webkit-scrollbar-corner { - background: transparent; - } - /* red buttons */ - .ui.red.labels .label, - .ui.ui.ui.red.label, - .ui.red.button, - .ui.red.buttons .button { - background: #ae5858; - background-color: #ae5858; - color: #fbf1c7; - } - .ui.red.labels .label:hover, - .ui.ui.ui.red.label:hover, - .ui.red.button:hover, - .ui.red.buttons .button:hover { - background: rgba(174, 88, 88, 0.8); - background-color: rgba(174, 88, 88, 0.8); - color: #fbf1c7; - } - /* grey buttons */ - .ui.grey.labels .label, - .ui.ui.ui.grey.label, - .ui.grey.button, - .ui.grey.buttons .button { - color: #fbf1c7; - } - .ui.grey.labels .label:hover, - .ui.ui.ui.grey.label:hover, - .ui.grey.button:hover, - .ui.grey.buttons .button:hover { - color: #fbf1c7; - } - /* orange buttons */ - .ui.orange.labels .label, - .ui.ui.ui.orange.label, - .ui.orange.button, - .ui.orange.buttons .button { - background: #c35e0a; - background-color: #c35e0a; - color: #fbf1c7; - } - .ui.orange.labels .label:hover, - .ui.ui.ui.orange.label:hover, - .ui.orange.button:hover, - .ui.orange.buttons .button:hover { - background: rgba(195, 94, 10, 0.8); - background-color: rgba(195, 94, 10, 0.8); - color: #fbf1c7; - } -} diff --git a/web_src/css/themes/theme-gruvbox-material-dark.css b/web_src/css/themes/theme-gruvbox-material-dark.css deleted file mode 100644 index a87fe68fd934a..0000000000000 --- a/web_src/css/themes/theme-gruvbox-material-dark.css +++ /dev/null @@ -1,360 +0,0 @@ -:root { - --is-dark-theme: true; - --color-primary: #a9b665; - --color-primary-contrast: #282828; - --color-primary-dark-1: #a9b665; - --color-primary-dark-2: #b2b96f; - --color-primary-dark-3: #babc79; - --color-primary-dark-4: #c3bf83; - --color-primary-dark-5: #ccc18d; - --color-primary-dark-6: #d4c497; - --color-primary-dark-7: #ddc7a1; - --color-primary-light-1: #a9b665; - --color-primary-light-2: #96a15d; - --color-primary-light-3: #848c55; - --color-primary-light-4: #72774d; - --color-primary-light-5: #5f6145; - --color-primary-light-6: #4d4c3d; - --color-primary-light-7: #3a3735; - --color-primary-alpha-10: rgba(169, 182, 101, 0.1); - --color-primary-alpha-20: rgba(169, 182, 101, 0.2); - --color-primary-alpha-30: rgba(169, 182, 101, 0.3); - --color-primary-alpha-40: rgba(169, 182, 101, 0.4); - --color-primary-alpha-50: rgba(169, 182, 101, 0.5); - --color-primary-alpha-60: rgba(169, 182, 101, 0.6); - --color-primary-alpha-70: rgba(169, 182, 101, 0.7); - --color-primary-alpha-80: rgba(169, 182, 101, 0.8); - --color-primary-alpha-90: rgba(169, 182, 101, 0.9); - --color-secondary: #504945; - --color-secondary-dark-1: #504945; - --color-secondary-dark-2: #5c534d; - --color-secondary-dark-3: #685e54; - --color-secondary-dark-4: #73695c; - --color-secondary-dark-5: #7f7364; - --color-secondary-dark-6: #8b7e6b; - --color-secondary-dark-7: #978873; - --color-secondary-dark-8: #a2927b; - --color-secondary-dark-9: #ae9d82; - --color-secondary-dark-10: #baa88a; - --color-secondary-dark-11: #c5b292; - --color-secondary-dark-12: #d1bd99; - --color-secondary-dark-13: #ddc7a1; - --color-secondary-light-1: #504945; - --color-secondary-light-2: #45403d; - --color-secondary-light-3: #3a3735; - --color-secondary-light-4: #32302f; - --color-secondary-alpha-10: rgba(80, 73, 69, 0.1); - --color-secondary-alpha-20: rgba(80, 73, 69, 0.2); - --color-secondary-alpha-30: rgba(80, 73, 69, 0.3); - --color-secondary-alpha-40: rgba(80, 73, 69, 0.4); - --color-secondary-alpha-50: rgba(80, 73, 69, 0.5); - --color-secondary-alpha-60: rgba(80, 73, 69, 0.6); - --color-secondary-alpha-70: rgba(80, 73, 69, 0.7); - --color-secondary-alpha-80: rgba(80, 73, 69, 0.8); - --color-secondary-alpha-90: rgba(80, 73, 69, 0.9); - /* colors */ - --color-red: #ea6962; - --color-orange: #e78a4e; - --color-yellow: #d8a657; - --color-olive: #a9b665; - --color-green: #a9b665; - --color-teal: #89b482; - --color-blue: #7daea3; - --color-violet: #d3869b; - --color-purple: #d3869b; - --color-pink: #d3869b; - --color-brown: #e78a4e; - --color-grey: #928374; - /* light variants */ - --color-red-light: #ea6962; - --color-orange-light: #e78a4e; - --color-yellow-light: #d8a657; - --color-olive-light: #a9b665; - --color-green-light: #a9b665; - --color-teal-light: #89b482; - --color-blue-light: #7daea3; - --color-violet-light: #d3869b; - --color-purple-light: #d3869b; - --color-pink-light: #d3869b; - --color-brown-light: #e78a4e; - --color-grey-light: #928374; - /* other colors */ - --color-black: #3a3735; - --color-gold: #e78a4e; - --color-white: #282828; - --color-diff-removed-word-bg: #7b4440; - --color-diff-added-word-bg: #5c6646; - --color-diff-removed-row-bg: #4c3432; - --color-diff-moved-row-bg: #374141; - --color-diff-added-row-bg: #3b4439; - --color-diff-removed-row-border: #9b4f4a; - --color-diff-moved-row-border: #5a7872; - --color-diff-added-row-border: #727d4f; - --color-diff-inactive: #3a3735; - --color-error-border: #9b4f4a; - --color-error-bg: #4c3432; - --color-error-text: #ea6962; - --color-success-border: #727d4f; - --color-success-bg: #3b4439; - --color-success-text: #a9b665; - --color-warning-border: #947443; - --color-warning-bg: #4f422e; - --color-warning-text: #d8a657; - --color-info-border: #5a7872; - --color-info-bg: #374141; - --color-info-text: #7daea3; - /* target-based colors */ - --color-body: #282828; - --color-box-header: #45403d; - --color-box-body: #32302f; - --color-box-body-highlight: #3a3735; - --color-text-dark: #e78a4e; - --color-text: #ddc7a1; - --color-text-hover: rgba(221, 199, 161, 0.8); - --color-text-light: #d8a657; - --color-text-light-1: #928374; - --color-text-light-2: #ddc7a1; - --color-text-light-3: #928374; - --color-footer: #32302f; - --color-timeline: #504945; - --color-input-text: #ddc7a1; - --color-input-background: #282828; - --color-input-toggle-background: #32302f; - --color-input-border: #504945; - --color-input-border-hover: #71665d; - --color-navbar: #32302f; - --color-navbar-transparent: #32302f; - --color-light: #32302f; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #504945; - --color-hover: rgba(80, 73, 69, 0.5); - --color-active: rgba(80, 73, 69, 0.5); - --color-menu: #32302f; - --color-card: #32302f; - --color-markup-table-row: #45403d; - --color-markup-code-block: #282828; - --color-button: #45403d; - --color-code-bg: #282828; - --color-code-sidebar-bg: #32302f; - --color-shadow: #00000060; - --color-secondary-bg: #32302f; - --color-text-focus: #fff; - --color-expand-button: #3a3735; - --color-placeholder-text: #928374; - --color-editor-line-highlight: #32302f; - --color-project-board-bg: #282828; - --color-project-board-light-label: #a9b665; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-header-bar: #32302f; - --color-label-active-bg: #504945; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #32302f; - accent-color: var(--color-accent); - color-scheme: dark; -} -.chroma .nx { - color: #ddc7a1; -} -.chroma .c, -.chroma .c1, -.chroma .ch, -.chroma .cm, -.chroma .sd { - color: #928374; -} -.chroma .k, -.chroma .kc, -.chroma .kd, -.chroma .kn, -.chroma .kp, -.chroma .kr { - color: #ea6962; -} -.chroma .o, -.chroma .ow { - color: #e78a4e; -} -.chroma .s, -.chroma .s1, -.chroma .s2, -.chroma .sa, -.chroma .sb, -.chroma .sc, -.chroma .sh, -.chroma .si, -.chroma .sr, -.chroma .ss, -.chroma .sx, -.chroma .nt, -.chroma .cpf { - color: #89b482; -} -.chroma .m, -.chroma .mb, -.chroma .mf, -.chroma .mh, -.chroma .mi, -.chroma .mo, -.chroma .nl { - color: #d3869b; -} -.chroma .kt, -.chroma .nc, -.chroma .nn, -.chroma .nv { - color: #d8a657; -} -.chroma .nf, -.chroma .nb, -.chroma .na { - color: #a9b665; -} -.chroma .bp, -.chroma .cp, -.chroma .ne, -.chroma .nd, -.chroma .se { - color: #7daea3; -} -/* primary buttons */ -.ui.primary.button, -.ui.primary.buttons .button { - background: #a9b665; - background-color: #a9b665 !important; - color: #282828; -} -.ui.primary.button:hover, -.ui.primary.buttons .button:hover { - background: rgba(169, 182, 101, 0.8); - background-color: rgba(169, 182, 101, 0.8) !important; - color: #282828; -} -/* secondary buttons */ -.ui.green.buttons .button, -.ui.green.button { - background: #a89984; - background-color: #a89984; - color: #282828; -} -.ui.green.buttons .button:hover, -.ui.green.button:hover { - background: rgba(168, 153, 132, 0.8); - background-color: rgba(168, 153, 132, 0.8); - color: #282828; -} -/* text based buttons (purple) */ -.ui.labeled.button.disabled > .button, -.ui.basic.buttons .button, -.ui.basic.button { - color: #e78a4e; -} -.ui.labeled.button.disabled > .button:hover, -.ui.basic.buttons .button:hover, -.ui.basic.button:hover { - color: #e78a4e; -} -/* repo title && header */ -.repo-title { - color: #e78a4e; -} -/* star number && fork number */ -.repo-buttons button[disabled] ~ .label, -.repo-buttons .ui.labeled.button.disabled > .label { - color: #a9b665; -} -.ui.basic.labels .label, -.ui.basic.label { - color: #a9b665; -} -/* hover on commits, branch, tags in project home page */ -.repository .ui.segment.sub-menu .list .item a:hover, -.ui.tabular.menu .item:hover { - color: var(--color-text-hover); -} -/* commit label */ -.ui.primary.labels .label, -.ui.ui.ui.primary.label { - color: #282828; -} -/* issue label */ -.ui.green.labels .label, -.ui.ui.ui.green.label { - color: #282828; -} -/* grey button (rss feed button in repository home page) */ -i.grey.icon.icon.icon.icon { - color: #928374; -} -/* scroll bar */ -* { - scrollbar-color: #e78a4e transparent !important; -} -::-webkit-scrollbar { - width: 10px; - height: 10px; -} -::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 0 6px #e78a4e !important; - border: 2px solid transparent; - border-radius: 5px !important; -} -::-webkit-scrollbar-thumb:window-inactive { - box-shadow: inset 0 0 0 6px #e78a4e !important; -} -::-webkit-scrollbar-thumb:hover { - box-shadow: inset 0 0 0 6px #e78a4e !important; -} -::-webkit-scrollbar-corner { - background: transparent; -} -/* red buttons */ -.ui.red.labels .label, -.ui.ui.ui.red.label, -.ui.red.button, -.ui.red.buttons .button { - background: #ea6962; - background-color: #ea6962; - color: #282828; -} -.ui.red.labels .label:hover, -.ui.ui.ui.red.label:hover, -.ui.red.button:hover, -.ui.red.buttons .button:hover { - background: rgba(234, 105, 98, 0.8); - background-color: rgba(234, 105, 98, 0.8); - color: #282828; -} -/* grey buttons */ -.ui.grey.labels .label, -.ui.ui.ui.grey.label, -.ui.grey.button, -.ui.grey.buttons .button { - color: #282828; -} -.ui.grey.labels .label:hover, -.ui.ui.ui.grey.label:hover, -.ui.grey.button:hover, -.ui.grey.buttons .button:hover { - color: #282828; -} -/* orange buttons */ -.ui.orange.labels .label, -.ui.ui.ui.orange.label, -.ui.orange.button, -.ui.orange.buttons .button { - background: #e78a4e; - background-color: #e78a4e; - color: #282828; -} -.ui.orange.labels .label:hover, -.ui.ui.ui.orange.label:hover, -.ui.orange.button:hover, -.ui.orange.buttons .button:hover { - background: rgba(231, 138, 78, 0.8); - background-color: rgba(231, 138, 78, 0.8); - color: #282828; -} diff --git a/web_src/css/themes/theme-gruvbox-material-light.css b/web_src/css/themes/theme-gruvbox-material-light.css deleted file mode 100644 index 30cb4564d3fbd..0000000000000 --- a/web_src/css/themes/theme-gruvbox-material-light.css +++ /dev/null @@ -1,360 +0,0 @@ -:root { - --is-dark-theme: true; - --color-primary: #6c782e; - --color-primary-contrast: #fbf1c7; - --color-primary-dark-1: #6c782e; - --color-primary-dark-2: #6b702f; - --color-primary-dark-3: #6a6830; - --color-primary-dark-4: #696032; - --color-primary-dark-5: #675733; - --color-primary-dark-6: #664f34; - --color-primary-dark-7: #654735; - --color-primary-light-1: #6c782e; - --color-primary-light-2: #828a46; - --color-primary-light-3: #999c5d; - --color-primary-light-4: #afaf75; - --color-primary-light-5: #c5c18d; - --color-primary-light-6: #dcd3a4; - --color-primary-light-7: #f2e5bc; - --color-primary-alpha-10: rgba(108, 120, 46, 0.1); - --color-primary-alpha-20: rgba(108, 120, 46, 0.2); - --color-primary-alpha-30: rgba(108, 120, 46, 0.3); - --color-primary-alpha-40: rgba(108, 120, 46, 0.4); - --color-primary-alpha-50: rgba(108, 120, 46, 0.5); - --color-primary-alpha-60: rgba(108, 120, 46, 0.6); - --color-primary-alpha-70: rgba(108, 120, 46, 0.7); - --color-primary-alpha-80: rgba(108, 120, 46, 0.8); - --color-primary-alpha-90: rgba(108, 120, 46, 0.9); - --color-secondary: #e5d5ad; - --color-secondary-dark-1: #e5d5ad; - --color-secondary-dark-2: #dac9a3; - --color-secondary-dark-3: #d0bd99; - --color-secondary-dark-4: #c5b28f; - --color-secondary-dark-5: #baa685; - --color-secondary-dark-6: #b09a7b; - --color-secondary-dark-7: #a58e71; - --color-secondary-dark-8: #9a8267; - --color-secondary-dark-9: #90765d; - --color-secondary-dark-10: #856b53; - --color-secondary-dark-11: #7a5f49; - --color-secondary-dark-12: #70533f; - --color-secondary-dark-13: #654735; - --color-secondary-light-1: #e5d5ad; - --color-secondary-light-2: #eee0b7; - --color-secondary-light-3: #f2e5bc; - --color-secondary-light-4: #f4e8be; - --color-secondary-alpha-10: rgba(229, 213, 173, 0.1); - --color-secondary-alpha-20: rgba(229, 213, 173, 0.2); - --color-secondary-alpha-30: rgba(229, 213, 173, 0.3); - --color-secondary-alpha-40: rgba(229, 213, 173, 0.4); - --color-secondary-alpha-50: rgba(229, 213, 173, 0.5); - --color-secondary-alpha-60: rgba(229, 213, 173, 0.6); - --color-secondary-alpha-70: rgba(229, 213, 173, 0.7); - --color-secondary-alpha-80: rgba(229, 213, 173, 0.8); - --color-secondary-alpha-90: rgba(229, 213, 173, 0.9); - /* colors */ - --color-red: #c14a4a; - --color-orange: #c35e0a; - --color-yellow: #b47109; - --color-olive: #6c782e; - --color-green: #6c782e; - --color-teal: #4c7a5d; - --color-blue: #45707a; - --color-violet: #945e80; - --color-purple: #945e80; - --color-pink: #945e80; - --color-brown: #c35e0a; - --color-grey: #928374; - /* light variants */ - --color-red-light: #c14a4a; - --color-orange-light: #c35e0a; - --color-yellow-light: #b47109; - --color-olive-light: #6c782e; - --color-green-light: #6c782e; - --color-teal-light: #4c7a5d; - --color-blue-light: #45707a; - --color-violet-light: #945e80; - --color-purple-light: #945e80; - --color-pink-light: #945e80; - --color-brown-light: #c35e0a; - --color-grey-light: #928374; - /* other colors */ - --color-black: #f2e5bc; - --color-gold: #c35e0a; - --color-white: #fbf1c7; - --color-diff-removed-word-bg: #e3ae95; - --color-diff-added-word-bg: #bcc28d; - --color-diff-removed-row-bg: #f1d9b5; - --color-diff-moved-row-bg: #dadec0; - --color-diff-added-row-bg: #dee2b6; - --color-diff-removed-row-border: #d99280; - --color-diff-moved-row-border: #90a79d; - --color-diff-added-row-border: #a5ad72; - --color-diff-inactive: #f2e5bc; - --color-error-border: #d99280; - --color-error-bg: #f1d9b5; - --color-error-text: #c14a4a; - --color-success-border: #a5ad72; - --color-success-bg: #dee2b6; - --color-success-text: #6c782e; - --color-warning-border: #d7ac5e; - --color-warning-bg: #fae7b3; - --color-warning-text: #b47109; - --color-info-border: #90a79d; - --color-info-bg: #dadec0; - --color-info-text: #45707a; - /* target-based colors */ - --color-body: #fbf1c7; - --color-box-header: #eee0b7; - --color-box-body: #f4e8be; - --color-box-body-highlight: #f2e5bc; - --color-text-dark: #c35e0a; - --color-text: #654735; - --color-text-hover: rgba(101, 71, 53, 0.8); - --color-text-light: #b47109; - --color-text-light-1: #928374; - --color-text-light-2: #654735; - --color-text-light-3: #928374; - --color-footer: #f4e8be; - --color-timeline: #e5d5ad; - --color-input-text: #654735; - --color-input-background: #fbf1c7; - --color-input-toggle-background: #f4e8be; - --color-input-border: #e5d5ad; - --color-input-border-hover: #bcac91; - --color-navbar: #f4e8be; - --color-navbar-transparent: #f4e8be; - --color-light: #f4e8be; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #e5d5ad; - --color-hover: rgba(229, 213, 173, 0.5); - --color-active: rgba(229, 213, 173, 0.5); - --color-menu: #f4e8be; - --color-card: #f4e8be; - --color-markup-table-row: #eee0b7; - --color-markup-code-block: #fbf1c7; - --color-button: #eee0b7; - --color-code-bg: #fbf1c7; - --color-code-sidebar-bg: #f4e8be; - --color-shadow: #00000060; - --color-secondary-bg: #f4e8be; - --color-text-focus: #fff; - --color-expand-button: #f2e5bc; - --color-placeholder-text: #928374; - --color-editor-line-highlight: #f4e8be; - --color-project-board-bg: #fbf1c7; - --color-project-board-light-label: #6c782e; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-header-bar: #f4e8be; - --color-label-active-bg: #e5d5ad; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #f4e8be; - accent-color: var(--color-accent); - color-scheme: dark; -} -.chroma .nx { - color: #654735; -} -.chroma .c, -.chroma .c1, -.chroma .ch, -.chroma .cm, -.chroma .sd { - color: #928374; -} -.chroma .k, -.chroma .kc, -.chroma .kd, -.chroma .kn, -.chroma .kp, -.chroma .kr { - color: #c14a4a; -} -.chroma .o, -.chroma .ow { - color: #c35e0a; -} -.chroma .s, -.chroma .s1, -.chroma .s2, -.chroma .sa, -.chroma .sb, -.chroma .sc, -.chroma .sh, -.chroma .si, -.chroma .sr, -.chroma .ss, -.chroma .sx, -.chroma .nt, -.chroma .cpf { - color: #4c7a5d; -} -.chroma .m, -.chroma .mb, -.chroma .mf, -.chroma .mh, -.chroma .mi, -.chroma .mo, -.chroma .nl { - color: #945e80; -} -.chroma .kt, -.chroma .nc, -.chroma .nn, -.chroma .nv { - color: #b47109; -} -.chroma .nf, -.chroma .nb, -.chroma .na { - color: #6c782e; -} -.chroma .bp, -.chroma .cp, -.chroma .ne, -.chroma .nd, -.chroma .se { - color: #45707a; -} -/* primary buttons */ -.ui.primary.button, -.ui.primary.buttons .button { - background: #6f8352; - background-color: #6f8352 !important; - color: #fbf1c7; -} -.ui.primary.button:hover, -.ui.primary.buttons .button:hover { - background: rgba(111, 131, 82, 0.8); - background-color: rgba(111, 131, 82, 0.8) !important; - color: #fbf1c7; -} -/* secondary buttons */ -.ui.green.buttons .button, -.ui.green.button { - background: #7c6f64; - background-color: #7c6f64; - color: #fbf1c7; -} -.ui.green.buttons .button:hover, -.ui.green.button:hover { - background: rgba(124, 111, 100, 0.8); - background-color: rgba(124, 111, 100, 0.8); - color: #fbf1c7; -} -/* text based buttons (purple) */ -.ui.labeled.button.disabled > .button, -.ui.basic.buttons .button, -.ui.basic.button { - color: #c35e0a; -} -.ui.labeled.button.disabled > .button:hover, -.ui.basic.buttons .button:hover, -.ui.basic.button:hover { - color: #c35e0a; -} -/* repo title && header */ -.repo-title { - color: #c35e0a; -} -/* star number && fork number */ -.repo-buttons button[disabled] ~ .label, -.repo-buttons .ui.labeled.button.disabled > .label { - color: #6c782e; -} -.ui.basic.labels .label, -.ui.basic.label { - color: #6c782e; -} -/* hover on commits, branch, tags in project home page */ -.repository .ui.segment.sub-menu .list .item a:hover, -.ui.tabular.menu .item:hover { - color: var(--color-text-hover); -} -/* commit label */ -.ui.primary.labels .label, -.ui.ui.ui.primary.label { - color: #fbf1c7; -} -/* issue label */ -.ui.green.labels .label, -.ui.ui.ui.green.label { - color: #fbf1c7; -} -/* grey button (rss feed button in repository home page) */ -i.grey.icon.icon.icon.icon { - color: #928374; -} -/* scroll bar */ -* { - scrollbar-color: #c35e0a transparent !important; -} -::-webkit-scrollbar { - width: 10px; - height: 10px; -} -::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 0 6px #c35e0a !important; - border: 2px solid transparent; - border-radius: 5px !important; -} -::-webkit-scrollbar-thumb:window-inactive { - box-shadow: inset 0 0 0 6px #c35e0a !important; -} -::-webkit-scrollbar-thumb:hover { - box-shadow: inset 0 0 0 6px #c35e0a !important; -} -::-webkit-scrollbar-corner { - background: transparent; -} -/* red buttons */ -.ui.red.labels .label, -.ui.ui.ui.red.label, -.ui.red.button, -.ui.red.buttons .button { - background: #ae5858; - background-color: #ae5858; - color: #fbf1c7; -} -.ui.red.labels .label:hover, -.ui.ui.ui.red.label:hover, -.ui.red.button:hover, -.ui.red.buttons .button:hover { - background: rgba(174, 88, 88, 0.8); - background-color: rgba(174, 88, 88, 0.8); - color: #fbf1c7; -} -/* grey buttons */ -.ui.grey.labels .label, -.ui.ui.ui.grey.label, -.ui.grey.button, -.ui.grey.buttons .button { - color: #fbf1c7; -} -.ui.grey.labels .label:hover, -.ui.ui.ui.grey.label:hover, -.ui.grey.button:hover, -.ui.grey.buttons .button:hover { - color: #fbf1c7; -} -/* orange buttons */ -.ui.orange.labels .label, -.ui.ui.ui.orange.label, -.ui.orange.button, -.ui.orange.buttons .button { - background: #c35e0a; - background-color: #c35e0a; - color: #fbf1c7; -} -.ui.orange.labels .label:hover, -.ui.ui.ui.orange.label:hover, -.ui.orange.button:hover, -.ui.orange.buttons .button:hover { - background: rgba(195, 94, 10, 0.8); - background-color: rgba(195, 94, 10, 0.8); - color: #fbf1c7; -} From 83c44d1298ab5a363f35dde20f5c3086e4a635cc Mon Sep 17 00:00:00 2001 From: HesterG Date: Thu, 18 May 2023 14:57:35 +0800 Subject: [PATCH 06/54] test timestamp --- web_src/js/components/RepoActionView.vue | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index c0b54d56937a2..967cac7641e64 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -251,11 +251,17 @@ const sfc = { div.append(lineNumber); // TODO: Support displaying time optionally - - const logMessage = document.createElement('div'); + const logTimeStamp = document.createElement('span'); + logTimeStamp.className = 'log-time-stamp'; + const date = new Date(parseFloat(line.timestamp)); + console.log('line.timestamp:', line.timestamp); + const timeStamp = date.toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'long', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit'}) + console.log('parsed date:', timestamp); + logTimeStamp.innerHTML = timeStamp; + const logMessage = document.createElement('span'); logMessage.className = 'log-msg'; logMessage.innerHTML = ansiLogToHTML(line.message); - div.append(logMessage); + div.append(logTimeStamp); return div; }, From e1513b297564e1c7ce639a96e111bd4193854778 Mon Sep 17 00:00:00 2001 From: HesterG Date: Thu, 18 May 2023 14:59:36 +0800 Subject: [PATCH 07/54] logmessage --- web_src/js/components/RepoActionView.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 967cac7641e64..c3bb785741e2c 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -262,6 +262,7 @@ const sfc = { logMessage.className = 'log-msg'; logMessage.innerHTML = ansiLogToHTML(line.message); div.append(logTimeStamp); + div.append(logMessage); return div; }, From 7de46948cda4a3bd7064fba44b22bd786d89d527 Mon Sep 17 00:00:00 2001 From: HesterG Date: Thu, 18 May 2023 15:06:16 +0800 Subject: [PATCH 08/54] log --- web_src/js/components/RepoActionView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index c3bb785741e2c..9b2e78c0f68a1 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -256,7 +256,7 @@ const sfc = { const date = new Date(parseFloat(line.timestamp)); console.log('line.timestamp:', line.timestamp); const timeStamp = date.toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'long', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit'}) - console.log('parsed date:', timestamp); + console.log('parsed date:', timeStamp); logTimeStamp.innerHTML = timeStamp; const logMessage = document.createElement('span'); logMessage.className = 'log-msg'; From 10bc9c4216cb75d0e194e36bddd3a0a5ca3e45ff Mon Sep 17 00:00:00 2001 From: HesterG Date: Thu, 18 May 2023 15:14:35 +0800 Subject: [PATCH 09/54] save change --- web_src/js/components/RepoActionView.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 9b2e78c0f68a1..b16646834aabf 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -253,8 +253,8 @@ const sfc = { // TODO: Support displaying time optionally const logTimeStamp = document.createElement('span'); logTimeStamp.className = 'log-time-stamp'; - const date = new Date(parseFloat(line.timestamp)); - console.log('line.timestamp:', line.timestamp); + const date = new Date(parseFloat(line.timestamp*1000)); + console.log('date', date); const timeStamp = date.toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'long', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit'}) console.log('parsed date:', timeStamp); logTimeStamp.innerHTML = timeStamp; From 320c617c81a3ab860b898789b98fcca2ec7004df Mon Sep 17 00:00:00 2001 From: HesterG Date: Fri, 19 May 2023 18:22:00 +0800 Subject: [PATCH 10/54] save --- options/locale/locale_en-US.ini | 3 ++ templates/repo/actions/view.tmpl | 2 + web_src/js/components/RepoActionView.vue | 68 +++++++++++++++++++++--- web_src/js/svg.js | 4 +- 4 files changed, 68 insertions(+), 9 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 80ccecbce1620..a76eef04255fa 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -3437,6 +3437,9 @@ runs.no_matching_runner_helper = No matching runner: %s need_approval_desc = Need approval to run workflows for fork pull request. +options.show_timestamp = Show timestamps +options.show_full_screen = Show full screen + [projects] type-1.display_name = Individual Project type-2.display_name = Repository Project diff --git a/templates/repo/actions/view.tmpl b/templates/repo/actions/view.tmpl index 3a3a069cbc8a7..1ff71c2aa8b40 100644 --- a/templates/repo/actions/view.tmpl +++ b/templates/repo/actions/view.tmpl @@ -19,6 +19,8 @@ data-locale-status-skipped="{{.locale.Tr "actions.status.skipped"}}" data-locale-status-blocked="{{.locale.Tr "actions.status.blocked"}}" data-locale-artifacts-title="{{$.locale.Tr "artifacts"}}" + data-locale-show-timestamp="{{.locale.Tr "actions.options.show_timestamp"}}" + data-locale-show-full-screen="{{.locale.Tr "actions.options.show_full_screen"}}" > diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index b16646834aabf..4827f6a9a5525 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -60,12 +60,29 @@
-

- {{ currentJob.title }} -

-

- {{ currentJob.detail }} -

+
+

+ {{ currentJob.title }} +

+

+ {{ currentJob.detail }} +

+
+
+
+ +
+ + + {{ locale.jobOptions.showTimeStamp }} + + + + {{ locale.jobOptions.showFullScreen }} + +
+
+
@@ -95,6 +112,7 @@ import {SvgIcon} from '../svg.js'; import ActionRunStatus from './ActionRunStatus.vue'; import {createApp} from 'vue'; import AnsiToHTML from 'ansi-to-html'; +import { element } from 'prop-types'; const {csrfToken} = window.config; @@ -121,6 +139,8 @@ const sfc = { currentJobStepsStates: [], artifacts: [], onHoverRerunIndex: -1, + menuVisible: false, + timeStampVisible: false, // provided by backend run: { @@ -173,6 +193,12 @@ const sfc = { // load job data and then auto-reload periodically this.loadJob(); this.intervalID = setInterval(this.loadJob, 1000); + + document.body.addEventListener('click', this.closeDropdown); + }, + + beforeDestroy() { + document.body.removeEventListener('click', this.closeDropdown); }, unmounted() { @@ -254,7 +280,6 @@ const sfc = { const logTimeStamp = document.createElement('span'); logTimeStamp.className = 'log-time-stamp'; const date = new Date(parseFloat(line.timestamp*1000)); - console.log('date', date); const timeStamp = date.toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'long', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit'}) console.log('parsed date:', timeStamp); logTimeStamp.innerHTML = timeStamp; @@ -342,6 +367,17 @@ const sfc = { isDone(status) { return ['success', 'skipped', 'failure', 'cancelled'].includes(status); + }, + + closeDropdown() { + if (this.menuVisible) this.menuVisible = false; + }, + + toggleTimeStamps() { + this.timeStampVisible = !this.timeStampVisible; + for (const el of document.querySelectorAll('.log-time-stamp')) { + el.style.display = this.timeStampVisible? 'block' : 'none'; + } } }, }; @@ -376,7 +412,11 @@ export function initRepositoryActionView() { cancelled: el.getAttribute('data-locale-status-cancelled'), skipped: el.getAttribute('data-locale-status-skipped'), blocked: el.getAttribute('data-locale-status-blocked'), - } + }, + jobOptions: { + showTimeStamp: el.getAttribute('data-locale-show-timestamp'), + showFullScreen: el.getAttribute('data-locale-show-full-screen'), + }, } }); view.mount(el); @@ -582,6 +622,13 @@ export function ansiLogToHTML(line) { } .job-info-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.job-info-header .job-info-header-title { + font-size: 150%; padding: 10px; border-bottom: 1px solid var(--color-console-border); background-color: var(--color-console-bg); @@ -703,6 +750,11 @@ export function ansiLogToHTML(line) { margin-left: 10px; } +.log-time-stamp { + margin-left: 10px; + display: none; +} + /* TODO: group support .job-log-group { diff --git a/web_src/js/svg.js b/web_src/js/svg.js index 49376c16434a8..b175bfe72682f 100644 --- a/web_src/js/svg.js +++ b/web_src/js/svg.js @@ -65,6 +65,7 @@ import octiconTag from '../../public/img/svg/octicon-tag.svg'; import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg'; import octiconX from '../../public/img/svg/octicon-x.svg'; import octiconXCircleFill from '../../public/img/svg/octicon-x-circle-fill.svg'; +import octiconTools from '../../public/img/svg/octicon-tools.svg'; const svgs = { 'gitea-double-chevron-left': giteaDoubleChevronLeft, @@ -132,7 +133,8 @@ const svgs = { 'octicon-tag': octiconTag, 'octicon-triangle-down': octiconTriangleDown, 'octicon-x': octiconX, - 'octicon-x-circle-fill': octiconXCircleFill + 'octicon-x-circle-fill': octiconXCircleFill, + 'octicon-tools': octiconTools, }; // TODO: use a more general approach to access SVG icons. From 85625290dd831c5dc146c851269b262ae1828b33 Mon Sep 17 00:00:00 2001 From: HesterG Date: Mon, 22 May 2023 09:40:51 +0800 Subject: [PATCH 11/54] delete unrelated --- web_src/css/themes/theme-enterprise-auto.css | 385 ------------------ web_src/css/themes/theme-enterprise-dark.css | 223 ---------- web_src/css/themes/theme-enterprise-light.css | 222 ---------- 3 files changed, 830 deletions(-) delete mode 100644 web_src/css/themes/theme-enterprise-auto.css delete mode 100644 web_src/css/themes/theme-enterprise-dark.css delete mode 100644 web_src/css/themes/theme-enterprise-light.css diff --git a/web_src/css/themes/theme-enterprise-auto.css b/web_src/css/themes/theme-enterprise-auto.css deleted file mode 100644 index b61dd70d57d73..0000000000000 --- a/web_src/css/themes/theme-enterprise-auto.css +++ /dev/null @@ -1,385 +0,0 @@ -@media (prefers-color-scheme: dark) { - :root { - --is-dark-theme: true; - --color-primary: #fca311; - --color-primary-contrast: #ffffff; - --color-primary-dark-1: #fca311; - --color-primary-dark-2: #f8ae34; - --color-primary-dark-3: #f4b958; - --color-primary-dark-4: #f1c47b; - --color-primary-dark-5: #edcf9e; - --color-primary-dark-6: #e9dac2; - --color-primary-dark-7: #e5e5e5; - --color-primary-light-1: #dc921b; - --color-primary-light-2: #bc8124; - --color-primary-light-3: #9c712e; - --color-primary-light-4: #7c6037; - --color-primary-light-4: #5c4f41; - --color-primary-light-6: #3c3e4a; - --color-primary-light-7: #1c2d54; - --color-primary-alpha-10: rgba(252, 163, 17, 0.1); - --color-primary-alpha-20: rgba(252, 163, 17, 0.2); - --color-primary-alpha-30: rgba(252, 163, 17, 0.3); - --color-primary-alpha-40: rgba(252, 163, 17, 0.4); - --color-primary-alpha-50: rgba(252, 163, 17, 0.5); - --color-primary-alpha-60: rgba(252, 163, 17, 0.6); - --color-primary-alpha-70: rgba(252, 163, 17, 0.7); - --color-primary-alpha-80: rgba(252, 163, 17, 0.8); - --color-primary-alpha-90: rgba(252, 163, 17, 0.9); - --color-secondary: #14213d; - --color-secondary-dark-1: #24304a; - --color-secondary-dark-2: #343f57; - --color-secondary-dark-3: #444e64; - --color-secondary-dark-4: #545d71; - --color-secondary-dark-5: #646c7e; - --color-secondary-dark-6: #747b8a; - --color-secondary-dark-7: #848a97; - --color-secondary-dark-8: #959aa4; - --color-secondary-dark-9: #a5a9b1; - --color-secondary-dark-10: #b5b8be; - --color-secondary-dark-11: #c5c7cb; - --color-secondary-dark-12: #d5d6d8; - --color-secondary-dark-13: #e5e5e5; - --color-secondary-light-1: #172545; - --color-secondary-light-2: #19294c; - --color-secondary-light-3: #1c2d54; - --color-secondary-light-4: #1e325c; - --color-secondary-alpha-10: rgba(20, 33, 61, 0.1); - --color-secondary-alpha-20: rgba(20, 33, 61, 0.2); - --color-secondary-alpha-30: rgba(20, 33, 61, 0.3); - --color-secondary-alpha-40: rgba(20, 33, 61, 0.4); - --color-secondary-alpha-50: rgba(20, 33, 61, 0.5); - --color-secondary-alpha-60: rgba(20, 33, 61, 0.6); - --color-secondary-alpha-70: rgba(20, 33, 61, 0.7); - --color-secondary-alpha-80: rgba(20, 33, 61, 0.8); - --color-secondary-alpha-90: rgba(20, 33, 61, 0.9); - /* colors */ - --color-red: #f44336; - --color-orange: #ff9800; - --color-yellow: #ffeb3b; - --color-olive: #4caf50; - --color-green: #4caf50; - --color-teal: #00bcd4; - --color-blue: #2196f3; - --color-violet: #9c27b0; - --color-purple: #9c27b0; - --color-pink: #e91e63; - --color-brown: #ff9800; - --color-grey: #9e9e9e; - /* light variants */ - --color-red-light: #f44336; - --color-orange-light: #ff9800; - --color-yellow-light: #ffeb3b; - --color-olive-light: #4caf50; - --color-green-light: #4caf50; - --color-teal-light: #00bcd4; - --color-blue-light: #2196f3; - --color-violet-light: #9c27b0; - --color-purple-light: #9c27b0; - --color-pink-light: #e91e63; - --color-brown-light: #ff9800; - --color-grey-light: #9e9e9e; - /* other colors */ - --color-black: #000000; - --color-gold: #ff9800; - --color-white: #000000; - --color-diff-removed-word-bg: #fcb9b7; - --color-diff-added-word-bg: #b9e0bb; - --color-diff-removed-row-bg: #ffebee; - --color-diff-moved-row-bg: #e3f2fd; - --color-diff-added-row-bg: #e8f5e9; - --color-diff-removed-row-border: #fa9792; - --color-diff-moved-row-border: #82c4f8; - --color-diff-added-row-border: #9ad29d; - --color-diff-inactive: #1c2d54; - --color-error-border: #fa9792; - --color-error-bg: #ffebee; - --color-error-text: #f44336; - --color-success-border: #9ad29d; - --color-success-bg: #e8f5e9; - --color-success-text: #4caf50; - --color-warning-border: #ffc670; - --color-warning-bg: #fff3e0; - --color-warning-text: #ff9800; - --color-info-border: #82c4f8; - --color-info-bg: #e3f2fd; - --color-info-text: #2196f3; - /* target-based colors */ - --color-body: #000000; - --color-box-header: #19294c; - --color-box-body: #14213d; - --color-box-body-highlight: #1e325c; - --color-text: #e5e5e5; - --color-text-dark: #f2f2f2; - --color-text-light: #cccccc; - --color-text-light-1: #b2b2b2; - --color-text-light-2: #999999; - --color-text-light-3: #7f7f7f; - --color-footer: #1c2d54; - --color-timeline: #172545; - --color-input-text: #e5e5e5; - --color-input-background: #000000; - --color-input-toggle-background: #1c2d54; - --color-input-border: #14213d; - --color-input-border-hover: var(--color-secondary-dark-1); - --color-navbar: #14213d; - --color-navbar-transparent: rgba(28, 45, 84, 0.1); - --color-light: #1c2d54; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #172545; - --color-hover: rgba(23, 37, 69, 0.5); - --color-active: rgba(23, 37, 69, 0.5); - --color-menu: #000000; - --color-card: #000000; - --color-markup-table-row: #19294c; - --color-markup-code-block: #00000010; - --color-button: #19294c; - --color-code-bg: #000000; - --color-code-sidebar-bg: #f5f5f5; - --color-shadow: #00000060; - --color-secondary-bg: #1c2d54; - --color-text-focus: #fff; - --color-expand-button: #1c2d54; - --color-placeholder-text: #9e9e9e; - --color-editor-line-highlight: #1c2d54; - --color-project-board-bg: #ffffff; - --color-project-board-light-label: #a6aab5; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-tooltip-bg: #000000f0; - --color-tooltip-text: #000000; - --color-header-bar: #000000; - --color-label-active-bg: #172545; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #fffbdd; - accent-color: var(--color-accent); - color-scheme: dark; - } - .chroma .nx { - color: #e5e5e5; - } - .chroma .c, - .chroma .c1, - .chroma .ch, - .chroma .cm, - .chroma .sd { - color: #9e9e9e; - } - .chroma .k, - .chroma .kc, - .chroma .kd, - .chroma .kn, - .chroma .kp, - .chroma .kr { - color: #f44336; - } - .chroma .o, - .chroma .ow { - color: #ff9800; - } - .chroma .s, - .chroma .s1, - .chroma .s2, - .chroma .sa, - .chroma .sb, - .chroma .sc, - .chroma .sh, - .chroma .si, - .chroma .sr, - .chroma .ss, - .chroma .sx, - .chroma .nt, - .chroma .cpf { - color: #00bcd4; - } - .chroma .m, - .chroma .mb, - .chroma .mf, - .chroma .mh, - .chroma .mi, - .chroma .mo, - .chroma .nl { - color: #9c27b0; - } - .chroma .kt, - .chroma .nc, - .chroma .nn, - .chroma .nv { - color: #ffeb3b; - } - .chroma .nf, - .chroma .nb, - .chroma .na { - color: #4caf50; - } - .chroma .bp, - .chroma .cp, - .chroma .ne, - .chroma .nd, - .chroma .se { - color: #2196f3; - } -} -@media (prefers-color-scheme: light) { - :root { - --color-primary: #3F72AF; - --color-primary-contrast: #ffffff; - --color-primary-dark-1: #3F72AF; - --color-primary-dark-2: #37669f; - --color-primary-dark-3: #305b8f; - --color-primary-dark-4: #28507f; - --color-primary-dark-5: #20446e; - --color-primary-dark-6: #19395e; - --color-primary-dark-7: #112D4E; - --color-primary-light-1: #5884b9; - --color-primary-light-2: #7297c4; - --color-primary-light-3: #8ba9ce; - --color-primary-light-4: #a4bcd9; - --color-primary-light-4: #becee3; - --color-primary-light-6: #d7e1ee; - --color-primary-light-7: #f0f3f8; - --color-primary-alpha-10: rgba(63, 114, 175, 0.1); - --color-primary-alpha-20: rgba(63, 114, 175, 0.2); - --color-primary-alpha-30: rgba(63, 114, 175, 0.3); - --color-primary-alpha-40: rgba(63, 114, 175, 0.4); - --color-primary-alpha-50: rgba(63, 114, 175, 0.5); - --color-primary-alpha-60: rgba(63, 114, 175, 0.6); - --color-primary-alpha-70: rgba(63, 114, 175, 0.7); - --color-primary-alpha-80: rgba(63, 114, 175, 0.8); - --color-primary-alpha-90: rgba(63, 114, 175, 0.9); - --color-secondary: #DBE2EF; - --color-secondary-dark-1: #cbd4e3; - --color-secondary-dark-2: #bcc6d6; - --color-secondary-dark-3: #acb8ca; - --color-secondary-dark-4: #9daabd; - --color-secondary-dark-5: #8d9cb1; - --color-secondary-dark-6: #7e8fa5; - --color-secondary-dark-7: #6e8198; - --color-secondary-dark-8: #5f738c; - --color-secondary-dark-9: #4f6580; - --color-secondary-dark-10: #405773; - --color-secondary-dark-11: #304967; - --color-secondary-dark-12: #213b5a; - --color-secondary-dark-13: #112D4E; - --color-secondary-light-1: #e2e8f2; - --color-secondary-light-2: #e9edf5; - --color-secondary-light-3: #f0f3f8; - --color-secondary-light-4: #f7f9fc; - --color-secondary-alpha-10: rgba(219, 226, 239, 0.1); - --color-secondary-alpha-20: rgba(219, 226, 239, 0.2); - --color-secondary-alpha-30: rgba(219, 226, 239, 0.3); - --color-secondary-alpha-40: rgba(219, 226, 239, 0.4); - --color-secondary-alpha-50: rgba(219, 226, 239, 0.5); - --color-secondary-alpha-60: rgba(219, 226, 239, 0.6); - --color-secondary-alpha-70: rgba(219, 226, 239, 0.7); - --color-secondary-alpha-80: rgba(219, 226, 239, 0.8); - --color-secondary-alpha-90: rgba(219, 226, 239, 0.9); - /* colors */ - --color-red: #f44336; - --color-orange: #ff9800; - --color-yellow: #ffeb3b; - --color-olive: #4caf50; - --color-green: #4caf50; - --color-teal: #00bcd4; - --color-blue: #2196f3; - --color-violet: #9c27b0; - --color-purple: #9c27b0; - --color-pink: #e91e63; - --color-brown: #ff9800; - --color-grey: #9e9e9e; - /* light variants */ - --color-red-light: #f44336; - --color-orange-light: #ff9800; - --color-yellow-light: #ffeb3b; - --color-olive-light: #4caf50; - --color-green-light: #4caf50; - --color-teal-light: #00bcd4; - --color-blue-light: #2196f3; - --color-violet-light: #9c27b0; - --color-purple-light: #9c27b0; - --color-pink-light: #e91e63; - --color-brown-light: #ff9800; - --color-grey-light: #9e9e9e; - /* other colors */ - --color-black: #0d1b2a; - --color-gold: #ff9800; - --color-white: #ffffff; - --color-diff-removed-word-bg: #fcb9b7; - --color-diff-added-word-bg: #b9e0bb; - --color-diff-removed-row-bg: #ffebee; - --color-diff-moved-row-bg: #e3f2fd; - --color-diff-added-row-bg: #e8f5e9; - --color-diff-removed-row-border: #fa9792; - --color-diff-moved-row-border: #82c4f8; - --color-diff-added-row-border: #9ad29d; - --color-diff-inactive: #f0f3f8; - --color-error-border: #fa9792; - --color-error-bg: #ffebee; - --color-error-text: #f44336; - --color-success-border: #9ad29d; - --color-success-bg: #e8f5e9; - --color-success-text: #4caf50; - --color-warning-border: #ffc670; - --color-warning-bg: #fff3e0; - --color-warning-text: #ff9800; - --color-info-border: #82c4f8; - --color-info-bg: #e3f2fd; - --color-info-text: #2196f3; - /* target-based colors */ - --color-body: #ffffff; - --color-box-header: #e9edf5; - --color-box-body: #f0f3f8; - --color-box-body-highlight: #f7f9fc; - --color-text: #212121; - --color-text-dark: #141414; - --color-text-light: #545454; - --color-text-light-1: #7a7a7a; - --color-text-light-2: #a1a1a1; - --color-text-light-3: #c7c7c7; - --color-footer: #f0f3f8; - --color-timeline: #e2e8f2; - --color-input-text: #212121; - --color-input-background: #ffffff; - --color-input-toggle-background: #f0f3f8; - --color-input-border: #DBE2EF; - --color-input-border-hover: var(--color-secondary-dark-1); - --color-navbar: #f0f3f8; - --color-navbar-transparent: rgba(240, 243, 248, 0.1); - --color-light: #f7f9fc; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #e2e8f2; - --color-hover: rgba(226, 232, 242, 0.5); - --color-active: rgba(226, 232, 242, 0.5); - --color-menu: #ffffff; - --color-card: #ffffff; - --color-markup-table-row: #e9edf5; - --color-markup-code-block: #00000010; - --color-button: #e9edf5; - --color-code-bg: #ffffff; - --color-code-sidebar-bg: #f5f5f5; - --color-shadow: #00000060; - --color-secondary-bg: #f0f3f8; - --color-text-focus: #fff; - --color-expand-button: #f0f3f8; - --color-placeholder-text: #9e9e9e; - --color-editor-line-highlight: #f0f3f8; - --color-project-board-bg: #ffffff; - --color-project-board-light-label: #a6aab5; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-tooltip-bg: #000000f0; - --color-tooltip-text: #ffffff; - --color-header-bar: #ffffff; - --color-label-active-bg: #e2e8f2; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #fffbdd; - accent-color: var(--color-accent); - color-scheme: light; - } -} diff --git a/web_src/css/themes/theme-enterprise-dark.css b/web_src/css/themes/theme-enterprise-dark.css deleted file mode 100644 index 1ab3c6354a61a..0000000000000 --- a/web_src/css/themes/theme-enterprise-dark.css +++ /dev/null @@ -1,223 +0,0 @@ -:root { - --is-dark-theme: true; - --color-primary: #fca311; - --color-primary-contrast: #ffffff; - --color-primary-dark-1: #fca311; - --color-primary-dark-2: #f8ae34; - --color-primary-dark-3: #f4b958; - --color-primary-dark-4: #f1c47b; - --color-primary-dark-5: #edcf9e; - --color-primary-dark-6: #e9dac2; - --color-primary-dark-7: #e5e5e5; - --color-primary-light-1: #dc921b; - --color-primary-light-2: #bc8124; - --color-primary-light-3: #9c712e; - --color-primary-light-4: #7c6037; - --color-primary-light-4: #5c4f41; - --color-primary-light-6: #3c3e4a; - --color-primary-light-7: #1c2d54; - --color-primary-alpha-10: rgba(252, 163, 17, 0.1); - --color-primary-alpha-20: rgba(252, 163, 17, 0.2); - --color-primary-alpha-30: rgba(252, 163, 17, 0.3); - --color-primary-alpha-40: rgba(252, 163, 17, 0.4); - --color-primary-alpha-50: rgba(252, 163, 17, 0.5); - --color-primary-alpha-60: rgba(252, 163, 17, 0.6); - --color-primary-alpha-70: rgba(252, 163, 17, 0.7); - --color-primary-alpha-80: rgba(252, 163, 17, 0.8); - --color-primary-alpha-90: rgba(252, 163, 17, 0.9); - --color-secondary: #14213d; - --color-secondary-dark-1: #24304a; - --color-secondary-dark-2: #343f57; - --color-secondary-dark-3: #444e64; - --color-secondary-dark-4: #545d71; - --color-secondary-dark-5: #646c7e; - --color-secondary-dark-6: #747b8a; - --color-secondary-dark-7: #848a97; - --color-secondary-dark-8: #959aa4; - --color-secondary-dark-9: #a5a9b1; - --color-secondary-dark-10: #b5b8be; - --color-secondary-dark-11: #c5c7cb; - --color-secondary-dark-12: #d5d6d8; - --color-secondary-dark-13: #e5e5e5; - --color-secondary-light-1: #172545; - --color-secondary-light-2: #19294c; - --color-secondary-light-3: #1c2d54; - --color-secondary-light-4: #1e325c; - --color-secondary-alpha-10: rgba(20, 33, 61, 0.1); - --color-secondary-alpha-20: rgba(20, 33, 61, 0.2); - --color-secondary-alpha-30: rgba(20, 33, 61, 0.3); - --color-secondary-alpha-40: rgba(20, 33, 61, 0.4); - --color-secondary-alpha-50: rgba(20, 33, 61, 0.5); - --color-secondary-alpha-60: rgba(20, 33, 61, 0.6); - --color-secondary-alpha-70: rgba(20, 33, 61, 0.7); - --color-secondary-alpha-80: rgba(20, 33, 61, 0.8); - --color-secondary-alpha-90: rgba(20, 33, 61, 0.9); - /* colors */ - --color-red: #f44336; - --color-orange: #ff9800; - --color-yellow: #ffeb3b; - --color-olive: #4caf50; - --color-green: #4caf50; - --color-teal: #00bcd4; - --color-blue: #2196f3; - --color-violet: #9c27b0; - --color-purple: #9c27b0; - --color-pink: #e91e63; - --color-brown: #ff9800; - --color-grey: #9e9e9e; - /* light variants */ - --color-red-light: #f44336; - --color-orange-light: #ff9800; - --color-yellow-light: #ffeb3b; - --color-olive-light: #4caf50; - --color-green-light: #4caf50; - --color-teal-light: #00bcd4; - --color-blue-light: #2196f3; - --color-violet-light: #9c27b0; - --color-purple-light: #9c27b0; - --color-pink-light: #e91e63; - --color-brown-light: #ff9800; - --color-grey-light: #9e9e9e; - /* other colors */ - --color-black: #000000; - --color-gold: #ff9800; - --color-white: #000000; - --color-diff-removed-word-bg: #fcb9b7; - --color-diff-added-word-bg: #b9e0bb; - --color-diff-removed-row-bg: #ffebee; - --color-diff-moved-row-bg: #e3f2fd; - --color-diff-added-row-bg: #e8f5e9; - --color-diff-removed-row-border: #fa9792; - --color-diff-moved-row-border: #82c4f8; - --color-diff-added-row-border: #9ad29d; - --color-diff-inactive: #1c2d54; - --color-error-border: #fa9792; - --color-error-bg: #ffebee; - --color-error-text: #f44336; - --color-success-border: #9ad29d; - --color-success-bg: #e8f5e9; - --color-success-text: #4caf50; - --color-warning-border: #ffc670; - --color-warning-bg: #fff3e0; - --color-warning-text: #ff9800; - --color-info-border: #82c4f8; - --color-info-bg: #e3f2fd; - --color-info-text: #2196f3; - /* target-based colors */ - --color-body: #000000; - --color-box-header: #19294c; - --color-box-body: #14213d; - --color-box-body-highlight: #1e325c; - --color-text: #e5e5e5; - --color-text-dark: #f2f2f2; - --color-text-light: #cccccc; - --color-text-light-1: #b2b2b2; - --color-text-light-2: #999999; - --color-text-light-3: #7f7f7f; - --color-footer: #1c2d54; - --color-timeline: #172545; - --color-input-text: #e5e5e5; - --color-input-background: #000000; - --color-input-toggle-background: #1c2d54; - --color-input-border: #14213d; - --color-input-border-hover: var(--color-secondary-dark-1); - --color-navbar: #14213d; - --color-navbar-transparent: rgba(28, 45, 84, 0.1); - --color-light: #1c2d54; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #172545; - --color-hover: rgba(23, 37, 69, 0.5); - --color-active: rgba(23, 37, 69, 0.5); - --color-menu: #000000; - --color-card: #000000; - --color-markup-table-row: #19294c; - --color-markup-code-block: #00000010; - --color-button: #19294c; - --color-code-bg: #000000; - --color-code-sidebar-bg: #f5f5f5; - --color-shadow: #00000060; - --color-secondary-bg: #1c2d54; - --color-text-focus: #fff; - --color-expand-button: #1c2d54; - --color-placeholder-text: #9e9e9e; - --color-editor-line-highlight: #1c2d54; - --color-project-board-bg: #ffffff; - --color-project-board-light-label: #a6aab5; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-tooltip-bg: #000000f0; - --color-tooltip-text: #000000; - --color-header-bar: #000000; - --color-label-active-bg: #172545; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #fffbdd; - accent-color: var(--color-accent); - color-scheme: dark; -} -.chroma .nx { - color: #e5e5e5; -} -.chroma .c, -.chroma .c1, -.chroma .ch, -.chroma .cm, -.chroma .sd { - color: #9e9e9e; -} -.chroma .k, -.chroma .kc, -.chroma .kd, -.chroma .kn, -.chroma .kp, -.chroma .kr { - color: #f44336; -} -.chroma .o, -.chroma .ow { - color: #ff9800; -} -.chroma .s, -.chroma .s1, -.chroma .s2, -.chroma .sa, -.chroma .sb, -.chroma .sc, -.chroma .sh, -.chroma .si, -.chroma .sr, -.chroma .ss, -.chroma .sx, -.chroma .nt, -.chroma .cpf { - color: #00bcd4; -} -.chroma .m, -.chroma .mb, -.chroma .mf, -.chroma .mh, -.chroma .mi, -.chroma .mo, -.chroma .nl { - color: #9c27b0; -} -.chroma .kt, -.chroma .nc, -.chroma .nn, -.chroma .nv { - color: #ffeb3b; -} -.chroma .nf, -.chroma .nb, -.chroma .na { - color: #4caf50; -} -.chroma .bp, -.chroma .cp, -.chroma .ne, -.chroma .nd, -.chroma .se { - color: #2196f3; -} diff --git a/web_src/css/themes/theme-enterprise-light.css b/web_src/css/themes/theme-enterprise-light.css deleted file mode 100644 index b1775b4ab2d17..0000000000000 --- a/web_src/css/themes/theme-enterprise-light.css +++ /dev/null @@ -1,222 +0,0 @@ -:root { - --color-primary: #3F72AF; - --color-primary-contrast: #ffffff; - --color-primary-dark-1: #3F72AF; - --color-primary-dark-2: #37669f; - --color-primary-dark-3: #305b8f; - --color-primary-dark-4: #28507f; - --color-primary-dark-5: #20446e; - --color-primary-dark-6: #19395e; - --color-primary-dark-7: #112D4E; - --color-primary-light-1: #5884b9; - --color-primary-light-2: #7297c4; - --color-primary-light-3: #8ba9ce; - --color-primary-light-4: #a4bcd9; - --color-primary-light-4: #becee3; - --color-primary-light-6: #d7e1ee; - --color-primary-light-7: #f0f3f8; - --color-primary-alpha-10: rgba(63, 114, 175, 0.1); - --color-primary-alpha-20: rgba(63, 114, 175, 0.2); - --color-primary-alpha-30: rgba(63, 114, 175, 0.3); - --color-primary-alpha-40: rgba(63, 114, 175, 0.4); - --color-primary-alpha-50: rgba(63, 114, 175, 0.5); - --color-primary-alpha-60: rgba(63, 114, 175, 0.6); - --color-primary-alpha-70: rgba(63, 114, 175, 0.7); - --color-primary-alpha-80: rgba(63, 114, 175, 0.8); - --color-primary-alpha-90: rgba(63, 114, 175, 0.9); - --color-secondary: #DBE2EF; - --color-secondary-dark-1: #cbd4e3; - --color-secondary-dark-2: #bcc6d6; - --color-secondary-dark-3: #acb8ca; - --color-secondary-dark-4: #9daabd; - --color-secondary-dark-5: #8d9cb1; - --color-secondary-dark-6: #7e8fa5; - --color-secondary-dark-7: #6e8198; - --color-secondary-dark-8: #5f738c; - --color-secondary-dark-9: #4f6580; - --color-secondary-dark-10: #405773; - --color-secondary-dark-11: #304967; - --color-secondary-dark-12: #213b5a; - --color-secondary-dark-13: #112D4E; - --color-secondary-light-1: #e2e8f2; - --color-secondary-light-2: #e9edf5; - --color-secondary-light-3: #f0f3f8; - --color-secondary-light-4: #f7f9fc; - --color-secondary-alpha-10: rgba(219, 226, 239, 0.1); - --color-secondary-alpha-20: rgba(219, 226, 239, 0.2); - --color-secondary-alpha-30: rgba(219, 226, 239, 0.3); - --color-secondary-alpha-40: rgba(219, 226, 239, 0.4); - --color-secondary-alpha-50: rgba(219, 226, 239, 0.5); - --color-secondary-alpha-60: rgba(219, 226, 239, 0.6); - --color-secondary-alpha-70: rgba(219, 226, 239, 0.7); - --color-secondary-alpha-80: rgba(219, 226, 239, 0.8); - --color-secondary-alpha-90: rgba(219, 226, 239, 0.9); - /* colors */ - --color-red: #f44336; - --color-orange: #ff9800; - --color-yellow: #ffeb3b; - --color-olive: #4caf50; - --color-green: #4caf50; - --color-teal: #00bcd4; - --color-blue: #2196f3; - --color-violet: #9c27b0; - --color-purple: #9c27b0; - --color-pink: #e91e63; - --color-brown: #ff9800; - --color-grey: #9e9e9e; - /* light variants */ - --color-red-light: #f44336; - --color-orange-light: #ff9800; - --color-yellow-light: #ffeb3b; - --color-olive-light: #4caf50; - --color-green-light: #4caf50; - --color-teal-light: #00bcd4; - --color-blue-light: #2196f3; - --color-violet-light: #9c27b0; - --color-purple-light: #9c27b0; - --color-pink-light: #e91e63; - --color-brown-light: #ff9800; - --color-grey-light: #9e9e9e; - /* other colors */ - --color-black: #0d1b2a; - --color-gold: #ff9800; - --color-white: #ffffff; - --color-diff-removed-word-bg: #fcb9b7; - --color-diff-added-word-bg: #b9e0bb; - --color-diff-removed-row-bg: #ffebee; - --color-diff-moved-row-bg: #e3f2fd; - --color-diff-added-row-bg: #e8f5e9; - --color-diff-removed-row-border: #fa9792; - --color-diff-moved-row-border: #82c4f8; - --color-diff-added-row-border: #9ad29d; - --color-diff-inactive: #f0f3f8; - --color-error-border: #fa9792; - --color-error-bg: #ffebee; - --color-error-text: #f44336; - --color-success-border: #9ad29d; - --color-success-bg: #e8f5e9; - --color-success-text: #4caf50; - --color-warning-border: #ffc670; - --color-warning-bg: #fff3e0; - --color-warning-text: #ff9800; - --color-info-border: #82c4f8; - --color-info-bg: #e3f2fd; - --color-info-text: #2196f3; - /* target-based colors */ - --color-body: #ffffff; - --color-box-header: #e9edf5; - --color-box-body: #f0f3f8; - --color-box-body-highlight: #f7f9fc; - --color-text: #212121; - --color-text-dark: #141414; - --color-text-light: #545454; - --color-text-light-1: #7a7a7a; - --color-text-light-2: #a1a1a1; - --color-text-light-3: #c7c7c7; - --color-footer: #f0f3f8; - --color-timeline: #e2e8f2; - --color-input-text: #212121; - --color-input-background: #ffffff; - --color-input-toggle-background: #f0f3f8; - --color-input-border: #DBE2EF; - --color-input-border-hover: var(--color-secondary-dark-1); - --color-navbar: #f0f3f8; - --color-navbar-transparent: rgba(240, 243, 248, 0.1); - --color-light: #f7f9fc; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #e2e8f2; - --color-hover: rgba(226, 232, 242, 0.5); - --color-active: rgba(226, 232, 242, 0.5); - --color-menu: #ffffff; - --color-card: #ffffff; - --color-markup-table-row: #e9edf5; - --color-markup-code-block: #00000010; - --color-button: #e9edf5; - --color-code-bg: #ffffff; - --color-code-sidebar-bg: #f5f5f5; - --color-shadow: #00000060; - --color-secondary-bg: #f0f3f8; - --color-text-focus: #fff; - --color-expand-button: #f0f3f8; - --color-placeholder-text: #9e9e9e; - --color-editor-line-highlight: #f0f3f8; - --color-project-board-bg: #ffffff; - --color-project-board-light-label: #a6aab5; - --color-caret: var(--color-text); - /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-tooltip-bg: #000000f0; - --color-tooltip-text: #ffffff; - --color-header-bar: #ffffff; - --color-label-active-bg: #e2e8f2; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #fffbdd; - accent-color: var(--color-accent); - color-scheme: light; -} -.chroma .nx { - color: #112D4E; -} -.chroma .c, -.chroma .c1, -.chroma .ch, -.chroma .cm, -.chroma .sd { - color: #9e9e9e; -} -.chroma .k, -.chroma .kc, -.chroma .kd, -.chroma .kn, -.chroma .kp, -.chroma .kr { - color: #f44336; -} -.chroma .o, -.chroma .ow { - color: #ff9800; -} -.chroma .s, -.chroma .s1, -.chroma .s2, -.chroma .sa, -.chroma .sb, -.chroma .sc, -.chroma .sh, -.chroma .si, -.chroma .sr, -.chroma .ss, -.chroma .sx, -.chroma .nt, -.chroma .cpf { - color: #2196f3; -} -.chroma .m, -.chroma .mb, -.chroma .mf, -.chroma .mh, -.chroma .mi, -.chroma .mo, -.chroma .nl { - color: #9c27b0; -} -.chroma .kt, -.chroma .nc, -.chroma .nn, -.chroma .nv { - color: #ffeb3b; -} -.chroma .nf, -.chroma .nb, -.chroma .na { - color: #4caf50; -} -.chroma .bp, -.chroma .cp, -.chroma .ne, -.chroma .nd, -.chroma .se { - color: #2196f3; -} From 758131ad98df76871d682ff6b5e31c83d2c72eb5 Mon Sep 17 00:00:00 2001 From: HesterG Date: Mon, 22 May 2023 18:21:50 +0800 Subject: [PATCH 12/54] remove --- web_src/js/components/RepoActionView.vue | 5 ----- 1 file changed, 5 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 4827f6a9a5525..b75a01c199ba9 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -112,7 +112,6 @@ import {SvgIcon} from '../svg.js'; import ActionRunStatus from './ActionRunStatus.vue'; import {createApp} from 'vue'; import AnsiToHTML from 'ansi-to-html'; -import { element } from 'prop-types'; const {csrfToken} = window.config; @@ -625,10 +624,6 @@ export function ansiLogToHTML(line) { display: flex; justify-content: space-between; align-items: center; -} - -.job-info-header .job-info-header-title { - font-size: 150%; padding: 10px; border-bottom: 1px solid var(--color-console-border); background-color: var(--color-console-bg); From d7bfe881729445ace281fa28eb0e7168a236f2a8 Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 23 May 2023 09:02:06 +0800 Subject: [PATCH 13/54] save --- web_src/js/components/RepoActionView.vue | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index b75a01c199ba9..a0df463358c4f 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -73,11 +73,11 @@
- + {{ locale.jobOptions.showTimeStamp }} - + {{ locale.jobOptions.showFullScreen }}
@@ -644,6 +644,17 @@ export function ansiLogToHTML(line) { font-size: 12px; } +.action-job-menu, .action-job-menu:after { + background-color: var(--color-secondary-dark-8); + border-color: var(--color-secondary-dark-7); +} + +.action-job-menu .item span { + display: inline-block; + height: 16px; + width: 16px; +} + .job-step-container { background-color: var(--color-console-bg); max-height: 100%; From d5411847370ea0b51cae6533ee480e52aaa0160d Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 23 May 2023 15:27:09 +0800 Subject: [PATCH 14/54] add show fullscreen option --- web_src/js/components/RepoActionView.vue | 54 +++++++++++++++++++----- 1 file changed, 44 insertions(+), 10 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index a0df463358c4f..ff244458c46ce 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -76,8 +76,8 @@ {{ locale.jobOptions.showTimeStamp }} - - + + {{ locale.jobOptions.showFullScreen }}
@@ -112,6 +112,7 @@ import {SvgIcon} from '../svg.js'; import ActionRunStatus from './ActionRunStatus.vue'; import {createApp} from 'vue'; import AnsiToHTML from 'ansi-to-html'; +import {toggleElem} from '../utils/dom.js'; const {csrfToken} = window.config; @@ -140,6 +141,7 @@ const sfc = { onHoverRerunIndex: -1, menuVisible: false, timeStampVisible: false, + isFullScreen: false, // provided by backend run: { @@ -275,13 +277,12 @@ const sfc = { lineNumber.textContent = line.index; div.append(lineNumber); - // TODO: Support displaying time optionally const logTimeStamp = document.createElement('span'); logTimeStamp.className = 'log-time-stamp'; - const date = new Date(parseFloat(line.timestamp*1000)); - const timeStamp = date.toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'long', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit'}) - console.log('parsed date:', timeStamp); + const date = new Date(parseFloat(line.timestamp * 1000)); + const timeStamp = date.toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'long', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit'}); logTimeStamp.innerHTML = timeStamp; + logTimeStamp.style.display = this.timeStampVisible ? 'block' : 'none'; const logMessage = document.createElement('span'); logMessage.className = 'log-msg'; logMessage.innerHTML = ansiLogToHTML(line.message); @@ -375,7 +376,26 @@ const sfc = { toggleTimeStamps() { this.timeStampVisible = !this.timeStampVisible; for (const el of document.querySelectorAll('.log-time-stamp')) { - el.style.display = this.timeStampVisible? 'block' : 'none'; + el.style.display = this.timeStampVisible ? 'block' : 'none'; + } + }, + + toggleFullScreen() { + this.isFullScreen = !this.isFullScreen; + const fullScreenEl = document.querySelector('.action-view-right'); + const outerEl = document.querySelector('.full.height'); + const actionBodyEl = document.querySelector('.action-view-body'); + const headerEl = document.querySelector('.ui.main.menu'); + const contentEl = document.querySelector('.page-content.repository'); + const footerEl = document.querySelector('.page-footer'); + toggleElem(headerEl, !this.isFullScreen); + toggleElem(contentEl, !this.isFullScreen); + toggleElem(footerEl, !this.isFullScreen); + // move .action-view-right to new parent + if (this.isFullScreen) { + outerEl.append(fullScreenEl); + } else { + actionBodyEl.append(fullScreenEl); } } }, @@ -620,6 +640,11 @@ export function ansiLogToHTML(line) { flex-direction: column; } +.full.height > .action-view-right { + width: 100%; + height: 100%; +} + .job-info-header { display: flex; justify-content: space-between; @@ -644,9 +669,19 @@ export function ansiLogToHTML(line) { font-size: 12px; } -.action-job-menu, .action-job-menu:after { +.ui.dropdown .action-job-menu, .ui.pointing.dropdown > .menu.action-job-menu:after { + background-color: var(--color-secondary-dark-10); + border-color: var(--color-secondary-dark-9); + box-shadow: -1px -1px 0 0 var(--color-secondary-dark-9); +} + +.ui.dropdown .action-job-menu .item { + color: var(--color-secondary-dark-3); +} + +.ui.dropdown .action-job-menu .item:hover { background-color: var(--color-secondary-dark-8); - border-color: var(--color-secondary-dark-7); + color: var(--color-console-fg); } .action-job-menu .item span { @@ -758,7 +793,6 @@ export function ansiLogToHTML(line) { .log-time-stamp { margin-left: 10px; - display: none; } /* TODO: group support From aeeec87026fd8a64081617b2e36e34fab81f67bb Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 23 May 2023 15:45:32 +0800 Subject: [PATCH 15/54] update icon --- web_src/js/components/RepoActionView.vue | 2 +- web_src/js/svg.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index ff244458c46ce..539418382bc00 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -70,7 +70,7 @@
- +
diff --git a/web_src/js/svg.js b/web_src/js/svg.js index b175bfe72682f..b02e8ae0dcde0 100644 --- a/web_src/js/svg.js +++ b/web_src/js/svg.js @@ -65,7 +65,7 @@ import octiconTag from '../../public/img/svg/octicon-tag.svg'; import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg'; import octiconX from '../../public/img/svg/octicon-x.svg'; import octiconXCircleFill from '../../public/img/svg/octicon-x-circle-fill.svg'; -import octiconTools from '../../public/img/svg/octicon-tools.svg'; +import octiconGear from '../../public/img/svg/octicon-gear.svg'; const svgs = { 'gitea-double-chevron-left': giteaDoubleChevronLeft, @@ -134,7 +134,7 @@ const svgs = { 'octicon-triangle-down': octiconTriangleDown, 'octicon-x': octiconX, 'octicon-x-circle-fill': octiconXCircleFill, - 'octicon-tools': octiconTools, + 'octicon-gear': octiconGear, }; // TODO: use a more general approach to access SVG icons. From defd8c4effd558f7c68cd2d220ff8b26199fd294 Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 23 May 2023 16:01:22 +0800 Subject: [PATCH 16/54] adjust colors --- web_src/css/base.css | 3 +++ web_src/js/components/RepoActionView.vue | 10 +++++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index eee364bf1db65..b439e68195d2c 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -74,6 +74,9 @@ --color-console-border: #ffffff16; --color-console-hover-bg: #ffffff16; --color-console-active-bg: #353a3f; + --color-console-dropdown-bg: #333333; + --color-console-dropdown-border: #434343; + --color-console-dropdown-shadow: #434343; /* named colors */ --color-red: #db2828; --color-orange: #f2711c; diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 539418382bc00..5764090139c96 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -70,7 +70,7 @@
- +
@@ -670,9 +670,9 @@ export function ansiLogToHTML(line) { } .ui.dropdown .action-job-menu, .ui.pointing.dropdown > .menu.action-job-menu:after { - background-color: var(--color-secondary-dark-10); - border-color: var(--color-secondary-dark-9); - box-shadow: -1px -1px 0 0 var(--color-secondary-dark-9); + background-color: var(--color-console-dropdown-bg); + border-color: var(--color-console-dropdown-border); + box-shadow: -1px -1px 0 0 var(--color-console-dropdown-shadow); } .ui.dropdown .action-job-menu .item { @@ -680,7 +680,7 @@ export function ansiLogToHTML(line) { } .ui.dropdown .action-job-menu .item:hover { - background-color: var(--color-secondary-dark-8); + background-color: var(--color-console-hover-bg); color: var(--color-console-fg); } From e9977cec3df94156cf652670ee9f1c2e83c4f249 Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 23 May 2023 16:27:18 +0800 Subject: [PATCH 17/54] adjust timestamp --- web_src/js/components/RepoActionView.vue | 3 ++- web_src/js/utils.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 5764090139c96..8346fc1f7f3d3 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -113,6 +113,7 @@ import ActionRunStatus from './ActionRunStatus.vue'; import {createApp} from 'vue'; import AnsiToHTML from 'ansi-to-html'; import {toggleElem} from '../utils/dom.js'; +import {getCurrentLocale} from '../utils.js'; const {csrfToken} = window.config; @@ -280,7 +281,7 @@ const sfc = { const logTimeStamp = document.createElement('span'); logTimeStamp.className = 'log-time-stamp'; const date = new Date(parseFloat(line.timestamp * 1000)); - const timeStamp = date.toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'long', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit'}); + const timeStamp = date.toLocaleString(getCurrentLocale(), {year: 'numeric', month: 'short', day: '2-digit', weekday: 'short', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit', timeZone: 'UTC', timeZoneName: 'short'}); logTimeStamp.innerHTML = timeStamp; logTimeStamp.style.display = this.timeStampVisible ? 'block' : 'none'; const logMessage = document.createElement('span'); diff --git a/web_src/js/utils.js b/web_src/js/utils.js index 2a2d6df0b41ec..6bee4f083630b 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -60,7 +60,7 @@ export function parseUrl(str) { } // return current locale chosen by user -function getCurrentLocale() { +export function getCurrentLocale() { return document.documentElement.lang; } From 09297131276807a32254cebf7d6050deed09b18d Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 23 May 2023 16:48:33 +0800 Subject: [PATCH 18/54] avoid shrink --- web_src/js/components/RepoActionView.vue | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 8346fc1f7f3d3..adbd993d979ca 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -670,7 +670,8 @@ export function ansiLogToHTML(line) { font-size: 12px; } -.ui.dropdown .action-job-menu, .ui.pointing.dropdown > .menu.action-job-menu:after { +.ui.dropdown .action-job-menu, +.ui.pointing.dropdown > .menu.action-job-menu:after { background-color: var(--color-console-dropdown-bg); border-color: var(--color-console-dropdown-border); box-shadow: -1px -1px 0 0 var(--color-console-dropdown-shadow); @@ -738,6 +739,7 @@ export function ansiLogToHTML(line) { .action-view-left { max-width: none; overflow-y: hidden; + flex-shrink: 0; } } @@ -779,7 +781,8 @@ export function ansiLogToHTML(line) { user-select: none; } -.job-step-section .job-step-logs .job-log-line .log-time { +.job-log-line .log-time, +.log-time-stamp { color: var(--color-grey-light); margin-left: 10px; white-space: nowrap; @@ -792,10 +795,6 @@ export function ansiLogToHTML(line) { margin-left: 10px; } -.log-time-stamp { - margin-left: 10px; -} - /* TODO: group support .job-log-group { From 14886246c568d272694d5e326f8d10af93ed0d32 Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 23 May 2023 18:28:53 +0800 Subject: [PATCH 19/54] add drone-like option --- options/locale/locale_en-US.ini | 1 + templates/repo/actions/view.tmpl | 1 + web_src/js/components/RepoActionView.vue | 49 ++++++++++++++++++------ web_src/js/utils/dom.js | 1 + 4 files changed, 41 insertions(+), 11 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index a76eef04255fa..ce6aaaac0a86d 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -3439,6 +3439,7 @@ need_approval_desc = Need approval to run workflows for fork pull request. options.show_timestamp = Show timestamps options.show_full_screen = Show full screen +options.show_log_duration = Show log duration [projects] type-1.display_name = Individual Project diff --git a/templates/repo/actions/view.tmpl b/templates/repo/actions/view.tmpl index 1ff71c2aa8b40..2a3ed2e57f8c0 100644 --- a/templates/repo/actions/view.tmpl +++ b/templates/repo/actions/view.tmpl @@ -21,6 +21,7 @@ data-locale-artifacts-title="{{$.locale.Tr "artifacts"}}" data-locale-show-timestamp="{{.locale.Tr "actions.options.show_timestamp"}}" data-locale-show-full-screen="{{.locale.Tr "actions.options.show_full_screen"}}" + data-locale-show-log-duration="{{.locale.Tr "actions.options.show_log_duration"}}" >
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index adbd993d979ca..3275cf3ff2cfc 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -72,10 +72,15 @@
- - + + + {{ locale.jobOptions.showLogduration }} + + + {{ locale.jobOptions.showTimeStamp }} +
{{ locale.jobOptions.showFullScreen }} @@ -141,8 +146,11 @@ const sfc = { artifacts: [], onHoverRerunIndex: -1, menuVisible: false, - timeStampVisible: false, isFullScreen: false, + timeVisible: { + 'stamp': false, + 'duration': false, + }, // provided by backend run: { @@ -268,7 +276,7 @@ const sfc = { this.fetchPost(`${this.run.link}/approve`); }, - createLogLine(line) { + createLogLine(line, startTime) { const div = document.createElement('div'); div.classList.add('job-log-line'); div._jobLogTime = line.timestamp; @@ -281,23 +289,33 @@ const sfc = { const logTimeStamp = document.createElement('span'); logTimeStamp.className = 'log-time-stamp'; const date = new Date(parseFloat(line.timestamp * 1000)); + + const logTimeDuration = document.createElement('span'); + logTimeDuration.className = 'log-time-duration'; + const duration = Math.floor(parseFloat(line.timestamp) - parseFloat(startTime)); + logTimeDuration.innerHTML = `${duration}s`; + toggleElem(logTimeDuration, this.timeVisible.duration); + const timeStamp = date.toLocaleString(getCurrentLocale(), {year: 'numeric', month: 'short', day: '2-digit', weekday: 'short', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit', timeZone: 'UTC', timeZoneName: 'short'}); logTimeStamp.innerHTML = timeStamp; - logTimeStamp.style.display = this.timeStampVisible ? 'block' : 'none'; + toggleElem(logTimeStamp, this.timeVisible.stamp); const logMessage = document.createElement('span'); logMessage.className = 'log-msg'; logMessage.innerHTML = ansiLogToHTML(line.message); div.append(logTimeStamp); div.append(logMessage); + div.append(logTimeDuration); return div; }, appendLogs(stepIndex, logLines) { + if (!logLines.length) return; + const startTime = logLines[0].timestamp; for (const line of logLines) { // TODO: group support: ##[group]GroupTitle , ##[endgroup] const el = this.getLogsContainer(stepIndex); - el.append(this.createLogLine(line)); + el.append(this.createLogLine(line, startTime)); } }, @@ -374,10 +392,18 @@ const sfc = { if (this.menuVisible) this.menuVisible = false; }, - toggleTimeStamps() { - this.timeStampVisible = !this.timeStampVisible; - for (const el of document.querySelectorAll('.log-time-stamp')) { - el.style.display = this.timeStampVisible ? 'block' : 'none'; + toggleTime(type) { + const otherType = 'durationstamp'.replace(type, ''); + this.timeVisible[type] = !this.timeVisible[type]; + for (const el of document.querySelectorAll(`.log-time-${type}`)) { + toggleElem(el, this.timeVisible[type]); + } + + if (this.timeVisible[type] && this.timeVisible[otherType]) { + this.timeVisible[otherType] = false; + for (const el of document.querySelectorAll(`.log-time-${otherType}`)) { + toggleElem(el, false); + } } }, @@ -436,6 +462,7 @@ export function initRepositoryActionView() { jobOptions: { showTimeStamp: el.getAttribute('data-locale-show-timestamp'), showFullScreen: el.getAttribute('data-locale-show-full-screen'), + showLogduration: el.getAttribute('data-locale-show-log-duration'), }, } }); @@ -774,7 +801,7 @@ export function ansiLogToHTML(line) { background-color: var(--color-console-hover-bg); } -.job-step-section .job-step-logs .job-log-line .line-num { +.job-step-section .job-step-logs .job-log-line .line-num, .log-time-duration { width: 48px; color: var(--color-grey-light); text-align: right; diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index cdc52b1a74258..829b21c90d101 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -41,6 +41,7 @@ export function hideElem(el) { } export function toggleElem(el, force) { + console.log('toggle', el, force) elementsCall(el, toggleShown, force); } From c2248bc7f17fb0d1d25cb5c0f7c78e57a511d527 Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 23 May 2023 18:31:57 +0800 Subject: [PATCH 20/54] remove log --- web_src/js/utils/dom.js | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index 829b21c90d101..cdc52b1a74258 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -41,7 +41,6 @@ export function hideElem(el) { } export function toggleElem(el, force) { - console.log('toggle', el, force) elementsCall(el, toggleShown, force); } From a6086d1f059622794551e554dd6ebfcb1cafea40 Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 23 May 2023 19:23:06 +0800 Subject: [PATCH 21/54] fix lint --- web_src/js/components/RepoActionView.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 3275cf3ff2cfc..995917878c5b0 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -80,7 +80,7 @@ {{ locale.jobOptions.showTimeStamp }} -
+
{{ locale.jobOptions.showFullScreen }} @@ -392,6 +392,7 @@ const sfc = { if (this.menuVisible) this.menuVisible = false; }, + // show at most one of log duration and timestamp toggleTime(type) { const otherType = 'durationstamp'.replace(type, ''); this.timeVisible[type] = !this.timeVisible[type]; From f502186cd2d8cf03c30208d26ec03d7f86166134 Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 24 May 2023 11:22:51 +0800 Subject: [PATCH 22/54] comments --- web_src/js/components/RepoActionView.vue | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 995917878c5b0..0be933e119ed8 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -72,11 +72,11 @@
- + {{ locale.jobOptions.showLogduration }} - + {{ locale.jobOptions.showTimeStamp }} @@ -286,19 +286,20 @@ const sfc = { lineNumber.textContent = line.index; div.append(lineNumber); + // for "Show timestamps" const logTimeStamp = document.createElement('span'); logTimeStamp.className = 'log-time-stamp'; const date = new Date(parseFloat(line.timestamp * 1000)); - + const timeStamp = date.toLocaleString(getCurrentLocale(), {year: 'numeric', month: 'short', day: '2-digit', weekday: 'short', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit', timeZone: 'UTC', timeZoneName: 'short'}); + logTimeStamp.innerHTML = timeStamp; + toggleElem(logTimeStamp, this.timeVisible.stamp); + // for "Show log duration" const logTimeDuration = document.createElement('span'); logTimeDuration.className = 'log-time-duration'; const duration = Math.floor(parseFloat(line.timestamp) - parseFloat(startTime)); logTimeDuration.innerHTML = `${duration}s`; toggleElem(logTimeDuration, this.timeVisible.duration); - const timeStamp = date.toLocaleString(getCurrentLocale(), {year: 'numeric', month: 'short', day: '2-digit', weekday: 'short', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit', timeZone: 'UTC', timeZoneName: 'short'}); - logTimeStamp.innerHTML = timeStamp; - toggleElem(logTimeStamp, this.timeVisible.stamp); const logMessage = document.createElement('span'); logMessage.className = 'log-msg'; logMessage.innerHTML = ansiLogToHTML(line.message); @@ -392,14 +393,13 @@ const sfc = { if (this.menuVisible) this.menuVisible = false; }, - // show at most one of log duration and timestamp - toggleTime(type) { + toggleTimeDisplay(type) { const otherType = 'durationstamp'.replace(type, ''); this.timeVisible[type] = !this.timeVisible[type]; for (const el of document.querySelectorAll(`.log-time-${type}`)) { toggleElem(el, this.timeVisible[type]); } - + // show at most one of log duration and timestamp (can be both invisible) if (this.timeVisible[type] && this.timeVisible[otherType]) { this.timeVisible[otherType] = false; for (const el of document.querySelectorAll(`.log-time-${otherType}`)) { @@ -802,7 +802,8 @@ export function ansiLogToHTML(line) { background-color: var(--color-console-hover-bg); } -.job-step-section .job-step-logs .job-log-line .line-num, .log-time-duration { +/* class names 'log-time-duration' and 'log-time-stamp' are used in the method toggleTimeDisplay */ +.job-log-line .line-num, .log-time-duration { width: 48px; color: var(--color-grey-light); text-align: right; From 6f30916407108cec216a0f033fcbb27f294dfb2d Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 24 May 2023 11:26:57 +0800 Subject: [PATCH 23/54] fix lint --- web_src/js/components/RepoActionView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 0be933e119ed8..43b3fec20ca88 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -699,7 +699,7 @@ export function ansiLogToHTML(line) { } .ui.dropdown .action-job-menu, -.ui.pointing.dropdown > .menu.action-job-menu:after { +.ui.pointing.dropdown > .menu.action-job-menu::after { background-color: var(--color-console-dropdown-bg); border-color: var(--color-console-dropdown-border); box-shadow: -1px -1px 0 0 var(--color-console-dropdown-shadow); From cd0b2b2f4994778483fecea2201d48590127ece1 Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 24 May 2023 19:15:44 +0800 Subject: [PATCH 24/54] fix --- web_src/js/components/RepoActionView.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 43b3fec20ca88..381735591b96c 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -672,6 +672,11 @@ export function ansiLogToHTML(line) { .full.height > .action-view-right { width: 100%; height: 100%; + padding: 0; +} + +.full.height > .action-view-right > .job-step-container { + height: 100%; } .job-info-header { @@ -685,6 +690,7 @@ export function ansiLogToHTML(line) { top: 0; border-radius: var(--border-radius) var(--border-radius) 0 0; height: 60px; + z-index: 1; } .job-info-header .job-info-header-title { @@ -767,7 +773,6 @@ export function ansiLogToHTML(line) { .action-view-left { max-width: none; overflow-y: hidden; - flex-shrink: 0; } } From 524275e7217cdbcd60d027d56a8c0a6ed2a1e351 Mon Sep 17 00:00:00 2001 From: HesterG Date: Thu, 25 May 2023 09:08:06 +0800 Subject: [PATCH 25/54] change timestamp and textcontent --- web_src/js/components/RepoActionView.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 381735591b96c..65324a750e9dd 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -290,14 +290,14 @@ const sfc = { const logTimeStamp = document.createElement('span'); logTimeStamp.className = 'log-time-stamp'; const date = new Date(parseFloat(line.timestamp * 1000)); - const timeStamp = date.toLocaleString(getCurrentLocale(), {year: 'numeric', month: 'short', day: '2-digit', weekday: 'short', hour: '2-digit', hour12: false, minute: '2-digit', second: '2-digit', timeZone: 'UTC', timeZoneName: 'short'}); - logTimeStamp.innerHTML = timeStamp; + const timeStamp = date.toLocaleString(getCurrentLocale(), {timeZoneName: 'short'}); + logTimeStamp.textContent = timeStamp; toggleElem(logTimeStamp, this.timeVisible.stamp); // for "Show log duration" const logTimeDuration = document.createElement('span'); logTimeDuration.className = 'log-time-duration'; const duration = Math.floor(parseFloat(line.timestamp) - parseFloat(startTime)); - logTimeDuration.innerHTML = `${duration}s`; + logTimeDuration.textContent = `${duration}s`; toggleElem(logTimeDuration, this.timeVisible.duration); const logMessage = document.createElement('span'); From ba2c6e89d29a13c8eeac79b9ae80e39f225bd06f Mon Sep 17 00:00:00 2001 From: HesterG Date: Thu, 25 May 2023 17:47:12 +0800 Subject: [PATCH 26/54] use relative-time --- web_src/js/components/RepoActionView.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 65324a750e9dd..b4f73698f138d 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -287,11 +287,12 @@ const sfc = { div.append(lineNumber); // for "Show timestamps" - const logTimeStamp = document.createElement('span'); + const logTimeStamp = document.createElement('relative-time'); logTimeStamp.className = 'log-time-stamp'; const date = new Date(parseFloat(line.timestamp * 1000)); - const timeStamp = date.toLocaleString(getCurrentLocale(), {timeZoneName: 'short'}); - logTimeStamp.textContent = timeStamp; + logTimeStamp.setAttribute('datetime', date); + logTimeStamp.setAttribute('format', 'datetime'); + logTimeStamp.setAttribute('time-zone-name', 'short'); toggleElem(logTimeStamp, this.timeVisible.stamp); // for "Show log duration" const logTimeDuration = document.createElement('span'); From 0a4b3ab9483fa7267201a1dc8d01364b46898c2a Mon Sep 17 00:00:00 2001 From: HesterG Date: Thu, 25 May 2023 17:49:55 +0800 Subject: [PATCH 27/54] revert --- web_src/js/components/RepoActionView.vue | 1 - web_src/js/utils.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index b4f73698f138d..52f6efe9304d8 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -118,7 +118,6 @@ import ActionRunStatus from './ActionRunStatus.vue'; import {createApp} from 'vue'; import AnsiToHTML from 'ansi-to-html'; import {toggleElem} from '../utils/dom.js'; -import {getCurrentLocale} from '../utils.js'; const {csrfToken} = window.config; diff --git a/web_src/js/utils.js b/web_src/js/utils.js index 6bee4f083630b..2a2d6df0b41ec 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -60,7 +60,7 @@ export function parseUrl(str) { } // return current locale chosen by user -export function getCurrentLocale() { +function getCurrentLocale() { return document.documentElement.lang; } From f68e122045a1e9f6121b49958ca981f7cdbfd32b Mon Sep 17 00:00:00 2001 From: HesterG Date: Fri, 26 May 2023 09:06:51 +0800 Subject: [PATCH 28/54] revert --- web_src/js/components/RepoActionView.vue | 8 ++++---- web_src/js/utils.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 52f6efe9304d8..65324a750e9dd 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -118,6 +118,7 @@ import ActionRunStatus from './ActionRunStatus.vue'; import {createApp} from 'vue'; import AnsiToHTML from 'ansi-to-html'; import {toggleElem} from '../utils/dom.js'; +import {getCurrentLocale} from '../utils.js'; const {csrfToken} = window.config; @@ -286,12 +287,11 @@ const sfc = { div.append(lineNumber); // for "Show timestamps" - const logTimeStamp = document.createElement('relative-time'); + const logTimeStamp = document.createElement('span'); logTimeStamp.className = 'log-time-stamp'; const date = new Date(parseFloat(line.timestamp * 1000)); - logTimeStamp.setAttribute('datetime', date); - logTimeStamp.setAttribute('format', 'datetime'); - logTimeStamp.setAttribute('time-zone-name', 'short'); + const timeStamp = date.toLocaleString(getCurrentLocale(), {timeZoneName: 'short'}); + logTimeStamp.textContent = timeStamp; toggleElem(logTimeStamp, this.timeVisible.stamp); // for "Show log duration" const logTimeDuration = document.createElement('span'); diff --git a/web_src/js/utils.js b/web_src/js/utils.js index 2a2d6df0b41ec..6bee4f083630b 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -60,7 +60,7 @@ export function parseUrl(str) { } // return current locale chosen by user -function getCurrentLocale() { +export function getCurrentLocale() { return document.documentElement.lang; } From 5e662223bdb5a7d765fce4e6f762f745c987539c Mon Sep 17 00:00:00 2001 From: HesterG Date: Fri, 26 May 2023 10:36:25 +0800 Subject: [PATCH 29/54] declare type and remove styles --- web_src/js/components/RepoActionView.vue | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 65324a750e9dd..b5aba3e2ea9c0 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -394,6 +394,7 @@ const sfc = { }, toggleTimeDisplay(type) { + if (type !== 'duration' && type !== 'stamp') return; const otherType = 'durationstamp'.replace(type, ''); this.timeVisible[type] = !this.timeVisible[type]; for (const el of document.querySelectorAll(`.log-time-${type}`)) { @@ -704,22 +705,6 @@ export function ansiLogToHTML(line) { font-size: 12px; } -.ui.dropdown .action-job-menu, -.ui.pointing.dropdown > .menu.action-job-menu::after { - background-color: var(--color-console-dropdown-bg); - border-color: var(--color-console-dropdown-border); - box-shadow: -1px -1px 0 0 var(--color-console-dropdown-shadow); -} - -.ui.dropdown .action-job-menu .item { - color: var(--color-secondary-dark-3); -} - -.ui.dropdown .action-job-menu .item:hover { - background-color: var(--color-console-hover-bg); - color: var(--color-console-fg); -} - .action-job-menu .item span { display: inline-block; height: 16px; From b3a4ba0571f36a35e955393a1d3ad8da679d3256 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 26 May 2023 10:53:56 +0800 Subject: [PATCH 30/54] add comments about why using native elements for log lines --- web_src/js/components/RepoActionView.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index b5aba3e2ea9c0..a290855307782 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -103,7 +103,8 @@ {{ jobStep.duration }}
- +
From ea3c8a0a59e10a777481961bbefb476298fe327e Mon Sep 17 00:00:00 2001 From: HesterG Date: Fri, 26 May 2023 10:59:12 +0800 Subject: [PATCH 31/54] remove --- web_src/css/base.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 70dbfb76b8c51..a6576a4fe902b 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -75,9 +75,6 @@ --color-console-border: #ffffff16; --color-console-hover-bg: #ffffff16; --color-console-active-bg: #353a3f; - --color-console-dropdown-bg: #333333; - --color-console-dropdown-border: #434343; - --color-console-dropdown-shadow: #434343; /* named colors */ --color-red: #db2828; --color-orange: #f2711c; From 15dbbd8b7f17700baf6cd57c2ee4eab55381d29e Mon Sep 17 00:00:00 2001 From: HesterG Date: Mon, 29 May 2023 16:44:01 +0800 Subject: [PATCH 32/54] use starttime from backend --- web_src/js/components/RepoActionView.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index a290855307782..42a55c144de07 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -311,9 +311,7 @@ const sfc = { return div; }, - appendLogs(stepIndex, logLines) { - if (!logLines.length) return; - const startTime = logLines[0].timestamp; + appendLogs(stepIndex, logLines, startTime) { for (const line of logLines) { // TODO: group support: ##[group]GroupTitle , ##[endgroup] const el = this.getLogsContainer(stepIndex); @@ -362,7 +360,7 @@ const sfc = { for (const logs of response.logs.stepsLog) { // save the cursor, it will be passed to backend next time this.currentJobStepsStates[logs.step].cursor = logs.cursor; - this.appendLogs(logs.step, logs.lines); + this.appendLogs(logs.step, logs.lines, logs.started); } if (this.run.done && this.intervalID) { From 47d38f1a53ec485f7ef869124d37856c436e29d3 Mon Sep 17 00:00:00 2001 From: HesterG Date: Mon, 29 May 2023 17:26:14 +0800 Subject: [PATCH 33/54] rename variables and use if else --- web_src/js/components/RepoActionView.vue | 45 +++++++++++++++--------- 1 file changed, 28 insertions(+), 17 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 42a55c144de07..ddd09d22493b0 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -73,11 +73,11 @@
- + {{ locale.jobOptions.showLogduration }} - + {{ locale.jobOptions.showTimeStamp }}
@@ -149,8 +149,8 @@ const sfc = { menuVisible: false, isFullScreen: false, timeVisible: { - 'stamp': false, - 'duration': false, + showStamp: false, + showDuration: false, }, // provided by backend @@ -293,13 +293,13 @@ const sfc = { const date = new Date(parseFloat(line.timestamp * 1000)); const timeStamp = date.toLocaleString(getCurrentLocale(), {timeZoneName: 'short'}); logTimeStamp.textContent = timeStamp; - toggleElem(logTimeStamp, this.timeVisible.stamp); + toggleElem(logTimeStamp, this.timeVisible.showStamp); // for "Show log duration" const logTimeDuration = document.createElement('span'); logTimeDuration.className = 'log-time-duration'; const duration = Math.floor(parseFloat(line.timestamp) - parseFloat(startTime)); logTimeDuration.textContent = `${duration}s`; - toggleElem(logTimeDuration, this.timeVisible.duration); + toggleElem(logTimeDuration, this.timeVisible.showDuration); const logMessage = document.createElement('span'); logMessage.className = 'log-msg'; @@ -392,18 +392,29 @@ const sfc = { if (this.menuVisible) this.menuVisible = false; }, + // show at most one of log duration and timestamp (can be both invisible) toggleTimeDisplay(type) { - if (type !== 'duration' && type !== 'stamp') return; - const otherType = 'durationstamp'.replace(type, ''); - this.timeVisible[type] = !this.timeVisible[type]; - for (const el of document.querySelectorAll(`.log-time-${type}`)) { - toggleElem(el, this.timeVisible[type]); - } - // show at most one of log duration and timestamp (can be both invisible) - if (this.timeVisible[type] && this.timeVisible[otherType]) { - this.timeVisible[otherType] = false; - for (const el of document.querySelectorAll(`.log-time-${otherType}`)) { - toggleElem(el, false); + if (type === 'stamp') { + this.timeVisible.showStamp = !this.timeVisible.showStamp; + for (const el of document.querySelectorAll('.log-time-stamp')) { + toggleElem(el, this.timeVisible.showStamp); + } + if (this.timeVisible.showStamp && this.timeVisible.showDuration) { + this.timeVisible.showDuration = false; + for (const el of document.querySelectorAll('.log-time-duration')) { + toggleElem(el, false); + } + } + } else { + this.timeVisible.showDuration = !this.timeVisible.showDuration; + for (const el of document.querySelectorAll('.log-time-duration')) { + toggleElem(el, this.timeVisible.showDuration); + } + if (this.timeVisible.showDuration && this.timeVisible.showStamp) { + this.timeVisible.showStamp = false; + for (const el of document.querySelectorAll('.log-time-stamp')) { + toggleElem(el, false); + } } } }, From 629d14d394211fa11afd97a96629d7fa929c3b80 Mon Sep 17 00:00:00 2001 From: HesterG Date: Mon, 29 May 2023 18:07:34 +0800 Subject: [PATCH 34/54] update toggleTimeDisplay --- web_src/js/components/RepoActionView.vue | 48 ++++++++++-------------- 1 file changed, 19 insertions(+), 29 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index ddd09d22493b0..3fc26bcf3e0e8 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -73,11 +73,11 @@
- + {{ locale.jobOptions.showLogduration }} - + {{ locale.jobOptions.showTimeStamp }}
@@ -89,7 +89,7 @@
-
+