mirror of https://github.com/Fabio286/antares.git
478 lines
9.0 KiB
SCSS
478 lines
9.0 KiB
SCSS
/* stylelint-disable selector-class-pattern */
|
|
/* stylelint-disable function-no-unknown */
|
|
.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: 50%);
|
|
|
|
&:hover {
|
|
background: rgba($color: #fff, $alpha: 100%);
|
|
}
|
|
}
|
|
|
|
:disabled {
|
|
.file-uploader {
|
|
background-color: #151515;
|
|
}
|
|
}
|
|
|
|
option,
|
|
optgroup {
|
|
background-color: $bg-color-gray;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
&.active {
|
|
background-color: $primary-color;
|
|
}
|
|
}
|
|
|
|
&.btn-clear {
|
|
&:hover {
|
|
background: rgba($light-color, 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
.modal-overlay,
|
|
&.active .modal-overlay {
|
|
background: rgb(255 255 255 / 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], [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-select:not([multiple], [size]) {
|
|
background-color: $bg-color-gray !important;
|
|
}
|
|
|
|
.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], [size]):focus {
|
|
border-color: $primary-color;
|
|
}
|
|
|
|
.select {
|
|
&__list-wrapper {
|
|
border-color: $bg-color-gray;
|
|
background-color: $bg-color-light-dark;
|
|
}
|
|
|
|
&__group {
|
|
background: rgba($bg-color-gray, 0.65);
|
|
color: rgba($bg-color-light-gray, 0.7);
|
|
}
|
|
}
|
|
|
|
.form-input[readonly] {
|
|
background-color: $bg-color-dark;
|
|
cursor: default;
|
|
}
|
|
|
|
.has-error .form-input {
|
|
background: $bg-color-dark;
|
|
}
|
|
|
|
.input-group {
|
|
.input-group-addon {
|
|
border-color: #3f3f3f;
|
|
background: $bg-color-dark;
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
color: $body-font-color-dark;
|
|
background: transparent;
|
|
}
|
|
|
|
.divider {
|
|
border-top: 0.05rem solid rgba($body-font-color-dark, 0.1);
|
|
}
|
|
|
|
.form-switch .form-icon::before {
|
|
background: $bg-color-light-dark;
|
|
}
|
|
|
|
code {
|
|
background-color: #111;
|
|
border: 1px solid #444;
|
|
color: rgba($body-font-color-dark, 0.7);
|
|
}
|
|
|
|
/* 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 {
|
|
&:hover,
|
|
&.selected {
|
|
color: $body-font-color-dark;
|
|
background: rgba($color: #fff, $alpha: 5%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.workspace-tabs {
|
|
.tab-block {
|
|
background: $bg-color-light-dark;
|
|
|
|
.tab-item {
|
|
background: $bg-color-light-dark;
|
|
|
|
> a {
|
|
color: $body-font-color-dark;
|
|
}
|
|
|
|
&.tools-dropdown {
|
|
background-color: $bg-color-light-dark;
|
|
}
|
|
}
|
|
|
|
.workspace-query-runner .workspace-query-runner-footer .workspace-query-buttons .btn {
|
|
color: $body-font-color-dark;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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,
|
|
&.selected {
|
|
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
|
|
background-color: rgba($color: #000, $alpha: 30%);
|
|
}
|
|
|
|
.editable-field {
|
|
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
|
|
background-color: rgba($color: #000, $alpha: 30%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.connection-panel {
|
|
.panel {
|
|
background: rgba($bg-color-light-dark, 50%);
|
|
}
|
|
}
|
|
|
|
.connection-block {
|
|
&:hover {
|
|
background: $bg-color-light-dark;
|
|
}
|
|
}
|
|
|
|
.bg-checkered {
|
|
background-image:
|
|
linear-gradient(to right, rgb(192 192 192 / 75%), rgb(192 192 192 / 75%)),
|
|
linear-gradient(to right, black 50%, white 50%),
|
|
linear-gradient(to bottom, black 50%, white 50%);
|
|
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 {
|
|
background: rgba($light-color, 15%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.query-console {
|
|
border-top: 1px solid #444;
|
|
background-color: $bg-color-dark;
|
|
|
|
.query-console-log {
|
|
&:hover,
|
|
&:focus {
|
|
background: $bg-color-gray;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tile {
|
|
transition: background 0.2s;
|
|
|
|
&:focus {
|
|
background: rgba($bg-color-light-dark, 60%);
|
|
}
|
|
|
|
&:hover {
|
|
background: $bg-color-light-dark;
|
|
}
|
|
|
|
&.selected-element {
|
|
background: $bg-color-light-dark;
|
|
}
|
|
}
|
|
|
|
.editor-col {
|
|
border-left: 0.05rem solid rgba($bg-color-light-dark, 60%);
|
|
}
|
|
|
|
.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: 10%);
|
|
}
|
|
|
|
&.close-button:hover {
|
|
background: red;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#settingbar {
|
|
background: $bg-color-light-dark;
|
|
box-shadow: 0 0 1px 0 #000;
|
|
|
|
.settingbar-top-elements {
|
|
overflow-x: hidden;
|
|
overflow-y: overlay;
|
|
max-height: calc((100vh - 3.5rem) - #{$excluding-size});
|
|
}
|
|
|
|
.settingbar-bottom-elements {
|
|
background: $bg-color-light-dark;
|
|
}
|
|
|
|
.settingbar-elements {
|
|
list-style: none;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
.settingbar-element {
|
|
.settingbar-element-icon {
|
|
&.badge-update::after {
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ex-tooltip {
|
|
.ex-tooltip-content {
|
|
background: rgb(48 55 66 / 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: 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|