49 lines
1.2 KiB
CSS
49 lines
1.2 KiB
CSS
@define-mixin decorator-bb {
|
|
padding: var(--bb-spacing, 0);
|
|
border: var(--bb-border, var(--size-1) solid var(--color-primary));
|
|
border-top-left-radius: var(--bb-radius-tl, var(--size-1));
|
|
border-top-right-radius: var(--bb-radius-tr, 0);
|
|
border-bottom-right-radius: var(--bb-radius-br, 0);
|
|
border-bottom-left-radius: var(--bb-radius-bl, 0);
|
|
|
|
color: var(--bb-fg, var(--color-text-primary));
|
|
|
|
background-color: var(--bb-bg, var(--color-primary));
|
|
|
|
corner-shape: var(--bb-shapes, bevel);
|
|
}
|
|
|
|
@define-mixin decorator-torn {
|
|
position: relative;
|
|
transform: rotate(1.5deg);
|
|
|
|
display: block;
|
|
|
|
padding: 0.4em 0.8em;
|
|
border-radius: 0.3em 0.6em 0.4em 0.5em / 0.5em 0.4em 0.6em 0.3em;
|
|
|
|
color: var(--torn-fg);
|
|
|
|
background: var(--torn-bg);
|
|
clip-path: polygon(
|
|
8px 0%,
|
|
12px 8%,
|
|
6px 18%,
|
|
14px 32%,
|
|
4px 45%,
|
|
12px 58%,
|
|
7px 72%,
|
|
15px 85%,
|
|
8px 100%,
|
|
calc(100% - 8px) 100%,
|
|
calc(100% - 15px) 85%,
|
|
calc(100% - 7px) 72%,
|
|
calc(100% - 12px) 58%,
|
|
calc(100% - 4px) 45%,
|
|
calc(100% - 14px) 32%,
|
|
calc(100% - 6px) 18%,
|
|
calc(100% - 12px) 8%,
|
|
calc(100% - 8px) 0%
|
|
);
|
|
box-shadow: 2px 2px 4px rgb(0 0 0 / 30%);
|
|
} |