From 30ec2ec0e83977232e2ee4b1ab07123f82780452 Mon Sep 17 00:00:00 2001 From: Jonny Barnes Date: Fri, 21 Aug 2026 15:26:01 +0100 Subject: [PATCH 1/2] Initial work on better admin page styling --- public/assets/css/app.css | 2 +- public/assets/css/app.css.br | Bin 1233 -> 1477 bytes public/assets/css/app.css.map | 2 +- public/assets/css/app.css.zst | Bin 1479 -> 1762 bytes resources/css/admin-tokens.css | 65 +++++++++++++++++++ resources/css/app.css | 1 + resources/views/admin/tokens/index.blade.php | 52 ++++++++++----- 7 files changed, 104 insertions(+), 18 deletions(-) create mode 100644 resources/css/admin-tokens.css diff --git a/public/assets/css/app.css b/public/assets/css/app.css index 4e2ebd32..1d99e7bc 100644 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -1,2 +1,2 @@ -@layer reset{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;height:auto;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}}@layer base{:root{color-scheme:light dark;--primary-hue:307;--clr-text:light-dark(oklch(5% .1 var(--primary-hue)),oklch(100% .1 var(--primary-hue)));--clr-background:light-dark(oklch(100% .1 var(--primary-hue)),oklch(15% .15 var(--primary-hue)));--clr-border:light-dark(oklch(90% .2 var(--primary-hue)),oklch(25% .1 var(--primary-hue)));--clr-snow-fall:light-dark(oklch(25% .15 var(--primary-hue)),oklch(85% .2 var(--primary-hue)))}body{background-color:var(--clr-background);color:var(--clr-text)}:root{--border-radius:8px}html{font-size:125%}body{grid-template-rows:min-content 1fr min-content;grid-template-columns:1fr min(80ch,80vw) 1fr;padding-inline:4vw;display:grid;&>header{grid-column:1/-1}&>main{grid-column:2/3}&>footer{grid-column:1/-1;margin-block-start:2ex;& search form{flex-direction:row;align-items:center;gap:1ex;display:flex;& input{min-width:0}}}}.h-feed{flex-direction:column;gap:2ex;display:flex}}@layer components{.h-entry{& pre{padding:1rem}}body>header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1rem;display:grid;& a{text-decoration:none}& h1{text-wrap:nowrap;margin:0}& nav{flex-direction:row;gap:.5rem;display:flex;@media screen and (width<=1100px){flex-wrap:wrap;grid-area:2/1/auto/span 3}}}.note{border:1px solid var(--clr-border);border-radius:var(--border-radius);flex-direction:column;padding:1ex 2ex;display:flex;& .e-content{&>p:first-child{margin-block-start:0}& .u-photo{width:100%;height:auto}}& .syndication-links{flex-direction:row;gap:1ex;display:flex;& svg{border-radius:4px;width:auto;height:1lh}}}.reply-to{border:1px solid var(--clr-border);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom:none;margin-inline:2ex;padding-inline:1ex;font-size:85%}.pagination{flex-direction:row;justify-content:center;align-items:center;display:flex;& div{flex-direction:row;gap:1ex;display:flex}}#theme-selector{& button{appearance:none;background:0 0;border:none;&:hover{cursor:pointer}}& #theme-selector-dropdown{position-area:block-end span-inline-start;border:2px solid var(--clr-border);background-color:var(--clr-background);color:var(--clr-text);margin:0;position:absolute;& fieldset{border:0;flex-direction:row;gap:1ch;display:flex;& input{display:none}}}@media (prefers-reduced-motion:no-preference){& #theme-selector-dropdown{&:popover-open{opacity:1;transform:translateY(0)scale(1);@starting-style{opacity:0;transform:translateY(30px)scale(0)}}opacity:0;transition:transform, opacity, display allow-discrete, overlay allow-discrete;transform-origin:100% 0;transition-duration:.5s;transform:translateY(0)scale(0)}}}::view-transition-group(changing-theme){animation-duration:1.25s}::view-transition-new(changing-theme),::view-transition-old(changing-theme){mix-blend-mode:normal}::view-transition-new(changing-theme){animation-name:reveal}::view-transition-old(changing-theme){animation:none}@keyframes reveal{0%{clip-path:polygon(-30% 0,-30% 0,-15% 100%,-10% 115%)}to{clip-path:polygon(-30% 0,130% 0,115% 100%,-10% 115%)}}} +@layer reset{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;height:auto;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}}@layer base{:root{color-scheme:light dark;--primary-hue:307;--clr-text:light-dark(oklch(5% .1 var(--primary-hue)),oklch(100% .1 var(--primary-hue)));--clr-background:light-dark(oklch(100% .1 var(--primary-hue)),oklch(15% .15 var(--primary-hue)));--clr-border:light-dark(oklch(90% .2 var(--primary-hue)),oklch(25% .1 var(--primary-hue)));--clr-snow-fall:light-dark(oklch(25% .15 var(--primary-hue)),oklch(85% .2 var(--primary-hue)))}body{background-color:var(--clr-background);color:var(--clr-text)}:root{--border-radius:8px}html{font-size:125%}body{grid-template-rows:min-content 1fr min-content;grid-template-columns:1fr min(80ch,80vw) 1fr;padding-inline:4vw;display:grid;&>header{grid-column:1/-1}&>main{grid-column:2/3}&>footer{grid-column:1/-1;margin-block-start:2ex;& search form{flex-direction:row;align-items:center;gap:1ex;display:flex;& input{min-width:0}}}}.h-feed{flex-direction:column;gap:2ex;display:flex}}@layer components{.h-entry{& pre{padding:1rem}}body>header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1rem;display:grid;& a{text-decoration:none}& h1{text-wrap:nowrap;margin:0}& nav{flex-direction:row;gap:.5rem;display:flex;@media screen and (width<=1100px){flex-wrap:wrap;grid-area:2/1/auto/span 3}}}.note{border:1px solid var(--clr-border);border-radius:var(--border-radius);flex-direction:column;padding:1ex 2ex;display:flex;& .e-content{&>p:first-child{margin-block-start:0}& .u-photo{width:100%;height:auto}}& .syndication-links{flex-direction:row;gap:1ex;display:flex;& svg{border-radius:4px;width:auto;height:1lh}}}.reply-to{border:1px solid var(--clr-border);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom:none;margin-inline:2ex;padding-inline:1ex;font-size:85%}.pagination{flex-direction:row;justify-content:center;align-items:center;display:flex;& div{flex-direction:row;gap:1ex;display:flex}}#theme-selector{& button{appearance:none;background:0 0;border:none;&:hover{cursor:pointer}}& #theme-selector-dropdown{position-area:block-end span-inline-start;border:2px solid var(--clr-border);background-color:var(--clr-background);color:var(--clr-text);margin:0;position:absolute;& fieldset{border:0;flex-direction:row;gap:1ch;display:flex;& input{display:none}}}@media (prefers-reduced-motion:no-preference){& #theme-selector-dropdown{&:popover-open{opacity:1;transform:translateY(0)scale(1);@starting-style{opacity:0;transform:translateY(30px)scale(0)}}opacity:0;transition:transform, opacity, display allow-discrete, overlay allow-discrete;transform-origin:100% 0;transition-duration:.5s;transform:translateY(0)scale(0)}}}::view-transition-group(changing-theme){animation-duration:1.25s}::view-transition-new(changing-theme),::view-transition-old(changing-theme){mix-blend-mode:normal}::view-transition-new(changing-theme){animation-name:reveal}::view-transition-old(changing-theme){animation:none}@keyframes reveal{0%{clip-path:polygon(-30% 0,-30% 0,-15% 100%,-10% 115%)}to{clip-path:polygon(-30% 0,130% 0,115% 100%,-10% 115%)}}.token-list{border-collapse:collapse;width:100%;margin-block-start:1em;& th,& td{text-align:left;border-bottom:1px solid var(--clr-border);vertical-align:middle;padding:.6em .8em}& th{text-transform:uppercase;letter-spacing:.03em;opacity:.7;font-size:.85em}& tr.is-revoked{opacity:.6}& a{word-break:break-all}}.badge,.token-list button.revoke{white-space:nowrap;border-radius:999px;padding:.2em .7em;font-size:.85em;line-height:1.5;display:inline-block}.badge{background:0 0;border:1px solid}.badge-active{color:light-dark(oklch(35% .16 145),oklch(75% .16 145))}.badge-revoked{color:var(--clr-text)}.token-list button.revoke{color:light-dark(oklch(30% .15 25),oklch(92% .12 25));cursor:pointer;background:light-dark(oklch(92% .15 25),oklch(30% .12 25));border:1px solid #0000;transition:background-color .15s}.token-list button.revoke:hover{background:light-dark(oklch(80% .2 25),oklch(45% .18 25))}} /*# sourceMappingURL=/assets/css/app.css.map */ diff --git a/public/assets/css/app.css.br b/public/assets/css/app.css.br index eeec79a35027043c8a76e16f3f60ad4ad6679731..e2d1ff369d415fd1742a121226c0afdf863f2167 100644 GIT binary patch literal 1477 zcmca8Fohw(@WGU`E4|sGmy5&&Z4o%kecyiiQnS~WL+b3j=Ot|CGd)`@`a!VGeYU<< zkawQh+Sq_La9j^j$mS#WZ#Lrqs;*2WH;q3p^V|CPZ;HX)jcH zn3V0CD_;2O-*VZBo?;WYE5BS*Teu}e(sJgPF6~5-H+OuSRz=P|ks!3xtM%}t{alNk zb}KEg?OW%Xu`eZRr+euhx0ip+?l$e0o&LDcwD2v9=UV~iXH)NNh?G6S(feI;!!M05 zmec>|1g_qz+OuPs%SZL3Wz1_^chnzQApgRp`Yp!_*|W~EdWpVs_ejqwSb23`57P?YZL%S!rGB@kggiMJ&=+-J!f}_id9kN6F1(v_$Vr&T zWYGo@!82+nmb4YrsdcScUB?_QcfQzq_qpP7zJQK5rTMcrFJEI$zTMY$nH^X)r97Lx z+{A#VsokUgcx1`?`ha+4hLDZ1Yv)XQ!n+i@K1W*J1u=`x$FOgruDPhBSR)ssiyn&+dYZQKXvPe-kXbS zx6BcJdS$uZ^4C|(w%OGfeJCkc*%`N0?AWcZ_im*>a;Z2F-Xgg9{O?6>>`-g(cbhW>>?euiro@igC%uIt#` zeoH}pgBe98UaiuY*;)8-#)u9TNc^^Mz}t^dR=KzhOQIlFQU z?;c*}sw93o?U>`LZI1uO-`(Qc(Cu4_lq2X&XC#j?!AqgEiqMS z(z@tB9d041yvMv-Zx!y8TB6L7D98B8Mmai2Oi)Mb^QjPJ%QKCo+I#Y5#0wo;=q#Ee z{r=j4*AG<+g9BafX#TpQQGN6B#w$O%dn1H{x-)e5HFQfFXGOp?f z-Yb?LcsH5oPMpS`$$$9hrTv;OID_ZqgiD=#R=JF=)Y5~O;b$`2#mQ}37b*rVdStL5 zeAQFlyJ}a?+_Po#{5Hw{(d3q7&&PKazpdHOEck=@u2`A>#Bg@w5XWDSFLgS7vhx16 zZjZXJtgrZ&`Sbs9DC%xd`Tdq9)iplj>yuye=EW8+`)bd&WWu+tsrzRCf3)ny#Rr*v zXRlR0tdp=d=>GP$cvm;a(;HiK6z06(@#t;5qhZ7J)I&~B%E2$cW>fygHNVy{96h%B zltD__ejatH!rvC>w(Kv->|!;Wp855$ZvHy^M++W*SYGcQJ#E$Fb+&2;1t<7!mE>Q# zGp0d!CV!y+fsNC;^>6NW_^?Fgd{c1F^WgXAt}4m+ujJmv>R6VSwc$b|XPnOKodU0o z=k!@zbXj7ly{$~eadXQXrB18P1^$;B`%-pCbWFNbcy0Y2m1iw?uFJoDHsjDnF8P1G z`A*GxJZ^73wTN2Zd6F4>VrAsE?#_9q<_E~We5$AZqwl~`eKq}% GiyHvv%jWq2 literal 1233 zcmX^3qnzP^&4ygj*WJubJl%;JoPT|5ZiPg5y;vBobhN?ZzN1IrMX&2gQ>X4<`TK6_ zs~Z{p9j$Zpe($$mxYj=Mvq@wHoYqop^ggR=ziV(Ye~X`0bBp`=%cD+9$Pl zQCyVH$!c+}v)(sO*LNLOl{$W1GW>s+v{~cLn-X)Vco1{UuUWN^~)VvDYM^NVRnJb z_BD|wz8UR47PoD#`8Lk^JW6+G+}twv>Z0}cRF=>1WPZqJF37^HqW*oJ?&}~WD}_z1 zQg8eBDpmeDzv7K&+d=*BS9UIL|35$J|AJ5)Uv4bzg z<*QL}TYf{1LCB)#!WXt4b}{^<>~~muM=dM=D`7d;&~>Grr}HMfdhko4c)IN}?%62^ zpOn}!HH3WpCt_=LG3I38a<7INv&2^R^`$UrB<|-su(x)8wtGlTry6_dY%GFu&24AmPzPhIVW$Rnz zgKw)$-+39Oy%XKEI`~|Qzw7OT@%%4rymi;@5)uBd^6c^9-D`#Hrc6HnnT_M4yv(yZ zM=E}te_~`mEB1gkp^;YHse{_F-Xe>Dmpi zG>czIr(`-UnY!>w`<{Ud&aawV=^-@SH0lKn#8 zJljj@mWkh=rB2$byT6^iGv?B)rvm+Vx9sJp;kwTM+izm@>WiUTmX{;drA}rmvi<)v z|Ngm%BmaN>5St*T)LExB@#6Zp7ZJa=Jq^&+ahB=0`sCZYn)RnI&sIJsv!K{@k&w=z MfY header {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto;\n align-items: baseline;\n gap: 1rem;\n\n a {\n text-decoration: none;\n }\n\n h1 {\n margin: 0;\n text-wrap: nowrap;\n }\n\n nav {\n display: flex;\n flex-direction: row;\n gap: .5rem;\n\n @media screen and (width <= 1100px) {\n grid-row: 2;\n grid-column: 1 / span 3;\n flex-wrap: wrap;\n }\n }\n }\n}\n","@layer components {\n .note {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--clr-border);\n border-radius: var(--border-radius);\n padding: 1ex 2ex;\n\n .e-content {\n > p:first-child {\n margin-block-start: 0;\n }\n\n .u-photo {\n width: 100%;\n height: auto;\n }\n }\n\n .syndication-links {\n display: flex;\n flex-direction: row;\n gap: 1ex;\n\n svg {\n border-radius: 4px;\n width: auto;\n height: 1lh;\n }\n }\n }\n\n .reply-to {\n font-size: 85%;\n margin-inline: 2ex;\n padding-inline: 1ex;\n border: 1px solid var(--clr-border);\n border-bottom: none;\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n}\n","@layer base {\n :root {\n color-scheme: light dark;\n\n --primary-hue: 307;\n --clr-text: light-dark(\n oklch(5% 0.1 var(--primary-hue)),\n oklch(100% 0.1 var(--primary-hue))\n );\n --clr-background: light-dark(\n oklch(100% 0.1 var(--primary-hue)),\n oklch(15% 0.15 var(--primary-hue))\n );\n --clr-border: light-dark(\n oklch(90% 0.2 var(--primary-hue)),\n oklch(25% 0.1 var(--primary-hue))\n );\n\n /* Adding snow fall colour whilst we are using it */\n --clr-snow-fall: light-dark(\n oklch(25% 0.15 var(--primary-hue)),\n oklch(85% 0.2 var(--primary-hue))\n );\n }\n\n body {\n background-color: var(--clr-background);\n color: var(--clr-text);\n }\n}\n","@layer base {\n :root {\n --border-radius: 8px;\n }\n\n html {\n font-size: 125%;\n }\n\n body {\n display: grid;\n grid-template-columns: 1fr min(80ch, 80vw) 1fr;\n grid-template-rows: min-content 1fr min-content;\n padding-inline: 4vw;\n\n > header {\n grid-column: 1/-1;\n }\n\n > main {\n grid-column: 2/3;\n }\n\n > footer {\n grid-column: 1/-1;\n margin-block-start: 2ex;\n\n search form {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 1ex;\n\n input {\n min-width: 0;\n }\n }\n }\n }\n\n .h-feed {\n display: flex;\n flex-direction: column;\n gap: 2ex;\n }\n}\n\n@layer components {\n .h-entry {\n pre {\n padding: 1rem;\n }\n }\n}\n\n","@layer components {\n .pagination {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n\n div {\n display: flex;\n flex-direction: row;\n gap: 1ex;\n }\n }\n}\n","@layer components {\n #theme-selector {\n button {\n appearance: none;\n border: none;\n background: none;\n\n &:hover {\n cursor: pointer;\n }\n }\n\n /* This is the element with the [popover] attribute */\n #theme-selector-dropdown {\n position: absolute;\n position-area: block-end span-inline-start;\n margin: 0;\n border: 2px solid var(--clr-border);\n background-color: var(--clr-background);\n color: var(--clr-text);\n\n fieldset {\n border: 0;\n display: flex;\n flex-direction: row;\n gap: 1ch;\n\n input {\n display: none;\n }\n }\n }\n\n /*\n * This is the element with the [popover] attribute\n * Here we are styling the open and closing animations\n */\n @media (prefers-reduced-motion: no-preference) {\n #theme-selector-dropdown {\n &:popover-open {\n transform: translateY(0) scale(1);\n opacity: 1;\n\n /*\n * Start styles for the opening transition.\n * Added to :popover-open, but after the opened styles.\n */\n @starting-style {\n transform: translateY(30px) scale(0);\n opacity: 0;\n }\n }\n\n /*\n * End styles for the closing transition.\n */\n transform: translateY(0) scale(0);\n opacity: 0;\n\n /*\n * Enumerate transitioning properties, including display and overlay.\n */\n transition: transform, opacity, display allow-discrete, overlay allow-discrete;\n transition-duration: 0.5s;\n transform-origin: top right;\n }\n }\n }\n\n ::view-transition-group(changing-theme) {\n animation-duration: 1.25s;\n }\n\n ::view-transition-new(changing-theme),\n ::view-transition-old(changing-theme) {\n mix-blend-mode: normal;\n }\n\n ::view-transition-new(changing-theme) {\n animation-name: reveal;\n }\n\n ::view-transition-old(changing-theme) {\n animation: none;\n }\n\n @keyframes reveal {\n from {\n clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);\n }\n\n to {\n clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);\n }\n }\n}\n"],"names":[]} \ No newline at end of file +{"version":3,"mappings":"AACA,aCGE,uCAOA,oFASA,8DAMA,4CAMA,qBAKA,+CAMA,8BAMA,gEAMA,qDAQA,mEAOA,qCAKA,gCAKA,gCACE,wGDhFJ,YEAE,oaAwBA,kECxBA,0BAIA,oBAIA,iIAME,0BAIA,uBAIA,iDAIE,yEAME,uBAON,oDHvCF,kBG+CE,SACE,oBKhDF,wHAOE,yBAIA,+BAKA,gDAKE,kCAAqC,2CHrBzC,+HAOE,aACE,qCAIA,mCAMF,6DAKE,gDAQJ,4MD/BA,sFAME,+CENF,gBACE,oDAKE,wBAMF,gMAQE,4DAME,uBAUJ,8CACE,2BACE,yDAQE,gBAAiB,8CAST,0KAahB,iEAIA,kGAKA,4DAIA,qDAIA,mICrFA,uEAKE,4GAQA,8EAOA,2BAIA,0BAKF,+IAUA,uCAKA,sEAIA,qCAIA,kNAQA","sources":["resources/css/app.css","resources/css/colours.css","resources/css/layout.css","resources/css/reset.css","resources/css/pagination.css","resources/css/theme-selector.css","resources/css/admin-tokens.css","resources/css/notes.css","resources/css/header.css"],"sourcesContent":["/* First thing we need to do is declare our cascade layers */\n@layer reset, base, components;\n\n@import url('reset.css');\n@import url('colours.css');\n@import url('layout.css');\n@import url('header.css');\n@import url('notes.css');\n@import url('pagination.css');\n@import url('theme-selector.css');\n@import url('admin-tokens.css');\n","@layer base {\n :root {\n color-scheme: light dark;\n\n --primary-hue: 307;\n --clr-text: light-dark(\n oklch(5% 0.1 var(--primary-hue)),\n oklch(100% 0.1 var(--primary-hue))\n );\n --clr-background: light-dark(\n oklch(100% 0.1 var(--primary-hue)),\n oklch(15% 0.15 var(--primary-hue))\n );\n --clr-border: light-dark(\n oklch(90% 0.2 var(--primary-hue)),\n oklch(25% 0.1 var(--primary-hue))\n );\n\n /* Adding snow fall colour whilst we are using it */\n --clr-snow-fall: light-dark(\n oklch(25% 0.15 var(--primary-hue)),\n oklch(85% 0.2 var(--primary-hue))\n );\n }\n\n body {\n background-color: var(--clr-background);\n color: var(--clr-text);\n }\n}\n","@layer base {\n :root {\n --border-radius: 8px;\n }\n\n html {\n font-size: 125%;\n }\n\n body {\n display: grid;\n grid-template-columns: 1fr min(80ch, 80vw) 1fr;\n grid-template-rows: min-content 1fr min-content;\n padding-inline: 4vw;\n\n > header {\n grid-column: 1/-1;\n }\n\n > main {\n grid-column: 2/3;\n }\n\n > footer {\n grid-column: 1/-1;\n margin-block-start: 2ex;\n\n search form {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 1ex;\n\n input {\n min-width: 0;\n }\n }\n }\n }\n\n .h-feed {\n display: flex;\n flex-direction: column;\n gap: 2ex;\n }\n}\n\n@layer components {\n .h-entry {\n pre {\n padding: 1rem;\n }\n }\n}\n\n","@layer reset {\n /* Sourced from https://piccalil.li/blog/a-more-modern-css-reset/ */\n\n /* Box sizing rules */\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n /* Prevent font size inflation */\n html {\n /* stylelint-disable property-no-vendor-prefix */\n -moz-text-size-adjust: none;\n -webkit-text-size-adjust: none;\n /* stylelint-enable property-no-vendor-prefix */\n text-size-adjust: none;\n }\n\n /* Remove default margin in favour of better control in authored CSS */\n body, h1, h2, h3, h4, p,\n figure, blockquote, dl, dd {\n margin-block-end: 0;\n }\n\n /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */\n ul[role='list'],\n ol[role='list'] {\n list-style: none;\n }\n\n /* Set core body defaults */\n body {\n line-height: 1.5;\n }\n\n /* Set shorter line heights on headings and interactive elements */\n h1, h2, h3, h4,\n button, input, label {\n line-height: 1.1;\n }\n\n /* Balance text wrapping on headings */\n h1, h2,\n h3, h4 {\n text-wrap: balance;\n }\n\n /* A elements that don't have a class get default styles */\n a:not([class]) {\n text-decoration-skip-ink: auto;\n color: currentcolor;\n }\n\n /* Make images easier to work with */\n img,\n picture {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n /* Inherit fonts for inputs and buttons */\n input, button,\n textarea, select {\n font-family: inherit;\n font-size: inherit;\n }\n\n /* Make sure textareas without a rows attribute are not tiny */\n textarea:not([rows]) {\n min-height: 10em;\n }\n\n /* Anything that has been anchored to should have extra scroll margin */\n :target {\n scroll-margin-block: 5ex;\n }\n\n /* Disable view transition animations for users who don’t want them */\n @media (prefers-reduced-motion) {\n ::view-transition-group(*),\n ::view-transition-old(*),\n ::view-transition-new(*) {\n animation: none !important;\n }\n }\n}\n","@layer components {\n .pagination {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n\n div {\n display: flex;\n flex-direction: row;\n gap: 1ex;\n }\n }\n}\n","@layer components {\n #theme-selector {\n button {\n appearance: none;\n border: none;\n background: none;\n\n &:hover {\n cursor: pointer;\n }\n }\n\n /* This is the element with the [popover] attribute */\n #theme-selector-dropdown {\n position: absolute;\n position-area: block-end span-inline-start;\n margin: 0;\n border: 2px solid var(--clr-border);\n background-color: var(--clr-background);\n color: var(--clr-text);\n\n fieldset {\n border: 0;\n display: flex;\n flex-direction: row;\n gap: 1ch;\n\n input {\n display: none;\n }\n }\n }\n\n /*\n * This is the element with the [popover] attribute\n * Here we are styling the open and closing animations\n */\n @media (prefers-reduced-motion: no-preference) {\n #theme-selector-dropdown {\n &:popover-open {\n transform: translateY(0) scale(1);\n opacity: 1;\n\n /*\n * Start styles for the opening transition.\n * Added to :popover-open, but after the opened styles.\n */\n @starting-style {\n transform: translateY(30px) scale(0);\n opacity: 0;\n }\n }\n\n /*\n * End styles for the closing transition.\n */\n transform: translateY(0) scale(0);\n opacity: 0;\n\n /*\n * Enumerate transitioning properties, including display and overlay.\n */\n transition: transform, opacity, display allow-discrete, overlay allow-discrete;\n transition-duration: 0.5s;\n transform-origin: top right;\n }\n }\n }\n\n ::view-transition-group(changing-theme) {\n animation-duration: 1.25s;\n }\n\n ::view-transition-new(changing-theme),\n ::view-transition-old(changing-theme) {\n mix-blend-mode: normal;\n }\n\n ::view-transition-new(changing-theme) {\n animation-name: reveal;\n }\n\n ::view-transition-old(changing-theme) {\n animation: none;\n }\n\n @keyframes reveal {\n from {\n clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);\n }\n\n to {\n clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);\n }\n }\n}\n","@layer components {\n .token-list {\n width: 100%;\n border-collapse: collapse;\n margin-block-start: 1em;\n\n th,\n td {\n text-align: left;\n padding: 0.6em 0.8em;\n border-bottom: 1px solid var(--clr-border);\n vertical-align: middle;\n }\n\n th {\n font-size: 0.85em;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n opacity: 0.7;\n }\n\n tr.is-revoked {\n opacity: 0.6;\n }\n\n a {\n word-break: break-all;\n }\n }\n\n .badge,\n .token-list button.revoke {\n display: inline-block;\n padding: 0.2em 0.7em;\n border-radius: 999px;\n font-size: 0.85em;\n line-height: 1.5;\n white-space: nowrap;\n }\n\n .badge {\n background: transparent;\n border: 1px solid currentcolor;\n }\n\n .badge-active {\n color: light-dark(oklch(35% 0.16 145deg), oklch(75% 0.16 145deg));\n }\n\n .badge-revoked {\n color: var(--clr-text);\n }\n\n .token-list button.revoke {\n background: light-dark(oklch(92% 0.15 25deg), oklch(30% 0.12 25deg));\n color: light-dark(oklch(30% 0.15 25deg), oklch(92% 0.12 25deg));\n border: 1px solid transparent;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n\n .token-list button.revoke:hover {\n background: light-dark(oklch(80% 0.2 25deg), oklch(45% 0.18 25deg));\n }\n}\n","@layer components {\n .note {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--clr-border);\n border-radius: var(--border-radius);\n padding: 1ex 2ex;\n\n .e-content {\n > p:first-child {\n margin-block-start: 0;\n }\n\n .u-photo {\n width: 100%;\n height: auto;\n }\n }\n\n .syndication-links {\n display: flex;\n flex-direction: row;\n gap: 1ex;\n\n svg {\n border-radius: 4px;\n width: auto;\n height: 1lh;\n }\n }\n }\n\n .reply-to {\n font-size: 85%;\n margin-inline: 2ex;\n padding-inline: 1ex;\n border: 1px solid var(--clr-border);\n border-bottom: none;\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n}\n","@layer components {\n body > header {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto;\n align-items: baseline;\n gap: 1rem;\n\n a {\n text-decoration: none;\n }\n\n h1 {\n margin: 0;\n text-wrap: nowrap;\n }\n\n nav {\n display: flex;\n flex-direction: row;\n gap: .5rem;\n\n @media screen and (width <= 1100px) {\n grid-row: 2;\n grid-column: 1 / span 3;\n flex-wrap: wrap;\n }\n }\n }\n}\n"],"names":[]} \ No newline at end of file diff --git a/public/assets/css/app.css.zst b/public/assets/css/app.css.zst index d258af4911e60e0e789b20b7c9b38a6b5d8fb617..72d74415073995b6a8e3de562975b98edab3f986 100644 GIT binary patch literal 1762 zcmdPcs{c2oS#YTtgOuM9UJU_X7yb=Q7v^{9YchQg+#GF|Vr1C(;?u#R6dktTkG9{L zv2)F;EDj6N^9&amPBZ8iZHYT~qAvSJ>BF*pJ=dNuVDx=#@bYfAj_2<$Z!aDdyzl#A z)7|CAY7X68@KbnmdrkK~_t>I+>GRjlWm*{4_LlL{&$7upI}d79AF-nWJEdDai$vZsf&DJNy7VfX_Fx|amug=+TmYAG5 zUq(Ob#U=$^uFT3MM<-6}oZV}kc#L)HoJqBFl`P`^PWt!t{lyn2HW}=%m zYI}C6Y);&3pR{eu`4!SRfgA2`jji;TP~wQa$~fuE;d?)|MKp!_Yh?Ik)@>Hz`&@SC zQX{iSqmIGPY0h@fXE=GWTrv<_Y0AU0+Q@IhrxSttyEk4vKf&$$oreKzt1lP7$&O_W zx^_6i;l#x*pUC;k6CXZVT<9Dr!upUWkZ&=YjzCaze`f@rwDaNwThHuIbJnri&Y9b^ zCfR$f-tS_o&9OTR-`AdeKlzxrg5628OP3Dr)ZpT<@-5$^b+g{}m!rhyQ$43kXUF_r zbuZA`Rikd5a+CH;)@T90{Ht}=bLQW@(OY9^^w;VC9@U>WSlBL~T2_3qIkYNvWowkDxaCs z&-d3~DY*Fa^L3U>Wt>(MTJ$2=mt1qN_VatS_49I<>qjEk=U=%NUN5+qop0MrcTcGx zg`>6>t0x5<|K`6kU{a>9%A6yMJys+yU~sZL=~Y&}nw#y=ro>>YNmd(z%(q#e*%n;7 zL3sPu)YG1ibNXNRO*?YO?GoSOHw}B@%aTpM?N^n|dV5~i^Y96``4cD2DrOMk>MBZ^ z;j&gYaDVpG7DiScDT^nIr-+w)_H1xsIB3}g}Et-N0m zsbO|lc_A+^@7@1PI#Q>VS>!o8oa;Fu&{uz_?vOdpMt!2%XMboN9d6_&41$cLc zE_Jj>m~dF_ztrW%$`yqhgFM_)TvR-{CLMF+IFumKdh0Et&_xHnNv9N=JB)&qoE9l) ztqf^16`rtp!2~Jo)m&?w^iJmA7UC}tTM;K%(c&xV#Q7rh%BGLL;4T635X77D* z@fFJ*-H7F}{4bTGw4a7nODcSxbFa+p2-C{l)oJ-3oSN1D+V-$LsO1h_;7>s6 zzLTOg(VQr0?l?zB56m;dd3(_!|ojcdc-aGrHPy4%#0IbJeMIK$bvwYqax zpk?NaX}s%xWKZ5yYjDQeKcIJeCtLOA?3hlazpXcgFIx0WDQ!8eeo*UCK!H(G5v{)R&w2m$9wfyTh2VLV$$Qv;80<8 zS>n26Qo&10zP8x@s-6>N%5{8ZXDZjdmEc~jxwx?Mw5AW+-;-Ze_&+|F=yh$!!IzV& zZ!%^ST?*Qwd8O&v{tY#%6|eFVOj5ojcilPqbk&OLjnSn{YKf;kH-Edz?&)5Z%$fDi zD&*C(lxFECTYh-#t1z%Jd{D2L9U-sHy2QwCZm4>j3&X63wpTw`pV*$~?8wgfiqR#} zfv4Svx!|VFz2?iT7hS?#joepGObz{ic9HXq#tnK7!MA%HWh(AHy6n92OwjCnu{(z= z*ROs)B_WsX_NJtJ1xs6_8ysIQS=;=5THy-WIlWIxBr@1S#142|VY=niQ6YQpfw}x@ zg*(}k4L3F^Oju^nm6T{xamP*EAyjU0b+LWhhI#65GM>&j-4%ZMp4pM&-+Ok7XS;5b z%TLJv#_7ba@UMN&w|%XS0*Xr`mq&>&mgdW9{_AtHKw=xuyw_X5E$}ROZ{wp?sXXnq p$dNX;6PxSKbDhuEE?+nE=)7~^vXw-h9WMW8CnCI>DZs$g3IOtVP!0e9 literal 1479 zcmdPcs{c2If$yv?!zot}9(4uZIqVyle#{oz_K<6P@2tD$G`AdM5Z-wzrLKh6_(2(0 zwJ-~Zpp)wkhHVUc81Bcoc-~l??x)B1;#E`s8@Y{7|IV`fdvTq6iPx^>WLpN+p_$* zrMzc_(Q4N)Evt6@C2Mup>;91qtk_W3+iF|1BYh$_V@6`bG}bL97mPCRt`L>dYEM4? z)p*v0u#et9uI_ekR_?O<5fFOr?Cy;+7efnzJ$E_I{eN@ohVO@ax9VJYesbO%_1_{a zf^L4FmV3(2)IGZ2|Io8L7f-aADqp`gbye5m6|T&W_tu6ic^sp|V-QudAy=b&kwT5) zO3x*XJS<1Ll5;Vy_cOn+0MGAKJeI*3sa%SN;9_>J!hh7p8qKLJRm# z%;A3)HRp`iZ|O-|UKhT}9J%6Oetr@s-xT3)l|=W#DbM20t4!p5`u@a(N2gW>m~^!& zP2_E2?zr-3*@-tfMnV&M&txqqxiLj6C0{Ic`b!6Ozvu3Kx`~@zlj}sLtmtW(t$O{T zMSaRPwI}6T>ki+D4Hl~7Z@uT=G(-P zi$_jt{M?kXPF1en@?rNfrN8%1Br$6m*tHPA<<$y?kQRRGWa- z$dpjUZ#K7+zkhJ=jXjt2)F*G-62nWr+svOv>Aim`xcJuIlmze4Qm5 zoAD=nO=rQHY~9|J?Mtd&YdJY6%v@7+ZTgZ%y}i>ezsSs-lk)9+e){H*jRnq@4pO#aS0mn?xWctm_EOKYrSH=p=y!Aa z{Zlzwe%4)0@c!Yqm3(y(rHhzEnH=n9C&o9;d|0$0FZ!BPv&^0N_Xbb)6{<^Fsrk-3 zDz(8NZQjAxB7uv&Cxi&b3M#lZ`_8doD7(0QqM!dXTom@%bm0mukE97A^l)5W&Gd`;eDPQ0wyI^#5M(F6R8$ z=(cV$*Sj9=H4`lC6}Xt^WTtnBho5__U?D4TRwcA$`NEW})zu#rEfmbUpI`jlu8&?Ziq|K7fnxVShAZ|5}-oc2} z1Zn+8-zpyKgmwFH@^k6`ZgFAf_~WcqF@H}&(Zgkxi+731_84#Rt~-&sMk0f)yL6Xz zhUyOse!ZyyljoMqN|w#|bo2e~hu<@n&hzfPap|U-Ur6-6AAOhF5AlSaGRmF-0EE@J ASpWb4 diff --git a/resources/css/admin-tokens.css b/resources/css/admin-tokens.css new file mode 100644 index 00000000..42d83b13 --- /dev/null +++ b/resources/css/admin-tokens.css @@ -0,0 +1,65 @@ +@layer components { + .token-list { + width: 100%; + border-collapse: collapse; + margin-block-start: 1em; + + th, + td { + text-align: left; + padding: 0.6em 0.8em; + border-bottom: 1px solid var(--clr-border); + vertical-align: middle; + } + + th { + font-size: 0.85em; + text-transform: uppercase; + letter-spacing: 0.03em; + opacity: 0.7; + } + + tr.is-revoked { + opacity: 0.6; + } + + a { + word-break: break-all; + } + } + + .badge, + .token-list button.revoke { + display: inline-block; + padding: 0.2em 0.7em; + border-radius: 999px; + font-size: 0.85em; + line-height: 1.5; + white-space: nowrap; + } + + .badge { + background: transparent; + border: 1px solid currentcolor; + } + + .badge-active { + color: light-dark(oklch(35% 0.16 145deg), oklch(75% 0.16 145deg)); + } + + .badge-revoked { + color: var(--clr-text); + } + + .token-list button.revoke { + background: light-dark(oklch(92% 0.15 25deg), oklch(30% 0.12 25deg)); + color: light-dark(oklch(30% 0.15 25deg), oklch(92% 0.12 25deg)); + border: 1px solid transparent; + cursor: pointer; + transition: background-color 150ms ease; + } + + .token-list button.revoke:hover { + background: light-dark(oklch(80% 0.2 25deg), oklch(45% 0.18 25deg)); + } +} diff --git a/resources/css/app.css b/resources/css/app.css index f25e47e3..1f787028 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -8,3 +8,4 @@ @import url('notes.css'); @import url('pagination.css'); @import url('theme-selector.css'); +@import url('admin-tokens.css'); diff --git a/resources/views/admin/tokens/index.blade.php b/resources/views/admin/tokens/index.blade.php index 8836ab07..fe787ad9 100644 --- a/resources/views/admin/tokens/index.blade.php +++ b/resources/views/admin/tokens/index.blade.php @@ -7,21 +7,41 @@ @if($tokens->isEmpty())

No tokens have been issued.

@else -
    - @foreach($tokens as $token) -
  • - {{ $token->client_id }} — scope: {{ $token->scope }} — issued {{ $token->created_at->diffForHumans() }} - @if($token->isRevoked) - — revoked {{ $token->revoked_at->diffForHumans() }} - @else -
    - {{ csrf_field() }} - {{ method_field('PUT') }} - -
    - @endif -
    • - @endforeach -
+ + + + + + + + + + + + @foreach($tokens as $token) + + + + + + + + @endforeach + +
ClientScopeIssuedStatusAction
{{ $token->client_id }}{{ $token->scope }} + @if($token->isRevoked) + Revoked {{ $token->revoked_at->diffForHumans() }} + @else + Active + @endif + + @unless($token->isRevoked) +
+ {{ csrf_field() }} + {{ method_field('PUT') }} + +
+ @endunless +
@endif @stop -- 2.55.0 From 6a0bb623fc79e389a0ab5cb5660e241a7322ed69 Mon Sep 17 00:00:00 2001 From: Jonny Barnes Date: Fri, 21 Aug 2026 16:05:48 +0100 Subject: [PATCH 2/2] Restyle the Micropub tokens admin table Breaks the table out of the centred content column to full page width via a subgrid on
(adds a reusable .full-bleed utility), and reworks the table itself to match a Claude Design mockup: a rounded card wrapper, scope values as pill chips, a dotted status pill, and proportional column widths. Colours use the site's existing --primary-hue/light-dark() tokens so it stays correct in both themes. The card scrolls horizontally on narrow viewports instead of clipping content. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01LHN7V9kyZxrsxaspMSqoGJ --- public/assets/css/app.css | 2 +- public/assets/css/app.css.br | Bin 1477 -> 1690 bytes public/assets/css/app.css.map | 2 +- public/assets/css/app.css.zst | Bin 1762 -> 2010 bytes resources/css/admin-tokens.css | 84 +++++++++++++++++-- resources/css/layout.css | 12 ++- resources/views/admin/tokens/index.blade.php | 80 ++++++++++-------- 7 files changed, 135 insertions(+), 45 deletions(-) diff --git a/public/assets/css/app.css b/public/assets/css/app.css index 1d99e7bc..2d06d701 100644 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -1,2 +1,2 @@ -@layer reset{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;height:auto;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}}@layer base{:root{color-scheme:light dark;--primary-hue:307;--clr-text:light-dark(oklch(5% .1 var(--primary-hue)),oklch(100% .1 var(--primary-hue)));--clr-background:light-dark(oklch(100% .1 var(--primary-hue)),oklch(15% .15 var(--primary-hue)));--clr-border:light-dark(oklch(90% .2 var(--primary-hue)),oklch(25% .1 var(--primary-hue)));--clr-snow-fall:light-dark(oklch(25% .15 var(--primary-hue)),oklch(85% .2 var(--primary-hue)))}body{background-color:var(--clr-background);color:var(--clr-text)}:root{--border-radius:8px}html{font-size:125%}body{grid-template-rows:min-content 1fr min-content;grid-template-columns:1fr min(80ch,80vw) 1fr;padding-inline:4vw;display:grid;&>header{grid-column:1/-1}&>main{grid-column:2/3}&>footer{grid-column:1/-1;margin-block-start:2ex;& search form{flex-direction:row;align-items:center;gap:1ex;display:flex;& input{min-width:0}}}}.h-feed{flex-direction:column;gap:2ex;display:flex}}@layer components{.h-entry{& pre{padding:1rem}}body>header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1rem;display:grid;& a{text-decoration:none}& h1{text-wrap:nowrap;margin:0}& nav{flex-direction:row;gap:.5rem;display:flex;@media screen and (width<=1100px){flex-wrap:wrap;grid-area:2/1/auto/span 3}}}.note{border:1px solid var(--clr-border);border-radius:var(--border-radius);flex-direction:column;padding:1ex 2ex;display:flex;& .e-content{&>p:first-child{margin-block-start:0}& .u-photo{width:100%;height:auto}}& .syndication-links{flex-direction:row;gap:1ex;display:flex;& svg{border-radius:4px;width:auto;height:1lh}}}.reply-to{border:1px solid var(--clr-border);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom:none;margin-inline:2ex;padding-inline:1ex;font-size:85%}.pagination{flex-direction:row;justify-content:center;align-items:center;display:flex;& div{flex-direction:row;gap:1ex;display:flex}}#theme-selector{& button{appearance:none;background:0 0;border:none;&:hover{cursor:pointer}}& #theme-selector-dropdown{position-area:block-end span-inline-start;border:2px solid var(--clr-border);background-color:var(--clr-background);color:var(--clr-text);margin:0;position:absolute;& fieldset{border:0;flex-direction:row;gap:1ch;display:flex;& input{display:none}}}@media (prefers-reduced-motion:no-preference){& #theme-selector-dropdown{&:popover-open{opacity:1;transform:translateY(0)scale(1);@starting-style{opacity:0;transform:translateY(30px)scale(0)}}opacity:0;transition:transform, opacity, display allow-discrete, overlay allow-discrete;transform-origin:100% 0;transition-duration:.5s;transform:translateY(0)scale(0)}}}::view-transition-group(changing-theme){animation-duration:1.25s}::view-transition-new(changing-theme),::view-transition-old(changing-theme){mix-blend-mode:normal}::view-transition-new(changing-theme){animation-name:reveal}::view-transition-old(changing-theme){animation:none}@keyframes reveal{0%{clip-path:polygon(-30% 0,-30% 0,-15% 100%,-10% 115%)}to{clip-path:polygon(-30% 0,130% 0,115% 100%,-10% 115%)}}.token-list{border-collapse:collapse;width:100%;margin-block-start:1em;& th,& td{text-align:left;border-bottom:1px solid var(--clr-border);vertical-align:middle;padding:.6em .8em}& th{text-transform:uppercase;letter-spacing:.03em;opacity:.7;font-size:.85em}& tr.is-revoked{opacity:.6}& a{word-break:break-all}}.badge,.token-list button.revoke{white-space:nowrap;border-radius:999px;padding:.2em .7em;font-size:.85em;line-height:1.5;display:inline-block}.badge{background:0 0;border:1px solid}.badge-active{color:light-dark(oklch(35% .16 145),oklch(75% .16 145))}.badge-revoked{color:var(--clr-text)}.token-list button.revoke{color:light-dark(oklch(30% .15 25),oklch(92% .12 25));cursor:pointer;background:light-dark(oklch(92% .15 25),oklch(30% .12 25));border:1px solid #0000;transition:background-color .15s}.token-list button.revoke:hover{background:light-dark(oklch(80% .2 25),oklch(45% .18 25))}} +@layer reset{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;height:auto;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}}@layer base{:root{color-scheme:light dark;--primary-hue:307;--clr-text:light-dark(oklch(5% .1 var(--primary-hue)),oklch(100% .1 var(--primary-hue)));--clr-background:light-dark(oklch(100% .1 var(--primary-hue)),oklch(15% .15 var(--primary-hue)));--clr-border:light-dark(oklch(90% .2 var(--primary-hue)),oklch(25% .1 var(--primary-hue)));--clr-snow-fall:light-dark(oklch(25% .15 var(--primary-hue)),oklch(85% .2 var(--primary-hue)))}body{background-color:var(--clr-background);color:var(--clr-text)}:root{--border-radius:8px}html{font-size:125%}body{grid-template-rows:min-content 1fr min-content;grid-template-columns:1fr min(80ch,80vw) 1fr;padding-inline:4vw;display:grid;&>header{grid-column:1/-1}&>main{grid-column:1/-1;grid-template-columns:subgrid;display:grid;&>*{grid-column:2/3}&>.full-bleed{grid-column:1/-1}}&>footer{grid-column:1/-1;margin-block-start:2ex;& search form{flex-direction:row;align-items:center;gap:1ex;display:flex;& input{min-width:0}}}}.h-feed{flex-direction:column;gap:2ex;display:flex}}@layer components{.h-entry{& pre{padding:1rem}}body>header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1rem;display:grid;& a{text-decoration:none}& h1{text-wrap:nowrap;margin:0}& nav{flex-direction:row;gap:.5rem;display:flex;@media screen and (width<=1100px){flex-wrap:wrap;grid-area:2/1/auto/span 3}}}.note{border:1px solid var(--clr-border);border-radius:var(--border-radius);flex-direction:column;padding:1ex 2ex;display:flex;& .e-content{&>p:first-child{margin-block-start:0}& .u-photo{width:100%;height:auto}}& .syndication-links{flex-direction:row;gap:1ex;display:flex;& svg{border-radius:4px;width:auto;height:1lh}}}.reply-to{border:1px solid var(--clr-border);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom:none;margin-inline:2ex;padding-inline:1ex;font-size:85%}.pagination{flex-direction:row;justify-content:center;align-items:center;display:flex;& div{flex-direction:row;gap:1ex;display:flex}}#theme-selector{& button{appearance:none;background:0 0;border:none;&:hover{cursor:pointer}}& #theme-selector-dropdown{position-area:block-end span-inline-start;border:2px solid var(--clr-border);background-color:var(--clr-background);color:var(--clr-text);margin:0;position:absolute;& fieldset{border:0;flex-direction:row;gap:1ch;display:flex;& input{display:none}}}@media (prefers-reduced-motion:no-preference){& #theme-selector-dropdown{&:popover-open{opacity:1;transform:translateY(0)scale(1);@starting-style{opacity:0;transform:translateY(30px)scale(0)}}opacity:0;transition:transform, opacity, display allow-discrete, overlay allow-discrete;transform-origin:100% 0;transition-duration:.5s;transform:translateY(0)scale(0)}}}::view-transition-group(changing-theme){animation-duration:1.25s}::view-transition-new(changing-theme),::view-transition-old(changing-theme){mix-blend-mode:normal}::view-transition-new(changing-theme){animation-name:reveal}::view-transition-old(changing-theme){animation:none}@keyframes reveal{0%{clip-path:polygon(-30% 0,-30% 0,-15% 100%,-10% 115%)}to{clip-path:polygon(-30% 0,130% 0,115% 100%,-10% 115%)}}.token-list-wrapper{border:1px solid var(--clr-border);background:light-dark(oklch(99% .02 var(--primary-hue)),oklch(22% .05 var(--primary-hue)));border-radius:16px;margin-block-start:1em;overflow:auto hidden}.token-list{table-layout:fixed;border-collapse:collapse;width:100%;min-width:640px;& th,& td{text-align:left;border-bottom:1px solid var(--clr-border);vertical-align:middle;padding:.9em 1.2em}& th{text-transform:uppercase;letter-spacing:.08em;opacity:.7;font-size:.8em;font-weight:700}& tr.is-revoked{opacity:.6}& a{word-break:break-all}& th:first-child,& td:first-child{width:31%}& th:nth-child(2),& td:nth-child(2){width:24%}& th:nth-child(3),& td:nth-child(3){width:15%}& th:nth-child(4),& td:nth-child(4){width:16%}& th:nth-child(5),& td:nth-child(5){text-align:right;width:14%}& tr:last-child td{border-bottom:none}}.scope-chips{flex-wrap:wrap;gap:.4em;display:flex}.scope-chip{background:light-dark(oklch(92% .05 var(--primary-hue)),oklch(35% .08 var(--primary-hue)));white-space:nowrap;border-radius:999px;padding:.2em .7em;font-size:.85em;display:inline-block}.badge,.token-list button.revoke{white-space:nowrap;border-radius:999px;align-items:center;gap:.4em;padding:.3em .8em;font-size:.85em;font-weight:600;line-height:1.5;display:inline-flex}.badge{background:0 0;border:1px solid}.badge-active{color:light-dark(oklch(35% .16 145),oklch(75% .16 145));& .dot{background:currentColor;border-radius:50%;width:6px;height:6px}}.badge-revoked{color:var(--clr-text);opacity:.7}.token-list button.revoke{color:light-dark(oklch(30% .15 25),oklch(92% .12 25));cursor:pointer;background:light-dark(oklch(92% .15 25),oklch(30% .12 25));border:1px solid #0000;transition:background-color .15s}.token-list button.revoke:hover{background:light-dark(oklch(80% .2 25),oklch(45% .18 25))}} /*# sourceMappingURL=/assets/css/app.css.map */ diff --git a/public/assets/css/app.css.br b/public/assets/css/app.css.br index e2d1ff369d415fd1742a121226c0afdf863f2167..9ca789b9af38df7f5e3f37fefbeae7419e9b5312 100644 GIT binary patch literal 1690 zcmcckVH3jx9iNA9k~9ypCQ0-yUH_?f&6UL3SzeV}>b7u&Ef2VC6V4{-!M1Ow>+M-# zaZxtcmNfZX&UdKX7`!cwe{#syhqABE$a5|$k&!RBQ?qNcl%w2@!jqm8!{?f7Vsea)l`)2#A&e5=mN96Rwth>v$wc&+2ysT;#Piz242 zcUm8y|G8uHJyXrIzu)XG5N-FKawh+FjZMv~+BdbU>}Q`7Sjn5{RH0g&ecf2B<=E@> z4}SNoSo`+B;+B73GdRmTtkUbgJT%I~)(E-@fONvb)w|0Cn!W0eWndC_jm zd_MP!UXVEYCL!`P^W}~5CJXn5MG0{xm|ZMevAXKj`2f`={%v1ZFf;A!Su?HwLecY8 z))uX;suB?{%Vv5Q-d-?S>eSD^jK#hmi(AaB-@pDF_wcag0YAmK@9D*S9UVo@Q`dYt z_{p^R_JQdcT=fZ?+3(05`zAeQ^>T-oJKS&iosZZq|6l&Ed2W>3vnfxHD$iTAZRNFP zd>vZnS6`iLEq0feT$S!__|2yKVuzMt-O8)Imme;W-6yEU@Ich< zT!xNNkJeY87-!oac5SUqd69P}pG%ysJj49o@?P`5iweKHx<9*jd~3<6oYHHTIrepD zZA*Mvw13vjAMXCn5{I6tw;cTbXMdlKOU)j~|}|b9~v$>`SF#WLyvyUztZ|m$4UO}{1YpG-<{4d(^2JOd9BFX zDt}$?4C@oYo2LD*m~d>n;%coXX!gOT8efG zd}|8QWLufyAai=7_Qaybo{qwmLfuPB+#F_#KjFx07r81jWm8M!qz*O@wdkF@E{V-j z&D$#_-PZi3>zM8i;rOcp+utscun@eHV9nXPq%rpImwe6hnJTZ{w@sfXEsd9h5k@W-Rp{tL+mCu%Y6-nra#+RE5%gq_La9j^j$mS#WZ#Lrqs;*2WH;q3p^V|CPZ;HX)jcH zn3V0CD_;2O-*VZBo?;WYE5BS*Teu}e(sJgPF6~5-H+OuSRz=P|ks!3xtM%}t{alNk zb}KEg?OW%Xu`eZRr+euhx0ip+?l$e0o&LDcwD2v9=UV~iXH)NNh?G6S(feI;!!M05 zmec>|1g_qz+OuPs%SZL3Wz1_^chnzQApgRp`Yp!_*|W~EdWpVs_ejqwSb23`57P?YZL%S!rGB@kggiMJ&=+-J!f}_id9kN6F1(v_$Vr&T zWYGo@!82+nmb4YrsdcScUB?_QcfQzq_qpP7zJQK5rTMcrFJEI$zTMY$nH^X)r97Lx z+{A#VsokUgcx1`?`ha+4hLDZ1Yv)XQ!n+i@K1W*J1u=`x$FOgruDPhBSR)ssiyn&+dYZQKXvPe-kXbS zx6BcJdS$uZ^4C|(w%OGfeJCkc*%`N0?AWcZ_im*>a;Z2F-Xgg9{O?6>>`-g(cbhW>>?euiro@igC%uIt#` zeoH}pgBe98UaiuY*;)8-#)u9TNc^^Mz}t^dR=KzhOQIlFQU z?;c*}sw93o?U>`LZI1uO-`(Qc(Cu4_lq2X&XC#j?!AqgEiqMS z(z@tB9d041yvMv-Zx!y8TB6L7D98B8Mmai2Oi)Mb^QjPJ%QKCo+I#Y5#0wo;=q#Ee z{r=j4*AG<+g9BafX#TpQQGN6B#w$O%dn1H{x-)e5HFQfFXGOp?f z-Yb?LcsH5oPMpS`$$$9hrTv;OID_ZqgiD=#R=JF=)Y5~O;b$`2#mQ}37b*rVdStL5 zeAQFlyJ}a?+_Po#{5Hw{(d3q7&&PKazpdHOEck=@u2`A>#Bg@w5XWDSFLgS7vhx16 zZjZXJtgrZ&`Sbs9DC%xd`Tdq9)iplj>yuye=EW8+`)bd&WWu+tsrzRCf3)ny#Rr*v zXRlR0tdp=d=>GP$cvm;a(;HiK6z06(@#t;5qhZ7J)I&~B%E2$cW>fygHNVy{96h%B zltD__ejatH!rvC>w(Kv->|!;Wp855$ZvHy^M++W*SYGcQJ#E$Fb+&2;1t<7!mE>Q# zGp0d!CV!y+fsNC;^>6NW_^?Fgd{c1F^WgXAt}4m+ujJmv>R6VSwc$b|XPnOKodU0o z=k!@zbXj7ly{$~eadXQXrB18P1^$;B`%-pCbWFNbcy0Y2m1iw?uFJoDHsjDnF8P1G z`A*GxJZ^73wTN2Zd6F4>VrAsE?#_9q<_E~We5$AZqwl~`eKq}% GiyHvv%jWq2 diff --git a/public/assets/css/app.css.map b/public/assets/css/app.css.map index e224fe5b..88c58430 100644 --- a/public/assets/css/app.css.map +++ b/public/assets/css/app.css.map @@ -1 +1 @@ -{"version":3,"mappings":"AACA,aCGE,uCAOA,oFASA,8DAMA,4CAMA,qBAKA,+CAMA,8BAMA,gEAMA,qDAQA,mEAOA,qCAKA,gCAKA,gCACE,wGDhFJ,YEAE,oaAwBA,kECxBA,0BAIA,oBAIA,iIAME,0BAIA,uBAIA,iDAIE,yEAME,uBAON,oDHvCF,kBG+CE,SACE,oBKhDF,wHAOE,yBAIA,+BAKA,gDAKE,kCAAqC,2CHrBzC,+HAOE,aACE,qCAIA,mCAMF,6DAKE,gDAQJ,4MD/BA,sFAME,+CENF,gBACE,oDAKE,wBAMF,gMAQE,4DAME,uBAUJ,8CACE,2BACE,yDAQE,gBAAiB,8CAST,0KAahB,iEAIA,kGAKA,4DAIA,qDAIA,mICrFA,uEAKE,4GAQA,8EAOA,2BAIA,0BAKF,+IAUA,uCAKA,sEAIA,qCAIA,kNAQA","sources":["resources/css/app.css","resources/css/colours.css","resources/css/layout.css","resources/css/reset.css","resources/css/pagination.css","resources/css/theme-selector.css","resources/css/admin-tokens.css","resources/css/notes.css","resources/css/header.css"],"sourcesContent":["/* First thing we need to do is declare our cascade layers */\n@layer reset, base, components;\n\n@import url('reset.css');\n@import url('colours.css');\n@import url('layout.css');\n@import url('header.css');\n@import url('notes.css');\n@import url('pagination.css');\n@import url('theme-selector.css');\n@import url('admin-tokens.css');\n","@layer base {\n :root {\n color-scheme: light dark;\n\n --primary-hue: 307;\n --clr-text: light-dark(\n oklch(5% 0.1 var(--primary-hue)),\n oklch(100% 0.1 var(--primary-hue))\n );\n --clr-background: light-dark(\n oklch(100% 0.1 var(--primary-hue)),\n oklch(15% 0.15 var(--primary-hue))\n );\n --clr-border: light-dark(\n oklch(90% 0.2 var(--primary-hue)),\n oklch(25% 0.1 var(--primary-hue))\n );\n\n /* Adding snow fall colour whilst we are using it */\n --clr-snow-fall: light-dark(\n oklch(25% 0.15 var(--primary-hue)),\n oklch(85% 0.2 var(--primary-hue))\n );\n }\n\n body {\n background-color: var(--clr-background);\n color: var(--clr-text);\n }\n}\n","@layer base {\n :root {\n --border-radius: 8px;\n }\n\n html {\n font-size: 125%;\n }\n\n body {\n display: grid;\n grid-template-columns: 1fr min(80ch, 80vw) 1fr;\n grid-template-rows: min-content 1fr min-content;\n padding-inline: 4vw;\n\n > header {\n grid-column: 1/-1;\n }\n\n > main {\n grid-column: 2/3;\n }\n\n > footer {\n grid-column: 1/-1;\n margin-block-start: 2ex;\n\n search form {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 1ex;\n\n input {\n min-width: 0;\n }\n }\n }\n }\n\n .h-feed {\n display: flex;\n flex-direction: column;\n gap: 2ex;\n }\n}\n\n@layer components {\n .h-entry {\n pre {\n padding: 1rem;\n }\n }\n}\n\n","@layer reset {\n /* Sourced from https://piccalil.li/blog/a-more-modern-css-reset/ */\n\n /* Box sizing rules */\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n /* Prevent font size inflation */\n html {\n /* stylelint-disable property-no-vendor-prefix */\n -moz-text-size-adjust: none;\n -webkit-text-size-adjust: none;\n /* stylelint-enable property-no-vendor-prefix */\n text-size-adjust: none;\n }\n\n /* Remove default margin in favour of better control in authored CSS */\n body, h1, h2, h3, h4, p,\n figure, blockquote, dl, dd {\n margin-block-end: 0;\n }\n\n /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */\n ul[role='list'],\n ol[role='list'] {\n list-style: none;\n }\n\n /* Set core body defaults */\n body {\n line-height: 1.5;\n }\n\n /* Set shorter line heights on headings and interactive elements */\n h1, h2, h3, h4,\n button, input, label {\n line-height: 1.1;\n }\n\n /* Balance text wrapping on headings */\n h1, h2,\n h3, h4 {\n text-wrap: balance;\n }\n\n /* A elements that don't have a class get default styles */\n a:not([class]) {\n text-decoration-skip-ink: auto;\n color: currentcolor;\n }\n\n /* Make images easier to work with */\n img,\n picture {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n /* Inherit fonts for inputs and buttons */\n input, button,\n textarea, select {\n font-family: inherit;\n font-size: inherit;\n }\n\n /* Make sure textareas without a rows attribute are not tiny */\n textarea:not([rows]) {\n min-height: 10em;\n }\n\n /* Anything that has been anchored to should have extra scroll margin */\n :target {\n scroll-margin-block: 5ex;\n }\n\n /* Disable view transition animations for users who don’t want them */\n @media (prefers-reduced-motion) {\n ::view-transition-group(*),\n ::view-transition-old(*),\n ::view-transition-new(*) {\n animation: none !important;\n }\n }\n}\n","@layer components {\n .pagination {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n\n div {\n display: flex;\n flex-direction: row;\n gap: 1ex;\n }\n }\n}\n","@layer components {\n #theme-selector {\n button {\n appearance: none;\n border: none;\n background: none;\n\n &:hover {\n cursor: pointer;\n }\n }\n\n /* This is the element with the [popover] attribute */\n #theme-selector-dropdown {\n position: absolute;\n position-area: block-end span-inline-start;\n margin: 0;\n border: 2px solid var(--clr-border);\n background-color: var(--clr-background);\n color: var(--clr-text);\n\n fieldset {\n border: 0;\n display: flex;\n flex-direction: row;\n gap: 1ch;\n\n input {\n display: none;\n }\n }\n }\n\n /*\n * This is the element with the [popover] attribute\n * Here we are styling the open and closing animations\n */\n @media (prefers-reduced-motion: no-preference) {\n #theme-selector-dropdown {\n &:popover-open {\n transform: translateY(0) scale(1);\n opacity: 1;\n\n /*\n * Start styles for the opening transition.\n * Added to :popover-open, but after the opened styles.\n */\n @starting-style {\n transform: translateY(30px) scale(0);\n opacity: 0;\n }\n }\n\n /*\n * End styles for the closing transition.\n */\n transform: translateY(0) scale(0);\n opacity: 0;\n\n /*\n * Enumerate transitioning properties, including display and overlay.\n */\n transition: transform, opacity, display allow-discrete, overlay allow-discrete;\n transition-duration: 0.5s;\n transform-origin: top right;\n }\n }\n }\n\n ::view-transition-group(changing-theme) {\n animation-duration: 1.25s;\n }\n\n ::view-transition-new(changing-theme),\n ::view-transition-old(changing-theme) {\n mix-blend-mode: normal;\n }\n\n ::view-transition-new(changing-theme) {\n animation-name: reveal;\n }\n\n ::view-transition-old(changing-theme) {\n animation: none;\n }\n\n @keyframes reveal {\n from {\n clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);\n }\n\n to {\n clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);\n }\n }\n}\n","@layer components {\n .token-list {\n width: 100%;\n border-collapse: collapse;\n margin-block-start: 1em;\n\n th,\n td {\n text-align: left;\n padding: 0.6em 0.8em;\n border-bottom: 1px solid var(--clr-border);\n vertical-align: middle;\n }\n\n th {\n font-size: 0.85em;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n opacity: 0.7;\n }\n\n tr.is-revoked {\n opacity: 0.6;\n }\n\n a {\n word-break: break-all;\n }\n }\n\n .badge,\n .token-list button.revoke {\n display: inline-block;\n padding: 0.2em 0.7em;\n border-radius: 999px;\n font-size: 0.85em;\n line-height: 1.5;\n white-space: nowrap;\n }\n\n .badge {\n background: transparent;\n border: 1px solid currentcolor;\n }\n\n .badge-active {\n color: light-dark(oklch(35% 0.16 145deg), oklch(75% 0.16 145deg));\n }\n\n .badge-revoked {\n color: var(--clr-text);\n }\n\n .token-list button.revoke {\n background: light-dark(oklch(92% 0.15 25deg), oklch(30% 0.12 25deg));\n color: light-dark(oklch(30% 0.15 25deg), oklch(92% 0.12 25deg));\n border: 1px solid transparent;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n\n .token-list button.revoke:hover {\n background: light-dark(oklch(80% 0.2 25deg), oklch(45% 0.18 25deg));\n }\n}\n","@layer components {\n .note {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--clr-border);\n border-radius: var(--border-radius);\n padding: 1ex 2ex;\n\n .e-content {\n > p:first-child {\n margin-block-start: 0;\n }\n\n .u-photo {\n width: 100%;\n height: auto;\n }\n }\n\n .syndication-links {\n display: flex;\n flex-direction: row;\n gap: 1ex;\n\n svg {\n border-radius: 4px;\n width: auto;\n height: 1lh;\n }\n }\n }\n\n .reply-to {\n font-size: 85%;\n margin-inline: 2ex;\n padding-inline: 1ex;\n border: 1px solid var(--clr-border);\n border-bottom: none;\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n}\n","@layer components {\n body > header {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto;\n align-items: baseline;\n gap: 1rem;\n\n a {\n text-decoration: none;\n }\n\n h1 {\n margin: 0;\n text-wrap: nowrap;\n }\n\n nav {\n display: flex;\n flex-direction: row;\n gap: .5rem;\n\n @media screen and (width <= 1100px) {\n grid-row: 2;\n grid-column: 1 / span 3;\n flex-wrap: wrap;\n }\n }\n }\n}\n"],"names":[]} \ No newline at end of file +{"version":3,"mappings":"AACA,aCGE,uCAOA,oFASA,8DAMA,4CAMA,qBAKA,+CAMA,8BAMA,gEAMA,qDAQA,mEAOA,qCAKA,gCAKA,gCACE,wGDhFJ,YEAE,oaAwBA,kECxBA,0BAIA,oBAIA,iIAME,0BAIA,mEAKE,oBAIA,gCAKF,iDAIE,yEAME,uBAON,oDHjDF,kBGyDE,SACE,oBC1DF,wHAOE,yBAIA,+BAKA,gDAKE,kCAAqC,2CGrBzC,+HAOE,aACE,qCAIA,mCAMF,6DAKE,gDAQJ,4MD/BA,sFAME,+CENF,gBACE,oDAKE,wBAMF,gMAQE,4DAME,uBAUJ,8CACE,2BACE,yDAQE,gBAAiB,8CAST,0KAahB,iEAIA,kGAKA,4DAIA,qDAIA,mIHrFA,iNAWA,mFAME,6GAQA,6FAQA,2BAIA,yBAIA,4CAKA,8CAKA,8CAKA,8CAKA,+DAMA,uCAKF,kDAMA,qMAYA,0LAaA,uCAKA,sEAGE,uEAQF,gDAKA,kNAQA","sources":["resources/css/app.css","resources/css/colours.css","resources/css/reset.css","resources/css/layout.css","resources/css/admin-tokens.css","resources/css/header.css","resources/css/pagination.css","resources/css/notes.css","resources/css/theme-selector.css"],"sourcesContent":["/* First thing we need to do is declare our cascade layers */\n@layer reset, base, components;\n\n@import url('reset.css');\n@import url('colours.css');\n@import url('layout.css');\n@import url('header.css');\n@import url('notes.css');\n@import url('pagination.css');\n@import url('theme-selector.css');\n@import url('admin-tokens.css');\n","@layer base {\n :root {\n color-scheme: light dark;\n\n --primary-hue: 307;\n --clr-text: light-dark(\n oklch(5% 0.1 var(--primary-hue)),\n oklch(100% 0.1 var(--primary-hue))\n );\n --clr-background: light-dark(\n oklch(100% 0.1 var(--primary-hue)),\n oklch(15% 0.15 var(--primary-hue))\n );\n --clr-border: light-dark(\n oklch(90% 0.2 var(--primary-hue)),\n oklch(25% 0.1 var(--primary-hue))\n );\n\n /* Adding snow fall colour whilst we are using it */\n --clr-snow-fall: light-dark(\n oklch(25% 0.15 var(--primary-hue)),\n oklch(85% 0.2 var(--primary-hue))\n );\n }\n\n body {\n background-color: var(--clr-background);\n color: var(--clr-text);\n }\n}\n","@layer reset {\n /* Sourced from https://piccalil.li/blog/a-more-modern-css-reset/ */\n\n /* Box sizing rules */\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n /* Prevent font size inflation */\n html {\n /* stylelint-disable property-no-vendor-prefix */\n -moz-text-size-adjust: none;\n -webkit-text-size-adjust: none;\n /* stylelint-enable property-no-vendor-prefix */\n text-size-adjust: none;\n }\n\n /* Remove default margin in favour of better control in authored CSS */\n body, h1, h2, h3, h4, p,\n figure, blockquote, dl, dd {\n margin-block-end: 0;\n }\n\n /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */\n ul[role='list'],\n ol[role='list'] {\n list-style: none;\n }\n\n /* Set core body defaults */\n body {\n line-height: 1.5;\n }\n\n /* Set shorter line heights on headings and interactive elements */\n h1, h2, h3, h4,\n button, input, label {\n line-height: 1.1;\n }\n\n /* Balance text wrapping on headings */\n h1, h2,\n h3, h4 {\n text-wrap: balance;\n }\n\n /* A elements that don't have a class get default styles */\n a:not([class]) {\n text-decoration-skip-ink: auto;\n color: currentcolor;\n }\n\n /* Make images easier to work with */\n img,\n picture {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n /* Inherit fonts for inputs and buttons */\n input, button,\n textarea, select {\n font-family: inherit;\n font-size: inherit;\n }\n\n /* Make sure textareas without a rows attribute are not tiny */\n textarea:not([rows]) {\n min-height: 10em;\n }\n\n /* Anything that has been anchored to should have extra scroll margin */\n :target {\n scroll-margin-block: 5ex;\n }\n\n /* Disable view transition animations for users who don’t want them */\n @media (prefers-reduced-motion) {\n ::view-transition-group(*),\n ::view-transition-old(*),\n ::view-transition-new(*) {\n animation: none !important;\n }\n }\n}\n","@layer base {\n :root {\n --border-radius: 8px;\n }\n\n html {\n font-size: 125%;\n }\n\n body {\n display: grid;\n grid-template-columns: 1fr min(80ch, 80vw) 1fr;\n grid-template-rows: min-content 1fr min-content;\n padding-inline: 4vw;\n\n > header {\n grid-column: 1/-1;\n }\n\n > main {\n grid-column: 1/-1;\n display: grid;\n grid-template-columns: subgrid;\n\n > * {\n grid-column: 2/3;\n }\n\n > .full-bleed {\n grid-column: 1/-1;\n }\n }\n\n > footer {\n grid-column: 1/-1;\n margin-block-start: 2ex;\n\n search form {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 1ex;\n\n input {\n min-width: 0;\n }\n }\n }\n }\n\n .h-feed {\n display: flex;\n flex-direction: column;\n gap: 2ex;\n }\n}\n\n@layer components {\n .h-entry {\n pre {\n padding: 1rem;\n }\n }\n}\n\n","@layer components {\n .token-list-wrapper {\n margin-block-start: 1em;\n border: 1px solid var(--clr-border);\n border-radius: 16px;\n overflow: auto hidden;\n background: light-dark(\n oklch(99% 0.02 var(--primary-hue)),\n oklch(22% 0.05 var(--primary-hue))\n );\n }\n\n .token-list {\n width: 100%;\n min-width: 640px;\n table-layout: fixed;\n border-collapse: collapse;\n\n th,\n td {\n text-align: left;\n padding: 0.9em 1.2em;\n border-bottom: 1px solid var(--clr-border);\n vertical-align: middle;\n }\n\n th {\n font-size: 0.8em;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n opacity: 0.7;\n }\n\n tr.is-revoked {\n opacity: 0.6;\n }\n\n a {\n word-break: break-all;\n }\n\n th:nth-child(1),\n td:nth-child(1) {\n width: 31%;\n }\n\n th:nth-child(2),\n td:nth-child(2) {\n width: 24%;\n }\n\n th:nth-child(3),\n td:nth-child(3) {\n width: 15%;\n }\n\n th:nth-child(4),\n td:nth-child(4) {\n width: 16%;\n }\n\n th:nth-child(5),\n td:nth-child(5) {\n width: 14%;\n text-align: right;\n }\n\n tr:last-child td {\n border-bottom: none;\n }\n }\n\n .scope-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 0.4em;\n }\n\n .scope-chip {\n display: inline-block;\n padding: 0.2em 0.7em;\n border-radius: 999px;\n background: light-dark(\n oklch(92% 0.05 var(--primary-hue)),\n oklch(35% 0.08 var(--primary-hue))\n );\n font-size: 0.85em;\n white-space: nowrap;\n }\n\n .badge,\n .token-list button.revoke {\n display: inline-flex;\n align-items: center;\n gap: 0.4em;\n padding: 0.3em 0.8em;\n border-radius: 999px;\n font-size: 0.85em;\n font-weight: 600;\n line-height: 1.5;\n white-space: nowrap;\n }\n\n .badge {\n background: transparent;\n border: 1px solid currentcolor;\n }\n\n .badge-active {\n color: light-dark(oklch(35% 0.16 145deg), oklch(75% 0.16 145deg));\n\n .dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: currentcolor;\n }\n }\n\n .badge-revoked {\n color: var(--clr-text);\n opacity: 0.7;\n }\n\n .token-list button.revoke {\n background: light-dark(oklch(92% 0.15 25deg), oklch(30% 0.12 25deg));\n color: light-dark(oklch(30% 0.15 25deg), oklch(92% 0.12 25deg));\n border: 1px solid transparent;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n\n .token-list button.revoke:hover {\n background: light-dark(oklch(80% 0.2 25deg), oklch(45% 0.18 25deg));\n }\n}\n","@layer components {\n body > header {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto;\n align-items: baseline;\n gap: 1rem;\n\n a {\n text-decoration: none;\n }\n\n h1 {\n margin: 0;\n text-wrap: nowrap;\n }\n\n nav {\n display: flex;\n flex-direction: row;\n gap: .5rem;\n\n @media screen and (width <= 1100px) {\n grid-row: 2;\n grid-column: 1 / span 3;\n flex-wrap: wrap;\n }\n }\n }\n}\n","@layer components {\n .pagination {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n\n div {\n display: flex;\n flex-direction: row;\n gap: 1ex;\n }\n }\n}\n","@layer components {\n .note {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--clr-border);\n border-radius: var(--border-radius);\n padding: 1ex 2ex;\n\n .e-content {\n > p:first-child {\n margin-block-start: 0;\n }\n\n .u-photo {\n width: 100%;\n height: auto;\n }\n }\n\n .syndication-links {\n display: flex;\n flex-direction: row;\n gap: 1ex;\n\n svg {\n border-radius: 4px;\n width: auto;\n height: 1lh;\n }\n }\n }\n\n .reply-to {\n font-size: 85%;\n margin-inline: 2ex;\n padding-inline: 1ex;\n border: 1px solid var(--clr-border);\n border-bottom: none;\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n}\n","@layer components {\n #theme-selector {\n button {\n appearance: none;\n border: none;\n background: none;\n\n &:hover {\n cursor: pointer;\n }\n }\n\n /* This is the element with the [popover] attribute */\n #theme-selector-dropdown {\n position: absolute;\n position-area: block-end span-inline-start;\n margin: 0;\n border: 2px solid var(--clr-border);\n background-color: var(--clr-background);\n color: var(--clr-text);\n\n fieldset {\n border: 0;\n display: flex;\n flex-direction: row;\n gap: 1ch;\n\n input {\n display: none;\n }\n }\n }\n\n /*\n * This is the element with the [popover] attribute\n * Here we are styling the open and closing animations\n */\n @media (prefers-reduced-motion: no-preference) {\n #theme-selector-dropdown {\n &:popover-open {\n transform: translateY(0) scale(1);\n opacity: 1;\n\n /*\n * Start styles for the opening transition.\n * Added to :popover-open, but after the opened styles.\n */\n @starting-style {\n transform: translateY(30px) scale(0);\n opacity: 0;\n }\n }\n\n /*\n * End styles for the closing transition.\n */\n transform: translateY(0) scale(0);\n opacity: 0;\n\n /*\n * Enumerate transitioning properties, including display and overlay.\n */\n transition: transform, opacity, display allow-discrete, overlay allow-discrete;\n transition-duration: 0.5s;\n transform-origin: top right;\n }\n }\n }\n\n ::view-transition-group(changing-theme) {\n animation-duration: 1.25s;\n }\n\n ::view-transition-new(changing-theme),\n ::view-transition-old(changing-theme) {\n mix-blend-mode: normal;\n }\n\n ::view-transition-new(changing-theme) {\n animation-name: reveal;\n }\n\n ::view-transition-old(changing-theme) {\n animation: none;\n }\n\n @keyframes reveal {\n from {\n clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);\n }\n\n to {\n clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);\n }\n }\n}\n"],"names":[]} \ No newline at end of file diff --git a/public/assets/css/app.css.zst b/public/assets/css/app.css.zst index 72d74415073995b6a8e3de562975b98edab3f986..d7479672cf281dfbba69bb5d09034c9262bf0692 100644 GIT binary patch delta 2008 zcmaFFdyAh>W2^q(lz7opJBF-~4}25(r0S2HW%}#>|4ziUO{-QZF9^BE@QC37!=E?D z%ARyjd>Q`hx$nv2Y9CzZT{~@gGoN?2(VcVCFaDY{<$(qN;(L2fOxhBDUoKVV<6UO` z+k3OlsL%186>nI5V*88gE2__{zumm0%a@gULrP&@zWK=s(mk8p-!Sh!IN@j4spBVp z#+&9{v3XOkc|1F7YmUXwU2jrkYHBAq9Dd20P%8T@WxeYB!lUH(NgG z{_twjnYOS0IwddLEzdJ>J6LzU>}d6&3l1Cq>%Od*u=Lu$JCo{7=Hz^_)C?(pw@OCE z)A`NZ{Z;;~eAi14A8Xn$OUjigC?h1)u8)=Pdt_&OrFGt_1CCt|Vm|wxPB?G5?2=HU z1y5TRAM?RgJyVzb_@be|d*jvf6WqSv`53^q`fBl;?7OZ}Vn;d@dVC@kS11;Jy0~Mb z!Re-gHVyy9DlQzW4jy;Wsc-K+7`S2G3e&>A^Dm<=9lohKp)_aJ)zo^w^ljSa@Am5d ztiAMu>4^GGwlJ>7$O&F9C^$fH^6yW!0+#nG;`b(3JPG z+_31*jeiEW{iZh0-LY0b+D|IId6}!}^@(2&YgntipME!jmqCb&>*)=X&Zy``b=OaE zGI5CLESMr(@;NKawZVz$z}}t=M#EK)Etpg?8x>TG-uV_RnxB{0A=ba?!;Q8*`Fqwp zvEb%utN z?ZLNWT@i5`_&!OM%d~kMzF;ut*Zm36rODbGrDwGX7FC~@akecL;}&}DCAn+bp3YiR zb)N9UZ2PCay|Y+N^PBQQZhsa_Ufz3Kz9rWc&;MCoC~>sj>BP$!2RtRe`iR$VxXE%{ zYpe2alb7v{ZCf_?=_tCF2Yq_9R`7}q-$};C(<>S`26?%-xTtt?O*)pyVc6xFp?L4n z0h4nwSKb^|;o_<@GY@%nNtcwB{|FlNtA@;fvMBhi|h5-nRuF`ugF(f_APwM`wh! zZalKwQH(q8634}vTn1rh)^qW>iv-Ag+4SJ*SJgFK%NTYP@!UBOe2&w6RddsW`QB_R z6}azAlfG8TpvHK9qDPef=LOrMx2~7|x>951g6*QFoWDG>!@qL9{=2~=vEHAr_!^t9 z0PmguTW0LFS;4Pi#k}{Ta`vLl^J~sCW|!uKXBNa?sWfEXf7bHvtlks$OQkysorJu$ zrs`Q7IPfXvrgczHpt_p?>)SRJXXDDPrvxgJ7T*4_W&adAo79UopRc~JQhU?!%D|LG zuASBU!|R}V&jjq6yK2|>`=$mcANW_#XnrSW!Ik4$Ik}gF+l*_o1oT)+-~PEiyT6y? zPTsU>OG^{v(M?62Vk)^t!MR&!+0PF;$HTLmQQ@n{m9=? zZ+x@Gc*^~6D$=)~$x1QzW^))jn6bxR{%*g@ykJ#)l#9 z9gEcl3Esf(vm0lY&1Rg*)?|>jZ%)Y>&cC8{8=~u5kBO>qedyeL_T39R<>v_p^P>3- z18x7!IC$fC)~-ipZtFkQyqzx0+;&-ul( zzCFokH2mxo9P>EBdr1W&m(uk`F~2Up5;?Z<_3Adv^;uO%rX4*#^z}8 zyC0Z^Q!OjIP2G5SSd1DqwF0W|)}BySm~wjSm9{wwe)Cp;S{Yq06vgzlx7zRB9+{Qj z9Sf|ib5721e~_Ulq7YcMPjus6#=dm+n#WURBWC5#zQ4tl`+$j)xOtM2M{S9-STFl|y5qCM4h{xQcHHb6Sk%uo`>Q_cP_=5k nXXAA5N3DrT=GKkNij_9K)Oq+kCf@G%x#R7#(n5`n-0TDZuSd;a delta 1758 zcmcb`|A?1QW2^q(lxD%DW(-n(M|dalN!6$5u>F3t{mzV?YgT1(ScslyxX5stLBD8A z+_@8V**8ibmhJ1g_Iv@O?_-0Pce`~we}8#<@u=W^-w&JaEY)dp#v>GN0AbkF%8{8&$-eeaVB-L=zr)#Inn zFy|X1{W2{@}Osbu$WD)mw(!a0oFTOaj$zWf}^zEN-Ch+}K+p|k$bK+k6q-|TyuaM3O z+;D$uY^A@15=ZP+#z|ie-}|X8qAAp0Bf~GVZnF^I=dwGO8ta)w8g&eQPII<d(|)kc03KAi~E-@Wnb`3Y{{?>r1(TYb6sO?E76(6z%64ks>l`9#iNp7`*| z;zH+05!Q!1fqaYEbOeH$`#U4}q@5Qh*m`DvnzN48cFx?UHOby<^?nyyZI0bp_`de! z`^m?|73@x$UAlB|rv?{Cy_IkI9<7`8uD={5HlOM_T{=7F_o{n=)~*_L>y(?cU$RCE z_~l=%vz{~m?v36WL!-Y=|M#f=yureD`P8!Fi_M``u`6rC*?+tK4Q`hFVz4$VNL%^x z#g}<|J!hVO6}a>km%Cg)62U(I%C+!%!Nu%++h)3ZN(Ct#wY6A1Dd6}w|CIrg zGJRF%99itKB6$IWljTXTvg*~`Y=<@_23t+C+7M*E&HBu?;L;7k+rOrs_I#Yv|GID5 zkvnde_!hru*b`rtZ2E1#s$|yN^SYjgPq@|3pEzk&F@q3SS5e9gm$kZq`?H_6FtYMU zSv*-hMZDy*XM+>dfxSJfZn?AE7+5sVU;bdibvWr@Ad3iZ<^76C4YR|_3we2Y@BUxX zkvgr+BG2L5gKx*WBFZKl|Iu{Nz@Tf{Kl7GdMW2_I?Aj>V)8*Tc`QlFZgxl56#9k&_ z3%vG{tiM)wCVidpf335NA~-B%g)KBE&wIIu-^_Z!##Lo0{c3+5E=(x9Hc|D-3qP|Q zos-?$_2iBfdQ7{umOHKJ_0O2Bm-TtBYAtK7ESgp=%FEo|F#f+dDx0L!HO1NNhi)1p;u=8t}vazJBw5P@3~DObzyUgUtgH@lKbU^ za&gl$6FhwKd^watIX z^_7La_m=LX*!i&+b{~7O=I`O-s!6K$!K>~*Vfj%J9lmD8G7bOm@bDG0mDaL`MjQD> zty<#vV|Sp}$pyVaw^^TQPiwJyYP8Bav7F0vj;ON!oGaIoCfRg^6kNYv&mwguu zX0_j+8YOqj2;KM)#Wvya6Mhl5i|J2Xw36#iJl?Cv+H&S`6_XxU28Rl(%M#ZmlL}s1 z^0meGSM{7IQ?BDPJ5#yttpxXK&BcY4r!{@p{+|4*!vFEXM6YW*4!)dJeUmYx=u*&@ zdd(|M*Ys%LjE^S zCw7H@?Q_2Eb8mGNP+S_hJW71AG+$QpU!Ri&65Dv@z25q5foH*c8y~Go>wLa;`MQ}$=bihOtt9g7aQQzw5#iNL0S2a40FG8ps{jB1 diff --git a/resources/css/admin-tokens.css b/resources/css/admin-tokens.css index 42d83b13..a0db29e5 100644 --- a/resources/css/admin-tokens.css +++ b/resources/css/admin-tokens.css @@ -1,21 +1,34 @@ @layer components { + .token-list-wrapper { + margin-block-start: 1em; + border: 1px solid var(--clr-border); + border-radius: 16px; + overflow: auto hidden; + background: light-dark( + oklch(99% 0.02 var(--primary-hue)), + oklch(22% 0.05 var(--primary-hue)) + ); + } + .token-list { width: 100%; + min-width: 640px; + table-layout: fixed; border-collapse: collapse; - margin-block-start: 1em; th, td { text-align: left; - padding: 0.6em 0.8em; + padding: 0.9em 1.2em; border-bottom: 1px solid var(--clr-border); vertical-align: middle; } th { - font-size: 0.85em; + font-size: 0.8em; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.03em; + letter-spacing: 0.08em; opacity: 0.7; } @@ -26,14 +39,65 @@ a { word-break: break-all; } + + th:nth-child(1), + td:nth-child(1) { + width: 31%; + } + + th:nth-child(2), + td:nth-child(2) { + width: 24%; + } + + th:nth-child(3), + td:nth-child(3) { + width: 15%; + } + + th:nth-child(4), + td:nth-child(4) { + width: 16%; + } + + th:nth-child(5), + td:nth-child(5) { + width: 14%; + text-align: right; + } + + tr:last-child td { + border-bottom: none; + } + } + + .scope-chips { + display: flex; + flex-wrap: wrap; + gap: 0.4em; + } + + .scope-chip { + display: inline-block; + padding: 0.2em 0.7em; + border-radius: 999px; + background: light-dark( + oklch(92% 0.05 var(--primary-hue)), + oklch(35% 0.08 var(--primary-hue)) + ); + font-size: 0.85em; + white-space: nowrap; } .badge, .token-list button.revoke { - display: inline-block; - padding: 0.2em 0.7em; + display: inline-flex; + align-items: center; + gap: 0.4em; + padding: 0.3em 0.8em; border-radius: 999px; font-size: 0.85em; + font-weight: 600; line-height: 1.5; white-space: nowrap; } @@ -45,10 +109,18 @@ .badge-active { color: light-dark(oklch(35% 0.16 145deg), oklch(75% 0.16 145deg)); + + .dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: currentcolor; + } } .badge-revoked { color: var(--clr-text); + opacity: 0.7; } .token-list button.revoke { diff --git a/resources/css/layout.css b/resources/css/layout.css index dc5f753f..44fda96f 100644 --- a/resources/css/layout.css +++ b/resources/css/layout.css @@ -18,7 +18,17 @@ } > main { - grid-column: 2/3; + grid-column: 1/-1; + display: grid; + grid-template-columns: subgrid; + + > * { + grid-column: 2/3; + } + + > .full-bleed { + grid-column: 1/-1; + } } > footer { diff --git a/resources/views/admin/tokens/index.blade.php b/resources/views/admin/tokens/index.blade.php index fe787ad9..c9443e29 100644 --- a/resources/views/admin/tokens/index.blade.php +++ b/resources/views/admin/tokens/index.blade.php @@ -7,41 +7,49 @@ @if($tokens->isEmpty())

No tokens have been issued.

@else - - - - - - - - - - - - @foreach($tokens as $token) - - - - - - - - @endforeach - -
ClientScopeIssuedStatusAction
{{ $token->client_id }}{{ $token->scope }} - @if($token->isRevoked) - Revoked {{ $token->revoked_at->diffForHumans() }} - @else - Active - @endif - - @unless($token->isRevoked) -
- {{ csrf_field() }} - {{ method_field('PUT') }} - -
- @endunless -
+
+ + + + + + + + + + + + @foreach($tokens as $token) + + + + + + + + @endforeach + +
ClientScopeIssuedStatusAction
{{ $token->client_id }} + + @foreach(explode(' ', $token->scope) as $scope) + {{ $scope }} + @endforeach + + + @if($token->isRevoked) + Revoked {{ $token->revoked_at->diffForHumans() }} + @else + Active + @endif + + @unless($token->isRevoked) +
+ {{ csrf_field() }} + {{ method_field('PUT') }} + +
+ @endunless +
+
@endif @stop -- 2.55.0