diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css index 04474b956..f62f6d2bc 100644 --- a/src/css/epicker-ui.css +++ b/src/css/epicker-ui.css @@ -125,23 +125,30 @@ html#ublock0-epicker, width: 40%; } .resultsetModifier > span { - align-items: center; - display: inline-flex; + align-items: flex-end; + border-bottom: 2px solid white; + display: flex; height: 100%; pointer-events: none; width: 100%; } .resultsetModifier > span > span:nth-of-type(1) { background-color: var(--checkbox-checked-ink); - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; + border-inline-end: 1px solid #aaa; display: inline-block; flex-shrink: 0; height: 6px; } .resultsetModifier > span > span:nth-of-type(2) { background-color: var(--checkbox-checked-ink); - border-radius: 7px; + clip-path: polygon( + calc(50% - 2px) 0%, + 0% calc(100% - 6px), + 0% 100%, + 100% 100%, + 100% calc(100% - 6px), + calc(50% + 2px) 0% + ); display: inline-block; flex-shrink: 0; height: 16px; @@ -149,11 +156,10 @@ html#ublock0-epicker, } .resultsetModifier > span > span:nth-of-type(3) { background-color: var(--checkbox-ink); - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; + border-inline-start: 1px solid #aaa; display: inline-block; flex-grow: 1; - height: 4px; + height: 6px; } .resultsetModifier input { border: 0;