tabby/terminus-core/src/theme.scss
Eugene Pankov 8be70110fe .
2017-04-28 17:20:21 +02:00

296 lines
6.7 KiB
SCSS

$tab-border-radius: 5px;
$button-hover-bg: rgba(0, 0, 0, .25);
$button-active-bg: rgba(0, 0, 0, .5);
$white: #fff !default;
$black: #000 !default;
$red: #d9534f !default;
$orange: #f0ad4e !default;
$yellow: #ffd500 !default;
$green: #5cb85c !default;
$blue: #0275d8 !default;
$teal: #5bc0de !default;
$pink: #ff5b77 !default;
$purple: #613d7c !default;
$body-bg: #1D272D;
$body-bg2: #131d27;
$body-bg3: #20333e;
$body-color: #aaa;
$font-family-sans-serif: "Source Sans Pro";
$font-size-base: 14rem / 16;
$btn-secondary-color: #ccc;
$btn-secondary-bg: #222;
$btn-secondary-border: #444;
//$btn-warning-bg: rgba($orange, .5);
$nav-tabs-border-color: $body-bg2;
$nav-tabs-border-width: 1px;
$nav-tabs-border-radius: 0;
$nav-tabs-link-hover-border-color: $body-bg2;
$nav-tabs-active-link-hover-color: $white;
$nav-tabs-active-link-hover-bg: $blue;
$nav-tabs-active-link-hover-border-color: darken($blue, 30%);
$input-bg: #111;
$input-bg-disabled: #333;
$input-color: $body-color;
$input-color-placeholder: #333;
$input-border-color: #344;
//$input-box-shadow: inset 0 1px 1px rgba($black,.075);
$input-border-radius: 0;
$input-bg-focus: $input-bg;
//$input-border-focus: lighten($brand-primary, 25%);
//$input-box-shadow-focus: $input-box-shadow, rgba($input-border-focus, .6);
$input-color-focus: $input-color;
$input-group-addon-bg: $input-bg;
$input-group-addon-border-color: $input-border-color;
$modal-content-bg: $body-bg;
$modal-content-border-color: $body-bg2;
$modal-header-border-color: transparent;
$modal-footer-border-color: transparent;
$popover-bg: $body-bg2;
$dropdown-bg: $body-bg2;
$dropdown-link-color: $body-color;
$dropdown-link-hover-color: #333;
$dropdown-link-hover-bg: $body-bg3;
//$dropdown-link-active-color: $component-active-color;
//$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: #333;
$dropdown-header-color: #333;
@import '~bootstrap/scss/bootstrap.scss';
title-bar {
background: $body-bg2;
button {
&:hover { background: $button-hover-bg !important; }
&:active { background: $button-active-bg !important; }
}
}
app-root {
&> .content {
background: $body-bg2;
.tab-bar {
&>button {
&:not(:hover):not(:active) {
background: $body-bg2;
}
}
.drag-space {
background: $body-bg2;
}
&>.tabs {
&:empty {
background: $body-bg2;
}
tab-header {
background: $body-bg2;
.index {
color: #555;
}
button {
color: $body-color;
border: none;
transition: 0.25s all;
&:hover { background: $button-hover-bg !important; }
&:active { background: $button-active-bg !important; }
}
&.active {
background: $body-bg;
}
}
}
}
&.tabs-on-top .tab-bar {
tab-header {
border-top: 1px solid transparent;
&.active {
border-top: 1px solid $teal;
}
&.has-activity:not(.active) {
border-top: 1px solid $green;
}
}
}
&:not(.tabs-on-top) .tab-bar {
margin-bottom: 3px;
tab-header {
border-bottom: 1px solid transparent;
&.active {
border-bottom: 1px solid $teal;
}
&.has-activity:not(.active) {
border-bottom: 1px solid $green;
}
}
}
}
}
tab-body {
background: $body-bg;
}
settings-tab > ngb-tabset {
border-right: 1px solid $body-bg2;
& > .nav {
background: $body-bg3;
& > .nav-item > .nav-link {
border-left: none;
border-right: none;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
padding: 10px 50px 10px 20px;
font-size: 14px;
&:not(.active) {
color: $body-color;
&:hover {
color: $white;
}
}
&.active {
border-top-color: $nav-tabs-active-link-hover-border-color;
border-bottom-color: $nav-tabs-active-link-hover-border-color;
}
}
}
}
multi-hotkey-input {
.item {
background: $body-bg3;
border: 1px solid $blue;
border-radius: 3px;
margin-right: 5px;
.body {
padding: 3px 0 2px;
.stroke {
padding: 0 6px;
border-right: 1px solid $body-bg;
}
}
.remove {
padding: 3px 8px 2px;
}
}
.add {
color: #777;
padding: 4px 10px 0;
}
.add, .item .body, .item .remove {
&:hover { background: darken($body-bg3, 5%); }
&:active { background: darken($body-bg3, 15%); }
}
}
hotkey-input-modal {
.input {
background: $input-bg;
padding: 10px;
font-size: 24px;
line-height: 27px;
height: 55px;
.stroke {
background: $body-bg3;
border: 1px solid $blue;
border-radius: 3px;
margin-right: 10px;
padding: 3px 10px;
}
}
.timeout {
background: $input-bg;
div {
background: $blue;
}
}
}
start-page {
.terminus-title {
color: $blue;
}
}
.form-group label {
margin-bottom: 2px;
}
.nav-tabs {
background: $btn-secondary-bg;
.nav-link {
transition: 0.25s all;
border-bottom-color: $nav-tabs-border-color;
}
}
ngb-tabset .tab-content {
padding-top: 20px;
}
[ngbradiogroup] > label.active {
background: $blue;
}
.btn {
i + * {
margin-left: 5px;
}
&.btn-lg i + * {
margin-left: 10px;
}
}
.input-group-addon + .form-control {
border-left: none;
}
.input-group > select.form-control {
flex-direction: row;
}