t/tetratto
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

add: better mobile ui for timeline pages

Browse source 
add: rename button classes (quaternary->lowered, tertiary->raised)
This commit is contained in:
trisua 2025-06-12 13:53:23 -04:00
parent 7bfb113b1f
commit 0dede99682
42 changed files with 272 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

83
crates/app/src/public/css/style.css
View file

@ -189,7 +189,7 @@ table ol {
color: var(--color-text);
}
.card.tertiary {
.card.lowered {
background: var(--color-lowered);
}
@ -308,25 +308,25 @@ button.secondary:hover,
background: var(--color-secondary-lowered);
}
button.tertiary,
.button.tertiary {
button.raised,
.button.raised {
background: var(--color-raised);
color: var(--color-text-raised);
}
button.tertiary:hover,
.button.tertiary:hover {
button.raised:hover,
.button.raised:hover {
background: var(--color-super-raised);
}
button.quaternary,
.button.quaternary {
button.lowered,
.button.lowered {
background: var(--color-lowered);
color: var(--color-text-lowered);
}
button.quaternary:hover,
.button.quaternary:hover {
button.lowered:hover,
.button.lowered:hover {
background: var(--color-super-lowered);
}
@ -520,6 +520,11 @@ select:focus {
.pillmenu.rows .row:last-of-type a:last-child {
border-radius: 0;
}
.pillmenu:is(.dropdown .inner *),
.pillmenu:is(.dropdown .inner *).rows {
display: contents;
}
}
/* notification */
@ -627,7 +632,7 @@ nav .button:not(.title):not(.active):hover {
}
#page {
padding-bottom: 72px;
padding-bottom: 12dvh;
}
nav button:not(.dropdown *),
@ -669,6 +674,43 @@ nav .button:not(.title):not(.active):hover {
}
}
.mobile_nav {
width: 100dvw;
border-bottom: solid 1px var(--color-super-lowered);
background-color: var(--color-lowered);
padding: var(--pad-2) var(--pad-4);
display: flex;
gap: var(--pad-2);
align-items: center;
justify-content: space-between;
}
/* mobile nav chip nav */
.mobile_nav .pillmenu {
flex-direction: row !important;
width: max-content !important;
}
.mobile_nav .pillmenu a {
border-radius: 0;
padding: var(--pad-1) var(--pad-3);
}
.mobile_nav .pillmenu a span {
/* show icons only */
display: none;
}
.mobile_nav .pillmenu a:first-of-type {
border-top-left-radius: var(--radius) !important;
border-bottom-left-radius: var(--radius) !important;
}
.mobile_nav .pillmenu a:last-of-type {
border-top-right-radius: var(--radius) !important;
border-bottom-right-radius: var(--radius) !important;
}
/* dialog */
dialog {
padding: 0;
@ -795,7 +837,8 @@ dialog::backdrop {
}
.dropdown .inner a:hover,
.dropdown .inner button:hover {
.dropdown .inner button:hover,
.dropdown .inner .active {
background-color: var(--color-lowered);
}
@ -804,8 +847,19 @@ dialog::backdrop {
outline: none;
}
.dropdown .inner .active::after {
top: 0;
left: 0;
width: 5px;
content: "";
height: 100%;
position: absolute;
background: var(--color-primary);
border-radius: var(--radius);
}
.dropdown:not(nav *):has(.inner.open) button:not(.inner button) {
color: var(--color-text) !important;
color: var(--color-text-lowered) !important;
background: var(--color-lowered) !important;
}
@ -814,6 +868,11 @@ dialog::backdrop {
background: var(--color-primary-lowered) !important;
}
.dropdown:not(nav *):has(.inner.open) button.raised:not(.inner button) {
color: var(--color-text-raised) !important;
background: var(--color-raised) !important;
}
.dropdown button .icon {
transition: transform 0.15s;
}