mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
feat(UI): light theme
This commit is contained in:
@ -27,7 +27,6 @@
|
||||
|
||||
.td,
|
||||
.th {
|
||||
border-bottom: $border-width solid $border-color;
|
||||
padding: $unit-3 $unit-2;
|
||||
display: table-cell;
|
||||
}
|
||||
@ -35,37 +34,4 @@
|
||||
.th {
|
||||
border-bottom-width: $border-width-lg;
|
||||
}
|
||||
|
||||
&,
|
||||
&.table-striped {
|
||||
.tbody {
|
||||
.tr {
|
||||
&.selected {
|
||||
background: #333 !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover {
|
||||
.tbody {
|
||||
.tr {
|
||||
&:hover {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-striped {
|
||||
.tbody {
|
||||
.tr:nth-of-type(odd) {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
/* Colors */
|
||||
$body-bg: #1d1d1d;
|
||||
$body-font-color: #fff;
|
||||
$bg-color: #1d1d1d;
|
||||
$bg-color-light: #3f3f3f;
|
||||
$body-bg: #fdfdfd;
|
||||
$body-bg-dark: #1d1d1d;
|
||||
$body-font-color-dark: #fff;
|
||||
$bg-color-dark: #1d1d1d;
|
||||
$bg-color-light-dark: #3f3f3f;
|
||||
$bg-color-gray: #272727;
|
||||
$bg-color-light-gray: #f1f1f1;
|
||||
$light-color: #fdfdfd;
|
||||
$primary-color: #e36929;
|
||||
$success-color: #32b643;
|
||||
$error-color: #de3b28;
|
||||
@ -14,8 +17,8 @@ $number-color: cornflowerblue;
|
||||
$date-color: coral;
|
||||
$bit-color: lightskyblue;
|
||||
$blob-color: darkorchid;
|
||||
$array-color: greenyellow;
|
||||
$enum-color: gold;
|
||||
$array-color: yellowgreen;
|
||||
$enum-color: goldenrod;
|
||||
$unknown-color: gray;
|
||||
|
||||
/* Sizes */
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
@import "fake-tables";
|
||||
@import "mdi-additions";
|
||||
@import "db-icons";
|
||||
@import "themes/dark-theme";
|
||||
@import "themes/light-theme";
|
||||
@import "~spectre.css/src/spectre";
|
||||
@import "~spectre.css/src/spectre-exp";
|
||||
|
||||
@ -19,27 +21,6 @@ body {
|
||||
@include padding-variant(3, $unit-3);
|
||||
@include padding-variant(4, $unit-4);
|
||||
|
||||
.btn {
|
||||
&.btn-gray {
|
||||
color: #fff;
|
||||
background: $bg-color-gray;
|
||||
|
||||
&:hover {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-dark {
|
||||
color: #fff;
|
||||
background: $bg-color-light;
|
||||
border-color: $bg-color-light;
|
||||
|
||||
&:hover {
|
||||
background: $bg-color-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-vcentered {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
@ -55,15 +36,6 @@ body {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.bg-checkered {
|
||||
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%),
|
||||
linear-gradient(to bottom, black 50%, white 50%);
|
||||
background-blend-mode: normal, difference, normal;
|
||||
background-size: 2em 2em;
|
||||
}
|
||||
|
||||
.workspace-tabs {
|
||||
align-content: baseline;
|
||||
|
||||
@ -80,13 +52,14 @@ body {
|
||||
.btn {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
color: $body-font-color;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-query-info {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
> div + div {
|
||||
padding-left: 0.6rem;
|
||||
@ -106,18 +79,6 @@ body {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $bg-color-light;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba($color: #fff, $alpha: 0.5);
|
||||
|
||||
&:hover {
|
||||
background: rgba($color: #fff, $alpha: 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes rotation {
|
||||
from {
|
||||
@ -135,32 +96,21 @@ body {
|
||||
|
||||
/* Override */
|
||||
.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;
|
||||
padding: 0;
|
||||
background: $bg-color;
|
||||
|
||||
.modal-header {
|
||||
padding: 0.4rem 0.8rem;
|
||||
text-transform: uppercase;
|
||||
background: $bg-color-gray;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
border-color: #272727;
|
||||
|
||||
.tab-item {
|
||||
.btn-clear {
|
||||
margin-top: -0.1rem;
|
||||
@ -192,34 +142,11 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.form-select,
|
||||
.form-input,
|
||||
.form-select:not([multiple]):not([size]),
|
||||
.form-checkbox .form-icon,
|
||||
.form-radio .form-icon {
|
||||
border-color: $bg-color-light;
|
||||
background-color: $bg-color-gray;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.form-input[type="file"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.input-group .input-group-addon {
|
||||
border-color: #3f3f3f;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -243,7 +170,3 @@ body {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: $body-font-color;
|
||||
}
|
||||
|
||||
435
src/renderer/scss/themes/dark-theme.scss
Normal file
435
src/renderer/scss/themes/dark-theme.scss
Normal file
@ -0,0 +1,435 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
color: $body-font-color-dark;
|
||||
background: rgba($color: #fff, $alpha: 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-query-results {
|
||||
.table {
|
||||
.th {
|
||||
background: $bg-color-dark;
|
||||
border-color: $bg-color-light-dark;
|
||||
}
|
||||
|
||||
.td {
|
||||
border-color: $bg-color-light-dark;
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 1px $body-font-color-dark;
|
||||
background: rgba($color: #000, $alpha: 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-tabs {
|
||||
.tab-block {
|
||||
background: $bg-color-light-dark;
|
||||
|
||||
.tab-item {
|
||||
> a {
|
||||
color: $body-font-color-dark;
|
||||
}
|
||||
|
||||
& &.tools-dropdown {
|
||||
.tab-link:focus {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.menu {
|
||||
.menu-item a {
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
background: $bg-color-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-query-runner .workspace-query-runner-footer .workspace-query-buttons .btn {
|
||||
color: $body-font-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-checkered {
|
||||
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%),
|
||||
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: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
&:hover {
|
||||
background: $bg-color-light-dark;
|
||||
}
|
||||
|
||||
&.selected-element {
|
||||
background: $bg-color-light-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-col {
|
||||
border-left: 2px solid $bg-color-light-dark;
|
||||
}
|
||||
|
||||
.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 {
|
||||
height: $settingbar-width;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-left: 3px solid transparent;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-left-color: $body-font-color-dark;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.settingbar-element-icon {
|
||||
&.badge::after {
|
||||
bottom: -10px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: $success-color;
|
||||
}
|
||||
|
||||
&.badge-update::after {
|
||||
bottom: initial;
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ex-tooltip {
|
||||
.ex-tooltip-content {
|
||||
background: rgba(48, 55, 66, 0.95);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover .ex-tooltip-content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
299
src/renderer/scss/themes/light-theme.scss
Normal file
299
src/renderer/scss/themes/light-theme.scss
Normal file
@ -0,0 +1,299 @@
|
||||
.theme-light {
|
||||
::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba($color: $bg-color-light-dark, $alpha: 0.5);
|
||||
|
||||
&:hover {
|
||||
background: rgba($color: $bg-color-light-dark, $alpha: 1);
|
||||
}
|
||||
}
|
||||
|
||||
.form-input:disabled,
|
||||
.form-input.disabled,
|
||||
.form-select:disabled,
|
||||
.form-select.disabled {
|
||||
background: #ababab;
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
background: $bg-color-light;
|
||||
box-shadow: 0 0 1px 0 #000;
|
||||
|
||||
.titlebar-elements {
|
||||
.titlebar-element {
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: rgba($color: rgb(172, 172, 172), $alpha: 0.2);
|
||||
}
|
||||
|
||||
&.close-button:hover {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.btn-link {
|
||||
color: rgba($body-font-color, 0.8);
|
||||
|
||||
&:hover {
|
||||
color: $body-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-gray {
|
||||
color: #fff;
|
||||
background: $bg-color-gray;
|
||||
|
||||
&:hover {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-dark {
|
||||
color: #fff;
|
||||
background: lighten($bg-color-light-dark, 20%);
|
||||
border-color: lighten($bg-color-light-dark, 20%);
|
||||
|
||||
&:hover {
|
||||
background: $bg-color-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
color: $body-font-color;
|
||||
|
||||
&:target .modal-overlay,
|
||||
&.active .modal-overlay {
|
||||
background: rgba($bg-color-dark, 0.75);
|
||||
}
|
||||
|
||||
.modal-container .modal-header {
|
||||
background: $bg-color-light-dark;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tile {
|
||||
&:hover {
|
||||
background: $bg-color-light-gray;
|
||||
}
|
||||
|
||||
&.selected-element {
|
||||
background: $bg-color-light-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-col {
|
||||
border-left: 2px solid darken($bg-color-light-gray, 15%);
|
||||
}
|
||||
|
||||
.file-uploader {
|
||||
border: 0.05rem solid $border-color-dark;
|
||||
background-color: $bg-color-light;
|
||||
|
||||
.file-uploader-message {
|
||||
border-right: 0.05rem solid $border-color-dark;
|
||||
background-color: $bg-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
#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 {
|
||||
height: $settingbar-width;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-left: 3px solid transparent;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-left-color: $body-font-color-dark;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.settingbar-element-icon {
|
||||
&.badge::after {
|
||||
bottom: -10px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: $success-color;
|
||||
}
|
||||
|
||||
&.badge-update::after {
|
||||
bottom: initial;
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ex-tooltip {
|
||||
.ex-tooltip-content {
|
||||
background: rgba(48, 55, 66, 0.95);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover .ex-tooltip-content {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.workspace {
|
||||
.workspace-explorebar {
|
||||
background: $bg-color-light-gray;
|
||||
box-shadow: 0 0 1px 0 #000;
|
||||
|
||||
.workspace-explorebar-database {
|
||||
.database-name {
|
||||
background: $bg-color-light-gray;
|
||||
}
|
||||
|
||||
.table-size {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-query-results {
|
||||
.table {
|
||||
.th {
|
||||
background: $body-bg;
|
||||
border-color: rgba($bg-color-light-dark, 0.5);
|
||||
}
|
||||
|
||||
.td {
|
||||
border-color: rgba($bg-color-light-dark, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
.td,
|
||||
.th {
|
||||
border-bottom: $border-width solid $border-color;
|
||||
}
|
||||
|
||||
&,
|
||||
&.table-striped {
|
||||
.tbody {
|
||||
.tr {
|
||||
&.selected {
|
||||
background: rgba($bg-color-gray, 0.2) !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover {
|
||||
.tbody {
|
||||
.tr {
|
||||
&:hover {
|
||||
background: $bg-color-light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-striped {
|
||||
.tbody {
|
||||
.tr:nth-of-type(odd) {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user