diff options
author | Zuul <zuul@review.opendev.org> | 2023-05-03 00:30:33 +0000 |
---|---|---|
committer | Gerrit Code Review <review@openstack.org> | 2023-05-03 00:30:33 +0000 |
commit | 51194abf561de04972996199d825613a94cd3b2f (patch) | |
tree | ad759bc813af0bb716135251da1e54135748c276 /web/src/index.css | |
parent | bbdbe81790f4926e5e00085309589a2c52e5230b (diff) | |
parent | 59cd5de78baa31150958e6d0d6733407c0e95805 (diff) | |
download | zuul-51194abf561de04972996199d825613a94cd3b2f.tar.gz |
Merge "web: add dark mode and theme selection"
Diffstat (limited to 'web/src/index.css')
-rw-r--r-- | web/src/index.css | 124 |
1 files changed, 118 insertions, 6 deletions
diff --git a/web/src/index.css b/web/src/index.css index 587804cfa..4cedc144f 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -40,8 +40,18 @@ a.refresh { } .zuul-select-tz { - /* That's the color PF4 uses for the dropdown items in the navbar */ - color: var(--pf-global--Color--dark-100); + /* Always use black because when using dark mode the theme will default + to another dark color which is hard to see on a white background */ + color: #000; +} + +.pf-theme-dark .zuul-select-tz .zuul-select-tz__option { + background: #222; + color: #fff; +} + +.pf-theme-dark .zuul-select-tz .zuul-select-tz__option:hover { + background: #000; } /* Config error modal */ @@ -53,6 +63,15 @@ a.refresh { margin-left: var(--pf-global--spacer--md); } +.pf-theme-dark .zuul-config-errors-title, .pf-theme-dark .zuul-config-errors-count { + color: #fff !important; +} + +.pf-theme-dark .pf-c-notification-drawer pre { + background: #000; + color: #fff; +} + /* * Build Lists and Tables */ @@ -66,6 +85,10 @@ a.refresh { font-weight: bold; } +.zuul-menu-dropdown-toggle { + background: transparent !important; +} + .zuul-menu-dropdown-toggle:before { content: none !important; } @@ -167,6 +190,11 @@ a.refresh { margin-bottom: 10px; } +.zuul-change-dark { + margin-bottom: 10px; + border-color: #222; +} + .zuul-change-id { float: right; } @@ -210,6 +238,13 @@ a.refresh { padding: 2px 8px; } +.zuul-change-job-dark { + padding: 2px 8px; + background: #000; + color: #ccc; + border: 1px solid #222; +} + /* Force_break_very_long_non_hyphenated_repo_names */ .change_project { word-break: break-all; @@ -233,6 +268,21 @@ a.refresh { padding: 8px 12px; } +.zuul-patchset-header-dark { + font-size: small; + padding: 8px 12px; + background: #000 !important; + color: #ccc !important; + border-color: #222 !important; +} + +.zuul-patchset-body { +} + +.zuul-patchset-body-dark { + border-top: 1px solid #000; +} + .zuul-log-output { color: black; } @@ -283,7 +333,7 @@ a.refresh { } .zuul-build-status { - background: white; + background: transparent; font-size: 16px; } @@ -292,14 +342,23 @@ a.refresh { } .zuul-change-row-line { - background-image: url('images/line.png'); - background-repeat: 'repeat-y'; + background: linear-gradient(#000, #000) no-repeat center/2px 100%; + background-position-y: 15px; +} + +.zuul-change-row-line-dark { + background: linear-gradient(#fff, #fff) no-repeat center/2px 100%; + background-position-y: 15px; } .progress-bar-animated { animation: progress-bar-stripes 1s linear infinite; } +.progress-dark { + background: #333 !important; +} + /* Job Tree View group gap */ div.tree-view-container ul.list-group { margin: 0px 0px; @@ -325,6 +384,10 @@ pre.version { background-color: var(--pf-global--palette--red-50) !important; } +.pf-theme-dark .zuul-console-task-failed { + background-color: var(--pf-global--palette--red-300) !important; +} + .zuul-console .pf-c-data-list__expandable-content { border: none; } @@ -344,11 +407,21 @@ pre.version { border-radius: 5px; } -.zuul-console .pf-c-data-list__item:hover +.zuul-console-light .pf-c-data-list__item:hover { background: var(--pf-global--palette--blue-50); } +.zuul-console-dark .pf-c-data-list__item:hover +{ + background: var(--pf-global--BackgroundColor--200); +} + +.zuul-console-dark pre { + background: #000; + color: #fff; +} + .zuul-console .pf-c-data-list__item:hover::before { background: var(--pf-global--active-color--400); @@ -451,3 +524,42 @@ details.foldable[open] summary::before { .zuul-task-summary-failed.pf-c-card { background: var(--pf-global--palette--red-50); } + +.pf-theme-dark .pf-c-nav__link { + color: #fff !important; +} + +.pf-theme-dark .pf-c-modal-box__title-text, .pf-theme-dark .pf-c-modal-box__body { + color: #fff !important; +} + +.pf-theme-dark .swagger-ui { + filter: invert(88%) hue-rotate(180deg); +} + +.pf-theme-dark .swagger-ui .highlight-code { + filter: invert(100%) hue-rotate(180deg); +} + +.zuul-table-dark .list-group-item { + background-color: #333 !important; +} + +.zuul-build-output { +} + +.zuul-build-output-dark { + background-color: #000 !important; + color: #fff; +} + +.pf-theme-dark .zuul-log-sev-0 { + color: #ccc !important; +} +.pf-theme-dark .zuul-log-sev-1 { + color: #ccc !important; +} + +.pf-theme-dark .pf-c-empty-state { + color: #fff !important; +} |