1
1
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00

feat(UI): connection name on left bar, closes #382 #414

This commit is contained in:
2022-08-11 11:14:43 +02:00
parent 77ab8d8a03
commit 48877534d1
4 changed files with 148 additions and 163 deletions

View File

@ -24,7 +24,7 @@ $unknown-color: gray;
/* Sizes */
$border-radius: 0.3rem;
$titlebar-height: 1.5rem;
$settingbar-width: 3rem;
$settingbar-width: 3.5rem;
$explorebar-width: 14rem;
$footer-height: 1.5rem;

View File

@ -1,3 +1,5 @@
/* stylelint-disable selector-class-pattern */
/* stylelint-disable function-no-unknown */
.theme-dark {
color: $body-font-color-dark;
background: $body-bg-dark;
@ -7,10 +9,10 @@
}
::-webkit-scrollbar-thumb {
background: rgba($color: #fff, $alpha: 0.5);
background: rgba($color: #fff, $alpha: 50%);
&:hover {
background: rgba($color: #fff, $alpha: 1);
background: rgba($color: #fff, $alpha: 100%);
}
}
@ -25,7 +27,7 @@
background-color: $bg-color-gray;
}
// Override Spectre.css
/* Override Spectre.css */
.menu {
background: $bg-color-light-dark;
@ -79,7 +81,7 @@
.modal {
.modal-overlay,
&.active .modal-overlay {
background: rgba(255, 255, 255, 0.15);
background: rgb(255 255 255 / 15%);
}
.modal-container,
@ -100,7 +102,7 @@
.form-select,
.form-input,
.form-select:not([multiple]):not([size]),
.form-select:not([multiple], [size]),
.form-checkbox .form-icon,
.form-radio .form-icon {
border-color: $bg-color-light-dark;
@ -108,6 +110,10 @@
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;
@ -117,7 +123,7 @@
background: $bg-color-gray;
}
.form-select:not([multiple]):not([size]):focus {
.form-select:not([multiple], [size]):focus {
border-color: $primary-color;
}
@ -161,7 +167,7 @@
color: rgba($body-font-color-dark, 0.7);
}
// Antares
/* Antares */
.workspace {
.workspace-explorebar {
background: $bg-color-gray;
@ -191,7 +197,7 @@
&:hover,
&.selected {
color: $body-font-color-dark;
background: rgba($color: #fff, $alpha: 0.05);
background: rgba($color: #fff, $alpha: 5%);
}
}
}
@ -238,12 +244,12 @@
&:focus,
&.selected {
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
background-color: rgba($color: #000, $alpha: 0.3);
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: 0.3);
background-color: rgba($color: #000, $alpha: 30%);
}
}
}
@ -264,7 +270,7 @@
.bg-checkered {
background-image:
linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
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;
@ -385,7 +391,7 @@
.titlebar-element {
&:hover {
opacity: 1;
background: rgba($color: #fff, $alpha: 0.1);
background: rgba($color: #fff, $alpha: 10%);
}
&.close-button:hover {
@ -430,14 +436,7 @@
.settingbar-element {
.settingbar-element-icon {
&.badge::after {
bottom: -10px;
right: 0;
position: absolute;
}
&.badge-update::after {
bottom: initial;
background: $primary-color;
}
}
@ -447,7 +446,7 @@
.ex-tooltip {
.ex-tooltip-content {
background: rgba(48, 55, 66, 0.95);
background: rgb(48 55 66 / 95%);
color: #fff;
}
}
@ -460,7 +459,7 @@
.footer-element {
&.footer-link {
&:hover {
background: rgba($color: #fff, $alpha: 0.1);
background: rgba($color: #fff, $alpha: 10%);
}
}
}

View File

@ -1,13 +1,14 @@
/* stylelint-disable function-no-unknown */
.theme-light {
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: rgba($color: $bg-color-light-dark, $alpha: 0.5);
background: rgba($color: $bg-color-light-dark, $alpha: 50%);
&:hover {
background: rgba($color: $bg-color-light-dark, $alpha: 1);
background: rgba($color: $bg-color-light-dark, $alpha: 100%);
}
}
@ -38,7 +39,7 @@
.menu-item a {
&:hover {
color: $body-font-color;
background: rgba($color: #000, $alpha: 0.1);
background: rgba($color: #000, $alpha: 10%);
}
}
}
@ -148,7 +149,7 @@
.titlebar-element {
&:hover {
opacity: 1;
background: rgba($color: rgb(172, 172, 172), $alpha: 0.3);
background: rgba($color: rgb(172 172 172), $alpha: 30%);
}
&.close-button:hover {
@ -193,14 +194,7 @@
.settingbar-element {
.settingbar-element-icon {
&.badge::after {
bottom: -10px;
right: 0;
position: absolute;
}
&.badge-update::after {
bottom: initial;
background: $primary-color;
}
}
@ -210,7 +204,7 @@
.ex-tooltip {
.ex-tooltip-content {
background: rgba(48, 55, 66, 0.95);
background: rgb(48 55 66 / 95%);
color: #fff;
}
}
@ -228,7 +222,7 @@
.menu-item {
&:hover,
&.selected {
background: rgba($color: #000, $alpha: 0.05);
background: rgba($color: #000, $alpha: 5%);
}
}
@ -365,7 +359,7 @@
.footer-element {
&.footer-link {
&:hover {
background: rgba($color: #fff, $alpha: 0.1);
background: rgba($color: #fff, $alpha: 10%);
}
}
}