From 8e8441e4f5110c66533426af40b4a97e1d0d7c30 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Fri, 27 Aug 2021 13:14:15 +0100
Subject: [PATCH] layout header and bookmark area background border radius

---
 src/component/bookmark/index.css | 37 ++++++++++++++++++++++++++++++++
 src/component/header/index.css   | 37 ++++++++++++++++++++++++++++++++
 src/component/layout/index.css   | 15 ++++++++++---
 3 files changed, 86 insertions(+), 3 deletions(-)

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));
 }