xevion/glance
1
0
Fork 0
mirror of https://github.com/Xevion/glance.git synced 2025-12-15 06:11:59 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'release/v0.6.0' into features

Browse Source
This commit is contained in:
Svilen Markov
2024-09-03 00:26:33 +01:00
parent 37164070d2 f76e06ec57
commit 776fdcc6ce
14 changed files with 145 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
internal/assets/static/main.css
View File

@@ -121,15 +121,6 @@
color: var(--color-primary);
}
.list { --list-half-gap: 0rem; }
.list-gap-2 { --list-half-gap: 0.1rem; }
.list-gap-4 { --list-half-gap: 0.2rem; }
.list-gap-10 { --list-half-gap: 0.5rem; }
.list-gap-14 { --list-half-gap: 0.7rem; }
.list-gap-20 { --list-half-gap: 1rem; }
.list-gap-24 { --list-half-gap: 1.2rem; }
.list-gap-34 { --list-half-gap: 1.7rem; }
.page-columns-transitioned .list-with-transition > * { animation: collapsibleItemReveal .25s backwards; }
.list-with-transition > *:nth-child(2) { animation-delay: 30ms; }
.list-with-transition > *:nth-child(3) { animation-delay: 60ms; }
@@ -143,7 +134,7 @@
margin-top: calc(var(--list-half-gap) * 2);
}
.list-with-separator > *:not(:first-child) {
.list.list-with-separator > *:not(:first-child) {
margin-top: var(--list-half-gap);
border-top: 1px solid var(--color-separator);
padding-top: var(--list-half-gap);
@@ -570,17 +561,30 @@ details[open] .summary::after {
max-width: 1100px;
}
.page-center-vertically .page {
display: flex;
justify-content: center;
flex-direction: column;
}
/* TODO: refactor, otherwise I hope I never have to change dynamic columns again */
.dynamic-columns {
gap: calc(var(--widget-content-vertical-padding) / 2);
--list-half-gap: 0.5rem;
gap: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding);
display: grid;
grid-template-columns: repeat(var(--columns-per-row), 1fr);
margin: calc(0px - var(--widget-content-vertical-padding) / 2) calc(0px - var(--widget-content-horizontal-padding) / 2);
}
.dynamic-columns > * {
padding: calc(var(--widget-content-vertical-padding) / 2) calc(var(--widget-content-horizontal-padding) / 1.5);
background-color: var(--color-background);
border-radius: var(--border-radius);
padding-left: var(--widget-content-horizontal-padding);
border-left: 1px solid var(--color-separator);
min-width: 0;
}
.dynamic-columns > *:first-child {
padding-top: 0;
border-top: none;
border-left: none;
}
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
@@ -589,23 +593,49 @@ details[open] .summary::after {
.dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; }
.dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; }
@container widget (max-width: 1500px) {
@container widget (max-width: 599px) {
.dynamic-columns { gap: 0; }
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
.dynamic-columns > * {
border-left: none;
padding-left: 0;
}
.dynamic-columns > *:not(:first-child) {
margin-top: calc(var(--list-half-gap) * 2);
}
.dynamic-columns.list-with-separator > *:not(:first-child) {
margin-top: var(--list-half-gap);
border-top: 1px solid var(--color-separator);
padding-top: var(--list-half-gap);
}
}
@container widget (min-width: 600px) and (max-width: 849px) {
.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; }
.dynamic-columns > :nth-child(2n-1) {
border-left: none;
padding-left: 0;
}
}
@container widget (min-width: 850px) and (max-width: 1249px) {
.dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; }
.dynamic-columns > :nth-child(3n+1) {
border-left: none;
padding-left: 0;
}
}
@container widget (min-width: 1250px) and (max-width: 1499px) {
.dynamic-columns:has(> :nth-child(4)) { --columns-per-row: 4; }
.dynamic-columns > :nth-child(4n+1) {
border-left: none;
padding-left: 0;
}
}
@container widget (max-width: 1250px) {
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; }
.dynamic-columns:has(> :nth-child(3)) { --columns-per-row: 3; }
}
@container widget (max-width: 850px) {
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
.dynamic-columns:has(> :nth-child(2)) { --columns-per-row: 2; }
}
@container widget (max-width: 550px) {
.dynamic-columns:has(> :nth-child(1)) { --columns-per-row: 1; }
@container widget (min-width: 1500px) {
.dynamic-columns:has(> :nth-child(5)) { --columns-per-row: 5; }
.dynamic-columns > :nth-child(5n+1) {
border-left: none;
padding-left: 0;
}
}
.cards-vertical {
@@ -839,6 +869,7 @@ details[open] .summary::after {
.market-chart {
margin-left: auto;
width: 6.5rem;
flex-shrink: 0;
}
.market-chart svg {
@@ -1325,10 +1356,13 @@ details[open] .summary::after {
}
.monitor-site:hover .monitor-site-icon {
filter: grayscale(0);
opacity: 1;
}
.monitor-site:hover .monitor-site-icon:not(.simple-icon) {
filter: grayscale(0);
}
.monitor-site-status-icon {
flex-shrink: 0;
margin-left: auto;
@@ -1764,4 +1798,13 @@ details[open] .summary::after {
.margin-bottom-10 { margin-bottom: 1rem; }
.margin-bottom-15 { margin-bottom: 1.5rem; }
.margin-bottom-auto { margin-bottom: auto; }
.padding-block-5 { padding-block: 0.5rem; }
.scale-half { transform: scale(0.5); }
.list { --list-half-gap: 0rem; }
.list-gap-2 { --list-half-gap: 0.1rem; }
.list-gap-4 { --list-half-gap: 0.2rem; }
.list-gap-10 { --list-half-gap: 0.5rem; }
.list-gap-14 { --list-half-gap: 0.7rem; }
.list-gap-20 { --list-half-gap: 1rem; }
.list-gap-24 { --list-half-gap: 1.2rem; }
.list-gap-34 { --list-half-gap: 1.7rem; }