2021-04-03 11:21:58 +02:00
|
|
|
.theme-dark {
|
|
|
|
color: $body-font-color-dark;
|
|
|
|
background: $body-bg-dark;
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
background: rgba($color: #fff, $alpha: 0.5);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: rgba($color: #fff, $alpha: 1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
:disabled {
|
|
|
|
.file-uploader {
|
|
|
|
background-color: #151515;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-08-16 19:44:55 +02:00
|
|
|
option,
|
|
|
|
optgroup {
|
|
|
|
background-color: $bg-color-gray;
|
|
|
|
}
|
|
|
|
|
2021-04-03 11:21:58 +02:00
|
|
|
// Override Spectre.css
|
|
|
|
.menu {
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
|
|
|
|
.menu-item a {
|
|
|
|
&:hover {
|
|
|
|
color: $primary-color;
|
|
|
|
background: $bg-color-gray;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
&.btn-link {
|
|
|
|
color: rgba($body-font-color-dark, 0.8);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: $body-font-color-dark;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.btn-gray {
|
|
|
|
color: #fff;
|
|
|
|
background: $bg-color-gray;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: $bg-color-dark;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.btn-dark {
|
|
|
|
color: #fff;
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
border-color: $bg-color-light-dark;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: $bg-color-gray;
|
|
|
|
}
|
2021-06-19 11:54:15 +02:00
|
|
|
|
|
|
|
&.active {
|
|
|
|
background-color: $primary-color;
|
|
|
|
}
|
2021-04-03 11:21:58 +02:00
|
|
|
}
|
2021-07-14 16:10:34 +02:00
|
|
|
|
|
|
|
&.btn-clear {
|
|
|
|
&:hover {
|
|
|
|
background: rgba($light-color, 20%);
|
|
|
|
}
|
|
|
|
}
|
2021-04-03 11:21:58 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.modal {
|
|
|
|
.modal-overlay,
|
|
|
|
&.active .modal-overlay {
|
|
|
|
background: rgba(255, 255, 255, 0.15);
|
|
|
|
}
|
|
|
|
|
|
|
|
.modal-container,
|
|
|
|
.modal-sm .modal-container {
|
|
|
|
box-shadow: 0 0 1px 0 #000;
|
|
|
|
background: $bg-color-dark;
|
|
|
|
|
|
|
|
.modal-header {
|
|
|
|
background: $bg-color-gray;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
border-color: #272727;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form-select,
|
|
|
|
.form-input,
|
|
|
|
.form-select:not([multiple]):not([size]),
|
|
|
|
.form-checkbox .form-icon,
|
|
|
|
.form-radio .form-icon {
|
|
|
|
border-color: $bg-color-light-dark;
|
|
|
|
background-color: $bg-color-gray;
|
|
|
|
color: $body-font-color-dark;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form-input.is-error,
|
|
|
|
.form-select.is-error {
|
|
|
|
background-color: $bg-color-gray;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form-input:not(:placeholder-shown):invalid:focus {
|
|
|
|
background: $bg-color-gray;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form-select:not([multiple]):not([size]):focus {
|
|
|
|
border-color: $primary-color;
|
|
|
|
}
|
|
|
|
|
2022-05-09 11:29:25 +02:00
|
|
|
.select {
|
|
|
|
&__list-wrapper {
|
|
|
|
border-color: $bg-color-gray;
|
|
|
|
background-color: $bg-color-light-dark;
|
2022-05-08 09:45:37 +02:00
|
|
|
}
|
2022-05-09 17:31:58 +02:00
|
|
|
|
|
|
|
&__group {
|
|
|
|
background: rgba($bg-color-gray, 0.65);
|
|
|
|
color: rgba($bg-color-light-gray, 0.7);
|
|
|
|
}
|
2022-05-08 09:45:37 +02:00
|
|
|
}
|
|
|
|
|
2021-04-07 09:20:11 +02:00
|
|
|
.form-input[readonly] {
|
|
|
|
background-color: $bg-color-dark;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
|
2021-04-03 11:21:58 +02:00
|
|
|
.input-group .input-group-addon {
|
|
|
|
border-color: #3f3f3f;
|
|
|
|
background: $bg-color-dark;
|
|
|
|
}
|
|
|
|
|
|
|
|
.empty {
|
|
|
|
color: $body-font-color-dark;
|
|
|
|
background: transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form-switch .form-icon::before {
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
}
|
|
|
|
|
2021-08-03 17:59:15 +02:00
|
|
|
code {
|
|
|
|
background-color: #000;
|
2021-11-08 15:12:37 +01:00
|
|
|
color: rgba($body-font-color-dark, 0.7);
|
2021-08-03 17:59:15 +02:00
|
|
|
}
|
|
|
|
|
2021-04-03 11:21:58 +02:00
|
|
|
// Antares
|
|
|
|
.workspace {
|
|
|
|
.workspace-explorebar {
|
|
|
|
background: $bg-color-gray;
|
|
|
|
box-shadow: 0 0 1px 0 #000;
|
|
|
|
|
|
|
|
.workspace-explorebar-database {
|
|
|
|
.database-name {
|
|
|
|
background: $bg-color-gray;
|
|
|
|
}
|
|
|
|
|
|
|
|
.database-name,
|
|
|
|
.misc-name {
|
|
|
|
&:hover {
|
|
|
|
color: $body-font-color-dark;
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
a.table-name {
|
|
|
|
&:hover {
|
|
|
|
color: inherit;
|
|
|
|
background: inherit;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.menu-item {
|
2021-08-05 12:09:54 +02:00
|
|
|
&:hover,
|
|
|
|
&.selected {
|
2021-04-03 11:21:58 +02:00
|
|
|
color: $body-font-color-dark;
|
|
|
|
background: rgba($color: #fff, $alpha: 0.05);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.workspace-tabs {
|
|
|
|
.tab-block {
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
|
|
|
|
.tab-item {
|
|
|
|
> a {
|
|
|
|
color: $body-font-color-dark;
|
|
|
|
}
|
|
|
|
|
2021-07-14 20:30:54 +02:00
|
|
|
&.tools-dropdown {
|
|
|
|
background-color: $bg-color-light-dark;
|
2021-04-03 11:21:58 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.workspace-query-runner .workspace-query-runner-footer .workspace-query-buttons .btn {
|
|
|
|
color: $body-font-color-dark;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-25 13:45:07 +02:00
|
|
|
.workspace-query-results {
|
|
|
|
.table {
|
|
|
|
.th {
|
|
|
|
border-color: darken($bg-color-light-gray, 80%);
|
|
|
|
background-color: $body-bg-dark;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tr {
|
|
|
|
background-color: darken($bg-color-light-gray, 80%);
|
|
|
|
|
|
|
|
.td:first-child {
|
|
|
|
border-left: 2px solid $body-bg-dark;
|
|
|
|
}
|
|
|
|
|
|
|
|
.td {
|
|
|
|
border-color: $body-bg-dark;
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
|
|
|
|
background-color: rgba($color: #000, $alpha: 0.3);
|
|
|
|
}
|
|
|
|
|
|
|
|
.editable-field {
|
|
|
|
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
|
|
|
|
background-color: rgba($color: #000, $alpha: 0.3);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-05-08 09:45:37 +02:00
|
|
|
|
2021-07-08 18:43:31 +02:00
|
|
|
.connection-panel {
|
|
|
|
.panel {
|
|
|
|
background: rgba($bg-color-light-dark, 50%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-04-03 11:21:58 +02:00
|
|
|
.bg-checkered {
|
2022-05-08 09:45:37 +02:00
|
|
|
background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)), linear-gradient(to right, black 50%, white 50%),
|
2021-07-05 09:30:52 +02:00
|
|
|
linear-gradient(to bottom, black 50%, white 50%);
|
2021-04-03 11:21:58 +02:00
|
|
|
background-blend-mode: normal, difference, normal;
|
|
|
|
background-size: 2em 2em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.context {
|
|
|
|
color: $body-font-color-dark;
|
|
|
|
|
|
|
|
.context-container {
|
|
|
|
box-shadow: 0 0 2px 0 #000;
|
|
|
|
background: #1d1d1d;
|
|
|
|
|
|
|
|
.context-element {
|
|
|
|
.context-submenu {
|
|
|
|
background: #1d1d1d;
|
|
|
|
box-shadow: 0 0 2px 0 #000;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
2021-06-29 18:22:40 +02:00
|
|
|
background: rgba($light-color, 15%);
|
2021-04-03 11:21:58 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.editor-wrapper {
|
|
|
|
border-bottom: 1px solid #444;
|
|
|
|
}
|
|
|
|
|
|
|
|
.file-uploader {
|
|
|
|
border: 0.05rem solid $bg-color-light-dark;
|
|
|
|
background-color: $bg-color-gray;
|
|
|
|
|
|
|
|
.file-uploader-message {
|
|
|
|
border-right: 0.05rem solid $bg-color-light-dark;
|
|
|
|
background-color: $bg-color-dark;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.tile {
|
2021-09-17 18:32:28 +02:00
|
|
|
transition: background 0.2s;
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
background: rgba($bg-color-light-dark, 60%);
|
|
|
|
}
|
|
|
|
|
2021-04-03 11:21:58 +02:00
|
|
|
&:hover {
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.selected-element {
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.editor-col {
|
2021-06-29 23:31:18 +02:00
|
|
|
border-left: 0.05rem solid rgba($bg-color-light-dark, 60%);
|
2021-04-03 11:21:58 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.table {
|
|
|
|
.td,
|
|
|
|
.th {
|
|
|
|
border-bottom: $border-width solid $border-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
&,
|
|
|
|
&.table-striped {
|
|
|
|
.tbody {
|
|
|
|
.tr {
|
|
|
|
&.selected {
|
|
|
|
background: #333 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
background: $bg-color-dark;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.table-hover {
|
|
|
|
.tbody {
|
|
|
|
.tr {
|
|
|
|
&:hover {
|
|
|
|
background: #151515;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.table-striped {
|
|
|
|
.tbody {
|
|
|
|
.tr:nth-of-type(odd) {
|
|
|
|
background: $bg-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#titlebar {
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
box-shadow: 0 0 1px 0 #000;
|
|
|
|
|
|
|
|
.titlebar-elements {
|
|
|
|
.titlebar-element {
|
|
|
|
&:hover {
|
|
|
|
opacity: 1;
|
|
|
|
background: rgba($color: #fff, $alpha: 0.2);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.close-button:hover {
|
|
|
|
background: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#settingbar {
|
|
|
|
width: $settingbar-width;
|
|
|
|
height: calc(100vh - #{$excluding-size});
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
padding: 0;
|
|
|
|
box-shadow: 0 0 1px 0 #000;
|
|
|
|
z-index: 9;
|
|
|
|
|
|
|
|
.settingbar-top-elements {
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: overlay;
|
|
|
|
max-height: calc((100vh - 3.5rem) - #{$excluding-size});
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
width: 3px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.settingbar-bottom-elements {
|
|
|
|
padding-top: 0.5rem;
|
|
|
|
background: $bg-color-light-dark;
|
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.settingbar-elements {
|
|
|
|
list-style: none;
|
|
|
|
text-align: center;
|
|
|
|
width: $settingbar-width;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
.settingbar-element {
|
|
|
|
.settingbar-element-icon {
|
|
|
|
&.badge::after {
|
|
|
|
bottom: -10px;
|
|
|
|
right: 0;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.badge-update::after {
|
|
|
|
bottom: initial;
|
|
|
|
background: $primary-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ex-tooltip {
|
|
|
|
.ex-tooltip-content {
|
|
|
|
background: rgba(48, 55, 66, 0.95);
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#footer {
|
|
|
|
background: $primary-color;
|
|
|
|
box-shadow: 0 0 1px 0 #000;
|
|
|
|
|
|
|
|
.footer-elements {
|
|
|
|
.footer-element {
|
|
|
|
&.footer-link {
|
|
|
|
&:hover {
|
|
|
|
background: rgba($color: #fff, $alpha: 0.1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
|
|
|
|
background-color: #c9561a99;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
|
|
|
|
background-color: #c9571a33;
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight {
|
|
|
|
color: #e0d00c;
|
|
|
|
}
|