diff --git a/terminus-core/src/components/startPage.component.scss b/terminus-core/src/components/startPage.component.scss index a25f66a3..02f36dea 100644 --- a/terminus-core/src/components/startPage.component.scss +++ b/terminus-core/src/components/startPage.component.scss @@ -33,6 +33,4 @@ a, button { width: 16px; height: 16px; margin-right: 10px; - fill: white; - fill-opacity: 0.75; } diff --git a/terminus-core/src/index.ts b/terminus-core/src/index.ts index 2fee96c2..699279ab 100644 --- a/terminus-core/src/index.ts +++ b/terminus-core/src/index.ts @@ -36,7 +36,7 @@ import { HotkeyProvider } from './api/hotkeyProvider' import { ConfigProvider } from './api/configProvider' import { Theme } from './api/theme' -import { StandardTheme, StandardCompactTheme } from './theme' +import { StandardTheme, StandardCompactTheme, PaperTheme } from './theme' import { CoreConfigProvider } from './config' import 'perfect-scrollbar/css/perfect-scrollbar.css' @@ -58,6 +58,7 @@ const PROVIDERS = [ { provide: HotkeyProvider, useClass: AppHotkeyProvider, multi: true }, { provide: Theme, useClass: StandardTheme, multi: true }, { provide: Theme, useClass: StandardCompactTheme, multi: true }, + { provide: Theme, useClass: PaperTheme, multi: true }, { provide: ConfigProvider, useClass: CoreConfigProvider, multi: true }, { provide: PERFECT_SCROLLBAR_CONFIG, useValue: { suppressScrollX: true }} ] diff --git a/terminus-core/src/theme.paper.scss b/terminus-core/src/theme.paper.scss new file mode 100644 index 00000000..a1e9d2ea --- /dev/null +++ b/terminus-core/src/theme.paper.scss @@ -0,0 +1,394 @@ +$black: #002b36; +$base02: #073642; +$base01: #586e75; +$base00: #657b83; +$base0: #839496; +$base1: #93a1a1; +$base2: #eee8d5; +$white: #fdf6e3; +$yellow: #b58900; +$orange: #cb4b16; +$red: #dc322f; +$pink: #d33682; +$purple: #6c71c4; +$blue: #268bd2; +$teal: #2aa198; +$green: #859900; + +$tab-border-radius: 5px; +$button-hover-bg: rgba(0, 0, 0, .125); +$button-active-bg: rgba(0, 0, 0, .25); + +$theme-colors: ( + "primary": $orange, + "secondary": $base0 +); + +$content-bg: rgba($white, 0.65); +$content-bg-solid: $white; +$body-bg: $base2; +$body-bg2: $base1; + +$body-color: $black; +$font-family-sans-serif: "Source Sans Pro"; +$font-size-base: 14rem / 16; + +$btn-border-radius: 0; + +$nav-tabs-border-width: 0; +$nav-tabs-border-radius: 0; +$nav-tabs-link-hover-border-color: $body-bg; +$nav-tabs-active-link-hover-color: $white; +$nav-tabs-active-link-hover-bg: $blue; +$nav-tabs-active-link-hover-border-color: darken($blue, 30%); +$nav-pills-border-radius: 0; + +$input-bg: $base2; +$input-disabled-bg: $base1; + +$input-color: $body-color; +$input-color-placeholder: $base1; +$input-border-color: $base1; +//$input-box-shadow: inset 0 1px 1px rgba($black,.075); +$input-border-radius: 0; +$custom-select-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: $body-bg; +$input-group-addon-border-color: $input-border-color; + +$modal-content-bg: $content-bg-solid; +$modal-content-border-color: $body-bg; +$modal-header-border-color: transparent; +$modal-footer-border-color: transparent; + +$popover-bg: $body-bg; + +$dropdown-bg: $body-bg; +$dropdown-link-color: $body-color; +$dropdown-link-hover-color: #333; +$dropdown-link-hover-bg: $body-bg2; +//$dropdown-link-active-color: $component-active-color; +//$dropdown-link-active-bg: $component-active-bg; +$dropdown-link-disabled-color: #333; +$dropdown-header-color: #333; + +$list-group-color: $body-color; +$list-group-bg: rgba($black,.05); +$list-group-border-color: rgba($black,.1); +$list-group-hover-bg: rgba($black,.1); +$list-group-link-active-bg: rgba($black,.2); + +$list-group-action-color: $body-color; +$list-group-action-bg: rgba($black,.05); +$list-group-action-active-bg: $list-group-link-active-bg; + +$list-group-border-radius: 0; + +$pre-bg: $dropdown-bg; +$pre-color: $dropdown-link-color; + +$alert-danger-bg: $body-bg; +$alert-danger-text: $red; +$alert-danger-border: $red; + +$headings-font-weight: lighter; +$headings-color: $base0; + +@import '~bootstrap/scss/bootstrap.scss'; + + +window-controls { + svg { + transition: 0.25s fill; + fill: $base01; + } + + button:hover svg { + fill: $black; + } + + .btn-close:hover { + background: #8a2828; + } +} + +$border-color: $base1; + +body { + background: $body-bg; + + &.vibrant { + background: rgba(255, 255, 255,.4) !important; + } +} + +app-root { + &> .content { + .tab-bar { + height: 40px; + + .btn-tab-bar { + background: transparent; + line-height: 42px; + + svg { + fill: $black; + fill-opacity: 0.75; + } + + &:hover { background: rgba(0, 0, 0, .125) !important; } + &:active { background: rgba(0, 0, 0, .25) !important; } + } + + &>.tabs { + tab-header { + border-left: 1px solid transparent; + border-right: 1px solid transparent; + color: $base01; + transition: 0.125s ease-out width; + + .index { + color: rgba($black, 0.4); + } + + button { + color: $body-color; + border: none; + transition: 0.25s all; + + &:hover { background: $button-hover-bg !important; } + &:active { background: $button-active-bg !important; } + } + + .progressbar { + background: $blue; + } + + &.active { + color: $black; + background: $content-bg; + border-left: 1px solid $border-color; + border-right: 1px solid $border-color; + } + } + } + } + + &.tabs-on-top .tab-bar { + &>.background { + border-bottom: 1px solid $border-color; + } + + tab-header { + border-bottom: 1px solid $border-color; + + &.active { + border-bottom-color: transparent; + } + + &.has-activity:not(.active) { + background: linear-gradient(to bottom, rgba(208, 0, 0, 0) 95%, #36beff 96%); + } + } + } + + &:not(.tabs-on-top) .tab-bar { + &>.background { + border-top: 1px solid $border-color; + } + + tab-header { + border-top: 1px solid $border-color; + + &.active { + margin-top: -1px; + } + + &.has-activity:not(.active) { + background: linear-gradient(to top, rgba(208, 0, 0, 0) 95%, #36beff 96%); + } + } + } + } + + &.platform-win32, &.platform-linux { + border: 1px solid #111; + &>.content .tab-bar .tabs tab-header:first-child { + border-left: none; + } + } +} + +tab-body { + background: $content-bg; +} + +settings-tab > ngb-tabset { + border-right: 1px solid $body-bg; + + & > .nav { + background: rgba(0, 0, 0, 0.25); + + & > .nav-item > .nav-link { + border: none; + padding: 10px 50px 10px 20px; + font-size: 14px; + + &:not(.active) { + color: $body-color; + } + } + } +} + +multi-hotkey-input { + .item { + background: $body-bg2; + border: 1px solid $blue; + border-radius: 3px; + margin-right: 5px; + + .body { + padding: 3px 0 2px; + + .stroke { + padding: 0 6px; + border-right: 1px solid $content-bg; + } + } + + .remove { + padding: 3px 8px 2px; + } + } + + .add { + color: #777; + padding: 4px 10px 0; + } + + .add, .item .body, .item .remove { + &:hover { background: darken($body-bg2, 5%); } + &:active { background: darken($body-bg2, 15%); } + } +} + +hotkey-input-modal { + .input { + background: $input-bg; + padding: 10px; + font-size: 24px; + line-height: 27px; + height: 55px; + + .stroke { + background: $body-bg2; + border: 1px solid $blue; + border-radius: 3px; + margin-right: 10px; + padding: 3px 10px; + } + } + + .timeout { + background: $input-bg; + + div { + background: $blue; + } + } +} + +.form-group label { + margin-bottom: 2px; +} + +.nav-tabs { + .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; +} + +.list-group-item { + transition: 0.25s background; + + &:not(:first-child) { + border-top: none; + } + + i + * { + margin-left: 10px; + } +} + +select.form-control { + -webkit-appearance: none; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 100% 50%; + background-repeat: no-repeat; + padding-right: 30px; +} + +checkbox i.on { + color: $blue; +} + +toggle { + .body { + border-color: $base0 !important; + + .toggle { + background: $base0 !important; + } + } + + &.active .body .toggle { + background: theme-colors(primary) !important; + } +} + +.list-group-item svg { + fill: $black; +} + +.terminus-title { + color: $base01; +} + +.terminus-logo { + filter: saturate(0); +} + +start-page footer { + background: $white !important; +} diff --git a/terminus-core/src/theme.scss b/terminus-core/src/theme.scss index a4907edb..94546f9c 100644 --- a/terminus-core/src/theme.scss +++ b/terminus-core/src/theme.scss @@ -356,3 +356,8 @@ checkbox i.on { toggle.active .body .toggle { background: $blue; } + +.list-group-item svg { + fill: white; + fill-opacity: 0.75; +} diff --git a/terminus-core/src/theme.ts b/terminus-core/src/theme.ts index 8b43fc3e..327051d6 100644 --- a/terminus-core/src/theme.ts +++ b/terminus-core/src/theme.ts @@ -14,3 +14,10 @@ export class StandardCompactTheme extends Theme { css = require('./theme.compact.scss') terminalBackground = '#1D272D' } + +@Injectable() +export class PaperTheme extends Theme { + name = 'Paper' + css = require('./theme.paper.scss') + terminalBackground = '#1D272D' +} diff --git a/terminus-plugin-manager/src/components/pluginsSettingsTab.component.pug b/terminus-plugin-manager/src/components/pluginsSettingsTab.component.pug index 63c83fbe..12ec2aae 100644 --- a/terminus-plugin-manager/src/components/pluginsSettingsTab.component.pug +++ b/terminus-plugin-manager/src/components/pluginsSettingsTab.component.pug @@ -72,7 +72,7 @@ div(*ngIf='npmInstalled') ) - .list-group(*ngIf='availablePlugins$') + .list-group.mb-4(*ngIf='availablePlugins$') ng-container(*ngFor='let plugin of (availablePlugins$|async|orderBy:"name")') .list-group-item.flex-column.align-items-start(*ngIf='!isAlreadyInstalled(plugin)') .d-flex.w-100