This commit is contained in:
darwinx64 2025-04-19 23:45:40 -05:00 committed by darwinx64
parent 8ed804a5e6
commit ca17a013d0
No known key found for this signature in database
35 changed files with 1821 additions and 1424 deletions

View file

@ -3,6 +3,8 @@ const { title, showClose, maxWidth, hideByDefault, customClass, offset } =
Astro.props;
const randomID = customClass || Math.random().toString().replace(".", "");
import XmarkIcon from "@assets/svg/xmark.svg";
---
<style define:vars={{ maxWidth, offset }}>
@ -10,25 +12,30 @@ const randomID = customClass || Math.random().toString().replace(".", "");
width: var(--maxWidth);
top: var(--offset);
left: var(--offset);
border-radius: 17px;
border: 1px solid var(--text);
background: var(--surface1);
clip-path: var(--clip-window-outer);
position: absolute;
}
.window-inner {
background-color: #20202c;
clip-path: var(--clip-window-inner);
}
.title-bar {
.title-bar-text {
margin-top: 2.5px !important;
}
user-select: none;
display: flex;
justify-content: space-between;
background-color: #313244;
border-radius: 15px 15px 0 0;
padding: 9px 18px 9px 18px;
align-items: stretch;
height: 42px;
padding-left: 1rem;
}
.title-bar span {
align-self: center;
}
svg {
fill: var(--text);
margin: 0;
padding: 0;
height: 24px !important;
height: 24px;
}
#close {
background: none;
@ -36,15 +43,16 @@ const randomID = customClass || Math.random().toString().replace(".", "");
border: none;
padding: 0;
margin: 0;
height: 24px !important;
width: 50px;
font: inherit;
cursor: pointer;
outline: inherit;
}
.window-body {
padding: 20px !important;
background-color: #1e1e2e;
border-radius: 0 0 17px 17px;
gap: 1rem;
display: flex;
padding: 0 1rem 1rem 1rem;
flex-direction: column;
}
@media (pointer: coarse) {
.window {
@ -64,28 +72,24 @@ const randomID = customClass || Math.random().toString().replace(".", "");
style={hideByDefault && "display: none;"}
>
<div class="window" style="max-width: 100%">
<div class="title-bar">
<div class="title-bar-text">{title}</div>
{
showClose && (
<button
id="close"
aria-label="Close"
onclick={`document.querySelector("#window-${randomID}").style.display = "none";`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
<div class="window-inner">
<div class="title-bar">
<span>{title}</span>
{
showClose && (
<button
id="close"
aria-label="Close"
onclick={`document.querySelector("#window-${randomID}").style.display = "none";`}
>
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
</svg>
</button>
)
}
</div>
<div class="window-body">
<slot />
<XmarkIcon width="12" height="12" />
</button>
)
}
</div>
<div class="window-body">
<slot />
</div>
</div>
</div>
</div>