Rooba
/
nightTab
mirror of https://github.com/zombieFox/nightTab.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

layout header and bookmark area background border radius

This commit is contained in:
zombieFox 2021-08-27 13:14:15 +01:00
parent 1aee2c4daf
commit 8e8441e4f5
3 changed files with 86 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/component/bookmark/index.css
View File

@ -42,6 +42,43 @@
.is-theme-bookmark-color-by-custom .bookmark-area {
background-color: hsla(var(--theme-bookmark-color-hsl-h), calc(var(--theme-bookmark-color-hsl-s) * 1%), calc(var(--theme-bookmark-color-hsl-l) * 1%), calc(var(--theme-bookmark-color-opacity) / 100));
border-radius: calc(var(--theme-radius) * 0.01em);
}
.is-layout-order-header-bookmark.is-layout-direction-vertical.is-theme-layout-divider-size.is-theme-bookmark-color-by-custom .bookmark-area,
.is-layout-order-header-bookmark.is-layout-direction-vertical.is-theme-layout-color-by-custom .bookmark-area,
.is-layout-order-header-bookmark.is-layout-direction-vertical.is-theme-bookmark-color-by-custom.is-theme-header-color-by-custom .bookmark-area {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: calc(var(--theme-radius) * 0.01em);
border-bottom-right-radius: calc(var(--theme-radius) * 0.01em);
}
.is-layout-order-bookmark-header.is-layout-direction-vertical.is-theme-layout-divider-size.is-theme-bookmark-color-by-custom .bookmark-area,
.is-layout-order-bookmark-header.is-layout-direction-vertical.is-theme-layout-color-by-custom .bookmark-area,
.is-layout-order-bookmark-header.is-layout-direction-vertical.is-theme-bookmark-color-by-custom.is-theme-header-color-by-custom .bookmark-area {
border-top-left-radius: calc(var(--theme-radius) * 0.01em);
border-top-right-radius: calc(var(--theme-radius) * 0.01em);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.is-layout-order-header-bookmark.is-layout-direction-horizontal.is-theme-layout-divider-size.is-theme-bookmark-color-by-custom .bookmark-area,
.is-layout-order-header-bookmark.is-layout-direction-horizontal.is-theme-layout-color-by-custom .bookmark-area,
.is-layout-order-header-bookmark.is-layout-direction-horizontal.is-theme-bookmark-color-by-custom.is-theme-header-color-by-custom .bookmark-area {
border-top-left-radius: 0;
border-top-right-radius: calc(var(--theme-radius) * 0.01em);
border-bottom-left-radius: 0;
border-bottom-right-radius: calc(var(--theme-radius) * 0.01em);
}
.is-layout-order-bookmark-header.is-layout-direction-horizontal.is-theme-layout-divider-size.is-theme-bookmark-color-by-custom .bookmark-area,
.is-layout-order-bookmark-header.is-layout-direction-horizontal.is-theme-layout-color-by-custom .bookmark-area,
.is-layout-order-bookmark-header.is-layout-direction-horizontal.is-theme-bookmark-color-by-custom.is-theme-header-color-by-custom .bookmark-area {
border-top-left-radius: calc(var(--theme-radius) * 0.01em);
border-top-right-radius: 0;
border-bottom-left-radius: calc(var(--theme-radius) * 0.01em);
border-bottom-right-radius: 0;
}
.bookmark-group {

37
src/component/header/index.css
View File

@ -13,6 +13,43 @@
.is-theme-header-color-by-custom .header-area {
background-color: hsla(var(--theme-header-color-hsl-h), calc(var(--theme-header-color-hsl-s) * 1%), calc(var(--theme-header-color-hsl-l) * 1%), calc(var(--theme-header-color-opacity) / 100));
border-radius: calc(var(--theme-radius) * 0.01em);
}
.is-layout-order-header-bookmark.is-layout-direction-vertical.is-theme-layout-divider-size.is-theme-header-color-by-custom .header-area,
.is-layout-order-header-bookmark.is-layout-direction-vertical.is-theme-layout-color-by-custom .header-area,
.is-layout-order-header-bookmark.is-layout-direction-vertical.is-theme-header-color-by-custom.is-theme-bookmark-color-by-custom .header-area {
border-top-left-radius: calc(var(--theme-radius) * 0.01em);
border-top-right-radius: calc(var(--theme-radius) * 0.01em);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.is-layout-order-bookmark-header.is-layout-direction-vertical.is-theme-layout-divider-size.is-theme-header-color-by-custom .header-area,
.is-layout-order-bookmark-header.is-layout-direction-vertical.is-theme-layout-color-by-custom .header-area,
.is-layout-order-bookmark-header.is-layout-direction-vertical.is-theme-header-color-by-custom.is-theme-bookmark-color-by-custom .header-area {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: calc(var(--theme-radius) * 0.01em);
border-bottom-right-radius: calc(var(--theme-radius) * 0.01em);
}
.is-layout-order-header-bookmark.is-layout-direction-horizontal.is-theme-layout-divider-size.is-theme-header-color-by-custom .header-area,
.is-layout-order-header-bookmark.is-layout-direction-horizontal.is-theme-layout-color-by-custom .header-area,
.is-layout-order-header-bookmark.is-layout-direction-horizontal.is-theme-header-color-by-custom.is-theme-bookmark-color-by-custom .header-area {
border-top-left-radius: calc(var(--theme-radius) * 0.01em);
border-top-right-radius: 0;
border-bottom-left-radius: calc(var(--theme-radius) * 0.01em);
border-bottom-right-radius: 0;
}
.is-layout-order-bookmark-header.is-layout-direction-horizontal.is-theme-layout-divider-size.is-theme-header-color-by-custom .header-area,
.is-layout-order-bookmark-header.is-layout-direction-horizontal.is-theme-layout-color-by-custom .header-area,
.is-layout-order-bookmark-header.is-layout-direction-horizontal.is-theme-header-color-by-custom.is-theme-bookmark-color-by-custom .header-area {
border-top-left-radius: 0;
border-top-right-radius: calc(var(--theme-radius) * 0.01em);
border-bottom-left-radius: 0;
border-bottom-right-radius: calc(var(--theme-radius) * 0.01em);
}
.header {

15
src/component/layout/index.css
View File

@ -42,14 +42,20 @@
.is-theme-layout-color-by-custom .layout {
background-color: hsla(var(--theme-layout-color-hsl-h), calc(var(--theme-layout-color-hsl-s) * 1%), calc(var(--theme-layout-color-hsl-l) * 1%), calc(var(--theme-layout-color-opacity) / 100));
border-radius: calc(var(--theme-radius) * 0.01em);
}
.is-layout-order-header-bookmark.is-layout-direction-horizontal .layout {
.is-theme-layout-color-by-custom.is-theme-header-color-by-custom .layout,
.is-theme-layout-color-by-custom.is-theme-bookmark-color-by-custom .layout {
overflow: hidden;
}
.is-layout-direction-horizontal.is-layout-order-header-bookmark .layout {
flex-direction: row;
align-items: center;
}
.is-layout-order-bookmark-header.is-layout-direction-horizontal .layout {
.is-layout-direction-horizontal.is-layout-order-bookmark-header .layout {
flex-direction: row-reverse;
align-items: center;
}
@ -80,13 +86,16 @@
.layout-divider {
background-color: rgb(var(--theme-accent));
border-radius: calc(var(--theme-radius) * 0.01em);
flex-shrink: 0;
flex-grow: 0;
align-self: stretch;
justify-self: stretch;
}
.is-theme-layout-divider-size:not(.is-theme-layout-color-by-custom):not(.is-theme-header-color-by-custom):not(.is-theme-bookmark-color-by-custom) .layout-divider {
border-radius: calc(var(--theme-radius) * 0.01em);
}
.is-theme-background-type-accent .layout-divider {
background-color: hsl(var(--theme-accent-text));
}