475 lines
14 KiB
SCSS
475 lines
14 KiB
SCSS
// -------
|
|
// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
|
|
// -------
|
|
.ide {
|
|
$bs-input-focus-border: #80bdff;
|
|
$bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
|
|
|
|
a:not(.btn),
|
|
.gl-button.btn-link,
|
|
.gl-button.btn-link:hover,
|
|
.gl-button.btn-link:focus,
|
|
.gl-button.btn-link:active {
|
|
color: var(--ide-link-color, $blue-600);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
code,
|
|
.md table:not(.code),
|
|
.md,
|
|
.md p,
|
|
.context-header > a,
|
|
input,
|
|
textarea,
|
|
.dropdown-menu li button,
|
|
.dropdown-menu-selectable li a.is-active,
|
|
.dropdown-menu-inner-title,
|
|
.bs-callout,
|
|
.ide-pipeline .top-bar,
|
|
.ide-pipeline .top-bar .controllers .controllers-buttons,
|
|
.controllers-buttons svg,
|
|
.nav-links li a.active,
|
|
.gl-tabs-nav li a.gl-tab-nav-item-active,
|
|
.md-area.is-focused {
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
}
|
|
|
|
.badge.badge-pill {
|
|
color: var(--ide-text-color, $gray-700);
|
|
background-color: var(--ide-background, $badge-bg);
|
|
}
|
|
|
|
.nav-links li:not(.md-header-toolbar) a,
|
|
.gl-tabs-nav li a,
|
|
.dropdown-menu-inner-content,
|
|
.file-row .file-row-icon svg,
|
|
.file-row:hover .file-row-icon svg {
|
|
color: var(--ide-text-color-secondary, $gl-text-color-secondary);
|
|
}
|
|
|
|
.nav-links li:not(.md-header-toolbar),
|
|
.gl-tabs-nav li {
|
|
&: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, $gl-text-color-secondary) !important;
|
|
}
|
|
|
|
input[type='search']::placeholder,
|
|
input[type='text']::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--ide-input-border, $gl-text-color-tertiary);
|
|
}
|
|
|
|
.dropdown-input .dropdown-input-clear {
|
|
color: var(--ide-input-border, $gray-500);
|
|
}
|
|
|
|
.ide-nav-form .input-icon {
|
|
color: var(--ide-input-border, $gray-500);
|
|
}
|
|
|
|
code {
|
|
background-color: var(--ide-background, $gray-100);
|
|
}
|
|
|
|
.bs-callout,
|
|
.ide-pipeline .top-bar,
|
|
.ide-terminal .top-bar {
|
|
background-color: var(--ide-background, $gray-light);
|
|
}
|
|
|
|
.bs-callout {
|
|
border-color: var(--ide-dropdown-background, $border-color);
|
|
|
|
code {
|
|
background-color: var(--ide-dropdown-background, $gray-100);
|
|
}
|
|
}
|
|
|
|
.common-note-form .md-area {
|
|
border-color: var(--ide-input-border, $border-color);
|
|
}
|
|
|
|
.md table:not(.code) tr th {
|
|
background-color: var(--ide-highlight-background, $gray-100);
|
|
}
|
|
|
|
&,
|
|
.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);
|
|
}
|
|
|
|
hr {
|
|
border-color: var(--ide-border-color, darken($gray-normal, 8%));
|
|
}
|
|
|
|
.md h1,
|
|
.md h2,
|
|
.md blockquote,
|
|
.md table:not(.code) tbody td,
|
|
.md table:not(.code) tr th,
|
|
.nav-links,
|
|
.gl-tabs-nav,
|
|
.common-note-form .md-area.is-focused .nav-links {
|
|
border-color: var(--ide-border-color-alt, $white-dark);
|
|
}
|
|
|
|
pre {
|
|
border-color: var(--ide-border-color-alt, $gray-100);
|
|
|
|
code {
|
|
background-color: var(--ide-empty-state-background, inherit);
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
|
|
.dropdown-menu .nav-links li a.active {
|
|
border-color: var(--ide-highlight-accent, $gl-text-color);
|
|
}
|
|
|
|
.gl-tabs-nav li a.gl-tab-nav-item-active {
|
|
box-shadow: inset 0 -2px 0 0 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, $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, $gl-text-color) !important;
|
|
}
|
|
|
|
.filtered-search-box input[type='search'] {
|
|
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, $white-normal);
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
|
|
&:hover {
|
|
background-color: var(--ide-input-border, $gray-100);
|
|
}
|
|
}
|
|
|
|
@function calc-btn-hover-padding($original-padding, $original-border: 1px) {
|
|
@return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border}));
|
|
}
|
|
|
|
.btn:not(.gl-button):not(.btn-link):not([disabled]):hover {
|
|
border-width: var(--ide-btn-hover-border-width, 1px);
|
|
padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
|
|
}
|
|
|
|
.btn:not(.gl-button):not([disabled]).btn-sm:hover {
|
|
padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px);
|
|
}
|
|
|
|
.btn:not(.gl-button):not([disabled]).btn-block:hover {
|
|
padding: calc-btn-hover-padding(6px) 0;
|
|
}
|
|
|
|
.btn-default:not(.gl-button),
|
|
.dropdown,
|
|
.dropdown-menu-toggle {
|
|
color: var(--ide-input-color, $gl-text-color) !important;
|
|
border-color: var(--ide-btn-default-border, $border-color);
|
|
}
|
|
|
|
.dropdown-menu-toggle {
|
|
border-color: var(--ide-btn-default-border, $gray-darkest);
|
|
background-color: var(--ide-input-background, transparent);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--ide-dropdown-btn-hover-background, $gray-darker) !important;
|
|
border-color: var(--ide-dropdown-btn-hover-border, $gray-darkest) !important;
|
|
}
|
|
}
|
|
|
|
// In IDE, the only inverted buttons are `.btn-remove`
|
|
.btn-inverted.btn-remove:not(.gl-button) {
|
|
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 {
|
|
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;
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
}
|
|
|
|
// todo: remove this block after all default buttons have been migrated to gl-button
|
|
.btn-default:not(.gl-button) {
|
|
background-color: var(--ide-btn-default-background, $white) !important;
|
|
border-color: var(--ide-btn-default-border, $border-color);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
|
|
background-color: var(--ide-btn-default-background, $white-normal) !important;
|
|
}
|
|
|
|
&:active,
|
|
.active {
|
|
border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
|
|
background-color: var(--ide-btn-default-background, $white-dark) !important;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
color: var(--ide-text-color, $gl-text-color);
|
|
border-color: var(--ide-background, $border-color);
|
|
background-color: var(--ide-dropdown-background, $white);
|
|
|
|
.nav-links {
|
|
background-color: var(--ide-dropdown-hover-background, $white);
|
|
border-color: var(--ide-dropdown-hover-background, $border-color);
|
|
}
|
|
|
|
.gl-tabs-nav {
|
|
background-color: var(--ide-dropdown-hover-background, $white);
|
|
box-shadow: inset 0 -2px 0 0 var(--ide-dropdown-hover-background, $border-color);
|
|
}
|
|
|
|
.divider {
|
|
background-color: var(--ide-dropdown-hover-background, $gray-100);
|
|
border-color: var(--ide-dropdown-hover-background, $gray-100);
|
|
}
|
|
|
|
li > a:not(.disable-hover):hover,
|
|
li > a:not(.disable-hover):focus,
|
|
li button:not(.disable-hover):hover,
|
|
li button:not(.disable-hover):focus,
|
|
li button.is-focused {
|
|
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, $gray-100) !important;
|
|
}
|
|
|
|
// todo: remove this block after all primary/info buttons have been migrated to gl-button
|
|
.btn-primary:not(.gl-button),
|
|
.btn-info:not(.gl-button) {
|
|
background-color: var(--ide-btn-primary-background, $blue-500);
|
|
border-color: var(--ide-btn-primary-border, $blue-600) !important;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
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;
|
|
}
|
|
}
|
|
|
|
// todo: remove this block after all success buttons have been migrated to gl-button
|
|
.btn-success:not(.gl-button) {
|
|
background-color: var(--ide-btn-success-background, $green-500);
|
|
border-color: var(--ide-btn-success-border, $green-600) !important;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
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;
|
|
}
|
|
}
|
|
|
|
// todo: remove this block after all disabled buttons have been migrated to gl-button
|
|
.btn[disabled]:not(.gl-button) {
|
|
background-color: var(--ide-btn-default-background, $gray-light) !important;
|
|
border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important;
|
|
color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
|
|
}
|
|
|
|
@function ide-btn-var($btn-type, $var-type, $value) {
|
|
@return var(--ide-btn-#{$btn-type}-#{$var-type}, $value);
|
|
}
|
|
|
|
@mixin ide-gl-button($btn-type, $bg-normal, $bg-hover, $bg-active, $border-normal, $border-hover, $border-focus, $border-active, $border-width-hover: 2px, $box-shadow-hover: $t-gray-a-08, $box-shadow-focus: 0 0 0 4px rgba($blue-500, 0.25)) {
|
|
background-color: ide-btn-var($btn-type, background, $bg-normal);
|
|
box-shadow: inset 0 0 0 1px ide-btn-var($btn-type, border, $border-normal);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: ide-btn-var($btn-type, background, $bg-hover);
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-hover),
|
|
0 2px 2px 0 $box-shadow-hover;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-focus),
|
|
ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus);
|
|
}
|
|
|
|
&:active:focus {
|
|
background-color: ide-btn-var($btn-type, background, $bg-active);
|
|
box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-active),
|
|
ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus);
|
|
}
|
|
}
|
|
|
|
.btn-default.gl-button.gl-button {
|
|
color: var(--ide-input-color, $gl-text-color);
|
|
|
|
@include ide-gl-button(default, $white, $gray-50, $gray-100, $gray-200, $gray-300, $gray-300, $gray-400);
|
|
}
|
|
|
|
.btn-success.gl-button.gl-button {
|
|
@include ide-gl-button(success, $green-500, $green-600, $green-800, $green-600, $green-800, $green-800, $green-900);
|
|
}
|
|
|
|
.btn-info.gl-button.gl-button,
|
|
.btn-primary.gl-button.gl-button {
|
|
@include ide-gl-button(primary, $blue-500, $blue-600, $blue-800, $blue-600, $blue-800, $blue-800, $blue-900);
|
|
}
|
|
|
|
.btn-danger.btn-danger-secondary.gl-button.gl-button {
|
|
color: var(--ide-input-color, $red-500);
|
|
|
|
@include ide-gl-button(danger-secondary, $white, $red-50, $red-100, $red-500, $red-600, $red-600, $red-700);
|
|
}
|
|
|
|
.btn[disabled].gl-button.gl-button {
|
|
color: var(--ide-btn-disabled-color, $gl-text-color-disabled);
|
|
|
|
@include ide-gl-button(disabled, $gray-10, $gray-10, $gray-10, $gray-100, $gray-100, $gray-100, $gray-100, 1px, transparent, transparent);
|
|
}
|
|
|
|
.md table:not(.code) tbody {
|
|
background-color: var(--ide-empty-state-background, $white);
|
|
}
|
|
|
|
.animation-container {
|
|
[class^='skeleton-line-'] {
|
|
background-color: var(--ide-animation-gradient-1, $gray-100);
|
|
|
|
&::after {
|
|
background-image: linear-gradient(to right,
|
|
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, $line-added-dark);
|
|
}
|
|
|
|
.idiff.deletion {
|
|
background-color: var(--ide-diff-remove, $line-removed-dark);
|
|
}
|
|
|
|
~ .popover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.navbar:not(.theme-white):not(.theme-none) {
|
|
border-bottom-color: transparent;
|
|
}
|