mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 21:13:40 +02:00
76 lines
No EOL
1.5 KiB
CSS
76 lines
No EOL
1.5 KiB
CSS
/* # Sections */
|
|
|
|
super-secret-settings {
|
|
--border-width: 5px;
|
|
|
|
position: fixed;
|
|
top: var(--border-width);
|
|
left: var(--border-width);
|
|
width: 400px;
|
|
fill: white;
|
|
color: white;
|
|
z-index: 1000;
|
|
border: solid 1px white;
|
|
background-color: rgb(0, 102, 204);
|
|
box-shadow:
|
|
0 0 0 var(--border-width) black,
|
|
0 0 40px calc(var(--border-width) * 2) rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
/* ## Header */
|
|
|
|
super-secret-settings section.header {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 1fr repeat(2, var(--running-size));
|
|
height: var(--running-size);
|
|
cursor: grab;
|
|
}
|
|
|
|
super-secret-settings:not(.collapsed) section.header {
|
|
border-bottom: solid 1px white;
|
|
}
|
|
|
|
super-secret-settings section.header:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
super-secret-settings section.header p {
|
|
pointer-events: none;
|
|
padding: 0 var(--padding);
|
|
}
|
|
|
|
super-secret-settings section.header svg {
|
|
width: calc(var(--padding) * 1.5);
|
|
margin: auto;
|
|
}
|
|
|
|
super-secret-settings section.header button {
|
|
height: 100%;
|
|
border-left: solid 1px white;
|
|
}
|
|
|
|
super-secret-settings.collapsed section.header button.collapse svg {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
/* ## Body */
|
|
|
|
super-secret-settings section.body {
|
|
padding: var(--padding);
|
|
}
|
|
|
|
super-secret-settings.collapsed section.body {
|
|
display: none;
|
|
}
|
|
|
|
/* # Size queries */
|
|
|
|
@media not (hover: hover), (max-width: 900px) {
|
|
super-secret-settings {
|
|
top: unset;
|
|
bottom: 5px;
|
|
width: calc(100% - (var(--border-width) * 2));
|
|
transform: translate(0, 0) !important;
|
|
}
|
|
} |