mirror of
https://github.com/Eugeny/tabby.git
synced 2024-10-26 12:43:50 +03:00
variable theme spaciness
This commit is contained in:
parent
ccaf98aaa0
commit
95f7ad21bb
@ -1,3 +1,7 @@
|
|||||||
|
html {
|
||||||
|
--spaciness: 1;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -21,8 +25,8 @@ a, button {
|
|||||||
|
|
||||||
& > svg {
|
& > svg {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
width: 16px;
|
// width: 16px;
|
||||||
height: 16px;
|
// height: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,11 +10,12 @@
|
|||||||
cursor: default;
|
cursor: default;
|
||||||
animation: 0.5s ease-out fadeIn;
|
animation: 0.5s ease-out fadeIn;
|
||||||
transition: 0.25s background;
|
transition: 0.25s background;
|
||||||
|
|
||||||
|
--tabs-height: calc(38px * var(--spaciness));
|
||||||
|
--side-tab-width: calc(200px * var(--spaciness));
|
||||||
}
|
}
|
||||||
|
|
||||||
$tabs-height: 38px;
|
|
||||||
$tab-border-radius: 4px;
|
$tab-border-radius: 4px;
|
||||||
$side-tab-width: 200px;
|
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -46,19 +47,19 @@ $side-tab-width: 200px;
|
|||||||
|
|
||||||
.content.tabs-on-side > .tab-bar {
|
.content.tabs-on-side > .tab-bar {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: $side-tab-width;
|
width: var(--side-tab-width);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: rgba(0, 0, 0, 0.25);
|
background: rgba(0, 0, 0, 0.25);
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
width: $side-tab-width;
|
width: var(--side-tab-width);
|
||||||
flex: none;
|
flex: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
tab-header {
|
tab-header {
|
||||||
flex: 0 0 $tabs-height;
|
flex: 0 0 var(--tabs-height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -69,18 +70,22 @@ $side-tab-width: 200px;
|
|||||||
&>.inset {
|
&>.inset {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::ng-deep tab-header {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.tab-bar {
|
.tab-bar {
|
||||||
flex: none;
|
flex: none;
|
||||||
height: $tabs-height;
|
height: var(--tabs-height);
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.btn-tab-bar {
|
.btn-tab-bar {
|
||||||
line-height: $tabs-height + 2px;
|
line-height: calc(var(--tabs-height) + 2px);
|
||||||
height: $tabs-height;
|
height: var(--tabs-height);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -122,8 +127,8 @@ $side-tab-width: 200px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
& > .inset {
|
& > .inset {
|
||||||
width: 85px;
|
width: calc(70px + 15px * var(--spaciness));
|
||||||
height: $tabs-height;
|
height: var(--tabs-height);
|
||||||
flex: none;
|
flex: none;
|
||||||
-webkit-app-region: drag;
|
-webkit-app-region: drag;
|
||||||
}
|
}
|
||||||
@ -170,18 +175,12 @@ hotkey-hint {
|
|||||||
|
|
||||||
::ng-deep .btn-tab-bar svg,
|
::ng-deep .btn-tab-bar svg,
|
||||||
::ng-deep .btn-tab-bar + .dropdown-menu svg {
|
::ng-deep .btn-tab-bar + .dropdown-menu svg {
|
||||||
width: 22px;
|
width: calc(22px * var(--spaciness));
|
||||||
height: 16px;
|
height: calc(16px * var(--spaciness));
|
||||||
fill: white;
|
fill: white;
|
||||||
fill-opacity: 0.75;
|
fill-opacity: 0.75;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-wrapper {
|
|
||||||
display: flex;
|
|
||||||
width: 16px;
|
|
||||||
height: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .btn-update svg {
|
::ng-deep .btn-update svg {
|
||||||
fill: cyan;
|
fill: cyan;
|
||||||
}
|
}
|
||||||
|
@ -35,7 +35,7 @@ $tabs-height: 38px;
|
|||||||
-webkit-app-region: no-drag;
|
-webkit-app-region: no-drag;
|
||||||
cursor: -webkit-grab;
|
cursor: -webkit-grab;
|
||||||
|
|
||||||
width: 22px;
|
width: calc(22px * var(--spaciness));
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: 0.25s all;
|
transition: 0.25s all;
|
||||||
|
@ -18,6 +18,7 @@ appearance:
|
|||||||
vibrancy: false
|
vibrancy: false
|
||||||
vibrancyType: 'blur'
|
vibrancyType: 'blur'
|
||||||
lastTabClosesWindow: false
|
lastTabClosesWindow: false
|
||||||
|
spaciness: 1
|
||||||
terminal:
|
terminal:
|
||||||
showBuiltinProfiles: true
|
showBuiltinProfiles: true
|
||||||
showRecentProfiles: 3
|
showRecentProfiles: 3
|
||||||
|
@ -34,7 +34,6 @@ export class ThemesService {
|
|||||||
private applyThemeVariables () {
|
private applyThemeVariables () {
|
||||||
if (!this.findCurrentTheme().followsColorScheme) {
|
if (!this.findCurrentTheme().followsColorScheme) {
|
||||||
document.documentElement.style.cssText = this.rootElementStyleBackup
|
document.documentElement.style.cssText = this.rootElementStyleBackup
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const theme = this.config.store.terminal.colorScheme
|
const theme = this.config.store.terminal.colorScheme
|
||||||
@ -64,63 +63,67 @@ export class ThemesService {
|
|||||||
const accentIndex = 4
|
const accentIndex = 4
|
||||||
const vars: Record<string, string> = {}
|
const vars: Record<string, string> = {}
|
||||||
|
|
||||||
vars['--bs-body-bg'] = background.string()
|
if (this.findCurrentTheme().followsColorScheme) {
|
||||||
vars['--bs-body-color'] = theme.foreground
|
vars['--bs-body-bg'] = background.string()
|
||||||
vars['--bs-black'] = theme.colors[0]
|
vars['--bs-body-color'] = theme.foreground
|
||||||
vars['--bs-red'] = theme.colors[1]
|
vars['--bs-black'] = theme.colors[0]
|
||||||
vars['--bs-green'] = theme.colors[2]
|
vars['--bs-red'] = theme.colors[1]
|
||||||
vars['--bs-yellow'] = theme.colors[3]
|
vars['--bs-green'] = theme.colors[2]
|
||||||
vars['--bs-blue'] = theme.colors[4]
|
vars['--bs-yellow'] = theme.colors[3]
|
||||||
vars['--bs-purple'] = theme.colors[5]
|
vars['--bs-blue'] = theme.colors[4]
|
||||||
vars['--bs-cyan'] = theme.colors[6]
|
vars['--bs-purple'] = theme.colors[5]
|
||||||
vars['--bs-gray'] = theme.colors[7]
|
vars['--bs-cyan'] = theme.colors[6]
|
||||||
vars['--bs-gray-dark'] = theme.colors[8]
|
vars['--bs-gray'] = theme.colors[7]
|
||||||
// vars['--bs-red'] = theme.colors[9]
|
vars['--bs-gray-dark'] = theme.colors[8]
|
||||||
// vars['--bs-green'] = theme.colors[10]
|
// vars['--bs-red'] = theme.colors[9]
|
||||||
// vars['--bs-yellow'] = theme.colors[11]
|
// vars['--bs-green'] = theme.colors[10]
|
||||||
// vars['--bs-blue'] = theme.colors[12]
|
// vars['--bs-yellow'] = theme.colors[11]
|
||||||
// vars['--bs-purple'] = theme.colors[13]
|
// vars['--bs-blue'] = theme.colors[12]
|
||||||
// vars['--bs-cyan'] = theme.colors[14]
|
// vars['--bs-purple'] = theme.colors[13]
|
||||||
|
// vars['--bs-cyan'] = theme.colors[14]
|
||||||
|
|
||||||
vars['--theme-fg-more-2'] = more(theme.foreground, 0.5).string()
|
vars['--theme-fg-more-2'] = more(theme.foreground, 0.5).string()
|
||||||
vars['--theme-fg-more'] = more(theme.foreground, 0.25).string()
|
vars['--theme-fg-more'] = more(theme.foreground, 0.25).string()
|
||||||
vars['--theme-fg'] = theme.foreground
|
vars['--theme-fg'] = theme.foreground
|
||||||
vars['--theme-fg-less'] = less(theme.foreground, 0.25).string()
|
vars['--theme-fg-less'] = less(theme.foreground, 0.25).string()
|
||||||
vars['--theme-fg-less-2'] = less(theme.foreground, 0.5).string()
|
vars['--theme-fg-less-2'] = less(theme.foreground, 0.5).string()
|
||||||
|
|
||||||
vars['--theme-bg-less-2'] = less(theme.background, 0.5).string()
|
vars['--theme-bg-less-2'] = less(theme.background, 0.5).string()
|
||||||
vars['--theme-bg-less'] = less(theme.background, 0.25).string()
|
vars['--theme-bg-less'] = less(theme.background, 0.25).string()
|
||||||
vars['--theme-bg'] = theme.background
|
vars['--theme-bg'] = theme.background
|
||||||
vars['--theme-bg-more'] = backgroundMore
|
vars['--theme-bg-more'] = backgroundMore
|
||||||
vars['--theme-bg-more-2'] = more(backgroundMore, 0.25).string()
|
vars['--theme-bg-more-2'] = more(backgroundMore, 0.25).string()
|
||||||
|
|
||||||
const themeColors = {
|
const themeColors = {
|
||||||
primary: theme.colors[accentIndex],
|
primary: theme.colors[accentIndex],
|
||||||
secondary: theme.colors[8],
|
secondary: theme.colors[8],
|
||||||
tertiary: theme.colors[8],
|
tertiary: theme.colors[8],
|
||||||
warning: theme.colors[3],
|
warning: theme.colors[3],
|
||||||
danger: theme.colors[1],
|
danger: theme.colors[1],
|
||||||
success: theme.colors[2],
|
success: theme.colors[2],
|
||||||
info: theme.colors[4],
|
info: theme.colors[4],
|
||||||
dark: more(theme.background, 0.5).string(),
|
dark: more(theme.background, 0.5).string(),
|
||||||
light: more(theme.foreground, 0.5).string(),
|
light: more(theme.foreground, 0.5).string(),
|
||||||
link: theme.colors[8], // for .btn-link
|
link: theme.colors[8], // for .btn-link
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const [key, color] of Object.entries(themeColors)) {
|
||||||
|
vars[`--bs-${key}-bg`] = more(color, 0.5).string()
|
||||||
|
vars[`--bs-${key}-color`] = less(color, 0.5).string()
|
||||||
|
vars[`--bs-${key}`] = color
|
||||||
|
vars[`--bs-${key}-rgb`] = Color(color).rgb().array().join(', ')
|
||||||
|
vars[`--theme-${key}-more-2`] = more(color, 1).string()
|
||||||
|
vars[`--theme-${key}-more`] = more(color, 0.5).string()
|
||||||
|
vars[`--theme-${key}`] = color
|
||||||
|
vars[`--theme-${key}-less`] = less(color, 0.25).string()
|
||||||
|
vars[`--theme-${key}-less-2`] = less(color, 0.75).string()
|
||||||
|
}
|
||||||
|
|
||||||
|
const switchBackground = less(theme.colors[accentIndex], 0.25).string()
|
||||||
|
vars['--bs-form-switch-bg'] = `url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27${switchBackground}%27/%3e%3c/svg%3e")`
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const [key, color] of Object.entries(themeColors)) {
|
vars['--spaciness'] = this.config.store.appearance.spaciness
|
||||||
vars[`--bs-${key}-bg`] = more(color, 0.5).string()
|
|
||||||
vars[`--bs-${key}-color`] = less(color, 0.5).string()
|
|
||||||
vars[`--bs-${key}`] = color
|
|
||||||
vars[`--bs-${key}-rgb`] = Color(color).rgb().array().join(', ')
|
|
||||||
vars[`--theme-${key}-more-2`] = more(color, 1).string()
|
|
||||||
vars[`--theme-${key}-more`] = more(color, 0.5).string()
|
|
||||||
vars[`--theme-${key}`] = color
|
|
||||||
vars[`--theme-${key}-less`] = less(color, 0.25).string()
|
|
||||||
vars[`--theme-${key}-less-2`] = less(color, 0.75).string()
|
|
||||||
}
|
|
||||||
|
|
||||||
const switchBackground = less(theme.colors[accentIndex], 0.25).string()
|
|
||||||
vars['--bs-form-switch-bg'] = `url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27${switchBackground}%27/%3e%3c/svg%3e")`
|
|
||||||
|
|
||||||
for (const [key, value] of Object.entries(vars)) {
|
for (const [key, value] of Object.entries(vars)) {
|
||||||
document.documentElement.style.setProperty(key, value)
|
document.documentElement.style.setProperty(key, value)
|
||||||
|
@ -556,7 +556,7 @@ ngx-colors-panel .opened {
|
|||||||
}
|
}
|
||||||
|
|
||||||
start-page {
|
start-page {
|
||||||
background: var(--theme-bg);
|
background: var(--theme-bg-more-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
split-tab-spanner {
|
split-tab-spanner {
|
||||||
|
@ -9,6 +9,18 @@ h3.mb-3(translate) Window
|
|||||||
)
|
)
|
||||||
option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
|
option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
|
||||||
|
|
||||||
|
.form-line
|
||||||
|
.header
|
||||||
|
.title(translate) Spaciness
|
||||||
|
.description(translate) Controls the amount of space between elements
|
||||||
|
input(
|
||||||
|
type='range',
|
||||||
|
[(ngModel)]='config.store.appearance.spaciness',
|
||||||
|
(mouseup)='saveConfiguration()',
|
||||||
|
min='0.6',
|
||||||
|
max='1.4',
|
||||||
|
step='0.1'
|
||||||
|
)
|
||||||
|
|
||||||
.form-line(*ngIf='hostApp.platform === Platform.Web')
|
.form-line(*ngIf='hostApp.platform === Platform.Web')
|
||||||
.header
|
.header
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 15px;
|
margin: calc(max(0px, 30px * var(--spaciness) - 15px));
|
||||||
transition: opacity ease-out 0.25s;
|
transition: opacity ease-out 0.25s;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user