From 71ac54911ab1b2907322f165ab261ede6082bc73 Mon Sep 17 00:00:00 2001 From: Jiiks Date: Wed, 24 Jan 2018 08:42:10 +0200 Subject: [PATCH] Styling --- .../modules/ui/components/bd/PluginCard.vue | 5 +++- .../components/bd/templates/PluginCard.html | 8 +++--- .../modules/ui/components/generic/Button.vue | 4 +-- client/src/styles/partials/bdsettings.scss | 25 ------------------- client/src/styles/partials/buttons.scss | 25 ++++++++++++++++++- client/src/styles/partials/generic.scss | 5 +--- client/src/styles/partials/plugincard.scss | 18 +++++++++---- 7 files changed, 48 insertions(+), 42 deletions(-) diff --git a/client/src/modules/ui/components/bd/PluginCard.vue b/client/src/modules/ui/components/bd/PluginCard.vue index e16d7d92..391b75ff 100644 --- a/client/src/modules/ui/components/bd/PluginCard.vue +++ b/client/src/modules/ui/components/bd/PluginCard.vue @@ -4,7 +4,10 @@ /*Imports*/ import { Button, ButtonGroup } from '../generic'; import MiSettings from 'vue-material-design-icons/settings.vue'; - const components = { MiSettings, Button, ButtonGroup }; + import MiReload from 'vue-material-design-icons/refresh.vue'; + import MiEdit from 'vue-material-design-icons/pencil.vue'; + import MiDelete from 'vue-material-design-icons/delete.vue'; + const components = { MiSettings, Button, ButtonGroup, MiReload, MiEdit, MiDelete }; export default { props: ['plugin', 'togglePlugin'], diff --git a/client/src/modules/ui/components/bd/templates/PluginCard.html b/client/src/modules/ui/components/bd/templates/PluginCard.html index d502bc1e..be77732e 100644 --- a/client/src/modules/ui/components/bd/templates/PluginCard.html +++ b/client/src/modules/ui/components/bd/templates/PluginCard.html @@ -17,13 +17,13 @@ - diff --git a/client/src/modules/ui/components/generic/Button.vue b/client/src/modules/ui/components/generic/Button.vue index 7e3763f6..154ecbe7 100644 --- a/client/src/modules/ui/components/generic/Button.vue +++ b/client/src/modules/ui/components/generic/Button.vue @@ -1,11 +1,11 @@ \ No newline at end of file diff --git a/client/src/styles/partials/bdsettings.scss b/client/src/styles/partials/bdsettings.scss index 085f00a5..55d46a07 100644 --- a/client/src/styles/partials/bdsettings.scss +++ b/client/src/styles/partials/bdsettings.scss @@ -1,30 +1,5 @@ @import './plugincard.scss'; -.bd-pluginsView { - .bd-button { - text-align: center; - background: transparent; - h3 { - -webkit-user-select: none; - user-select: none; - display: block; - font-size: 1.17em; - margin-top: 1em; - margin-bottom: 1em; - margin-left: 0; - margin-right: 0; - font-weight: bold; - } - - &:hover, - &.bd-active { - color: #fff; - background: transparent; - border-bottom: 2px solid #3e82e5; - } - } -} - .bd-settings-button { position: absolute; z-index: 1; diff --git a/client/src/styles/partials/buttons.scss b/client/src/styles/partials/buttons.scss index 3e7ece20..2099515b 100644 --- a/client/src/styles/partials/buttons.scss +++ b/client/src/styles/partials/buttons.scss @@ -4,6 +4,7 @@ justify-content: center; cursor: pointer; color: #FFF; + background: #44474c; text-align: center; user-select: none; font-weight: 500; @@ -18,6 +19,18 @@ cursor: not-allowed; } + &.bd-err { + background: $colerr; + } + + &.bd-warn { + background: $colwarn; + } + + &.bd-ok { + background: $colok; + } + .bd-spinner-7 { opacity: .3; } @@ -28,6 +41,7 @@ .bd-button, .bd-material-button { + &:first-of-type { border-radius: 6px 0 0 6px; } @@ -49,9 +63,18 @@ .bd-tabheader { .bd-button { background: transparent; - border-bottom: 2px solid #2b2d31; + border-bottom: 2px solid rgba(114, 118, 126, 0.3); h3 { + -webkit-user-select: none; + user-select: none; + display: block; + font-size: 1.17em; + margin-top: 1em; + margin-bottom: 1em; + margin-left: 0; + margin-right: 0; + font-weight: bold; flex-grow: 1; } diff --git a/client/src/styles/partials/generic.scss b/client/src/styles/partials/generic.scss index 81168aa8..33e2e2b0 100644 --- a/client/src/styles/partials/generic.scss +++ b/client/src/styles/partials/generic.scss @@ -219,7 +219,4 @@ .bd-switch:before { background: #888888; } -} - - - +} \ No newline at end of file diff --git a/client/src/styles/partials/plugincard.scss b/client/src/styles/partials/plugincard.scss index 8386cf32..83a7f452 100644 --- a/client/src/styles/partials/plugincard.scss +++ b/client/src/styles/partials/plugincard.scss @@ -2,12 +2,11 @@ display: flex; flex-direction: column; flex-grow: 1; - background: #2f3136; - border: 1px solid #202225; + background: transparent; + border-bottom: 1px solid rgba(114, 118, 126, 0.3); padding: 10px 5px; min-height: 150px; color: #b9bbbe; - border-radius: 8px; margin-top: 10px; .bd-plugin-header { @@ -30,7 +29,6 @@ color: #8a8c90; font-size: 12px; font-weight: 600; - background: rgba(0,0,0,.05); padding: 5px; border-radius: 8px; margin-top: 5px; @@ -38,7 +36,6 @@ .bd-plugin-footer { display: flex; - justify-content: flex-end; flex-grow: 1; align-items: flex-end; @@ -46,6 +43,17 @@ color: rgba(255, 255, 255, 0.15); font-size: 10px; font-weight: 700; + flex-grow: 1; + } + + .bd-controls { + .bd-button-group { + .bd-button { + fill: #FFF; + width: 30px; + height: 30px; + } + } } } }