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 {
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
@ -21,8 +25,8 @@ a, button {
|
||||
|
||||
& > svg {
|
||||
pointer-events: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -10,11 +10,12 @@
|
||||
cursor: default;
|
||||
animation: 0.5s ease-out fadeIn;
|
||||
transition: 0.25s background;
|
||||
|
||||
--tabs-height: calc(38px * var(--spaciness));
|
||||
--side-tab-width: calc(200px * var(--spaciness));
|
||||
}
|
||||
|
||||
$tabs-height: 38px;
|
||||
$tab-border-radius: 4px;
|
||||
$side-tab-width: 200px;
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
@ -46,19 +47,19 @@ $side-tab-width: 200px;
|
||||
|
||||
.content.tabs-on-side > .tab-bar {
|
||||
height: 100%;
|
||||
width: $side-tab-width;
|
||||
width: var(--side-tab-width);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex-direction: column;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
|
||||
.tabs {
|
||||
width: $side-tab-width;
|
||||
width: var(--side-tab-width);
|
||||
flex: none;
|
||||
flex-direction: column;
|
||||
|
||||
tab-header {
|
||||
flex: 0 0 $tabs-height;
|
||||
flex: 0 0 var(--tabs-height);
|
||||
}
|
||||
}
|
||||
|
||||
@ -69,18 +70,22 @@ $side-tab-width: 200px;
|
||||
&>.inset {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
::ng-deep tab-header {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tab-bar {
|
||||
flex: none;
|
||||
height: $tabs-height;
|
||||
height: var(--tabs-height);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.btn-tab-bar {
|
||||
line-height: $tabs-height + 2px;
|
||||
height: $tabs-height;
|
||||
line-height: calc(var(--tabs-height) + 2px);
|
||||
height: var(--tabs-height);
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
@ -122,8 +127,8 @@ $side-tab-width: 200px;
|
||||
}
|
||||
|
||||
& > .inset {
|
||||
width: 85px;
|
||||
height: $tabs-height;
|
||||
width: calc(70px + 15px * var(--spaciness));
|
||||
height: var(--tabs-height);
|
||||
flex: none;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
@ -170,18 +175,12 @@ hotkey-hint {
|
||||
|
||||
::ng-deep .btn-tab-bar svg,
|
||||
::ng-deep .btn-tab-bar + .dropdown-menu svg {
|
||||
width: 22px;
|
||||
height: 16px;
|
||||
width: calc(22px * var(--spaciness));
|
||||
height: calc(16px * var(--spaciness));
|
||||
fill: white;
|
||||
fill-opacity: 0.75;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
display: flex;
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
::ng-deep .btn-update svg {
|
||||
fill: cyan;
|
||||
}
|
||||
|
@ -35,7 +35,7 @@ $tabs-height: 38px;
|
||||
-webkit-app-region: no-drag;
|
||||
cursor: -webkit-grab;
|
||||
|
||||
width: 22px;
|
||||
width: calc(22px * var(--spaciness));
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
transition: 0.25s all;
|
||||
|
@ -18,6 +18,7 @@ appearance:
|
||||
vibrancy: false
|
||||
vibrancyType: 'blur'
|
||||
lastTabClosesWindow: false
|
||||
spaciness: 1
|
||||
terminal:
|
||||
showBuiltinProfiles: true
|
||||
showRecentProfiles: 3
|
||||
|
@ -34,7 +34,6 @@ export class ThemesService {
|
||||
private applyThemeVariables () {
|
||||
if (!this.findCurrentTheme().followsColorScheme) {
|
||||
document.documentElement.style.cssText = this.rootElementStyleBackup
|
||||
return
|
||||
}
|
||||
|
||||
const theme = this.config.store.terminal.colorScheme
|
||||
@ -64,63 +63,67 @@ export class ThemesService {
|
||||
const accentIndex = 4
|
||||
const vars: Record<string, string> = {}
|
||||
|
||||
vars['--bs-body-bg'] = background.string()
|
||||
vars['--bs-body-color'] = theme.foreground
|
||||
vars['--bs-black'] = theme.colors[0]
|
||||
vars['--bs-red'] = theme.colors[1]
|
||||
vars['--bs-green'] = theme.colors[2]
|
||||
vars['--bs-yellow'] = theme.colors[3]
|
||||
vars['--bs-blue'] = theme.colors[4]
|
||||
vars['--bs-purple'] = theme.colors[5]
|
||||
vars['--bs-cyan'] = theme.colors[6]
|
||||
vars['--bs-gray'] = theme.colors[7]
|
||||
vars['--bs-gray-dark'] = theme.colors[8]
|
||||
// vars['--bs-red'] = theme.colors[9]
|
||||
// vars['--bs-green'] = theme.colors[10]
|
||||
// vars['--bs-yellow'] = theme.colors[11]
|
||||
// vars['--bs-blue'] = theme.colors[12]
|
||||
// vars['--bs-purple'] = theme.colors[13]
|
||||
// vars['--bs-cyan'] = theme.colors[14]
|
||||
if (this.findCurrentTheme().followsColorScheme) {
|
||||
vars['--bs-body-bg'] = background.string()
|
||||
vars['--bs-body-color'] = theme.foreground
|
||||
vars['--bs-black'] = theme.colors[0]
|
||||
vars['--bs-red'] = theme.colors[1]
|
||||
vars['--bs-green'] = theme.colors[2]
|
||||
vars['--bs-yellow'] = theme.colors[3]
|
||||
vars['--bs-blue'] = theme.colors[4]
|
||||
vars['--bs-purple'] = theme.colors[5]
|
||||
vars['--bs-cyan'] = theme.colors[6]
|
||||
vars['--bs-gray'] = theme.colors[7]
|
||||
vars['--bs-gray-dark'] = theme.colors[8]
|
||||
// vars['--bs-red'] = theme.colors[9]
|
||||
// vars['--bs-green'] = theme.colors[10]
|
||||
// vars['--bs-yellow'] = theme.colors[11]
|
||||
// vars['--bs-blue'] = theme.colors[12]
|
||||
// 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'] = more(theme.foreground, 0.25).string()
|
||||
vars['--theme-fg'] = theme.foreground
|
||||
vars['--theme-fg-less'] = less(theme.foreground, 0.25).string()
|
||||
vars['--theme-fg-less-2'] = less(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'] = theme.foreground
|
||||
vars['--theme-fg-less'] = less(theme.foreground, 0.25).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'] = less(theme.background, 0.25).string()
|
||||
vars['--theme-bg'] = theme.background
|
||||
vars['--theme-bg-more'] = backgroundMore
|
||||
vars['--theme-bg-more-2'] = more(backgroundMore, 0.25).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'] = theme.background
|
||||
vars['--theme-bg-more'] = backgroundMore
|
||||
vars['--theme-bg-more-2'] = more(backgroundMore, 0.25).string()
|
||||
|
||||
const themeColors = {
|
||||
primary: theme.colors[accentIndex],
|
||||
secondary: theme.colors[8],
|
||||
tertiary: theme.colors[8],
|
||||
warning: theme.colors[3],
|
||||
danger: theme.colors[1],
|
||||
success: theme.colors[2],
|
||||
info: theme.colors[4],
|
||||
dark: more(theme.background, 0.5).string(),
|
||||
light: more(theme.foreground, 0.5).string(),
|
||||
link: theme.colors[8], // for .btn-link
|
||||
const themeColors = {
|
||||
primary: theme.colors[accentIndex],
|
||||
secondary: theme.colors[8],
|
||||
tertiary: theme.colors[8],
|
||||
warning: theme.colors[3],
|
||||
danger: theme.colors[1],
|
||||
success: theme.colors[2],
|
||||
info: theme.colors[4],
|
||||
dark: more(theme.background, 0.5).string(),
|
||||
light: more(theme.foreground, 0.5).string(),
|
||||
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[`--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")`
|
||||
vars['--spaciness'] = this.config.store.appearance.spaciness
|
||||
|
||||
for (const [key, value] of Object.entries(vars)) {
|
||||
document.documentElement.style.setProperty(key, value)
|
||||
|
@ -556,7 +556,7 @@ ngx-colors-panel .opened {
|
||||
}
|
||||
|
||||
start-page {
|
||||
background: var(--theme-bg);
|
||||
background: var(--theme-bg-more-2);
|
||||
}
|
||||
|
||||
split-tab-spanner {
|
||||
|
@ -9,6 +9,18 @@ h3.mb-3(translate) Window
|
||||
)
|
||||
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')
|
||||
.header
|
||||
|
@ -10,7 +10,7 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 15px;
|
||||
margin: calc(max(0px, 30px * var(--spaciness) - 15px));
|
||||
transition: opacity ease-out 0.25s;
|
||||
opacity: 0;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user