revamped services page (with temp ugly filters menu
All checks were successful
/ build (push) Successful in 4m36s
All checks were successful
/ build (push) Successful in 4m36s
This commit is contained in:
parent
036ab72c9c
commit
6ce26f68cb
GPG key ID:
8ECFA045E63BC583
22 changed files with 493 additions and 341 deletions
|
|
@ -119,13 +119,12 @@ h3 a, h4 a {
|
|||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* text */
|
||||
p,
|
||||
li,
|
||||
button {
|
||||
.icon {
|
||||
transform: scale(1.13);
|
||||
}
|
||||
[accent] {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
[link-color] {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
/* information colors */
|
||||
|
|
@ -208,55 +207,41 @@ li {
|
|||
}
|
||||
|
||||
/* styled details elements */
|
||||
details.styled {
|
||||
summary {
|
||||
span {
|
||||
padding-right: .6rem;
|
||||
transform: translateY(.1rem);
|
||||
vertical-align: middle;
|
||||
details {
|
||||
&[styled] {
|
||||
background-color: light-dark(color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 3%, transparent));
|
||||
border-radius: .8rem .4rem .8rem .4rem;
|
||||
border: .13rem solid var(--accent);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
summary {
|
||||
background: linear-gradient(color-mix(in srgb, var(--accent) 2%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
|
||||
border-bottom: unset;
|
||||
cursor: pointer;
|
||||
padding: .45rem;
|
||||
|
||||
icon-tabler[arrow-autofit-height] {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&::marker {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.tabler--arrow-autofit-height:last-of-type {
|
||||
margin-left: auto;
|
||||
details-content {
|
||||
display: block;
|
||||
padding: .8rem;
|
||||
|
||||
p:first-of-type { margin-top: 0; }
|
||||
p:last-of-type { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
background: linear-gradient(color-mix(in srgb, var(--accent) 3%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
|
||||
border-bottom: unset !important;
|
||||
cursor: pointer;
|
||||
padding: .65rem;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 1rem;
|
||||
text-align: start !important;
|
||||
|
||||
ul {
|
||||
margin: 0 0 0 -.5rem;
|
||||
&[open] {
|
||||
summary {
|
||||
border-bottom: .1rem solid var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
p:first-of-type {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
p:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.last {
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
|
||||
background-color: color-mix(in srgb, var(--accent) 3%, transparent);
|
||||
border-radius: .8rem .4rem .8rem .4rem;
|
||||
border: .13rem solid var(--accent);
|
||||
margin-top: 1.3rem;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
details.styled[open] {
|
||||
summary {
|
||||
border-bottom: .1rem solid var(--accent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -329,7 +314,7 @@ details.cw[open] {
|
|||
/* card styling */
|
||||
card-container {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 1.2rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
|
|
@ -339,12 +324,13 @@ card-container {
|
|||
border: .15rem solid var(--border);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: auto;
|
||||
padding: .6rem;
|
||||
width: auto;
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .6rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
[icon] {
|
||||
height: 1.4rem;
|
||||
|
|
@ -352,12 +338,19 @@ card-container {
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
icon-tabler {
|
||||
span[status] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
|
||||
&[lock], &[server] {
|
||||
color: var(--link);
|
||||
icon-tabler {
|
||||
margin-left: .3rem;
|
||||
&[lock] {
|
||||
color: var(--link);
|
||||
}
|
||||
&[device-desktop-cog] {
|
||||
color: var(--blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -373,9 +366,10 @@ card-container {
|
|||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&[dont-suggest] {
|
||||
&[advise-against] {
|
||||
opacity: .7;
|
||||
transition: 1s;
|
||||
border-color: color-mix(in srgb, var(--warning) 30%, transparent);
|
||||
|
|
@ -387,6 +381,25 @@ card-container {
|
|||
|
||||
buttons-container {
|
||||
margin-top: auto;
|
||||
|
||||
img {
|
||||
align-self: center;
|
||||
border-radius: 10rem;
|
||||
height: 1.3rem;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
icon-tabler {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:has(img[src^="https://compliance"]) {
|
||||
align-self: center;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -436,11 +449,6 @@ audio {
|
|||
border-radius: 3rem;
|
||||
}
|
||||
|
||||
/* summary styling */
|
||||
summary {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* button link styling */
|
||||
.button {
|
||||
background-color: color-mix(in srgb, var(--accent) 25%, transparent);
|
||||
|
|
@ -632,7 +640,6 @@ html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
|
|||
|
||||
.alt-popup {
|
||||
position: fixed;
|
||||
text-transform: none !important;
|
||||
background-color: color-mix(in srgb, var(--background) 85%, transparent);
|
||||
backdrop-filter: blur(.5rem);
|
||||
color: var(--foreground);
|
||||
|
|
@ -747,34 +754,4 @@ checkbox-button-group {
|
|||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* atmedia*/
|
||||
|
||||
@media screen and (max-width: 1083px) {
|
||||
details.styled {
|
||||
section {
|
||||
|
||||
/* reset margins for list on mobile view */
|
||||
ul {
|
||||
margin: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* different styling for elements in dark mode
|
||||
must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */
|
||||
html:not([data-theme="light"]) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.button:hover {
|
||||
color: var(--background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
.button:hover {
|
||||
color: var(--background);
|
||||
}
|
||||
}
|
||||
|
|
@ -42,6 +42,7 @@ icon-tabler {
|
|||
&[corner-down-right] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 6v6a3 3 0 0 0 3 3h10l-4-4m0 8l4-4'/%3E%3C/svg%3E"); }
|
||||
&[currency-dollar] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.7 8A3 3 0 0 0 14 6h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2M12 3v3m0 12v3'/%3E%3C/svg%3E"); }
|
||||
&[database-share] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 6c0 1.657 3.582 3 8 3s8-1.343 8-3s-3.582-3-8-3s-8 1.343-8 3'/%3E%3Cpath d='M4 6v6c0 1.657 3.582 3 8 3q.541 0 1.065-.026M20 13V6'/%3E%3Cpath d='M4 12v6c0 1.657 3.582 3 8 3m4 1l5-5m0 4.5V17h-4.5'/%3E%3C/g%3E%3C/svg%3E"); }
|
||||
&[device-desktop-cog] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 16H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v7M7 20h5m-3-4v4m8.001-1a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75'/%3E%3C/svg%3E"); }
|
||||
&[device-gamepad-2] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5z'/%3E%3Cpath d='m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2'/%3E%3C/g%3E%3C/svg%3E"); }
|
||||
&[device-mobile] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01'/%3E%3C/svg%3E"); }
|
||||
&[external-link] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E"); }
|
||||
|
|
@ -58,6 +59,7 @@ icon-tabler {
|
|||
&[mail] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E"); }
|
||||
&[maximize] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E"); }
|
||||
&[message-chatbot] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM9.5 9h.01m4.99 0h.01'/%3E%3Cpath d='M9.5 13a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E"); }
|
||||
&[message] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9h8m-8 4h6m4-9a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3C/svg%3E"); }
|
||||
&[minimize] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19v-2a2 2 0 0 1 2-2h2M15 5v2a2 2 0 0 0 2 2h2M5 15h2a2 2 0 0 1 2 2v2M5 9h2a2 2 0 0 0 2-2V5'/%3E%3C/svg%3E"); }
|
||||
&[mood-empty] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01M9 15h6'/%3E%3C/svg%3E"); }
|
||||
&[mood-look-up] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m6-4h.01M15 8h.01M11 12h2'/%3E%3C/svg%3E"); }
|
||||
|
|
@ -70,10 +72,12 @@ icon-tabler {
|
|||
&[robot-face] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2'/%3E%3Cpath d='M9 16q1.5 1 3 1c1.5 0 2-.333 3-1M9 7L8 3m7 4l1-4m-7 9v-1m6 1v-1'/%3E%3C/g%3E%3C/svg%3E"); }
|
||||
&[rosette-discount-check] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 7.2A2.2 2.2 0 0 1 7.2 5h1a2.2 2.2 0 0 0 1.55-.64l.7-.7a2.2 2.2 0 0 1 3.12 0l.7.7c.412.41.97.64 1.55.64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58.23 1.138.64 1.55l.7.7a2.2 2.2 0 0 1 0 3.12l-.7.7a2.2 2.2 0 0 0-.64 1.55v1a2.2 2.2 0 0 1-2.2 2.2h-1a2.2 2.2 0 0 0-1.55.64l-.7.7a2.2 2.2 0 0 1-3.12 0l-.7-.7a2.2 2.2 0 0 0-1.55-.64h-1a2.2 2.2 0 0 1-2.2-2.2v-1a2.2 2.2 0 0 0-.64-1.55l-.7-.7a2.2 2.2 0 0 1 0-3.12l.7-.7A2.2 2.2 0 0 0 5 8.2z'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); }
|
||||
&[rss] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 4a16 16 0 0 1 16 16M4 11a9 9 0 0 1 9 9'/%3E%3C/svg%3E"); }
|
||||
&[search] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6'/%3E%3C/svg%3E"); }
|
||||
&[server-cog] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01'/%3E%3C/svg%3E"); }
|
||||
&[server] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm4-7v.01M7 16v.01'/%3E%3C/svg%3E"); }
|
||||
&[settings] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E"); }
|
||||
&[shield-lock] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3a12 12 0 0 0 8.5 3A12 12 0 0 1 12 21A12 12 0 0 1 3.5 6A12 12 0 0 0 12 3'/%3E%3Cpath d='M11 11a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1 1v2.5'/%3E%3C/g%3E%3C/svg%3E"); }
|
||||
&[social] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 0 4 0a2 2 0 1 0-4 0M3 19a2 2 0 1 0 4 0a2 2 0 1 0-4 0m14 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0m-8-5a3 3 0 1 0 6 0a3 3 0 1 0-6 0m3-7v4m-5.3 6.8l2.8-2m7.8 2l-2.8-2'/%3E%3C/svg%3E"); }
|
||||
&[text-size] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7V5h13v2m-6-2v14m2 0H8m7-6v-1h6v1m-3-1v7m-1 0h2'/%3E%3C/svg%3E"); }
|
||||
&[thumb-down] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 13V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1za4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2-2l-1-5a2 3 0 0 0-2-2h-7a3 3 0 0 0-3 3'/%3E%3C/svg%3E"); }
|
||||
&[thumb-up] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1za4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E"); }
|
||||
|
|
|
|||
|
|
@ -7,33 +7,86 @@
|
|||
/ ╰───────────────────────────────────────╯
|
||||
/ services - styling for managing the services page */
|
||||
|
||||
#services.window {
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
section {
|
||||
flex: 1;
|
||||
}
|
||||
article#services {
|
||||
details[styled] {
|
||||
services-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
|
||||
#public {
|
||||
padding: 0 .8rem 0 0;
|
||||
}
|
||||
|
||||
#private {
|
||||
padding: 0 0 0 .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 59em) {
|
||||
#services.window {
|
||||
.flex-container {
|
||||
flex-direction: column !important;
|
||||
|
||||
#public, #private {
|
||||
padding: unset !important;
|
||||
sf-category, sf-publicity {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* frontends */
|
||||
&:not(:has(input#service-frontend:checked)) {
|
||||
card-container card-entry:has(h3 span[status] icon-tabler[cloud-network]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* search */
|
||||
&:not(:has(input#service-search:checked)) {
|
||||
card-container card-entry:has(h3 span[status] icon-tabler[search]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* social */
|
||||
&:not(:has(input#service-social:checked)) {
|
||||
card-container card-entry:has(h3 span[status] icon-tabler[social]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* fun */
|
||||
&:not(:has(input#service-fun:checked)) {
|
||||
card-container card-entry:has(h3 span[status] icon-tabler[mood-smile]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* chat */
|
||||
&:not(:has(input#service-chat:checked)) {
|
||||
card-container card-entry:has(h3 span[status] icon-tabler[message]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* sharing */
|
||||
&:not(:has(input#service-sharing:checked)) {
|
||||
card-container card-entry:has(h3 span[status] icon-tabler[database-share]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* git */
|
||||
&:not(:has(input#service-git:checked)) {
|
||||
card-container card-entry:has(h3 span[status] icon-tabler[brand-git]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* personal */
|
||||
&:not(:has(input#service-personal:checked)) {
|
||||
card-container card-entry:has(h3 span[status] icon-tabler[user]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* public */
|
||||
&:not(:has(input#service-public:checked)) {
|
||||
card-container card-entry:has(h3 span[status] icon-tabler[planet]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* private */
|
||||
&:not(:has(input#service-private:checked)) {
|
||||
card-container card-entry:has(h3 span[status] icon-tabler[lock]) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue