408 lines
9.9 KiB
CSS
408 lines
9.9 KiB
CSS
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
@apply m-0 p-0 w-dvw h-dvh min-w-dvw min-h-dvh bg-gray-100 font-sans antialiased;
|
|
|
|
/**
|
|
* app container
|
|
* on mobile, <main> is the viewport and <nav> is fixed to the bottom
|
|
**/
|
|
&#app {
|
|
@apply grid grid-cols-1;
|
|
grid-template-rows: 1fr 3.5rem;
|
|
}
|
|
|
|
/**
|
|
* auth container
|
|
**/
|
|
&#auth {
|
|
@apply flex items-center justify-center;
|
|
|
|
header {
|
|
@apply flex flex-row items-center justify-between px-6 fixed top-0 left-0 h-20;
|
|
|
|
a {
|
|
@apply inline-flex items-center gap-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* primary app navigation
|
|
* starts fixed at the bottom on mobile, then moves to the left
|
|
**/
|
|
> nav {
|
|
@apply flex flex-row items-center justify-between px-4 pb-2 order-1;
|
|
|
|
/* app nav items */
|
|
.top {
|
|
@apply flex flex-row items-center;
|
|
|
|
.home {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
|
|
/* user items */
|
|
.bottom {
|
|
@apply flex flex-row items-center;
|
|
}
|
|
|
|
/* app buttons */
|
|
menu {
|
|
@apply flex flex-row gap-1 items-center;
|
|
|
|
li.app-button {
|
|
|
|
a {
|
|
@apply flex items-center justify-center p-3 bg-transparent text-black;
|
|
transition: background-color 100ms ease-in-out;
|
|
border-radius: 70% 50% 70% 30% / 60% 60% 60% 40%; /* blob 1 */
|
|
|
|
&:hover {
|
|
@apply bg-gray-200;
|
|
}
|
|
|
|
&.is-active {
|
|
@apply bg-cyan-400;
|
|
|
|
&:hover {
|
|
@apply bg-cyan-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) a {
|
|
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; /* blob 2 */
|
|
}
|
|
|
|
&:nth-child(3) a {
|
|
border-radius: 80% 65% 90% 50% / 90% 80% 75% 75%; /* blob 3 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* primary content window defaults
|
|
*
|
|
* main
|
|
* aside (optional left bar, must include h1 page title)
|
|
* article (content pane; if no aside, header includes h1)
|
|
* header
|
|
* section
|
|
*/
|
|
main {
|
|
@apply overflow-hidden rounded-lg;
|
|
max-height: calc(100dvh - 1rem);
|
|
container: main / inline-size;
|
|
|
|
/* app */
|
|
body#app & {
|
|
@apply grid grid-cols-1 m-2 ml-0;
|
|
|
|
/* if there's an aside, set the cols */
|
|
&:has(aside) {
|
|
grid-template-rows: 4rem 1fr;
|
|
}
|
|
}
|
|
|
|
/* auth screens */
|
|
body#auth & {
|
|
@apply bg-white border-md border-primary shadow-drop w-1/2 mx-auto p-8 rounded-xl;
|
|
min-width: 16rem;
|
|
max-width: 40rem;
|
|
}
|
|
|
|
/* left column */
|
|
aside {
|
|
@apply flex flex-col col-span-1 pb-6 2xl:pb-8 h-16 overflow-hidden rounded-l-lg;
|
|
|
|
> h1 {
|
|
@apply flex items-center h-16 min-h-16 px-6 2xl:px-8;
|
|
|
|
a.app-return {
|
|
@apply flex flex-row gap-2 items-center;
|
|
|
|
> svg {
|
|
@apply opacity-0 invisible -translate-x-1 text-white mt-1;
|
|
transition:
|
|
color 150ms ease-in,
|
|
opacity 150ms ease-in,
|
|
visibility 150ms ease-in,
|
|
translate 150ms ease-in;
|
|
}
|
|
|
|
&:hover > svg {
|
|
@apply opacity-100 visible translate-x-0 text-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .aside-inset {
|
|
@apply px-6 2xl:px-8;
|
|
}
|
|
|
|
.content {
|
|
@apply grow;
|
|
}
|
|
|
|
.drawers {
|
|
@apply grow flex flex-col gap-6 pt-1;
|
|
}
|
|
|
|
.pagelinks {
|
|
@apply flex flex-col gap-2px -mx-3;
|
|
width: calc(100% + 1.5rem);
|
|
|
|
a {
|
|
@apply flex flex-row gap-2 items-center justify-start px-3 h-9 rounded-md;
|
|
/*transition: background-color 100ms ease-in-out; */
|
|
|
|
&:hover {
|
|
@apply bg-cyan-200;
|
|
}
|
|
|
|
&.is-active {
|
|
@apply bg-cyan-400 font-semibold;
|
|
|
|
&:hover {
|
|
@apply bg-cyan-500;
|
|
}
|
|
}
|
|
|
|
span {
|
|
@apply flex items-center flex-row gap-2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* main content wrapper */
|
|
article {
|
|
@apply bg-white grid grid-cols-1 ml-2 rounded-md;
|
|
@apply overflow-y-auto;
|
|
grid-template-rows: 5rem auto;
|
|
container: content / inline-size;
|
|
transition: margin 200ms ease-in-out, width 200ms ease-in-out;
|
|
|
|
/* main content title and actions */
|
|
header {
|
|
@apply flex flex-row items-center justify-between w-full;
|
|
@apply bg-white sticky top-0 z-20;
|
|
|
|
/* app hedar; if h1 exists it means there's no aside, so force the width from that */
|
|
h1 {
|
|
@apply relative flex items-center pl-6 2xl:pl-8;
|
|
width: minmax(16rem, 20dvw);
|
|
}
|
|
|
|
/* actual page header */
|
|
h2 {
|
|
@apply flex flex-row gap-2 items-center justify-start relative top-2px;
|
|
animation: title-drop 350ms ease-out both;
|
|
|
|
> span {
|
|
@apply text-gray-700;
|
|
}
|
|
}
|
|
|
|
/* expand button */
|
|
button.calendar-expand-toggle {
|
|
svg {
|
|
transition: transform 150ms ease-in-out;
|
|
}
|
|
}
|
|
|
|
/* header menu */
|
|
menu {
|
|
@apply fixed right-0 top-2 flex flex-col bg-gray-100 gap-6 p-6 rounded-l-xl;
|
|
height: calc(100dvh - 0.5rem);
|
|
width: 33dvw;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* sections with max width content */
|
|
&.readable {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
> header {
|
|
@apply col-span-4;
|
|
}
|
|
|
|
> .content {
|
|
@apply col-span-4 2xl:col-span-3;
|
|
|
|
/* page subtitle section */
|
|
.description {
|
|
|
|
strong {
|
|
@apply font-semibold;
|
|
}
|
|
}
|
|
|
|
/* everything below the description (i.e., the content pane) */
|
|
.pane {
|
|
@apply flex flex-col items-start gap-4 my-8;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* section specific */
|
|
&#calendar {
|
|
header {
|
|
.calendar-expand-toggle {
|
|
@apply ml-1 opacity-0 pointer-events-none transition-opacity duration-150;
|
|
}
|
|
|
|
&:hover .calendar-expand-toggle,
|
|
&:focus-within .calendar-expand-toggle {
|
|
@apply opacity-100 pointer-events-auto;
|
|
}
|
|
}
|
|
}
|
|
&#settings {
|
|
/* */
|
|
}
|
|
}
|
|
|
|
/* expanded */
|
|
&.expanded {
|
|
|
|
button.calendar-expand-toggle {
|
|
svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* container sizing */
|
|
@container content (width >= 64rem)
|
|
{
|
|
main {
|
|
article {
|
|
header {
|
|
menu {
|
|
@apply relative top-auto right-auto h-auto w-auto rounded-none bg-transparent;
|
|
@apply flex flex-row items-center justify-end gap-4 p-0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* app logo */
|
|
.logo {
|
|
@apply w-10 h-10 flex;
|
|
|
|
.overlay {
|
|
fill: var(--color-cyan-500);
|
|
}
|
|
}
|
|
|
|
/* animations */
|
|
@keyframes title-drop {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-0.5rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* desktop handling
|
|
*/
|
|
|
|
/* show app nav on the left at md */
|
|
@media (width >= theme(--breakpoint-md))
|
|
{
|
|
body#app {
|
|
grid-template-columns: 5rem auto;
|
|
grid-template-rows: 1fr 0;
|
|
|
|
> nav {
|
|
@apply relative w-20 flex-col items-center justify-between px-0 pb-0 order-0;
|
|
|
|
.top {
|
|
@apply flex-col pt-6 2xl:pt-8 mt-2px;
|
|
|
|
.home {
|
|
@apply flex;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
@apply flex-col pb-6;
|
|
}
|
|
|
|
menu {
|
|
@apply flex-col mt-6;
|
|
|
|
li.app-button {
|
|
svg {
|
|
@apply w-7 h-7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
|
|
&:has(aside) {
|
|
grid-template-columns: max(16rem, 20dvw) auto;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
|
|
aside {
|
|
@apply bg-white overflow-y-auto h-full min-w-48;
|
|
transition: translate 200ms ease-in-out, visibility 200ms ease-in-out, opacity 200ms ease-in-out;
|
|
|
|
> h1 {
|
|
@apply backdrop-blur-xs sticky top-0 z-1 shrink-0 h-20 min-h-20;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
}
|
|
|
|
article {
|
|
@apply w-full ml-0 pl-3 2xl:pl-4 pr-6 2xl:pr-8 rounded-l-none rounded-r-lg;
|
|
}
|
|
|
|
/* when the calendar is expanded and aside is gone */
|
|
&.expanded {
|
|
|
|
aside {
|
|
@apply -translate-x-6 invisible opacity-0;
|
|
}
|
|
|
|
article {
|
|
@apply pl-6;
|
|
margin-left: min(-16rem, -20dvw) !important;
|
|
width: 100cqw !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* increase size of some things at 2xl */
|
|
@media (width >= theme(--breakpoint-2xl)) { /* 96rem */
|
|
main {
|
|
aside {
|
|
> h1 {
|
|
@apply h-22;
|
|
}
|
|
}
|
|
article {
|
|
grid-template-rows: 5.5rem auto;
|
|
}
|
|
}
|
|
}
|