nin0/website
1
0
Fork 1
Code Pull requests Packages 1 Activity

fixes

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

72
src/components/commonComponents/Window.astro
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>