diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss')
-rw-r--r-- | app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss | 326 |
1 files changed, 207 insertions, 119 deletions
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index e4c01c2bd6c..2b82b2226c6 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -1,9 +1,15 @@ // ------- // Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes // ------- -.ide.theme-dark { - a:not(.btn) { - color: var(--ide-link-color); +.ide { + $bs-input-focus-border: #80bdff; + $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25); + + a:not(.btn), + .btn-link:hover, + .btn-link:focus, + .btn-link:active { + color: var(--ide-link-color, $blue-600); } h1, @@ -19,156 +25,207 @@ .context-header > a, input, textarea, - .md-area.is-focused, .dropdown-menu li button, .dropdown-menu-selectable li a.is-active, .dropdown-menu-inner-title, - .dropdown-menu-inner-content, - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a, - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover, - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a.active .badge.badge-pill, - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill, - .badge.badge-pill, .bs-callout, .ide-pipeline .top-bar, - .ide-pipeline .top-bar .controllers .controllers-buttons { - color: var(--ide-text-color); + .ide-pipeline .top-bar .controllers .controllers-buttons, + .controllers-buttons svg, + .nav-links li a.active, + .md-area.is-focused { + color: var(--ide-text-color, $gl-text-color); } - .drag-handle:hover, - .card-header .badge.badge-pill { - background-color: var(--ide-dropdown-hover-background); + .badge.badge-pill { + color: var(--ide-text-color, $gray-800); + background-color: var(--ide-background, $badge-bg); } + .nav-links:not(.quick-links) li:not(.md-header-toolbar) a, + .dropdown-menu-inner-content, .file-row .file-row-icon svg, - .file-row:hover .file-row-icon svg, - .controllers-buttons svg { - color: var(--ide-text-color-secondary); + .file-row:hover .file-row-icon svg { + color: var(--ide-text-color-secondary, $gl-text-color-secondary); + } + + .nav-links:not(.quick-links) li:not(.md-header-toolbar) { + &:hover a, + &.active a, + a:hover, + a.active { + &, + .badge.badge-pill { + color: var(--ide-text-color, $black); + border-color: var(--ide-input-border, $gray-darkest); + } + } + } + + .drag-handle:hover { + background-color: var(--ide-dropdown-hover-background, $white-normal); + } + + .card-header { + background-color: var(--ide-background, $white); + + .badge.badge-pill { + background-color: var(--ide-dropdown-hover-background, $badge-bg); + } } .text-secondary { - color: var(--ide-text-color-secondary) !important; + color: var(--ide-text-color-secondary, $gl-text-color-secondary) !important; } input[type='search']::placeholder, input[type='text']::placeholder, - textarea::placeholder, + textarea::placeholder { + color: var(--ide-input-border, $gl-text-color-tertiary); + } + .dropdown-input .fa { - color: var(--ide-input-border); + color: var(--ide-input-border, $dropdown-input-fa-color); } .ide-nav-form .input-icon { - color: var(--ide-input-border); + color: var(--ide-input-border, $dropdown-input-fa-color); + } + + code { + background-color: var(--ide-background, $gray-100); } - code, - .badge.badge-pill, - .card-header, .bs-callout, .ide-pipeline .top-bar, .ide-terminal .top-bar { - background-color: var(--ide-background); + background-color: var(--ide-background, $gray-light); } .bs-callout { - border-color: var(--ide-dropdown-background); + border-color: var(--ide-dropdown-background, $border-color); code { - background-color: var(--ide-dropdown-background); + background-color: var(--ide-dropdown-background, $gray-100); } } - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover { - border-color: var(--ide-dropdown-hover-background); + .common-note-form .md-area { + border-color: var(--ide-input-border, $border-color); } - .common-note-form .md-area { - border-color: var(--ide-input-border); + .md table:not(.code) tr th { + background-color: var(--ide-highlight-background, $gray-100); } &, - .md table:not(.code) tr th, - .common-note-form .md-area, - .card { - background-color: var(--ide-highlight-background); + .card, + .common-note-form .md-area { + background-color: var(--ide-highlight-background, $white); } .card, .card-header, .ide-terminal .top-bar, .ide-pipeline .top-bar { - border-color: var(--ide-border-color); + border-color: var(--ide-border-color, $border-color); + } + + hr { + border-color: var(--ide-border-color, darken($gray-normal, 8%)); } - hr, .md h1, .md h2, .md blockquote, - pre, .md table:not(.code) tbody td, .md table:not(.code) tr th, - .nav-links:not(.quick-links) { - border-color: var(--ide-border-color-alt); + .nav-links:not(.quick-links), + .common-note-form .md-area.is-focused .nav-links { + border-color: var(--ide-border-color-alt, $white-dark); } - .ide-sidebar-link.active { - color: var(--ide-highlight-accent); - box-shadow: inset 3px 0 var(--ide-highlight-accent); + pre { + border-color: var(--ide-border-color-alt, $gray-200); - &.is-right { - box-shadow: inset -3px 0 var(--ide-highlight-accent); + code { + background-color: var(--ide-border-color, inherit); } } - .nav-links li.active a, - .nav-links li a.active { - border-color: var(--ide-highlight-accent); - color: var(--ide-text-color); - } + // highlight accents (based on navigation theme) should only apply + // in the default white theme and "none" theme. + &:not(.theme-white):not(.theme-none) { + .ide-sidebar-link.active { + color: var(--ide-highlight-accent, $gl-text-color); + box-shadow: inset 3px 0 var(--ide-highlight-accent, $gl-text-color); + + &.is-right { + box-shadow: inset -3px 0 var(--ide-highlight-accent, $gl-text-color); + } + } + + .nav-links li.active a, + .nav-links li a.active { + border-color: var(--ide-highlight-accent, $gl-text-color); + } - .avatar-container { - &, - .avatar { - color: var(--ide-text-color); - background-color: var(--ide-highlight-background); - border-color: var(--ide-highlight-background); + .dropdown-menu .nav-links li a.active { + border-color: var(--ide-highlight-accent, $gl-text-color); + } + + // for other themes, suppress different avatar default colors for simplicity + .avatar-container { + &, + .avatar { + color: var(--ide-text-color, $gl-text-color); + background-color: var(--ide-highlight-background, $white); + border-color: var(--ide-highlight-background, rgba($black, $gl-avatar-border-opacity)); + } } } input[type='text'], input[type='search'], .filtered-search-box { - border-color: var(--ide-input-border); - background: var(--ide-input-background) !important; + border-color: var(--ide-input-border, $border-color); + background: var(--ide-input-background, $white) !important; + } + + input[type='text']:not([disabled]):not([readonly]):focus, + .md-area.is-focused { + border-color: var(--ide-input-border, $bs-input-focus-border); + box-shadow: 0 0 0 3px var(--ide-dropdown-background, $bs-input-focus-box-shadow); } input[type='text'], input[type='search'], .filtered-search-box, textarea { - color: var(--ide-input-color) !important; + color: var(--ide-input-color, $gl-text-color) !important; } .filtered-search-box input[type='search'] { - border-color: transparent; + border-color: transparent !important; + box-shadow: none !important; } .filtered-search-token .value-container, .filtered-search-term .value-container { - background-color: var(--ide-dropdown-hover-background); - color: var(--ide-text-color); + background-color: var(--ide-dropdown-hover-background, $white-normal); + color: var(--ide-text-color, $gl-text-color); &:hover { - background-color: var(--ide-input-border); + background-color: var(--ide-input-border, $gray-200); } } @function calc-btn-hover-padding($original-padding, $original-border: 1px) { - @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width)); + @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border})); } .btn:not(.btn-link):not([disabled]):hover { - border-width: var(--ide-btn-hover-border-width); + border-width: var(--ide-btn-hover-border-width, 1px); padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px); } @@ -180,53 +237,71 @@ padding: calc-btn-hover-padding(6px) 0; } - .btn-inverted, .btn-default, .dropdown, .dropdown-menu-toggle { - background-color: var(--ide-input-background) !important; - color: var(--ide-input-color) !important; - border-color: var(--ide-btn-default-border); + background-color: var(--ide-input-background, $white) !important; + color: var(--ide-input-color, $gl-text-color) !important; + border-color: var(--ide-btn-default-border, $border-color); } - .btn-inverted, - .btn-default { + .dropdown-menu-toggle { + border-color: var(--ide-btn-default-border, $gray-darkest); + &:hover, &:focus { - border-color: var(--ide-btn-default-hover-border) !important; + background-color: var(--ide-dropdown-btn-hover-background, $gray-darker) !important; + border-color: var(--ide-dropdown-btn-hover-border, $gray-darkest) !important; } } - .dropdown, - .dropdown-menu-toggle { + // In IDE, the only inverted buttons are `.btn-remove` + .btn-inverted.btn-remove { + color: var(--ide-input-color, $red-500) !important; + background-color: var(--ide-input-background, $white) !important; + border-color: var(--ide-btn-default-border, $red-500); + &:hover, &:focus { - background-color: var(--ide-dropdown-btn-hover-background) !important; - border-color: var(--ide-dropdown-btn-hover-border) !important; + color: var(--ide-input-color, $red-700) !important; + background-color: var(--ide-input-background, $red-100) !important; + border-color: var(--ide-btn-default-hover-border, $red-500) !important; } - } - .dropdown-menu { - color: var(--ide-text-color); - border-color: var(--ide-background); - background-color: var(--ide-dropdown-background); + &:active { + color: var(--ide-input-color, $red-800) !important; + background-color: var(--ide-input-background, $red-200) !important; + border-color: var(--ide-btn-default-hover-border, $red-600) !important; + } + } - .divider, - .nav-links:not(.quick-links) { - background-color: var(--ide-dropdown-hover-background); - border-color: var(--ide-dropdown-hover-background); + .btn-default { + &:hover, + &:focus { + border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important; + background-color: var(--ide-input-background, $white-normal) !important; } - .nav-links li a.active { - border-color: var(--ide-highlight-accent); + &:active, + .active { + border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important; + background-color: var(--ide-input-background, $white-dark) !important; } + } - .nav-links:not(.quick-links) li:not(.md-header-toolbar) a { - color: var(--ide-text-color); + .dropdown-menu { + color: var(--ide-text-color, $gl-text-color); + border-color: var(--ide-background, $border-color); + background-color: var(--ide-dropdown-background, $white); - &.active { - color: var(--ide-text-color); - } + .nav-links:not(.quick-links) { + background-color: var(--ide-dropdown-hover-background, $white); + border-color: var(--ide-dropdown-hover-background, $border-color); + } + + .divider { + background-color: var(--ide-dropdown-hover-background, $gray-200); + border-color: var(--ide-dropdown-hover-background, $gray-200); } li > a:not(.disable-hover):hover, @@ -234,75 +309,88 @@ li button:not(.disable-hover):hover, li button:not(.disable-hover):focus, li button.is-focused { - background-color: var(--ide-dropdown-hover-background); - color: var(--ide-text-color); + background-color: var(--ide-dropdown-hover-background, $gray-darker); + color: var(--ide-text-color, $gl-text-color); } } .dropdown-title, .dropdown-input { - border-color: var(--ide-dropdown-hover-background) !important; + border-color: var(--ide-dropdown-hover-background, $gray-200) !important; } .btn-primary, .btn-info { - background-color: var(--ide-btn-primary-background); - border-color: var(--ide-btn-primary-border) !important; + background-color: var(--ide-btn-primary-background, $blue-500); + border-color: var(--ide-btn-primary-border, $blue-600) !important; &:hover, &:focus { - border-color: var(--ide-btn-primary-hover-border) !important; + background-color: var(--ide-btn-primary-background, $blue-600); + border-color: var(--ide-btn-primary-hover-border, $blue-700) !important; + } + + &:active, + &.active { + background-color: var(--ide-btn-primary-background, $blue-700); + border-color: var(--ide-btn-primary-hover-border, $blue-800) !important; } } .btn-success { - background-color: var(--ide-btn-success-background); - border-color: var(--ide-btn-success-border) !important; + background-color: var(--ide-btn-success-background, $green-500); + border-color: var(--ide-btn-success-border, $green-600) !important; &:hover, &:focus { - border-color: var(--ide-btn-success-hover-border) !important; + background-color: var(--ide-btn-success-background, $green-600); + border-color: var(--ide-btn-success-hover-border, $green-700) !important; + } + + &:active, + &.active { + background-color: var(--ide-btn-success-background, $green-700); + border-color: var(--ide-btn-success-hover-border, $green-800) !important; } } .btn[disabled] { - background: var(--ide-btn-default-background) !important; - border: 1px solid var(--ide-btn-disabled-border) !important; - color: var(--ide-btn-disabled-color) !important; + background-color: var(--ide-btn-default-background, $gray-light) !important; + border: 1px solid var(--ide-btn-disabled-border, $gray-200) !important; + color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important; } - pre code, .md table:not(.code) tbody { - background-color: var(--ide-border-color); + background-color: var(--ide-border-color, $white); } .animation-container { [class^='skeleton-line-'] { - background-color: var(--ide-animation-gradient-1); + background-color: var(--ide-animation-gradient-1, $gray-100); &::after { background-image: linear-gradient(to right, - var(--ide-animation-gradient-1) 0%, - var(--ide-animation-gradient-2) 20%, - var(--ide-animation-gradient-1) 40%, - var(--ide-animation-gradient-1) 100%); + var(--ide-animation-gradient-1, $gray-100) 0%, + var(--ide-animation-gradient-2, $gray-10) 20%, + var(--ide-animation-gradient-1, $gray-100) 40%, + var(--ide-animation-gradient-1, $gray-100) 100%); } } } .idiff.addition { - background-color: var(--ide-diff-insert); + background-color: var(--ide-diff-insert, $line-added-dark); } .idiff.deletion { - background-color: var(--ide-diff-remove); + background-color: var(--ide-diff-remove, $line-removed-dark); } -} -.navbar.theme-dark { - border-bottom-color: transparent; + ~ .popover { + box-shadow: none; + } } -.theme-dark ~ .popover { - box-shadow: none; +.navbar:not(.theme-white):not(.theme-none) { + border-bottom-color: transparent; } |