115 lines
No EOL
3.5 KiB
CSS
115 lines
No EOL
3.5 KiB
CSS
/* ╭────────────────────────────────────────────╮
|
|
/ │ _ _ │
|
|
/ │ __ _(_)_ __ __| | _____ _____ │
|
|
/ │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │
|
|
/ │ \ V V /| | | | | (_| | (_) \ V V /\__ \ │
|
|
/ │ \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │
|
|
/ ╰────────────────────────────────────────────╯
|
|
/ windows - related styling for the windows on pages */
|
|
|
|
.window {
|
|
background-color: var(--background);
|
|
border-radius: 2rem .6rem 2rem .6rem;
|
|
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
|
color: var(--foreground);
|
|
outline: var(--accent) solid .15rem;
|
|
overflow: clip;
|
|
transition: .2s;
|
|
|
|
&:hover {
|
|
outline: var(--accent) solid .5rem;
|
|
transition: .2s;
|
|
}
|
|
|
|
.header {
|
|
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
|
|
border-bottom: .1rem solid var(--accent);
|
|
display: inline-flex;
|
|
min-width: 100%;
|
|
overflow: clip;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
|
|
titlebar-icon {
|
|
background: color-mix(in srgb, var(--accent) 30%, transparent);
|
|
border-bottom-right-radius: 1rem;
|
|
border-bottom: .2rem solid var(--accent);
|
|
border-right: .2rem solid var(--accent);
|
|
margin-bottom: -.2rem;
|
|
padding: .4rem .3rem .4rem 1rem;
|
|
}
|
|
|
|
a {
|
|
align-self: center;
|
|
padding-left: .5rem;
|
|
text-decoration: none;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
window-controls {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: auto 0 auto auto;
|
|
align-items: center;
|
|
gap: .4rem;
|
|
|
|
icon-tabler[minimize], icon-tabler[maximize] {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
close-button {
|
|
background: color-mix(in srgb, var(--accent) 30%, transparent);
|
|
border-bottom-left-radius: 1rem;
|
|
border-bottom: .2rem solid var(--accent);
|
|
border-left: .2rem solid var(--accent);
|
|
cursor: pointer;
|
|
margin-bottom: -.2rem;
|
|
padding: .5rem .3rem .4rem .4rem;
|
|
transition: .2s;
|
|
|
|
&:hover {
|
|
background: var(--red);
|
|
icon-tabler { background-color: var(--background); }
|
|
}
|
|
}
|
|
}
|
|
|
|
section, article {
|
|
padding: .8rem;
|
|
}
|
|
|
|
@media screen and (max-width: 60rem) {
|
|
&:not(#footer) {
|
|
.header {
|
|
titlebar-icon {
|
|
padding: .3rem .4rem .3rem .4rem;
|
|
}
|
|
|
|
window-controls {
|
|
icon-tabler[minimize], icon-tabler[maximize] {
|
|
display: none !important;
|
|
}
|
|
|
|
close-button {
|
|
padding: .4rem .3rem .3rem .4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
main, section, article {
|
|
padding: .5rem;
|
|
}
|
|
|
|
border-bottom: var(--accent) solid .15rem;
|
|
border-left: unset !important;
|
|
border-radius: unset !important;
|
|
border-right: unset !important;
|
|
border-top: var(--accent) solid .15rem;
|
|
}
|
|
}
|
|
} |