diff --git a/tabby-core/src/index.ts b/tabby-core/src/index.ts index 25955e67..8d9f48df 100644 --- a/tabby-core/src/index.ts +++ b/tabby-core/src/index.ts @@ -46,7 +46,7 @@ import { HotkeysService } from './services/hotkeys.service' import { CustomMissingTranslationHandler, LocaleService } from './services/locale.service' import { CommandService } from './services/commands.service' -import { StandardTheme, StandardCompactTheme, PaperTheme, NewTheme } from './theme' +import { NewTheme } from './theme' import { CoreConfigProvider } from './config' import { AppHotkeyProvider } from './hotkeys' import { TaskCompletionContextMenu, CommonOptionsContextMenu, TabManagementContextMenu, ProfilesContextMenu } from './tabContextMenu' @@ -60,9 +60,6 @@ export function TranslateMessageFormatCompilerFactory (): TranslateMessageFormat 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: Theme, useClass: NewTheme, multi: true }, { provide: ConfigProvider, useClass: CoreConfigProvider, multi: true }, { provide: TabContextMenuItemProvider, useClass: CommonOptionsContextMenu, multi: true }, diff --git a/tabby-core/src/theme.compact.scss b/tabby-core/src/theme.compact.scss deleted file mode 100644 index c8f1b21a..00000000 --- a/tabby-core/src/theme.compact.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import './theme.scss'; - -app-root { - .tabs-on-side .tab-bar { - height: 100% !important; - } - - .tab-bar { - height: 27px !important; - - .btn-tab-bar { - line-height: 29px !important; - height: 27px !important; - align-items: center; - svg { - height: 14px; - } - } - - .inset { - width: 70 !important; - } - } - - terminaltab .content { - margin: 5px !important; - } - - ssh-tab .content { - margin: 5px !important; - } - - serial-tab .content { - margin: 5px !important; - } -} diff --git a/tabby-core/src/theme.paper.scss b/tabby-core/src/theme.paper.scss deleted file mode 100644 index ac5ecc4e..00000000 --- a/tabby-core/src/theme.paper.scss +++ /dev/null @@ -1,407 +0,0 @@ -$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); - - -$primary: #fd7e14; -$secondary: #495057; - -$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; - -$headings-font-weight: lighter; -$headings-color: $base0; - -@import '~bootstrap/scss/bootstrap.scss'; - - -window-controls { - svg { - transition: 0.25s fill; - fill: $base01; - } - - button:hover { - background: rgba($black, 0.125); - - svg { - fill: $black; - } - } - - .btn-close:hover { - background: #8a2828; - } -} - -$border-color: $base1; - -app-root { - background: $body-bg; - - &.vibrant { - background: rgba(255, 255, 255,.4) !important; - } - - &> .content { - .tab-bar { - .btn-tab-bar { - background: transparent; - line-height: 42px; - align-items: center; - svg, path { - 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; - } - - .activity-indicator { - background:rgba(0, 0, 0, 0.2); - } - - &.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; - } - } - } - - &: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; - } - } - } - } - - &.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 > .content { - & > .nav { - background: rgba(0, 0, 0, 0.25); - border-right: 1px solid $body-bg; - - & > .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; - } - } - - .item:has(.duplicate) { - background-color: map-get($theme-colors, 'danger'); - border: 1px solid map-get($theme-colors, 'danger'); - } - - .add { - color: #777; - padding: 4px 10px 0; - } - - .add, .item .body, .item .remove { - &:hover { background: darken($body-bg2, 5%); } - &:active { background: darken($body-bg2, 15%); } - } - - .add:has(.duplicate), .item:has(.duplicate) .body, .item:has(.duplicate) .remove { - &:hover { background: darken(map-get($theme-colors, 'danger'), 5%); } - &:active { background: darken(map-get($theme-colors, 'danger'), 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; - } - } -} - -.mb-3 label { - margin-bottom: 2px; -} - -.nav-tabs { - .nav-link { - transition: 0.25s all; - border-bottom-color: $nav-tabs-border-color; - } -} - -.btn-check:checked + label { - 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: map-get($theme-colors, primary) !important; - } -} - -.list-group-item svg { - fill: $black; -} - -.tabby-title { - color: $base01; -} - -.tabby-logo { - filter: saturate(0); -} - -start-page footer { - background: $white !important; -} - -terminal-toolbar { - background: #ffffff4a !important; - border-bottom: 1px solid #00000026 !important; -} - -.bg-dark{ - background-color: $base2 !important; -} - -split-tab-spanner { - background: rgba(0, 0, 0, .2); - - &:hover, &.active { - background: rgba(255, 255, 255, .125); - } -} diff --git a/tabby-core/src/theme.scss b/tabby-core/src/theme.scss deleted file mode 100644 index 315909f4..00000000 --- a/tabby-core/src/theme.scss +++ /dev/null @@ -1,428 +0,0 @@ -@import "./theme.vars"; - -// --------- - - -$button-hover-bg: rgba(0, 0, 0, .25); -$button-active-bg: rgba(0, 0, 0, .5); - -@import '~bootstrap/scss/bootstrap.scss'; -@import "./theme.vendor.scss"; - -window-controls { - svg { - transition: 0.25s fill; - fill: #aaa; - } - - button:hover svg { - fill: white; - } - - .btn-close:hover { - background: #8a2828; - } -} - -$border-color: #111; - -app-root { - background: $body-bg; - - &.vibrant { - background: rgba(0,0,0,.65); - } - - &> .content { - .tab-bar { - .btn-tab-bar { - background: transparent; - &:hover { background: rgba(0, 0, 0, .25) !important; } - &:active, &[aria-expanded-true] { background: rgba(0, 0, 0, .5) !important; } - &:focus { - box-shadow: none; - } - - &::after { - display: none; - } - } - - &>.tabs { - tab-header { - border-left: 1px solid transparent; - border-right: 1px solid transparent; - - transition: 0.125s ease-out width; - - .index { - color: rgba(255, 255, 255, 0.4); - } - - .icon { - opacity: .75; - } - - button { - color: $body-color; - border: none; - transition: 0.25s all; - - right: 5px; - - &:hover { background: $button-active-bg !important; } - &:active { background: $button-active-bg !important; } - } - - .progressbar { - background: $green; - } - - .activity-indicator { - background:rgba(255, 255, 255, 0.2); - } - - &.active { - color: white; - 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; - } - } - } - - &: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; - } - } - } - } - - &.platform-win32, &.platform-linux { - border: 1px solid #111; - - &>.content { - margin: -1px; // expand the content into the border - - .tab-bar .tabs tab-header:first-child { - border-left: none; - } - } - } -} - -tab-body { - background: $content-bg; - - terminal-toolbar .btn, .toolbar-pin-button { - font-weight: bold; - } -} - -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; - } - } - - .item:has(.duplicate) { - background-color: map-get($theme-colors, 'danger'); - border: 1px solid map-get($theme-colors, 'danger'); - } - - .add { - color: #777; - padding: 4px 10px 0; - } - - .add, .item .body, .item .remove { - &:hover { background: darken($body-bg2, 5%); } - &:active { background: darken($body-bg2, 15%); } - } - - .add:has(.duplicate), .item:has(.duplicate) .body, .item:has(.duplicate) .remove { - &:hover { background: darken(map-get($theme-colors, 'danger'), 5%); } - &:active { background: darken(map-get($theme-colors, 'danger'), 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; - } - } -} - -.mb-3 label { - margin-bottom: 2px; -} - -.btn-check:checked + label { - 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.0625s background ease; - - i + * { - margin-left: 10px; - } -} - -.list-group.list-group-flush .list-group-item { - background: transparent; - border: none; - - &:not(:last-child) { - border-bottom: none; - } - - &.list-group-item-action { - &:hover, &.active { - background: $list-group-hover-bg; - } - } -} - -.list-group-light { - .list-group-item { - border: none !important; - outline: none !important; - background: transparent; - border-radius: $border-radius; - margin: 0 !important; - - &.list-group-item-action { - &:hover, &.active { - background: $component-active-bg; - color: $component-active-color; - } - } - } -} - -checkbox i.on { - color: $blue; -} - -.modal .modal-footer { - background: rgba(0, 0, 0, .25); - - .btn { - font-weight: bold; - padding: 0.375rem 1.5rem; - } -} - -.list-group-item svg { - fill: white; - fill-opacity: 0.75; -} - -*::-webkit-scrollbar { - background: rgba(0, 0, 0, .125); - width: 10px; - margin: 5px; -} - -*::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, .25); -} - -*::-webkit-scrollbar-corner, -*::-webkit-resizer { - opacity: 0; -} - -search-panel { - background: #131d27 !important; - - input { - border-radius: 0 !important; - } -} - - -.btn { - cursor: pointer; - justify-content: flex-start; - overflow: hidden; - - &.disabled, - &:disabled { - cursor: not-allowed; - } -} - -.btn-warning:not(:disabled):not(.disabled) { - &.active, &:active { - color: $gray-900; - } -} - -.btn-secondary:not(:disabled):not(.disabled) { - &.active, &:active { - background: #191e23; - align-items: center; - } -} - -.btn-link { - text-decoration: none; - - &:hover, &[aria-expanded=true], &:active, &.active { - color: $link-hover-color; - border-radius: $btn-border-radius; - } - - &[aria-expanded=true], &:active, &.active { - background: rgba(255, 255, 255, 0.1); - } -} - -.btn-group .btn.active { - border-color: transparent !important; -} - -.nav-tabs { - margin-bottom: 10px; - - &.nav-justified .nav-link { - margin-right: 5px; - } - - .nav-link { - border: none; - border-bottom: $nav-tabs-border-width solid transparent; - text-transform: uppercase; - font-weight: bold; - padding: 5px 0; - margin-right: 20px; - - uib-tab-heading > i { - font-size: 18px; - } - - // @include hover-focus { - // color: $nav-tabs-link-active-color; - // } - - &.disabled { - color: $nav-link-disabled-color; - border-color: transparent; - } - } - - .nav-item:last-child .nav-link { - margin-right: 0; - } - - .nav-link.active, - .nav-item.show .nav-link { - color: $nav-tabs-link-active-color; - border-color: $nav-tabs-link-active-border-color; - } -} - -hr { - border-color: $list-group-border-color; -} - -.dropdown-menu { - box-shadow: $dropdown-box-shadow; -} - -ngx-colors-panel .opened { - background: $body-bg !important; - - button { - color: $body-color !important; - } - - .button svg { - fill: white; - } -} - -split-tab-spanner { - background: rgba(0, 0, 0, .2); - - &:hover, &.active { - background: rgba(255, 255, 255, .125); - } -} diff --git a/tabby-core/src/theme.ts b/tabby-core/src/theme.ts index b4cf1895..cb4acb53 100644 --- a/tabby-core/src/theme.ts +++ b/tabby-core/src/theme.ts @@ -2,32 +2,6 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker' import { Injectable } from '@angular/core' import { Theme } from './api' -/** @hidden */ -@Injectable() -export class StandardTheme extends Theme { - name = _('Standard (legacy)') - css = require('./theme.scss') - terminalBackground = '#222a33' -} - -/** @hidden */ -@Injectable() -export class StandardCompactTheme extends Theme { - name = _('Compact (legacy)') - css = require('./theme.compact.scss') - terminalBackground = '#222a33' - macOSWindowButtonsInsetX = 8 - macOSWindowButtonsInsetY = 6 -} - -/** @hidden */ -@Injectable() -export class PaperTheme extends Theme { - name = _('Paper (legacy)') - css = require('./theme.paper.scss') - terminalBackground = '#f7f1e0' -} - /** @hidden */ @Injectable({ providedIn: 'root' }) export class NewTheme extends Theme { diff --git a/tabby-settings/src/components/windowSettingsTab.component.pug b/tabby-settings/src/components/windowSettingsTab.component.pug index 6ab08ca7..f9d9a881 100644 --- a/tabby-settings/src/components/windowSettingsTab.component.pug +++ b/tabby-settings/src/components/windowSettingsTab.component.pug @@ -1,6 +1,6 @@ h3.mb-3(translate) Window -.form-line +.form-line(*ngIf='themes.length > 1') .header .title(translate) Theme select.form-control(