diff --git a/src/component/bookmark/index.css b/src/component/bookmark/index.css index 23bf5084..39dffb29 100644 --- a/src/component/bookmark/index.css +++ b/src/component/bookmark/index.css @@ -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 { diff --git a/src/component/header/index.css b/src/component/header/index.css index 286266da..2adc3e52 100644 --- a/src/component/header/index.css +++ b/src/component/header/index.css @@ -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 { diff --git a/src/component/layout/index.css b/src/component/layout/index.css index 49a9587a..e0076358 100644 --- a/src/component/layout/index.css +++ b/src/component/layout/index.css @@ -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)); }