feat(UI): light theme

This commit is contained in:
Fabio Di Stasio 2021-04-03 11:21:58 +02:00
parent 0783f8b57e
commit 280697698e
29 changed files with 799 additions and 265 deletions

View File

@ -8,7 +8,8 @@
"stylelint-scss"
],
"rules": {
"at-rule-no-unknown": null
"at-rule-no-unknown": null,
"no-descending-specificity": null
},
"syntax": "scss"
}

View File

@ -1,5 +1,5 @@
<template>
<div id="wrapper">
<div id="wrapper" :class="`theme-${applicationTheme}`">
<TheTitleBar />
<div id="window-content">
<TheSettingBar />
@ -49,6 +49,7 @@ export default {
isEditModal: 'application/isEditModal',
isSettingModal: 'application/isSettingModal',
connections: 'connections/getConnections',
applicationTheme: 'settings/getApplicationTheme',
isUnsavedDiscardModal: 'workspaces/isUnsavedDiscardModal'
})
},

View File

@ -71,7 +71,6 @@ export default {
<style lang="scss">
.context {
display: flex;
color: $body-font-color;
font-size: 16px;
z-index: 400;
justify-content: center;
@ -87,7 +86,6 @@ export default {
.context-container {
min-width: 100px;
z-index: 10;
box-shadow: 0 0 2px 0 #000;
padding: 0;
background: #1d1d1d;
border-radius: 0.1rem;
@ -111,14 +109,10 @@ export default {
position: absolute;
left: 100%;
top: 0;
background: #1d1d1d;
box-shadow: 0 0 2px 0 #000;
min-width: 100px;
}
&:hover {
background: $primary-color;
.context-submenu {
display: block;
visibility: visible;

View File

@ -102,8 +102,6 @@ export default {
<style lang="scss" scoped>
.editor-wrapper {
border-bottom: 1px solid #444;
.editor {
width: 100%;
}
@ -113,17 +111,4 @@ export default {
display: inline-block;
width: 17px;
}
.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;
}
</style>

View File

@ -63,13 +63,11 @@ export default {
<style lang="scss" scoped>
.file-uploader {
border: 0.05rem solid $bg-color-light;
border-radius: 0.1rem;
height: 1.8rem;
line-height: 1.2rem;
display: flex;
cursor: pointer;
background-color: $bg-color-gray;
transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
position: relative;
flex: 1 1 auto;
@ -80,8 +78,6 @@ export default {
.file-uploader-message {
display: flex;
border-right: 0.05rem solid $bg-color-light;
background-color: $bg-color;
}
.file-uploader-input {
@ -105,7 +101,6 @@ export default {
:disabled {
.file-uploader {
cursor: not-allowed;
background-color: #151515;
opacity: 0.5;
}
}

View File

@ -140,20 +140,29 @@
<div class="column col-12 h6 text-uppercase mb-2">
{{ $t('message.applicationTheme') }}
</div>
<div class="column col-6 c-hand theme-block" :class="{'selected': applicationTheme === 'dark'}">
<div
class="column col-6 c-hand theme-block"
:class="{'selected': applicationTheme === 'dark'}"
@click="changeApplicationTheme('dark')"
>
<img :src="require('@/images/dark.png').default" class="img-responsive img-fit-cover s-rounded">
<div class="theme-name">
<div class="theme-name text-light">
<i class="mdi mdi-moon-waning-crescent mdi-48px" />
<div class="h6 mt-4">
{{ $t('word.dark') }}
</div>
</div>
</div>
<div class="column col-6 theme-block disabled" :class="{'selected': applicationTheme === 'light'}">
<div class="theme-name">
<div
class="column col-6 c-hand theme-block"
:class="{'selected': applicationTheme === 'light'}"
@click="changeApplicationTheme('light')"
>
<img :src="require('@/images/light.png').default" class="img-responsive img-fit-cover s-rounded">
<div class="theme-name text-dark">
<i class="mdi mdi-white-balance-sunny mdi-48px" />
<div class="h6 mt-4">
{{ $t('word.light') }} (Coming)
{{ $t('word.light') }}
</div>
</div>
</div>
@ -352,6 +361,7 @@ ORDER BY
changeLocale: 'settings/changeLocale',
changeAutoComplete: 'settings/changeAutoComplete',
changeLineWrap: 'settings/changeLineWrap',
changeApplicationTheme: 'settings/changeApplicationTheme',
changeEditorTheme: 'settings/changeEditorTheme',
updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
}),
@ -415,7 +425,6 @@ ORDER BY
top: 0;
height: 100%;
width: 100%;
text-shadow: 0 0 8px #000;
}
}
}

View File

@ -92,9 +92,3 @@ export default {
}
};
</script>
<style lang="scss">
.empty {
color: $body-font-color;
}
</style>

View File

@ -312,19 +312,6 @@ export default {
width: 17px;
}
.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;
}
.ace_gutter-cell.ace_breakpoint {
&::before {
content: '\F0403';

View File

@ -64,13 +64,11 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
background: $primary-color;
padding: 0 0.2rem;
position: fixed;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 1px 0 #000;
.footer-elements {
list-style: none;
@ -88,10 +86,6 @@ export default {
&.footer-link {
cursor: pointer;
transition: background 0.2s;
&:hover {
background: rgba($color: #fff, $alpha: 0.1);
}
}
}
}

View File

@ -36,6 +36,10 @@
<div class="settingbar-bottom-elements">
<ul class="settingbar-elements">
<li class="settingbar-element btn btn-link ex-tooltip">
<i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
<span class="ex-tooltip-content">{{ $t('word.scratchpad') }}</span>
</li>
<li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')">
<i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" :class="{' badge badge-update': hasUpdates}" />
<span class="ex-tooltip-content">{{ $t('word.settings') }}</span>
@ -117,9 +121,7 @@ export default {
flex-direction: column;
justify-content: space-between;
align-items: center;
background: $bg-color-light;
padding: 0;
box-shadow: 0 0 1px 0 #000;
z-index: 9;
.settingbar-top-elements {
@ -134,7 +136,6 @@ export default {
.settingbar-bottom-elements {
padding-top: 0.5rem;
background: $bg-color-light;
z-index: 1;
}
@ -162,7 +163,6 @@ export default {
}
&.selected {
border-left-color: $body-font-color;
opacity: 1;
}
@ -171,12 +171,10 @@ export default {
bottom: -10px;
right: 0;
position: absolute;
background: $success-color;
}
&.badge-update::after {
bottom: initial;
background: $primary-color;
}
}
}

View File

@ -102,12 +102,10 @@ export default {
display: flex;
position: relative;
justify-content: space-between;
background: $bg-color-light;
align-items: center;
height: $titlebar-height;
-webkit-app-region: drag;
user-select: none;
box-shadow: 0 0 1px 0 #000;
z-index: 9999;
.titlebar-resizer {
@ -149,11 +147,6 @@ export default {
&:hover {
opacity: 1;
background: rgba($color: #fff, $alpha: 0.2);
}
&.close-button:hover {
background: red;
}
}
}

View File

@ -304,7 +304,6 @@ export default {
height: calc(100vh - #{$excluding-size});
.tab-block {
background: $bg-color-light;
margin-top: 0;
flex-direction: row;
align-items: flex-start;
@ -324,7 +323,6 @@ export default {
> a {
padding: 0.2rem 0.8rem;
color: $body-font-color;
cursor: pointer;
display: flex;
align-items: center;
@ -355,7 +353,6 @@ export default {
&.tools-dropdown {
.tab-link:focus {
color: $primary-color;
opacity: 1;
outline: 0;
box-shadow: none;
@ -374,11 +371,6 @@ export default {
white-space: nowrap;
border: 0;
&:hover {
color: $primary-color;
background: $bg-color-gray;
}
.tool-icon {
line-height: 1;
display: inline-block;
@ -414,11 +406,9 @@ export default {
.th {
position: sticky;
top: 0;
background: $bg-color;
border: 1px solid;
border-left: none;
border-bottom-width: 2px;
border-color: $bg-color-light;
padding: 0;
font-weight: 700;
font-size: 0.7rem;
@ -433,7 +423,6 @@ export default {
.td {
border-right: 1px solid;
border-bottom: 1px solid;
border-color: $bg-color-light;
padding: 0 0.4rem;
text-overflow: ellipsis;
max-width: 200px;
@ -443,8 +432,6 @@ export default {
position: relative;
&:focus {
box-shadow: inset 0 0 0 1px $body-font-color;
background: rgba($color: #000, $alpha: 0.3);
outline: none;
}
}

View File

@ -1,6 +1,6 @@
<template>
<div class="columns">
<div class="column col-12 empty text-light">
<div class="column col-12 empty">
<div class="empty-icon">
<i class="mdi mdi-48px mdi-power-plug-off" />
</div>

View File

@ -460,8 +460,6 @@ export default {
justify-content: flex-start;
align-items: center;
text-align: left;
background: $bg-color-gray;
box-shadow: 0 0 1px 0 #000;
z-index: 8;
flex: initial;
position: relative;

View File

@ -171,7 +171,8 @@ export default {
...mapGetters({
getLoadedSchemas: 'workspaces/getLoadedSchemas',
getWorkspace: 'workspaces/getWorkspace',
getSearchTerm: 'workspaces/getSearchTerm'
getSearchTerm: 'workspaces/getSearchTerm',
applicationTheme: 'settings/getApplicationTheme'
}),
searchTerm () {
return this.getSearchTerm(this.connection.uid);
@ -239,7 +240,10 @@ export default {
},
piePercentage (val) {
const perc = val / this.maxSize * 100;
if (this.applicationTheme === 'dark')
return { background: `conic-gradient(lime ${perc}%, white 0)` };
else
return { background: `conic-gradient(teal ${perc}%, silver 0)` };
},
setBreadcrumbs (payload) {
if (this.breadcrumbs.schema === payload.schema && this.breadcrumbs.table === payload.table) return;
@ -262,7 +266,6 @@ export default {
.database-name {
position: sticky;
top: 0;
background: $bg-color-gray;
z-index: 2;
}
@ -308,26 +311,15 @@ export default {
.database-name,
.misc-name {
&:hover {
color: $body-font-color;
background: $bg-color-light;
border-radius: 2px;
}
}
a.table-name {
&:hover {
color: inherit;
background: inherit;
}
}
.menu-item {
line-height: 1.2;
position: relative;
&:hover {
color: $body-font-color;
background: rgba($color: #fff, $alpha: 0.05);
border-radius: 2px;
}
}

View File

@ -2,6 +2,7 @@
<ConfirmModal
:confirm-text="$t('word.confirm')"
size="medium"
class="options-modal"
@confirm="confirmForeignsChange"
@hide="$emit('hide')"
>
@ -36,7 +37,7 @@
v-for="foreign in foreignProxy"
:key="foreign._id"
class="tile tile-centered c-hand mb-1 p-1"
:class="{'selected-foreign': selectedForeignID === foreign._id}"
:class="{'selected-element': selectedForeignID === foreign._id}"
@click="selectForeign($event, foreign._id)"
>
<div class="tile-icon">
@ -371,23 +372,16 @@ export default {
}
&:hover {
background: $bg-color-light;
.tile-action {
opacity: 1;
}
}
&.selected-foreign {
background: $bg-color-light;
&.selected-element {
opacity: 1;
}
}
.editor-col {
border-left: 2px solid $bg-color-light;
}
.fields-list {
max-height: 80px;
overflow: auto;

View File

@ -2,6 +2,7 @@
<ConfirmModal
:confirm-text="$t('word.confirm')"
size="medium"
class="options-modal"
@confirm="confirmParametersChange"
@hide="$emit('hide')"
>
@ -36,7 +37,7 @@
v-for="param in parametersProxy"
:key="param._id"
class="tile tile-centered c-hand mb-1 p-1"
:class="{'selected-param': selectedParam === param._id}"
:class="{'selected-element': selectedParam === param._id}"
@click="selectParameter($event, param._id)"
>
<div class="tile-icon">
@ -249,23 +250,16 @@ export default {
}
&:hover {
background: $bg-color-light;
.tile-action {
opacity: 1;
}
}
&.selected-param {
background: $bg-color-light;
&.selected-element {
opacity: 1;
}
}
.editor-col {
border-left: 2px solid $bg-color-light;
}
.fields-list {
max-height: 300px;
overflow: auto;

View File

@ -2,6 +2,7 @@
<ConfirmModal
:confirm-text="$t('word.confirm')"
size="medium"
class="options-modal"
@confirm="confirmIndexesChange"
@hide="$emit('hide')"
>
@ -36,7 +37,7 @@
v-for="index in indexesProxy"
:key="index._id"
class="tile tile-centered c-hand mb-1 p-1"
:class="{'selected-index': selectedIndexID === index._id}"
:class="{'selected-element': selectedIndexID === index._id}"
@click="selectIndex($event, index._id)"
>
<div class="tile-icon">
@ -256,23 +257,16 @@ export default {
}
&:hover {
background: $bg-color-light;
.tile-action {
opacity: 1;
}
}
&.selected-index {
background: $bg-color-light;
&.selected-element {
opacity: 1;
}
}
.editor-col {
border-left: 2px solid $bg-color-light;
}
.fields-list {
max-height: 300px;
overflow: auto;

View File

@ -2,6 +2,7 @@
<ConfirmModal
:confirm-text="$t('word.confirm')"
size="medium"
class="options-modal"
@confirm="confirmParametersChange"
@hide="$emit('hide')"
>
@ -36,7 +37,7 @@
v-for="param in parametersProxy"
:key="param._id"
class="tile tile-centered c-hand mb-1 p-1"
:class="{'selected-param': selectedParam === param._id}"
:class="{'selected-element': selectedParam === param._id}"
@click="selectParameter($event, param._id)"
>
<div class="tile-icon">
@ -280,23 +281,16 @@ export default {
}
&:hover {
background: $bg-color-light;
.tile-action {
opacity: 1;
}
}
&.selected-param {
background: $bg-color-light;
&.selected-element {
opacity: 1;
}
}
.editor-col {
border-left: 2px solid $bg-color-light;
}
.fields-list {
max-height: 300px;
overflow: auto;

View File

@ -232,7 +232,6 @@ export default {
.btn {
display: flex;
align-self: center;
color: $body-font-color;
margin-right: 0.4rem;
}
}

View File

@ -289,10 +289,6 @@ export default {
.export-dropdown {
.menu {
min-width: 100%;
.menu-item a:hover {
background: $bg-color-gray;
}
}
}
</style>

View File

@ -101,7 +101,8 @@ module.exports = {
tools: 'Tools',
variables: 'Variables',
processes: 'Processes',
database: 'Database'
database: 'Database',
scratchpad: 'Scratchpad'
},
message: {
appWelcome: 'Welcome to Antares SQL Client!',

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View File

@ -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;
}
}
}
}

View File

@ -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 */

View File

@ -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;
}

View 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;
}

View 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);
}
}
}
}
}
}

View File

@ -52,8 +52,13 @@ export default {
state.explorebar_size = size;
persistentStore.set('explorebar_size', state.explorebar_size);
},
SET_APPLICATION_THEME (state, theme) {
state.application_theme = theme;
persistentStore.set('application_theme', state.application_theme);
},
SET_EDITOR_THEME (state, theme) {
state.editor_theme = theme;
persistentStore.set('editor_theme', state.editor_theme);
}
},
actions: {
@ -75,6 +80,9 @@ export default {
changeLineWrap ({ commit }, val) {
commit('SET_LINE_WRAP', val);
},
changeApplicationTheme ({ commit }, theme) {
commit('SET_APPLICATION_THEME', theme);
},
changeEditorTheme ({ commit }, theme) {
commit('SET_EDITOR_THEME', theme);
}