mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-14 01:15:44 +01:00
Introduce darkmode theme (#1969)
This commit introduces a new more relaxed theme, the dark theme! In addition, the theme can now be selected according to the system defaults. And the other themes, as well as the general structure were unified/simplified. Co-authored-by: Philipp Ahrendt <philipp.ahrendt@cloudogu.com> Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com> Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com> Co-authored-by: Matthias Thieroff <matthias.thieroff@cloudogu.com>
This commit is contained in:
Florian Scholdei
GitHub
@@ -21,6 +21,30 @@
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--scm-white-color: #{$white};
|
||||
--scm-light-color: #{$light};
|
||||
--scm-dark-color: #{$dark};
|
||||
--scm-primary-color: #{$primary};
|
||||
--scm-link-color: #{$link};
|
||||
--scm-info-color: #{$info};
|
||||
--scm-success-color: #{$success};
|
||||
--scm-warning-color: #{$warning};
|
||||
--scm-danger-color: #{$danger};
|
||||
|
||||
--scm-secondary-least-color: #{$secondary-least};
|
||||
--scm-secondary-less-color: #{$secondary-less};
|
||||
--scm-secondary-color: #{$secondary};
|
||||
--scm-secondary-more-color: #{$secondary-more};
|
||||
--scm-secondary-most-color: #{$secondary-most};
|
||||
|
||||
--scm-border-color: #{$border};
|
||||
--scm-border: #{$border-width} solid #{$border};
|
||||
|
||||
--scm-popover-border-color: #{$white};
|
||||
}
|
||||
|
||||
// TODO split into multiple files
|
||||
|
||||
.is-ellipsis-overflow {
|
||||
@@ -84,15 +108,6 @@ hr.header-with-actions {
|
||||
}
|
||||
}
|
||||
|
||||
footer.footer {
|
||||
background-color: $white-ter;
|
||||
padding: inherit;
|
||||
|
||||
a {
|
||||
color: darken($info, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.has-hover-background-blue:hover {
|
||||
background-color: scale-color($blue, $alpha: -90%);
|
||||
}
|
||||
@@ -113,6 +128,61 @@ footer.footer {
|
||||
background-color: $blue-light;
|
||||
}
|
||||
|
||||
.has-text-secondary-least {
|
||||
color: $secondary-least !important;
|
||||
}
|
||||
a.has-text-secondary-least:hover,
|
||||
a.has-text-secondary-least:focus {
|
||||
color: lighten($secondary-least, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-least {
|
||||
background-color: $secondary-least !important;
|
||||
}
|
||||
|
||||
.has-text-secondary-less {
|
||||
color: $secondary-less !important;
|
||||
}
|
||||
a.has-text-secondary-less:hover,
|
||||
a.has-text-secondary-less:focus {
|
||||
color: lighten($secondary-less, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-less {
|
||||
background-color: $secondary-less !important;
|
||||
}
|
||||
|
||||
.has-text-secondary {
|
||||
color: $secondary !important;
|
||||
}
|
||||
a.has-text-secondary:hover,
|
||||
a.has-text-secondary:focus {
|
||||
color: lighten($secondary, 10%) !important;
|
||||
}
|
||||
.has-background-secondary {
|
||||
background-color: $secondary !important;
|
||||
}
|
||||
|
||||
.has-text-secondary-more {
|
||||
color: $secondary-more !important;
|
||||
}
|
||||
a.has-text-secondary-more:hover,
|
||||
a.has-text-secondary-more:focus {
|
||||
color: lighten($secondary-more, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-more {
|
||||
background-color: $secondary-more !important;
|
||||
}
|
||||
|
||||
.has-text-secondary-most {
|
||||
color: $secondary-most !important;
|
||||
}
|
||||
a.has-text-secondary-most:hover,
|
||||
a.has-text-secondary-most:focus {
|
||||
color: lighten($secondary-most, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-most {
|
||||
background-color: $secondary-most !important;
|
||||
}
|
||||
|
||||
// border and background colors
|
||||
.has-background-dark-75 {
|
||||
background-color: $dark-75;
|
||||
@@ -181,7 +251,7 @@ footer.footer {
|
||||
// tags
|
||||
.tag:not(body) {
|
||||
border: 1px solid transparent;
|
||||
background-color: $white;
|
||||
background-color: $scheme-main;
|
||||
|
||||
&.is-delete {
|
||||
background-color: $light;
|
||||
@@ -193,7 +263,7 @@ footer.footer {
|
||||
}
|
||||
|
||||
&.is-outlined {
|
||||
background-color: $white;
|
||||
background-color: $scheme-main;
|
||||
}
|
||||
&.is-black.is-outlined {
|
||||
color: $black;
|
||||
@@ -237,6 +307,13 @@ footer.footer {
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
&:before {
|
||||
border-bottom-color: $popover-background-color;
|
||||
border-left-color: $popover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons
|
||||
.button {
|
||||
padding-left: 1.5em;
|
||||
@@ -251,7 +328,7 @@ footer.footer {
|
||||
&.is-warning,
|
||||
&.is-danger {
|
||||
&.is-outlined {
|
||||
background-color: $white;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -347,8 +424,14 @@ footer.footer {
|
||||
}
|
||||
}
|
||||
|
||||
.notifications .dropdown-menu:before {
|
||||
border: 0.4rem solid transparent;
|
||||
.notifications .dropdown-menu {
|
||||
border: 1px solid $border;
|
||||
|
||||
&:before {
|
||||
border: 0.4rem solid transparent;
|
||||
border-bottom-color: $border;
|
||||
border-left-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
|
||||
@@ -480,7 +563,7 @@ ul.is-separated {
|
||||
|
||||
tr {
|
||||
a {
|
||||
color: #363636;
|
||||
color: $grey-darker;
|
||||
}
|
||||
&.border-is-green td:first-child {
|
||||
border-left-color: $green;
|
||||
@@ -510,7 +593,7 @@ ul.is-separated {
|
||||
|
||||
&:hover {
|
||||
td {
|
||||
background-color: whitesmoke;
|
||||
background-color: $white-ter;
|
||||
|
||||
&.is-darker {
|
||||
background-color: #e1e1e1;
|
||||
@@ -531,15 +614,15 @@ ul.is-separated {
|
||||
}
|
||||
td {
|
||||
padding: 1em 1.25em;
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
background-color: $white-bis;
|
||||
border-bottom: 1px solid $white-ter;
|
||||
border-left-color: $grey;
|
||||
|
||||
&:first-child {
|
||||
border-left: 3px solid;
|
||||
}
|
||||
&.is-darker {
|
||||
background-color: whitesmoke;
|
||||
background-color: $white-ter;
|
||||
}
|
||||
// Explicitly "remove" styles from td element to use it as an empty table column header, which is necessary for
|
||||
// a11y because an empty th element is not allowed.
|
||||
@@ -550,7 +633,7 @@ ul.is-separated {
|
||||
}
|
||||
}
|
||||
&.is-hoverable tbody tr:not(.is-selected):hover {
|
||||
background-color: whitesmoke;
|
||||
background-color: $white-ter;
|
||||
}
|
||||
thead th {
|
||||
background-color: transparent;
|
||||
@@ -579,8 +662,8 @@ ul.is-separated {
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
background-color: whitesmoke;
|
||||
color: #363636;
|
||||
background-color: $panel-heading-background-color;
|
||||
color: $panel-heading-color;
|
||||
font-size: 1.25em;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
@@ -667,7 +750,7 @@ form .field:not(.is-grouped) {
|
||||
.tabs.is-toggle li.is-active a:hover {
|
||||
background-color: #28b1e8;
|
||||
border-color: #28b1e8;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -678,7 +761,7 @@ form .field:not(.is-grouped) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: whitesmoke;
|
||||
background-color: $white-ter;
|
||||
}
|
||||
|
||||
// menu
|
||||
@@ -692,7 +775,6 @@ form .field:not(.is-grouped) {
|
||||
display: flex;
|
||||
height: 3.2rem;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
background-color: $blue;
|
||||
@@ -707,12 +789,11 @@ form .field:not(.is-grouped) {
|
||||
}
|
||||
.menu-list {
|
||||
a {
|
||||
color: #333;
|
||||
padding: 1rem;
|
||||
|
||||
&.is-active {
|
||||
color: $info;
|
||||
background-color: #fff;
|
||||
color: $link;
|
||||
background-color: $scheme-main;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
308
scm-ui/ui-styles/src/dark.scss
Normal file
308
scm-ui/ui-styles/src/dark.scss
Normal file
@@ -0,0 +1,308 @@
|
||||
/*
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
|
||||
@import "utils/_pre.scss";
|
||||
|
||||
$turquoise: #55abad;
|
||||
$blue: #599dad;
|
||||
$cyan: $blue;
|
||||
$green: #419374;
|
||||
$yellow: #ccad5e;
|
||||
$red: #ae4e6b;
|
||||
$white: $grey-lighter;
|
||||
$light: $grey-dark;
|
||||
|
||||
$primary-invert: $white;
|
||||
$link-invert: $white;
|
||||
$info-invert: $white;
|
||||
$success-invert: $white;
|
||||
$warning-invert: #583708;
|
||||
$danger-invert: $white;
|
||||
$light-invert: $white;
|
||||
$dark-invert: $white;
|
||||
|
||||
$scheme-main: #121212;
|
||||
$background: $grey-dark;
|
||||
|
||||
$border: $grey-dark;
|
||||
$border-width: 1px;
|
||||
|
||||
$text: $grey-lighter;
|
||||
$text-strong: $grey-lighter;
|
||||
|
||||
$code: lighten($red, 10%);
|
||||
$code-background: lighten($scheme-main, 10%);
|
||||
|
||||
$link-hover: $grey;
|
||||
$link-focus: $grey;
|
||||
$link-active: $grey;
|
||||
|
||||
$secondary-least: $scheme-main;
|
||||
$secondary-less: $black-ter;
|
||||
$secondary: $grey;
|
||||
$secondary-more: $grey-light;
|
||||
$secondary-most: $white-ter;
|
||||
|
||||
// layout
|
||||
$footer-background-color: $black-ter;
|
||||
$footer-color: $text;
|
||||
|
||||
// element
|
||||
$box-background-color: lighten($scheme-main, 2.5%);
|
||||
|
||||
$button-hover-color: lighten($text-strong, 2.5%);
|
||||
$button-active-color: lighten($text-strong, 2.5%);
|
||||
|
||||
// component
|
||||
$card-background-color: $box-background-color;
|
||||
|
||||
$menu-label-color: $text;
|
||||
$menu-item-color: $text;
|
||||
$menu-item-hover-background-color: $grey-dark;
|
||||
|
||||
$modal-card-head-background-color: $black-ter;
|
||||
$modal-card-body-background-color: #17181c;
|
||||
|
||||
$navbar-item-color: $grey-lighter;
|
||||
$navbar-item-hover-color: $navbar-item-color;
|
||||
$navbar-item-active-color: $navbar-item-color;
|
||||
|
||||
$panel-heading-background-color: $black-ter;
|
||||
|
||||
// form
|
||||
$input-placeholder-color: $grey-light;
|
||||
$input-disabled-color: #7A7A7A;
|
||||
|
||||
// extension
|
||||
$popover-background-color: $grey-dark;
|
||||
$popover-border-color: $grey-dark;
|
||||
|
||||
$table-row-hover-background-color: $grey-darker;
|
||||
|
||||
@import "utils/_post.scss";
|
||||
|
||||
:root {
|
||||
--scm-popover-border-color: #{$popover-border-color};
|
||||
}
|
||||
|
||||
$dark-75: scale-color($dark, $lightness: -25%);
|
||||
$dark-50: scale-color($dark, $lightness: -50%);
|
||||
$dark-25: scale-color($dark, $lightness: -75%);
|
||||
$info-75: scale-color($info, $lightness: -25%);
|
||||
$info-50: scale-color($info, $lightness: -50%);
|
||||
$info-25: scale-color($info, $lightness: -75%);
|
||||
$link-75: scale-color($link, $lightness: -25%);
|
||||
$link-50: scale-color($link, $lightness: -50%);
|
||||
$link-25: scale-color($link, $lightness: -75%);
|
||||
$primary-75: scale-color($primary, $lightness: -25%);
|
||||
$primary-50: scale-color($primary, $lightness: -50%);
|
||||
$primary-25: scale-color($primary, $lightness: -75%);
|
||||
$success-75: scale-color($success, $lightness: -25%);
|
||||
$success-50: scale-color($success, $lightness: -50%);
|
||||
$success-25: scale-color($success, $lightness: -75%);
|
||||
$warning-75: scale-color($warning, $lightness: -25%);
|
||||
$warning-50: scale-color($warning, $lightness: -50%);
|
||||
$warning-25: scale-color($warning, $lightness: -75%);
|
||||
$danger-75: scale-color($danger, $lightness: -25%);
|
||||
$danger-50: scale-color($danger, $lightness: -50%);
|
||||
$danger-25: scale-color($danger, $lightness: -75%);
|
||||
|
||||
.has-background-dark-75 {
|
||||
background-color: $dark-75;
|
||||
}
|
||||
.has-background-dark-50 {
|
||||
background-color: $dark-50;
|
||||
}
|
||||
.has-background-dark-25 {
|
||||
background-color: $dark-25;
|
||||
}
|
||||
.has-background-info-75 {
|
||||
background-color: $info-75;
|
||||
}
|
||||
.has-background-info-50 {
|
||||
background-color: $info-50;
|
||||
}
|
||||
.has-background-info-25 {
|
||||
background-color: $info-25;
|
||||
}
|
||||
.has-background-link-75 {
|
||||
background-color: $link-75;
|
||||
}
|
||||
.has-background-link-50 {
|
||||
background-color: $link-50;
|
||||
}
|
||||
.has-background-link-25 {
|
||||
background-color: $link-25;
|
||||
}
|
||||
.has-background-primary-75 {
|
||||
background-color: $primary-75;
|
||||
}
|
||||
.has-background-primary-50 {
|
||||
background-color: $primary-50;
|
||||
}
|
||||
.has-background-primary-25 {
|
||||
background-color: $primary-25;
|
||||
}
|
||||
.has-background-success-75 {
|
||||
background-color: $success-75;
|
||||
}
|
||||
.has-background-success-50 {
|
||||
background-color: $success-50;
|
||||
}
|
||||
.has-background-success-25 {
|
||||
background-color: $success-25;
|
||||
}
|
||||
.has-background-warning-75 {
|
||||
background-color: $warning-75;
|
||||
}
|
||||
.has-background-warning-50 {
|
||||
background-color: $warning-50;
|
||||
}
|
||||
.has-background-warning-25 {
|
||||
background-color: $warning-25;
|
||||
}
|
||||
.has-background-danger-75 {
|
||||
background-color: $danger-75;
|
||||
}
|
||||
.has-background-danger-50 {
|
||||
background-color: $danger-50;
|
||||
}
|
||||
.has-background-danger-25 {
|
||||
background-color: $danger-25;
|
||||
}
|
||||
|
||||
:root {
|
||||
--scm-secondary-background: #{$scheme-main};
|
||||
--scm-secondary-text: #{$white};
|
||||
--scm-border: 2px solid #{$white-ter};
|
||||
--scm-hover-color: #{$grey};
|
||||
--scm-column-selection: #{$link-dark};
|
||||
|
||||
--sh-base-color: #{$white};
|
||||
--sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
--sh-block-background: #{$scheme-main};
|
||||
--sh-inline-code-color: #ff3860;
|
||||
--sh-inline-code-background: #fbe7eb;
|
||||
--sh-comment-color: #9a9a9a;
|
||||
--sh-punctuation-color: #999999;
|
||||
--sh-property-color: #2c99c7;
|
||||
--sh-selector-color: #009dff;
|
||||
--sh-operator-color: #999999;
|
||||
--sh-operator-bg: inherit;
|
||||
--sh-variable-color: #c386ca;
|
||||
--sh-function-color: #ff6181;
|
||||
--sh-keyword-color: #00a984;
|
||||
--sh-selected-color: #{$warning-dark};
|
||||
--sh-highlight-background: #f5f5f5;
|
||||
--sh-highlight-accent: #99d8f3;
|
||||
|
||||
--diff-background-color: #{$scheme-main};
|
||||
--diff-text-color: #{$white-bis};
|
||||
--diff-font-family: Consolas, Courier, monospace;
|
||||
--diff-selection-background-color: #{desaturate(#b3d7ff, 20%)};
|
||||
--diff-gutter-insert-background-color: #{desaturate(#05c71d, 20%)};
|
||||
--diff-gutter-delete-background-color: #{desaturate(#eb7a85, 20%)};
|
||||
--diff-gutter-selected-background-color: #{desaturate(#fffce0, 20%)};
|
||||
--diff-code-insert-background-color: #{desaturate(#05240b, 20%)};
|
||||
--diff-code-delete-background-color: #{desaturate(#230608, 20%)};
|
||||
--diff-code-insert-edit-background-color: #{desaturate(#c0dc91, 20%)};
|
||||
--diff-code-delete-edit-background-color: #{desaturate(#000, 20%)};
|
||||
--diff-code-selected-background-color: #{desaturate(#fffce0, 20%)};
|
||||
--diff-omit-gutter-line-color: #cb2a1d;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
a {
|
||||
> li {
|
||||
border-color: $grey-light;
|
||||
}
|
||||
li:last-child {
|
||||
border-color: $grey-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//popover
|
||||
.popover {
|
||||
border: 1px solid $popover-border-color;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
border: 1px solid $border;
|
||||
|
||||
& .modal-close,
|
||||
& .delete {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
.card-table {
|
||||
tr {
|
||||
a {
|
||||
color: $grey-light;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
td {
|
||||
background-color: $grey-darker;
|
||||
|
||||
&.is-darker {
|
||||
background-color: $black-ter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
td {
|
||||
background-color: $black-ter;
|
||||
border-bottom: none;
|
||||
|
||||
&.is-darker {
|
||||
background-color: $grey-dark;
|
||||
}
|
||||
}
|
||||
&.is-hoverable tbody tr:not(.is-selected):hover {
|
||||
background-color: $grey-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.diff-code-conflict {
|
||||
background-color: #332900;
|
||||
}
|
||||
|
||||
.diff-gutter-conflict {
|
||||
background-color: #bc9f2a;
|
||||
}
|
||||
|
||||
.diff-decoration-content div {
|
||||
color: $scheme-main;
|
||||
}
|
||||
|
||||
//Display darker version of background image
|
||||
.has-scm-background {
|
||||
background-image: url(images/scmManagerHeroDark.jpg) !important;
|
||||
}
|
||||
|
||||
.has-hover-visible:hover {
|
||||
color: $grey !important;
|
||||
}
|
||||
@@ -24,14 +24,20 @@
|
||||
|
||||
@import "utils/_pre.scss";
|
||||
|
||||
// $text: $white;
|
||||
$red: #e63453;
|
||||
|
||||
$scheme-main: #050514;
|
||||
$background: $grey-dark;
|
||||
$text: $white-ter;
|
||||
$text-strong: $white-bis;
|
||||
|
||||
$danger: #e63453;
|
||||
$code: lighten($danger, 25%);
|
||||
$secondary-least: $scheme-main;
|
||||
$secondary-less: $black-ter;
|
||||
$secondary: $white-bis;
|
||||
$secondary-more: $white-ter;
|
||||
$secondary-most: $white;
|
||||
|
||||
$code: lighten($red, 25%);
|
||||
$primary-invert: #050514;
|
||||
$info-invert: #050514;
|
||||
$link-invert: #050514;
|
||||
@@ -41,7 +47,7 @@ $danger-invert: #050514;
|
||||
|
||||
$light-gray: #f2f2f2;
|
||||
|
||||
$footer-background-color: $grey-dark;
|
||||
$footer-background-color: $black-ter;
|
||||
$footer-color: $white-ter;
|
||||
|
||||
//make horizontal lines pop more
|
||||
@@ -50,6 +56,11 @@ $hr-background-color: $white-bis;
|
||||
$box-background-color: scale-color($scheme-main, $lightness: 15%);
|
||||
$box-background-color: $grey-darker;
|
||||
|
||||
$menu-label-color: $scheme-main;
|
||||
$menu-item-color: $white-ter;
|
||||
|
||||
$panel-heading-background-color: $black-ter;
|
||||
|
||||
$modal-card-head-background-color: $black-ter;
|
||||
$modal-card-body-background-color: $scheme-main;
|
||||
|
||||
@@ -64,13 +75,14 @@ $tooltip-background-color: $white-bis;
|
||||
$tooltip-background-opacity: 0.9 !default;
|
||||
$tooltip-color: $scheme-main;
|
||||
|
||||
$border-width: 2px;
|
||||
$border: $white-ter;
|
||||
|
||||
@import "utils/_post.scss";
|
||||
|
||||
:root {
|
||||
--scm-secondary-background: #{$scheme-main};
|
||||
--scm-secondary-text: #{$white};
|
||||
--scm-border: 2px solid #{$white-ter};
|
||||
--scm-info-color: #{$info};
|
||||
--scm-hover-color: #{$grey};
|
||||
--scm-column-selection: #{$link-dark};
|
||||
|
||||
@@ -108,17 +120,6 @@ $tooltip-color: $scheme-main;
|
||||
}
|
||||
|
||||
.button {
|
||||
&.is-primary,
|
||||
&.is-info,
|
||||
&.is-link,
|
||||
&.is-success,
|
||||
&.is-warning,
|
||||
&.is-danger {
|
||||
&.is-outlined {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-primary:hover,
|
||||
&.is-primary.is-hovered {
|
||||
background-color: scale-color($primary, $lightness: -5%);
|
||||
@@ -205,36 +206,21 @@ $tooltip-color: $scheme-main;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
color: $scheme-main;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
a {
|
||||
color: $white-ter;
|
||||
|
||||
&.is-active {
|
||||
background-color: $scheme-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//footer is overwritten in _main.scss
|
||||
footer.footer {
|
||||
background-color: $black-ter;
|
||||
a {
|
||||
color: scale-color($link, $lightness: 25%);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid $white-ter;
|
||||
border: 1px solid $border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
//card
|
||||
.modal-card {
|
||||
border: 1px solid $white-ter;
|
||||
border: 1px solid $border;
|
||||
|
||||
& .modal-close,
|
||||
& .delete {
|
||||
@@ -257,9 +243,6 @@ footer.footer {
|
||||
background-color: $grey-darker;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $link;
|
||||
}
|
||||
}
|
||||
}
|
||||
td {
|
||||
@@ -278,18 +261,8 @@ footer.footer {
|
||||
}
|
||||
}
|
||||
|
||||
// panels
|
||||
.panel {
|
||||
border-color: $white-bis;
|
||||
|
||||
.panel-heading {
|
||||
background-color: $black-ter;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
background-color: $black-ter;
|
||||
color: $white-bis;
|
||||
}
|
||||
}
|
||||
|
||||
//diffs
|
||||
@@ -338,9 +311,6 @@ td:first-child.diff-gutter-conflict:before {
|
||||
|
||||
//inline member tags
|
||||
.tag:not(body) {
|
||||
border: 1px solid transparent;
|
||||
background-color: $white;
|
||||
|
||||
&.is-delete {
|
||||
&::before,
|
||||
&::after {
|
||||
@@ -363,11 +333,6 @@ td:first-child.diff-gutter-conflict:before {
|
||||
&.is-light .has-text-link {
|
||||
color: scale-color($link, $lightness: -50%) !important;
|
||||
}
|
||||
|
||||
//outline-tags
|
||||
&.is-outlined {
|
||||
background-color: $scheme-main;
|
||||
}
|
||||
}
|
||||
|
||||
//cards receive white border
|
||||
@@ -376,21 +341,7 @@ td:first-child.diff-gutter-conflict:before {
|
||||
}
|
||||
|
||||
.popover {
|
||||
border: 1px solid $white-ter;
|
||||
|
||||
&:before {
|
||||
border-bottom-color: $grey-dark;
|
||||
border-left-color: $grey-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications .dropdown-menu {
|
||||
border: 1px solid $white-ter;
|
||||
|
||||
&:before {
|
||||
border-bottom-color: $white-ter;
|
||||
border-left-color: $white-ter;
|
||||
}
|
||||
border: 1px solid $border;
|
||||
}
|
||||
|
||||
//Display darker version of background image
|
||||
@@ -398,61 +349,6 @@ td:first-child.diff-gutter-conflict:before {
|
||||
background-image: url(images/scmManagerHeroDark.jpg) !important;
|
||||
}
|
||||
|
||||
.has-text-secondary-least {
|
||||
color: $scheme-main !important;
|
||||
}
|
||||
a.has-text-secondary-least:hover,
|
||||
a.has-text-secondary-least:focus {
|
||||
color: lighten($scheme-main, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-least {
|
||||
background-color: $scheme-main !important;
|
||||
}
|
||||
|
||||
.has-text-secondary-less {
|
||||
color: $black-ter !important;
|
||||
}
|
||||
a.has-text-secondary-less:hover,
|
||||
a.has-text-secondary-less:focus {
|
||||
color: lighten($black-ter, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-less {
|
||||
background-color: $black-ter !important;
|
||||
}
|
||||
|
||||
.has-text-secondary {
|
||||
color: $white-bis !important;
|
||||
}
|
||||
a.has-text-secondary:hover,
|
||||
a.has-text-secondary:focus {
|
||||
color: lighten($white-bis, 10%) !important;
|
||||
}
|
||||
.has-background-secondary {
|
||||
background-color: $white-bis !important;
|
||||
}
|
||||
|
||||
.has-text-secondary-more {
|
||||
color: $white-ter !important;
|
||||
}
|
||||
a.has-text-secondary-more:hover,
|
||||
a.has-text-secondary-more:focus {
|
||||
color: lighten($white-ter, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-more {
|
||||
background-color: $white-ter !important;
|
||||
}
|
||||
|
||||
.has-text-secondary-most {
|
||||
color: $white !important;
|
||||
}
|
||||
a.has-text-secondary-most:hover,
|
||||
a.has-text-secondary-most:focus {
|
||||
color: lighten($white, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-most {
|
||||
background-color: $white !important;
|
||||
}
|
||||
|
||||
.has-background-light {
|
||||
color: $grey-dark;
|
||||
}
|
||||
@@ -461,15 +357,8 @@ a.has-text-secondary-most:focus {
|
||||
color: $white-bis !important;
|
||||
}
|
||||
|
||||
[disabled].textarea::placeholder,
|
||||
[disabled].input::placeholder,
|
||||
fieldset[disabled] .textarea::placeholder,
|
||||
fieldset[disabled] .input::placeholder {
|
||||
color: $white-bis;
|
||||
}
|
||||
|
||||
.repository-export-info-box {
|
||||
background-color: $high-contrast-info-25;
|
||||
background-color: scale-color($info, $lightness: -75%);
|
||||
border: 0.2rem solid;
|
||||
}
|
||||
|
||||
|
||||
@@ -23,18 +23,38 @@
|
||||
*/
|
||||
|
||||
@import "utils/_pre.scss";
|
||||
// colors defined in variables/commons.scss
|
||||
$subtitle-color: #666;
|
||||
|
||||
$warning-invert: #88550d;
|
||||
|
||||
$border: $grey-lighter;
|
||||
$border-width: 1px;
|
||||
|
||||
$secondary-least: $white;
|
||||
$secondary-less: $white-ter;
|
||||
$secondary: $grey-light;
|
||||
$secondary-more: $grey-darker;
|
||||
$secondary-most: $black;
|
||||
|
||||
// layout
|
||||
$footer-background-color: $white-ter;
|
||||
|
||||
// element
|
||||
$button-disabled-opacity: 0.25;
|
||||
|
||||
$subtitle-color: #666;
|
||||
|
||||
// component
|
||||
$menu-label-color: $white;
|
||||
$menu-item-color: #333;
|
||||
|
||||
// extension
|
||||
$popover-background-color: $grey-light;
|
||||
|
||||
@import "utils/_post.scss";
|
||||
|
||||
:root {
|
||||
--scm-secondary-background: #{$white};
|
||||
--scm-secondary-text: #{$black};
|
||||
--scm-border: 1px solid #dbdbdb;
|
||||
--scm-info-color: #{$info};
|
||||
--scm-hover-color: #{$black-ter};
|
||||
--scm-column-selection: #{$link-25};
|
||||
|
||||
@@ -57,72 +77,31 @@ $button-disabled-opacity: 0.25;
|
||||
--sh-highlight-accent: #99d8f3;
|
||||
}
|
||||
|
||||
.button {
|
||||
&.is-primary,
|
||||
&.is-info,
|
||||
&.is-link,
|
||||
&.is-success,
|
||||
&.is-warning,
|
||||
&.is-danger {
|
||||
&.is-outlined {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer.footer {
|
||||
a {
|
||||
color: darken($info, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.popover:before {
|
||||
border-bottom-color: white;
|
||||
border-left-color: white;
|
||||
box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2);
|
||||
}
|
||||
|
||||
.notifications .dropdown-menu:before {
|
||||
border-bottom-color: white;
|
||||
border-left-color: white;
|
||||
}
|
||||
|
||||
.has-text-secondary-least {
|
||||
color: $white !important;
|
||||
}
|
||||
a.has-text-secondary-least:hover,
|
||||
a.has-text-secondary-least:focus {
|
||||
color: lighten($white, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-least {
|
||||
background-color: $white !important;
|
||||
}
|
||||
|
||||
.has-text-secondary-less {
|
||||
color: $white-ter !important;
|
||||
}
|
||||
a.has-text-secondary-less:hover,
|
||||
a.has-text-secondary-less:focus {
|
||||
color: lighten($white-ter, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-less {
|
||||
background-color: $white-ter !important;
|
||||
}
|
||||
|
||||
.has-text-secondary {
|
||||
color: $grey-light !important;
|
||||
}
|
||||
a.has-text-secondary:hover,
|
||||
a.has-text-secondary:focus {
|
||||
color: lighten($grey-light, 10%) !important;
|
||||
}
|
||||
.has-background-secondary {
|
||||
background-color: $grey-light !important;
|
||||
}
|
||||
|
||||
.has-text-secondary-more {
|
||||
color: $grey-darker !important;
|
||||
}
|
||||
a.has-text-secondary-more:hover,
|
||||
a.has-text-secondary-more:focus {
|
||||
color: lighten($grey-darker, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-more {
|
||||
background-color: $grey-darker !important;
|
||||
}
|
||||
|
||||
.has-text-secondary-most {
|
||||
color: $black !important;
|
||||
}
|
||||
a.has-text-secondary-most:hover,
|
||||
a.has-text-secondary-most:focus {
|
||||
color: lighten($black, 10%) !important;
|
||||
}
|
||||
.has-background-secondary-most {
|
||||
background-color: $black !important;
|
||||
}
|
||||
|
||||
.has-hover-visible:hover {
|
||||
color: $grey-darker !important;
|
||||
}
|
||||
|
||||
@@ -21,16 +21,26 @@
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
//$link: #007EB0;
|
||||
$info: #33b2e8;
|
||||
|
||||
$turquoise: #00d1df;
|
||||
$blue: #33b2e8;
|
||||
$cyan: $blue;
|
||||
$green: #00c79b;
|
||||
$warning: #ffdd57;
|
||||
$yellow: #ffdd57;
|
||||
$red: #ff3860;
|
||||
|
||||
$blue-light: #98d8f3;
|
||||
$danger: #ff3860;
|
||||
|
||||
$family-monospace: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
|
||||
$input-border-color: $blue-light;
|
||||
|
||||
$navbar-background-color: transparent;
|
||||
$navbar-item-color: $white;
|
||||
$navbar-item-hover-color: $navbar-item-color;
|
||||
$navbar-item-active-color: $navbar-item-color;
|
||||
$navbar-item-hover-background-color: rgba(10, 10, 10, 0.1);
|
||||
|
||||
$footer-padding: inherit;
|
||||
|
||||
$popover-border-color: $white;
|
||||
|
||||
@@ -43,24 +43,3 @@ $danger-75: scale-color($danger, $lightness: 25%);
|
||||
$danger-50: scale-color($danger, $lightness: 50%);
|
||||
$danger-25: scale-color($danger, $lightness: 75%);
|
||||
|
||||
$high-contrast-dark-75: scale-color($dark, $lightness: -25%);
|
||||
$high-contrast-dark-50: scale-color($dark, $lightness: -50%);
|
||||
$high-contrast-dark-25: scale-color($dark, $lightness: -75%);
|
||||
$high-contrast-info-75: scale-color($info, $lightness: -25%);
|
||||
$high-contrast-info-50: scale-color($info, $lightness: -50%);
|
||||
$high-contrast-info-25: scale-color($info, $lightness: -75%);
|
||||
$high-contrast-link-75: scale-color($link, $lightness: -25%);
|
||||
$high-contrast-link-50: scale-color($link, $lightness: -50%);
|
||||
$high-contrast-link-25: scale-color($link, $lightness: -75%);
|
||||
$high-contrast-primary-75: scale-color($primary, $lightness: -25%);
|
||||
$high-contrast-primary-25: scale-color($primary, $lightness: -75%);
|
||||
$high-contrast-primary-50: scale-color($primary, $lightness: -50%);
|
||||
$high-contrast-success-75: scale-color($success, $lightness: -25%);
|
||||
$high-contrast-success-50: scale-color($success, $lightness: -50%);
|
||||
$high-contrast-success-25: scale-color($success, $lightness: -75%);
|
||||
$high-contrast-warning-75: scale-color($warning, $lightness: -25%);
|
||||
$high-contrast-warning-50: scale-color($warning, $lightness: -50%);
|
||||
$high-contrast-warning-25: scale-color($warning, $lightness: -75%);
|
||||
$high-contrast-danger-75: scale-color($danger, $lightness: -25%);
|
||||
$high-contrast-danger-50: scale-color($danger, $lightness: -50%);
|
||||
$high-contrast-danger-25: scale-color($danger, $lightness: -75%);
|
||||
|
||||
Reference in New Issue
Block a user