2020-05-15 21:08:21 +00:00
|
|
|
// -------
|
|
|
|
// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
|
|
|
|
// -------
|
2020-04-21 15:21:10 +00:00
|
|
|
.ide.theme-dark {
|
2020-05-06 12:09:36 +00:00
|
|
|
a:not(.btn) {
|
2020-05-12 12:09:47 +00:00
|
|
|
color: var(--ide-link-color);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
h1,
|
|
|
|
h2,
|
|
|
|
h3,
|
2020-05-08 12:09:37 +00:00
|
|
|
h4,
|
2020-04-21 15:21:10 +00:00
|
|
|
h5,
|
|
|
|
h6,
|
2020-04-30 21:09:47 +00:00
|
|
|
code,
|
|
|
|
.md table:not(.code),
|
2020-04-21 15:21:10 +00:00
|
|
|
.md,
|
|
|
|
.md p,
|
|
|
|
.context-header > a,
|
|
|
|
input,
|
|
|
|
textarea,
|
|
|
|
.md-area.is-focused,
|
2020-05-04 12:09:46 +00:00
|
|
|
.dropdown-menu li button,
|
|
|
|
.dropdown-menu-selectable li a.is-active,
|
|
|
|
.dropdown-menu-inner-title,
|
2020-05-06 12:09:36 +00:00
|
|
|
.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 {
|
2020-05-12 12:09:47 +00:00
|
|
|
color: var(--ide-text-color);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-05-06 12:09:36 +00:00
|
|
|
.drag-handle:hover,
|
|
|
|
.card-header .badge.badge-pill {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-dropdown-hover-background);
|
2020-05-06 12:09:36 +00:00
|
|
|
}
|
|
|
|
|
2020-04-21 15:21:10 +00:00
|
|
|
.file-row .file-row-icon svg,
|
2020-05-06 12:09:36 +00:00
|
|
|
.file-row:hover .file-row-icon svg,
|
|
|
|
.controllers-buttons svg {
|
2020-05-19 15:08:04 +00:00
|
|
|
color: var(--ide-text-color-secondary);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.text-secondary {
|
2020-05-19 15:08:04 +00:00
|
|
|
color: var(--ide-text-color-secondary) !important;
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-05-04 12:09:46 +00:00
|
|
|
input[type='search']::placeholder,
|
2020-04-21 15:21:10 +00:00
|
|
|
input[type='text']::placeholder,
|
2020-05-04 12:09:46 +00:00
|
|
|
textarea::placeholder,
|
|
|
|
.dropdown-input .fa {
|
2020-05-12 12:09:47 +00:00
|
|
|
color: var(--ide-input-border);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-05-04 12:09:46 +00:00
|
|
|
.ide-nav-form .input-icon {
|
2020-05-19 15:08:04 +00:00
|
|
|
color: var(--ide-input-border);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-04-30 21:09:47 +00:00
|
|
|
code,
|
2020-05-06 12:09:36 +00:00
|
|
|
.badge.badge-pill,
|
|
|
|
.card-header,
|
|
|
|
.bs-callout,
|
|
|
|
.ide-pipeline .top-bar,
|
|
|
|
.ide-terminal .top-bar {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-background);
|
2020-04-30 21:09:47 +00:00
|
|
|
}
|
|
|
|
|
2020-05-06 12:09:36 +00:00
|
|
|
.bs-callout {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-dropdown-background);
|
2020-05-06 12:09:36 +00:00
|
|
|
|
|
|
|
code {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-dropdown-background);
|
2020-05-06 12:09:36 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-dropdown-hover-background);
|
2020-05-06 12:09:36 +00:00
|
|
|
}
|
|
|
|
|
2020-04-21 15:21:10 +00:00
|
|
|
.common-note-form .md-area {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-input-border);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&,
|
2020-04-30 21:09:47 +00:00
|
|
|
.md table:not(.code) tr th,
|
2020-04-21 15:21:10 +00:00
|
|
|
.common-note-form .md-area,
|
2020-05-19 15:08:04 +00:00
|
|
|
.card {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-highlight-background);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-05-06 12:09:36 +00:00
|
|
|
.card,
|
|
|
|
.card-header,
|
|
|
|
.ide-terminal .top-bar,
|
|
|
|
.ide-pipeline .top-bar {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-border-color);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-05-19 15:08:04 +00:00
|
|
|
hr,
|
2020-04-30 21:09:47 +00:00
|
|
|
.md h1,
|
|
|
|
.md h2,
|
|
|
|
.md blockquote,
|
|
|
|
pre,
|
|
|
|
.md table:not(.code) tbody td,
|
|
|
|
.md table:not(.code) tr th,
|
2020-05-19 15:08:04 +00:00
|
|
|
.nav-links:not(.quick-links) {
|
|
|
|
border-color: var(--ide-border-color-alt);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.ide-sidebar-link.active {
|
2020-05-12 12:09:47 +00:00
|
|
|
color: var(--ide-highlight-accent);
|
|
|
|
box-shadow: inset 3px 0 var(--ide-highlight-accent);
|
2020-04-21 15:21:10 +00:00
|
|
|
|
|
|
|
&.is-right {
|
2020-05-12 12:09:47 +00:00
|
|
|
box-shadow: inset -3px 0 var(--ide-highlight-accent);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-06 12:09:36 +00:00
|
|
|
.nav-links li.active a,
|
|
|
|
.nav-links li a.active {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-highlight-accent);
|
|
|
|
color: var(--ide-text-color);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.avatar-container {
|
|
|
|
&,
|
|
|
|
.avatar {
|
2020-05-12 12:09:47 +00:00
|
|
|
color: var(--ide-text-color);
|
|
|
|
background-color: var(--ide-highlight-background);
|
|
|
|
border-color: var(--ide-highlight-background);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-04 12:09:46 +00:00
|
|
|
input[type='text'],
|
|
|
|
input[type='search'],
|
|
|
|
.filtered-search-box {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-input-border);
|
|
|
|
background: var(--ide-input-background) !important;
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
input[type='text'],
|
2020-05-04 12:09:46 +00:00
|
|
|
input[type='search'],
|
|
|
|
.filtered-search-box,
|
2020-04-21 15:21:10 +00:00
|
|
|
textarea {
|
2020-05-12 12:09:47 +00:00
|
|
|
color: var(--ide-input-color) !important;
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-05-04 12:09:46 +00:00
|
|
|
.filtered-search-box input[type='search'] {
|
|
|
|
border-color: transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
.filtered-search-token .value-container,
|
|
|
|
.filtered-search-term .value-container {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-dropdown-hover-background);
|
|
|
|
color: var(--ide-text-color);
|
2020-05-04 12:09:46 +00:00
|
|
|
|
|
|
|
&:hover {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-input-border);
|
2020-05-04 12:09:46 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-12 12:09:47 +00:00
|
|
|
@function calc-btn-hover-padding($original-padding, $original-border: 1px) {
|
|
|
|
@return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width));
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-05-06 12:09:36 +00:00
|
|
|
.btn:not(.btn-link):not([disabled]):hover {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-width: var(--ide-btn-hover-border-width);
|
|
|
|
padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-05-06 12:09:36 +00:00
|
|
|
.btn:not([disabled]).btn-sm:hover {
|
2020-05-12 12:09:47 +00:00
|
|
|
padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-05-06 12:09:36 +00:00
|
|
|
.btn:not([disabled]).btn-block:hover {
|
2020-05-12 12:09:47 +00:00
|
|
|
padding: calc-btn-hover-padding(6px) 0;
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.btn-inverted,
|
|
|
|
.btn-default,
|
|
|
|
.dropdown,
|
|
|
|
.dropdown-menu-toggle {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-input-background) !important;
|
|
|
|
color: var(--ide-input-color) !important;
|
|
|
|
border-color: var(--ide-btn-default-border);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.btn-inverted,
|
|
|
|
.btn-default {
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-btn-default-hover-border) !important;
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.dropdown,
|
|
|
|
.dropdown-menu-toggle {
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-dropdown-btn-hover-background) !important;
|
|
|
|
border-color: var(--ide-dropdown-btn-hover-border) !important;
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-04 12:09:46 +00:00
|
|
|
.dropdown-menu {
|
2020-05-12 12:09:47 +00:00
|
|
|
color: var(--ide-text-color);
|
|
|
|
border-color: var(--ide-background);
|
|
|
|
background-color: var(--ide-dropdown-background);
|
2020-05-04 12:09:46 +00:00
|
|
|
|
|
|
|
.divider,
|
|
|
|
.nav-links:not(.quick-links) {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-dropdown-hover-background);
|
|
|
|
border-color: var(--ide-dropdown-hover-background);
|
2020-05-04 12:09:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.nav-links li a.active {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-highlight-accent);
|
2020-05-04 12:09:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.nav-links:not(.quick-links) li:not(.md-header-toolbar) a {
|
2020-05-12 12:09:47 +00:00
|
|
|
color: var(--ide-text-color);
|
2020-05-04 12:09:46 +00:00
|
|
|
|
|
|
|
&.active {
|
2020-05-12 12:09:47 +00:00
|
|
|
color: var(--ide-text-color);
|
2020-05-04 12:09:46 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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 {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-dropdown-hover-background);
|
|
|
|
color: var(--ide-text-color);
|
2020-05-04 12:09:46 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.dropdown-title,
|
|
|
|
.dropdown-input {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-dropdown-hover-background) !important;
|
2020-05-04 12:09:46 +00:00
|
|
|
}
|
|
|
|
|
2020-05-12 12:09:47 +00:00
|
|
|
.btn-primary,
|
|
|
|
.btn-info {
|
|
|
|
background-color: var(--ide-btn-primary-background);
|
|
|
|
border-color: var(--ide-btn-primary-border) !important;
|
2020-04-21 15:21:10 +00:00
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-btn-primary-hover-border) !important;
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn-success {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-btn-success-background);
|
|
|
|
border-color: var(--ide-btn-success-border) !important;
|
2020-04-21 15:21:10 +00:00
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
2020-05-12 12:09:47 +00:00
|
|
|
border-color: var(--ide-btn-success-hover-border) !important;
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn[disabled] {
|
2020-05-12 12:09:47 +00:00
|
|
|
background: var(--ide-btn-default-background) !important;
|
|
|
|
border: 1px solid var(--ide-btn-disabled-border) !important;
|
|
|
|
color: var(--ide-btn-disabled-color) !important;
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
2020-05-12 12:09:47 +00:00
|
|
|
pre code,
|
2020-05-19 15:08:04 +00:00
|
|
|
.md table:not(.code) tbody {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-border-color);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.animation-container {
|
|
|
|
[class^='skeleton-line-'] {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-animation-gradient-1);
|
2020-04-21 15:21:10 +00:00
|
|
|
|
|
|
|
&::after {
|
|
|
|
background-image: linear-gradient(to right,
|
2020-05-12 12:09:47 +00:00
|
|
|
var(--ide-animation-gradient-1) 0%,
|
|
|
|
var(--ide-animation-gradient-2) 20%,
|
|
|
|
var(--ide-animation-gradient-1) 40%,
|
|
|
|
var(--ide-animation-gradient-1) 100%);
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-04-30 21:09:47 +00:00
|
|
|
|
|
|
|
.idiff.addition {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-diff-insert);
|
2020-04-30 21:09:47 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.idiff.deletion {
|
2020-05-12 12:09:47 +00:00
|
|
|
background-color: var(--ide-diff-remove);
|
2020-04-30 21:09:47 +00:00
|
|
|
}
|
2020-04-21 15:21:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.navbar.theme-dark {
|
|
|
|
border-bottom-color: transparent;
|
|
|
|
}
|
2020-05-04 12:09:46 +00:00
|
|
|
|
|
|
|
.theme-dark ~ .popover {
|
|
|
|
box-shadow: none;
|
|
|
|
}
|