cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: photo/video capture-date pipeline + premium UI/UX overhaul

Browse Source 
Backend — Photos timeline now groups by real capture date instead of upload time. New MediaMetadataService (FileLifecycleHook) extracts EXIF DateTimeOriginal from images and container creation_time from videos (mov/mp4/mkv) via nom-exif, timezone-correct (OffsetTimeOriginal), persisting captured_at so the existing media_sort_date trigger takes over. Adds POST /admin/photos/metadata/reextract to backfill existing media. Falls back to upload date when no embedded date exists.

Frontend — premium grid cards: combined metadata line (relative date · size, owner avatar when shared), custom selection checkbox with a clear checked state, uniform full-width 4:3 thumbnail tiles independent of filename length, centered file-type icons, and a hit-test fix so checkbox/star/kebab clicks reach the controls (the decorative thumbnail no longer captures pointer events). Notification messages internationalised across all 16 locales. Broader polish: design tokens, a11y/focus-visible states, brand + PWA assets.

Chore — bump semver-compatible dependencies (cargo upgrade); add nom-exif 3.6.1.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
DioCrafts
2026-06-15 00:17:17 +02:00
parent dac299fea6
commit 81a93a489b
129 changed files with 8194 additions and 2473 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.stylelintrc.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"files": ["statc/css/**/*.css"],
"files": ["static/css/**/*.css"],
"plugins": [
"stylelint-value-no-unknown-custom-properties"
],
Cargo.lock
Generated
+177 -254
View File
@@ -139,6 +139,15 @@ version = "1.0.102"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
[[package]]
name = "approx"
version = "0.5.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "cab112f0a86d568ea0e627cc1d6be74a1e9cd55214684db5561995f6dad897c6"
dependencies = [
"num-traits",
]
[[package]]
name = "arc-swap"
version = "1.9.1"
@@ -331,9 +340,9 @@ checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
[[package]]
name = "aws-config"
version = "1.8.16"
version = "1.8.18"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "50f156acdd2cf55f5aa53ee416c4ac851cf1222694506c0b1f78c85695e9ca9d"
checksum = "e33f815b73a3899c03b380d543532e5865f230dce9678d108dc10732a8682275"
dependencies = [
"aws-credential-types",
"aws-runtime",
@@ -345,6 +354,7 @@ dependencies = [
"aws-smithy-json",
"aws-smithy-runtime",
"aws-smithy-runtime-api",
"aws-smithy-schema",
"aws-smithy-types",
"aws-types",
"bytes",
@@ -395,9 +405,9 @@ dependencies = [
[[package]]
name = "aws-runtime"
version = "1.7.3"
version = "1.7.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5dcd93c82209ac7413532388067dce79be5a8780c1786e5fae3df22e4dee2864"
checksum = "6c9b9de216a988dd54b754a82a7660cfe14cee4f6782ae4524470972fa0ccb39"
dependencies = [
"aws-credential-types",
"aws-sigv4",
@@ -423,10 +433,11 @@ dependencies = [
[[package]]
name = "aws-sdk-s3"
version = "1.131.0"
version = "1.136.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "fe1b8c5282bf859170836045296b3cd710b7573aceb909498366bb508a41058e"
checksum = "fbd03e531a7d981fba45114c5813a7565dd470a1bd3ef1188ca98c98ebdfc668"
dependencies = [
"arc-swap",
"aws-credential-types",
"aws-runtime",
"aws-sigv4",
@@ -458,10 +469,11 @@ dependencies = [
[[package]]
name = "aws-sdk-sso"
version = "1.98.0"
version = "1.102.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d69c77aafa20460c68b6b3213c84f6423b6e76dbf89accd3e1789a686ffd9489"
checksum = "8c82b3ac19f1431854f7ace3a7531674633e286bfdde21976893bfee36fd493b"
dependencies = [
"arc-swap",
"aws-credential-types",
"aws-runtime",
"aws-smithy-async",
@@ -482,10 +494,11 @@ dependencies = [
[[package]]
name = "aws-sdk-ssooidc"
version = "1.100.0"
version = "1.104.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1c7e7b09346d5ca22a2a08267555843a6a0127fb20d8964cb6ecfb8fdb190225"
checksum = "321000d2b4c5519ee573f73167f612efd7329322d9b26969ad1979f0427f1913"
dependencies = [
"arc-swap",
"aws-credential-types",
"aws-runtime",
"aws-smithy-async",
@@ -506,10 +519,11 @@ dependencies = [
[[package]]
name = "aws-sdk-sts"
version = "1.103.0"
version = "1.107.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c2249b81a2e73a8027c41c378463a81ec39b8510f184f2caab87de912af0f49b"
checksum = "3d0d328ba962af23ecfa3c9f23b98d3d35e325fa218d7f13d17a6bf522f8a560"
dependencies = [
"arc-swap",
"aws-credential-types",
"aws-runtime",
"aws-smithy-async",
@@ -531,9 +545,9 @@ dependencies = [
[[package]]
name = "aws-sigv4"
version = "1.4.3"
version = "1.4.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "68dc0b907359b120170613b5c09ccc61304eac3998ff6274b97d93ee6490115a"
checksum = "bae38512beae0ffee7010fc24e7a8a123c53efdfef42a61e80fda4882418dc71"
dependencies = [
"aws-credential-types",
"aws-smithy-eventstream",
@@ -541,15 +555,14 @@ dependencies = [
"aws-smithy-runtime-api",
"aws-smithy-types",
"bytes",
"crypto-bigint 0.5.5",
"crypto-bigint",
"form_urlencoded",
"hex",
"hmac 0.13.0",
"http 0.2.12",
"http 1.4.0",
"p256 0.11.1",
"p256",
"percent-encoding",
"ring",
"sha2 0.11.0",
"subtle",
"time",
@@ -570,9 +583,9 @@ dependencies = [
[[package]]
name = "aws-smithy-checksums"
version = "0.64.7"
version = "0.64.8"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "10efbbcec1e044b81600e2fc562a391951d291152d95b482d5b7e7132299d762"
checksum = "e9e8e65f4f81fcccdeb6c3eca2af17ac21d421a1786a26a394aecf421d616d3a"
dependencies = [
"aws-smithy-http",
"aws-smithy-types",
@@ -591,9 +604,9 @@ dependencies = [
[[package]]
name = "aws-smithy-eventstream"
version = "0.60.20"
version = "0.60.21"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "faf09d74e5e32f76b8762da505a3cd59303e367a664ca67295387baa8c1d7548"
checksum = "78d8391e65fcea47c586a22e1a41f173b38615b112b2c6b7a44e80cec3e6b706"
dependencies = [
"aws-smithy-types",
"bytes",
@@ -654,10 +667,12 @@ dependencies = [
[[package]]
name = "aws-smithy-json"
version = "0.62.5"
version = "0.62.7"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9648b0bb82a2eedd844052c6ad2a1a822d1f8e3adee5fbf668366717e428856a"
checksum = "701a947f4797e52a911e114a898667c746c39feea467bbd1abd7b3721f702ffa"
dependencies = [
"aws-smithy-runtime-api",
"aws-smithy-schema",
"aws-smithy-types",
]
@@ -682,15 +697,16 @@ dependencies = [
[[package]]
name = "aws-smithy-runtime"
version = "1.11.1"
version = "1.11.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "0504b1ab12debb5959e5165ee5fe97dd387e7aa7ea6a477bfd7635dfe769a4f5"
checksum = "b8e6f5caf6fea86f8c2206541ab5857cfcda9013426cdbe8fa0098b9e2d32182"
dependencies = [
"aws-smithy-async",
"aws-smithy-http",
"aws-smithy-http-client",
"aws-smithy-observability",
"aws-smithy-runtime-api",
"aws-smithy-schema",
"aws-smithy-types",
"bytes",
"fastrand 2.4.1",
@@ -707,9 +723,9 @@ dependencies = [
[[package]]
name = "aws-smithy-runtime-api"
version = "1.12.0"
version = "1.12.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b71a13df6ada0aafbf21a73bdfcdf9324cfa9df77d96b8446045be3cde61b42e"
checksum = "9db177daa6ba8afb9ee1aefcf548c907abcf52065e394ee11a92780057fe0e8c"
dependencies = [
"aws-smithy-async",
"aws-smithy-runtime-api-macros",
@@ -735,10 +751,21 @@ dependencies = [
]
[[package]]
name = "aws-smithy-types"
version = "1.4.7"
name = "aws-smithy-schema"
version = "0.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9d73dbfbaa8e4bc57b9045137680b958d274823509a360abfd8e1d514d40c95c"
checksum = "7442cb268338f0eb8278140a107c046756aa01093d8ef5e99628d34ae09c94f5"
dependencies = [
"aws-smithy-runtime-api",
"aws-smithy-types",
"http 1.4.0",
]
[[package]]
name = "aws-smithy-types"
version = "1.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "32b42fcf341259d85ca10fac9a2f6448a8ec691c6955a18e45bc3b71a85fab85"
dependencies = [
"base64-simd 0.8.0",
"bytes",
@@ -771,13 +798,14 @@ dependencies = [
[[package]]
name = "aws-types"
version = "1.3.15"
version = "1.3.16"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2f4bbcaa9304ea40902d3d5f42a0428d1bd895a2b0f6999436fb279ffddc58ac"
checksum = "d16bf10b03a3c01e6b3b7d47cd964e873ffe9e7d4e80fad16bd4c077cb068531"
dependencies = [
"aws-credential-types",
"aws-smithy-async",
"aws-smithy-runtime-api",
"aws-smithy-schema",
"aws-smithy-types",
"rustc_version",
"tracing",
@@ -934,12 +962,6 @@ dependencies = [
"time",
]
[[package]]
name = "base16ct"
version = "0.1.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "349a06037c7bf932dd7e7d1f653678b2038b9ad46a74102f1fc7bd7872678cce"
[[package]]
name = "base16ct"
version = "0.2.0"
@@ -1265,9 +1287,9 @@ checksum = "613afe47fcd5fac7ccf1db93babcb082c5994d996f20b8b159f2ad1658eb5724"
[[package]]
name = "chrono"
version = "0.4.44"
version = "0.4.45"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c673075a2e0e5f4a1dde27ce9dee1ea4558c7ffe648f576438a20ca1d2acc4b0"
checksum = "1aa79e62e7697b8e29b513a68abacf485adcd1fe8284a4316c5ae868e6633327"
dependencies = [
"iana-time-zone",
"js-sys",
@@ -1530,18 +1552,6 @@ version = "0.2.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "460fbee9c2c2f33933d720630a6a0bac33ba7053db5344fac858d4b8952d77d5"
[[package]]
name = "crypto-bigint"
version = "0.4.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ef2b4b23cddf68b89b8f8069890e8c270d54e2d5fe1b143820234805e4cb17ef"
dependencies = [
"generic-array",
"rand_core 0.6.4",
"subtle",
"zeroize",
]
[[package]]
name = "crypto-bigint"
version = "0.5.5"
@@ -1700,9 +1710,9 @@ dependencies = [
[[package]]
name = "dashmap"
version = "6.1.0"
version = "6.2.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5041cc499144891f3790297212f32a74fb938e5136a14943f338ef9e0ae276cf"
checksum = "e6361d5c062261c78a176addb82d4c821ae42bed6089de0e12603cd25de2059c"
dependencies = [
"cfg-if",
"crossbeam-utils",
@@ -1733,16 +1743,6 @@ version = "0.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c286de4e81ea2590afc24d754e0f83810c566f50a1388fa75ebd57928c0d9745"
[[package]]
name = "der"
version = "0.6.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f1a467a65c5e759bce6e65eaf91cc29f466cdc57cb65777bd646872a8a1fd4de"
dependencies = [
"const-oid 0.9.6",
"zeroize",
]
[[package]]
name = "der"
version = "0.7.10"
@@ -1859,30 +1859,18 @@ dependencies = [
"cipher",
]
[[package]]
name = "ecdsa"
version = "0.14.8"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "413301934810f597c1d19ca71c8710e99a3f1ba28a0d2ebc01551a2daeea3c5c"
dependencies = [
"der 0.6.1",
"elliptic-curve 0.12.3",
"rfc6979 0.3.1",
"signature 1.6.4",
]
[[package]]
name = "ecdsa"
version = "0.16.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ee27f32b5c5292967d2d4a9d7f1e0b0aed2c15daded5a60300e4abb9d8020bca"
dependencies = [
"der 0.7.10",
"der",
"digest 0.10.7",
"elliptic-curve 0.13.8",
"rfc6979 0.4.0",
"signature 2.2.0",
"spki 0.7.3",
"elliptic-curve",
"rfc6979",
"signature",
"spki",
]
[[package]]
@@ -1891,8 +1879,8 @@ version = "2.2.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "115531babc129696a58c64a4fef0a8bf9e9698629fb97e9e40767d235cfbcd53"
dependencies = [
"pkcs8 0.10.2",
"signature 2.2.0",
"pkcs8",
"signature",
]
[[package]]
@@ -1918,43 +1906,23 @@ dependencies = [
"serde",
]
[[package]]
name = "elliptic-curve"
version = "0.12.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e7bb888ab5300a19b8e5bceef25ac745ad065f3c9f7efc6de1b91958110891d3"
dependencies = [
"base16ct 0.1.1",
"crypto-bigint 0.4.9",
"der 0.6.1",
"digest 0.10.7",
"ff 0.12.1",
"generic-array",
"group 0.12.1",
"pkcs8 0.9.0",
"rand_core 0.6.4",
"sec1 0.3.0",
"subtle",
"zeroize",
]
[[package]]
name = "elliptic-curve"
version = "0.13.8"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b5e6043086bf7973472e0c7dff2142ea0b680d30e18d9cc40f267efbf222bd47"
dependencies = [
"base16ct 0.2.0",
"crypto-bigint 0.5.5",
"base16ct",
"crypto-bigint",
"digest 0.10.7",
"ff 0.13.1",
"ff",
"generic-array",
"group 0.13.0",
"group",
"hkdf",
"pem-rfc7468",
"pkcs8 0.10.2",
"pkcs8",
"rand_core 0.6.4",
"sec1 0.7.3",
"sec1",
"subtle",
"zeroize",
]
@@ -2111,16 +2079,6 @@ dependencies = [
"simd-adler32",
]
[[package]]
name = "ff"
version = "0.12.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d013fc25338cc558c5c2cfbad646908fb23591e2404481826742b651c9af7160"
dependencies = [
"rand_core 0.6.4",
"subtle",
]
[[package]]
name = "ff"
version = "0.13.1"
@@ -2371,6 +2329,17 @@ dependencies = [
"zeroize",
]
[[package]]
name = "geo-types"
version = "0.7.19"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "94776032c45f950d30a13af6113c2ad5625316c9abfbccee4dd5a6695f8fe0f5"
dependencies = [
"approx",
"num-traits",
"serde",
]
[[package]]
name = "getrandom"
version = "0.1.16"
@@ -2448,24 +2417,13 @@ version = "0.3.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "0cc23270f6e1808e30a928bdc84dea0b9b4136a8bc82338574f23baf47bbd280"
[[package]]
name = "group"
version = "0.12.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5dfbfb3a6cfbd390d5c9564ab283a0349b9b9fcd46a706c1eb10e0db70bfbac7"
dependencies = [
"ff 0.12.1",
"rand_core 0.6.4",
"subtle",
]
[[package]]
name = "group"
version = "0.13.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f0f9ef7462f7c099f518d754361858f86d8a07af53ba9af0fe635bbccb151a63"
dependencies = [
"ff 0.13.1",
"ff",
"rand_core 0.6.4",
"subtle",
]
@@ -2814,7 +2772,7 @@ dependencies = [
"libc",
"percent-encoding",
"pin-project-lite",
"socket2 0.6.3",
"socket2 0.5.10",
"tokio",
"tower-service",
"tracing",
@@ -2934,9 +2892,9 @@ checksum = "3d3067d79b975e8844ca9eb072e16b31c3c1c36928edf9c6789548c524d0d954"
[[package]]
name = "id3"
version = "1.16.4"
version = "1.17.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "965c5e6a62a241f2f673df956ea5f52c27780bc1031855890a551ed9b869e2d1"
checksum = "70d6d9f23a28c6feab60d7b4a339e004809019ec9d5fd964b3f4c655ff9bc141"
dependencies = [
"bitflags",
"byteorder",
@@ -3060,13 +3018,13 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d98f6fed1fde3f8c21bc40a1abb88dd75e67924f9cffc3ef95607bad8017f8e2"
[[package]]
name = "iri-string"
version = "0.7.12"
name = "iso6709parse"
version = "0.1.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "25e659a4bb38e810ebc252e53b5814ff908a8c58c2a9ce2fae1bbec24cbf4e20"
checksum = "b5090db9c6a716d1f4eeb729957e889e9c28156061c825cbccd44950cf0f3c66"
dependencies = [
"memchr",
"serde",
"geo-types",
"nom 7.1.3",
]
[[package]]
@@ -3123,16 +3081,16 @@ checksum = "35e770254dd7802184595b1d30da2a15cb72569e2aca2b177aef8d22eac8a693"
[[package]]
name = "jsonwebtoken"
version = "10.3.0"
version = "10.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "0529410abe238729a60b108898784df8984c87f6054c9c4fcacc47e4803c1ce1"
checksum = "eba32bfb4ffdeaca3e34431072faf01745c9b26d25504aa7a6cf5684334fc4fc"
dependencies = [
"base64 0.22.1",
"ed25519-dalek",
"getrandom 0.2.17",
"hmac 0.12.1",
"js-sys",
"p256 0.13.2",
"p256",
"p384",
"pem",
"rand 0.8.6",
@@ -3140,8 +3098,9 @@ dependencies = [
"serde",
"serde_json",
"sha2 0.10.9",
"signature 2.2.0",
"signature",
"simple_asn1",
"zeroize",
]
[[package]]
@@ -3189,7 +3148,7 @@ dependencies = [
"quoted_printable",
"rustls 0.23.40",
"rustls-native-certs",
"socket2 0.6.3",
"socket2 0.6.4",
"tokio",
"tokio-rustls 0.26.4",
"url",
@@ -3216,9 +3175,9 @@ checksum = "b6d2cec3eae94f9f509c767b45932f1ada8350c4bdb85af2fcab4a3c14807981"
[[package]]
name = "libmimalloc-sys"
version = "0.1.47"
version = "0.1.49"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2d1eacfa31c33ec25e873c136ba5669f00f9866d0688bea7be4d3f7e43067df6"
checksum = "6a45a52f43e1c16f667ccfe4dd8c85b7f7c204fd5e3bf46c5b0db9a5c3c0b8e9"
dependencies = [
"cc",
]
@@ -3428,9 +3387,9 @@ dependencies = [
[[package]]
name = "mimalloc"
version = "0.1.50"
version = "0.1.52"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b3627c4272df786b9260cabaa46aec1d59c93ede723d4c3ef646c503816b0640"
checksum = "2d4139bb28d14ad1facf21d5eb8825051b326e172d216b39f6d31df53cc97862"
dependencies = [
"libmimalloc-sys",
]
@@ -3591,6 +3550,21 @@ dependencies = [
"memchr",
]
[[package]]
name = "nom-exif"
version = "3.6.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "55d41fe63e6184159b55a57cc73651ec8dc60e5ce2d647cd16f373a27b82ff33"
dependencies = [
"bytes",
"chrono",
"iso6709parse",
"nom 8.0.0",
"regex",
"thiserror 2.0.18",
"tracing",
]
[[package]]
name = "nom_locate"
version = "5.0.0"
@@ -4123,7 +4097,7 @@ dependencies = [
"blake3",
"bytes",
"chrono",
"dashmap 6.1.0",
"dashmap 6.2.1",
"dotenvy",
"fastcdc",
"flate2",
@@ -4148,6 +4122,7 @@ dependencies = [
"mockall",
"moka",
"mp3-duration",
"nom-exif",
"oxc_allocator",
"oxc_codegen",
"oxc_minifier",
@@ -4156,7 +4131,7 @@ dependencies = [
"oxc_span",
"pdf-extract",
"percent-encoding",
"quick-xml 0.39.2",
"quick-xml 0.39.4",
"rand_core 0.6.4",
"rayon",
"reqwest",
@@ -4164,7 +4139,7 @@ dependencies = [
"serde_json",
"sha2 0.11.0",
"smol_str",
"socket2 0.6.3",
"socket2 0.6.4",
"sqlx",
"tantivy",
"tempfile",
@@ -4183,25 +4158,14 @@ dependencies = [
"zip",
]
[[package]]
name = "p256"
version = "0.11.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "51f44edd08f51e2ade572f141051021c5af22677e42b7dd28a88155151c33594"
dependencies = [
"ecdsa 0.14.8",
"elliptic-curve 0.12.3",
"sha2 0.10.9",
]
[[package]]
name = "p256"
version = "0.13.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c9863ad85fa8f4460f9c48cb909d38a0d689dba1f6f6988a5e3e0d31071bcd4b"
dependencies = [
"ecdsa 0.16.9",
"elliptic-curve 0.13.8",
"ecdsa",
"elliptic-curve",
"primeorder",
"sha2 0.10.9",
]
@@ -4212,8 +4176,8 @@ version = "0.13.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "fe42f1670a52a47d448f14b6a5c61dd78fce51856e68edaa38f7ae3a46b8d6b6"
dependencies = [
"ecdsa 0.16.9",
"elliptic-curve 0.13.8",
"ecdsa",
"elliptic-curve",
"primeorder",
"sha2 0.10.9",
]
@@ -4481,19 +4445,9 @@ version = "0.7.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c8ffb9f10fa047879315e6625af03c164b16962a5368d724ed16323b68ace47f"
dependencies = [
"der 0.7.10",
"pkcs8 0.10.2",
"spki 0.7.3",
]
[[package]]
name = "pkcs8"
version = "0.9.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9eca2c590a5f85da82668fa685c09ce2888b9430e83299debf1f34b65fd4a4ba"
dependencies = [
"der 0.6.1",
"spki 0.6.0",
"der",
"pkcs8",
"spki",
]
[[package]]
@@ -4502,8 +4456,8 @@ version = "0.10.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f950b2377845cebe5cf8b5165cb3cc1a5e0fa5cfa3e1f7f55707d8fd82e0a7b7"
dependencies = [
"der 0.7.10",
"spki 0.7.3",
"der",
"spki",
]
[[package]]
@@ -4645,7 +4599,7 @@ version = "0.13.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "353e1ca18966c16d9deb1c69278edbc5f194139612772bd9537af60ac231e1e6"
dependencies = [
"elliptic-curve 0.13.8",
"elliptic-curve",
]
[[package]]
@@ -4701,9 +4655,9 @@ dependencies = [
[[package]]
name = "quick-xml"
version = "0.39.2"
version = "0.39.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "958f21e8e7ceb5a1aa7fa87fab28e7c75976e0bfe7e23ff069e0a260f894067d"
checksum = "cdcc8dd4e2f670d309a5f0e83fe36dfdc05af317008fea29144da1a2ac858e5e"
dependencies = [
"memchr",
]
@@ -4721,7 +4675,7 @@ dependencies = [
"quinn-udp",
"rustc-hash",
"rustls 0.23.40",
"socket2 0.6.3",
"socket2 0.5.10",
"thiserror 2.0.18",
"tokio",
"tracing",
@@ -4758,7 +4712,7 @@ dependencies = [
"cfg_aliases",
"libc",
"once_cell",
"socket2 0.6.3",
"socket2 0.5.10",
"tracing",
"windows-sys 0.60.2",
]
@@ -5025,17 +4979,6 @@ dependencies = [
"webpki-roots 1.0.7",
]
[[package]]
name = "rfc6979"
version = "0.3.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7743f17af12fa0b03b803ba12cd6a8d9483a587e89c69445e3909655c0b9fabb"
dependencies = [
"crypto-bigint 0.4.9",
"hmac 0.12.1",
"zeroize",
]
[[package]]
name = "rfc6979"
version = "0.4.0"
@@ -5101,10 +5044,10 @@ dependencies = [
"num-integer",
"num-traits",
"pkcs1",
"pkcs8 0.10.2",
"pkcs8",
"rand_core 0.6.4",
"signature 2.2.0",
"spki 0.7.3",
"signature",
"spki",
"subtle",
"zeroize",
]
@@ -5262,30 +5205,16 @@ version = "4.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1c107b6f4780854c8b126e228ea8869f4d7b71260f962fefb57b996b8959ba6b"
[[package]]
name = "sec1"
version = "0.3.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3be24c1842290c45df0a7bf069e0c268a747ad05a192f2fd7dcfdbc1cba40928"
dependencies = [
"base16ct 0.1.1",
"der 0.6.1",
"generic-array",
"pkcs8 0.9.0",
"subtle",
"zeroize",
]
[[package]]
name = "sec1"
version = "0.7.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d3e97a565f76233a6003f9f5c54be1d9c5bdfa3eccfb189469f11ec4901c47dc"
dependencies = [
"base16ct 0.2.0",
"der 0.7.10",
"base16ct",
"der",
"generic-array",
"pkcs8 0.10.2",
"pkcs8",
"subtle",
"zeroize",
]
@@ -5372,9 +5301,9 @@ dependencies = [
[[package]]
name = "serde_json"
version = "1.0.149"
version = "1.0.150"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
checksum = "e8014e44b4736ed0538adeecded0fce2a272f22dc9578a7eb6b2d9993c74cfb9"
dependencies = [
"itoa",
"memchr",
@@ -5486,16 +5415,6 @@ dependencies = [
"libc",
]
[[package]]
name = "signature"
version = "1.6.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "74233d3b3b2f6d4b006dc19dee745e73e2a6bfb6f93607cd3b02bd5b00797d7c"
dependencies = [
"digest 0.10.7",
"rand_core 0.6.4",
]
[[package]]
name = "signature"
version = "2.2.0"
@@ -5597,9 +5516,9 @@ dependencies = [
[[package]]
name = "socket2"
version = "0.6.3"
version = "0.6.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3a766e1110788c36f4fa1c2b71b387a7815aa65f88ce0229841826633d93723e"
checksum = "52d1cfed4120b4d927bf7c0f86d2087a4a7d6027c906d9f9d525a80573b9be51"
dependencies = [
"libc",
"windows-sys 0.61.2",
@@ -5620,16 +5539,6 @@ version = "0.10.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d5fe4ccb98d9c292d56fec89a5e07da7fc4cf0dc11e156b41793132775d3e591"
[[package]]
name = "spki"
version = "0.6.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "67cf02bbac7a337dc36e4f5a693db6c21e7863f45070f7064577eb4367a3212b"
dependencies = [
"base64ct",
"der 0.6.1",
]
[[package]]
name = "spki"
version = "0.7.3"
@@ -5637,7 +5546,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d91ed6c858b01f942cd56b37a94b3e0a1798290327d1236e4d9cf4eaca44d29d"
dependencies = [
"base64ct",
"der 0.7.10",
"der",
]
[[package]]
@@ -6213,16 +6122,16 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
[[package]]
name = "tokio"
version = "1.52.1"
version = "1.52.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b67dee974fe86fd92cc45b7a95fdd2f99a36a6d7b0d431a231178d3d670bbcc6"
checksum = "8fc7f01b389ac15039e4dc9531aa973a135d7a4135281b12d7c1bc79fd57fffe"
dependencies = [
"bytes",
"libc",
"mio",
"pin-project-lite",
"signal-hook-registry",
"socket2 0.6.3",
"socket2 0.6.4",
"tokio-macros",
"windows-sys 0.61.2",
]
@@ -6301,9 +6210,9 @@ dependencies = [
[[package]]
name = "tower-http"
version = "0.6.8"
version = "0.6.11"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d4e6559d53cc268e5031cd8429d05415bc4cb4aefc4aa5d6cc35fbf5b924a1f8"
checksum = "4cfcf7e2740e6fc6d4d688b4ef00650406bb94adf4731e43c096c3a19fe40840"
dependencies = [
"async-compression",
"bitflags",
@@ -6315,7 +6224,6 @@ dependencies = [
"http-body-util",
"http-range-header",
"httpdate",
"iri-string",
"mime",
"mime_guess",
"percent-encoding",
@@ -6326,6 +6234,7 @@ dependencies = [
"tower-layer",
"tower-service",
"tracing",
"url",
"uuid",
]
@@ -6578,9 +6487,9 @@ checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
[[package]]
name = "utoipa"
version = "5.4.0"
version = "5.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2fcc29c80c21c31608227e0912b2d7fddba57ad76b606890627ba8ee7964e993"
checksum = "8bde15df68e80b16c7d16b9616e80770ad158988daa56a27dccd1e55558b0160"
dependencies = [
"indexmap",
"serde",
@@ -6590,9 +6499,9 @@ dependencies = [
[[package]]
name = "utoipa-gen"
version = "5.4.0"
version = "5.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "6d79d08d92ab8af4c5e8a6da20c47ae3f61a0f1dabc1997cdf2d082b757ca08b"
checksum = "6ba0b99ee52df3028635d93840c797102da61f8a7bb3cf751032455895b52ef8"
dependencies = [
"proc-macro2",
"quote",
@@ -6603,9 +6512,9 @@ dependencies = [
[[package]]
name = "uuid"
version = "1.23.1"
version = "1.23.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ddd74a9687298c6858e9b88ec8935ec45d22e8fd5e6394fa1bd4e99a87789c76"
checksum = "144d6b123cef80b301b8f72a9e2ca4370ddec21950d0a103dd22c437006d2db7"
dependencies = [
"getrandom 0.4.2",
"js-sys",
@@ -7355,6 +7264,20 @@ name = "zeroize"
version = "1.8.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b97154e67e32c85465826e8bcc1c59429aaaf107c1e4a9e53c8d8ccd5eff88d0"
dependencies = [
"zeroize_derive",
]
[[package]]
name = "zeroize_derive"
version = "1.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3c50655cbb0fe3fc43170059e702f1ce5e19b84cec58dc87b037a09935c2f328"
dependencies = [
"proc-macro2",
"quote",
"syn 2.0.117",
]
[[package]]
name = "zerotrie"
Cargo.toml
+24 -23
View File
@@ -6,46 +6,46 @@ default-run = "oxicloud"
[dependencies]
mimalloc = { version = "0.1.48", default-features = false }
mimalloc = { version = "0.1.52", default-features = false }
axum = { version = "0.8.9", features = ["multipart", "http1", "http2", "tokio", "macros"] }
tokio = { version = "1.52.0", features = ["rt-multi-thread", "macros", "io-util", "net", "time", "sync", "fs"] }
tokio = { version = "1.52.3", features = ["rt-multi-thread", "macros", "io-util", "net", "time", "sync", "fs"] }
tokio-util = { version = "0.7.18", features = ["io", "codec", "compat"] }
tokio-stream = { version = "0.1.18", features = ["fs"] }
bytes = "1.11.1"
tempfile = "3.26.0"
tempfile = "3.27.0"
tower = "0.5.3"
tower-http = { version = "0.6.8", features = ["fs", "compression-gzip", "compression-br", "trace", "cors", "add-extension", "request-id", "set-header", "limit"] }
tower-http = { version = "0.6.11", features = ["fs", "compression-gzip", "compression-br", "trace", "cors", "add-extension", "request-id", "set-header", "limit"] }
flate2 = "1.1.9"
tracing = "0.1.44"
tracing-subscriber = { version = "0.3.22", features = ["env-filter"] }
chrono = { version = "0.4.44", features = ["serde"] }
tracing-subscriber = { version = "0.3.23", features = ["env-filter"] }
chrono = { version = "0.4.45", features = ["serde"] }
http-body = "1.0.1"
serde = { version = "1.0.228", features = ["derive"] }
serde_json = "1.0.149"
serde_json = "1.0.150"
futures = "0.3.32"
async-stream = "0.3.6"
async-trait = "0.1.83"
async-trait = "0.1.89"
mime_guess = "2.0.5"
uuid = { version = "1.23.0", features = ["v4", "v7", "serde"] }
uuid = { version = "1.23.3", features = ["v4", "v7", "serde"] }
thiserror = "2.0.18"
mockall = { version = "0.14.0", optional = true }
sqlx = { version = "0.8.6", features = ["postgres", "runtime-tokio", "tls-rustls", "chrono", "uuid", "json", "migrate"] }
jsonwebtoken = { version = "10.3.0", features = ["rust_crypto"] }
jsonwebtoken = { version = "10.4.0", features = ["rust_crypto"] }
argon2 = "0.5.3"
rand_core = { version = "0.6", features = ["std", "getrandom"] }
quick-xml = "0.39.2"
quick-xml = "0.39.4"
dotenvy = "0.15.7"
moka = { version = "0.12.15", features = ["future", "sync"] }
http-range-header = "0.4"
image = { version = "0.25.10", default-features = false, features = ["jpeg", "png", "gif", "webp"] }
id3 = "1.14"
id3 = "1.17"
mp3-duration = "0.1"
kamadak-exif = "0.6.1"
md-5 = "0.11.0"
sha2 = "0.11.0"
unicode-normalization = "0.1.24"
blake3 = { version = "1.8.4", features = ["rayon", "mmap"] }
unicode-normalization = "0.1.25"
blake3 = { version = "1.8.5", features = ["rayon", "mmap"] }
hex = "0.4.3"
http-body-util = "0.1.3"
percent-encoding = "2.3.2"
@@ -54,15 +54,15 @@ base64 = "0.22.1"
fs2 = "0.4"
rayon = "1.12.0"
infer = "0.19"
async-compression = { version = "0.4.41", features = ["tokio", "gzip"] }
async-compression = { version = "0.4.42", features = ["tokio", "gzip"] }
async_zip = { version = "0.0.18", features = ["tokio", "deflate"] }
dashmap = "6.1.0"
socket2 = { version = "0.6.3", features = ["all"] }
dashmap = "6.2.1"
socket2 = { version = "0.6.4", features = ["all"] }
urlencoding = "2.1.3"
utoipa = { version = "5.4.0", features = ["axum_extras", "uuid", "chrono"] }
aws-sdk-s3 = "1.129.0"
aws-config = { version = "1.8.15", features = ["behavior-version-latest"] }
aws-smithy-types = "1.4.7"
utoipa = { version = "5.5.0", features = ["axum_extras", "uuid", "chrono"] }
aws-sdk-s3 = "1.136.0"
aws-config = { version = "1.8.18", features = ["behavior-version-latest"] }
aws-smithy-types = "1.5.0"
azure_core = { version = "0.21", default-features = false, features = ["enable_reqwest_rustls", "hmac_rust"] }
azure_storage = { version = "0.21", default-features = false, features = ["enable_reqwest_rustls", "hmac_rust"] }
azure_storage_blobs = { version = "0.21", default-features = false, features = ["enable_reqwest_rustls", "hmac_rust"] }
@@ -71,12 +71,13 @@ lru = "0.16.4"
fastcdc = { version = "4.0.0", features = ["tokio"] }
lettre = { version = "0.11.18", default-features = false, features = ["smtp-transport", "tokio1-rustls-tls", "rustls-native-certs", "builder"] }
idna = "1.1"
smol_str = { version = "0.3.2", features = ["serde"] }
smol_str = { version = "0.3.6", features = ["serde"] }
accept-language = "3.1.0"
askama = "0.16.0"
tantivy = "0.26.1"
zip = { version = "8.6.0", default-features = false, features = ["deflate"] }
pdf-extract = "0.10.0"
nom-exif = "3.6.1"
[features]
default = []
@@ -104,7 +105,7 @@ oxc_minifier = "0.125.0"
lightningcss = "1.0.0-alpha.71"
[profile.release]
lto = "fat"
lto = "thin"
codegen-units = 1
opt-level = 3
panic = "abort"
build.rs
+43 -2
View File
@@ -191,10 +191,16 @@ fn process_release(manifest_dir: &Path, static_dir: &Path, out_dir: &Path) {
minify_tree_js(&dist_dir.join("js"));
// ── 7. Rewrite index.html ────────────────────────────────────────────────
// Inline the tiny render-blocking theme-init.js (classic script) so the
// critical path drops a request. Other pages keep the external reference.
let theme_init_min = js_minify_script_safe(
&fs::read_to_string(static_dir.join("js/core/theme-init.js")).unwrap_or_default(),
);
let rewritten_index = rewrite_index_html(
&index_html,
&format!("/css/{css_name}"),
&format!("/js/{js_name}"),
&theme_init_min,
);
fs::write(dist_dir.join("index.html"), &rewritten_index).expect("write dist index.html");
@@ -1099,14 +1105,49 @@ fn json_minify(source: &str) -> String {
/// - Collapse all `<link stylesheet href="/css/…">` into the single CSS bundle.
/// - Replace all `<script type="module" src="…">` with the single JS bundle.
/// - Leave `theme-init.js` and `sw-register.js` as external src references.
fn rewrite_index_html(html: &str, css_path: &str, js_path: &str) -> String {
let mut out: Vec<String> = Vec::with_capacity(html.lines().count());
fn rewrite_index_html(html: &str, css_path: &str, js_path: &str, theme_init_js: &str) -> String {
let mut out: Vec<String> = Vec::with_capacity(html.lines().count() + 3);
let mut css_done = false;
let mut js_done = false;
for line in html.lines() {
let t = line.trim();
// ── Early resource hints, injected right after <meta charset> ────────
// The render-blocking classic theme-init <script> below would otherwise
// delay discovery of the parser-blocked stylesheet/module bundles.
// Preloading them near the top of <head> lets the preload scanner fetch
// both critical bundles in parallel with (not behind) theme-init.
// Placed after <meta charset> so charset stays the first element.
// Costs two tags; saves a serialized RTT.
if t.starts_with("<meta charset") {
out.push(line.to_string());
out.push(
" <!-- Early resource hints (build.rs): fetch critical bundles up front -->"
.to_string(),
);
out.push(format!(
" <link rel=\"preload\" href=\"{css_path}\" as=\"style\">"
));
out.push(format!(
" <link rel=\"modulepreload\" href=\"{js_path}\">"
));
continue;
}
// ── Inline the tiny render-blocking theme-init script ────────────────
// It must run before paint (avoids a theme flash) and is only ~400B, so
// inlining drops one request off the critical path. Falls back to the
// external <script src> if the source couldn't be read/minified.
if t.starts_with("<script") && t.contains("theme-init.js") {
if theme_init_js.trim().is_empty() {
out.push(line.to_string());
} else {
out.push(format!(" <script>{}</script>", theme_init_js.trim()));
}
continue;
}
// ── Replace all stylesheet <link>s with single bundle ────────────────
if t.starts_with("<link") && t.contains("stylesheet") && t.contains("href=\"/css/") {
if !css_done {
docs/DESIGN-SYSTEM.md
+105
View File
@@ -0,0 +1,105 @@
# OxiCloud Design System
The single source of truth for how the frontend looks, behaves, and stays
accessible. Pairs with [TOKENS.md](TOKENS.md) (auto-generated token reference)
and [UIUX-ROADMAP.md](UIUX-ROADMAP.md) (the work plan).
---
## 1. Design tokens
Everything visual routes through a token in
[`static/css/base/variables.css`](../static/css/base/variables.css). Six scales,
plus a curated color system. **Never hand-write a raw px/hex for these** — consume
a token so the next change happens in one place.
| Axis | Tokens | Notes |
| --- | --- | --- |
| Spacing | `--space-0 … --space-24` | 4px grid (+ half-steps 2/6/10/14). |
| Radius | `--radius-xs … --radius-4xl`, `--radius-full` | `--radius` aliases `--radius-2xl`. |
| Type | `--text-2xs … --text-6xl`, `--leading-*`, `--weight-*`, `--tracking-*` | rem-based (honors zoom). `.heading-page/-section/-card` utilities decouple role from element. |
| Z-index | `--z-base … --z-max` | Semantic layers with gaps; no magic numbers. |
| Motion | `--motion-fast/base/moderate/slow`, `--ease-standard/-emphasized/...` | `--ease-standard` is the decelerate default for entrances. |
| Elevation | `--shadow-xs … --shadow-2xl` | Composed recipes layered on the `--color-shadow-*` alphas. |
**Color.** One brand accent (orange `#ff5e3a`), one neutral slate ramp, and five
semantics (success/warning/danger/info + accent), each unified to a single hue.
Text tiers collapse to a handful that all clear **WCAG AA (4.5:1)** — verified by
[`scripts/check-contrast.mjs`](../scripts/check-contrast.mjs). Use
`--color-accent-text` (not `--color-accent`) for accent *text/links*.
Governance: **one brand accent, one neutral ramp, five semantics — no new hero
hues.** Run `node scripts/gen-token-docs.mjs` after editing tokens.
---
## 2. Accessibility rules (non-negotiable)
These are enforced/aided by CI scripts and must hold for every new surface.
- **Keyboard.** Everything interactive is reachable and operable by keyboard.
Use `<button>`/`<a>` (not clickable `<div>`s). Nav exposes `aria-current="page"`.
- **Focus.** A global `:focus-visible` ring lives in
[`base/a11y.css`](../static/css/base/a11y.css). Never `outline: none` without a
paired `:focus-visible` style. Mouse focus stays ring-free; keyboard focus never.
- **Contrast.** Every text/background pair clears 4.5:1 in **light AND dark** —
`node scripts/check-contrast.mjs` fails the build otherwise.
- **Landmarks + skip link.** `<nav aria-label>`, `role="main"`/`<main id="main">`,
a skip link as the first focusable element, and `lang` on `<html>`.
- **Headings.** Exactly one `h1` per page, no skipped levels —
`node scripts/check-headings.mjs`.
- **Motion.** `@media (prefers-reduced-motion: reduce)` neutralizes animation
globally. Also honor `prefers-contrast` and `forced-colors`.
- **Dialogs.** `role="dialog"` + `aria-modal` + `aria-labelledby`, focus trapped
while open, focus restored to the trigger on close (see
[`modal.js`](../static/js/components/modal.js)).
- **Icon-only buttons.** Always an `aria-label`; decorative icons get
`aria-hidden="true"`.
- **Touch targets.** ≥44×44px on phones.
---
## 3. Brand
- **Mark.** The cloud glyph ([`logo-plain.svg`](../static/logo/logo-plain.svg)).
Always rendered from the real SVG (never a stock `fa-cloud`). On surfaces it
sits in an accent-gradient tile via the `.brand-mark` component.
- **Wordmark.** "OxiCloud", weight 700, tight tracking. The accent-coloured
"Oxi" lockup is the ownable treatment.
- **Accent.** Orange→coral `#ff5e3a → #ff2d55` — warm and distinctive in a
blue-dominated cloud-storage market; nods to Rust oxidation. It is the *only*
brand/primary hue (blue/indigo/purple were demoted to the single info ramp).
- **Logo gradient.** One token (`--color-logo-gradient`) everywhere.
- **Clear-space / min-size.** Keep ≥ the tile's corner-radius of padding around
the mark; don't render the wordmark below ~16px.
- **Don't:** recolor the mark, stretch it, place it on a low-contrast background,
or introduce a second "primary" hue.
- **Maskable / OG.** [`logo-maskable.svg`](../static/logo/logo-maskable.svg) (PWA,
safe-zone) and [`og-image.svg`](../static/logo/og-image.svg) (social). Export
both to PNG for full platform support (see roadmap).
---
## 4. CI guardrails (what keeps the score from regressing)
Run all the dependency-free checks with **`just frontend-check`**:
| Script | Enforces |
| --- | --- |
| `check-contrast.mjs` | WCAG AA on every text/bg + semantic token pair (light + dark). |
| `check-headings.mjs` | One `h1`, no skipped levels, per HTML page. |
| `check-locales.mjs` | Locale completeness + `{placeholder}` integrity across all 16 locales. |
| `check-dead-tokens.mjs` | Reports tokens defined but never referenced (cleanup aid). |
| `check-brand-drift.mjs` | Locks the logo SVG hash + `--color-logo-gradient` against silent change. |
| `gen-token-docs.mjs` | Regenerates [TOKENS.md](TOKENS.md). |
**Build pipeline.** `build.rs` (release) bundles + content-hashes + minifies all
CSS/JS into `static-dist/` using the Rust crates **lightningcss** and **oxc** — no
npm. It also injects early `<link rel="preload">` / `<link rel="modulepreload">`
hints for the hashed bundles. Debug builds (`cargo run`) serve raw `static/`
unprocessed, so any source CSS must be valid as-authored (e.g. `@custom-media`
is off the table — it has no native browser support).
Still to wire (genuinely need npm devDependencies / browsers): stylelint rules
banning raw px/hex outside `:root`, axe-core + Playwright (keyboard,
visual-regression, dark-parity, cross-browser), and Lighthouse-CI perf budgets.
docs/TOKENS.md
+537
View File
@@ -0,0 +1,537 @@
# Design tokens
> Auto-generated from `static/css/base/variables.css` by `scripts/gen-token-docs.mjs`.
> Do not edit by hand — re-run the generator after changing tokens.
**430 tokens** across 20 groups.
## Spacing (4px grid)
| Token | Value |
| --- | --- |
| `--space-0` | `0` |
| `--space-px` | `1px` |
| `--space-0-5` | `2px` |
| `--space-1` | `4px` |
| `--space-1-5` | `6px` |
| `--space-2` | `8px` |
| `--space-2-5` | `10px` |
| `--space-3` | `12px` |
| `--space-3-5` | `14px` |
| `--space-4` | `16px` |
| `--space-5` | `20px` |
| `--space-6` | `24px` |
| `--space-7` | `28px` |
| `--space-8` | `32px` |
| `--space-9` | `36px` |
| `--space-10` | `40px` |
| `--space-11` | `44px` |
| `--space-12` | `48px` |
| `--space-14` | `56px` |
| `--space-16` | `64px` |
| `--space-20` | `80px` |
| `--space-24` | `96px` |
## Radius
| Token | Value |
| --- | --- |
| `--radius-none` | `0` |
| `--radius-xs` | `2px` |
| `--radius-sm` | `4px` |
| `--radius-md` | `6px` |
| `--radius-lg` | `8px` |
| `--radius-xl` | `10px` |
| `--radius-2xl` | `12px` |
| `--radius-3xl` | `16px` |
| `--radius-4xl` | `20px` |
| `--radius-full` | `9999px` |
| `--radius` | `var(--radius-2xl)` |
## Typography
| Token | Value |
| --- | --- |
| `--font-sans` | `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif` |
| `--font-mono` | `ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace` |
| `--text-2xs` | `0.6875rem` |
| `--text-xs` | `0.75rem` |
| `--text-sm` | `0.8125rem` |
| `--text-base` | `0.875rem` |
| `--text-md` | `1rem` |
| `--text-lg` | `1.125rem` |
| `--text-xl` | `1.25rem` |
| `--text-2xl` | `1.5rem` |
| `--text-3xl` | `1.75rem` |
| `--text-4xl` | `2rem` |
| `--text-5xl` | `2.5rem` |
| `--text-6xl` | `3rem` |
| `--leading-none` | `1` |
| `--leading-tight` | `1.25` |
| `--leading-snug` | `1.375` |
| `--leading-normal` | `1.5` |
| `--leading-relaxed` | `1.625` |
| `--leading-loose` | `1.8` |
| `--weight-normal` | `400` |
| `--weight-medium` | `500` |
| `--weight-semibold` | `600` |
| `--weight-bold` | `700` |
| `--weight-extrabold` | `800` |
| `--tracking-tighter` | `-0.02em` |
| `--tracking-tight` | `-0.01em` |
| `--tracking-normal` | `0` |
| `--tracking-wide` | `0.02em` |
| `--tracking-wider` | `0.04em` |
| `--tracking-widest` | `0.08em` |
| `--measure-prose` | `65ch` |
| `--icon-xs` | `12px` |
| `--icon-sm` | `14px` |
| `--icon-md` | `16px` |
| `--icon-lg` | `20px` |
| `--icon-xl` | `24px` |
## Z-index layers
| Token | Value |
| --- | --- |
| `--z-below` | `-1` |
| `--z-base` | `0` |
| `--z-raised` | `10` |
| `--z-sticky` | `100` |
| `--z-dropdown` | `1000` |
| `--z-overlay` | `2000` |
| `--z-drawer` | `2500` |
| `--z-modal` | `3000` |
| `--z-popover` | `3500` |
| `--z-toast` | `4000` |
| `--z-tooltip` | `5000` |
| `--z-notification` | `6000` |
| `--z-max` | `9999` |
## Motion (durations + easing)
| Token | Value |
| --- | --- |
| `--motion-instant` | `0ms` |
| `--motion-fast` | `120ms` |
| `--motion-base` | `160ms` |
| `--motion-moderate` | `200ms` |
| `--motion-slow` | `300ms` |
| `--motion-slower` | `500ms` |
| `--motion-spinner` | `1s` |
| `--spin-duration` | `var(--motion-spinner)` |
| `--ease-standard` | `cubic-bezier(0.2, 0, 0, 1)` |
| `--ease-emphasized` | `cubic-bezier(0.3, 0, 0, 1)` |
| `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` |
| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` |
| `--ease-in-out` | `cubic-bezier(0.4, 0, 0.2, 1)` |
## Elevation (composed shadows)
| Token | Value |
| --- | --- |
| `--shadow-xs` | `0 1px 2px var(--color-shadow-xs)` |
| `--shadow-sm` | `0 1px 3px var(--color-shadow-sm), 0 1px 2px var(--color-shadow-xs)` |
| `--shadow-md` | `0 4px 6px var(--color-shadow-sm), 0 2px 4px var(--color-shadow-xs)` |
| `--shadow-lg` | `0 10px 15px var(--color-shadow-md), 0 4px 6px var(--color-shadow-sm)` |
| `--shadow-xl` | `0 20px 25px var(--color-shadow-md), 0 8px 10px var(--color-shadow-sm)` |
| `--shadow-2xl` | `0 25px 50px var(--color-shadow-lg)` |
## Breakpoints (reference)
| Token | Value |
| --- | --- |
| `--bp-xs` | `480px` |
| `--bp-sm` | `640px` |
| `--bp-md` | `768px` |
| `--bp-lg` | `1024px` |
| `--bp-xl` | `1280px` |
## Density
| Token | Value |
| --- | --- |
| `--density-row-py` | `var(--space-3)` |
| `--density-row-px` | `var(--space-3-5)` |
| `--density-gap` | `var(--space-3)` |
| `--density-control-h` | `40px` |
## Layout shell
| Token | Value |
| --- | --- |
| `--sidebar-width` | `clamp(220px, 18vw, 280px)` |
| `--sidebar-width-min` | `200px` |
| `--sidebar-width-max` | `320px` |
| `--sidebar-width-collapsed` | `72px` |
| `--gutter` | `var(--space-6)` |
| `--grid-card-min` | `200px` |
## Color — text
| Token | Value |
| --- | --- |
| `--color-text` | `light-dark(#2d3748, #e2e8f0)` |
| `--color-text-heading` | `light-dark(#1e293b, #f1f5f9)` |
| `--color-text-secondary` | `light-dark(#475569, #cbd5e1)` |
| `--color-text-muted` | `light-dark(#5e6a78, #9fadbe)` |
| `--color-text-subtle` | `light-dark(#5e6a78, #9fadbe)` |
| `--color-text-faint` | `light-dark(#5e6a78, #9fadbe)` |
| `--color-text-dark` | `var(--color-text-secondary)` |
| `--color-text-dim` | `var(--color-text-secondary)` |
| `--color-text-black` | `var(--color-text)` |
| `--color-text-gray` | `var(--color-text-muted)` |
| `--color-text-medium` | `var(--color-text-muted)` |
| `--color-text-faint2` | `var(--color-text-faint)` |
| `--color-text-light` | `var(--color-text-faint)` |
| `--color-text-placeholder` | `var(--color-text-faint)` |
| `--color-text-navy` | `#1a1a2e` |
## Color — background
| Token | Value |
| --- | --- |
| `--color-bg-page` | `light-dark(#f5f7fa, #0f172a)` |
| `--color-bg-surface` | `light-dark(#ffffff, #1e293b)` |
| `--color-bg-input` | `light-dark(#f9fafb, #0f172a)` |
| `--color-bg-hover` | `light-dark(#f8fafc, #334155)` |
| `--color-bg-muted` | `light-dark(#f0f3f7, #1a2540)` |
| `--color-bg-subtle` | `light-dark(#f8f9fa, #162032)` |
| `--color-bg-alt` | `light-dark(#f7fafc, #0f172a)` |
| `--color-bg-input-alt` | `light-dark(#edf2f7, #253045)` |
| `--color-bg-empty` | `light-dark(#f0f0f0, #253045)` |
| `--color-bg-off-white` | `#fafbfd` |
## Color — border
| Token | Value |
| --- | --- |
| `--color-border` | `light-dark(#e2e8f0, #334155)` |
| `--color-border-light` | `light-dark(#f1f5f9, #334155)` |
| `--color-border-medium` | `light-dark(#cbd5e0, #475569)` |
| `--color-border-faint` | `light-dark(#e0e6ed, #2a3650)` |
| `--color-border-subtle` | `light-dark(#e0e5e8, #2a3650)` |
| `--color-border-xfaint` | `light-dark(#f0f0f0, #1e293b)` |
| `--color-border-ddd` | `light-dark(#ddd, #334155)` |
| `--color-border-dark-faint` | `rgba(255, 255, 255, 0.03)` |
## Color — accent / brand
| Token | Value |
| --- | --- |
| `--color-accent` | `#ff5e3a` |
| `--color-accent-hover` | `light-dark(#e04520, #ff7a5c)` |
| `--color-accent-text` | `light-dark(#cc3a16, #ff8a5c)` |
| `--color-on-accent` | `#ffffff` |
| `--color-focus-ring` | `#ff5e3a` |
| `--color-logo-gradient` | `linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%)` |
| `--color-accent-gradient` | `linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%)` |
| `--color-accent-shadow` | `rgba(255, 94, 58, 0.3)` |
| `--color-accent-ring` | `light-dark(rgba(255, 94, 58, 0.1), rgba(255, 94, 58, 0.15))` |
| `--color-accent-tint` | `light-dark(#fff5f3, #2a1a15)` |
| `--color-accent-mid` | `#ff8a5c` |
| `--color-accent-shadow-lg` | `rgba(255, 94, 58, 0.4)` |
| `--color-accent-bg` | `rgba(255, 94, 58, 0.06)` |
| `--color-accent-bg-sm` | `rgba(255, 94, 58, 0.08)` |
| `--color-accent-ring-dark` | `rgba(255, 94, 58, 0.15)` |
| `--color-accent-ring-strong` | `rgba(255, 94, 58, 0.2)` |
| `--color-accent-ring-xl` | `rgba(255, 94, 58, 0.4)` |
| `--color-accent-ring-xs` | `rgba(255, 94, 58, 0.05)` |
| `--color-primary` | `var(--color-accent)` |
| `--color-primary-hover` | `var(--color-accent-hover)` |
| `--color-accent-second` | `#ff2d55` |
| `--color-accent-shadow-sm` | `rgba(255, 94, 58, 0.25)` |
## Color — semantic (success/warn/danger/info)
| Token | Value |
| --- | --- |
| `--color-error-bg` | `light-dark(#fee2e2, #3b1111)` |
| `--color-error-text` | `light-dark(#b91c1c, #fca5a5)` |
| `--color-success-bg` | `light-dark(#dcfce7, #052e16)` |
| `--color-success-text` | `light-dark(#15803d, #86efac)` |
| `--color-success-border` | `#16a34a` |
| `--color-success-alt` | `#16a34a` |
| `--color-success-bg-alt` | `var(--color-success-bg)` |
| `--color-success-text-alt` | `var(--color-success-text)` |
| `--color-success-bg-green` | `var(--color-success-bg)` |
| `--color-success-text-green` | `var(--color-success-text)` |
| `--color-danger-bg` | `#ef4444` |
| `--color-danger-text` | `#ffffff` |
| `--color-danger-bg-hover` | `#dc2626` |
| `--color-danger-alt` | `#ef4444` |
| `--color-danger-ring` | `rgba(239, 68, 68, 0.3)` |
| `--color-danger-ring-lg` | `rgba(239, 68, 68, 0.4)` |
| `--color-danger-light-bg` | `light-dark(#fef2f2, #2a0c0c)` |
| `--color-danger-lighter` | `light-dark(#fef2f2, #2a0c0c)` |
| `--color-danger-text-alt` | `var(--color-error-text)` |
| `--color-danger-gradient` | `linear-gradient(135deg, #ef4444 0%, #dc2626 100%)` |
| `--color-warning-bg` | `light-dark(#fef3c7, #2a2410)` |
| `--color-warning-text` | `light-dark(#b45309, #fbbf24)` |
| `--color-warning-border` | `#f59e0b` |
| `--color-warning-bg-dark` | `light-dark(#fde68a, #3d2e00)` |
| `--color-warning-ring` | `rgba(245, 158, 11, 0.12)` |
| `--color-warning-shadow` | `rgba(245, 158, 11, 0.4)` |
| `--color-warning-orange-bg` | `var(--color-warning-bg)` |
| `--color-warning-orange-border` | `var(--color-warning-border)` |
| `--color-warning-orange-text` | `var(--color-warning-text)` |
| `--color-warning-bg-light` | `var(--color-warning-bg)` |
| `--color-warning-text-amber` | `var(--color-warning-text)` |
| `--color-warning-bg-orange` | `var(--color-warning-bg)` |
| `--color-warning-text-orange` | `var(--color-warning-text)` |
| `--color-info-bg` | `light-dark(#eff6ff, #0c2d48)` |
| `--color-info-text` | `light-dark(#1d4ed8, #93c5fd)` |
| `--color-info-border` | `#3b82f6` |
| `--color-info-blue` | `#3b82f6` |
| `--color-info-bg-alt` | `var(--color-info-bg)` |
| `--color-info-text-alt` | `var(--color-info-text)` |
| `--color-info-surface` | `var(--color-info-bg)` |
| `--color-danger-hover-bg` | `rgba(239, 68, 68, 0.1)` |
| `--color-success-ring` | `rgba(72, 187, 120, 0.1)` |
| `--color-success-ring-dark` | `rgba(72, 187, 120, 0.15)` |
| `--color-success-text-strong` | `#2f855a` |
| `--color-success-ring-vivid` | `rgba(74, 222, 128, 0.1)` |
| `--color-success-text-vivid` | `#86efac` |
| `--color-success-ring-vivid-lg` | `rgba(74, 222, 128, 0.15)` |
| `--color-success-icon-vivid` | `#4ade80` |
| `--color-info-border-light` | `#90cdf4` |
| `--color-warning-ring-xs` | `rgba(255, 193, 7, 0.05)` |
| `--color-warning-bg-faint` | `#fffbeb` |
| `--color-error-text-dark` | `light-dark(#991b1b, #f87171)` |
| `--color-danger-shadow` | `rgba(220, 38, 38, 0.2)` |
| `--color-danger-shadow-lg` | `rgba(220, 38, 38, 0.3)` |
## Color — shadow alphas / overlays
| Token | Value |
| --- | --- |
| `--color-shadow` | `light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3))` |
| `--color-shadow-lg` | `light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.38))` |
| `--color-shadow-xs` | `rgba(0, 0, 0, 0.05)` |
| `--color-shadow-sm` | `rgba(0, 0, 0, 0.08)` |
| `--color-shadow-md` | `light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.34))` |
| `--color-shadow-xl` | `rgba(0, 0, 0, 0.2)` |
| `--color-shadow-2xl` | `rgba(0, 0, 0, 0.25)` |
| `--color-shadow-3xl` | `rgba(0, 0, 0, 0.3)` |
| `--color-shadow-4xl` | `rgba(0, 0, 0, 0.4)` |
| `--color-overlay` | `rgba(0, 0, 0, 0.5)` |
| `--color-overlay-light` | `rgba(0, 0, 0, 0.45)` |
| `--color-overlay-heavy` | `rgba(0, 0, 0, 0.85)` |
| `--color-overlay-darkest` | `rgba(0, 0, 0, 0.92)` |
| `--color-overlay-shadow` | `rgba(0, 0, 0, 0.6)` |
| `--color-on-overlay` | `rgba(255, 255, 255, 0.95)` |
| `--color-on-overlay-muted` | `rgba(255, 255, 255, 0.9)` |
| `--color-overlay-button` | `rgba(255, 255, 255, 0.12)` |
| `--color-overlay-button-hover` | `rgba(255, 255, 255, 0.22)` |
| `--color-overlay-mid` | `rgba(0, 0, 0, 0.6)` |
| `--color-overlay-video` | `rgba(0, 0, 0, 0.55)` |
## Color — sidebar
| Token | Value |
| --- | --- |
| `--color-sidebar-bg-from` | `light-dark(#2a3042, #0f172a)` |
| `--color-sidebar-bg-to` | `light-dark(#232838, #0c1322)` |
| `--color-sidebar-text` | `rgba(255, 255, 255, 0.65)` |
| `--color-sidebar-text-hover` | `rgba(255, 255, 255, 0.9)` |
| `--color-sidebar-text-active` | `#ffffff` |
| `--color-sidebar-active-bg` | `rgba(255, 94, 58, 0.12)` |
| `--color-sidebar-hover-bg` | `rgba(255, 255, 255, 0.06)` |
| `--color-sidebar-separator` | `rgba(255, 255, 255, 0.07)` |
| `--color-sidebar-overlay` | `rgba(0, 0, 0, 0.5)` |
| `--color-sidebar-storage-bg` | `rgba(255, 255, 255, 0.05)` |
| `--color-sidebar-storage-border` | `rgba(255, 255, 255, 0.07)` |
| `--color-sidebar-storage-text` | `rgba(255, 255, 255, 0.8)` |
| `--color-sidebar-storage-bar` | `rgba(255, 255, 255, 0.1)` |
| `--color-sidebar-storage-faint` | `rgba(255, 255, 255, 0.5)` |
| `--color-sidebar-logo-gradient` | `linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%)` |
| `--color-sidebar-progress` | `linear-gradient(90deg, #ff5e3a 0%, #ff8a5c 100%)` |
| `--color-sidebar-shadow` | `rgba(255, 94, 58, 0.35)` |
| `--color-sidebar-shadow-lg` | `rgba(255, 94, 58, 0.45)` |
## Color — file types
| Token | Value |
| --- | --- |
| `--color-ft-html` | `#e34c26` |
| `--color-ft-js` | `#2965f1` |
| `--color-ft-python` | `#3776ab` |
| `--color-ft-typescript` | `#3178c6` |
| `--color-ft-rust` | `#dea584` |
| `--color-ft-go` | `#00add8` |
| `--color-ft-java` | `#e76f00` |
| `--color-ft-shell` | `#555555` |
| `--color-ft-csharp` | `#68217a` |
| `--color-ft-php` | `#8892be` |
| `--color-ft-ruby` | `#cc342d` |
| `--color-ft-swift` | `#fa7343` |
| `--color-ft-kotlin` | `#7f52ff` |
| `--color-ft-scala` | `#e38c00` |
| `--color-ft-angular` | `#cb171e` |
| `--color-ft-cpp` | `#9c4221` |
| `--color-ft-docker` | `#083fa1` |
| `--color-ft-generic-blue` | `#556ee6` |
| `--color-ft-generic-green` | `#4eaa25` |
| `--color-ft-generic-gray` | `#a0aec0` |
| `--color-ft-orange-light` | `#ffb86c` |
| `--color-ft-yellow` | `#ffd43b` |
| `--color-ft-orange-alt` | `#e34c26` |
| `--color-ft-coffeescript` | `#9c4221` |
| `--color-ft-folder-bg` | `#ffeaa7` |
| `--color-ft-folder-tab` | `#fdcb6e` |
| `--color-ft-doc-bg` | `#e0ecff` |
| `--color-ft-doc-text` | `#3171d8` |
| `--color-ft-pdf-bg` | `#fee2e2` |
| `--color-ft-pdf-text` | `#e53e3e` |
| `--color-ft-image-bg` | `#e0f2fe` |
| `--color-ft-image-text` | `#3b82f6` |
| `--color-ft-video-bg-from` | `#ede9fe` |
| `--color-ft-video-bg-to` | `#fce7f3` |
| `--color-ft-video-text` | `#8b5cf6` |
| `--color-ft-audio-bg` | `#fef3c7` |
| `--color-ft-audio-text` | `#f59e0b` |
| `--color-ft-audio-alt-bg` | `#fff3e0` |
| `--color-ft-spreadsheet-bg` | `#e6f4ea` |
| `--color-ft-spreadsheet-text` | `#0d904f` |
| `--color-ft-presentation-bg` | `#fef3e2` |
| `--color-ft-presentation-text` | `#d04423` |
| `--color-ft-archive-bg` | `#f5f0eb` |
| `--color-ft-archive-text` | `#8d6e63` |
| `--color-ft-installer-bg` | `#f3e8ff` |
| `--color-ft-installer-text` | `#7c3aed` |
| `--color-ft-script-bg` | `#e8f5e9` |
| `--color-ft-script-text` | `#4eaa25` |
| `--color-ft-config-bg` | `#f1f3f5` |
| `--color-ft-config-text` | `#718096` |
## Color — calendar dots
| Token | Value |
| --- | --- |
| `--color-cal-1` | `#d36868` |
| `--color-cal-2` | `#d3a268` |
| `--color-cal-3` | `#c9d368` |
| `--color-cal-4` | `#8fd368` |
| `--color-cal-5` | `#68d37c` |
| `--color-cal-6` | `#68d3b6` |
| `--color-cal-7` | `#68b6d3` |
| `--color-cal-8` | `#687cd3` |
| `--color-cal-9` | `#8f68d3` |
| `--color-cal-10` | `#c968d3` |
| `--color-cal-11` | `#d368a2` |
## Color — badges
| Token | Value |
| --- | --- |
| `--color-badge-success-bg` | `#ecfdf5` |
| `--color-badge-success-bg-medium` | `#d1fae5` |
| `--color-badge-success-text` | `#065f46` |
| `--color-badge-success-border` | `#a7f3d0` |
| `--color-badge-success-fill` | `#047857` |
| `--color-badge-success-fill-dark` | `#064e27` |
| `--color-badge-success-fill-faint` | `#f0fdf4` |
| `--color-badge-green-bg` | `#ecfdf5` |
| `--color-badge-green-text` | `#065f46` |
| `--color-badge-orange-bg` | `light-dark(#fff5f3, #2a1814)` |
| `--color-badge-orange-text` | `light-dark(#ff5e3a, #ff8a65)` |
| `--color-badge-error-border` | `#fecaca` |
| `--color-badge-warning-text` | `#92400e` |
| `--color-badge-warning-border` | `#fde68a` |
| `--color-badge-amber-bg` | `#fef3c7` |
| `--color-badge-amber-text` | `#f59e0b` |
| `--color-badge-indigo-bg` | `#ede9fe` |
| `--color-badge-indigo-text` | `#6d28d9` |
| `--color-badge-blue-bg` | `light-dark(#eff6ff, #0c2d48)` |
| `--color-badge-blue-text` | `light-dark(#1e40af, #93c5fd)` |
| `--color-badge-blue-border` | `#bfdbfe` |
| `--color-badge-gray` | `#d1d5db` |
## Color — other
| Token | Value |
| --- | --- |
| `--color-item` | `var(--color-bg-surface)` |
| `--color-item-hover` | `var(--color-bg-hover)` |
| `--color-item-active` | `light-dark(#f8d2ae, #5a5047)` |
| `--color-item-selected` | `light-dark(#fff8f6, #39281a)` |
| `--color-item-hover-accent` | `light-dark(#fff0ec, #3d342c)` |
| `--color-item-hover-blue` | `#f0f8ff` |
| `--color-item-hover-sky` | `#e0f2fe` |
| `--color-multiselect-bg` | `#1e293b` |
| `--color-multiselect-border` | `#334155` |
| `--color-multiselect-text` | `#ffffff` |
| `--color-multiselect-text-faint` | `rgba(255, 255, 255, 0.7)` |
| `--color-multiselect-hover-bg` | `rgba(255, 255, 255, 0.1)` |
| `--color-multiselect-action-text` | `#ffffff` |
| `--color-multiselect-action-hover` | `rgba(255, 255, 255, 0.2)` |
| `--color-multiselect-danger-bg` | `rgba(239, 68, 68, 0.25)` |
| `--color-multiselect-danger-text` | `#fca5a5` |
| `--color-multiselect-danger-active` | `rgba(239, 68, 68, 0.4)` |
| `--color-multiselect-danger-text-active` | `#ffffff` |
| `--color-notification-bg` | `light-dark(#ffffff, #1e293b)` |
| `--color-notification-badge` | `#ff3b30` |
| `--color-notification-success` | `#34c759` |
| `--color-notification-error` | `#ff3b30` |
| `--color-lightbox-overlay` | `rgba(0, 0, 0, 0.92)` |
| `--color-lightbox-btn-bg` | `rgba(255, 255, 255, 0.12)` |
| `--color-lightbox-btn-text` | `#ffffff` |
| `--color-lightbox-btn-hover` | `rgba(255, 255, 255, 0.25)` |
| `--color-lightbox-gradient-top` | `linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent)` |
| `--color-lightbox-gradient-bottom` | `linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent)` |
| `--color-lightbox-text-faint` | `rgba(255, 255, 255, 0.5)` |
| `--color-lightbox-text-muted` | `rgba(255, 255, 255, 0.7)` |
| `--color-oidc-bg` | `var(--color-info-blue)` |
| `--color-oidc-shadow` | `rgba(79, 70, 229, 0.3)` |
| `--color-oidc-shadow-lg` | `rgba(79, 70, 229, 0.4)` |
| `--color-device-verify-text` | `#ffc107` |
| `--color-device-verify-shadow` | `rgba(255, 193, 7, 0.5)` |
| `--color-device-verify-drop-shadow` | `rgba(255, 193, 7, 0.4)` |
| `--color-device-verify-border` | `#ffc107` |
| `--color-device-verify-muted` | `#6c757d` |
| `--color-device-verify-dim` | `#ccc` |
| `--color-content-muted` | `#888` |
| `--color-content-bg-warn` | `light-dark(#ffeaa7, #3d2e00)` |
| `--color-content-bg-warn-dark` | `light-dark(#fdcb6e, #5a4200)` |
| `--color-user-menu-header-bg` | `light-dark(linear-gradient(135deg, #fef5f3 0%, #fdf2f8 100%), linear-gradient(135deg, #1a2332 0%, #1e2940 100%))` |
| `--color-user-menu-header-border` | `light-dark(#fce7e1, #3a2520)` |
| `--color-share-link-text` | `var(--color-info-text)` |
| `--color-share-link-hover` | `var(--color-info-text)` |
| `--color-share-remove-text` | `#b71c1c` |
| `--color-share-owner-text` | `#757575` |
| `--color-recent-muted` | `#6c757d` |
| `--color-recent-border` | `#6c757d` |
| `--color-star-text` | `#fbbf24` |
| `--color-star-text-hover` | `#f59e0b` |
| `--color-star-active` | `#d97706` |
| `--color-card-drop-tint` | `rgba(230, 126, 34, 0.08)` |
| `--color-card-drop-border` | `#e67e22` |
| `--color-neutral-warm-bg` | `#f5f0eb` |
| `--color-neutral-warm-text` | `#8d6e63` |
| `--color-neutral-bg` | `#f1f3f5` |
| `--color-admin-blue` | `#60a5fa` |
| `--color-admin-blue-bg` | `rgba(59, 130, 246, 0.1)` |
| `--color-admin-blue-bg-sm` | `rgba(59, 130, 246, 0.15)` |
| `--color-secret-green` | `#059669` |
| `--color-progress-overlay` | `rgba(255, 255, 255, 0.95)` |
| `--color-progress-overlay-dark` | `rgba(30, 41, 59, 0.95)` |
| `--color-black` | `#000000` |
| `--color-notification-error-ring` | `rgba(255, 59, 48, 0.1)` |
| `--color-avatar-gradient` | `linear-gradient(135deg, #3b82f6, #6366f1)` |
| `--color-role-admin-bg` | `#dbeafe` |
| `--color-role-admin-text` | `#1d4ed8` |
| `--color-dark-mid` | `#475569` |
| `--color-role-admin-dark-bg` | `#1e3a5f` |
| `--color-photo-check-border` | `rgba(255, 255, 255, 0.8)` |
| `--color-storage-fill-green` | `linear-gradient(90deg, #059669, #10b981)` |
| `--color-storage-fill-orange` | `linear-gradient(90deg, #d97706, #f59e0b)` |
| `--color-storage-fill-red` | `linear-gradient(90deg, #dc2626, #ef4444)` |
| `--color-stat-warn-border` | `#fbbf24` |
| `--color-dark-footer` | `#162032` |
| `--color-scrollbar-dark` | `rgba(255, 255, 255, 0.15)` |
| `--color-music-gradient` | `linear-gradient(135deg, #667eea 0%, #764ba2 100%)` |
| `--color-music-background` | `var(--color-bg-surface)` |
| `--color-music-public-bg` | `rgba(74, 144, 217, 0.12)` |
| `--color-video-play` | `#ffffff` |
| `--color-video-play-shadow` | `#000000` |
docs/UIUX-ROADMAP.md
+423
View File
@@ -0,0 +1,423 @@
# OxiCloud — Roadmap UI/UX: de 4.8 a 10
> Plan de trabajo derivado de la auditoría multi-agente del frontend (`/static`).
> Cada tarea está anclada a archivos reales. Las fases son secuenciales: **Fase 0
> (fundamentos) debe ir primero** porque casi todo lo demás depende de los tokens.
> Esfuerzo: **S** <2h · **M** ~medio día · **L** ~1-2 días · **XL** ~3 días+.
## Trayectoria de puntuación
| Fase | Qué entrega | Nota al terminar |
|------|-------------|:----------------:|
| — | Estado actual | **4.8** |
| **0 · Fundamentos** | Las 6 escalas de tokens que faltan (espaciado, tipo, radios, elevación, z-index, movimiento) + rampas de color OKLCH + higiene | **5.3** |
| **1 · Migración** | Aplicar las escalas en los ~55 archivos CSS, gobernar la paleta, unificar la marca en superficies externas, arreglar jerarquía de headings | **6.5** |
| **2 · Estados y A11y** | `:focus-visible`, disabled/loading, contraste WCAG AA, navegación por teclado, landmarks, reduced-motion, ARIA, touch targets | **8.0** |
| **3 · Pulido** | Empty states + skeletons, placeholders de fotos, lightbox completo, feel del movimiento, login atmosférico, reflow responsive, voz de marca | **9.2** |
| **4 · Clase mundial + guardarraíles** | Command palette, View Transitions, undo, i18n con Intl, offline, onboarding, microcopy + **CI (axe, contraste, visual regression) y design system documentado que sostienen el 10** | **10** |
---
## FASE 0 — Fundamentos (las escalas de tokens que faltan)
> El problema raíz de la auditoría: solo el color está sistematizado. Aquí se crean
> los ejes que faltan en [variables.css](../static/css/base/variables.css). 4-5 áreas
> propusieron estas mismas tareas de forma independiente → son la base correcta.
### Escalas de tokens ✅ (resuelto — definidas en [variables.css](../static/css/base/variables.css), [reset.css](../static/css/base/reset.css), [typography.css](../static/css/base/typography.css))
- [x] **f0-space** (S) — Escala de espaciado `--space-*` en grid de 4px (`--space-0`…`--space-24`, con medios pasos 2/6/10/14px). _Migración de los px crudos → Fase 1._
- [x] **f0-radius** (S) — Escala `--radius-*` (`xs`…`4xl`,`full`) y **token huérfano `--radius` ya definido** (alias de `--radius-2xl`; resuelve los `var(--radius,12px)` de share-public/device-verify).
- [x] **f0-type** (M) — Escala tipográfica en rem `--text-2xs`…`--text-6xl` con `--leading-*`/`--weight-*`/`--tracking-*`, `--font-sans`/`--font-mono`, `--measure-prose` (65ch) y `--icon-*` separada del texto.
- [x] **f0-type-base** (S) — `font-size: var(--text-base)` + `line-height: 1.5` en `body`; `html { font-size: 100% }` (honra zoom); clases `.heading-page/-section/-card/-eyebrow` + `.prose` en typography.css.
- [x] **f0-zindex** (S) — Capas semánticas `--z-*` (base…max) con huecos para insertar.
- [x] **f0-motion** (S) — `--motion-*` (instant…spinner) + `--ease-*` con **5 curvas `cubic-bezier`** (standard/emphasized de desaceleración por defecto) + `--spin-duration`.
- [x] **f0-elevation** (M) — Recetas `--shadow-xs…2xl` compuestas; **`--color-shadow-5xl` muerto eliminado** y **colisión dark arreglada** (base 0.3 < md 0.34 < lg 0.38).
- [~] **f0-breakpoints** (S) — Tokens `--bp-xs…xl` definidos como referencia para JS/docs. ⚠️ **Diferido (razón real, no "dependencia"):** lightningcss SÍ soporta `@custom-media`, pero `web/mod.rs` sirve el CSS **crudo desde `static/`** en debug (`cargo run`), sin preprocesar. `@custom-media` no tiene soporte nativo de navegador → `@media (--bp-sm)` rompería **todas** las media queries en dev. Solo viable si dev también preprocesa CSS (no lo hace). Las custom props tampoco funcionan en condiciones `@media` de forma nativa. Quedan como referencia.
- [x] **f0-density** (S) — Tokens `--density-*` (row/gap/control) + override `html[data-density="compact"]`. _Consumidos por filas/controles en Fase 1._
- [x] **f0-sidebar-fluid** (S) — `--sidebar-width: clamp(220px,18vw,280px)` + tokens min/max/collapsed. _Rail redimensionable → Fase 1._
- [x] **f0-dvh** (S) — `body { height:100vh; height:100dvh }` con fallback. _Migración de `100vh` en views → Fase 1 (f1-vh-views)._
### Fundamentos de color (curado, Opción B) ✅ — validado WCAG por script
- [~] **f0-oklch-ramps** (L) — **Adaptado:** curé los semánticos directamente a un hue sobrio cada uno con valores validados; **no** construí la capa formal de primitivas OKLCH (arquitectura opcional a futuro — el resultado de armonización ya se logró).
- [~] **f0-offwhites** (M) — **Diferido:** bajo valor y riesgo de aplanar el micro-layering de superficies sin poder renderizar. Revisar con la app en navegador.
- [x] **f0-brand-orange** (M) — Naranja confirmado como único acento de marca; `--color-accent-text`/`--color-on-accent` añadidos. _Degradar azul/índigo/púrpura → Fase 1 (f1-demote-*)._
- [x] **f0-textgray** (M) — 14 grises → 4 tiers AA-safe (secondary/muted/subtle/faint) + **todos los nombres legacy como alias** (0 roturas). muted/faint/placeholder **oscurecidos para pasar AA** (antes 2.3–4.0:1). _Adelanta f2-contrast-text._
- [x] **f0-semantic-success** (L) — Unificado a esmeralda sobrio (`#16a34a`); 6 verdes → alias canónicos.
- [x] **f0-semantic-warning** (L) — Unificado a ámbar (`text #b45309` AA, `border #f59e0b`); el oro brillante `#ffc107` se retira. 7 variantes → alias.
- [x] **f0-semantic-danger** (L) — Unificado a `#ef4444/#dc2626`; `danger-text-alt` ahora usa el rojo AA.
- [x] **f0-semantic-info** (L) — Unificado a azul (`text #1d4ed8` AA + tier dark); variantes → alias. _Calendar dots + iconos de nav regenerados a familia armonizada (S55/L62)._
### Tokens de acento, foco y marca
- [x] **f0-accent-text** (S) — `--color-accent-text: light-dark(#d23c18, #ff8a5c)` + `--color-focus-ring` añadidos. _Migración de enlaces → Fase 2 (f2-contrast-link)._
- [x] **f0-on-accent** (S) — `--color-on-accent: #ffffff` añadido. _Repunteo de consumidores de `--color-danger-text` → Fase 1._
- [~] **f0-brand-mark** (M) — **Parcial:** `--color-logo-gradient` canónico definido (unifica los dos gradientes divergentes). _SVG único + componente de lockup + wordmark/settings-layout tokens → Fase 1 (f1-logo-*, f1-settings-container)._
### Higiene y andamiaje (rápidas, habilitan el resto) ✅
- [x] **f0-stylelint-typo** (S) — Glob arreglado (`statc`→`static`). **0 hex/rgba crudos** fuera de variables/themes → CI no se romperá por colores. _(Auditoría 2026-06: una fase posterior había metido 3 hex en `base/a11y.css` (`@media prefers-contrast`) que stylelint habría marcado; movidos a `variables.css` (capa de tokens, whitelisted) → invariante restaurado y reverificado.)_
- [x] **f0-debug-red** (S) — Los tokens "debug" sí se usaban (badge de conteo de drag); **repunteados** a `--color-notification-badge`/`--color-danger-text` y eliminados de variables.css.
- [x] **f0-legacy-badge** (S) — Bloque FIXME (11 tokens `*-dark-*`) **eliminado** — confirmado 0 consumidores.
- [x] **f0-animations-file** (S) — [base/animations.css](../static/css/base/animations.css) creado con el `@keyframes spin` canónico, conectado temprano en main.css.
- [x] **f0-delete-spin-dupes** (S) — 6 `@keyframes spin` duplicados eliminados. _`oxi-spin`/`smdSpin` (1 uso c/u) diferidos a Fase 1 (requieren tocar consumidores)._
- [x] **f0-dead-upload-toast** (S) — Bloque muerto `.upload-toast` (162 líneas) + `<div>` oculto de index.html **eliminados** (0 referencias JS).
- [x] **f0-sr-only** (S) — `.sr-only` añadida en reset.css.
- [~] **f0-perf-baseline** (M) — **Diferida:** requiere correr la app + build + Lighthouse (no disponible en este entorno). El archivo de presupuestos se crea junto al primer baseline.
---
## FASE 1 — Migración (aplicar las escalas en todo el código)
### Migrar CSS a las escalas ✅ — codemod value-preserving (1645 reemplazos, 41 archivos, 0 cambio visual)
- [x] **f1-mig-base** (S) — forms.css migrado (reset.css ya estaba; main.css no tiene valores).
- [x] **f1-mig-layout** (M) — sidebar/topbar/content migrados.
- [x] **f1-mig-comp-core** (L) — buttons/fileManager/resourceList/fileType/breadcrumb migrados.
- [x] **f1-mig-comp-overlays** (L) — dialogs/modals/shareModal/groupsModal/shareDialog/contextMenu/uploadDropdown migrados.
- [x] **f1-mig-comp-misc** (L) — notifications/tooltip/itemTooltip/search/spinner/batchToolbar/chips/userVignette/userMenu/languageSelector/csp-utilities migrados.
- [x] **f1-mig-views** (XL) — los 14 views migrados (admin/music/profile/auth/photos/trash/recent/favorites/sharedWithMe/mySharesView/inlineViewer/device-verify/share-public/photosLightbox).
- [x] **f1-weight-normalize** (M) — `bold`/`normal` + numéricos → tokens `--weight-*`.
- [x] **f1-leading-normalize** (S) — `line-height` unitless exactos → tokens `--leading-*`.
- [~] **f1-snap-fractional** (M) — **Parcial:** los exactos ya van por token; quedan **184 px off-grid** (15/17/11/13px) sin token exacto → requieren decisión de snapping (cambio visual). _Pendiente._
- [ ] **f1-mig-root-dups** (M) — Reconciliar shims raíz vs views/ (separado de la migración de valores).
- [~] **f1-mig-motion-sweep** (L) — **Diferido:** las duraciones dominantes (0.15s/0.25s) no tienen token exacto → tokenizarlas es un cambio de *feel*, no value-preserving. Decisión aparte.
- [ ] **f1-spin-duration-token** (S) — Diferido (los spinners usan 0.7s/1s; unificar a `--spin-duration` cambia el valor).
- [ ] **f1-icon-size-scale** (M) — Diferido (separar `font-size` de icono vs texto no es automatizable sin ambigüedad).
- [ ] **f1-tracking-normalize** (M) — Diferido (los `letter-spacing` en px/em no tienen token exacto).
### Jerarquía de headings ✅ — cada página con un único h1, sin saltos
- [x] **f1-h-index** (S) — modal-title `h3→h2` (selector `.modal-header h2,h3` actualizado) → orden `h1→h2→h2`.
- [x] **f1-h-login** (S) — `<h1 class="sr-only">OxiCloud</h1>` añadido (usa la utilidad `.sr-only` de Fase 0); paneles quedan h2.
- [x] **f1-h-admin** (M) — `<h1 class="sr-only">Admin panel</h1>` añadido; secciones h2, subsecciones h3.
- [x] **f1-h-profile** (S) — panel de error `h2→h1` (queda h1 propio en cada panel excluyente).
- [x] **f1-h-rest** (S) — share/device-verify ya tenían h1 (verificado); nextcloud-login/success/error `h2→h1`.
### Gobernanza de paleta ✅ (parcial donde es decorativo)
- [~] **f1-fileicon-pairs** (M) — **Diferido:** re-derivar pares bg/text de iconos (pdf/doc/image/audio/video) de los semánticos — es pulido visual, revisar con la app.
- [—] **f1-fileicon-langs** (L) — **Descartado** por tu elección (mantener colores por lenguaje).
- [x] **f1-calendar-dots** (M) — Hecho en Fase 0 (familia armonizada S55/L62).
- [x] **f1-demote-blue** (M) — `--color-primary` aliasado a `--color-accent` → naranja único (flipa device-verify/share/userMenu).
- [x] **f1-demote-oidc** (S) — `--color-oidc-bg` → `--color-info-blue` (botón SSO distinto de la marca, en el azul info único).
- [x] **f1-demote-purple** (M) — Familia `--color-purple-*` **eliminada** (0 consumidores) de variables.css y del fallback de dark.css.
- [~] **f1-demote-misc-blue** (M) — **Parcial:** share-link → info-text. _admin-blue y avatar-gradient (decorativos) los dejé — bajo valor, requerirían restyle del admin._
- [x] **f1-named-colors** (S) — `white/black` → `#ffffff/#000000`; confirmado **0 named colors** fuera de variables/themes.
### Unificación de marca en superficies externas (primera impresión) ✅
- [x] **f1-share-accent** (S) — Hecho vía el alias `--color-primary → --color-accent` (wordmark + spinner de share ahora naranjas).
- [x] **f1-device-accent** (S) — Acento vía alias **+ bug del Deny arreglado** (`--color-error-text` como fondo → `--color-danger-bg`).
- [x] **f1-auth-foreground** (S) — 3× `--color-danger-text` foreground → `--color-on-accent` en auth.css (+ 2× en device-verify).
- [x] **f1-share-logo** (S) — Tile de marca canónico (`.brand-mark` con el SVG real) añadido a share.html.
- [x] **f1-device-logo** (S) — Tile `.brand-mark` añadido a device-verify.html (SVG inline → no hizo falta icons.js).
- [x] **f1-share-emoji-expired** (S) — 🚫 `&#128683;` → SVG alert-circle (color danger).
- [x] **f1-share-emoji-file** (M) — 📄 `&#128196;` → SVG de documento (color accent).
- [~] **f1-share-card-icons** (S) — **Diferido:** los cards de folder/file los construye publicShare.js (JS, no HTML).
- [x] **f1-share-download-icon** (S) — SVG de descarga añadido al botón Download.
- [~] **f1-login-nojs** (M) — **Diferido:** requiere entender la lógica de paneles de auth.js (riesgo de mostrar panel equivocado).
- [x] **f1-share-nojs** (S) — `<noscript>` con mensaje de fallback añadido.
### Marca: componente canónico
- [x] **f1-about-real-mark** (S) — **`fa-cloud` genérico → marca SVG real** en el modal "Acerca de" (+ gradiente unificado a `--color-logo-gradient`).
- [x] *(nuevo)* **brandLogo.css** — Componente `.brand-mark` canónico creado (gradiente único + SVG), usado en share + device + base para el resto.
- [~] **f1-logo-sidebar/admin/profile/auth** (M) — **Diferido:** sus tiles existentes funcionan y ya usan tokens de gradiente; migrarlos al componente es bajo valor / más riesgo sin render.
- [~] **f1-settings-container** (M) — **Diferido:** unificar admin 1080 vs profile 720 es una decisión de layout (los dashboards suelen ir más anchos).
- [~] **f1-extract-toggle** (M) — **Diferido:** refactor de organización (el toggle solo vive en admin).
### Responsive: reflow del file manager ✅ (overrides solo-móvil → desktop intacto)
- [x] **f1-list-mobile** (L) — **Reflow robusto basado en flex** en `@media (max-width:640px)`: cada fila → línea compacta (icono+nombre … tamaño+acciones), header de columnas oculto. Flex ignora los tracks del grid → sin desalineación header/fila.
- [x] **f1-list-trash-mobile** (M) — Cubierto por el reflow universal (oculta `.path-cell` en móvil).
- [x] **f1-list-fav-recent** (M) — Cubierto por el reflow universal (mismo `.file-item`).
- [x] **f1-grid-density** (M) — `--grid-card-min` tokenizado (200px → 140px en móvil) + gap apretado.
- [x] **f1-actions-bar-responsive** (M) — `flex-wrap` + `height:auto` en móvil.
- [x] **f1-gutter-align** (S) — Token `--gutter` (24px) en topbar **y** content → comparten borde izquierdo; baja a 16px en móvil vía override de `:root` en media query.
- [x] **f1-vh-views** (M) — `100vh → 100dvh` en 6 vistas (music/auth/admin/profile/device/share).
- [~] **f1-mobile-first-sidebar / topbar** (M) — **Diferido:** invertir a mobile-first es refactor con riesgo de regresión desktop, valor de usuario bajo (ya funcionan).
- [~] **f1-sidebar-bp-sync** (M) — Diferido (requiere revisar el supuesto 768px en JS).
- [~] **f1-mq-named** (L) — Diferido (mismo bloqueo que **f0-breakpoints**: `@custom-media` no es nativo y dev sirve CSS crudo sin preprocesar → rompería las media queries en `cargo run`).
- [~] **f1-container-query-list** (L) — Diferido (el reflow flex ya logra el objetivo móvil; container query es mejora opcional).
- [~] **f1-sidebar-resizable** (L) — Diferido (feature: JS + localStorage).
- [~] **f1-density-toggle** (M) — Diferido (feature: UI + wiring de los tokens `--density-*` ya definidos).
### Rendimiento (build)
> **Corrección (2026-06):** SÍ existe un build pipeline en Rust — [`build.rs`](../build.rs) (release) copia `static/→static-dist/`, bundlea CSS/JS a `app.{hash}.css|js` (content-hash FNV-1a), minifica con **lightningcss** (CSS) y **oxc** (JS), reescribe `index.html` y actualiza `sw.js`. **Sin npm/devDependencies** — todo son crates Rust ya en `Cargo.toml`. Esto desbloquea trabajo antes diferido "por no haber build step", pero cada tarea tiene su propio bloqueo real (abajo), distinto de la falsa premisa anterior.
- [x] **f1-resource-hints** (M) — **Hecho (build.rs):** `rewrite_index_html` inyecta `<link rel="preload" as="style">` + `<link rel="modulepreload">` para los bundles hasheados, justo tras `<meta charset>` (charset queda primero). El `theme-init.js` clásico es render-blocking y retrasa el descubrimiento de los bundles; los hints arrancan ambas descargas en paralelo, ahorrando un RTT serializado. _Verificado: harness `rustc` aislado sobre el `index.html` real → 1 stylesheet + hints presentes; build release regenera `static-dist/index.html`._
- [x] **f1-inline-theme-init** (S) — **Hecho (build.rs):** `theme-init.js` (clásico, render-blocking, ~200 B) ahora se **inlinea minificado** en el `<head>` de index.html durante `rewrite_index_html` → una petición menos en el critical path en la primera carga (antes de tener SW). Debe correr antes del paint (evita flash de tema) y se mantiene en su posición. Las otras 4 páginas (login/admin/profile/share) conservan la referencia externa (archivo cacheado). Fallback al `<script src>` si la lectura falla. _Verificado en `static-dist/index.html`: 0 `<script src=…theme-init>`, 1 script inline; archivo externo intacto._
- [~] **f1-critical-css** (L) — **Diferido (razón real, no "build step"):** inline crítico exige extraer el subconjunto above-the-fold (necesita render headless / penthouse) y cargar el resto async sin FOUC → **requiere render-review**. Inlinear el bundle entero infla el HTML (que va por `include_str!` al binario) y mata el cache de CSS. No es seguro a ciegas.
- [~] **f1-code-split** (XL) — **Diferido (razón real):** el bundler de `build.rs` es un **concatenador del grafo completo** (un IIFE, elimina `import`/`export`). Code-splitting de verdad necesita emisión de chunks + dedup de deps compartidas en `build.rs` **y** refactor de los entry points (photos/music) a `import()` dinámico. **admin/profile ya están fuera del bundle** (páginas aparte, minificadas sueltas por `minify_tree_js`). Cambio grande y arriesgado, ROI bajo en una SPA de un solo shell.
- [x] **f1-thumb-content-type** (S) — **Hecho (backend Rust):** `thumbnail_content_type()` en [mime_detect.rs](../src/common/mime_detect.rs) (reusa `infer`, 0 deps nuevas) detecta el formato real por magic bytes; los 3 `image/jpeg` hardcodeados en [file_handler.rs](../src/interfaces/api/handlers/file_handler.rs#L386) → Content-Type correcto. El fast-path (PNG/GIF/WebP guardado tal cual) ya no se sirve como JPEG. _Verificado: fmt + clippy -D warnings + 15 tests._
---
## FASE 2 — Estados e accesibilidad (el salto a "profesional")
### Foco, disabled, loading ✅ — baseline global + matriz de `.btn`
- [x] **f2-focus-token** (S) — **[base/a11y.css](../static/css/base/a11y.css)**: `:focus-visible { outline: 2px solid var(--color-focus-ring); offset 2px }` global + `:focus:not(:focus-visible){outline:none}` (suprime el anillo en click, lo muestra con teclado).
- [x] **f2-focus-rollout** (L) — El baseline da anillo de teclado a **todo** elemento sin override propio (botones, nav, links, context-menu, chips…). Mouse users: 0 cambio; teclado: foco visible en toda la app.
- [x] **f2-remove-outline-important** (S) — Los 2 `outline:none !important` del languageSelector eliminados → el toggle de idioma recupera anillo de teclado.
- [x] **f2-btn-focus** (S) — `.btn:focus-visible` explícito (anillo crujiente sobre los gradientes).
- [x] **f2-btn-disabled** (M) — `.btn:disabled / [disabled] / .is-disabled`: dimmed, sin lift, `pointer-events:none`.
- [x] **f2-btn-loading** (M) — `.btn.is-loading / [aria-busy]`: oculta el label + spinner inline (`@keyframes spin` canónico + `--spin-duration`), bloquea interacción.
- [x] **f2-audit-outline-none** (L) — **Auditado regla por regla:** son **8 reglas** (no 24 — el conteo previo contaba ocurrencias e ignoraba el anillo), **todas en inputs de texto** y **todas con indicador visible** → **0 peladas/rotas**. 7 ya usan el patrón correcto (`outline:none` + anillo acento `box-shadow`), que para inputs **debe** mostrarse en `:focus` (ratón+teclado) — convertirlos a `:focus-visible` sería peor UX. La única inconsistente (`.music-shares-input`: borde-only a `--color-text`) **armonizada** al anillo acento estándar. _Verificado: barrido confirma 0 peladas; build 0 errores._
- [~] **f2-states-components** (L) — **Parcial:** el foco de todos los componentes ya lo cubre el baseline. Falta disabled/loading por-componente más allá de `.btn`.
### Contraste WCAG ✅ — audit completo: 0 fallos en light Y dark (verificado por script)
- [x] **f2-contrast-text** (M) — muted/subtle/faint light → `#5e6a78` (pasan AA sobre `#fff`, page `#f5f7fa` **y** muted `#f0f3f7`). _El audit pilló que page/muted bg fallaban (4.43/4.28) — corregido._
- [x] **f2-contrast-dark** (M) — muted/subtle/faint dark → `#9fadbe` (pasan AA sobre surface, page **y el hover `#334155`**, que fallaba a 4.04/3.50).
- [x] **f2-contrast-link** (M) — auth-toggle-link, about-link, language-option activa → `--color-accent-text`; share-link ya iba a info (Fase 1). _Iconos y estados hover/activos se dejan en accent vibrante (intencional)._
- [x] **f2-contrast-matrix** (L) — **Audit exhaustivo** (resuelve `light-dark()` + alias): cada par text×bg + semántico en ambos modos. accent-text light → `#cc3a16` (pasaba 4.45 sobre page → ahora ≥4.5). **Resultado: 0 fallos.**
### Teclado, landmarks y semántica ✅ — la nav ya es operable por teclado
- [x] **f2-nav-anchors** (M) — Los 8 `<div class=nav-item>` → **`<button class=nav-item type=button>`** (teclado nativo Enter/Space, 0 cambio en el JS de click) + resets de botón en `.nav-item` + iconos `aria-hidden`.
- [x] **f2-nav-aria-current** (S) — `aria-current="page"` en el item activo (en `setCurrentSection`, [navigation.js](../static/js/app/navigation.js)).
- [x] **f2-landmarks-index** (S) — `.nav-menu` → `<nav aria-label="Primary">`; `.content-area` → `role="main" id="main"`. _(`<header>` del topbar: opcional, omitido.)_
- [x] **f2-skip-link** (S) — `<a href="#main" class="skip-link">` como primer elemento del body + estilo en a11y.css (oculto hasta foco).
- [x] **f2-lang** (S) — `lang="en"` en `<html>` de index.html y login.html (fallback estático; languageSelector.js lo actualiza en runtime).
- [x] **f2-landmarks-login** (S) — `.auth-container` → `role="main"` (+ el h1 sr-only de Fase 1).
- [x] **f2-landmarks-secondary** (M) — `role="main"` en admin/profile/share/device-verify; nextcloud-* ya tenían `lang`.
- [~] **f2-roving-tabindex** (L) — **Diferido:** navegación por flechas en grid/lista es JS no trivial (gestión de tabindex móvil).
### Modales, live regions, formularios — núcleo de modales hecho
- [x] **f2-modal-semantics** (M) — `role="dialog"` + `aria-modal="true"` + `aria-labelledby` en input-modal y about-modal (id en su h2).
- [x] **f2-modal-focus-trap** (M) — **Focus-trap (Tab cicla dentro) + guardado/restauración de foco** al trigger en la clase Modal ([modal.js](../static/js/components/modal.js)). _Verificado con `node --check`._
- [~] **f2-modal-escape** (M) — input-modal ya tenía ESC + click-overlay (confirmado). _Los otros overlays (share/groups/lightbox) son separados → follow-up._
- [x] **f2-icon-button-names** (M) — `aria-label` + `aria-hidden` en los botones de icono sin nombre (notif-bell, user-avatar, modal-close); el resto ya tenía label.
- [x] **f2-theme-radio** (S) — El radiogroup ya mantiene `aria-checked` (userMenu.js:104); arrow-roving = polish opcional.
- [x] **f2-live-region** (M) — **Hecho:** [liveRegion.js](../static/js/core/liveRegion.js) crea una región `aria-live` global (polite + assertive, `.sr-only`, lazy); [uiNotifications.js](../static/js/app/uiNotifications.js) anuncia cada notificación (errores en `assertive`). El toast de errorBoundary ya tenía `role="alert"`. _`node --check` OK; bundle release verificado._
- [~] **f2-form-errors** (M) — **Diferido:** `aria-invalid`/`role=alert` + foco al primer inválido en auth.js.
- [~] **f2-touch-targets** (M) — **Diferido:** subir iconos a 44px es cambio visual de layout — mejor con la app delante.
- [~] **f2-lang-picker-keyboard** (M) — **Diferido:** combobox custom, JS no trivial.
### Movimiento y preferencias del sistema ✅ — media queries CSS (aditivas, riesgo cero)
- [x] **f2-reduced-motion** (S) — **Guard global `prefers-reduced-motion`** en a11y.css (animaciones/transiciones a ~0, sin scroll suave). Era 0 ocurrencias → ahora honra la preferencia del SO en toda la app.
- [x] **f2-prefers-contrast** (M) — Tier `prefers-contrast: more`: bordes más fuertes, muted/subtle/faint → secondary, anillo de foco 3px.
- [x] **f2-forced-colors** (S) — `forced-colors: active`: anillo de foco usa `Highlight` del sistema.
### Skeletons y breadcrumb (loading sin salto)
- [x] **f2-skeleton-component** (M) — **[skeleton.css](../static/css/components/skeleton.css) creado:** primitivo `.skeleton` reutilizable + `.skeleton-line/-row/-tile` (la row hereda las columnas de la lista). Honra reduced-motion.
- [x] **f2-files-skeleton** (M) — **Cableado:** [filesView.js](../static/js/app/filesView.js) reemplaza el spinner de carga por **skeleton cards (grid) / rows (list)** según `app.currentView` (8 placeholders, `role=status`/`aria-busy`, honra reduced-motion). Nuevos `.skeleton-card` (tile 4:3 + 2 líneas) y `.skeleton-icon` en [skeleton.css](../static/css/components/skeleton.css).
- [~] **f2-list-views-skeleton / f2-photos-skeleton / f2-search-skeleton** (S) — **Pendientes:** mismo patrón ya disponible; falta cablearlo en photos/search/otras vistas (la de archivos ya sirve de plantilla).
- [~] **f2-breadcrumb-collapse** (L) — **Diferido:** colapso con menú `…` requiere medir ancho en JS.
- [~] **f2-lightbox-dialog** (M) — **Diferido:** focus-trap en photosLightbox.js (reutilizable del patrón de modal.js).
- [~] **f2-photo-tile-keyboard** (M) — **Diferido:** tiles enfocables/operables (JS).
### Superficies externas: estados — login cubierto
- [x] **f2-ext-focus** (M) — Cubierto por el baseline global `:focus-visible` de a11y.css (las 3 páginas cargan main.css); inputs ya tienen anillo border/box-shadow.
- [x] **f2-login-submit-loading** (M) — Login: `.is-loading`+`aria-busy`+disabled en submit, reset en `finally` ([auth.js](../static/js/features/auth/auth.js)) + CSS de spinner en `.auth-button`. _`node --check` OK._
- [x] **f2-ext-aria** (M) — `autocomplete` en login (`username`/`current-password`/`email`). _register/admin-setup: follow-up._
- [~] **f2-share-loading / f2-device-loading** (M) — **Diferidos:** mismo patrón, falta cablearlo en publicShare.js / device-verify.js.
- [~] **f2-error-icons** (L) — **Diferido:** componente de banner con icono líder (CSS+HTML).
- [x] **f2-consolidate-ctas** (M) — **Hecho (tras revisar capturas):** el login tenía **dos botones primarios gradiente** compitiendo; el de magic-link pasa a **secundario** (`.auth-button-secondary`, tinte/ghost) → una sola acción primaria por pantalla.
- [x] **f2-progressive-magic-link** (M) — **Hecho:** el formulario de magic-link se **colapsa** tras un link discreto ("¿Sin contraseña? Recíbelo por correo", `#magic-link-toggle` con `aria-expanded`/`aria-controls`); al abrir, foco al email. Pantalla más tensa e intencional. _`node --check` OK._
### Pulido premium de superficies auth (tras capturas) ✅ — login + setup wizard
- [x] **f2-auth-brand-oxi** (S) — Wordmark con el **lockup "Oxi" en acento** (`.brand-oxi`, gradiente de marca con `background-clip:text`) en los 4 paneles — el tratamiento *ownable* del DESIGN-SYSTEM §3.
- [x] **f2-auth-field-icons** (M) — **Iconos guía** (user/mail/lock) en los 11 inputs vía **CSS `mask`** (data-URI sin color → token-safe; color por `--color-text-muted`, acento en `:focus-within`). 0 SVG inline en HTML, solo una clase modificadora.
- [x] **f2-auth-pw-toggle** (M) — **Show/hide de contraseña** (ojo) en los 5 campos password (`[data-pw-toggle]`, `aria-pressed`/`aria-label` localizada, icono eye/eye-off por máscara). _`node --check` OK._
- [x] **f2-auth-pw-match** (M) — **Indicador de coincidencia en vivo** bajo "Confirmar contraseña" (register + admin): check verde / cruz roja + texto (`auth.passwordsMatch` / `auth.passwords_mismatch`), `aria-live="polite"`.
- [x] **f2-auth-stepper-connector** (S) — Stepper del setup → **grid 3-col con línea-track conectora** + halo del paso activo (antes los círculos flotaban sueltos).
- [x] **f2-auth-input-definition** (S) — Borde de input a `--color-border-medium` (definición), placeholder a `--color-text-muted` (legibilidad); foco con anillo acento ya existía.
- [x] **f2-auth-divider-press** (S) — Divisor "o" → **uppercase/tracked/muted**; press táctil del botón (`translateY(1px)`); glow del tile suavizado (spread negativo). 2 claves i18n nuevas (`magicLinkToggle`, `passwordsMatch`) en **los 16 locales** (es/en propias) → `check-locales` verde.
- [x] **f2-auth-ambient** (M) — **Fondo atmosférico premium** centralizado en `--brand-ambient` (spotlight con `bg-surface` + mesh de marca) + `--brand-grain` (ruido fractal desaturado, `mix-blend overlay`, token-safe). Aplicado a login/share/device (mata la duplicación 3×); grano por ahora solo en login. _lightningcss minifica el data-URI sin fallar._
- [x] **f2-auth-readonly** (S) — Campo `[readonly]` (admin user) ya no se atenúa como placeholder: texto full-strength + fill "locked" (`--color-bg-input-alt`).
### Pulido tras 2.ª ronda de capturas (app completa) ✅
- [x] **f3-share-i18n** (M) — **El modal de Compartir salía en inglés** (faltaban 17 claves `share.*`/`actions.*`; el JS ya usaba `i18n.t` con fallback). Añadidas a **los 16 locales** (es propio + inglés de fallback) → modal en español (Compartir:, Personas, Enlaces públicos, Puede ver, Sin caducidad, Aplicar, Añadir…). `check-locales` verde.
- [x] **f1-nav-active-unify** (S) — Iconos del sidebar: **estado activo siempre en acento** (antes el icono activo cambiaba de color por `nth-child` → cal-7/8/9…). Decisión del usuario: **mantener colores en reposo** (tipo Notion), unificar solo el activo.
- [~] **f1-nav-avatar** (S) — **Mantenido a propósito:** el color del avatar es **por-usuario** (hash de `userId` → `uv-color-N`, patrón Slack/Google = identidad visual), no un bug. No se fuerza a acento.
### Correcciones del dashboard de archivos (3.ª ronda de capturas) ✅
- [x] **f-bug-date-1970** (S) — **BUG REAL:** la fecha "Modificado" salía **21/1/1970**. Causa: [resourceList.js](../static/js/components/resourceList.js#L623) hacía `formatDateTime(new Date(dateVal))` — `modified_at` es Unix en **segundos** (~1.7e9), `new Date()` lo tomaba como **ms** → epoch+21d. Fix: pasar `dateVal` directo (el formatter ya convierte seg→ms). _Verificado: OLD→1970, NEW→2025; `node --check` OK. Otros renders sin el antipatrón; `profile.js` usa ISO (no afectado)._
- [x] **f-grid-thumbnails** (M) — Miniaturas de la rejilla: `.file-icon` era fijo 100×70 (imagen pequeña, letterbox) → ahora **full-width con `aspect-ratio: 4/3`** + el `.file-thumb` (object-fit:cover) **llena edge-to-edge** (rejilla uniforme tipo Drive); iconos de no-imagen centrados sobre fondo placeholder.
- [x] **f-grid-name-ellipsis** (S) — El ellipsis estaba en `.name-cell` pero el texto va en un `span` (block) → no aplicaba. Movido al `span` (`nowrap/overflow/ellipsis`) + **`title`** en los nombres (folder+file) para tooltip al truncar.
- [x] **f-grid-meta** (S) — El label redundante **"Imagen"** bajo cada card (ya se ve por la miniatura) → reemplazado por el **tamaño** (`size-cell`) como metadato secundario. _(Carpetas muestran "--" en rejilla — edge case menor.)_
- [x] **f-files-skeleton** (M) — Skeletons cableados en la carga de archivos (ver `f2-files-skeleton`) → sin flash de lista vacía mientras cargan miniaturas/datos.
- [x] **f-breadcrumb-home** (S) — El home folder mostraba su nombre técnico "My Folder - admin" → ahora muestra la etiqueta amigable **"Archivos"** (reutiliza `nav.files`, ya en los 16 locales; el nombre real queda como `title`).
### Card premium de la rejilla (4.ª ronda — "producto final") ✅
- [x] **f-card-premium** (M) — Redesign de la grid card: **borde hairline 1px → acento al hover** (antes 2px gris), **hover signature** (`translateY(-3px)` + sombra suave grande + **miniatura `scale(1.04)`** dentro del `overflow:hidden`), **anillo interior** en la miniatura (`inset 0 0 0 1px`), tipografía `text-sm`, transiciones con tokens de motion.
- [x] **f-card-overlay-actions** (M) — Estrella/kebab/checkbox/badge-shared **ya no flotan en la esquina de la card** → reposicionados **sobre la miniatura** con **scrim frosted** (`--color-scrim-control` nuevo + `backdrop-filter`): checkbox top-left, estrella+kebab top-right, badge-shared top-left bajo el checkbox.
- [x] **f-dropzone-explicit** (M) — El `#dropzone` (mostrado al arrastrar archivos vía ui.js) pasa de caja inline pequeña a **overlay full-area** sobre el área de contenido (`position:fixed`, offset del sidebar, borde punteado, backdrop frosted, icono acento grande, "Arrastra archivos aquí"). `pointer-events:none` en hijos evita el flicker de dragleave.
- [~] **f-grid-share-download-btns** (S) — **Diferido (opcional):** botones dedicados de compartir/descargar al hover vía `customActions` — pero ese mecanismo es **global** (afecta lista + carpetas), necesita scoping grid-only/file-only. El kebab ya cubre la función (el usuario lo marcó opcional).
- [—] **f-grid-select** — **Ya existía:** selección por checkbox al hover en rejilla.
- [x] **f-bug-tooltip-orphan** (S) — **BUG REAL:** el tooltip del email del avatar se quedaba pegado al salir el ratón. Causa: `_mountAvatarVignettes` re-renderiza la vignette con `replaceChildren` (p.ej. al actualizarse el storage), pero el popover de `attachTooltip` está portalado a `document.body` y nadie llamaba a su cleanup → quedaba huérfano y visible. Fix: WeakMap de cleanups + `disposeVignette()` que se llama sobre el hijo viejo antes de re-montar. _`node --check` OK._
### Pulido del menú de usuario (desplegable) ✅
- [x] **f-menu-no-avatar-tooltip** (S) — Opción `noTooltip` en la vignette → el avatar propio del topbar **ya no muestra el tooltip del email** (redundante con el header del menú + solapaba la campana). Mata la causa del bug y el "tell" de redundancia.
- [x] **f-menu-appearance-icon** (S) — Icono líder de "Apariencia" `fa-moon` → **`fa-adjust`** (medio-círculo de tema/contraste; FA5+FA6) — neutro, ya no implica modo oscuro.
- [x] **f-menu-row-focus** (S) — `:focus-visible` en las filas del menú (mismo tinte que hover) → navegación por teclado clara.
- [—] **f-menu-segmented-aria** — **Ya existía:** los 3 botones del segmented (sol/escritorio/luna) ya tenían `aria-label` i18n (light/auto/dark).
- [~] **f-menu-role-chip** (S) — **Diferido:** mover el badge "Admin" junto al nombre en el header requiere reestructurar la vignette (generada por JS). Bajo valor / más riesgo.
- [~] **f-menu-shortcut-hints** (S) — **Diferido:** mostrar atajos (⌘,) sin que existan los atajos reales sería una afordancia falsa; primero habría que cablear los shortcuts.
### Pulido premium de la list view (tras captura) ✅
- [x] **f-list-thumb-ring** (S) — Miniaturas de lista a 40×40 + **anillo interior** (`inset 0 0 0 1px`) → consistente con la rejilla premium (no sangran sobre la fila).
- [x] **f-list-row-accent** (S) — **Barra-acento izquierda** en hover/selected (`inset 3px 0 0 var(--color-accent)`, sin layout shift) + transición → énfasis "esta fila".
- [x] **f-list-hover-actions** (S) — Kebab **revelado al hover** (`@media (hover:hover)`; en táctil sigue visible; visible en `:focus-within` para teclado) → filas más limpias.
### Última milla del login (tras captura) ✅
- [x] **f-login-bg-stronger** (S) — **El fondo se veía blanco/amateur** → `--brand-ambient` reforzado (glow 0.13→0.20 + **4 blobs cálidos** que llenan el lienzo, no solo esquinas) + grano a 0.6 → canvas dimensional, ya no plano.
- [x] **f-login-autofocus** (S) — **Autofocus** en el campo usuario al mostrar el panel (los paneles arrancan ocultos → focus por JS, no atributo) — cursor listo al cargar y al volver desde registro.
- [x] **f-login-capslock** (S) — **Aviso "Bloq Mayús activado"** bajo los campos de contraseña (login/register/admin) vía `getModifierState('CapsLock')` — evita el login fallido. Clave `auth.capsLock` en los 16 locales.
- [—] **f-login-sso** — **Ya existía:** botón SSO condicional (`configureOidcLoginUI` cuando hay OIDC).
- [~] **f-login-remember** (S) — **Diferido:** "Recordarme" necesita **soporte backend** (no hay param remember/persistent en `/api/auth/login`; sería un checkbox falso). Requiere TTL de refresh-token configurable.
- [—] **f-login-forgot** — **N/A:** no hay self-service password-reset (solo `admin_reset_password`). El **magic-link ES la vía de recuperación** sin contraseña — un "¿olvidaste?" apuntaría a nada.
- [x] **f-list-sortable-headers** (M) — **Hecho (opción A, sort plano tipo Drive):** las cabeceras Nombre/Tipo/Tamaño/Modificado son **clicables** → flat sort asc/desc (sin swimlanes), con **flecha** en la columna activa que invierte al re-clicar. Nuevo path en `filesView` (`_sortField` que sobreescribe el `order_by` del group-by y fuerza `_groupBy=''`; `setSortField` + getter `currentSort`); el header se sincroniza desde `_loadPage` (header click / toolbar group-by / dirección). `aria-label` localizado con dirección (`sort.asc/desc` en los 16 locales). _Verificado: state machine (click size→asc, re-click→desc, group type→limpia flat), node --check, build 0 errores._
- _Nota: el sort plano usa `order_by` server-side (el agrupado en swimlanes del toolbar sigue disponible aparte). El botón de dirección del toolbar ahora también re-sincroniza la flecha vía `_loadPage`._
### Panel de notificaciones (tras captura) ✅
- [x] **f-notif-i18n** (L) — **El idioma mezclado del panel** (notificaciones en inglés en app española): **52 `showNotification('inglés')` hardcoded** en 8 archivos → convertidas a `i18n.t` vía **workflow multi-agente** (1 agente/archivo, en paralelo) + manejo de interpolación (`${var}`→`{{param}}`). **67 claves `notif.*` nuevas** traducidas al español y añadidas a **los 16 locales** (es propio + inglés de fallback). _Verificado: node --check los 8, 0 hardcoded restantes, todas las claves referenciadas cubiertas, `check-locales` verde, build 0 errores._
- [x] **f-notif-scrollbar** (S) — Scrollbar del panel: del **global naranja grueso** a uno **fino gris (6px)** específico (`.notif-panel-body`).
- [~] **f-notif-relative-time / f-notif-fav-icon / f-notif-read-state** (S) — **Pendientes (menores):** hora relativa ("hace 5 min" con `formatRelativeTime`, requiere guardar timestamp real), color del icono de favorito (verde→dorado), y estado leído/no-leído.
### Bug del visor de imágenes (tras capturas) ✅
- [x] **f-bug-viewer-overflow** (S) — **BUG REAL:** las imágenes anchas se **desbordaban** del visor (scroll horizontal + barra naranja gruesa) → parecía que "se repetían" al scrollear. Causa: `.inline-viewer-image` es flex item y el `min-width: auto` por defecto de flexbox **ignora el `max-width: 100%`** (no encoge). Fix: `min-width: 0; min-height: 0` → la imagen ajusta entera, sin scroll. + **scrollbar fino/sutil** en el visor (para el caso de zoom; reemplaza el global acento grueso). _Build 0 errores._
### Rendimiento (foco en shell)
- [~] **f2-icon-foit** (L) — **Diferido:** eliminar el FOIT de iconos del shell requiere inlinear iconos críticos o un build — relacionado con el grupo de build/perf pendiente.
---
## FASE 3 — Pulido (de "sólido" a "premium")
### Empty states con CTA + ilustración — CSS compartido mejora TODAS
- [x] **f3-empty-component** (M) — `.empty-state` mejorado ([content.css](../static/css/layout/content.css)): icono **accent** (era gris apagado), primer `<p>` como título (lg/semibold/heading), desc muted con medida, spacing de CTA. Como todas las vistas comparten `.empty-state`/`.empty-state-icon`, **mejora las 7 a la vez** sin tocar su JS.
- [x] **f3-empty-files** (M) — CTA **"Upload files"** cableado en `showEmptyList` (ui.js) → abre el file picker. _`node --check` OK._
- [~] **f3-empty-photos / f3-empty-search / f3-empty-trash / f3-empty-rest** — **Visualmente mejoradas** por el CSS compartido; el **CTA propio** de cada una (subir fotos / limpiar búsqueda / etc.) queda de follow-up (JS por vista). Ilustraciones SVG bespoke → Fase 4.
### Fotos y lightbox (nivel Google Photos)
- [x] **f3-photo-placeholder** (M) — `decoding="async"` + fondo placeholder muted en `.photo-tile` + **fade-in al cargar** (`_fadeInTiles` chequea `img.complete`, listeners `once`) → se acaba el "pop-in". _`node --check` OK._
- [x] **f3-lightbox-preload** (M) — `_preloadNeighbors()` precarga el thumbnail prev/next en cada `_show` → navegación instantánea.
- [x] **f3-lightbox-spinner** (S) — Ya estaba: spinner girando (`.photos-loading i` con `spin`) + fallback "Failed to load" en error (verificado).
- [~] **f3-justified-grid** (L) — **Diferido:** grid justificado necesita aspect-ratios + algoritmo de packing (feature grande).
- [~] **f3-lightbox-zoom** (L) — **Diferido:** zoom/pan/doble-tap (gestos, JS no trivial).
- [~] **f3-lightbox-swipe** (L) — **Diferido:** swipe táctil con rebote (gestos).
### Refinamiento visual y movimiento — wins CSS aditivos hechos
- [x] **f3-listrow-hover** (S) — Transición en `.file-item` (bg/border) **rutada por `--motion-fast`+`--ease-standard`** (curva de desaceleración) → las filas ya no "snapean". El grid mantiene su transición de transform.
- [x] **f3-text-balance** (S) — `text-wrap: balance` en headings + `pretty` en prosa (empty-state, about, auth) en [typography.css](../static/css/base/typography.css).
- [x] **f3-tabular-nums** (M) — `font-variant-numeric: tabular-nums` en storage/badge/stat-value vía una regla central (size-cell y música ya lo tenían).
- [~] **f3-prose-measure** (M) — Parcial: `text-wrap: pretty` aplicado; la medida (max-width) ya la acotan los contenedores estrechos + `.empty-state p` (65ch explícito → Fase 1 via `.prose`).
- [~] **f3-filetype-glyphs / f3-dragdrop / f3-search-results / f3-toast-exit / f3-overlay-travel / f3-spinner-primitive / f3-shadow-adoption / f3-hover-active-press / f3-dark-elevation / f3-display-clamp** — **Diferidos:** todos **cambian valores visuales existentes** de forma amplia (sombras, easing, glifos, elevación) → necesitan verse renderizados antes. _El barrido de motion (rutar transiciones por `--ease-*`) y el de sombras (→ tokens `--shadow-*`) son los de mayor impacto pendiente._
### Login/share atmosféricos + marca — primera impresión CSS hecha
- [x] **f3-login-bg** (L) — Fondo del login: gris plano → **gradiente atmosférico** (dos radiales de brand-glow sutil sobre `--color-bg-page`). En dark, el glow cálido sobre el navy se ve premium.
- [x] **f3-share-bg** (M) — Mismo gradiente en share **y** device-verify (antes `bg-hover` plano) → primera impresión coherente.
- [x] **f3-card-elevation-ext** (M) — Las 3 tarjetas externas (auth-panel/share-card/dag-card) unificadas a `box-shadow: var(--shadow-xl)` + `border-radius: var(--radius-3xl)`.
- [x] **f3-share-trust-footer** (M) — Footer estático "🔒 Secured by OxiCloud" en la página de share. _Expiry/password badge dinámicos → follow-up JS._
- [x] **f3-logo-motion** (S) — El hover del logo ya respeta reduced-motion (vía el guard global de a11y.css).
- [~] **f3-share-attribution** (M+S) — **Diferido:** "compartido por" requiere exponerlo en la API (backend Rust) + render.
- [~] **f3-share-preview** (L) — **Diferido:** preview inline de archivo (JS + thumbnail).
- [~] **f3-device-code-segments** (M) — **Diferido:** input OTP segmentado (JS no trivial).
- [~] **f3-share-empty-error** (M) — **Diferido:** mejorar empty/error de la galería (JS/CSS).
- [~] **f3-brand-voice / f3-brand-voice-i18n** (M) — **Diferidos:** definir voz/tagline + reescribir "Acerca de" + propagar a 16 locales (contenido, decisión de marca).
### Marca: favicon / PWA / OG — wiring hecho (faltan rásters que no puedo generar)
- [x] **f3-pwa-manifest** (M) — [manifest.webmanifest](../static/manifest.webmanifest) + **iconos PNG maskable 192/512** rasterizados (vía `qlmanage` de macOS) → PWA instalable en todas las plataformas. Mantiene los SVG (`any`) + theme-color light/dark.
- [x] **f3-favicon-set** (M) — `apple-touch-icon` ahora apunta a **PNG 180×180** rasterizado (iOS ya muestra el icono al "añadir a inicio"; antes ignoraba el SVG). + SVG + favicon.ico + mask-icon en index/login/share.
- [x] **f3-og-image** (M) — **`og-image.png` 1200×630** rasterizado (recortado del thumbnail cuadrado de qlmanage); `og:image`/`twitter:image` apuntan al PNG en index/login/share → **previews reales** al compartir (las redes ignoraban el SVG).
- **✅ RESUELTO (antes el gap nº1 del audit):** los 3 PNG se generaron con `qlmanage -t -s N` (Quick Look rasteriza SVG en macOS) + `sips` para recortar el OG. Dimensiones exactas verificadas (180²/192²/512² + 1200×630), copiados a `static/logo/`, refs actualizadas. _iOS/redes/PWA ya no rotos._
### Responsive: pulido — CSS + a11y del drawer hecho
- [x] **f3-mobile-touch** (M) — `@media (max-width:768px)`: **≥44px** en toggle/search/notif/avatar, nav-items y `min-height:48px` en filas de lista (a11y.css).
- [x] **f3-drawer-focus-trap** (M) — Toggle con `aria-controls`+`aria-expanded` (sincronizado en open/close); foco al primer nav-item al abrir y **restaurado al toggle** al cerrar; **trap de Tab** dentro del drawer abierto (navigation.js). _`node --check` OK. `inert` de fondo omitido (el toggle vive en el fondo) — el overlay + trap lo cubren._
- [x] **f3-drawer-motion** (S) — Transición del sidebar → `var(--motion-slow) var(--ease-emphasized)` (curva de desaceleración, value-preserving 0.3s).
- [x] **f3-scrollbar-gutter** (S) — En móvil `scrollbar-gutter: auto` (sin gutter fantasma con scrollbars de overlay).
- [~] **f3-rtl-breakpoints** (M) — **Diferido:** verificación de paridad RTL en cada breakpoint → necesita render.
- [~] **f3-list-secondary-line** (M) — **Diferido:** línea secundaria (tamaño·fecha) en la fila móvil → restructura que conviene ver renderizada.
### Rendimiento (assets)
- [x] **f3-srcset-photos** (M) — Tiles con `srcset` (icon 150w / preview 400w / large 800w) + `sizes` → sirve la resolución justa (icon en móvil denso, large en retina). CLS ya lo cubre `aspect-ratio:1`. _`node --check` OK._
- [x] **f3-sw-strategy** (L) — **Navigation preload** añadido (enable + uso de `preloadResponse`) + bump de caché v27. El resto ya existía (precache versionado, `skipWaiting`, `clients.claim`, network-first HTML, stale-while-revalidate assets).
- [~] **f3-thumb-webp-avif** (L) — **Diferido:** WebP **lossy** (el que ahorra) necesita el crate `webp`/libwebp (dep nueva); el `image-webp` presente solo hace decode/lossless (no ayuda en fotos). AVIF necesita `ravif`. Decisión de dependencia.
- [~] **f3-lcp-preload** (M) — **Diferido:** en Photos/share la URL del LCP es **dinámica** (se conoce tras fetch JS) → no se puede `<link rel=preload>` estático sin lógica extra.
- [~] **f3-dead-css** (L) — **Diferido:** barrido de CSS muerto es arriesgado sin coverage tooling (clases generadas por JS → falsos positivos).
---
## FASE 4 — Clase mundial + guardarraíles (alcanzar y SOSTENER el 10)
### Interacciones de producto premium
- [x] **f4-command-palette** (L) — **Command palette global (Cmd/Ctrl+K)** ([commandPalette.js](../static/js/app/commandPalette.js) + [css](../static/css/components/commandPalette.css)): navegación a las 8 secciones + acciones (upload/profile/about/logout/admin), filtro por substring, ↑/↓/Enter/Esc, focus restaurado. **Ejecuta clicando los controles reales** → no se desincroniza. _`node --check` OK._
- [x] **f4-detail-polish** (S) — `::selection` con tinte de marca + `caret-color` acento (scrollbar ya era custom).
- [~] **f4-shortcut-grammar / f4-shortcut-help** (M/S) — Cmd+K ya es un atajo global; el sistema completo + overlay `?` quedan de follow-up.
- [~] **f4-view-transitions** (M) — **Diferido (doable):** envolver los cambios de sección en `document.startViewTransition()` (progresivo) — conviene verlo.
- [~] **f4-undo-destructive / f4-optimistic-everywhere / f4-dnd-finesse / f4-bulk-progress / f4-delight / f4-lightbox-filmstrip / f4-lightbox-shared-element / f4-empty-illustrations / f4-btn-signature / f4-high-dpi** — **Diferidos:** features grandes (undo/optimista/bulk), gestos/transiciones complejas (filmstrip/shared-element/dnd), o pulido que conviene ver renderizado.
### Internacionalización de verdad (16 locales) — Intl (sin deps)
- [x] **f4-i18n-format** (M) — `formatFileSize` → `Intl.NumberFormat` (separadores locale); `formatDateTime`/`formatDateShort` → pasan el **locale de la app** (antes el del navegador) en [formatters.js](../static/js/core/formatters.js).
- [x] **f4-i18n-relative-time** (S) — `formatRelativeTime()` con `Intl.RelativeTimeFormat` (CLDR, localizado) + **consolidados** los 2 `timeAgo` duplicados de admin/profile a usarlo (manteniendo el caso "never"). _`node --check` OK._
- [x] **f4-i18n-completeness-ci** (S) — [scripts/check-locales.mjs](../scripts/check-locales.mjs): claves faltantes/sobrantes + integridad de `{placeholders}`. Wireado en `just frontend-check`. **nl.json corregido → la suite pasa ✓** (los 6 mismatches igualados a en per-clave). _Hallazgo aparte: en.json mezcla `{{}}` y `{}` single en algunas claves (`actions.upload.complete`, `groups.member_count_other`) → bug latente de interpolación, consistente en los 16 → tarea i18n aparte._
- [~] **f4-i18n-plural** (L) — **Diferido:** `Intl.PluralRules` sin valor sin las formas plurales traducidas por locale (datos i18n).
- [~] **f4-i18n-collation** (M) — **Diferido:** no se encontró sort de nombres cliente (probablemente server-side).
- [~] **f4-i18n-bidi** (M) — **Diferido:** `unicode-bidi: isolate`/`dir="auto"` en nombres de usuario (CSS/JS contenido, follow-up).
- [~] **f4-i18n-rtl-logical** (XL) — **Diferido:** barrido físico→lógico (margin-left→margin-inline-start…) en toda la CSS.
### Offline, errores, onboarding, voz
- [x] **f4-error-boundary** (M) — [errorBoundary.js](../static/js/core/errorBoundary.js): `window.error` + `unhandledrejection` → toast throttled (`.error-toast`) + log a consola. Dependency-free, cargado primero. _`node --check` OK._
- [x] **f4-print** (M) — `@media print` en a11y.css: oculta chrome (sidebar/topbar/actions/cmdk) y limpia sombras para imprimir el contenido.
- [~] **f4-offline-shell / f4-offline-queue** (L/XL) — **Diferidos:** banner online/offline + cola durable de mutaciones (feature grande, termina el stub de background-sync del sw).
- [~] **f4-error-quota / f4-onboarding / f4-microcopy** (M/L) — **Diferidos:** estados de quota, primer-uso, y sistema de microcopy (contenido/feature).
- [x] **f4-live-region-async** (M) — **Hecho** (ver `f2-live-region`): región `aria-live` global que anuncia las notificaciones asíncronas.
- [~] **f4-pwa-install** (M) — **Diferido (doable):** prompt `beforeinstallprompt` + botón de instalar (tiene componente visual → mejor decidir ubicación con la app delante).
- [~] **f4-sr-flow-pass** (L) — **Diferido:** test manual con lector de pantalla (no automatizable aquí).
### Design system documentado (la fuente de verdad)
- [x] **f4-token-docs** (L) — [scripts/gen-token-docs.mjs](../scripts/gen-token-docs.mjs) → [docs/TOKENS.md](TOKENS.md) (**430 tokens, 20 grupos**, auto-generado).
- [x] **f4-a11y-docs** (S) — Sección de accesibilidad codificada en [docs/DESIGN-SYSTEM.md](DESIGN-SYSTEM.md) §2.
- [x] **f4-brand-guide** (M) — Mini-guía de marca (mark/wordmark/accent/clear-space/do-don'ts/maskable/OG) en DESIGN-SYSTEM.md §3.
- [~] **f4-perf-docs** (M) — **Parcial:** los guardarraíles documentados; falta la arquitectura de build/perf (depende de formalizar el `static-dist`).
- [~] **f4-gallery-page / f4-ds-site / f4-gallery-vr-axe** (XL/L/M) — **Diferidos:** styleguide vivo + snapshot/axe → necesitan tooling/build.
- [x] **f4-brand-drift-ci** (M) — **Hecho:** [check-brand-drift.mjs](../scripts/check-brand-drift.mjs) bloquea cambios silenciosos del logo (hash sha256 de `logo-plain.svg`) y del gradiente (`--color-logo-gradient`) contra un baseline bloqueado; en `just frontend-check`. **Pasa ✓**.
- [~] **f4-token-parity** (M) — **Diferido:** contrato de paridad con assets de diseño exportados (necesita los assets de diseño como fuente).
- [~] **f4-variable-font** (XL) — **Diferido:** evaluar/adoptar fuente variable self-hosted (decisión + asset).
- [~] **f4-opentype** (S) — **Diferido:** features OpenType (limitado en system stack; útil con fuente variable).
### Guardarraíles de CI — los sin-deps entregados y PASANDO
- [x] **f4-contrast-ci** (L) — [scripts/check-contrast.mjs](../scripts/check-contrast.mjs): resuelve `light-dark()`+alias y **falla si cualquier par texto/fondo o semántico baja de 4.5:1** en light o dark. **Pasa ✓**.
- [x] **f4-heading-order-ci** (M) — [scripts/check-headings.mjs](../scripts/check-headings.mjs): exige ≥1 `h1` y sin saltos de nivel por página. **Pasa ✓**.
- [x] **f4-dead-token-sweep** (M) — [scripts/check-dead-tokens.mjs](../scripts/check-dead-tokens.mjs): reporta tokens definidos sin `var()` (informativo, excluye prefijos dinámicos). **Encontró 96 candidatos** a podar.
- [x] **f4-ci-single-gate** (M) — Recipe `just frontend-check` que corre los 4 scripts (contrast/headings/locales/dead-tokens). _Falta añadir stylelint/biome/tsc cuando haya `node_modules`._
- [~] **f4-stylelint-scales / f4-lint-focus / f4-lint-breakpoints** (L/M) — **Pendiente:** reglas escribibles, pero **activarlas rompe CI hasta migrar los 184 px off-grid** (f1-snap-fractional) — hacerlo después de esa migración.
- [~] **f4-axe-ci / f4-keyboard-ci / f4-visual-regression / f4-dark-parity / f4-crossbrowser / f4-lighthouse-ci** — **Diferidos:** necesitan Playwright/axe/Lighthouse (**deps + browsers**, sin `node_modules` aquí). Decisión de tooling.
- [x] **f4-brand-drift-ci** (M) — **Hecho** (consolidado arriba): [check-brand-drift.mjs](../scripts/check-brand-drift.mjs) en `just frontend-check`.
> _Nota: este grupo se consolidó arriba (sección «Design system documentado»). El
> bloque duplicado de planificación original se eliminó para no inflar el conteo de
> pendientes — `f4-token-docs`/`a11y-docs`/`brand-guide` están hechos; el resto
> (gallery-page/ds-site/gallery-vr-axe/token-parity/variable-font/opentype/perf-docs)
> está diferido con su razón en la sección de arriba._
---
## Camino crítico (el orden que de verdad importa)
```
f0-stylelint-typo ─┐ (sin esto, nada se lintea)
f0-space/radius/type/motion/elevation/zindex ─┬─► f1-mig-* (migración) ─► f2-focus/contrast/nav ─► f4-stylelint/axe/contrast-ci
f0-oklch-ramps ────► f0-semantic-* ────────────┴─► f1-demote-*/fileicon-* (paleta)
f0-brand-mark ─────► f1-logo-* ───────────────────► f1-about-real-mark
f0-perf-baseline ──► f1-critical-css ─────────────► f4-lighthouse-ci
```
> **Nota de constraint (CLAUDE.md) — actualizada 2026-06:** el proyecto **SÍ tiene build pipeline**
> ([`build.rs`](../build.rs): bundling + content-hash + minify vía crates Rust lightningcss/oxc,
> **sin npm**). Lo que de verdad sigue necesitando devDependencies npm / navegadores es solo el
> **tooling de test de UI**: Playwright (keyboard/visual-regression/cross-browser), axe-core
> (a11y automatizada) y Lighthouse-CI (presupuestos de perf). WebP lossy necesita el crate `webp`.
> El resto de "diferidos por build" en realidad están bloqueados por: render-review (critical-CSS),
> complejidad/ROI (code-split), o el servido de CSS crudo en dev (`@custom-media`). CLAUDE.md
> prohíbe "npm deps no listadas" → el tooling de test necesita aprobación explícita; el riesgo está
> acotado a `devDependencies` (no toca el runtime ni el binario).
## Resumen por área (de la auditoría)
| Área | Nota actual | Tareas |
|------|:-----------:|:------:|
| Tokens / fundamentos | 3.0 | 29 |
| Tipografía | 3.0 | 43 |
| Color / paleta | 4.0 | 32 |
| Accesibilidad | 3.0 | 35 |
| Layout / responsive | 4.5 | 34 |
| Componentes / movimiento | 4.5 | 39 |
| Auth / primera impresión | 4.5 | 41 |
| Vistas núcleo | 4.0 | 41 |
| Marca / cohesión | 3.5 | 25 |
| Rendimiento | 6.5 | 15 |
| Tooling / CI / docs | 5.5 | 36 |
| Completitud (lo que faltaba) | — | 32 |
| **Total** | **4.8** | **402** |
justfile
+12
View File
@@ -57,6 +57,18 @@ check:
cargo fmt --all
cargo clippy --all-features --all-targets -- -D warnings
# Frontend design-system / a11y guardrails — pure Node, no extra deps.
# Single gate: WCAG contrast, heading order, locale completeness, dead tokens,
# brand-mark drift.
# (Also run `stylelint static/css/**/*.css`, `biome check`, `tsc -p jsconfig.json
# --noEmit` once node_modules is installed — those need devDependencies.)
frontend-check:
node scripts/check-contrast.mjs
node scripts/check-headings.mjs
node scripts/check-locales.mjs
node scripts/check-dead-tokens.mjs
node scripts/check-brand-drift.mjs
# audit security (condition: cargo install cargo-audit)
audit:
cargo audit
scripts/check-brand-drift.mjs
+49
View File
@@ -0,0 +1,49 @@
#!/usr/bin/env node
// check-brand-drift.mjs — guard the brand mark against silent change.
//
// Fails (exit 1) if the canonical logo SVG or the logo gradient token drift
// from the locked baseline below. The brand is an ownable asset; an accidental
// recolour, a stretched glyph, or a "tweaked" gradient should never sneak in
// via an unrelated PR. If a change IS intentional, update LOCK deliberately
// (with design sign-off) — that diff is the audit trail.
//
// node scripts/check-brand-drift.mjs
import { readFileSync } from 'node:fs';
import { createHash } from 'node:crypto';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const repo = join(dirname(fileURLToPath(import.meta.url)), '..');
const sha16 = (s) => createHash('sha256').update(s).digest('hex').slice(0, 16);
// ── Locked baseline ─────────────────────────────────────────────────────────
// Update INTENTIONALLY when the brand changes (and only then).
const LOCK = {
logoHash: '7fbd2016e9caeac1', // sha256(static/logo/logo-plain.svg)[:16]
gradient: 'linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%)' // --color-logo-gradient
};
const logo = readFileSync(join(repo, 'static/logo/logo-plain.svg'), 'utf8');
const vars = readFileSync(join(repo, 'static/css/base/variables.css'), 'utf8');
const gradMatch = vars.match(/--color-logo-gradient:\s*([^;]+);/);
const gradient = gradMatch ? gradMatch[1].trim().replace(/\s+/g, ' ') : '(token missing!)';
let failed = false;
const actualLogoHash = sha16(logo);
if (actualLogoHash !== LOCK.logoHash) {
console.error(`✖ Brand mark drift: logo-plain.svg hash ${actualLogoHash} ≠ locked ${LOCK.logoHash}`);
failed = true;
}
if (gradient !== LOCK.gradient) {
console.error(`✖ Logo gradient drift:\n actual: ${gradient}\n locked: ${LOCK.gradient}`);
failed = true;
}
if (failed) {
console.error(
'\nThe brand mark or logo gradient changed. If this is intentional, update' +
'\nLOCK in scripts/check-brand-drift.mjs (with design sign-off).'
);
process.exit(1);
}
console.log('✓ Brand mark + logo gradient match the locked baseline.');
scripts/check-contrast.mjs
+103
View File
@@ -0,0 +1,103 @@
#!/usr/bin/env node
// WCAG AA contrast guardrail.
//
// Resolves every text/background design token (through light-dark() and var()
// aliases) and fails (exit 1) if any text-on-surface or semantic text-on-tint
// pair drops below 4.5:1 in either light or dark mode. Keeps the palette from
// silently regressing into unreadable greys.
//
// node scripts/check-contrast.mjs
import { readFileSync } from 'node:fs';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const varsPath = join(
dirname(fileURLToPath(import.meta.url)),
'..',
'static',
'css',
'base',
'variables.css'
);
const src = readFileSync(varsPath, 'utf8');
/** First (\:root) definition of each token. */
const raw = {};
for (const m of src.matchAll(/(--[a-z0-9-]+)\s*:\s*([^;]+);/gi)) {
if (!(m[1] in raw)) raw[m[1]] = m[2].trim();
}
function resolve(val, mode, depth = 0) {
if (depth > 12 || val == null) return null;
val = String(val).trim();
let m = val.match(/^light-dark\(\s*(.+?),\s*(.+)\)\s*$/);
if (m) return resolve(mode === 'light' ? m[1] : m[2], mode, depth + 1);
m = val.match(/^var\(\s*(--[a-z0-9-]+)\s*\)/);
if (m) return resolve(raw[m[1]], mode, depth + 1);
m = val.match(/^#([0-9a-fA-F]{3,8})\b/);
if (m) {
let h = m[1];
if (h.length === 3)
h = [...h].map((c) => c + c).join('');
return '#' + h.slice(0, 6).toLowerCase();
}
if (val === 'white') return '#ffffff';
if (val === 'black') return '#000000';
return null;
}
const lin = (c) => {
c /= 255;
return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
};
const lum = (h) =>
0.2126 * lin(parseInt(h.slice(1, 3), 16)) +
0.7152 * lin(parseInt(h.slice(3, 5), 16)) +
0.0722 * lin(parseInt(h.slice(5, 7), 16));
const ratio = (fg, bg) => {
const a = lum(fg);
const b = lum(bg);
return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
};
const texts = [
'--color-text', '--color-text-heading', '--color-text-secondary', '--color-text-muted',
'--color-text-subtle', '--color-text-faint', '--color-text-placeholder', '--color-text-gray',
'--color-text-medium', '--color-text-light', '--color-text-faint2', '--color-text-dim', '--color-text-dark'
];
const bgs = [
'--color-bg-surface', '--color-bg-page', '--color-bg-hover', '--color-bg-input',
'--color-bg-subtle', '--color-bg-muted', '--color-bg-input-alt'
];
const semantic = [
['--color-success-text', '--color-success-bg'],
['--color-error-text', '--color-error-bg'],
['--color-warning-text', '--color-warning-bg'],
['--color-info-text', '--color-info-bg'],
['--color-accent-text', '--color-bg-surface'],
['--color-accent-text', '--color-bg-page'],
['--color-accent-text', '--color-bg-muted']
];
const fails = [];
for (const mode of ['light', 'dark']) {
for (const t of texts)
for (const b of bgs) {
const fg = resolve(raw[t], mode);
const bg = resolve(raw[b], mode);
if (fg && bg && ratio(fg, bg) < 4.5)
fails.push(`${mode}: ${t}(${fg}) on ${b}(${bg}) = ${ratio(fg, bg).toFixed(2)}`);
}
for (const [t, b] of semantic) {
const fg = resolve(raw[t], mode);
const bg = resolve(raw[b], mode);
if (fg && bg && ratio(fg, bg) < 4.5)
fails.push(`${mode}: ${t}(${fg}) on ${b}(${bg}) = ${ratio(fg, bg).toFixed(2)}`);
}
}
if (fails.length) {
console.error('✖ WCAG AA contrast failures (<4.5:1):\n ' + fails.join('\n '));
process.exit(1);
}
console.log('✓ All text/background token pairs pass WCAG AA (4.5:1) in light and dark.');
scripts/check-dead-tokens.mjs
+43
View File
@@ -0,0 +1,43 @@
#!/usr/bin/env node
// Dead-token report (informational, exit 0): design tokens defined in
// variables.css but never referenced via var() anywhere in static/.
//
// NOTE: a cleanup AID, not a hard gate — some tokens (file-type / calendar
// colours) are referenced by JS string construction, so excluded prefixes are
// skipped to avoid false positives. Verify before pruning.
//
// node scripts/check-dead-tokens.mjs
import { readFileSync, readdirSync, statSync } from 'node:fs';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const root = join(dirname(fileURLToPath(import.meta.url)), '..', 'static');
const EXCLUDE_PREFIX = ['--color-ft-', '--color-cal-']; // referenced dynamically from JS
const varsSrc = readFileSync(join(root, 'css', 'base', 'variables.css'), 'utf8');
const defined = [...varsSrc.matchAll(/(--[a-z0-9-]+)\s*:/gi)].map((m) => m[1]);
function walk(dir, files = []) {
for (const name of readdirSync(dir)) {
const p = join(dir, name);
if (statSync(p).isDirectory()) walk(p, files);
else if (/\.(css|js|html|webmanifest)$/.test(name)) files.push(p);
}
return files;
}
let corpus = '';
for (const f of walk(root)) corpus += readFileSync(f, 'utf8');
const used = new Set([...corpus.matchAll(/var\(\s*(--[a-z0-9-]+)/gi)].map((m) => m[1]));
const dead = defined
.filter((t) => !used.has(t))
.filter((t) => !EXCLUDE_PREFIX.some((p) => t.startsWith(p)))
.sort();
if (dead.length) {
console.log(`Dead-token candidates (defined, never referenced via var()): ${dead.length}`);
console.log(' ' + dead.join('\n '));
console.log('\n(Verify each before pruning — some may be referenced dynamically.)');
} else {
console.log('✓ No dead-token candidates.');
}
scripts/check-headings.mjs
+35
View File
@@ -0,0 +1,35 @@
#!/usr/bin/env node
// Heading-order guardrail: each page has at least one <h1> and never skips a
// level going deeper (e.g. h1 → h3 without an h2). Fails (exit 1) on violations.
//
// node scripts/check-headings.mjs
import { readFileSync, readdirSync } from 'node:fs';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const staticDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'static');
const pages = readdirSync(staticDir).filter((f) => f.endsWith('.html'));
let problems = 0;
for (const page of pages) {
const html = readFileSync(join(staticDir, page), 'utf8');
const levels = [...html.matchAll(/<h([1-6])\b/gi)].map((m) => Number(m[1]));
if (!levels.length) continue; // heading-less shells (error pages) are fine
const issues = [];
if (!levels.includes(1)) issues.push('no <h1>');
let prev = 0;
for (const lvl of levels) {
if (prev && lvl > prev + 1) issues.push(`skips h${prev}→h${lvl}`);
prev = lvl;
}
if (issues.length) {
problems++;
console.error(`${page}: ${issues.join(', ')} [order: ${levels.join(',')}]`);
}
}
if (problems) {
console.error(`\n✖ ${problems} page(s) with heading-order issues.`);
process.exit(1);
}
console.log('✓ All pages have an h1 and no skipped heading levels.');
scripts/check-locales.mjs
+55
View File
@@ -0,0 +1,55 @@
#!/usr/bin/env node
// Locale completeness + placeholder-integrity check.
//
// Fails (exit 1) if any locale is missing keys present in en.json, has stray
// extra keys, or if a translated string's {placeholders} differ from the
// English source. Wire into CI / pre-commit alongside the other linters.
//
// node scripts/check-locales.mjs
import { readFileSync, readdirSync } from 'node:fs';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const localesDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'static', 'locales');
/** Flatten a nested translation object to dotted keys. */
function flat(obj, prefix = '', out = {}) {
for (const [k, v] of Object.entries(obj)) {
const key = prefix ? `${prefix}.${k}` : k;
if (v && typeof v === 'object' && !Array.isArray(v)) flat(v, key, out);
else out[key] = v;
}
return out;
}
const placeholders = (s) => (typeof s === 'string' ? (s.match(/\{[^}]+\}/g) || []).sort() : []);
const en = flat(JSON.parse(readFileSync(join(localesDir, 'en.json'), 'utf8')));
const enKeys = Object.keys(en);
let problems = 0;
for (const file of readdirSync(localesDir).filter((f) => f.endsWith('.json') && f !== 'en.json')) {
const loc = flat(JSON.parse(readFileSync(join(localesDir, file), 'utf8')));
const missing = enKeys.filter((k) => !(k in loc));
const extra = Object.keys(loc).filter((k) => !(k in en));
const badPh = enKeys.filter(
(k) => k in loc && placeholders(en[k]).join() !== placeholders(loc[k]).join()
);
if (missing.length || extra.length || badPh.length) {
problems++;
console.error(`\n${file}:`);
if (missing.length)
console.error(
` missing ${missing.length}: ${missing.slice(0, 8).join(', ')}${missing.length > 8 ? ' …' : ''}`
);
if (extra.length) console.error(` extra ${extra.length}: ${extra.slice(0, 8).join(', ')}`);
if (badPh.length)
console.error(` placeholder mismatch ${badPh.length}: ${badPh.slice(0, 8).join(', ')}`);
}
}
if (problems) {
console.error(`\n✖ ${problems} locale file(s) have issues.`);
process.exit(1);
}
console.log('✓ All locales complete and placeholder-consistent.');
scripts/gen-token-docs.mjs
+62
View File
@@ -0,0 +1,62 @@
#!/usr/bin/env node
// Generates docs/TOKENS.md — a grouped reference of every design token defined
// in static/css/base/variables.css. Run after changing tokens:
// node scripts/gen-token-docs.mjs
import { readFileSync, writeFileSync } from 'node:fs';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const repo = join(dirname(fileURLToPath(import.meta.url)), '..');
const src = readFileSync(join(repo, 'static', 'css', 'base', 'variables.css'), 'utf8');
const tokens = [];
for (const m of src.matchAll(/^\s*(--[a-z0-9-]+)\s*:\s*([^;]+);/gim)) {
if (!tokens.some((t) => t[0] === m[1])) tokens.push([m[1], m[2].trim().replace(/\s+/g, ' ')]);
}
const CATEGORIES = [
['Spacing (4px grid)', /^--space-/],
['Radius', /^--radius/],
['Typography', /^--(text-|leading-|weight-|tracking-|font-|measure-|icon-)/],
['Z-index layers', /^--z-/],
['Motion (durations + easing)', /^--(motion-|ease-|spin-)/],
['Elevation (composed shadows)', /^--shadow-/],
['Breakpoints (reference)', /^--bp-/],
['Density', /^--density-/],
['Layout shell', /^--(sidebar-width|gutter|grid-card)/],
['Color — text', /^--color-text/],
['Color — background', /^--color-bg/],
['Color — border', /^--color-border/],
['Color — accent / brand', /^--color-(accent|logo|focus|on-accent|primary)/],
['Color — semantic (success/warn/danger/info)', /^--color-(success|error|danger|warning|info)/],
['Color — shadow alphas / overlays', /^--color-(shadow|overlay|on-overlay)/],
['Color — sidebar', /^--color-sidebar/],
['Color — file types', /^--color-ft/],
['Color — calendar dots', /^--color-cal/],
['Color — badges', /^--color-badge/],
['Color — other', /^--color-/],
['Other', /.*/]
];
const buckets = new Map(CATEGORIES.map(([name]) => [name, []]));
for (const [name, value] of tokens) {
const cat = CATEGORIES.find(([, re]) => re.test(name))[0];
buckets.get(cat).push([name, value]);
}
let md = `# Design tokens
> Auto-generated from \`static/css/base/variables.css\` by \`scripts/gen-token-docs.mjs\`.
> Do not edit by hand — re-run the generator after changing tokens.
**${tokens.length} tokens** across ${[...buckets].filter(([, v]) => v.length).length} groups.
\n`;
for (const [name, rows] of buckets) {
if (!rows.length) continue;
md += `\n## ${name}\n\n| Token | Value |\n| --- | --- |\n`;
for (const [tok, val] of rows) md += `| \`${tok}\` | \`${val.replace(/\|/g, '\\|')}\` |\n`;
}
writeFileSync(join(repo, 'docs', 'TOKENS.md'), md);
console.log(`✓ Wrote docs/TOKENS.md (${tokens.length} tokens).`);
src/common/di.rs
+21
View File
@@ -66,6 +66,7 @@ use crate::infrastructure::services::chunked_upload_service::ChunkedUploadServic
use crate::infrastructure::services::dedup_service::DedupService;
use crate::infrastructure::services::image_transcode_service::ImageTranscodeService;
use crate::infrastructure::services::jwt_service::JwtTokenService;
use crate::infrastructure::services::media_metadata_service::MediaMetadataService;
use crate::infrastructure::services::password_hasher::Argon2PasswordHasher;
use crate::infrastructure::services::path_resolver_service::PathResolverService;
use crate::infrastructure::services::thumbnail_service::{ThumbnailRefreshHook, ThumbnailService};
@@ -340,6 +341,10 @@ impl AppServiceFactory {
// Audio metadata service — created here so it can be wired into file_lifecycle.
let audio_metadata_service = self.create_audio_metadata_service(db_pool);
// Image/video capture-metadata service — extracts EXIF/container capture
// dates so the Photos timeline groups by real capture time, not upload time.
let media_metadata_service = self.create_media_metadata_service(db_pool);
// ThumbnailRefreshHook: handles FileLifecycleHook events (create/update/delete).
// Implemented on ThumbnailRefreshHook (not ThumbnailService) to avoid circular Arc:
// DedupService → BlobLifecycleService → ThumbnailRefreshHook → DedupService.
@@ -353,6 +358,7 @@ impl AppServiceFactory {
if let Some(audio) = &audio_metadata_service {
fls = fls.with_hook(audio.clone());
}
fls = fls.with_hook(media_metadata_service.clone());
let file_lifecycle = Arc::new(fls);
Ok(CoreServices {
@@ -361,6 +367,7 @@ impl AppServiceFactory {
thumbnail_service,
file_lifecycle,
audio_metadata_service,
media_metadata_service,
chunked_upload_service,
image_transcode_service,
dedup_service,
@@ -538,6 +545,7 @@ impl AppServiceFactory {
favorites_service: None, // Configured later with create_favorites_service
recent_service: None, // Configured later with create_recent_service
audio_metadata_service: core.audio_metadata_service.clone(),
media_metadata_service: core.media_metadata_service.clone(),
}
}
@@ -557,6 +565,16 @@ impl AppServiceFactory {
)))
}
/// Creates the image/video capture-metadata service (EXIF + container
/// creation dates). Always enabled — the Photos timeline relies on it.
pub fn create_media_metadata_service(
&self,
db_pool: &Arc<PgPool>,
) -> Arc<MediaMetadataService> {
let blob_root = self.storage_path.join(".blobs");
Arc::new(MediaMetadataService::new(db_pool.clone(), blob_root))
}
/// Creates the trash service
pub async fn create_trash_service(
&self,
@@ -1448,6 +1466,8 @@ pub struct CoreServices {
/// Composite lifecycle dispatcher — wires thumbnails + audio metadata for all file events.
pub file_lifecycle: Arc<FileLifecycleService>,
pub audio_metadata_service: Option<Arc<AudioMetadataService>>,
/// Image/video capture-metadata extractor (EXIF + container dates).
pub media_metadata_service: Arc<MediaMetadataService>,
pub chunked_upload_service: Arc<ChunkedUploadService>,
pub image_transcode_service: Arc<ImageTranscodeService>,
pub dedup_service: Arc<DedupService>,
@@ -1487,6 +1507,7 @@ pub struct ApplicationServices {
pub favorites_service: Option<Arc<FavoritesService>>,
pub recent_service: Option<Arc<RecentService>>,
pub audio_metadata_service: Option<Arc<AudioMetadataService>>,
pub media_metadata_service: Arc<MediaMetadataService>,
}
/// Container for authentication services
src/common/mime_detect.rs
+69
View File
@@ -8,6 +8,9 @@
//!
//! Performance: < 1µs for the `infer` check (reads only header bytes, no allocation).
use std::path::Path;
use tokio::io::AsyncReadExt;
/// Maximum bytes needed for magic-byte detection. Upload ingestion peeks
/// this many bytes off the stream before forwarding them unchanged.
pub const MAGIC_BYTES_LEN: usize = 8192;
@@ -53,6 +56,58 @@ pub fn refine_content_type(buf: &[u8], filename: &str, claimed: &str) -> String
claimed.to_string()
}
/// Detect the `Content-Type` to serve for an already-encoded thumbnail.
///
/// The slow encode path re-encodes to JPEG, but the fast path stores the
/// source image as-is (PNG / GIF / WebP), so the handler must not blindly
/// claim `image/jpeg`. Detects the real format from magic bytes, defaulting
/// to `image/jpeg` (the slow-path output) when detection is inconclusive.
pub fn thumbnail_content_type(data: &[u8]) -> &'static str {
infer::get(data)
.map(|kind| kind.mime_type())
.filter(|mime| mime.starts_with("image/"))
.unwrap_or("image/jpeg")
}
/// Async helper: reads the first bytes of a file on disk and refines the MIME type.
///
/// Designed for the upload path where the file has been spooled to a temp path.
pub async fn refine_content_type_from_file(
temp_path: &Path,
filename: &str,
claimed: &str,
) -> String {
// Fast path: if the client gave us a specific type, trust it
if !claimed.is_empty()
&& claimed != "application/octet-stream"
&& claimed != "binary/octet-stream"
{
return claimed.to_string();
}
// Read only the first bytes needed for magic detection (not the whole file).
match tokio::fs::File::open(temp_path).await {
Ok(mut file) => {
let mut buf = vec![0u8; MAGIC_BYTES_LEN];
let n = file.read(&mut buf).await.unwrap_or(0);
refine_content_type(&buf[..n], filename, claimed)
}
Err(e) => {
tracing::warn!(
"MIME detection: failed to read {} for magic bytes: {}",
temp_path.display(),
e
);
// Fall back to extension
let guess = mime_guess::from_path(filename);
if let Some(mime) = guess.first() {
return mime.to_string();
}
claimed.to_string()
}
}
}
#[cfg(test)]
mod tests {
use super::*;
@@ -80,6 +135,20 @@ mod tests {
assert_eq!(result, "image/jpeg");
}
#[test]
fn thumbnail_content_type_detects_real_format() {
// Fast-path thumbnails keep the source format — serve it accurately.
let png = b"\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR";
assert_eq!(thumbnail_content_type(png), "image/png");
let jpeg = b"\xff\xd8\xff\xe0\x00\x10JFIF";
assert_eq!(thumbnail_content_type(jpeg), "image/jpeg");
// Inconclusive bytes default to JPEG (the slow-path encoder output).
assert_eq!(thumbnail_content_type(b"garbage"), "image/jpeg");
assert_eq!(thumbnail_content_type(b""), "image/jpeg");
}
#[test]
fn binary_octet_stream_also_triggers_detection() {
let jpeg = b"\xff\xd8\xff\xe0\x00\x10JFIF";
src/infrastructure/services/media_metadata_service.rs
+485
View File
@@ -0,0 +1,485 @@
//! Capture-metadata extraction for images **and** videos.
//!
//! Populates `storage.file_metadata.captured_at` (and, for images, GPS / camera
//! / orientation / dimensions) so the Photos timeline can group by the real
//! capture date instead of the upload time. A DB trigger
//! (`trg_sync_media_sort_date`) keeps `storage.files.media_sort_date =
//! COALESCE(captured_at, created_at)` in sync, so writing `captured_at` is all
//! that is needed — the query/DTO/frontend already consume it.
//!
//! Mirrors [`AudioMetadataService`](super::audio_metadata_service): it is a
//! [`FileLifecycleHook`] wired into the upload pipeline, runs extraction off the
//! Tokio workers (`spawn_blocking`), and is dedup/copy aware.
//!
//! - **Images** — rich EXIF via the existing [`ExifService`] (kamadak-exif:
//! GPS, camera, orientation, dimensions, capture date). The capture date is
//! then upgraded to a timezone-correct value via `nom-exif`, which parses
//! `OffsetTimeOriginal` (falling back to the kamadak naive value).
//! - **Videos** — container creation time (`mov`/`mp4`/`mkv`) via `nom-exif`,
//! which seeks the metadata atoms (never loads the whole file) and is
//! timezone-aware. No EXIF exists for video.
use chrono::{DateTime, FixedOffset, Utc};
use futures::StreamExt;
use sqlx::{FromRow, PgPool};
use std::path::{Path, PathBuf};
use std::sync::Arc;
use tracing::{info, warn};
use uuid::Uuid;
use crate::application::ports::file_lifecycle::FileLifecycleHook;
use crate::common::errors::DomainError;
use crate::infrastructure::repositories::pg::file_metadata_repository::FileMetadataRepository;
use crate::infrastructure::services::exif_service::{ExifMetadata, ExifService};
#[derive(Debug, FromRow)]
pub struct MediaFileRow {
pub file_id: Uuid,
pub blob_hash: String,
pub mime_type: String,
}
#[derive(Debug, serde::Serialize)]
pub struct MetadataExtractionResult {
pub total: usize,
pub processed: usize,
pub failed: usize,
}
pub struct MediaMetadataService {
pool: Arc<PgPool>,
blob_root: PathBuf,
}
impl MediaMetadataService {
pub fn new(pool: Arc<PgPool>, blob_root: PathBuf) -> Self {
Self { pool, blob_root }
}
pub fn is_image_file(mime_type: &str) -> bool {
mime_type.starts_with("image/")
}
pub fn is_video_file(mime_type: &str) -> bool {
mime_type.starts_with("video/")
}
/// Whether this service extracts capture metadata for the given MIME type.
pub fn handles(mime_type: &str) -> bool {
Self::is_image_file(mime_type) || Self::is_video_file(mime_type)
}
fn blob_path(&self, hash: &str) -> PathBuf {
let prefix = &hash[0..2];
self.blob_root.join(prefix).join(format!("{}.blob", hash))
}
fn arc(&self) -> Arc<Self> {
Arc::new(Self {
pool: self.pool.clone(),
blob_root: self.blob_root.clone(),
})
}
/// Extract capture metadata from a media blob.
///
/// All parsing is synchronous (kamadak-exif + nom-exif), so this MUST only
/// be called inside `spawn_blocking`. Returns `None` when there is nothing
/// worth persisting (no EXIF and no capture date) — the caller then skips
/// the upsert and the file legitimately falls back to its upload date.
fn extract_blocking(path: &Path, mime_type: &str) -> Option<ExifMetadata> {
if !path.exists() {
warn!("Media file does not exist: {:?}", path);
return None;
}
if Self::is_image_file(mime_type) {
// Rich EXIF (GPS / camera / orientation / dimensions + naive date)
// from the proven kamadak extractor.
let mut meta = std::fs::read(path)
.ok()
.and_then(|b| ExifService::extract(&b));
// Upgrade the capture date to a timezone-correct instant when the
// image carries OffsetTimeOriginal (nom-exif). Falls back to the
// kamadak naive value otherwise.
let tz_date = capture_date(path);
match (meta.as_mut(), tz_date) {
(Some(m), Some(dt)) => m.captured_at = Some(dt),
(Some(_), None) => { /* keep kamadak's naive captured_at */ }
(None, Some(dt)) => {
meta = Some(ExifMetadata {
captured_at: Some(dt),
..Default::default()
});
}
(None, None) => {}
}
meta
} else if Self::is_video_file(mime_type) {
// Videos carry no EXIF — pull the container creation time only.
capture_date(path).map(|dt| ExifMetadata {
captured_at: Some(dt),
..Default::default()
})
} else {
None
}
}
/// Extract metadata for one file and persist it (no-op when nothing useful
/// could be extracted).
pub async fn extract_and_save(
&self,
file_id: &Uuid,
file_path: &Path,
mime_type: &str,
) -> Result<(), DomainError> {
let path = file_path.to_path_buf();
let mime = mime_type.to_string();
let meta = tokio::task::spawn_blocking(move || Self::extract_blocking(&path, &mime))
.await
.map_err(|e| {
DomainError::internal_error(
"MediaMetadataService",
format!("spawn_blocking join error: {e}"),
)
})?;
let Some(meta) = meta else {
return Ok(());
};
FileMetadataRepository::new(self.pool.clone())
.upsert(&file_id.to_string(), &meta)
.await?;
info!(
"Saved capture metadata for file {} (captured_at={:?})",
file_id, meta.captured_at
);
Ok(())
}
pub async fn delete_metadata(&self, file_id: &Uuid) -> Result<(), DomainError> {
sqlx::query("DELETE FROM storage.file_metadata WHERE file_id = $1")
.bind(file_id)
.execute(&*self.pool)
.await
.map_err(|e| {
DomainError::database_error(format!("Failed to delete file metadata: {}", e))
})?;
Ok(())
}
pub fn spawn_extraction_background(
service: Arc<Self>,
file_id: Uuid,
file_path: PathBuf,
mime_type: String,
) {
tokio::spawn(async move {
tracing::info!("📷 Extracting capture metadata for: {}", file_id);
if let Err(e) = service
.extract_and_save(&file_id, &file_path, &mime_type)
.await
{
tracing::warn!("Failed to extract capture metadata: {}", e);
}
});
}
pub fn spawn_extraction_with_delete_background(
service: Arc<Self>,
file_id: Uuid,
file_path: PathBuf,
mime_type: String,
) {
tokio::spawn(async move {
tracing::info!("📷 Updating capture metadata for: {}", file_id);
let _ = service.delete_metadata(&file_id).await;
if let Err(e) = service
.extract_and_save(&file_id, &file_path, &mime_type)
.await
{
tracing::warn!("Failed to update capture metadata: {}", e);
}
});
}
/// Clone metadata from a known source file (explicit copy); falls back to a
/// blob-hash lookup or fresh extraction if the source is not yet processed.
pub fn clone_from_source_background(
service: Arc<Self>,
new_file_id: Uuid,
source_file_id: Uuid,
blob_hash: String,
mime_type: String,
) {
tokio::spawn(async move {
let result = sqlx::query(
r#"
INSERT INTO storage.file_metadata
(file_id, captured_at, latitude, longitude, camera_make,
camera_model, orientation, width, height)
SELECT $1, captured_at, latitude, longitude, camera_make,
camera_model, orientation, width, height
FROM storage.file_metadata
WHERE file_id = $2
ON CONFLICT (file_id) DO NOTHING
"#,
)
.bind(new_file_id)
.bind(source_file_id)
.execute(&*service.pool)
.await;
match result {
Ok(r) if r.rows_affected() > 0 => {
info!(
"Cloned capture metadata from {} to {}",
source_file_id, new_file_id
);
}
Ok(_) => {
Self::clone_or_extract_background(service, new_file_id, blob_hash, mime_type);
}
Err(e) => {
warn!(
"Failed to clone capture metadata from {} to {}: {}",
source_file_id, new_file_id, e
);
}
}
});
}
/// Clone metadata from any file sharing the same blob; falls back to fresh
/// extraction if no processed sibling exists yet.
pub fn clone_or_extract_background(
service: Arc<Self>,
new_file_id: Uuid,
blob_hash: String,
mime_type: String,
) {
tokio::spawn(async move {
let rows_inserted = sqlx::query(
r#"
INSERT INTO storage.file_metadata
(file_id, captured_at, latitude, longitude, camera_make,
camera_model, orientation, width, height)
SELECT $1, fm.captured_at, fm.latitude, fm.longitude, fm.camera_make,
fm.camera_model, fm.orientation, fm.width, fm.height
FROM storage.file_metadata fm
JOIN storage.files sf ON sf.id = fm.file_id
WHERE sf.blob_hash = $2
LIMIT 1
ON CONFLICT (file_id) DO NOTHING
"#,
)
.bind(new_file_id)
.bind(&blob_hash)
.execute(&*service.pool)
.await;
match rows_inserted {
Ok(result) if result.rows_affected() > 0 => {
info!("Cloned capture metadata for file {}", new_file_id);
}
Ok(_) => {
let file_path = service.blob_path(&blob_hash);
if let Err(e) = service
.extract_and_save(&new_file_id, &file_path, &mime_type)
.await
{
warn!(
"Failed to extract capture metadata for {}: {}",
new_file_id, e
);
}
}
Err(e) => {
warn!(
"Failed to clone capture metadata for {}: {}",
new_file_id, e
);
}
}
});
}
/// Backfill: re-extract capture metadata for every existing image/video.
/// Streams rows (O(1) memory); failures are logged and skipped, never abort
/// the batch. Each upsert fires the DB trigger that recomputes
/// `media_sort_date`, so the Photos timeline re-buckets afterwards.
pub async fn reextract_all_image_metadata(
&self,
) -> Result<MetadataExtractionResult, DomainError> {
let mut stream = sqlx::query_as::<_, MediaFileRow>(
r#"
SELECT id as file_id, blob_hash, mime_type
FROM storage.files
WHERE mime_type LIKE 'image/%' OR mime_type LIKE 'video/%'
"#,
)
.fetch(&*self.pool);
let mut total: usize = 0;
let mut processed: usize = 0;
let mut failed: usize = 0;
info!("Starting streaming capture-metadata backfill for image/video files");
while let Some(row) = stream.next().await {
total += 1;
let media = row.map_err(|e| {
DomainError::database_error(format!("Failed to fetch media file row: {}", e))
})?;
let file_path = self.blob_path(&media.blob_hash);
match self
.extract_and_save(&media.file_id, &file_path, &media.mime_type)
.await
{
Ok(()) => processed += 1,
Err(e) => {
warn!(
"Failed to extract capture metadata for file {}: {}",
media.file_id, e
);
failed += 1;
}
}
}
info!(
"Capture-metadata backfill complete: {} processed, {} failed out of {} total",
processed, failed, total
);
Ok(MetadataExtractionResult {
total,
processed,
failed,
})
}
}
/// Extract a timezone-correct capture instant from an image (EXIF
/// `DateTimeOriginal`/`CreateDate`) or video/audio container (`CreateDate`).
///
/// `nom-exif` returns an offset-aware `DateTime<FixedOffset>` when the file
/// carries `OffsetTimeOriginal` (or a tz-aware container time); when it does
/// not, the naive wall-clock is interpreted as UTC. Either way the result is
/// converted to a true UTC instant. Returns `None` if no capture date exists.
fn capture_date(path: &Path) -> Option<DateTime<Utc>> {
use nom_exif::{EntryValue, ExifTag, TrackInfoTag, read_exif, read_track};
let to_utc = |ev: &EntryValue| -> Option<DateTime<Utc>> {
let edt = ev.as_datetime()?;
let utc0 = FixedOffset::east_opt(0)?;
Some(edt.or_offset(utc0).with_timezone(&Utc))
};
// Images: EXIF DateTimeOriginal, then DateTimeDigitized (CreateDate).
if let Ok(exif) = read_exif(path) {
if let Some(dt) = exif.get(ExifTag::DateTimeOriginal).and_then(to_utc) {
return Some(dt);
}
if let Some(dt) = exif.get(ExifTag::CreateDate).and_then(to_utc) {
return Some(dt);
}
}
// Videos / audio containers (mov/mp4/mkv): track creation time.
if let Ok(track) = read_track(path)
&& let Some(dt) = track.get(TrackInfoTag::CreateDate).and_then(to_utc)
{
return Some(dt);
}
None
}
// ─── FileLifecycleHook ───────────────────────────────────────────────────────
impl FileLifecycleHook for MediaMetadataService {
fn on_file_created(
&self,
file_id: &str,
blob_hash: &str,
content_type: &str,
is_new_blob: bool,
) {
if !Self::handles(content_type) {
return;
}
let Ok(uuid) = file_id.parse::<Uuid>() else {
warn!("on_file_created: invalid file_id UUID: {}", file_id);
return;
};
let service = self.arc();
if is_new_blob {
Self::spawn_extraction_background(
service,
uuid,
self.blob_path(blob_hash),
content_type.to_string(),
);
} else {
Self::clone_or_extract_background(
service,
uuid,
blob_hash.to_string(),
content_type.to_string(),
);
}
}
fn on_file_copied(
&self,
file_id: &str,
blob_hash: &str,
content_type: &str,
source_file_id: &str,
) {
if !Self::handles(content_type) {
return;
}
let Ok(uuid) = file_id.parse::<Uuid>() else {
warn!("on_file_copied: invalid file_id UUID: {}", file_id);
return;
};
let Ok(source_uuid) = source_file_id.parse::<Uuid>() else {
warn!(
"on_file_copied: invalid source_file_id UUID: {}",
source_file_id
);
return;
};
Self::clone_from_source_background(
self.arc(),
uuid,
source_uuid,
blob_hash.to_string(),
content_type.to_string(),
);
}
fn on_file_updated(&self, file_id: &str, blob_hash: &str, content_type: &str) {
if !Self::handles(content_type) {
return;
}
let Ok(uuid) = file_id.parse::<Uuid>() else {
warn!("on_file_updated: invalid file_id UUID: {}", file_id);
return;
};
Self::spawn_extraction_with_delete_background(
self.arc(),
uuid,
self.blob_path(blob_hash),
content_type.to_string(),
);
}
fn on_file_deleted(&self, _file_id: &str) {
// storage.file_metadata has ON DELETE CASCADE on file_id — DB handles cleanup.
}
}
src/infrastructure/services/mod.rs
+1
View File
@@ -12,6 +12,7 @@ pub mod image_transcode_service;
pub mod jwt_service;
pub mod local_blob_backend;
pub mod login_lockout_service;
pub mod media_metadata_service;
pub mod migration_blob_backend;
pub mod migration_job;
pub mod mock_email_sender;
src/interfaces/api/handlers/admin_handler.rs
+28
View File
@@ -58,6 +58,8 @@ pub fn admin_routes() -> Router<Arc<AppState>> {
.route("/settings/registration", put(set_registration_setting))
// Audio metadata
.route("/audio/metadata/reextract", post(reextract_audio_metadata))
// Image/video capture metadata (Photos timeline backfill)
.route("/photos/metadata/reextract", post(reextract_image_metadata))
// SMTP diagnostics
.route("/smtp/info", get(get_smtp_info))
.route("/smtp/test", post(send_smtp_test))
@@ -1216,6 +1218,32 @@ async fn reextract_audio_metadata(
})))
}
/// Backfill image/video capture dates (EXIF / container creation time) into
/// `storage.file_metadata` for every existing media file, re-bucketing the
/// Photos timeline by real capture date. Safe to re-run (idempotent upsert).
async fn reextract_image_metadata(
State(state): State<Arc<AppState>>,
headers: HeaderMap,
) -> Result<impl IntoResponse, AppError> {
admin_guard(&state, &headers).await?;
let result = state
.applications
.media_metadata_service
.reextract_all_image_metadata()
.await
.map_err(|e| {
AppError::internal_error(format!("Failed to re-extract capture metadata: {}", e))
})?;
Ok(Json(serde_json::json!({
"message": "Image/video capture-metadata extraction complete",
"total": result.total,
"processed": result.processed,
"failed": result.failed,
})))
}
// ─────────────────────────────────────────────────────
// SMTP diagnostics
// ─────────────────────────────────────────────────────
src/interfaces/api/handlers/file_handler.rs
+12 -3
View File
@@ -370,7 +370,10 @@ impl FileHandler {
{
return Response::builder()
.status(StatusCode::OK)
.header(header::CONTENT_TYPE, "image/jpeg")
.header(
header::CONTENT_TYPE,
crate::common::mime_detect::thumbnail_content_type(&data),
)
.header(header::CONTENT_LENGTH, data.len())
.header(header::CACHE_CONTROL, "public, max-age=31536000, immutable")
.header(header::ETAG, &etag)
@@ -420,7 +423,10 @@ impl FileHandler {
{
return Response::builder()
.status(StatusCode::OK)
.header(header::CONTENT_TYPE, "image/jpeg")
.header(
header::CONTENT_TYPE,
crate::common::mime_detect::thumbnail_content_type(&data),
)
.header(header::CONTENT_LENGTH, data.len())
.header(header::CACHE_CONTROL, "public, max-age=31536000, immutable")
.header(header::ETAG, &etag)
@@ -440,7 +446,10 @@ impl FileHandler {
{
Ok(data) => Response::builder()
.status(StatusCode::OK)
.header(header::CONTENT_TYPE, "image/jpeg")
.header(
header::CONTENT_TYPE,
crate::common::mime_detect::thumbnail_content_type(&data),
)
.header(header::CONTENT_LENGTH, data.len())
.header(header::CACHE_CONTROL, "public, max-age=31536000, immutable")
.header(header::ETAG, &etag)
static/admin.html
+2 -1
View File
@@ -35,7 +35,8 @@
</div>
</div>
<div class="admin-container">
<div class="admin-container" role="main">
<h1 class="sr-only" data-i18n="user_menu.admin_panel">Admin panel</h1>
<div id="loading"><i class="fas fa-circle-notch"></i> <span data-i18n="admin.loading">Loading…</span></div>
<div id="access-denied">
<div class="access-icon"><i class="fas fa-lock"></i></div>
static/css/base/a11y.css
+146
View File
@@ -0,0 +1,146 @@
/* ============================================================
* Accessibility baseline — keyboard focus.
*
* Pointer / programmatic focus stays ring-free (no "ring on every
* click" noise); KEYBOARD focus (:focus-visible) always gets a clear
* accent ring. Every interactive element inherits this automatically,
* so components only need their own :focus-visible rule when they want
* a custom ring — and must never strip it for keyboard users.
*
* The outline follows the element's border-radius in modern browsers,
* so rounded controls get a rounded ring for free.
* ============================================================ */
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
/* Skip link — visually hidden until focused, then slides in at top-left.
Lets keyboard users jump straight to <main id="main">. */
.skip-link {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: var(--z-max);
padding: var(--space-2) var(--space-4);
background: var(--color-bg-surface);
color: var(--color-text);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
transform: translateY(-150%);
transition: transform var(--motion-fast) var(--ease-standard);
}
.skip-link:focus {
transform: translateY(0);
}
/* ── prefers-reduced-motion ──────────────────────────────────
Vestibular safety: near-instant transitions/animations and no
smooth scroll for users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── prefers-contrast: more ──────────────────────────────────
Collapse the muted text tiers up to the stronger secondary tier and
thicken the focus ring. The high-contrast border ramp (raw colour) lives
in base/variables.css — the token layer — so this file stays hex-free. */
@media (prefers-contrast: more) {
:root {
--color-text-muted: var(--color-text-secondary);
--color-text-subtle: var(--color-text-secondary);
--color-text-faint: var(--color-text-secondary);
}
:focus-visible {
outline-width: 3px;
}
}
/* ── forced-colors (Windows High Contrast) ───────────────────
Custom colors are overridden by the OS; ensure the keyboard
focus ring uses a real system colour. */
@media (forced-colors: active) {
:focus-visible {
outline-color: Highlight;
}
}
/* ── Global error-boundary toast (js/core/errorBoundary.js) ─── */
.error-toast {
position: fixed;
bottom: var(--space-5);
left: 50%;
z-index: var(--z-toast);
max-width: min(90vw, 420px);
padding: var(--space-3) var(--space-4);
background: var(--color-error-bg);
color: var(--color-error-text);
border: 1px solid var(--color-badge-error-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
font-size: var(--text-sm);
transform: translate(-50%, calc(100% + var(--space-5)));
transition: transform var(--motion-base) var(--ease-standard);
}
.error-toast.is-visible {
transform: translate(-50%, 0);
}
/* ── Print: drop the app chrome, show clean content ────────── */
@media print {
.sidebar,
.sidebar-overlay,
.top-bar,
.actions-bar,
.page-sticky-header,
.cmdk-overlay,
.skip-link,
.error-toast {
display: none !important;
}
.content-area,
.main-content {
overflow: visible !important;
}
* {
box-shadow: none !important;
}
}
/* ── Touch targets ───────────────────────────────────────────
≥44px hit areas for the key controls on touch/phone widths. */
@media (max-width: 768px) {
.sidebar-toggle,
.search-toggle-btn,
.search-back-btn,
.notif-bell-btn,
.user-avatar-btn {
min-width: 44px;
min-height: 44px;
}
.nav-item {
min-height: 44px;
}
.files-list-view .file-item {
min-height: 48px;
}
}
static/css/base/animations.css
+18
View File
@@ -0,0 +1,18 @@
/* ============================================================
* Canonical keyframes — single source for shared animations.
*
* Loaded early via main.css so every component and view reuses
* these by name instead of redefining them. This file replaced
* 6 duplicate `@keyframes spin` definitions (spinner / admin /
* music / photos / profile / share-public).
*
* NOTE: `oxi-spin` (icons.css) and `smdSpin` (shareModal.css) are
* still defined locally — folding them in needs touching their
* `animation-name` consumers, deferred to Fase 1.
* ============================================================ */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
static/css/base/forms.css
+8 -8
View File
@@ -4,18 +4,18 @@
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
margin-bottom: var(--space-2);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
padding: var(--space-2-5);
border: 1px solid var(--color-border);
border-radius: 6px;
font-size: 14px;
border-radius: var(--radius-md);
font-size: var(--text-base);
}
.form-group textarea {
@@ -24,11 +24,11 @@
}
.button {
padding: 8px 16px;
padding: var(--space-2) var(--space-4);
border: none;
border-radius: 6px;
border-radius: var(--radius-md);
cursor: pointer;
font-size: 14px;
font-size: var(--text-base);
transition: background-color 0.2s;
}
static/css/base/reset.css
+33 -2
View File
@@ -1,13 +1,21 @@
/* Honor the user's browser font-size / zoom preference (rem-relative). */
html {
font-size: 100%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-sans);
}
body {
display: flex;
height: 100vh;
height: 100vh; /* fallback for browsers without dvh */
height: 100dvh;
font-size: var(--text-base);
line-height: var(--leading-normal);
background-color: var(--color-bg-page);
overflow: hidden;
}
@@ -24,3 +32,26 @@ html[dir="rtl"] .fa-sign-out-alt {
.hidden {
display: none !important;
}
/* Brand-tinted text selection + caret. */
::selection {
background: var(--color-accent-ring-strong);
color: var(--color-text-heading);
}
:root {
caret-color: var(--color-accent);
}
/* Visually hidden but exposed to assistive tech (a11y-only labels/headings). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
static/css/base/typography.css
+82
View File
@@ -0,0 +1,82 @@
/* ============================================================
* Typography utilities — Fase 0 foundations.
*
* Semantic heading roles DECOUPLED from element level, so any
* h1–h6 can carry the correct visual weight while the document
* keeps a correct, accessible heading order. All values route
* through the type/leading/weight/tracking tokens in variables.css.
*
* Views are migrated onto these classes in Fase 1 (replacing the
* per-page raw font-size/weight headings the audit flagged).
* ============================================================ */
/* Page title — one per page (the h1 role). */
.heading-page {
font-size: var(--text-2xl);
line-height: var(--leading-tight);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
color: var(--color-text-heading);
}
/* Section heading. */
.heading-section {
font-size: var(--text-xl);
line-height: var(--leading-snug);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tight);
color: var(--color-text-heading);
}
/* Card / panel heading. */
.heading-card {
font-size: var(--text-md);
line-height: var(--leading-snug);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
/* Eyebrow / overline label (uppercase caps with tracking). */
.heading-eyebrow {
font-size: var(--text-xs);
line-height: var(--leading-normal);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-text-muted);
}
/* Constrain running text to a comfortable measure (~65ch). */
.prose {
max-width: var(--measure-prose);
}
/* Headings wrap with balanced line lengths (no single orphan word). */
h1,
h2,
h3,
.heading-page,
.heading-section,
.heading-card,
.page-title {
text-wrap: balance;
}
/* Running prose wraps "pretty" (avoids orphans and short last lines). */
.prose,
.empty-state p,
.about-description,
.auth-subtitle,
.auth-hint,
.language-subtitle {
text-wrap: pretty;
}
/* Tabular figures for numeric UI so digits align and don't jitter as they
change (storage readouts, badges, stat counters). */
.storage-info,
.user-menu-storage-text,
.notif-badge,
.stat-value {
font-variant-numeric: tabular-nums;
}
static/css/base/variables.css
+315 -95
View File
@@ -22,7 +22,177 @@
/* Default: follow the OS preference. Overridden by html[data-color-scheme]. */
color-scheme: light dark;
--sidebar-width: 250px;
/* ════════════════════════════════════════════════════════════════
* NON-COLOR DESIGN SCALES (Fase 0 — fundamentos)
*
* Single source of truth for spacing, radius, typography, z-index,
* motion, elevation, breakpoints and density. Components are migrated
* onto these in Fase 1; until then raw px still coexist. Do NOT add
* raw px for spacing/radius/font-size in new code — consume a token.
* ════════════════════════════════════════════════════════════════ */
/* ── Layout shell ──────────────────────────────────────────── */
/* Fluid sidebar: tracks viewport but clamped to a sane band. */
--sidebar-width: clamp(220px, 18vw, 280px);
--sidebar-width-min: 200px; /* resizable rail floor (Fase 1) */
--sidebar-width-max: 320px; /* resizable rail ceiling (Fase 1) */
--sidebar-width-collapsed: 72px; /* icon-rail mode (Fase 1) */
--gutter: var(--space-6); /* shared topbar/content horizontal gutter (drops to 16px on phones) */
--grid-card-min: 200px; /* min width of a grid card (tightens on phones) */
/* ── Spacing — 4px grid ────────────────────────────────────── */
/* Direct steps are multiples of 4; half-steps (0-5/1-5/2-5/3-5)
* cover the high-frequency 2/6/10/14px raw values found in audit. */
--space-0: 0;
--space-px: 1px;
--space-0-5: 2px;
--space-1: 4px;
--space-1-5: 6px;
--space-2: 8px;
--space-2-5: 10px;
--space-3: 12px;
--space-3-5: 14px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 44px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ── Radius ─────────────────────────────────────────────────── */
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 10px;
--radius-2xl: 12px;
--radius-3xl: 16px;
--radius-4xl: 20px;
--radius-full: 9999px;
/* Semantic default — resolves the legacy `var(--radius, 12px)` fallbacks
* in share-public.css / device-verify.css (token was never defined). */
--radius: var(--radius-2xl);
/* ── Typography ────────────────────────────────────────────── */
/* Font families (single source — reset.css `*` consumes --font-sans). */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* Modular size scale in rem (root = 16px) so it honors user zoom.
* --text-base (14px) is the app body default. */
--text-2xs: 0.6875rem; /* 11px */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.8125rem; /* 13px */
--text-base: 0.875rem; /* 14px */
--text-md: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.75rem; /* 28px */
--text-4xl: 2rem; /* 32px */
--text-5xl: 2.5rem; /* 40px */
--text-6xl: 3rem; /* 48px */
/* Line-heights (leading) — unitless ratios. */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 1.8;
/* Font weights — numeric only (no bold/normal keywords). */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
/* Letter-spacing (tracking) — em-relative. */
--tracking-tighter: -0.02em;
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-wider: 0.04em;
--tracking-widest: 0.08em;
/* Prose measure — comfortable line length for running text. */
--measure-prose: 65ch;
/* Icon glyph sizing — separate axis from the text scale. */
--icon-xs: 12px;
--icon-sm: 14px;
--icon-md: 16px;
--icon-lg: 20px;
--icon-xl: 24px;
/* ── Z-index — semantic stacking layers ────────────────────── */
/* Gaps left between layers so new surfaces slot in without renumber. */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-dropdown: 1000;
--z-overlay: 2000;
--z-drawer: 2500;
--z-modal: 3000;
--z-popover: 3500;
--z-toast: 4000;
--z-tooltip: 5000;
--z-notification: 6000;
--z-max: 9999;
/* ── Motion — durations + easing curves ────────────────────── */
--motion-instant: 0ms;
--motion-fast: 120ms;
--motion-base: 160ms;
--motion-moderate: 200ms;
--motion-slow: 300ms;
--motion-slower: 500ms;
--motion-spinner: 1s;
--spin-duration: var(--motion-spinner);
/* Decelerate is the default for entrances / positive feedback. */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* ── Elevation — composed box-shadow recipes ───────────────── */
/* Full recipes (not bare alphas) layered on the --color-shadow-*
* alpha tokens below, so they adapt to light/dark automatically. */
--shadow-xs: 0 1px 2px var(--color-shadow-xs);
--shadow-sm: 0 1px 3px var(--color-shadow-sm), 0 1px 2px var(--color-shadow-xs);
--shadow-md: 0 4px 6px var(--color-shadow-sm), 0 2px 4px var(--color-shadow-xs);
--shadow-lg: 0 10px 15px var(--color-shadow-md), 0 4px 6px var(--color-shadow-sm);
--shadow-xl: 0 20px 25px var(--color-shadow-md), 0 8px 10px var(--color-shadow-sm);
--shadow-2xl: 0 25px 50px var(--color-shadow-lg);
/* ── Breakpoints (reference tokens) ────────────────────────── */
/* NOTE: @media cannot consume custom properties. These are the canonical
* values for JS (matchMedia) and documentation; consuming them in @media
* needs @custom-media via a postcss build step — pending dep approval. */
--bp-xs: 480px;
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
/* ── Density — comfortable (default) vs compact ────────────── */
/* Gated by html[data-density="compact"] below. Consumed by list rows
* and controls in Fase 1. */
--density-row-py: var(--space-3); /* 12px */
--density-row-px: var(--space-3-5); /* 14px */
--density-gap: var(--space-3);
--density-control-h: 40px;
/* Backgrounds */
--color-bg-page: light-dark(#f5f7fa, #0f172a);
@@ -44,25 +214,41 @@
--color-border-xfaint: light-dark(#f0f0f0, #1e293b);
--color-border-ddd: light-dark(#ddd, #334155);
/* Text */
--color-text: light-dark(#2d3748, #e2e8f0);
--color-text-heading: light-dark(#1e293b, #f1f5f9);
--color-text-muted: light-dark(#718096, #94a3b8);
--color-text-faint: light-dark(#94a3b8, #7a8a9f);
--color-text-secondary: light-dark(#4a5568, #cbd5e1);
--color-text-subtle: light-dark(#64748b, #94a3b8);
--color-text-dark: light-dark(#334155, #cbd5e1);
--color-text-placeholder: light-dark(#a0aec0, #64748b);
--color-text-gray: light-dark(#6c757d, #94a3b8);
--color-text-medium: light-dark(#666, #94a3b8);
--color-text-faint2: light-dark(#888, #64748b);
--color-text-light: light-dark(#999, #64748b);
--color-text-black: light-dark(#333, #e2e8f0);
--color-text-dim: light-dark(#555, #94a3b8);
/* Text — collapsed to a few AA-passing tiers; every legacy name is kept as
* an alias so no consumer breaks (migration to the canonical names → Fase 1).
* Each tier clears WCAG AA 4.5:1 on #fff AND the page bg, light and dark. The
* muted/faint/placeholder tiers used to FAIL (2.3–4.0:1) and are now darkened. */
--color-text: light-dark(#2d3748, #e2e8f0); /* primary body */
--color-text-heading: light-dark(#1e293b, #f1f5f9); /* headings */
--color-text-secondary: light-dark(#475569, #cbd5e1); /* strong secondary */
/* muted/subtle/faint converge: AA 4.5:1 on the grayish page/muted bgs AND
* on the lighter dark hover bg leaves only a narrow passing window. */
--color-text-muted: light-dark(#5e6a78, #9fadbe); /* muted */
--color-text-subtle: light-dark(#5e6a78, #9fadbe); /* subtle */
--color-text-faint: light-dark(#5e6a78, #9fadbe); /* faintest still-AA */
/* legacy aliases → one of the tiers above */
--color-text-dark: var(--color-text-secondary);
--color-text-dim: var(--color-text-secondary);
--color-text-black: var(--color-text);
--color-text-gray: var(--color-text-muted);
--color-text-medium: var(--color-text-muted);
--color-text-faint2: var(--color-text-faint);
--color-text-light: var(--color-text-faint);
--color-text-placeholder: var(--color-text-faint);
/* Accent (orange) — mostly mode-agnostic. */
--color-accent: #ff5e3a;
--color-accent-hover: light-dark(#e04520, #ff7a5c);
/* AA-compliant accent for TEXT/LINKS: bare #ff5e3a only reaches 3.04:1 on
* white. Link/toggle-link consumers migrate onto this in Fase 2. */
--color-accent-text: light-dark(#cc3a16, #ff8a5c);
/* Solid foreground on accent fills (replaces reusing --color-danger-text). */
--color-on-accent: #ffffff;
/* Canonical keyboard focus-ring color (applied globally in Fase 2). */
--color-focus-ring: #ff5e3a;
/* Canonical logo gradient — unifies the divergent sidebar (#ff5e3a→#ff8a5c)
* vs accent (#ff5e3a→#ff2d55) logo fills. Consumers migrate in Fase 1. */
--color-logo-gradient: linear-gradient(135deg, #ff5e3a 0%, #ff8a5c 100%);
--color-accent-gradient: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%);
--color-accent-shadow: rgba(255, 94, 58, 0.3);
--color-accent-ring: light-dark(rgba(255, 94, 58, 0.1), rgba(255, 94, 58, 0.15));
@@ -75,69 +261,97 @@
--color-accent-ring-strong: rgba(255, 94, 58, 0.2);
--color-accent-ring-xl: rgba(255, 94, 58, 0.4);
--color-accent-ring-xs: rgba(255, 94, 58, 0.05);
--color-accent-glow: rgba(255, 94, 58, 0.2);
--color-accent-glow-soft: rgba(255, 94, 58, 0.1);
/* Feedback */
/* Ambient brand backdrop — shared by the external surfaces (login / share /
device). A centred "spotlight" (surface is brighter than page in BOTH
light and dark) seats the card in a pool of light; four warm brand blobs
fill the field so it reads as a deliberate, dimensional canvas rather than
flat near-white. Resolves through light-dark() automatically. */
--brand-ambient:
radial-gradient(55% 50% at 8% 4%, var(--color-accent-glow), transparent 60%),
radial-gradient(55% 55% at 95% 98%, var(--color-accent-glow), transparent 58%),
radial-gradient(48% 48% at 88% 12%, var(--color-accent-glow-soft), transparent 55%),
radial-gradient(50% 45% at 6% 92%, var(--color-accent-glow-soft), transparent 55%),
radial-gradient(78% 64% at 50% 33%, var(--color-bg-surface), transparent 70%),
var(--color-bg-page);
/* Desaturated fractal-noise grain — kills gradient banding and adds a
tactile, "expensive" film. No colour inside the data-URI (token-safe);
applied via a low-opacity overlay pseudo-element. */
--brand-grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
/* Feedback — success unified to one restrained emerald; the 6 green variants
* now alias the canonical bg/text. (error-* is the danger tint, kept.) */
--color-error-bg: light-dark(#fee2e2, #3b1111);
--color-error-text: light-dark(#b91c1c, #fca5a5);
--color-success-bg: light-dark(#dcfce7, #052e16);
--color-success-text: light-dark(#15803d, #86efac);
--color-success-border: #48bb78;
--color-success-alt: #34c759;
--color-success-bg-alt: light-dark(#e6f4ea, #0a2015);
--color-success-text-alt: #0d904f;
--color-success-bg-green: light-dark(#e8f5e9, #0a2015);
--color-success-text-green: #4eaa25;
--color-success-border: #16a34a;
--color-success-alt: #16a34a;
--color-success-bg-alt: var(--color-success-bg);
--color-success-text-alt: var(--color-success-text);
--color-success-bg-green: var(--color-success-bg);
--color-success-text-green: var(--color-success-text);
/* Dangerous actions */
--color-danger-bg: #f56565;
--color-danger-text: white;
--color-danger-bg-hover: #e53e3e;
/* Dangerous actions — unified on #ef4444 / #dc2626; danger text-alt now uses
* the AA-passing error-text instead of a sub-4.5:1 red. */
--color-danger-bg: #ef4444;
--color-danger-text: #ffffff;
--color-danger-bg-hover: #dc2626;
--color-danger-alt: #ef4444;
--color-danger-ring: rgba(239, 68, 68, 0.3);
--color-danger-ring-lg: rgba(239, 68, 68, 0.4);
--color-danger-light-bg: light-dark(#fef2f2, #2a0c0c);
--color-danger-lighter: light-dark(#fef2f2, #2a0c0c);
--color-danger-text-alt: #e53e3e;
--color-danger-text-alt: var(--color-error-text);
--color-danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
/* Warning/feedback */
--color-warning-bg: light-dark(#ffeaa7, #3d2e00);
--color-warning-bg-dark: light-dark(#fdcb6e, #5a4200);
--color-warning-text: #ffc107;
--color-warning-border: #ffc107;
--color-warning-ring: rgba(255, 193, 7, 0.1);
--color-warning-shadow: rgba(255, 193, 7, 0.5);
--color-warning-orange-bg: light-dark(#fff3e0, #2a1c10);
--color-warning-orange-border: #f57c00;
--color-warning-orange-text: light-dark(#f57c00, #fb923c);
--color-warning-bg-light: light-dark(#fef3c7, #2a2410);
--color-warning-text-amber: light-dark(#f59e0b, #fbbf24);
--color-warning-bg-orange: #fef3e2;
--color-warning-text-orange: #d04423;
/* Warning — unified to one restrained amber. Text tier (#b45309) clears AA;
* the bright #ffc107 gold is replaced by amber-500 for borders/fills. Legacy
* orange/amber variants alias the canonical tokens. */
--color-warning-bg: light-dark(#fef3c7, #2a2410);
--color-warning-text: light-dark(#b45309, #fbbf24);
--color-warning-border: #f59e0b;
--color-warning-bg-dark: light-dark(#fde68a, #3d2e00);
--color-warning-ring: rgba(245, 158, 11, 0.12);
--color-warning-shadow: rgba(245, 158, 11, 0.4);
--color-warning-orange-bg: var(--color-warning-bg);
--color-warning-orange-border: var(--color-warning-border);
--color-warning-orange-text: var(--color-warning-text);
--color-warning-bg-light: var(--color-warning-bg);
--color-warning-text-amber: var(--color-warning-text);
--color-warning-bg-orange: var(--color-warning-bg);
--color-warning-text-orange: var(--color-warning-text);
/* Info */
--color-info-bg: light-dark(#ebf5fb, #0c1e35);
--color-info-border: #2b6cb0;
--color-info-text: #2b6cb0;
--color-info-bg-alt: light-dark(#e0ecff, #0c1e35);
--color-info-text-alt: #3171d8;
--color-info-surface: light-dark(#e0e7ff, #0c1e35);
/* Info — unified to one blue (AA text #1d4ed8, with a light-dark dark tier).
* Variants alias the canonical tokens. */
--color-info-bg: light-dark(#eff6ff, #0c2d48);
--color-info-text: light-dark(#1d4ed8, #93c5fd);
--color-info-border: #3b82f6;
--color-info-blue: #3b82f6;
--color-info-bg-alt: var(--color-info-bg);
--color-info-text-alt: var(--color-info-text);
--color-info-surface: var(--color-info-bg);
/* Shadows — slightly stronger in dark mode for parity. */
/* Shadows — stronger in dark mode for parity. Dark values form a
* deliberate progression (base 0.3 < md 0.34 < lg 0.38) so elevation
* levels stay perceptually distinct; they used to all collapse to 0.3. */
--color-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
--color-shadow-lg: light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.3));
--color-shadow-lg: light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.38));
--color-shadow-xs: rgba(0, 0, 0, 0.05);
--color-shadow-sm: rgba(0, 0, 0, 0.08);
--color-shadow-md: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3));
--color-shadow-md: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.34));
--color-shadow-xl: rgba(0, 0, 0, 0.2);
--color-shadow-2xl: rgba(0, 0, 0, 0.25);
--color-shadow-3xl: rgba(0, 0, 0, 0.3);
--color-shadow-4xl: rgba(0, 0, 0, 0.4);
--color-shadow-5xl: rgba(0, 0, 0, 0.5);
/* Overlays — same in both modes; they sit on top of arbitrary content. */
--color-overlay: rgba(0, 0, 0, 0.5);
/* Frosted scrim behind overlay controls (favorite/kebab/checkbox) so they
stay legible on top of any thumbnail, light or dark. */
--color-scrim-control: light-dark(rgba(255, 255, 255, 0.92), rgba(15, 23, 42, 0.82));
--color-overlay-light: rgba(0, 0, 0, 0.45);
--color-overlay-heavy: rgba(0, 0, 0, 0.85);
--color-overlay-darkest: rgba(0, 0, 0, 0.92);
@@ -178,18 +392,20 @@
--color-sidebar-shadow: rgba(255, 94, 58, 0.35);
--color-sidebar-shadow-lg: rgba(255, 94, 58, 0.45);
/* Calendar dot colors */
--color-cal-1: #ffa94d;
--color-cal-2: #74b9ff;
--color-cal-3: #81ecec;
--color-cal-4: #ffd43b;
--color-cal-5: #ff6b9d;
--color-cal-6: #ff7675;
--color-cal-7: #0984e3;
--color-cal-8: #00cec9;
--color-cal-9: #f0c800;
--color-cal-10: #e84393;
--color-cal-11: #e74c3c;
/* Calendar dots — regenerated at fixed S=55% L=62%, hues evenly around the
* wheel, so they read as one curated family (not confetti). These also tint
* the sidebar nav icons (sidebar.css :nth-child rules). */
--color-cal-1: #d36868;
--color-cal-2: #d3a268;
--color-cal-3: #c9d368;
--color-cal-4: #8fd368;
--color-cal-5: #68d37c;
--color-cal-6: #68d3b6;
--color-cal-7: #68b6d3;
--color-cal-8: #687cd3;
--color-cal-9: #8f68d3;
--color-cal-10: #c968d3;
--color-cal-11: #d368a2;
/* File type badge colors */
--color-ft-html: #e34c26;
@@ -274,17 +490,11 @@
--color-lightbox-text-faint: rgba(255, 255, 255, 0.5);
--color-lightbox-text-muted: rgba(255, 255, 255, 0.7);
/* Purple/special */
--color-purple-bg: light-dark(#f3e8ff, #1a0a33);
--color-purple-border: #7c3aed;
--color-purple-text: #7c3aed;
--color-purple-bg-gradient: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 50%, #fce7f3 100%);
--color-purple-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
--color-purple-shadow: rgba(139, 92, 246, 0.35);
--color-purple-border-light: rgba(139, 92, 246, 0.15);
/* (Removed: the --color-purple-* family had zero consumers. The music
* gradient and the video file-type purple are separate, retained tokens.) */
/* OIDC / auth */
--color-oidc-bg: #4f46e5;
--color-oidc-bg: var(--color-info-blue);
--color-oidc-shadow: rgba(79, 70, 229, 0.3);
--color-oidc-shadow-lg: rgba(79, 70, 229, 0.4);
@@ -300,22 +510,22 @@
--color-content-muted: #888;
--color-content-bg-warn: light-dark(#ffeaa7, #3d2e00);
--color-content-bg-warn-dark: light-dark(#fdcb6e, #5a4200);
--color-content-debug-bg: red;
--color-content-debug-text: white;
/* User menu */
--color-user-menu-header-bg: light-dark(linear-gradient(135deg, #fef5f3 0%, #fdf2f8 100%), linear-gradient(135deg, #1a2332 0%, #1e2940 100%));
--color-user-menu-header-border: light-dark(#fce7e1, #3a2520);
/* Share dialog */
--color-share-link-text: #1565c0;
--color-share-link-hover: #1565c0;
--color-share-link-text: var(--color-info-text);
--color-share-link-hover: var(--color-info-text);
--color-share-remove-text: #b71c1c;
--color-share-owner-text: #757575;
/* Primary (style.css) */
--color-primary: light-dark(#2563eb, #60a5fa);
--color-primary-hover: light-dark(#1d4ed8, #6fa8ee);
/* Demoted: orange is the sole brand/primary — primary now aliases the accent
* (was a competing blue #2563eb). Flips device-verify / share / userMenu to brand. */
--color-primary: var(--color-accent);
--color-primary-hover: var(--color-accent-hover);
/* Recent view */
--color-recent-muted: #6c757d;
@@ -432,19 +642,8 @@
/* Status badge — gray/disabled */
--color-badge-gray: #d1d5db;
/* FIXME: legacy dark-mode badge tokens — kept for now; can be folded into
* the main badges once their last consumers migrate. */
--color-badge-success-dark-bg: #052e16;
--color-badge-success-dark-border: #065f46;
--color-badge-error-dark-bg: #3b1111;
--color-badge-error-dark-bg-hover: #4a1515;
--color-badge-error-dark-text: #fca5a5;
--color-badge-warning-dark-bg: #422006;
--color-badge-warning-dark-border: #92400e;
--color-badge-indigo-dark-bg: #2e1065;
--color-badge-indigo-dark-text: #c4b5fd;
--color-badge-blue-dark-bg: #0c2d48;
--color-badge-blue-dark-text: #93c5fd;
/* (Removed: the legacy dark-mode badge tokens that lived here had zero
* consumers — the light-dark() badge tokens above are the single source.) */
/* Dark structural */
--color-dark-footer: #162032;
@@ -460,8 +659,8 @@
--color-music-background: var(--color-bg-surface);
--color-music-public-bg: rgba(74, 144, 217, 0.12);
--color-video-play: white;
--color-video-play-shadow: black;
--color-video-play: #ffffff;
--color-video-play-shadow: #000000;
}
/* Explicit user choice overrides the OS preference. `theme-init.js` writes
@@ -473,3 +672,24 @@ html[data-color-scheme="light"] {
html[data-color-scheme="dark"] {
color-scheme: dark;
}
/* Compact density — tighter rows/controls. Toggled by writing
* data-density="compact" on <html>; consumed by list/control CSS in Fase 1. */
html[data-density="compact"] {
--density-row-py: var(--space-2); /* 8px */
--density-row-px: var(--space-2-5); /* 10px */
--density-gap: var(--space-2);
--density-control-h: 32px;
}
/* High-contrast border ramp (prefers-contrast: more). Lives here in the token
* layer — the only place raw colour values belong — so the "no raw hex outside
* variables/themes" invariant holds. The matching text-tier collapse + focus
* ring (token/outline only) stay in base/a11y.css. */
@media (prefers-contrast: more) {
:root {
--color-border: light-dark(#64748b, #94a3b8);
--color-border-light: light-dark(#64748b, #94a3b8);
--color-border-medium: light-dark(#475569, #cbd5e1);
}
}
static/css/components/batchToolbar.css
+16 -16
View File
@@ -6,7 +6,7 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
gap: var(--space-4);
min-width: 0;
}
@@ -15,10 +15,10 @@
align-items: center;
background: var(--color-multiselect-bg);
color: var(--color-multiselect-text);
padding: 10px 20px;
border-radius: 12px;
padding: var(--space-2-5) var(--space-5);
border-radius: var(--radius-2xl);
overflow: hidden;
margin-right: 12px;
margin-right: var(--space-3);
height: 60px;
transform: translateY(-8px);
transition:
@@ -35,9 +35,9 @@
border: none;
color: var(--color-multiselect-text-faint);
cursor: pointer;
font-size: 14px;
padding: 4px 6px;
border-radius: 6px;
font-size: var(--text-base);
padding: var(--space-1) var(--space-1-5);
border-radius: var(--radius-md);
transition:
background 0.15s,
color 0.15s;
@@ -49,28 +49,28 @@
}
.batch-bar-count {
font-size: 14px;
font-weight: 600;
font-size: var(--text-base);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.batch-bar-actions {
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
}
.batch-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
gap: var(--space-1-5);
padding: 7px var(--space-3-5);
border: none;
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-multiselect-hover-bg);
color: var(--color-multiselect-action-text);
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
@@ -96,6 +96,6 @@
}
.batch-btn {
padding: 7px 10px;
padding: 7px var(--space-2-5);
}
}
static/css/components/brandLogo.css
+24
View File
@@ -0,0 +1,24 @@
/* ============================================================
* Canonical brand mark — the OxiCloud cloud glyph on the accent
* gradient tile. Reusable lockup for external surfaces (share,
* device-verify) so they present the real mark, not text/emoji.
* Uses the single --color-logo-gradient token.
* ============================================================ */
.brand-mark {
width: 56px;
height: 56px;
border-radius: var(--radius-3xl);
background: var(--color-logo-gradient);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-3);
box-shadow: 0 4px 14px var(--color-accent-shadow);
}
.brand-mark svg {
width: 32px;
height: 32px;
fill: var(--color-on-accent);
}
static/css/components/breadcrumb.css
+9 -9
View File
@@ -4,14 +4,14 @@
align-items: center;
flex-wrap: wrap;
margin-bottom: 15px;
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-medium);
gap: 2px;
gap: var(--space-0-5);
}
.breadcrumb-item {
padding: 2px 4px;
border-radius: 4px;
padding: var(--space-0-5) var(--space-1);
border-radius: var(--radius-sm);
border: 2px solid transparent;
transition:
background 0.15s,
@@ -35,15 +35,15 @@
}
.breadcrumb-current {
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-black);
cursor: default;
}
.breadcrumb-separator {
margin: 0 4px;
margin: 0 var(--space-1);
color: var(--color-text-faint);
font-size: 12px;
font-size: var(--text-xs);
user-select: none;
}
@@ -53,11 +53,11 @@
justify-content: center;
width: 24px;
height: 24px;
border-radius: 4px;
border-radius: var(--radius-sm);
}
.breadcrumb-home i {
font-size: 12px;
font-size: var(--text-xs);
}
.breadcrumb-home.breadcrumb-link:hover {
static/css/components/buttons.css
+71 -19
View File
@@ -1,14 +1,14 @@
.btn {
padding: 12px 24px;
border-radius: 12px;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-2xl);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 500;
gap: 8px;
font-size: var(--text-base);
font-weight: var(--weight-medium);
gap: var(--space-2);
transition: all 0.2s ease;
}
@@ -66,13 +66,65 @@
box-shadow: 0 2px 10px var(--color-danger-ring);
}
/* ── State matrix: focus / disabled / loading ───────────────── */
/* Keyboard focus ring (explicit so the gradient variants get a crisp ring;
mirrors the global a11y baseline). */
.btn:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
/* Disabled — dimmed, no hover lift, non-interactive. */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
transform: none;
filter: none;
pointer-events: none;
}
/* Loading — hide the label, show an inline spinner, block interaction.
Toggle with the `.is-loading` class or `aria-busy="true"`. */
.btn.is-loading,
.btn[aria-busy="true"] {
position: relative;
color: transparent;
pointer-events: none;
}
.btn.is-loading::after,
.btn[aria-busy="true"]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid var(--color-on-accent);
border-top-color: transparent;
border-radius: var(--radius-full);
animation: spin var(--spin-duration) linear infinite;
}
/* The secondary button's text isn't white — tint its spinner to the text. */
.btn-secondary.is-loading::after,
.btn-secondary[aria-busy="true"]::after {
border-color: var(--color-text-secondary);
border-top-color: transparent;
}
/* View Toggle Buttons */
.view-toggle {
display: flex;
gap: 2px;
gap: var(--space-0-5);
padding: 3px;
background-color: var(--color-bg-muted);
border-radius: 10px;
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
}
@@ -84,10 +136,10 @@
height: 32px;
background-color: transparent;
border: none;
border-radius: 8px;
border-radius: var(--radius-lg);
cursor: pointer;
color: var(--color-text-faint);
font-size: 14px;
font-size: var(--text-base);
transition: all 0.2s ease;
}
@@ -113,7 +165,7 @@
height: 20px;
background: var(--color-border-medium);
align-self: center;
margin: 0 2px;
margin: 0 var(--space-0-5);
}
.view-toggle-separator.hidden {
@@ -147,14 +199,14 @@
.group-by-label {
display: none;
font-size: 0.78rem;
font-weight: 600;
font-weight: var(--weight-semibold);
white-space: nowrap;
}
/* When a group-by is selected the label has text — expand the button to fit */
.group-by-btn:has(.group-by-label:not(:empty)) {
width: auto;
padding: 0 8px;
padding: 0 var(--space-2);
gap: 5px;
}
@@ -170,12 +222,12 @@
min-width: 140px;
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
box-shadow: 0 4px 16px var(--color-shadow);
padding: 4px;
padding: var(--space-1);
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--space-0-5);
}
.group-by-menu.hidden {
@@ -185,11 +237,11 @@
.group-by-option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-2-5);
border: none;
background: transparent;
border-radius: 6px;
border-radius: var(--radius-md);
cursor: pointer;
font-size: 0.85rem;
color: var(--color-text);
@@ -203,5 +255,5 @@
.group-by-option.active {
color: var(--color-accent);
font-weight: 600;
font-weight: var(--weight-semibold);
}
static/css/components/commandPalette.css
+106
View File
@@ -0,0 +1,106 @@
/* ============================================================
* Command palette (Cmd / Ctrl + K). Injected into <body> by
* js/app/commandPalette.js. Motion respects reduced-motion via
* the global guard; focus rings via the global :focus-visible.
* ============================================================ */
.cmdk-overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 12vh var(--space-4) var(--space-4);
background: var(--color-overlay);
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity var(--motion-base) var(--ease-standard);
}
.cmdk-overlay.active {
opacity: 1;
}
.cmdk-overlay.hidden {
display: none;
}
.cmdk-panel {
width: min(560px, 92vw);
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-2xl);
overflow: hidden;
transform: translateY(-8px) scale(0.98);
transition: transform var(--motion-base) var(--ease-standard);
}
.cmdk-overlay.active .cmdk-panel {
transform: none;
}
.cmdk-search {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.cmdk-search i {
color: var(--color-text-muted);
}
.cmdk-input {
flex: 1;
min-width: 0;
border: none;
background: none;
font-size: var(--text-md);
color: var(--color-text);
outline: none;
}
.cmdk-input::placeholder {
color: var(--color-text-faint);
}
.cmdk-list {
list-style: none;
margin: 0;
padding: var(--space-1-5);
max-height: 56vh;
overflow-y: auto;
}
.cmdk-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-lg);
cursor: pointer;
color: var(--color-text);
}
.cmdk-item i {
width: 20px;
text-align: center;
color: var(--color-text-muted);
}
.cmdk-item.is-active {
background: var(--color-accent-bg-sm);
}
.cmdk-item.is-active i {
color: var(--color-accent);
}
.cmdk-empty {
padding: var(--space-5);
text-align: center;
color: var(--color-text-muted);
}
static/css/components/contextMenu.css
+7 -7
View File
@@ -7,7 +7,7 @@
box-shadow:
0 10px 36px var(--color-shadow-lg),
0 0 0 1px var(--color-shadow-xs);
padding: 6px;
padding: var(--space-1-5);
min-width: 200px;
z-index: 2000;
display: block;
@@ -26,14 +26,14 @@
}
.context-menu-item {
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
color: var(--color-text-dark);
font-size: 14px;
border-radius: 8px;
font-size: var(--text-base);
border-radius: var(--radius-lg);
transition: background 0.12s ease;
}
@@ -48,7 +48,7 @@
.context-menu-item i {
width: 18px;
text-align: center;
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-subtle);
[dir="rtl"] & {
@@ -72,5 +72,5 @@
.context-menu-separator {
height: 1px;
background: var(--color-border-light);
margin: 4px 8px;
margin: var(--space-1) var(--space-2);
}
static/css/components/csp-utilities.css
+36 -35
View File
@@ -2,9 +2,10 @@
/* ── Empty state icons (large, muted) ── */
.empty-state-icon {
font-size: 48px;
color: var(--color-border-ddd);
margin-bottom: 16px;
font-size: var(--text-6xl);
color: var(--color-accent);
margin-bottom: var(--space-4);
opacity: 0.9;
}
.empty-state-icon.error {
color: var(--color-danger-text-alt);
@@ -23,8 +24,8 @@
margin-right: 5px;
}
.icon-ml {
margin-left: 4px;
font-size: 12px;
margin-left: var(--space-1);
font-size: var(--text-xs);
}
/* ── Success check icon ── */
@@ -34,9 +35,9 @@
/* ── Move dialog ── */
.move-dialog-hint {
margin: 0 0 12px;
margin: 0 0 var(--space-3);
color: var(--color-text-muted);
font-size: 14px;
font-size: var(--text-base);
}
.folder-select-container {
max-height: 220px;
@@ -50,7 +51,7 @@
/* ── Search spinner ── */
.search-spinner {
margin-right: 8px;
margin-right: var(--space-2);
}
/* ── Search empty state text ── */
@@ -60,7 +61,7 @@
/* ── Notification upload current file ── */
.notif-upload-current {
font-size: 11px;
font-size: var(--text-2xs);
color: var(--color-text-subtle);
margin: 3px 0;
white-space: nowrap;
@@ -71,7 +72,7 @@
/* ── Login auth hint ── */
.auth-hint {
color: var(--text-secondary, var(--color-text-medium));
margin-top: 4px;
margin-top: var(--space-1);
display: block;
}
@@ -81,7 +82,7 @@
}
.about-modal-header {
text-align: center;
padding: 20px 20px 0;
padding: var(--space-5) var(--space-5) 0;
}
.about-modal-avatar {
width: 64px;
@@ -92,27 +93,27 @@
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
margin-bottom: 12px;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
margin-bottom: var(--space-3);
}
.about-modal-username {
margin: 0;
font-size: 18px;
font-size: var(--text-lg);
color: var(--color-text-navy);
}
.about-modal-email {
margin: 4px 0 0;
font-size: 13px;
margin: var(--space-1) 0 0;
font-size: var(--text-sm);
color: var(--color-text-subtle);
}
.about-modal-role {
display: inline-block;
margin-top: 8px;
padding: 2px 10px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
margin-top: var(--space-2);
padding: var(--space-0-5) var(--space-2-5);
border-radius: var(--radius-xl);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
}
.about-modal-role-admin {
background: var(--color-role-admin-bg);
@@ -123,48 +124,48 @@
color: var(--color-text-subtle);
}
.about-modal-storage {
padding: 16px 20px;
padding: var(--space-4) var(--space-5);
}
.about-modal-storage-label {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
margin-bottom: var(--space-1-5);
}
.about-modal-storage-label i {
margin-right: 4px;
margin-right: var(--space-1);
}
.about-modal-bar-bg {
background: var(--color-border-light);
border-radius: 6px;
border-radius: var(--radius-md);
height: 8px;
overflow: hidden;
margin-bottom: 4px;
margin-bottom: var(--space-1);
}
.about-modal-bar-fill {
height: 100%;
border-radius: 6px;
border-radius: var(--radius-md);
transition: width 0.3s;
}
.about-modal-bar-text {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-subtle);
text-align: right;
}
.about-modal-footer {
padding: 0 20px 16px;
padding: 0 var(--space-5) var(--space-4);
display: flex;
justify-content: center;
}
.about-modal-close-btn {
padding: 8px 24px;
padding: var(--space-2) var(--space-6);
border: 1px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
color: var(--color-text-dark);
font-size: 13px;
font-weight: 600;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: background 0.15s;
}
static/css/components/dialogs.css
+103 -103
View File
@@ -37,7 +37,7 @@
.rename-dialog-content {
background-color: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
width: 420px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-2xl);
@@ -47,24 +47,24 @@
.rename-dialog-header {
font-size: 17px;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
padding: 20px 24px;
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
}
.rename-dialog-body {
padding: 24px;
padding: var(--space-6);
}
.rename-dialog input {
width: 100%;
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
border: 2px solid var(--color-border);
border-radius: 10px;
border-radius: var(--radius-xl);
font-size: 15px;
background: var(--color-bg-hover);
color: var(--color-text-heading);
@@ -85,8 +85,8 @@
.rename-dialog-buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
}
@@ -120,7 +120,7 @@
.share-dialog-content {
background-color: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
width: 480px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-2xl);
@@ -132,22 +132,22 @@
.share-dialog-header {
font-size: 17px;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
padding: 20px 24px;
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
}
.share-dialog input,
.share-dialog textarea {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-input);
color: var(--color-text-heading);
transition: all 0.15s ease;
@@ -164,35 +164,35 @@
.share-dialog-buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
}
.shared-item-info {
padding: 12px 24px;
padding: var(--space-3) var(--space-6);
background: var(--color-bg-hover);
border-bottom: 1px solid var(--color-border);
font-size: 14px;
font-size: var(--text-base);
}
.share-options {
padding: 20px 24px 20px;
padding: var(--space-5) var(--space-6) var(--space-5);
}
.share-options > #share-confirm-btn {
display: block;
margin-left: auto;
margin-top: 16px;
margin-top: var(--space-4);
}
.share-options h3,
#existing-shares-section h3,
#new-share-section h3 {
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
margin-bottom: var(--space-2-5);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -200,7 +200,7 @@
#existing-shares-section,
#new-share-section {
padding: 0 24px;
padding: 0 var(--space-6);
}
.share-dialog .form-group {
@@ -225,7 +225,7 @@
.shared-dialog-content {
background-color: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
width: 480px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-2xl);
@@ -238,13 +238,13 @@
.shared-dialog-header {
font-size: 17px;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
padding: 20px 24px;
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
}
.shared-dialog-header .close-dialog-btn {
@@ -254,8 +254,8 @@
font-size: 22px;
cursor: pointer;
color: var(--color-text-muted);
padding: 4px 8px;
border-radius: 6px;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-md);
transition: all 0.15s;
}
@@ -269,30 +269,30 @@
.shared-dialog .share-password-section,
.shared-dialog .share-expiration-section,
.shared-dialog .notification-form {
padding: 16px 24px;
padding: var(--space-4) var(--space-6);
}
.shared-dialog .share-link-section label,
.shared-dialog .share-permissions-section h4,
.shared-dialog .notification-form label {
display: block;
font-weight: 600;
margin-bottom: 8px;
font-weight: var(--weight-semibold);
margin-bottom: var(--space-2);
color: var(--color-text);
font-size: 14px;
font-size: var(--text-base);
}
.shared-dialog .share-link-input {
display: flex;
gap: 8px;
gap: var(--space-2);
}
.shared-dialog .share-link-input input {
flex: 1;
padding: 8px 12px;
padding: var(--space-2) var(--space-3);
border: 2px solid var(--color-border);
border-radius: 8px;
font-size: 13px;
border-radius: var(--radius-lg);
font-size: var(--text-sm);
background: var(--color-bg-hover);
color: var(--color-text-heading);
}
@@ -302,42 +302,42 @@
.shared-dialog .share-expiration-section label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 14px;
gap: var(--space-2);
margin-bottom: var(--space-2);
font-size: var(--text-base);
color: var(--color-text-secondary);
}
.shared-dialog .password-input-group {
display: flex;
gap: 8px;
margin-top: 8px;
gap: var(--space-2);
margin-top: var(--space-2);
}
.shared-dialog .password-input-group input {
flex: 1;
padding: 8px 12px;
padding: var(--space-2) var(--space-3);
border: 2px solid var(--color-border);
border-radius: 8px;
font-size: 13px;
border-radius: var(--radius-lg);
font-size: var(--text-sm);
background: var(--color-bg-hover);
}
.shared-dialog .share-expiration-section input[type="date"] {
padding: 8px 12px;
padding: var(--space-2) var(--space-3);
border: 2px solid var(--color-border);
border-radius: 8px;
font-size: 13px;
border-radius: var(--radius-lg);
font-size: var(--text-sm);
background: var(--color-bg-hover);
margin-top: 8px;
margin-top: var(--space-2);
}
.shared-dialog .share-actions,
.shared-dialog .notification-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
}
@@ -345,10 +345,10 @@
.shared-dialog .notification-form input,
.shared-dialog .notification-form textarea {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-hover);
color: var(--color-text-heading);
outline: none;
@@ -373,20 +373,20 @@
display: none; /* Hidden by default, shown via JS when navigating into subfolders */
align-items: center;
flex-wrap: wrap;
gap: 4px;
padding: 8px 12px;
gap: var(--space-1);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-hover);
border-radius: 8px;
margin-bottom: 12px;
font-size: 13px;
border-radius: var(--radius-lg);
margin-bottom: var(--space-3);
font-size: var(--text-sm);
overflow-x: auto;
}
.move-breadcrumb-item {
color: var(--color-text-secondary);
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
padding: var(--space-0-5) var(--space-1-5);
border-radius: var(--radius-sm);
transition: all 0.15s ease;
white-space: nowrap;
}
@@ -398,26 +398,26 @@
.move-breadcrumb-item.current {
color: var(--color-accent);
font-weight: 600;
font-weight: var(--weight-semibold);
cursor: default;
}
.move-breadcrumb-separator {
color: var(--color-text-placeholder);
margin: 0 2px;
margin: 0 var(--space-0-5);
}
/* Folder select items in move dialog */
.folder-select-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-3-5);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.15s ease;
color: var(--color-text-secondary);
font-size: 14px;
font-size: var(--text-base);
}
.folder-select-item:hover {
@@ -427,12 +427,12 @@
.folder-select-item.selected {
background-color: var(--color-accent-ring);
color: var(--color-accent);
font-weight: 600;
font-weight: var(--weight-semibold);
}
.folder-select-item i {
color: var(--color-cal-1);
font-size: 16px;
font-size: var(--text-md);
}
.folder-select-item.selected i {
@@ -443,7 +443,7 @@
.folder-select-item.folder-select-current {
background-color: var(--color-success-ring);
color: var(--color-success-text-strong);
font-weight: 500;
font-weight: var(--weight-medium);
}
.folder-select-item.folder-select-current:hover {
@@ -479,7 +479,7 @@
.folder-select-item.folder-navigate .folder-navigate-icon {
color: var(--color-text-placeholder);
font-size: 12px;
font-size: var(--text-xs);
opacity: 0;
transition: opacity 0.15s ease;
}
@@ -493,20 +493,20 @@
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
gap: var(--space-2);
padding: var(--space-6);
color: var(--color-text-placeholder);
font-size: 14px;
font-size: var(--text-base);
}
.folder-select-empty i {
font-size: 20px;
font-size: var(--text-xl);
}
/* Playlist track count in selector */
.playlist-track-count {
margin-left: auto;
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-muted);
}
@@ -533,7 +533,7 @@
.confirm-dialog-content {
background: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
width: 400px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-2xl);
@@ -543,32 +543,32 @@
}
.confirm-dialog-icon {
padding: 28px 24px 12px;
padding: var(--space-7) var(--space-6) var(--space-3);
}
.confirm-dialog-icon i {
font-size: 40px;
font-size: var(--text-5xl);
color: var(--color-danger-bg);
}
.confirm-dialog-title {
font-size: 17px;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
padding: 0 24px 8px;
padding: 0 var(--space-6) var(--space-2);
}
.confirm-dialog-message {
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-muted);
padding: 0 24px 20px;
line-height: 1.5;
padding: 0 var(--space-6) var(--space-5);
line-height: var(--leading-normal);
}
.confirm-dialog-buttons {
display: flex;
gap: 12px;
padding: 16px 24px;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
justify-content: flex-end;
@@ -578,9 +578,9 @@
background: linear-gradient(135deg, var(--color-danger-bg) 0%, var(--color-danger-bg-hover) 100%);
color: var(--color-danger-text);
border: none;
padding: 10px 20px;
border-radius: 10px;
font-weight: 500;
padding: var(--space-2-5) var(--space-5);
border-radius: var(--radius-xl);
font-weight: var(--weight-medium);
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 2px 8px var(--color-danger-ring);
@@ -607,7 +607,7 @@
.dialog-content {
background-color: var(--color-bg-surface);
border-radius: 10px;
border-radius: var(--radius-xl);
box-shadow: 0 10px 25px var(--color-shadow);
width: 500px;
max-width: 90%;
@@ -616,7 +616,7 @@
}
.dialog-header {
padding: 15px 20px;
padding: 15px var(--space-5);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
@@ -624,7 +624,7 @@
}
.dialog-header h3 {
font-size: 18px;
font-size: var(--text-lg);
color: var(--color-text);
margin: 0;
}
@@ -632,31 +632,31 @@
.close-dialog-btn {
background: none;
border: none;
font-size: 24px;
font-size: var(--text-2xl);
cursor: pointer;
color: var(--color-text-placeholder);
}
.dialog-body {
padding: 20px;
padding: var(--space-5);
}
.share-item-info {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
gap: var(--space-2-5);
margin-bottom: var(--space-5);
}
.share-link-container {
display: flex;
gap: 10px;
gap: var(--space-2-5);
}
.share-link-container input {
flex-grow: 1;
padding: 10px;
padding: var(--space-2-5);
border: 1px solid var(--color-border);
border-radius: 6px;
font-size: 14px;
border-radius: var(--radius-md);
font-size: var(--text-base);
}
static/css/components/expiryChip.css
+4 -4
View File
@@ -20,10 +20,10 @@
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 4px;
padding: 2px 7px;
border-radius: 10px;
font-size: 11px;
gap: var(--space-1);
padding: var(--space-0-5) 7px;
border-radius: var(--radius-xl);
font-size: var(--text-2xs);
white-space: nowrap;
}
static/css/components/fileType.css
+2 -2
View File
@@ -12,7 +12,7 @@
right: 0;
height: 22%;
background-color: var(--color-ft-folder-tab);
border-radius: 8px 8px 0 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* don't use FontAwesome / svg for folders and prefer CSS trick */
@@ -57,7 +57,7 @@
color: var(--color-video-play);
text-shadow: 0 0 3px var(--color-video-play-shadow);
z-index: 2; /* above the img */
font-weight: bold;
font-weight: var(--weight-bold);
}
.code-icon {
static/css/components/groupsModal.css
+54 -54
View File
@@ -13,8 +13,8 @@
.groups-modal {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 20px;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
}
/* ── Common ─────────────────────────────────────────────────────────────── */
@@ -22,36 +22,36 @@
.groups-modal__status,
.groups-modal__empty-line {
color: var(--color-text-subtle);
font-size: 13px;
padding: 8px 0;
font-size: var(--text-sm);
padding: var(--space-2) 0;
}
.groups-modal__error {
color: var(--color-danger-text);
background: var(--color-danger-bg);
border: 1px solid var(--color-danger-alt);
border-radius: 6px;
padding: 10px 12px;
font-size: 13px;
border-radius: var(--radius-md);
padding: var(--space-2-5) var(--space-3);
font-size: var(--text-sm);
}
.groups-modal__inline-error {
margin: 0 0 8px 0;
margin: 0 0 var(--space-2) 0;
color: var(--color-danger-text);
background: var(--color-danger-bg);
border: 1px solid var(--color-danger-alt);
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
}
.groups-modal__section-title {
font-size: 12px;
font-weight: 600;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
/* ── List view ──────────────────────────────────────────────────────────── */
@@ -60,11 +60,11 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
gap: var(--space-3);
}
.groups-modal__subtitle {
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-secondary);
}
@@ -75,7 +75,7 @@
.groups-modal__list {
display: flex;
flex-direction: column;
gap: 4px;
gap: var(--space-1);
max-height: 60vh;
overflow-y: auto;
}
@@ -84,8 +84,8 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-radius: 8px;
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-lg);
cursor: pointer;
transition: background-color 0.12s ease;
}
@@ -99,15 +99,15 @@
.groups-modal__row-main {
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
flex: 1;
min-width: 0;
}
.groups-modal__row-desc {
color: var(--color-text-subtle);
font-size: 12px;
margin-left: 8px;
font-size: var(--text-xs);
margin-left: var(--space-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -118,40 +118,40 @@
.groups-modal__row-badge {
background: var(--color-bg-muted);
color: var(--color-text-subtle);
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-xl);
text-transform: uppercase;
letter-spacing: 0.03em;
flex-shrink: 0;
margin-left: 8px;
margin-left: var(--space-2);
}
.groups-modal__row-count {
color: var(--color-text-subtle);
font-size: 12px;
font-size: var(--text-xs);
flex-shrink: 0;
margin-left: auto;
padding-left: 8px;
padding-left: var(--space-2);
white-space: nowrap;
}
.groups-modal__load-more {
align-self: center;
margin-top: 12px;
margin-top: var(--space-3);
}
.groups-modal__empty {
text-align: center;
color: var(--color-text-subtle);
padding: 32px 12px;
padding: var(--space-8) var(--space-3);
}
.groups-modal__empty-icon {
font-size: 32px;
font-size: var(--text-4xl);
color: var(--color-text-faint);
margin-bottom: 8px;
margin-bottom: var(--space-2);
display: block;
}
@@ -160,8 +160,8 @@
.groups-modal__detail-header {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 12px;
gap: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
@@ -172,7 +172,7 @@
.groups-modal__detail-title-wrap {
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
flex: 1;
min-width: 0;
}
@@ -180,7 +180,7 @@
.groups-modal__members {
display: flex;
flex-direction: column;
gap: 4px;
gap: var(--space-1);
max-height: 40vh;
overflow-y: auto;
}
@@ -189,8 +189,8 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px;
border-radius: 6px;
padding: var(--space-1-5) var(--space-2);
border-radius: var(--radius-md);
transition: background-color 0.12s ease;
}
@@ -216,17 +216,17 @@
.groups-modal__add-row {
position: relative;
margin-top: 8px;
margin-top: var(--space-2);
}
.groups-modal__add-input {
width: 100%;
padding: 8px 12px;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: 6px;
border-radius: var(--radius-md);
background: var(--color-bg-surface);
color: var(--color-text);
font-size: 13px;
font-size: var(--text-sm);
}
.groups-modal__add-input:focus {
@@ -242,7 +242,7 @@
right: 0;
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: 6px;
border-radius: var(--radius-md);
box-shadow: 0 4px 12px var(--color-shadow);
max-height: 240px;
overflow-y: auto;
@@ -254,7 +254,7 @@
}
.groups-modal__add-item {
padding: 8px 12px;
padding: var(--space-2) var(--space-3);
cursor: pointer;
transition: background-color 0.12s ease;
}
@@ -270,9 +270,9 @@
.groups-modal__footer {
display: flex;
justify-content: flex-start;
padding-top: 12px;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
margin-top: 8px;
margin-top: var(--space-2);
}
/* ── Inline create / rename / confirm-delete forms ──────────────────────── */
@@ -283,24 +283,24 @@
.groups-modal__form {
display: flex;
flex-direction: column;
gap: 12px;
padding: 8px 0;
gap: var(--space-3);
padding: var(--space-2) 0;
}
.groups-modal__form-label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
font-weight: 500;
gap: var(--space-1-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
}
.groups-modal__form-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 4px;
gap: var(--space-2);
margin-top: var(--space-1);
}
.groups-modal__inline-error.hidden {
static/css/components/itemTooltip.css
+4 -4
View File
@@ -18,11 +18,11 @@
display: grid;
grid-template-columns: 1em max-content 1fr;
column-gap: 0.6em;
row-gap: 6px;
row-gap: var(--space-1-5);
align-items: center;
color: var(--color-text-muted);
font-size: 0.75rem;
font-size: var(--text-xs);
pointer-events: none;
@@ -51,7 +51,7 @@
/* Label column */
.path-tooltip__label {
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
white-space: nowrap;
}
@@ -88,5 +88,5 @@
}
.path-tooltip .user-vignette__name {
font-size: 0.75rem;
font-size: var(--text-xs);
}
static/css/components/languageSelector.css
+21 -23
View File
@@ -6,14 +6,14 @@
.language-selector-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
gap: var(--space-2);
padding: var(--space-2) var(--space-3-5);
background-color: var(--color-bg-muted);
border: 1px solid var(--color-border);
border-radius: 50px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
transition: all 0.2s ease;
user-select: none;
@@ -25,12 +25,12 @@
}
.language-selector-toggle i {
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-muted);
}
.language-selector-toggle .lang-code {
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text);
}
@@ -38,7 +38,7 @@
font-size: 10px;
color: var(--color-text-muted);
transition: transform 0.2s ease;
margin-left: 2px;
margin-left: var(--space-0-5);
}
.language-selector.open .dropdown-arrow {
@@ -53,7 +53,7 @@
max-height: 420px;
overflow-y: auto;
background-color: var(--color-bg-surface);
border-radius: 12px;
border-radius: var(--radius-2xl);
box-shadow: 0 4px 20px var(--color-shadow-lg);
border: 1px solid var(--color-border);
opacity: 0;
@@ -72,10 +72,10 @@
.language-option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
gap: var(--space-2-5);
padding: var(--space-3) var(--space-4);
cursor: pointer;
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-secondary);
transition: background-color 0.15s ease;
}
@@ -86,12 +86,12 @@
.language-option.active {
background-color: var(--color-accent-bg-sm);
color: var(--color-accent);
color: var(--color-accent-text);
}
.language-option .lang-flag {
font-size: 18px;
line-height: 1;
font-size: var(--text-lg);
line-height: var(--leading-none);
}
.language-option .lang-name {
@@ -100,7 +100,7 @@
.language-option .lang-check {
color: var(--color-accent);
font-size: 12px;
font-size: var(--text-xs);
opacity: 0;
}
@@ -120,11 +120,10 @@
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
padding: 12px 20px;
gap: 12px;
padding: var(--space-3) var(--space-5);
gap: var(--space-3);
color: var(--color-text-dark);
font-size: 14px;
font-size: var(--text-base);
cursor: pointer;
}
@@ -132,7 +131,6 @@
.user-menu .language-selector-toggle:focus {
background: var(--color-bg-hover) !important;
border: none !important;
outline: none !important;
}
.user-menu .language-selector-toggle i.fa-globe {
@@ -143,8 +141,8 @@
}
.user-menu .language-selector-toggle .lang-code {
font-weight: 500;
font-size: 13px;
font-weight: var(--weight-medium);
font-size: var(--text-sm);
color: var(--color-text-dark);
}
@@ -172,6 +170,6 @@
/* Language options inside user menu — compact rows */
.user-menu .language-option {
padding: 10px 20px 10px 28px;
padding: var(--space-2-5) var(--space-5) var(--space-2-5) var(--space-7);
font-size: 13.5px;
}
static/css/components/linkChip.css
+3 -3
View File
@@ -9,12 +9,12 @@
align-items: center;
gap: 5px;
max-width: 100%;
padding: 2px 0;
padding: var(--space-0-5) 0;
border: none;
background: transparent;
color: var(--color-text);
cursor: pointer;
font-size: 13px;
font-size: var(--text-sm);
text-align: left;
transition: color 0.12s;
}
@@ -29,7 +29,7 @@
}
.link-chip__icon {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
flex-shrink: 0;
transition: color 0.12s;
static/css/components/modals.css
+55 -53
View File
@@ -12,8 +12,8 @@
.about-modal {
background: var(--color-bg-surface);
border-radius: 20px;
padding: 40px;
border-radius: var(--radius-4xl);
padding: var(--space-10);
max-width: 400px;
width: 90%;
text-align: center;
@@ -24,73 +24,74 @@
.about-modal-logo {
width: 72px;
height: 72px;
background: var(--color-accent-gradient);
border-radius: 20px;
background: var(--color-logo-gradient);
border-radius: var(--radius-4xl);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
margin: 0 auto var(--space-5);
box-shadow: 0 8px 24px var(--color-accent-shadow);
}
.about-modal-logo i {
font-size: 32px;
color: var(--color-danger-text);
.about-modal-logo svg {
width: 36px;
height: 36px;
fill: var(--color-on-accent);
}
.about-modal h2 {
font-size: 22px;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-text-heading);
margin-bottom: 6px;
margin-bottom: var(--space-1-5);
}
.about-modal .about-version {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-faint);
margin-bottom: 20px;
margin-bottom: var(--space-5);
}
.about-modal .about-description {
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-subtle);
line-height: 1.6;
margin-bottom: 24px;
margin-bottom: var(--space-6);
}
.about-modal .about-tech {
display: flex;
justify-content: center;
gap: 12px;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: 24px;
margin-bottom: var(--space-6);
}
.about-modal .about-tech-badge {
padding: 4px 12px;
padding: var(--space-1) var(--space-3);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: 20px;
font-size: 12px;
border-radius: var(--radius-4xl);
font-size: var(--text-xs);
color: var(--color-text-subtle);
font-weight: 500;
font-weight: var(--weight-medium);
}
.about-modal .about-links {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 24px;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.about-modal .about-link {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--color-accent);
gap: var(--space-1-5);
font-size: var(--text-sm);
color: var(--color-accent-text);
text-decoration: none;
font-weight: 500;
font-weight: var(--weight-medium);
transition: opacity 0.2s;
}
@@ -99,13 +100,13 @@
}
.about-modal .about-close-btn {
padding: 10px 32px;
padding: var(--space-2-5) var(--space-8);
background: var(--color-accent-gradient);
color: var(--color-danger-text);
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border-radius: var(--radius-xl);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
cursor: pointer;
transition:
transform 0.2s,
@@ -141,7 +142,7 @@
.modal-container {
background-color: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
width: 420px;
max-width: 90%;
box-shadow: 0 20px 60px var(--color-shadow-3xl);
@@ -157,7 +158,7 @@
.modal-header {
display: flex;
align-items: center;
padding: 20px 24px;
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
position: relative;
}
@@ -166,27 +167,28 @@
width: 44px;
height: 44px;
background: var(--color-accent-gradient);
border-radius: 12px;
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
margin-right: var(--space-3-5);
flex-shrink: 0;
[dir="rtl"] & {
margin-left: 14px;
margin-left: var(--space-3-5);
margin-right: unset;
}
}
.modal-icon i {
color: var(--color-danger-text);
font-size: 20px;
font-size: var(--text-xl);
}
.modal-header h2,
.modal-header h3 {
font-size: 18px;
font-weight: 600;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
margin: 0;
flex: 1;
@@ -203,7 +205,7 @@
height: 32px;
border: none;
background: var(--color-bg-muted);
border-radius: 8px;
border-radius: var(--radius-lg);
cursor: pointer;
display: flex;
align-items: center;
@@ -223,23 +225,23 @@
}
.modal-body {
padding: 24px;
padding: var(--space-6);
}
.modal-body label {
display: block;
font-size: 14px;
font-weight: 500;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
.modal-input {
width: 100%;
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
font-size: 15px;
border: 2px solid var(--color-border);
border-radius: 10px;
border-radius: var(--radius-xl);
background: var(--color-bg-hover);
color: var(--color-text-heading);
transition: all 0.15s ease;
@@ -261,25 +263,25 @@
}
.modal-error {
margin-top: 8px;
font-size: 13px;
margin-top: var(--space-2);
font-size: var(--text-sm);
color: var(--color-error-text);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--color-bg-hover);
border-top: 1px solid var(--color-border);
}
.modal-footer .btn {
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
border-radius: 10px;
padding: var(--space-2-5) var(--space-5);
font-size: var(--text-base);
font-weight: var(--weight-medium);
border-radius: var(--radius-xl);
cursor: pointer;
transition: all 0.15s ease;
}
static/css/components/notifications.css
+52 -198
View File
@@ -5,7 +5,7 @@
right: 20px;
background-color: var(--color-notification-bg);
width: 250px;
border-radius: 8px;
border-radius: var(--radius-lg);
box-shadow: 0 5px 15px var(--color-shadow);
padding: 15px;
border-left: 4px solid var(--color-accent);
@@ -21,14 +21,14 @@
}
.notification-title {
font-weight: bold;
font-size: 14px;
font-weight: var(--weight-bold);
font-size: var(--text-base);
margin-bottom: 5px;
color: var(--color-text);
}
.notification-message {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-muted);
}
@@ -37,9 +37,9 @@
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
padding: 15px var(--space-5);
background-color: var(--color-notification-bg);
border-radius: 8px;
border-radius: var(--radius-lg);
box-shadow: 0 4px 12px var(--color-shadow);
display: flex;
align-items: center;
@@ -69,10 +69,10 @@
.close-notification-btn {
background: none;
border: none;
font-size: 18px;
font-size: var(--text-lg);
cursor: pointer;
color: var(--color-text-placeholder);
margin-left: 10px;
margin-left: var(--space-2-5);
}
/* Notification Bell */
@@ -84,7 +84,7 @@
background: none;
border: none;
cursor: pointer;
font-size: 18px;
font-size: var(--text-lg);
color: var(--color-text-subtle);
width: 40px;
height: 40px;
@@ -113,13 +113,13 @@
min-width: 16px;
height: 16px;
line-height: 16px;
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-notification-badge);
color: var(--color-notification-bg);
font-size: 10px;
font-weight: 700;
font-weight: var(--weight-bold);
text-align: center;
padding: 0 4px;
padding: 0 var(--space-1);
pointer-events: none;
}
@@ -163,7 +163,7 @@
width: 380px;
max-height: 480px;
background: var(--color-notification-bg);
border-radius: 16px;
border-radius: var(--radius-3xl);
box-shadow:
0 12px 40px var(--color-shadow-md),
0 0 0 1px var(--color-shadow-xs);
@@ -192,12 +192,12 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
padding: var(--space-3-5) var(--space-4);
border-bottom: 1px solid var(--color-border-xfaint);
}
.notif-panel-title {
font-weight: 600;
font-weight: var(--weight-semibold);
font-size: 15px;
color: var(--color-text-heading);
}
@@ -207,9 +207,9 @@
border: none;
cursor: pointer;
color: var(--color-text-faint);
font-size: 14px;
padding: 4px 8px;
border-radius: 6px;
font-size: var(--text-base);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-md);
transition: all 0.15s;
}
@@ -222,6 +222,23 @@
flex: 1;
overflow-y: auto;
max-height: 400px;
/* Thin, neutral scrollbar — replaces the heavy global accent bar that read
as amateur in the panel. */
scrollbar-width: thin;
scrollbar-color: var(--color-border-medium) transparent;
}
.notif-panel-body::-webkit-scrollbar {
width: 6px;
}
.notif-panel-body::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-full);
}
.notif-panel-body::-webkit-scrollbar-track {
background: transparent;
}
.notif-empty {
@@ -229,25 +246,25 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
padding: var(--space-10) var(--space-5);
color: var(--color-text-faint);
gap: 8px;
gap: var(--space-2);
}
.notif-empty i {
font-size: 28px;
font-size: var(--text-3xl);
opacity: 0.5;
}
.notif-empty span {
font-size: 14px;
font-size: var(--text-base);
}
.notif-item {
display: flex;
align-items: flex-start;
padding: 12px 16px;
gap: 12px;
padding: var(--space-3) var(--space-4);
gap: var(--space-3);
border-bottom: 1px solid var(--color-bg-subtle);
transition: background 0.15s;
cursor: default;
@@ -264,12 +281,12 @@
.notif-item-icon {
width: 32px;
height: 32px;
border-radius: 8px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
font-size: var(--text-base);
}
.notif-item-icon.upload {
@@ -293,14 +310,14 @@
}
.notif-item-title {
font-size: 13px;
font-weight: 600;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
margin-bottom: 2px;
margin-bottom: var(--space-0-5);
}
.notif-item-text {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-subtle);
white-space: nowrap;
overflow: hidden;
@@ -308,19 +325,19 @@
}
.notif-item-time {
font-size: 11px;
font-size: var(--text-2xs);
color: var(--color-text-faint);
margin-top: 3px;
}
.notif-upload-progress {
margin-top: 6px;
margin-top: var(--space-1-5);
}
.notif-upload-bar {
height: 3px;
background: var(--color-bg-empty);
border-radius: 2px;
border-radius: var(--radius-xs);
overflow: hidden;
}
@@ -329,7 +346,7 @@
background: var(--color-accent);
width: 0%;
transition: width 0.2s ease;
border-radius: 2px;
border-radius: var(--radius-xs);
}
.notif-upload-fill.done {
@@ -349,169 +366,6 @@
.notif-upload-pct,
.notif-upload-stats {
font-size: 11px;
font-size: var(--text-2xs);
color: var(--color-text-faint);
}
/* Upload Progress Toast (legacy — hidden, kept for compat) */
.upload-toast {
position: fixed;
bottom: 24px;
right: 24px;
width: 360px;
max-height: 400px;
background: var(--color-notification-bg);
border-radius: 12px;
box-shadow: 0 8px 30px var(--color-shadow-md);
z-index: 10000;
display: none;
flex-direction: column;
overflow: hidden;
font-family: inherit;
animation: uploadToastSlideIn 0.3s ease-out;
}
.upload-toast.visible {
display: flex;
}
@keyframes uploadToastSlideIn {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.upload-toast-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--color-accent);
color: var(--color-danger-text);
}
.upload-toast-title {
font-weight: 600;
font-size: 14px;
}
.upload-toast-close {
background: none;
border: none;
color: var(--color-danger-text);
font-size: 20px;
cursor: pointer;
line-height: 1;
padding: 0 4px;
opacity: 0.8;
}
.upload-toast-close:hover {
opacity: 1;
}
.upload-toast-body {
flex: 1;
overflow-y: auto;
padding: 8px 0;
max-height: 260px;
}
.upload-toast-file {
display: flex;
align-items: center;
padding: 6px 16px;
gap: 10px;
}
.upload-toast-file-icon {
font-size: 16px;
color: var(--color-text-light);
flex-shrink: 0;
width: 20px;
text-align: center;
}
.upload-toast-file-icon.done {
color: var(--color-notification-success);
}
.upload-toast-file-icon.error {
color: var(--color-notification-error);
}
.upload-toast-file-info {
flex: 1;
min-width: 0;
}
.upload-toast-file-name {
font-size: 13px;
color: var(--color-text-black);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.upload-toast-file-bar {
height: 3px;
background: var(--color-bg-empty);
border-radius: 2px;
margin-top: 4px;
overflow: hidden;
}
.upload-toast-file-fill {
height: 100%;
background: var(--color-accent);
width: 0%;
transition: width 0.2s ease;
border-radius: 2px;
}
.upload-toast-file-fill.done {
background: var(--color-notification-success);
}
.upload-toast-file-fill.error {
background: var(--color-notification-error);
}
.upload-toast-file-pct {
font-size: 12px;
color: var(--color-text-light);
flex-shrink: 0;
width: 38px;
text-align: right;
}
.upload-toast-footer {
padding: 10px 16px;
border-top: 1px solid var(--color-border-xfaint);
}
.upload-toast-overall-bar {
height: 4px;
background: var(--color-bg-empty);
border-radius: 2px;
overflow: hidden;
margin-bottom: 6px;
}
.upload-toast-overall-fill {
height: 100%;
background: var(--color-accent);
width: 0%;
transition: width 0.25s ease;
border-radius: 2px;
}
.upload-toast-stats {
font-size: 12px;
color: var(--color-text-faint2);
}
static/css/components/resourceList.css
+373 -103
View File
@@ -16,7 +16,7 @@
.file-icon {
width: 100px;
height: 70px;
border-radius: 8px;
border-radius: var(--radius-lg);
position: relative;
display: flex;
align-items: center;
@@ -33,12 +33,25 @@
height: 100%;
object-fit: cover;
z-index: 1;
/* The thumbnail is purely decorative — it must never be a hit-test target.
In grid view it fills the whole tile UNDER the overlay controls (checkbox,
favorite star, kebab); a loaded full-bleed thumbnail (promoted to its own
stacking context by the hover scale transform) was capturing clicks meant
for those controls, so they "did nothing" (the click fell through to
open-file). Making it transparent to pointer events routes corner clicks
to the controls and body clicks to the .file-icon (which still opens). */
pointer-events: none;
}
/* ── Item states ─────────────────────────────────────────── */
.file-item {
background-color: var(--color-item);
/* Smooth the hover/selection tint (list rows used to snap). Grid cards
override this with their own transform/shadow transition. */
transition:
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard);
}
/* Brief pulse on rows that were just optimistically inserted (e.g.
@@ -129,7 +142,7 @@
height: 17px;
cursor: pointer;
accent-color: var(--color-accent);
border-radius: 4px;
border-radius: var(--radius-sm);
}
.list-header.selection-mode {
@@ -148,9 +161,9 @@
.list-header {
display: grid;
grid-template-columns: var(--files-list-columns);
column-gap: 12px;
column-gap: var(--space-3);
padding: 15px;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text);
background-color: var(--color-bg-subtle);
border-bottom: 1px solid var(--color-border-faint);
@@ -198,6 +211,42 @@
text-align: right;
}
/* ── Sortable column headers (flat Drive-style sort) ─────────── */
.list-header-sort {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
min-width: 0;
padding: 0;
border: none;
background: none;
cursor: pointer;
/* Inherit the header row's weight + colour so it reads as a header. */
font: inherit;
color: inherit;
transition: color var(--motion-fast) var(--ease-standard);
}
.list-header-sort:hover,
.list-header-sort.is-active {
color: var(--color-accent);
}
.list-header-sort__arrow {
font-size: var(--text-2xs);
color: var(--color-accent);
flex-shrink: 0;
}
/* Match the value-cell alignment so header and data line up. */
.list-header-sort[data-sort-field="size"] {
justify-self: end;
}
.list-header-sort[data-sort-field="modified_at"] {
justify-self: center;
}
/* ── Owner column ────────────────────────────────────────── */
/* Styles applied whenever the cell is visible (hidden class absent).
@@ -215,7 +264,7 @@
plain-text fallback content (cells without a vignette child). */
.owner-cell {
color: var(--color-text-secondary);
font-size: 14px;
font-size: var(--text-base);
display: flex;
align-items: center;
min-width: 0;
@@ -234,7 +283,7 @@
display: flex;
flex-direction: column;
width: 100%;
border-radius: 10px;
border-radius: var(--radius-xl);
overflow: hidden;
background-color: var(--color-item);
box-shadow: 0 1px 3px var(--color-shadow-xs);
@@ -243,11 +292,21 @@
.files-list-view .file-item {
display: grid;
grid-template-columns: var(--files-list-columns);
column-gap: 12px;
padding: 12px 15px;
column-gap: var(--space-3);
padding: var(--space-3) 15px;
border-bottom: 1px solid var(--color-border-xfaint);
align-items: center;
cursor: pointer;
transition:
background-color var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard);
}
/* "This row" emphasis — a left accent bar on hover/selection (inset shadow,
so it adds no width and never shifts the grid columns). */
.files-list-view .file-item:hover,
.files-list-view .file-item.selected {
box-shadow: inset 3px 0 0 var(--color-accent);
}
.files-list-view .file-item.drop-target {
@@ -258,7 +317,7 @@
color: var(--color-text);
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
min-width: 0;
overflow: hidden;
}
@@ -290,13 +349,16 @@
}
.files-list-view .file-item .file-icon {
width: 36px;
height: 36px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 16px;
border-radius: var(--radius-lg);
/* Hairline inner ring — consistent with the grid thumbnails so light
previews don't bleed into the row. */
box-shadow: inset 0 0 0 1px var(--color-border);
font-size: var(--text-md);
margin-bottom: 0;
flex-shrink: 0;
}
@@ -309,20 +371,20 @@
.files-list-view .file-item .date-cell {
color: var(--color-text-muted);
font-size: 14px;
font-size: var(--text-base);
}
.files-list-view .file-item .size-cell {
color: var(--color-text-muted);
font-size: 14px;
font-size: var(--text-base);
text-align: right;
font-variant-numeric: tabular-nums;
}
.files-list-view .file-item .type-cell {
color: var(--color-text-secondary);
font-weight: 500;
font-size: 14px;
font-weight: var(--weight-medium);
font-size: var(--text-base);
}
.files-list-view .file-item .action-cell {
@@ -338,14 +400,14 @@
display: inline;
width: 28px;
height: 28px;
border-radius: 8px;
border-radius: var(--radius-lg);
border: none;
background: transparent;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text-subtle);
font-size: 16px;
font-size: var(--text-md);
}
.files-list-view .file-item .action-cell button:not(.btn-action):hover {
@@ -363,12 +425,27 @@
display: inline;
}
/* Reveal the kebab on hover for cleaner rows — but only on hover-capable
devices, so touch users (no hover) keep it always tappable. Stays visible
on keyboard focus within the row. */
@media (hover: hover) {
.files-list-view .file-item .action-cell button.file-actions {
opacity: 0;
transition: opacity var(--motion-fast) var(--ease-standard);
}
.files-list-view .file-item:hover .action-cell button.file-actions,
.files-list-view .file-item:focus-within .action-cell button.file-actions {
opacity: 1;
}
}
/* ── Grid view ───────────────────────────────────────────── */
.files-grid-view {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(var(--grid-card-min), 1fr));
gap: var(--space-5);
position: relative;
}
@@ -377,18 +454,66 @@
display: none;
}
/* ── Mobile reflow (≤ --bp-sm 640px) ──────────────────────────
The 6-column grid can't fit a phone, so each list row collapses to a
compact flex line (icon + name … size + actions) and the column header
is hidden (sort controls live in the actions bar). One block covers
files / trash / favorites / recent uniformly; flex ignores the grid
tracks, so there's no header-vs-row misalignment to maintain. */
@media (max-width: 640px) {
/* Keep the selection-mode header (holds select-all); hide the plain one. */
.list-header:not(.selection-mode) {
display: none;
}
.files-list-view .file-item {
display: flex;
align-items: center;
gap: var(--space-3);
}
.files-list-view .file-item .type-cell,
.files-list-view .file-item .date-cell,
.files-list-view .file-item .owner-cell,
.files-list-view .file-item .path-cell {
display: none;
}
.files-list-view .file-item .name-cell {
flex: 1;
min-width: 0;
}
.files-list-view .file-item .checkbox-cell,
.files-list-view .file-item .size-cell,
.files-list-view .file-item .action-cell {
flex-shrink: 0;
}
/* Tighter grid on phones (2 columns instead of 1). */
.files-grid-view {
--grid-card-min: 140px;
gap: var(--space-2);
}
}
.files-grid-view .file-item {
border-radius: 12px;
border: 2px solid var(--color-border);
padding: 16px;
border-radius: var(--radius-2xl);
/* Hairline at rest → accent on hover (gallery, not form). */
border: 1px solid var(--color-border);
padding: var(--space-3);
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 1px 3px var(--color-shadow-xs);
box-shadow: 0 1px 2px var(--color-shadow-xs);
cursor: pointer;
width: 100%;
min-height: 160px;
position: relative;
transition:
transform var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) var(--ease-standard),
border-color var(--motion-base) var(--ease-standard);
}
.files-grid-view .file-item.dragging {
@@ -398,9 +523,19 @@
}
.files-grid-view .file-item:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px var(--color-shadow-sm);
border-color: var(--color-border-medium);
transform: translateY(-3px);
box-shadow: 0 12px 28px -8px var(--color-shadow-md);
border-color: var(--color-accent);
}
/* The thumbnail subtly zooms inside its clipped tile on hover — the "alive"
feel of a premium gallery. */
.files-grid-view .file-item .file-icon .file-thumb {
transition: transform var(--motion-moderate) var(--ease-standard);
}
.files-grid-view .file-item:hover .file-icon .file-thumb {
transform: scale(1.04);
}
.files-grid-view .file-item.selected {
@@ -416,63 +551,115 @@
0 6px 18px var(--color-accent-ring-dark);
}
/* elements hidden in grid view */
/* elements hidden in grid view — the type label ("Imagen") is redundant under
a thumbnail, so we drop it and surface the file size instead. */
.files-grid-view .file-item .date-cell,
.files-grid-view .file-item .size-cell,
.files-grid-view .file-item .type-cell,
.files-grid-view .file-item .owner-cell {
display: none;
}
/* Selection checkbox */
/* Overlay controls sit ON the thumbnail (offset by the card padding) over a
frosted scrim, so they read as part of the media instead of floating on the
card corner. */
.files-grid-view .file-item .checkbox-cell {
position: absolute;
top: 10px;
left: 10px;
width: 22px;
height: 22px;
border-radius: 6px;
background: var(--color-item);
top: calc(var(--space-3) + 8px);
left: calc(var(--space-3) + 8px);
width: 26px;
height: 26px;
border-radius: var(--radius-md);
background: var(--color-scrim-control);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 3px var(--color-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 10;
cursor: pointer;
transition: opacity var(--motion-fast) var(--ease-standard);
}
.files-grid-view .file-item:hover .checkbox-cell {
opacity: 1;
}
/* Visible whenever the card is hovered OR already selected, so the checked
state stays on screen after the pointer leaves. */
.files-grid-view .file-item:hover .checkbox-cell,
.files-grid-view .file-item.selected .checkbox-cell {
opacity: 1;
}
/* Custom-drawn checkbox: an empty white box that fills with accent and shows a
crisp white tick when checked. The native 17px control was invisible once the
cell turned accent on selection (accent-on-accent), and the intended tick
targeted a `.checkbox-cell i` the markup never renders — so a click read as
"nothing happened". This makes the checked state unmistakable. */
.files-grid-view .file-item .checkbox-cell input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
margin: 0;
border: 2px solid var(--color-border-medium);
border-radius: var(--radius-sm);
background: var(--color-bg-surface);
display: grid;
place-content: center;
cursor: pointer;
transition:
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard);
}
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]::after {
content: "";
width: 5px;
height: 9px;
margin-top: -1px;
border: solid var(--color-danger-text);
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transform-origin: center;
transition: transform var(--motion-fast) var(--ease-standard);
}
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:checked {
background: var(--color-accent);
border-color: var(--color-accent);
}
.files-grid-view .file-item.selected .checkbox-cell i {
color: var(--color-danger-text);
font-size: 11px;
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:checked::after {
transform: rotate(45deg) scale(1);
}
/* More actions button (three dots) */
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* More actions button (three dots) — top-right of the thumbnail on a scrim. */
.files-grid-view .file-item .file-actions {
position: absolute;
top: 8px;
right: 8px;
top: calc(var(--space-3) + 8px);
right: calc(var(--space-3) + 8px);
width: 30px;
height: 30px;
border-radius: 8px;
border-radius: var(--radius-full);
border: none;
background: transparent;
background: var(--color-scrim-control);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 3px var(--color-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 10;
cursor: pointer;
color: var(--color-text-subtle);
font-size: 16px;
color: var(--color-text);
font-size: var(--text-md);
transition: opacity var(--motion-fast) var(--ease-standard);
}
.files-grid-view .file-item:hover .file-actions {
@@ -480,8 +667,7 @@
}
.files-grid-view .file-item .file-actions:hover {
background: var(--color-border-light);
color: var(--color-text-dark);
color: var(--color-accent);
}
.files-grid-view .file-item.drop-target {
@@ -489,44 +675,53 @@
border: 2px dashed var(--color-warning-border);
}
/* "Shared" indicator — top-left of the thumbnail. Sits below the checkbox
(which only appears on hover), so the two never both compete for the eye. */
.files-grid-view .file-item .file-badge-shared {
position: absolute;
top: 38px;
right: 38px;
width: 30px;
height: 30px;
border-radius: 8px;
top: calc(var(--space-3) + 8px);
left: calc(var(--space-3) + 8px);
width: 24px;
height: 24px;
border-radius: var(--radius-full);
border: none;
background: transparent;
background: var(--color-scrim-control);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 3px var(--color-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
z-index: 12;
font-size: 15px;
z-index: 9;
font-size: var(--text-2xs);
padding: 0;
line-height: 1;
line-height: var(--leading-none);
}
/* Favorite star (mirrors file-actions button pattern) */
/* Favorite star — top-right of the thumbnail, left of the kebab, on a scrim. */
.files-grid-view .file-item button.favorite-star {
position: absolute;
top: 8px;
right: 38px;
top: calc(var(--space-3) + 8px);
right: calc(var(--space-3) + 8px + 34px);
width: 30px;
height: 30px;
border-radius: 8px;
border-radius: var(--radius-full);
border: none;
background: transparent;
background: var(--color-scrim-control);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 3px var(--color-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 12;
cursor: pointer;
color: var(--color-border-medium);
color: var(--color-text-subtle);
font-size: 15px;
padding: 0;
line-height: 1;
line-height: var(--leading-none);
transition: opacity var(--motion-fast) var(--ease-standard);
}
.files-grid-view .file-item:hover button.favorite-star {
@@ -547,45 +742,120 @@
}
.files-grid-view .file-item .name-cell {
font-size: 14px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-align: center;
margin-bottom: 5px;
margin-bottom: 2px;
color: var(--color-text);
/* Span the full card width. The card is a centered flex column
(`align-items: center`), so without an explicit width the name-cell —
which wraps BOTH the thumbnail tile and the filename — shrink-wraps to
the filename's length. That made `.file-icon { width: 100% }` track the
NAME width, so a long name ("CURSO TERRAFORM") rendered a big tile and a
short one ("Idiomas") a small one. Forcing 100% makes every thumbnail
tile identical regardless of name length. */
width: 100%;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 8px;
margin-top: var(--space-1);
}
.files-grid-view .file-item .name-cell span {
padding-top: 8px;
padding-bottom: 8px;
display: block;
max-width: 100%;
/* Ellipsis must live on the span (the text node), not the flex parent,
or long names clip with no "…". */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-top: var(--space-2);
padding-bottom: var(--space-2);
}
.files-grid-view .file-item .name-cell svg.favorite-star-inline {
display: none;
}
.files-grid-view .file-item .type-cell {
font-size: 12px;
color: var(--color-text-muted);
text-align: center;
/* The grid card's secondary line is now the combined .grid-meta block
("hace 2 días · 4,31 MB"), so the standalone size-cell is hidden here. */
.files-grid-view .file-item .size-cell {
display: none;
}
/* ── Grid metadata line — recency + size (+ owner avatar when shared) ──────
Replaces the lone "4,31 MB": a top file app captions a thumbnail with WHEN
it was touched (the dominant retrieval cue), not just bytes. Hidden
everywhere except the grid — list view keeps its own date/size/owner
columns, so a display:none here drops it cleanly out of the row grid. */
.grid-meta {
display: none;
}
.files-grid-view .file-item .grid-meta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
max-width: 100%;
margin-top: 2px;
font-size: var(--text-2xs);
color: var(--color-text-muted);
line-height: var(--leading-snug);
}
/* On a narrow card the relative date truncates first; the size never clips. */
.files-grid-view .file-item .grid-meta__date {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.files-grid-view .file-item .grid-meta__size {
flex: 0 0 auto;
color: var(--color-text-faint);
}
.files-grid-view .file-item .grid-meta__size::before {
content: "·";
margin-right: var(--space-1);
color: var(--color-text-faint);
}
/* Owner avatar — only rendered when the item is shared; sits at the line end. */
.files-grid-view .file-item .grid-meta .user-vignette {
flex: 0 0 auto;
margin-left: var(--space-1);
}
/* Full-width thumbnail tile with a fixed aspect ratio — the image
(`.file-thumb`, object-fit:cover) fills it edge-to-edge for a uniform,
rich grid instead of a small letterboxed preview. Non-image files show
their type icon centred on the placeholder fill. */
.files-grid-view .file-item .file-icon {
margin: auto;
margin-bottom: 10px;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
background: var(--color-bg-input);
/* Hairline inner ring so light thumbnails don't bleed into the card. */
box-shadow: inset 0 0 0 1px var(--color-border);
margin: 0 0 var(--space-3);
font-size: 30px;
}
/* Type icon for non-thumbnail files (documents, etc.) — perfectly centered in
the tile. `inset: 0` + `margin: auto` + a fixed size is the absolute-centering
trick; the previous `top: auto` broke the vertical half, bottom-anchoring the
icon so it sat low in the tile. */
.files-grid-view .file-item .file-icon > i,
.files-grid-view .file-item .file-icon > svg {
top: 5px;
width: 60px;
height: 60px;
inset: 0;
margin: auto;
width: 56px;
height: 56px;
}
/* ── Drag ghost ──────────────────────────────────────────── */
@@ -595,17 +865,17 @@
flex-direction: column;
background-color: transparent;
overflow: hidden;
border-radius: 10px;
border-radius: var(--radius-xl);
width: 100%;
}
.dragged-items .file-item {
grid-template-columns: var(--dragged-files-list-columns);
column-gap: 12px;
column-gap: var(--space-3);
align-items: center;
background-color: var(--color-item);
display: flex;
padding: 4px;
padding: var(--space-1);
width: 360px;
height: 46px;
color: var(--color-text);
@@ -633,17 +903,17 @@
top: 0;
right: 0;
transform: translate(50%, -50%);
background: var(--color-content-debug-bg);
color: var(--color-content-debug-text);
background: var(--color-notification-badge);
color: var(--color-danger-text);
border-radius: 50%;
min-width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
padding: 2px;
font-size: var(--text-xs);
font-weight: var(--weight-bold);
padding: var(--space-0-5);
}
/* ── Swimlane group header ───────────────────────────────── */
@@ -652,14 +922,14 @@
grid wraps it naturally. */
.resource-list__swimlane-header {
grid-column: 1 / -1;
padding: 6px 12px 4px;
padding: var(--space-1-5) var(--space-3) var(--space-1);
font-size: 0.72rem;
font-weight: 600;
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
border-bottom: 1px solid var(--color-border);
margin-top: 8px;
margin-top: var(--space-2);
cursor: default;
user-select: none;
}
@@ -675,11 +945,11 @@
.resource-list__swimlane-header--node {
display: flex;
align-items: center;
padding: 4px 12px;
padding: var(--space-1) var(--space-3);
text-transform: none;
letter-spacing: normal;
font-size: inherit;
font-weight: normal;
font-weight: var(--weight-normal);
color: inherit;
}
@@ -692,13 +962,13 @@
box-shadow: none;
border-radius: 0;
overflow: visible;
gap: 10px;
gap: var(--space-2-5);
}
/* Each group is a self-contained card */
.files-list-view .resource-list__swimlane-group {
background-color: var(--color-item);
border-radius: 10px;
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px var(--color-shadow-xs);
overflow: hidden;
}
@@ -717,7 +987,7 @@
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
gap: 20px;
gap: var(--space-5);
}
/* ── Section item modifiers ──────────────────────────────── */
@@ -778,7 +1048,7 @@
*/
.files-list-view .file-item .path-cell {
color: var(--color-text-secondary);
font-size: 13px;
font-size: var(--text-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -798,12 +1068,12 @@
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
border-radius: var(--radius-lg);
border: none;
background: transparent;
cursor: pointer;
color: var(--color-text-subtle);
font-size: 16px;
font-size: var(--text-md);
padding: 0;
}
@@ -813,5 +1083,5 @@
}
.files-grid-view .file-item .btn-action {
margin-top: 4px;
margin-top: var(--space-1);
}
static/css/components/roleChip.css
+5 -5
View File
@@ -17,11 +17,11 @@
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 4px;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
gap: var(--space-1);
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-xl);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
static/css/components/search.css
+9 -9
View File
@@ -3,37 +3,37 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
padding: var(--space-2-5) 0;
margin-bottom: 15px;
border-bottom: 1px solid var(--color-bg-empty);
width: 100%;
flex-wrap: wrap;
gap: 8px;
gap: var(--space-2);
}
.search-results-header h3 {
margin: 0;
font-size: 16px;
font-size: var(--text-md);
color: var(--color-text-dim);
}
.search-results-header .search-time {
font-size: 12px;
font-weight: normal;
font-size: var(--text-xs);
font-weight: var(--weight-normal);
color: var(--color-text-light);
}
.search-controls {
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
}
.search-sort-select {
padding: 4px 8px;
padding: var(--space-1) var(--space-2);
border: 1px solid var(--color-border-ddd);
border-radius: 4px;
font-size: 13px;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
background: var(--color-bg-surface);
color: var(--color-text-black);
cursor: pointer;
static/css/components/shareDialog.css
+11 -11
View File
@@ -12,13 +12,13 @@
.existing-share-item {
background-color: var(--color-bg-subtle);
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
border-radius: var(--radius-sm);
padding: var(--space-2-5);
margin-bottom: var(--space-2-5);
}
.share-url {
font-size: 12px;
font-size: var(--text-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -27,10 +27,10 @@
}
.share-info {
font-size: 11px;
font-size: var(--text-2xs);
display: flex;
gap: 15px;
margin-bottom: 10px;
margin-bottom: var(--space-2-5);
color: var(--color-share-owner-text);
}
@@ -50,19 +50,19 @@
.share-link-actions {
display: flex;
gap: 10px;
gap: var(--space-2-5);
margin-top: 5px;
}
.btn-small {
font-size: 12px;
padding: 5px 10px;
font-size: var(--text-xs);
padding: 5px var(--space-2-5);
}
#notification-message {
width: 100%;
padding: 10px;
padding: var(--space-2-5);
border: 1px solid var(--color-border-ddd);
border-radius: 4px;
border-radius: var(--radius-sm);
resize: vertical;
}
static/css/components/shareModal.css
+81 -81
View File
@@ -19,7 +19,7 @@
.smd-section {
border-top: 0.5px solid var(--color-border);
padding: 16px 20px;
padding: var(--space-4) var(--space-5);
}
.smd-section:first-child {
@@ -27,12 +27,12 @@
}
.smd-section-title {
font-size: 13px;
font-weight: 600;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 12px;
margin-bottom: var(--space-3);
}
/* ── Loading skeleton ────────────────────────────────────────────────────────── */
@@ -40,14 +40,14 @@
.smd-skeleton {
display: flex;
flex-direction: column;
gap: 12px;
padding: 20px;
gap: var(--space-3);
padding: var(--space-5);
}
.smd-skeleton-line {
height: 14px;
background: var(--color-bg-muted);
border-radius: 6px;
border-radius: var(--radius-md);
animation: smdSkeletonPulse 1.4s ease-in-out infinite;
}
@@ -73,10 +73,10 @@
.smd-search-row {
display: flex;
gap: 8px;
gap: var(--space-2);
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 12px;
margin-bottom: var(--space-3);
}
.smd-search-wrap {
@@ -87,10 +87,10 @@
.smd-search-input {
width: 100%;
padding: 9px 12px;
font-size: 14px;
padding: 9px var(--space-3);
font-size: var(--text-base);
border: 1px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-bg-hover);
color: var(--color-text-heading);
outline: none;
@@ -112,7 +112,7 @@
right: 0;
background: var(--color-bg-surface);
border: 0.5px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px var(--color-shadow-xl);
z-index: 100;
overflow: hidden;
@@ -121,8 +121,8 @@
.smd-suggestion-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
gap: var(--space-2-5);
padding: 9px var(--space-3);
cursor: pointer;
transition: background 0.1s;
}
@@ -149,17 +149,17 @@
.smd-suggestion-hint {
margin-left: auto;
color: var(--color-text-faint);
font-size: 12px;
font-size: var(--text-xs);
font-style: italic;
flex-shrink: 0;
}
/* Role picker beside the search box */
.smd-role-select {
padding: 9px 10px;
font-size: 13px;
padding: 9px var(--space-2-5);
font-size: var(--text-sm);
border: 1px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-bg-hover);
color: var(--color-text-heading);
cursor: pointer;
@@ -170,10 +170,10 @@
.smd-add-btn {
min-height: 36px;
min-width: 44px;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
padding: var(--space-2) var(--space-3-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border-radius: var(--radius-lg);
}
/* ── Staged chips ────────────────────────────────────────────────────────────── */
@@ -181,19 +181,19 @@
.smd-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
gap: var(--space-1-5);
margin-bottom: var(--space-2);
}
.smd-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 4px;
gap: var(--space-1-5);
padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
border: 0.5px solid var(--color-border-medium);
border-radius: 20px;
border-radius: var(--radius-4xl);
background: var(--color-bg-hover);
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-heading);
}
@@ -222,7 +222,7 @@
/* ── Member group headings ───────────────────────────────────────────────────── */
.smd-group {
margin-top: 12px;
margin-top: var(--space-3);
}
.smd-group:first-child {
@@ -232,13 +232,13 @@
.smd-group-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
gap: var(--space-1-5);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 6px;
margin-bottom: var(--space-1-5);
}
.smd-group-badge {
@@ -249,8 +249,8 @@
height: 18px;
padding: 0 5px;
border-radius: 9px;
font-size: 11px;
font-weight: 700;
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
background: var(--color-bg-muted);
color: var(--color-text-subtle);
}
@@ -260,7 +260,7 @@
.smd-member-row {
display: flex;
align-items: center;
gap: 10px;
gap: var(--space-2-5);
padding: 7px 0;
}
@@ -271,10 +271,10 @@
}
.smd-member-role-select {
font-size: 13px;
padding: 4px 8px;
font-size: var(--text-sm);
padding: var(--space-1) var(--space-2);
border: 0.5px solid var(--color-border);
border-radius: 6px;
border-radius: var(--radius-md);
background: var(--color-bg-hover);
color: var(--color-text-heading);
cursor: pointer;
@@ -291,7 +291,7 @@
background: none;
cursor: pointer;
color: var(--color-text-faint);
border-radius: 6px;
border-radius: var(--radius-md);
padding: 0;
transition:
background 0.1s,
@@ -309,10 +309,10 @@
/* ── Fallback when user-directory is unavailable ────────────────────────────── */
.smd-directory-unavailable {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-faint);
font-style: italic;
padding: 4px 0 8px;
padding: var(--space-1) 0 var(--space-2);
}
/* ── Link rows ───────────────────────────────────────────────────────────────── */
@@ -320,8 +320,8 @@
.smd-link-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
gap: var(--space-2-5);
padding: var(--space-2) 0;
}
.smd-link-icon {
@@ -335,7 +335,7 @@
justify-content: center;
color: var(--color-text-subtle);
flex-shrink: 0;
font-size: 14px;
font-size: var(--text-base);
}
.smd-link-info {
@@ -346,7 +346,7 @@
.smd-link-name {
flex: 1;
min-width: 0;
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-heading);
overflow: hidden;
text-overflow: ellipsis;
@@ -355,15 +355,15 @@
.smd-link-tags {
display: flex;
gap: 6px;
gap: var(--space-1-5);
margin-top: 3px;
flex-wrap: wrap;
}
.smd-link-tag {
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
font-size: var(--text-2xs);
padding: var(--space-0-5) var(--space-1-5);
border-radius: var(--radius-sm);
background: var(--color-bg-muted);
color: var(--color-text-subtle);
border: 0.5px solid var(--color-border);
@@ -372,37 +372,37 @@
.smd-link-actions {
display: flex;
gap: 2px;
gap: var(--space-0-5);
flex-shrink: 0;
}
/* ── Inline edit sub-panel ───────────────────────────────────────────────────── */
.smd-edit-panel {
margin: 4px 0 8px 42px;
padding: 12px;
margin: var(--space-1) 0 var(--space-2) 42px;
padding: var(--space-3);
background: var(--color-bg-hover);
border: 0.5px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
gap: 10px;
gap: var(--space-2-5);
}
.smd-edit-panel label {
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
display: block;
margin-bottom: 4px;
margin-bottom: var(--space-1);
}
.smd-edit-input {
width: 100%;
padding: 8px 10px;
font-size: 13px;
padding: var(--space-2) var(--space-2-5);
font-size: var(--text-sm);
border: 1px solid var(--color-border);
border-radius: 6px;
border-radius: var(--radius-md);
background: var(--color-bg-surface);
color: var(--color-text-heading);
outline: none;
@@ -418,7 +418,7 @@
.smd-edit-panel-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
gap: var(--space-2);
}
/* ── New-link creation button + form ─────────────────────────────────────────── */
@@ -427,15 +427,15 @@
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
gap: var(--space-2);
width: 100%;
padding: 10px;
margin-top: 8px;
font-size: 13px;
padding: var(--space-2-5);
margin-top: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-subtle);
background: none;
border: 1.5px dashed var(--color-border-medium);
border-radius: 8px;
border-radius: var(--radius-lg);
cursor: pointer;
transition:
background 0.15s,
@@ -454,8 +454,8 @@
.smd-pw-toggle {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-secondary);
cursor: pointer;
user-select: none;
@@ -472,7 +472,7 @@
border-radius: 50%;
animation: smdSpin 0.6s linear infinite;
vertical-align: middle;
margin-left: 6px;
margin-left: var(--space-1-5);
}
@keyframes smdSpin {
@@ -500,10 +500,10 @@
gap: 5px;
width: 100%;
box-sizing: border-box;
padding: 4px 8px;
font-size: 14px;
padding: var(--space-1) var(--space-2);
font-size: var(--text-base);
border: 1px dashed var(--color-border-medium);
border-radius: 6px;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-faint);
cursor: pointer;
@@ -534,8 +534,8 @@
}
.smd-expiry-chip-clear {
font-size: 13px;
line-height: 1;
font-size: var(--text-sm);
line-height: var(--leading-none);
color: var(--color-text-faint);
margin-left: auto;
padding: 0;
@@ -549,10 +549,10 @@
.smd-expiry-date-input {
width: 100%;
box-sizing: border-box;
padding: 4px 8px;
font-size: 12px;
padding: var(--space-1) var(--space-2);
font-size: var(--text-xs);
border: 1px solid var(--color-accent);
border-radius: 6px;
border-radius: var(--radius-md);
background: var(--color-bg-surface);
color: var(--color-text-heading);
outline: none;
@@ -563,6 +563,6 @@
Add button (both use padding: 9px, font-size: 13px). */
.smd-search-row .smd-expiry-chip,
.smd-search-row .smd-expiry-date-input {
padding: 9px 10px;
font-size: 13px;
padding: 9px var(--space-2-5);
font-size: var(--text-sm);
}
static/css/components/skeleton.css
Vendored
+93
View File
@@ -0,0 +1,93 @@
/* ============================================================
* Reusable loading-skeleton primitive.
*
* A `.skeleton` element pulses; modifiers shape it into lines,
* list rows (mirroring the file-list grid), or grid tiles. Used to
* hold layout during first load instead of a centred spinner that
* makes the list flash empty. Honors reduced-motion via the global
* guard in base/a11y.css.
*
* (shareModal's bespoke .smd-skeleton predates this and can migrate
* onto it when its loader is next touched.)
* ============================================================ */
.skeleton {
background: var(--color-bg-muted);
border-radius: var(--radius-md);
animation: skeletonPulse 1.4s ease-in-out infinite;
}
.skeleton-line {
height: 14px;
}
.skeleton-line--short {
width: 40%;
}
.skeleton-line--medium {
width: 65%;
}
.skeleton-line--full {
width: 100%;
}
/* A loading row shaped like a file-list row (inherits the list's grid
columns; falls back to icon + name + meta when used standalone). */
.skeleton-row {
display: grid;
grid-template-columns: var(--files-list-columns, 36px 1fr 90px);
column-gap: var(--space-3);
align-items: center;
padding: var(--space-3) 15px;
border-bottom: 1px solid var(--color-border-xfaint);
}
/* A square loading tile for the photo/file grid. */
.skeleton-tile {
aspect-ratio: 1;
width: 100%;
border-radius: var(--radius-lg);
}
/* File-grid loading card — mirrors the real grid card (4:3 thumbnail tile +
name line + meta line). The card frame itself doesn't pulse; its inner
`.skeleton` elements do. Dropped straight into `.files-grid-view`. */
.skeleton-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
border: 2px solid var(--color-border);
border-radius: var(--radius-2xl);
}
.skeleton-card .skeleton-thumb {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
margin-bottom: var(--space-2);
}
.skeleton-card .skeleton-line {
align-self: center;
}
/* Small leading icon block for list-row skeletons. */
.skeleton-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
}
@keyframes skeletonPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
static/css/components/spinner.css
+43 -18
View File
@@ -4,8 +4,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
gap: 16px;
padding: var(--space-20) var(--space-5);
gap: var(--space-4);
grid-column: 1 / -1;
}
@@ -18,36 +18,61 @@
animation: spin 0.7s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
.files-loading-spinner span {
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-placeholder);
font-weight: 500;
font-weight: var(--weight-medium);
}
/* Full-area drop overlay. Hidden by default; shown over the content region
(right of the sidebar) while files are dragged into the Files section
(toggled in ui.js). Frosted backdrop + dashed border = a clear "drop here"
affordance instead of a small inline box. */
.dropzone {
border: 2px dashed var(--color-border-ddd);
border-radius: 8px;
padding: 20px;
position: fixed;
top: var(--space-4);
right: var(--space-4);
bottom: var(--space-4);
left: calc(var(--sidebar-width) + var(--space-4));
z-index: var(--z-overlay);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
border: 3px dashed var(--color-border-medium);
border-radius: var(--radius-3xl);
background: var(--color-scrim-control);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: var(--color-text-secondary);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
text-align: center;
margin: 20px 0;
color: var(--color-text-medium);
display: block;
}
/* Children don't catch pointer events, so moving over the icon/text doesn't
fire dragleave on the overlay (avoids show/hide flicker). */
.dropzone > * {
pointer-events: none;
}
.dropzone-icon {
font-size: 32px;
margin-bottom: 10px;
font-size: var(--text-6xl);
color: var(--color-accent);
}
.dropzone.active {
border-color: var(--color-accent);
background-color: var(--color-accent-ring-xs);
color: var(--color-accent-text);
}
@media (max-width: 768px) {
.dropzone {
left: var(--space-4);
}
}
.upload-progress {
static/css/components/tooltip.css
+8 -8
View File
@@ -32,13 +32,13 @@
position: fixed;
min-width: 0;
max-width: 280px;
padding: 6px 10px;
padding: var(--space-1-5) var(--space-2-5);
background-color: var(--color-text);
color: var(--color-bg-page);
font-size: 12px;
line-height: 1.5;
font-size: var(--text-xs);
line-height: var(--leading-normal);
text-align: left;
border-radius: 6px;
border-radius: var(--radius-md);
box-shadow: 0 2px 8px var(--color-shadow);
pointer-events: none;
opacity: 0;
@@ -76,13 +76,13 @@
so the count reads as meta-information, not just another line. */
.oxi-tooltip-popover__overflow {
display: inline-block;
margin-top: 4px;
margin-top: var(--space-1);
padding: 1px 7px;
font-size: 11px;
font-weight: 600;
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
color: var(--color-bg-page);
background-color: var(--color-text-faint);
border-radius: 9999px;
border-radius: var(--radius-full);
}
/* Placeholder line shown briefly between the first hover and the
static/css/components/uploadDropdown.css
+7 -7
View File
@@ -7,7 +7,7 @@
.upload-dropdown .btn-primary {
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
}
.upload-dropdown-menu {
@@ -17,7 +17,7 @@
left: 0;
min-width: 200px;
background: var(--color-bg-surface);
border-radius: 12px;
border-radius: var(--radius-2xl);
box-shadow: 0 8px 30px var(--color-shadow-md);
border: 1px solid var(--color-border);
z-index: 1000;
@@ -39,13 +39,13 @@
.upload-dropdown-item {
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
width: 100%;
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
border: none;
background: none;
color: var(--color-text-dark);
font-size: 14px;
font-size: var(--text-base);
cursor: pointer;
transition: background 0.15s ease;
text-align: left;
@@ -71,6 +71,6 @@
}
.upload-caret {
margin-left: 4px;
font-size: 12px;
margin-left: var(--space-1);
font-size: var(--text-xs);
}
static/css/components/userMenu.css
+44 -35
View File
@@ -5,27 +5,32 @@
.user-avatar-btn {
background: none;
border: 2px solid transparent;
border: none;
border-radius: 50%;
padding: 2px;
padding: 0;
cursor: pointer;
transition: all 0.25s ease;
transition: transform var(--motion-base) var(--ease-standard);
display: flex;
align-items: center;
justify-content: center;
}
/* Premium hover: ONE soft accent ring hugging the avatar + a gentle warm glow
+ a subtle pop — replaces the old heavy double halo (button border ring with
a gap + a second avatar ring). */
.user-avatar-btn:hover {
border-color: var(--color-accent-ring-xl);
transform: scale(1.05);
}
.user-avatar-btn:hover .user-vignette__avatar {
box-shadow: 0 0 0 2px var(--color-accent-ring-strong);
box-shadow:
0 0 0 3px var(--color-accent-ring),
0 3px 12px -2px var(--color-accent-shadow);
}
.user-menu-wrapper.open .user-avatar-btn {
border-color: var(--color-accent);
/* Menu open: a slightly firmer ring (same clean single-ring language). */
.user-menu-wrapper.open .user-avatar-btn .user-vignette__avatar {
box-shadow: 0 0 0 3px var(--color-accent-ring-strong);
}
/* ── Avatar vignette overrides ────────────────────────────────────────────── */
@@ -37,6 +42,9 @@
.user-avatar-btn .user-vignette__avatar {
letter-spacing: 0.5px;
user-select: none;
/* Animate the ring/glow smoothly in AND out (transition on the base, not
:hover). */
transition: box-shadow var(--motion-base) var(--ease-standard);
}
.user-menu-header .user-vignette__avatar {
@@ -52,7 +60,7 @@
left: auto;
width: 300px;
background: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
box-shadow:
0 12px 40px var(--color-shadow-md),
0 0 0 1px var(--color-shadow-xs);
@@ -84,8 +92,8 @@
.user-menu-header {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 20px 16px;
gap: var(--space-3-5);
padding: var(--space-5) var(--space-5) var(--space-4);
background: var(--color-user-menu-header-bg);
border-bottom: 1px solid var(--color-user-menu-header-border);
}
@@ -99,7 +107,7 @@
/* Increase name prominence relative to the base vignette style. */
.user-menu-header .user-vignette__name {
font-size: 15px;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
@@ -109,23 +117,23 @@
}
.user-menu-storage {
padding: 14px 20px;
padding: var(--space-3-5) var(--space-5);
}
.user-menu-storage-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
gap: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
.user-menu-storage-label i {
font-size: 11px;
font-size: var(--text-2xs);
color: var(--color-text-faint);
}
@@ -134,7 +142,7 @@
background: var(--color-border-light);
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
margin-bottom: var(--space-1-5);
}
.user-menu-storage-fill {
@@ -153,25 +161,26 @@
.user-menu-divider {
height: 1px;
background: var(--color-border-light);
margin: 4px 0;
margin: var(--space-1) 0;
}
.user-menu-item {
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
width: 100%;
padding: 12px 20px;
padding: var(--space-3) var(--space-5);
border: none;
background: none;
color: var(--color-text-dark);
font-size: 14px;
font-size: var(--text-base);
cursor: pointer;
transition: background 0.15s ease;
text-align: left;
}
.user-menu-item:hover {
.user-menu-item:hover,
.user-menu-item:focus-visible {
background: var(--color-bg-hover);
}
@@ -200,9 +209,9 @@
display: inline-flex;
background: var(--color-bg-muted);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 2px;
gap: 2px;
border-radius: var(--radius-full);
padding: var(--space-0-5);
gap: var(--space-0-5);
}
.theme-segmented__opt {
@@ -214,9 +223,9 @@
border: none;
background: transparent;
color: var(--color-text-subtle);
border-radius: 999px;
border-radius: var(--radius-full);
cursor: pointer;
font-size: 11px;
font-size: var(--text-2xs);
padding: 0;
transition:
background 0.15s ease,
@@ -249,17 +258,17 @@
}
.user-menu-role-badge {
padding: 0 20px 4px;
padding: 0 var(--space-5) var(--space-1);
}
.role-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 2px 10px;
border-radius: 10px;
gap: var(--space-1);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
padding: var(--space-0-5) var(--space-2-5);
border-radius: var(--radius-xl);
}
.role-badge-admin {
@@ -273,7 +282,7 @@
.user-menu-logout {
color: var(--color-danger-alt);
margin-bottom: 4px;
margin-bottom: var(--space-1);
}
.user-menu-logout i {
static/css/components/userVignette.css
+8 -8
View File
@@ -16,7 +16,7 @@
.user-vignette {
display: inline-flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
min-width: 0;
overflow: hidden;
}
@@ -32,7 +32,7 @@
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-weight: var(--weight-bold);
flex-shrink: 0;
/* Diameter comes from `--avatar-size`, declared per size variant on
the wrapper so the origin badge (a wrapper sibling or an avatar
@@ -50,7 +50,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-secondary);
}
@@ -67,7 +67,7 @@
}
.user-vignette__email {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
overflow: hidden;
text-overflow: ellipsis;
@@ -102,14 +102,14 @@
--avatar-size: 36px;
}
.user-vignette--list .user-vignette__avatar {
font-size: 13px;
font-size: var(--text-sm);
}
.user-vignette--md {
--avatar-size: 32px;
}
.user-vignette--md .user-vignette__avatar {
font-size: 12px;
font-size: var(--text-xs);
}
.user-vignette--lg {
@@ -123,7 +123,7 @@
--avatar-size: 38px;
}
.user-vignette--menu .user-vignette__avatar {
font-size: 14px;
font-size: var(--text-base);
}
.user-vignette--xl {
@@ -220,7 +220,7 @@
.user-vignette__origin {
flex-shrink: 0;
line-height: 1;
line-height: var(--leading-none);
/* Default (sibling mode, with name): track the avatar's font-size
so the badge matches the row's text scale. The overlay mode
overrides this below with the explicit 30%-of-avatar-diameter
static/css/layout/content.css
+48 -11
View File
@@ -18,22 +18,40 @@
/* Content area */
.content-area {
flex-grow: 1;
padding: 20px;
padding: var(--space-5) var(--gutter);
overflow-y: scroll;
scrollbar-gutter: stable;
}
/* Phones: tighten the shared gutter and let the actions bar wrap. */
@media (max-width: 640px) {
:root {
--gutter: var(--space-4);
}
/* Mobile uses overlay scrollbars — don't reserve a phantom gutter. */
.content-area {
scrollbar-gutter: auto;
}
.actions-bar {
flex-wrap: wrap;
height: auto;
gap: var(--space-2);
}
}
.page-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
margin-bottom: var(--space-5);
color: var(--color-text);
}
.page-sticky-header {
position: sticky;
margin: 0px;
padding: 10px 0px;
padding: var(--space-2-5) 0px;
top: -20px; /* due to padding top of content-area */
background-color: var(--color-bg-page);
z-index: 100; /* ensure header is above image preview */
@@ -42,15 +60,15 @@
.actions-bar {
display: flex;
justify-content: space-between;
margin: 0 0 12px;
margin: 0 0 var(--space-3);
height: 60px;
padding: 10px;
padding: var(--space-2-5);
}
.action-buttons {
display: flex;
flex: auto;
gap: 12px;
gap: var(--space-3);
}
.empty-state {
@@ -58,14 +76,33 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
gap: var(--space-2);
padding: var(--space-12) var(--space-6);
text-align: center;
color: var(--color-content-muted);
color: var(--color-text-muted);
width: 100%;
height: 300px;
min-height: 320px;
grid-column: 1 / -1;
}
.empty-state p {
margin: 0;
max-width: 42ch;
color: var(--color-text-muted);
}
/* First paragraph acts as the title. */
.empty-state p:first-of-type {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
/* Call-to-action button spacing. */
.empty-state .btn {
margin-top: var(--space-4);
}
/* invisible element, permits building of drag element without altering display */
.drag-preview {
position: absolute;
static/css/layout/sidebar.css
+38 -47
View File
@@ -8,7 +8,7 @@
height: 100%;
flex-shrink: 0;
box-shadow: 2px 0 12px var(--color-shadow-md);
transition: transform 0.3s ease;
transition: transform var(--motion-slow) var(--ease-emphasized);
}
/* Sidebar overlay for mobile */
@@ -56,11 +56,11 @@
}
.logo-container {
padding: 22px 20px;
padding: 22px var(--space-5);
display: flex;
align-items: center;
border-bottom: 1px solid var(--color-sidebar-separator);
margin-bottom: 8px;
margin-bottom: var(--space-2);
text-decoration: none;
color: inherit;
}
@@ -69,18 +69,18 @@
width: 40px;
height: 40px;
background: var(--color-sidebar-logo-gradient);
border-radius: 12px;
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
margin-right: var(--space-3);
box-shadow: 0 3px 10px var(--color-sidebar-shadow);
transition:
transform 0.2s,
box-shadow 0.2s;
[dir="rtl"] & {
margin-left: 12px;
margin-left: var(--space-3);
margin-right: unset;
}
}
@@ -98,7 +98,7 @@
.app-name {
font-size: 19px;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-sidebar-text-active);
letter-spacing: 0.3px;
}
@@ -107,21 +107,28 @@
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 8px 12px;
gap: 2px;
padding: var(--space-2) var(--space-3);
gap: var(--space-0-5);
}
.nav-item {
display: flex;
align-items: center;
padding: 11px 14px;
border-radius: 10px;
width: 100%;
padding: 11px var(--space-3-5);
border-radius: var(--radius-xl);
cursor: pointer;
color: var(--color-sidebar-text);
font-size: 14.5px;
font-weight: 500;
font-weight: var(--weight-medium);
/* Button resets — .nav-item is a <button> (keyboard-operable nav). */
font-family: inherit;
text-align: left;
appearance: none;
background: none;
transition: all 0.2s ease;
position: relative;
border: none;
border-left: 3px solid transparent;
[dir="rtl"] & {
@@ -139,7 +146,7 @@
background-color: var(--color-sidebar-active-bg);
color: var(--color-sidebar-text-active);
border-left-color: var(--color-accent);
font-weight: 600;
font-weight: var(--weight-semibold);
[dir="rtl"] & {
border-left-color: transparent;
@@ -150,18 +157,18 @@
.nav-item i,
.nav-item .nav-icon,
.nav-item .oxi-icon {
margin-right: 14px;
margin-right: var(--space-3-5);
width: 20px;
height: 20px;
text-align: center;
font-size: 16px;
font-size: var(--text-md);
transition:
color 0.2s,
transform 0.2s;
flex-shrink: 0;
[dir="rtl"] & {
margin-left: 14px;
margin-left: var(--space-3-5);
margin-right: unset;
}
}
@@ -192,30 +199,14 @@
color: var(--color-cal-6);
} /* Trash - red */
.nav-item.active:nth-child(1) i,
.nav-item.active:nth-child(1) .oxi-icon {
/* Colourful icons at rest, but the ACTIVE item is always accent — one
coherent active state instead of a colour that changes per item.
Same specificity as the per-child rest rules, so source order (this comes
after them) makes it win for the active item. */
.nav-item.active i,
.nav-item.active .oxi-icon {
color: var(--color-accent);
}
.nav-item.active:nth-child(2) i,
.nav-item.active:nth-child(2) .oxi-icon {
color: var(--color-cal-7);
}
.nav-item.active:nth-child(3) i,
.nav-item.active:nth-child(3) .oxi-icon {
color: var(--color-cal-8);
}
.nav-item.active:nth-child(4) i,
.nav-item.active:nth-child(4) .oxi-icon {
color: var(--color-cal-9);
}
.nav-item.active:nth-child(5) i,
.nav-item.active:nth-child(5) .oxi-icon {
color: var(--color-cal-10);
}
.nav-item.active:nth-child(6) i,
.nav-item.active:nth-child(6) .oxi-icon {
color: var(--color-cal-11);
}
.nav-item:hover i,
.nav-item:hover .oxi-icon {
@@ -224,21 +215,21 @@
/* Storage indicator */
.storage-container {
margin: auto 12px 16px 12px;
margin: auto var(--space-3) var(--space-4) var(--space-3);
background: var(--color-sidebar-storage-bg);
border: 1px solid var(--color-sidebar-storage-border);
border-radius: 12px;
padding: 16px;
border-radius: var(--radius-2xl);
padding: var(--space-4);
}
.storage-title {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-bottom: 12px;
font-size: 13px;
font-weight: 600;
gap: var(--space-1-5);
margin-bottom: var(--space-3);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-sidebar-storage-text);
letter-spacing: 0.3px;
}
@@ -248,7 +239,7 @@
background-color: var(--color-sidebar-storage-bar);
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
margin-bottom: var(--space-2-5);
}
.storage-fill {
@@ -263,5 +254,5 @@
text-align: center;
font-size: 11.5px;
color: var(--color-sidebar-storage-faint);
font-weight: 400;
font-weight: var(--weight-normal);
}
static/css/layout/topbar.css
+22 -22
View File
@@ -15,7 +15,7 @@
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
padding: 0 30px;
padding: 0 var(--gutter);
justify-content: space-between;
flex-shrink: 0;
}
@@ -25,14 +25,14 @@
display: none;
background: none;
border: none;
padding: 10px;
padding: var(--space-2-5);
cursor: pointer;
color: var(--color-text-secondary);
border-radius: 8px;
border-radius: var(--radius-lg);
transition:
background-color 0.2s,
color 0.2s;
margin-right: 12px;
margin-right: var(--space-3);
flex-shrink: 0;
}
@@ -42,7 +42,7 @@
}
.sidebar-toggle i {
font-size: 20px;
font-size: var(--text-xl);
}
/* Mobile search toggle button — hidden on desktop */
@@ -50,11 +50,11 @@
display: none;
background: none;
border: none;
padding: 10px;
padding: var(--space-2-5);
cursor: pointer;
color: var(--color-text-secondary);
border-radius: 8px;
font-size: 18px;
border-radius: var(--radius-lg);
font-size: var(--text-lg);
transition:
background-color 0.2s,
color 0.2s;
@@ -70,11 +70,11 @@
display: none;
background: none;
border: none;
padding: 10px;
padding: var(--space-2-5);
cursor: pointer;
color: var(--color-text-secondary);
border-radius: 8px;
font-size: 18px;
border-radius: var(--radius-lg);
font-size: var(--text-lg);
transition:
background-color 0.2s,
color 0.2s;
@@ -92,13 +92,13 @@
.search-slot {
flex-grow: 1;
max-width: 600px;
margin-right: 20px;
margin-right: var(--space-5);
position: relative;
display: flex;
align-items: center;
[dir="rtl"] & {
margin-left: 20px;
margin-left: var(--space-5);
margin-right: unset;
}
}
@@ -112,11 +112,11 @@
.search-container input {
width: 100%;
padding: 12px 50px 12px 44px;
border-radius: 12px;
padding: var(--space-3) 50px var(--space-3) var(--space-11);
border-radius: var(--radius-2xl);
border: 2px solid var(--color-border);
background-color: var(--color-bg-input);
font-size: 14px;
font-size: var(--text-base);
height: 46px;
color: var(--color-text-heading);
transition: all 0.2s ease;
@@ -144,7 +144,7 @@
top: 50%;
transform: translateY(-50%);
color: var(--color-text-placeholder);
font-size: 16px;
font-size: var(--text-md);
pointer-events: none;
transition: color 0.2s ease;
@@ -167,7 +167,7 @@
background: var(--color-accent-gradient);
color: var(--color-danger-text);
border: none;
border-radius: 10px;
border-radius: var(--radius-xl);
width: 36px;
height: 36px;
cursor: pointer;
@@ -193,19 +193,19 @@
}
.search-button i {
font-size: 14px;
font-size: var(--text-base);
}
.user-controls {
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
}
/* Mobile responsive styles for top bar */
@media (max-width: 768px) {
.top-bar {
padding: 0 16px;
padding: 0 var(--space-4);
}
.sidebar-toggle {
@@ -246,7 +246,7 @@
}
.top-bar--search-active .search-container input {
padding-left: 16px;
padding-left: var(--space-4);
}
.top-bar--search-active .sidebar-toggle,
static/css/main.css
+6
View File
@@ -2,6 +2,9 @@
@import url("./base/variables.css");
@import url("./base/reset.css");
@import url("./base/typography.css");
@import url("./base/animations.css");
@import url("./base/a11y.css");
@import url("./base/forms.css");
/* Layout */
@@ -10,6 +13,7 @@
@import url("./layout/content.css");
/* Components */
@import url("./components/brandLogo.css");
@import url("./components/breadcrumb.css");
@import url("./components/buttons.css");
@import url("./components/fileType.css");
@@ -32,10 +36,12 @@
@import url("./components/languageSelector.css");
@import url("./components/batchToolbar.css");
@import url("./components/spinner.css");
@import url("./components/skeleton.css");
@import url("./components/search.css");
@import url("./components/icons.css");
@import url("./components/csp-utilities.css");
@import url("./components/itemTooltip.css");
@import url("./components/commandPalette.css");
/* Theme */
@import url("./themes/dark.css");
static/css/themes/dark.css
-1
View File
@@ -100,7 +100,6 @@
--color-warning-text-amber: #fbbf24;
--color-warning-orange-bg: #2a1c10;
--color-warning-orange-text: #fb923c;
--color-purple-bg: #1a0a33;
--color-success-bg-alt: #0a2015;
--color-success-bg-green: #0a2015;
--color-content-bg-warn: #3d2e00;
static/css/views/admin.css
+200 -204
View File
@@ -7,7 +7,7 @@
body {
background: var(--color-bg-page);
color: var(--color-text-heading);
min-height: 100vh;
min-height: 100dvh;
height: auto;
display: flex;
flex-direction: column;
@@ -29,56 +29,56 @@ body {
color: inherit;
display: flex;
align-items: center;
gap: 14px;
gap: var(--space-3-5);
}
.width-zero {
width: 0%;
}
.mt-14 {
margin-top: 14px;
margin-top: var(--space-3-5);
}
.toggle-row-strong {
margin-top: 10px;
padding: 12px 0;
margin-top: var(--space-2-5);
padding: var(--space-3) 0;
border-top: 1px solid var(--color-border);
}
.icon-muted-right {
color: var(--color-text-subtle);
margin-right: 6px;
margin-right: var(--space-1-5);
}
.h2-space-between {
justify-content: space-between;
}
.flex-gap-6 {
display: flex;
gap: 6px;
gap: var(--space-1-5);
}
.oidc-discover-wrap {
margin-bottom: 12px;
margin-bottom: var(--space-3);
}
.secret-icon {
color: var(--color-secret-green);
}
.small-muted {
font-weight: 400;
font-weight: var(--weight-normal);
color: var(--color-text-faint);
}
.summary-icon-right {
margin-right: 6px;
margin-right: var(--space-1-5);
}
.oidc-actions {
display: flex;
gap: 10px;
margin-top: 24px;
gap: var(--space-2-5);
margin-top: var(--space-6);
justify-content: flex-end;
}
.modal-title-icon {
color: var(--color-accent);
margin-right: 8px;
margin-right: var(--space-2);
}
.quota-input-row {
display: flex;
gap: 10px;
gap: var(--space-2-5);
align-items: center;
}
.flex-1 {
@@ -86,34 +86,34 @@ body {
}
.select-qm-unit {
width: 90px;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-hover);
}
.form-row {
display: flex;
gap: 14px;
gap: var(--space-3-5);
}
.select-cu-role {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-hover);
}
.quota-row {
display: flex;
gap: 6px;
gap: var(--space-1-5);
}
.select-cu-quota-unit {
width: 70px;
padding: 10px 8px;
padding: var(--space-2-5) var(--space-2);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 13px;
border-radius: var(--radius-xl);
font-size: var(--text-sm);
background: var(--color-bg-hover);
}
.alert-no-margin {
@@ -121,21 +121,21 @@ body {
}
.table-loading-cell {
text-align: center;
padding: 28px;
padding: var(--space-7);
color: var(--color-text-faint);
}
.table-status-error {
color: var(--color-error-text-dark);
padding: 20px;
padding: var(--space-5);
}
.table-status-empty {
text-align: center;
padding: 28px;
padding: var(--space-7);
color: var(--color-text-faint);
}
.user-self-badge {
color: var(--color-text-faint);
font-weight: 400;
font-weight: var(--weight-normal);
}
.badge-admin-icon-small {
font-size: 10px;
@@ -144,14 +144,14 @@ body {
width: 80px;
}
.user-last-login-cell {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text);
}
/* ── Top Header Bar ── */
.admin-header {
background: linear-gradient(135deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%);
padding: 0 32px;
padding: 0 var(--space-8);
height: 64px;
display: flex;
align-items: center;
@@ -164,7 +164,7 @@ body {
.admin-header-left {
display: flex;
align-items: center;
gap: 14px;
gap: var(--space-3-5);
}
.admin-logo {
width: 38px;
@@ -183,24 +183,24 @@ body {
}
.admin-title-text {
font-size: 17px;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-sidebar-text-active);
letter-spacing: 0.3px;
}
.admin-title-separator {
font-size: 17px;
color: var(--color-sidebar-storage-faint);
font-weight: 400;
margin-left: 6px;
font-weight: var(--weight-normal);
margin-left: var(--space-1-5);
}
.admin-header-right a {
color: var(--color-sidebar-text);
text-decoration: none;
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
transition: color 0.2s;
}
.admin-header-right a:hover {
@@ -211,7 +211,7 @@ body {
.admin-container {
max-width: 1080px;
margin: 0 auto;
padding: 28px 24px 60px;
padding: var(--space-7) var(--space-6) 60px;
width: 100%;
flex: 1;
}
@@ -219,29 +219,29 @@ body {
/* ── Tabs ── */
.admin-tabs {
display: flex;
gap: 6px;
margin-bottom: 28px;
gap: var(--space-1-5);
margin-bottom: var(--space-7);
background: var(--color-bg-surface);
border-radius: 14px;
padding: 6px;
padding: var(--space-1-5);
box-shadow: 0 1px 4px var(--color-shadow-xs);
position: sticky;
top: 64px;
z-index: 50;
}
.admin-tab {
padding: 10px 22px;
padding: var(--space-2-5) 22px;
cursor: pointer;
font-weight: 600;
font-weight: var(--weight-semibold);
font-size: 13.5px;
color: var(--color-text-subtle);
border: none;
background: none;
border-radius: 10px;
border-radius: var(--radius-xl);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
}
.admin-tab:hover {
color: var(--color-text-heading);
@@ -256,7 +256,7 @@ body {
color: var(--color-sidebar-text-active);
}
.admin-tab i {
font-size: 14px;
font-size: var(--text-base);
width: 16px;
text-align: center;
}
@@ -296,21 +296,21 @@ body {
/* ── Cards ── */
.admin-card {
background: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
box-shadow:
0 1px 4px var(--color-shadow-xs),
0 0 0 1px var(--color-shadow-xs);
padding: 28px;
padding: var(--space-7);
margin-bottom: 22px;
}
.admin-card h2 {
font-size: 16px;
font-weight: 700;
margin-bottom: 20px;
font-size: var(--text-md);
font-weight: var(--weight-bold);
margin-bottom: var(--space-5);
color: var(--color-text-heading);
display: flex;
align-items: center;
gap: 10px;
gap: var(--space-2-5);
}
.admin-card h2 i {
color: var(--color-accent);
@@ -335,11 +335,11 @@ body {
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
gap: var(--space-3-5);
margin-bottom: 22px;
}
.stat-card {
padding: 20px;
padding: var(--space-5);
background: var(--color-bg-hover);
border-radius: 14px;
text-align: center;
@@ -353,8 +353,8 @@ body {
box-shadow: 0 4px 12px var(--color-shadow-xs);
}
.stat-value {
font-size: 1.75rem;
font-weight: 800;
font-size: var(--text-3xl);
font-weight: var(--weight-extrabold);
color: var(--color-text-heading);
}
.stat-label {
@@ -362,8 +362,8 @@ body {
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 4px;
font-weight: 600;
margin-top: var(--space-1);
font-weight: var(--weight-semibold);
}
.stat-card.warn {
border-color: var(--color-stat-warn-border);
@@ -391,12 +391,12 @@ body {
width: 100%;
height: 8px;
background: var(--color-border);
border-radius: 4px;
border-radius: var(--radius-sm);
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 4px;
border-radius: var(--radius-sm);
transition: width 0.5s ease;
}
.progress-fill.green {
@@ -412,7 +412,7 @@ body {
/* ── Table ── */
.table-wrap {
overflow-x: auto;
border-radius: 12px;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border);
}
table {
@@ -422,18 +422,18 @@ table {
}
th {
text-align: left;
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-subtle);
color: var(--color-text-faint);
font-size: 11px;
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
font-weight: var(--weight-bold);
white-space: nowrap;
border-bottom: 1px solid var(--color-border);
}
td {
padding: 14px 16px;
padding: var(--space-3-5) var(--space-4);
border-bottom: 1px solid var(--color-border-light);
vertical-align: middle;
}
@@ -446,14 +446,14 @@ tr:hover {
.user-info {
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--space-0-5);
}
.user-name {
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
.user-email {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
}
@@ -461,11 +461,11 @@ tr:hover {
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
padding: 3px 10px;
border-radius: 20px;
font-weight: 600;
gap: var(--space-1);
font-size: var(--text-2xs);
padding: 3px var(--space-2-5);
border-radius: var(--radius-4xl);
font-weight: var(--weight-semibold);
}
.badge-admin {
background: var(--color-role-admin-bg);
@@ -495,28 +495,28 @@ tr:hover {
background: var(--color-warning-bg-light);
color: var(--color-badge-warning-text);
font-size: 10px;
padding: 1px 6px;
margin-left: 4px;
padding: 1px var(--space-1-5);
margin-left: var(--space-1);
}
/* ── Buttons ── */
.btn {
padding: 8px 18px;
padding: var(--space-2) 18px;
border: none;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
border-radius: var(--radius-xl);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
border-radius: 8px;
padding: var(--space-1-5) var(--space-3);
font-size: var(--text-xs);
border-radius: var(--radius-lg);
}
.btn-primary {
background: var(--color-accent-gradient);
@@ -559,19 +559,19 @@ tr:hover {
}
.actions-row {
display: flex;
gap: 6px;
gap: var(--space-1-5);
flex-wrap: wrap;
}
/* ── Forms ── */
.form-group {
margin-bottom: 16px;
margin-bottom: var(--space-4);
}
.form-group label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
margin-bottom: var(--space-1);
color: var(--color-text-dark);
}
.form-group input[type="text"],
@@ -580,10 +580,10 @@ tr:hover {
.form-group input[type="number"],
.form-group select {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-hover);
transition: all 0.2s;
font-family: inherit;
@@ -598,7 +598,7 @@ tr:hover {
}
.form-group small {
color: var(--color-text-faint);
font-size: 12px;
font-size: var(--text-xs);
display: block;
margin-top: 3px;
}
@@ -607,11 +607,11 @@ tr:hover {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
padding: var(--space-2-5) 0;
}
.toggle-row label {
font-size: 14px;
font-weight: 500;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-dark);
}
.switch {
@@ -655,24 +655,24 @@ tr:hover {
.readonly-field {
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
background: var(--color-bg-hover);
border: 2px solid var(--color-border);
border-radius: 10px;
padding: 10px 14px;
border-radius: var(--radius-xl);
padding: var(--space-2-5) var(--space-3-5);
font-family: "SF Mono", Monaco, Consolas, monospace;
font-size: 13px;
font-size: var(--text-sm);
word-break: break-all;
color: var(--color-text-dark);
}
.readonly-field button {
flex-shrink: 0;
padding: 6px 10px;
padding: var(--space-1-5) var(--space-2-5);
border: 1px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
cursor: pointer;
font-size: 12px;
font-size: var(--text-xs);
transition: all 0.15s;
color: var(--color-text-subtle);
}
@@ -683,12 +683,12 @@ tr:hover {
/* ── Alerts ── */
.alert {
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
margin-top: 14px;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-xl);
font-size: var(--text-sm);
margin-top: var(--space-3-5);
display: none;
font-weight: 500;
font-weight: var(--weight-medium);
}
.alert-success {
background: var(--color-badge-success-bg);
@@ -711,23 +711,23 @@ tr:hover {
.warning {
background: var(--color-warning-bg-faint);
border: 1px solid var(--color-badge-warning-border);
border-radius: 10px;
padding: 10px 14px;
font-size: 13px;
border-radius: var(--radius-xl);
padding: var(--space-2-5) var(--space-3-5);
font-size: var(--text-sm);
color: var(--color-badge-warning-text);
margin-top: 8px;
margin-top: var(--space-2);
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
gap: var(--space-1-5);
font-weight: var(--weight-medium);
}
/* ── Discovery ── */
.discovery-result {
margin: 12px 0;
padding: 14px;
border-radius: 10px;
font-size: 13px;
margin: var(--space-3) 0;
padding: var(--space-3-5);
border-radius: var(--radius-xl);
font-size: var(--text-sm);
}
.discovery-result.ok {
background: var(--color-badge-success-bg);
@@ -740,8 +740,8 @@ tr:hover {
color: var(--color-error-text-dark);
}
.discovery-result dt {
font-weight: 700;
margin-top: 6px;
font-weight: var(--weight-bold);
margin-top: var(--space-1-5);
}
.discovery-result dd {
margin-left: 0;
@@ -750,16 +750,16 @@ tr:hover {
/* ── Details ── */
details {
margin-top: 14px;
margin-top: var(--space-3-5);
border-top: 1px solid var(--color-border);
padding-top: 12px;
padding-top: var(--space-3);
}
details summary {
cursor: pointer;
font-weight: 600;
font-size: 14px;
font-weight: var(--weight-semibold);
font-size: var(--text-base);
color: var(--color-text-subtle);
padding: 6px 0;
padding: var(--space-1-5) 0;
user-select: none;
transition: color 0.2s;
}
@@ -767,7 +767,7 @@ details summary:hover {
color: var(--color-accent);
}
details[open] summary {
margin-bottom: 14px;
margin-bottom: var(--space-3-5);
color: var(--color-accent);
}
@@ -785,8 +785,8 @@ details[open] summary {
}
.modal {
background: var(--color-bg-surface);
border-radius: 20px;
padding: 28px;
border-radius: var(--radius-4xl);
padding: var(--space-7);
width: 420px;
max-width: 90vw;
box-shadow: 0 20px 60px var(--color-shadow-xl);
@@ -811,7 +811,7 @@ details[open] summary {
}
.modal-actions {
display: flex;
gap: 8px;
gap: var(--space-2);
justify-content: flex-end;
margin-top: 18px;
}
@@ -820,14 +820,14 @@ details[open] summary {
.quota-bar {
display: flex;
align-items: center;
gap: 10px;
gap: var(--space-2-5);
}
.quota-bar .progress-bar {
flex: 1;
height: 6px;
}
.quota-text {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
white-space: nowrap;
}
@@ -836,7 +836,7 @@ details[open] summary {
#access-denied {
display: none;
text-align: center;
padding: 80px 20px;
padding: var(--space-20) var(--space-5);
}
#access-denied .access-icon {
width: 80px;
@@ -846,33 +846,33 @@ details[open] summary {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
margin: 0 auto var(--space-5);
}
#access-denied .access-icon i {
font-size: 32px;
font-size: var(--text-4xl);
color: var(--color-danger-alt);
}
#access-denied h2 {
color: var(--color-error-text-dark);
margin-bottom: 8px;
font-size: 20px;
margin-bottom: var(--space-2);
font-size: var(--text-xl);
}
#access-denied p {
color: var(--color-text-subtle);
margin-bottom: 20px;
font-size: 14px;
margin-bottom: var(--space-5);
font-size: var(--text-base);
}
#access-denied a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
gap: var(--space-1-5);
padding: var(--space-2-5) var(--space-6);
background: var(--color-accent-gradient);
color: var(--color-sidebar-text-active);
text-decoration: none;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
border-radius: var(--radius-xl);
font-weight: var(--weight-semibold);
font-size: var(--text-base);
box-shadow: 0 3px 12px var(--color-accent-shadow);
transition: all 0.2s;
}
@@ -882,35 +882,31 @@ details[open] summary {
}
#loading {
text-align: center;
padding: 80px;
padding: var(--space-20);
color: var(--color-text-faint);
font-size: 15px;
}
#loading i {
font-size: 32px;
font-size: var(--text-4xl);
color: var(--color-accent);
display: block;
margin-bottom: 12px;
margin-bottom: var(--space-3);
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
/* ── Pagination ── */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 14px;
font-size: 13px;
margin-top: var(--space-3-5);
font-size: var(--text-sm);
color: var(--color-text-faint);
padding: 0 4px;
padding: 0 var(--space-1);
}
.pagination button {
padding: 6px 14px;
padding: var(--space-1-5) var(--space-3-5);
}
/* ── Confirm modal ── */
@@ -921,8 +917,8 @@ details[open] summary {
color: var(--color-error-text-dark);
}
.modal-confirm p {
margin: 14px 0 22px;
font-size: 14px;
margin: var(--space-3-5) 0 22px;
font-size: var(--text-base);
line-height: 1.55;
color: var(--color-dark-mid);
}
@@ -930,9 +926,9 @@ details[open] summary {
background: var(--color-danger-gradient);
color: var(--color-danger-text);
border: none;
padding: 10px 22px;
border-radius: 10px;
font-weight: 600;
padding: var(--space-2-5) 22px;
border-radius: var(--radius-xl);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: opacity 0.15s;
}
@@ -945,28 +941,28 @@ details[open] summary {
.storage-status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-bottom: 24px;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.storage-stat {
padding: 14px;
padding: var(--space-3-5);
background: var(--color-bg-hover);
border-radius: 12px;
border-radius: var(--radius-2xl);
text-align: center;
border: 1px solid var(--color-border);
}
.storage-stat__label {
display: block;
font-size: 11px;
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
margin-bottom: 4px;
margin-bottom: var(--space-1);
}
.storage-stat__value {
display: block;
font-size: 1.35rem;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-text-heading);
}
@@ -977,15 +973,15 @@ details[open] summary {
.smtp-info-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
margin-bottom: var(--space-6);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: 12px;
border-radius: var(--radius-2xl);
overflow: hidden;
}
.smtp-info-table th,
.smtp-info-table td {
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
@@ -997,7 +993,7 @@ details[open] summary {
}
.smtp-info-table th {
font-size: 0.85rem;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
width: 220px;
white-space: nowrap;
@@ -1011,8 +1007,8 @@ details[open] summary {
.storage-backend-selector {
display: flex;
gap: 12px;
margin-bottom: 20px;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.storage-backend-option {
flex: 1;
@@ -1025,18 +1021,18 @@ details[open] summary {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 18px 14px;
gap: var(--space-2);
padding: 18px var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 12px;
border-radius: var(--radius-2xl);
transition:
border-color 0.2s,
background 0.2s;
text-align: center;
font-weight: 500;
font-weight: var(--weight-medium);
}
.storage-backend-option__card i {
font-size: 1.5rem;
font-size: var(--text-2xl);
color: var(--color-text-secondary);
transition: color 0.2s;
}
@@ -1049,29 +1045,29 @@ details[open] summary {
}
.storage-form {
margin-top: 8px;
margin-top: var(--space-2);
}
.storage-actions {
display: flex;
gap: 10px;
margin-top: 24px;
gap: var(--space-2-5);
margin-top: var(--space-6);
justify-content: flex-end;
}
.storage-migration-section {
margin-top: 32px;
padding-top: 20px;
margin-top: var(--space-8);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.storage-migration-section h3 {
font-size: 1rem;
margin-bottom: 8px;
font-size: var(--text-md);
margin-bottom: var(--space-2);
color: var(--color-text-heading);
}
.storage-migration-section h3 i {
color: var(--color-text-secondary);
margin-right: 6px;
margin-right: var(--space-1-5);
}
/* ── Migration UI ── */
@@ -1079,16 +1075,16 @@ details[open] summary {
.migration-status-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
font-size: 14px;
gap: var(--space-2);
margin-bottom: var(--space-3-5);
font-size: var(--text-base);
}
.badge-migration {
padding: 3px 10px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
padding: 3px var(--space-2-5);
border-radius: var(--radius-xl);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.4px;
}
@@ -1117,39 +1113,39 @@ details[open] summary {
width: 100%;
height: 10px;
background: var(--color-bg-hover);
border-radius: 6px;
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 6px;
margin-bottom: var(--space-1-5);
}
.migration-progress-bar__fill {
height: 100%;
background: var(--color-accent);
border-radius: 6px;
border-radius: var(--radius-md);
transition: width 0.3s ease;
}
.migration-progress-text {
display: flex;
justify-content: space-between;
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-secondary);
margin-bottom: 4px;
margin-bottom: var(--space-1);
}
.migration-failed-list {
max-height: 150px;
overflow-y: auto;
font-size: 11px;
font-size: var(--text-2xs);
background: var(--color-bg-hover);
padding: 8px 12px;
border-radius: 8px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
margin-top: 6px;
margin-top: var(--space-1-5);
}
.migration-actions {
display: flex;
gap: 10px;
margin-top: 16px;
gap: var(--space-2-5);
margin-top: var(--space-4);
flex-wrap: wrap;
}
static/css/views/auth.css
+362 -93
View File
@@ -7,9 +7,33 @@
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
height: 100dvh;
width: 100%;
background-color: var(--color-bg-page);
position: relative;
/* Spotlight + warm brand blobs — seats the card in a pool of light
instead of a flat near-white field. */
background: var(--brand-ambient);
}
/* Fine film grain over the backdrop (not the card). `overlay` neutralises the
mid-grey noise so it adds texture without shifting brightness; works in both
light and dark. Tune the whole effect with `opacity`. */
.auth-container::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--brand-grain);
background-size: 180px 180px;
opacity: 0.6;
mix-blend-mode: overlay;
}
/* Keep the card (and every panel) above the grain layer. */
.auth-panel {
position: relative;
z-index: 1;
}
.auth-panel {
@@ -18,9 +42,9 @@
margin: 0 auto;
background-color: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: 0 8px 30px var(--color-shadow);
padding: 36px;
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-xl);
padding: var(--space-9);
text-align: center;
}
@@ -28,7 +52,7 @@
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
margin-bottom: var(--space-5);
}
.auth-logo-icon {
@@ -39,26 +63,27 @@
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
box-shadow: 0 4px 12px var(--color-accent-shadow);
margin-right: var(--space-3);
/* Tighter glow (negative spread) reads more premium than a wide halo. */
box-shadow: 0 4px 14px -4px var(--color-accent-shadow);
}
.auth-logo-icon svg {
width: 30px;
height: 30px;
fill: var(--color-danger-text);
fill: var(--color-on-accent);
}
.auth-logo-text {
font-size: 24px;
font-weight: bold;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.auth-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 28px;
font-weight: var(--weight-bold);
margin-bottom: var(--space-7);
color: var(--color-text-heading);
}
@@ -72,22 +97,23 @@
}
.auth-input-group {
margin-bottom: 20px;
margin-bottom: var(--space-5);
}
.auth-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
margin-bottom: var(--space-2);
font-size: var(--text-base);
color: var(--color-text-heading);
font-weight: 600;
font-weight: var(--weight-semibold);
}
.auth-input {
width: 100%;
padding: 14px 18px;
border-radius: 12px;
border: 2px solid var(--color-border);
padding: var(--space-3-5) 18px;
border-radius: var(--radius-2xl);
/* Stronger resting border so fields read as crafted, not flat fills. */
border: 2px solid var(--color-border-medium);
font-size: 15px;
background-color: var(--color-bg-input);
color: var(--color-text);
@@ -95,7 +121,7 @@
}
.auth-input::placeholder {
color: var(--color-text-faint);
color: var(--color-text-muted);
}
.auth-input:hover {
@@ -111,22 +137,26 @@
}
.auth-input[readonly] {
opacity: 0.7;
cursor: default;
/* A locked value, not a placeholder: full-strength text on a subtly
distinct "locked" fill (no dimming that reads as empty). */
color: var(--color-text);
font-weight: var(--weight-semibold);
background-color: var(--color-bg-input-alt);
}
.auth-button {
width: 100%;
padding: 14px 18px;
border-radius: 12px;
padding: var(--space-3-5) 18px;
border-radius: var(--radius-2xl);
background: var(--color-accent-gradient);
color: var(--color-danger-text);
font-weight: 700;
color: var(--color-on-accent);
font-weight: var(--weight-bold);
border: none;
cursor: pointer;
font-size: 16px;
font-size: var(--text-md);
transition: all 0.3s ease;
margin-top: 12px;
margin-top: var(--space-3);
box-shadow: 0 4px 12px var(--color-accent-shadow);
}
@@ -137,7 +167,8 @@
}
.auth-button:active {
transform: translateY(0);
/* Tactile press — the button dips slightly under the resting plane. */
transform: translateY(1px);
box-shadow: 0 2px 8px var(--color-accent-shadow);
}
@@ -148,13 +179,37 @@
filter: none;
}
/* Loading — hide the label, show an inline spinner (toggled via .is-loading /
aria-busy by auth.js on submit). */
.auth-button.is-loading,
.auth-button[aria-busy="true"] {
color: transparent;
pointer-events: none;
position: relative;
}
.auth-button.is-loading::after,
.auth-button[aria-busy="true"]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid var(--color-on-accent);
border-top-color: transparent;
border-radius: var(--radius-full);
animation: spin var(--spin-duration) linear infinite;
}
.auth-subtitle {
margin: 20px 0;
margin: var(--space-5) 0;
color: var(--color-text-muted);
font-size: 14px;
font-size: var(--text-base);
}
.auth-action-wrap {
margin-top: 20px;
margin-top: var(--space-5);
}
/* SSO / OIDC button */
@@ -164,7 +219,7 @@
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
gap: var(--space-2-5);
}
.auth-button-oidc:hover {
@@ -180,14 +235,14 @@
}
.auth-button-oidc i {
font-size: 14px;
font-size: var(--text-base);
}
/* Helper text above the magic-link form ("No password? Enter your
email…"). Quieter visual weight than the form labels. */
.auth-hint {
margin: 0 0 12px;
font-size: 13px;
margin: 0 0 var(--space-3);
font-size: var(--text-sm);
line-height: 1.4;
color: var(--color-text-secondary);
}
@@ -196,10 +251,10 @@
message rendered on every successful 2xx; error variant only used
for the 503-not-configured branch or network failures. */
.auth-status {
margin-top: 12px;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
margin-top: var(--space-3);
padding: var(--space-2-5) var(--space-3-5);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
line-height: 1.4;
}
.auth-status-success {
@@ -217,9 +272,9 @@
.auth-divider {
display: flex;
align-items: center;
margin: 20px 0;
margin: var(--space-5) 0;
color: var(--color-text-faint);
font-size: 13px;
font-size: var(--text-sm);
}
.auth-divider::before,
@@ -231,7 +286,13 @@
}
.auth-divider span {
padding: 0 12px;
padding: 0 var(--space-3);
/* Quiet, deliberate label rather than a stray lowercase letter. */
text-transform: uppercase;
letter-spacing: var(--tracking-wide, 0.08em);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
}
/* OIDC-only mode: hide password form */
@@ -241,15 +302,15 @@
.auth-toggle {
margin-top: 22px;
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-muted);
}
.auth-toggle-link {
color: var(--color-accent);
color: var(--color-accent-text);
cursor: pointer;
text-decoration: none;
font-weight: 500;
font-weight: var(--weight-medium);
}
.auth-toggle-link:hover {
@@ -259,33 +320,49 @@
.auth-error {
background-color: var(--color-error-bg);
color: var(--color-error-text);
padding: 12px 18px;
border-radius: 12px;
margin-bottom: 20px;
font-size: 14px;
padding: var(--space-3) 18px;
border-radius: var(--radius-2xl);
margin-bottom: var(--space-5);
font-size: var(--text-base);
display: none;
}
.auth-success {
background-color: var(--color-success-bg);
color: var(--color-success-text);
padding: 12px 18px;
border-radius: 12px;
margin-bottom: 20px;
font-size: 14px;
padding: var(--space-3) 18px;
border-radius: var(--radius-2xl);
margin-bottom: var(--space-5);
font-size: var(--text-base);
display: none;
}
/* Admin setup panel styles — visibility controlled via .hidden class */
.setup-steps {
margin-bottom: 28px;
display: flex;
justify-content: center;
gap: 32px;
margin-bottom: var(--space-7);
/* 3 equal columns → circle centres land at 1/6, 1/2, 5/6, so the
connector track can be placed deterministically between them. */
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
}
/* Connector track behind the step circles (z-index 0; circles sit above). */
.setup-steps::before {
content: "";
position: absolute;
top: 17px; /* half of the 34px circle */
left: 16.667%;
right: 16.667%;
height: 2px;
background: var(--color-border);
z-index: 0;
}
.setup-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
@@ -301,28 +378,29 @@
align-items: center;
justify-content: center;
color: var(--color-text-faint);
font-weight: 700;
font-size: 14px;
margin-bottom: 6px;
font-weight: var(--weight-bold);
font-size: var(--text-base);
margin-bottom: var(--space-1-5);
transition: all 0.2s ease;
}
.step-number.active {
background: var(--color-accent-gradient);
border-color: transparent;
color: var(--color-danger-text);
box-shadow: 0 2px 8px var(--color-accent-shadow);
color: var(--color-on-accent);
/* Subtle halo lifts the active step off the connector track. */
box-shadow: 0 0 0 4px var(--color-accent-ring), 0 4px 12px var(--color-accent-shadow);
}
.step-title {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
font-weight: 500;
font-weight: var(--weight-medium);
}
.step-title.active {
color: var(--color-text-heading);
font-weight: 600;
font-weight: var(--weight-semibold);
}
/* Language selector panel styles */
@@ -332,23 +410,23 @@
.language-subtitle {
color: var(--color-text-muted);
font-size: 16px;
margin-bottom: 24px;
font-size: var(--text-md);
margin-bottom: var(--space-6);
}
/* ====== Compact Language Picker ====== */
.lang-picker {
position: relative;
margin-bottom: 24px;
margin-bottom: var(--space-6);
text-align: left;
}
.lang-picker-selected {
display: flex;
align-items: center;
padding: 14px 18px;
padding: var(--space-3-5) 18px;
border: 2px solid var(--color-border);
border-radius: 12px;
border-radius: var(--radius-2xl);
cursor: pointer;
background-color: var(--color-bg-input);
transition: all 0.2s ease;
@@ -370,20 +448,20 @@
.lang-picker-flag {
font-size: 26px;
margin-right: 14px;
margin-right: var(--space-3-5);
flex-shrink: 0;
}
.lang-picker-name {
font-size: 16px;
font-weight: 600;
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
flex: 1;
}
.lang-picker-arrow {
color: var(--color-text-faint);
font-size: 13px;
font-size: var(--text-sm);
transition: transform 0.2s ease;
flex-shrink: 0;
}
@@ -402,8 +480,8 @@
background: var(--color-bg-surface);
border: 2px solid var(--color-accent);
border-top: 1px solid var(--color-border-light);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: var(--radius-2xl);
border-bottom-right-radius: var(--radius-2xl);
box-shadow: 0 12px 32px var(--color-shadow-lg);
z-index: 100;
overflow: hidden;
@@ -428,7 +506,7 @@
/* Search inside dropdown */
.lang-picker-search {
position: relative;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border-bottom: 1px solid var(--color-border-light);
}
@@ -438,15 +516,15 @@
top: 50%;
transform: translateY(-50%);
color: var(--color-text-faint);
font-size: 13px;
font-size: var(--text-sm);
}
.lang-picker-search input {
width: 100%;
padding: 8px 12px 8px 32px;
padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 14px;
border-radius: var(--radius-lg);
font-size: var(--text-base);
outline: none;
box-sizing: border-box;
background-color: var(--color-bg-input);
@@ -466,16 +544,16 @@
.lang-picker-list {
max-height: 240px;
overflow-y: auto;
padding: 6px;
padding: var(--space-1-5);
}
/* Language item in dropdown */
.lang-picker-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.12s ease;
}
@@ -495,40 +573,231 @@
.lang-picker-item-name {
font-size: 15px;
font-weight: 500;
font-weight: var(--weight-medium);
color: var(--color-text-heading);
}
.lang-picker-item-english {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-faint);
margin-left: auto;
}
.lang-picker-item-check {
color: var(--color-accent);
font-size: 13px;
font-size: var(--text-sm);
flex-shrink: 0;
}
.lang-picker-empty {
text-align: center;
color: var(--color-text-faint);
padding: 20px;
font-size: 14px;
padding: var(--space-5);
font-size: var(--text-base);
}
@media (max-width: 480px) {
.auth-panel {
width: 95%;
padding: 24px;
padding: var(--space-6);
}
.lang-picker-selected {
padding: 12px 14px;
padding: var(--space-3) var(--space-3-5);
}
.lang-picker-list {
max-height: 200px;
}
}
/* ============================================================
Premium polish — brand lockup, CTA hierarchy, field icons,
password reveal, progressive disclosure, match feedback.
Icons are token-safe CSS masks (no inline SVG, no raw colour):
the glyph alpha comes from the data-URI, the colour from a token.
============================================================ */
/* — Brand wordmark: the ownable "Oxi" accent lockup (DESIGN-SYSTEM §3) — */
.brand-oxi {
background: var(--color-accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* — CTA hierarchy: exactly one primary per screen. The secondary action
(magic-link, etc.) is a quiet tinted/ghost button, never a 2nd gradient. — */
.auth-button-secondary {
background: var(--color-accent-tint);
color: var(--color-accent-text);
border: 1.5px solid var(--color-border-medium);
box-shadow: none;
}
.auth-button-secondary:hover {
background: var(--color-bg-surface);
border-color: var(--color-accent);
box-shadow: none;
filter: none;
transform: translateY(-1px);
}
.auth-button-secondary:active {
transform: translateY(1px);
box-shadow: none;
}
/* — Leading field icons (user / mail / lock) via masked pseudo-element — */
.auth-input-wrap {
position: relative;
}
.auth-input-wrap .auth-input {
padding-left: 44px;
}
.auth-input-wrap.has-toggle .auth-input {
padding-right: 44px;
}
.auth-input-wrap::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
background-color: var(--color-text-muted);
pointer-events: none;
z-index: 1;
transition: background-color 0.2s ease;
-webkit-mask: var(--icon-url, none) center / contain no-repeat;
mask: var(--icon-url, none) center / contain no-repeat;
}
.auth-input-wrap:focus-within::before {
background-color: var(--color-accent);
}
.auth-input-wrap--user {
--icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.auth-input-wrap--mail {
--icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m2 7 10 6 10-6'/></svg>");
}
.auth-input-wrap--lock {
--icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}
/* — Password show/hide toggle — */
.auth-pw-toggle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: none;
background: transparent;
cursor: pointer;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.auth-pw-toggle::before {
content: "";
width: 18px;
height: 18px;
background-color: var(--color-text-muted);
transition: background-color 0.2s ease;
--eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>");
-webkit-mask: var(--eye) center / contain no-repeat;
mask: var(--eye) center / contain no-repeat;
}
.auth-pw-toggle:hover::before {
background-color: var(--color-accent);
}
.auth-pw-toggle[aria-pressed="true"]::before {
--eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.9 4.2A9 9 0 0 1 12 4c6.5 0 10 7 10 7a13 13 0 0 1-2 2.7M6.6 6.6A13 13 0 0 0 2 11s3.5 7 10 7a9 9 0 0 0 3.6-.7'/><path d='m2 2 20 20'/></svg>");
}
/* — Progressive disclosure of the magic-link form — */
.auth-magic-toggle {
display: block;
width: 100%;
margin-top: var(--space-1);
padding: var(--space-2);
background: none;
border: none;
color: var(--color-accent-text);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
cursor: pointer;
text-align: center;
}
.auth-magic-toggle:hover {
text-decoration: underline;
}
.auth-magic-reveal {
margin-top: var(--space-3);
}
.auth-magic-reveal:not(.hidden) {
animation: langPickerSlideDown 0.2s ease;
}
/* — Live password-match feedback (sits inside the confirm field group) — */
.auth-match {
margin-top: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
display: none;
align-items: center;
gap: var(--space-1-5);
}
.auth-match.show {
display: flex;
}
.auth-match::before {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--match-icon) center / contain no-repeat;
mask: var(--match-icon) center / contain no-repeat;
}
.auth-match--ok {
color: var(--color-success-text);
--match-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
.auth-match--bad {
color: var(--color-error-text);
--match-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>");
}
/* "Caps Lock is on" hint under a password field (toggled by auth.js). */
.auth-caps-warning {
display: flex;
align-items: center;
gap: var(--space-1-5);
margin-top: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-warning-orange-text);
}
static/css/views/device-verify.css
+18 -17
View File
@@ -6,18 +6,19 @@
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--color-bg-hover);
/* Shared brand backdrop (centralised in --brand-ambient). */
background: var(--brand-ambient);
color: var(--color-text-heading);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
min-height: 100dvh;
padding: 1rem;
}
.dag-card {
background: var(--color-bg-surface);
border-radius: var(--radius, 12px);
box-shadow: 0 4px 24px var(--color-shadow-sm);
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-xl);
padding: 2.5rem;
max-width: 440px;
width: 100%;
@@ -27,8 +28,8 @@ body {
margin-bottom: 1.5rem;
}
.dag-logo h1 {
font-size: 1.5rem;
font-weight: 700;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
}
.dag-logo span {
color: var(--color-primary);
@@ -44,7 +45,7 @@ p.subtitle {
}
label {
display: block;
font-weight: 600;
font-weight: var(--weight-semibold);
font-size: 0.85rem;
margin-bottom: 0.4rem;
}
@@ -56,7 +57,7 @@ input[type="text"] {
text-align: center;
text-transform: uppercase;
border: 2px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
outline: none;
transition: border-color 0.2s;
}
@@ -65,7 +66,7 @@ input[type="text"]:focus {
}
.device-info {
background: var(--color-border-light);
border-radius: 8px;
border-radius: var(--radius-lg);
padding: 1rem;
margin: 1rem 0;
}
@@ -79,7 +80,7 @@ input[type="text"]:focus {
font-size: 0.85rem;
}
.device-info .value {
font-weight: 600;
font-weight: var(--weight-semibold);
font-size: 0.85rem;
}
.actions {
@@ -91,22 +92,22 @@ button {
flex: 1;
padding: 0.75rem;
border: none;
border-radius: 8px;
border-radius: var(--radius-lg);
font-size: 0.95rem;
font-weight: 600;
font-weight: var(--weight-semibold);
cursor: pointer;
transition: background 0.2s;
}
.btn-approve {
background: var(--color-primary);
color: var(--color-danger-text);
color: var(--color-on-accent);
}
.btn-approve:hover {
background: var(--color-primary-hover);
}
.btn-deny {
background: var(--color-error-text);
color: var(--color-danger-text);
background: var(--color-danger-bg);
color: var(--color-on-accent);
}
.btn-deny:hover {
background: var(--color-danger-bg-hover);
@@ -118,9 +119,9 @@ button:disabled {
.status {
text-align: center;
padding: 1rem;
border-radius: 8px;
border-radius: var(--radius-lg);
margin-top: 1rem;
font-weight: 600;
font-weight: var(--weight-semibold);
}
.status.success {
background: var(--color-success-bg);
static/css/views/favorites.css
+7 -7
View File
@@ -48,20 +48,20 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 20px;
padding: 50px var(--space-5);
text-align: center;
color: var(--color-text-gray);
}
.favorites-empty-state i {
font-size: 48px;
font-size: var(--text-6xl);
color: var(--color-warning-text);
margin-bottom: 20px;
margin-bottom: var(--space-5);
opacity: 0.6;
}
.favorites-empty-state p {
margin-bottom: 10px;
margin-bottom: var(--space-2-5);
max-width: 400px;
}
@@ -98,13 +98,13 @@
/* List view: small star next to the name */
.favorite-star-inline {
color: var(--color-warning-text);
font-size: 11px;
margin-left: 6px;
font-size: var(--text-2xs);
margin-left: var(--space-1-5);
vertical-align: middle;
filter: drop-shadow(0 0 1px var(--color-device-verify-drop-shadow));
[dir="rtl"] & {
margin-left: 0;
margin-right: 6px;
margin-right: var(--space-1-5);
}
}
static/css/views/inlineViewer.css
+58 -31
View File
@@ -27,7 +27,7 @@
height: 90%;
max-width: 1200px;
background-color: var(--color-bg-surface);
border-radius: 8px;
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
@@ -38,14 +38,14 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
background-color: var(--color-bg-subtle);
border-bottom: 1px solid var(--color-border);
}
.inline-viewer-title {
font-size: 18px;
font-weight: 500;
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
@@ -55,7 +55,7 @@
.inline-viewer-close {
background: none;
border: none;
font-size: 18px;
font-size: var(--text-lg);
cursor: pointer;
color: var(--color-text-muted);
width: 36px;
@@ -86,7 +86,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
background-color: var(--color-bg-subtle);
border-top: 1px solid var(--color-border);
}
@@ -95,14 +95,14 @@
background-color: var(--color-accent);
color: var(--color-danger-text);
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-4);
font-size: var(--text-base);
font-weight: var(--weight-medium);
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
transition: background-color 0.2s;
}
@@ -112,13 +112,13 @@
.inline-viewer-controls {
display: flex;
gap: 8px;
gap: var(--space-2);
}
.inline-viewer-controls button {
background-color: var(--color-border-light);
border: 1px solid var(--color-border-medium);
border-radius: 4px;
border-radius: var(--radius-sm);
width: 36px;
height: 36px;
display: flex;
@@ -138,11 +138,38 @@
.inline-viewer-image {
max-width: 100%;
max-height: 100%;
/* The image is a flex item; without min-* = 0 the flexbox `min-width: auto`
default keeps it at its natural size, so `max-width: 100%` is ignored and
wide images overflow → a stray horizontal scrollbar and the picture only
partly visible (looked like it "repeated" while scrolling). */
min-width: 0;
min-height: 0;
object-fit: contain;
transform-origin: center;
transition: transform 0.2s ease;
}
/* Subtle, thin scrollbar inside the viewer (shown only when zoomed in to pan) —
replaces the heavy global accent scrollbar. */
.inline-viewer-container {
scrollbar-width: thin;
scrollbar-color: var(--color-border-medium) transparent;
}
.inline-viewer-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.inline-viewer-container::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-full);
}
.inline-viewer-container::-webkit-scrollbar-track {
background: transparent;
}
/* PDF viewer */
.inline-viewer-pdf,
.inline-viewer-pdf-fallback {
@@ -176,10 +203,10 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px;
gap: var(--space-3);
padding: var(--space-5);
background: var(--color-progress-overlay);
border-radius: 8px;
border-radius: var(--radius-lg);
box-shadow: 0 2px 8px var(--color-shadow);
}
@@ -188,7 +215,7 @@
width: 200px;
height: 8px;
background: var(--color-border);
border-radius: 4px;
border-radius: var(--radius-sm);
overflow: hidden;
}
@@ -196,21 +223,21 @@
.inline-viewer-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-info-blue), var(--color-admin-blue));
border-radius: 4px;
border-radius: var(--radius-sm);
transition: width 0.2s ease;
}
/* Progress percentage text */
.inline-viewer-progress-text {
font-size: 14px;
font-weight: 600;
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Error and unsupported message */
.inline-viewer-message {
padding: 32px;
padding: var(--space-8);
text-align: center;
max-width: 400px;
}
@@ -218,7 +245,7 @@
.inline-viewer-icon {
font-size: 64px;
color: var(--color-text-dark);
margin-bottom: 24px;
margin-bottom: var(--space-6);
}
.inline-viewer-text {
@@ -227,7 +254,7 @@
}
.inline-viewer-text p {
margin: 0 0 16px;
margin: 0 0 var(--space-4);
}
/* Text viewer */
@@ -235,9 +262,9 @@
width: 100%;
height: 100%;
margin: 0;
padding: 16px 24px;
padding: var(--space-4) var(--space-6);
font-family: "Courier New", Consolas, Monaco, monospace;
font-size: 14px;
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg-surface);
@@ -254,7 +281,7 @@
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 4px;
border-radius: var(--radius-sm);
background-color: var(--color-black);
}
@@ -264,8 +291,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
padding: 48px 32px;
gap: var(--space-6);
padding: var(--space-12) var(--space-8);
max-width: 500px;
width: 100%;
}
@@ -289,8 +316,8 @@
}
.inline-viewer-audio-name {
font-size: 16px;
font-weight: 500;
font-size: var(--text-md);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
text-align: center;
word-break: break-word;
@@ -300,7 +327,7 @@
.inline-viewer-audio {
width: 100%;
max-width: 460px;
border-radius: 8px;
border-radius: var(--radius-lg);
outline: none;
}
static/css/views/music.css
+172 -173
View File
File diff suppressed because it is too large Load Diff
static/css/views/mySharesView.css
+36 -36
View File
@@ -9,7 +9,7 @@
.ms-load-more-wrapper {
display: flex;
justify-content: center;
padding: 16px 0 8px;
padding: var(--space-4) 0 var(--space-2);
}
.ms-load-more-wrapper.hidden {
@@ -23,7 +23,7 @@
box-shadow: none;
border-radius: 0;
overflow: visible;
gap: 10px;
gap: var(--space-2-5);
display: flex;
flex-direction: column;
}
@@ -32,7 +32,7 @@
.ms-lane {
background-color: var(--color-item);
border-radius: 10px;
border-radius: var(--radius-xl);
box-shadow: 0 1px 3px var(--color-shadow-xs);
overflow: hidden;
}
@@ -44,14 +44,14 @@
/* Vignette lane headers need the same padding as the resource row */
.ms-lane__header .user-vignette {
padding: 10px 14px;
font-weight: 600;
padding: var(--space-2-5) var(--space-3-5);
font-weight: var(--weight-semibold);
}
.ms-lane__header .user-vignette .user-vignette__name {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-heading);
font-weight: 600;
font-weight: var(--weight-semibold);
}
.ms-lane__body {
@@ -63,16 +63,16 @@
.ms-resource-row {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
gap: var(--space-2);
padding: var(--space-2-5) var(--space-3-5);
}
/* Size the shared .file-icon component for inline use in myShares rows */
.ms-resource-row .file-icon {
width: 36px;
height: 36px;
border-radius: 6px;
font-size: 14px;
border-radius: var(--radius-md);
font-size: var(--text-base);
flex-shrink: 0;
}
@@ -81,14 +81,14 @@
.ms-link-identity__resource .file-icon {
width: 24px;
height: 24px;
border-radius: 4px;
font-size: 11px;
border-radius: var(--radius-sm);
font-size: var(--text-2xs);
flex-shrink: 0;
}
.ms-resource-row__name {
flex: 1;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text);
text-decoration: none;
overflow: hidden;
@@ -103,8 +103,8 @@
.ms-resource-row__edit {
flex-shrink: 0;
font-size: 12px;
padding: 3px 8px;
font-size: var(--text-xs);
padding: 3px var(--space-2);
opacity: 0.6;
transition: opacity 0.15s;
}
@@ -118,16 +118,16 @@
.ms-link-lane-label {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 12px;
font-weight: 600;
gap: var(--space-1-5);
padding: var(--space-2) var(--space-3-5);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
}
.ms-link-lane-label__icon {
color: var(--color-text-faint);
font-size: 12px;
font-size: var(--text-xs);
}
/* ── Grant row ───────────────────────────────────────────────────────────── */
@@ -139,8 +139,8 @@
display: grid;
grid-template-columns: 1fr 110px 180px auto;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 28px;
gap: var(--space-2);
padding: 7px var(--space-3-5) 7px var(--space-7);
border-bottom: 1px solid var(--color-border-faint);
transition: background 0.1s;
}
@@ -171,12 +171,12 @@
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
}
.ms-identity__name {
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
@@ -184,8 +184,8 @@
}
.ms-identity__resource-name {
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
text-decoration: none;
overflow: hidden;
@@ -201,13 +201,13 @@
/* Token in sharedWith mode: arrow + resource link */
.ms-link-identity__arrow {
font-size: 11px;
font-size: var(--text-2xs);
color: var(--color-text-faint);
flex-shrink: 0;
}
.ms-link-identity__resource {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-secondary);
text-decoration: none;
display: inline-flex;
@@ -235,11 +235,11 @@
width: 22px;
height: 22px;
border: none;
border-radius: 4px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-size: 11px;
font-size: var(--text-2xs);
flex-shrink: 0;
transition:
background 0.12s,
@@ -263,7 +263,7 @@
/* ── Context menu current-item indicator ─────────────────────────────────── */
.ms-menu-item--current {
font-weight: 600;
font-weight: var(--weight-semibold);
}
/* ── Context menu expiry row ─────────────────────────────────────────────── */
@@ -272,12 +272,12 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 12px;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
}
.ms-menu-expiry-label {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
static/css/views/photos.css
+56 -53
View File
@@ -13,61 +13,61 @@
display: flex;
align-items: center;
justify-content: flex-end;
padding: 8px 8px 4px;
padding: var(--space-2) var(--space-2) var(--space-1);
}
/* Toggle buttons — wider for text labels */
.photos-toolbar .toggle-btn {
width: auto;
padding: 0 14px;
font-size: 13px;
font-weight: 500;
padding: 0 var(--space-3-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
/* Group header */
.photos-day-header {
padding: 16px 8px 10px;
padding: var(--space-4) var(--space-2) var(--space-2-5);
font-size: 15px;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.photos-day-header .photos-day-count {
font-weight: 400;
font-weight: var(--weight-normal);
color: var(--color-text-faint);
font-size: 13px;
margin-left: 8px;
font-size: var(--text-sm);
margin-left: var(--space-2);
}
/* Photo grid — base (daily mode) */
.photos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
padding: 0 8px;
margin-bottom: 16px;
gap: var(--space-3);
padding: 0 var(--space-2);
margin-bottom: var(--space-4);
}
/* Monthly mode — larger tiles, more breathing room */
.photos-group-monthly .photos-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
gap: var(--space-3-5);
}
.photos-group-monthly .photos-day-header {
font-size: 17px;
padding: 20px 8px 12px;
padding: var(--space-5) var(--space-2) var(--space-3);
}
/* Yearly mode — smaller tiles, more items visible */
.photos-group-yearly .photos-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
gap: var(--space-2-5);
}
.photos-group-yearly .photos-day-header {
font-size: 20px;
padding: 24px 8px 14px;
font-size: var(--text-xl);
padding: var(--space-6) var(--space-2) var(--space-3-5);
}
/* Individual photo tile */
@@ -75,10 +75,10 @@
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: 12px;
border-radius: var(--radius-2xl);
border: 2px solid var(--color-border);
cursor: pointer;
background: var(--color-bg-surface);
background: var(--color-bg-muted);
box-shadow: 0 1px 3px var(--color-shadow-xs);
transition:
transform 0.2s ease,
@@ -90,8 +90,15 @@
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
transition: transform 0.2s ease;
border-radius: var(--radius-xl);
opacity: 0;
transition:
opacity 0.4s ease,
transform 0.2s ease;
}
.photo-tile img.is-loaded {
opacity: 1;
}
.photo-tile:hover {
@@ -120,7 +127,7 @@
align-items: center;
justify-content: center;
color: var(--color-danger-text);
font-size: 11px;
font-size: var(--text-2xs);
z-index: 2;
}
@@ -159,7 +166,7 @@
align-items: center;
justify-content: center;
color: var(--color-danger-text);
font-size: 12px;
font-size: var(--text-xs);
z-index: 2;
}
@@ -168,11 +175,11 @@
position: absolute;
bottom: 6px;
left: 6px;
font-size: 11px;
font-size: var(--text-2xs);
color: var(--color-danger-text);
background: var(--color-overlay-video);
padding: 2px 6px;
border-radius: 4px;
padding: var(--space-0-5) var(--space-1-5);
border-radius: var(--radius-sm);
z-index: 2;
}
@@ -182,25 +189,25 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
padding: var(--space-20) var(--space-5);
text-align: center;
color: var(--color-text-faint);
}
.photos-empty i {
font-size: 56px;
margin-bottom: 16px;
margin-bottom: var(--space-4);
color: var(--color-border-medium);
}
.photos-empty p {
margin: 4px 0;
margin: var(--space-1) 0;
font-size: 15px;
}
.photos-empty .photos-empty-title {
font-size: 18px;
font-weight: 600;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
}
@@ -215,21 +222,17 @@
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
padding: var(--space-6);
color: var(--color-text-faint);
font-size: 14px;
gap: 8px;
font-size: var(--text-base);
gap: var(--space-2);
}
.photos-loading i {
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
/* Selection bar */
.photos-selection-bar {
@@ -239,14 +242,14 @@
transform: translateX(-50%);
background: var(--color-multiselect-bg);
color: var(--color-multiselect-text);
padding: 10px 20px;
border-radius: 12px;
padding: var(--space-2-5) var(--space-5);
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
gap: 16px;
gap: var(--space-4);
box-shadow: 0 8px 30px var(--color-shadow-3xl);
z-index: 1000;
font-size: 14px;
font-size: var(--text-base);
}
.photos-selection-bar button {
@@ -254,9 +257,9 @@
border: none;
color: var(--color-multiselect-text);
cursor: pointer;
padding: 6px 10px;
border-radius: 6px;
font-size: 14px;
padding: var(--space-1-5) var(--space-2-5);
border-radius: var(--radius-md);
font-size: var(--text-base);
transition: background 0.15s;
}
@@ -265,16 +268,16 @@
}
.photos-selection-bar .selection-count {
font-weight: 600;
font-weight: var(--weight-semibold);
}
/* Responsive */
@media (max-width: 768px) {
.photos-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 2px;
padding: 0 2px;
margin-bottom: 8px;
gap: var(--space-0-5);
padding: 0 var(--space-0-5);
margin-bottom: var(--space-2);
}
.photos-group-monthly .photos-grid {
@@ -290,11 +293,11 @@
}
.photos-day-header {
font-size: 14px;
padding: 10px 4px 6px;
font-size: var(--text-base);
padding: var(--space-2-5) var(--space-1) var(--space-1-5);
}
.photos-toolbar {
padding: 6px 4px 2px;
padding: var(--space-1-5) var(--space-1) var(--space-0-5);
}
}
static/css/views/photosLightbox.css
+13 -13
View File
@@ -33,7 +33,7 @@
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
border-radius: 4px;
border-radius: var(--radius-sm);
user-select: none;
}
@@ -48,7 +48,7 @@
border: none;
background: var(--color-lightbox-btn-bg);
color: var(--color-lightbox-btn-text);
font-size: 20px;
font-size: var(--text-xl);
cursor: pointer;
display: flex;
align-items: center;
@@ -80,7 +80,7 @@
border: none;
background: var(--color-lightbox-btn-bg);
color: var(--color-lightbox-btn-text);
font-size: 18px;
font-size: var(--text-lg);
cursor: pointer;
display: flex;
align-items: center;
@@ -99,7 +99,7 @@
top: 0;
left: 0;
right: 0;
padding: 16px 70px 16px 20px;
padding: var(--space-4) 70px var(--space-4) var(--space-5);
background: var(--color-lightbox-gradient-top);
color: var(--color-lightbox-btn-text);
z-index: 10001;
@@ -107,18 +107,18 @@
.lightbox-filename {
font-size: 15px;
font-weight: 600;
margin-bottom: 2px;
font-weight: var(--weight-semibold);
margin-bottom: var(--space-0-5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lightbox-meta {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-lightbox-text-muted);
display: flex;
gap: 12px;
gap: var(--space-3);
flex-wrap: wrap;
}
@@ -128,12 +128,12 @@
bottom: 0;
left: 0;
right: 0;
padding: 16px 20px;
padding: var(--space-4) var(--space-5);
background: var(--color-lightbox-gradient-bottom);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
gap: var(--space-2);
z-index: 10001;
}
@@ -148,7 +148,7 @@
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-size: var(--text-md);
transition: background 0.15s;
}
@@ -166,7 +166,7 @@
bottom: 16px;
left: 20px;
color: var(--color-lightbox-text-faint);
font-size: 13px;
font-size: var(--text-sm);
z-index: 10001;
}
@@ -175,7 +175,7 @@
.lightbox-nav {
width: 36px;
height: 36px;
font-size: 16px;
font-size: var(--text-md);
}
.lightbox-prev {
static/css/views/profile.css
+195 -199
View File
@@ -7,7 +7,7 @@
body {
background: var(--color-bg-page);
color: var(--color-text-heading);
min-height: 100vh;
min-height: 100dvh;
height: auto;
display: flex;
flex-direction: column;
@@ -19,7 +19,7 @@ body {
color: inherit;
display: flex;
align-items: center;
gap: 14px;
gap: var(--space-3-5);
}
.width-zero {
width: 0%;
@@ -30,7 +30,7 @@ body {
/* ── Header ── */
.profile-header {
background: linear-gradient(135deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%);
padding: 0 32px;
padding: 0 var(--space-8);
height: 64px;
display: flex;
align-items: center;
@@ -43,7 +43,7 @@ body {
.profile-header-left {
display: flex;
align-items: center;
gap: 14px;
gap: var(--space-3-5);
}
.profile-logo {
width: 38px;
@@ -62,24 +62,24 @@ body {
}
.profile-title-text {
font-size: 17px;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-sidebar-text-active);
letter-spacing: 0.3px;
}
.profile-title-separator {
font-size: 17px;
color: var(--color-sidebar-storage-faint);
font-weight: 400;
margin-left: 6px;
font-weight: var(--weight-normal);
margin-left: var(--space-1-5);
}
.profile-header-right a {
color: var(--color-sidebar-text);
text-decoration: none;
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
transition: color 0.2s;
}
.profile-header-right a:hover {
@@ -90,28 +90,28 @@ body {
.profile-container {
max-width: 720px;
margin: 0 auto;
padding: 32px 24px 60px;
padding: var(--space-8) var(--space-6) 60px;
width: 100%;
}
/* ── Card ── */
.profile-card {
background: var(--color-bg-surface);
border-radius: 16px;
border-radius: var(--radius-3xl);
box-shadow:
0 1px 4px var(--color-shadow-xs),
0 0 0 1px var(--color-shadow-xs);
padding: 32px;
padding: var(--space-8);
margin-bottom: 22px;
}
.profile-card h2 {
font-size: 16px;
font-weight: 700;
margin-bottom: 20px;
font-size: var(--text-md);
font-weight: var(--weight-bold);
margin-bottom: var(--space-5);
color: var(--color-text-heading);
display: flex;
align-items: center;
gap: 10px;
gap: var(--space-2-5);
}
.profile-card h2 i {
color: var(--color-accent);
@@ -122,8 +122,8 @@ body {
.avatar-section {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 8px;
gap: var(--space-6);
margin-bottom: var(--space-2);
}
.avatar-large {
width: 88px;
@@ -134,31 +134,31 @@ body {
align-items: center;
justify-content: center;
color: var(--color-sidebar-text-active);
font-size: 32px;
font-weight: 700;
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
letter-spacing: 1px;
box-shadow: 0 6px 20px var(--color-accent-shadow);
flex-shrink: 0;
}
.avatar-info h1 {
font-size: 22px;
font-weight: 700;
font-weight: var(--weight-bold);
color: var(--color-text-heading);
margin-bottom: 4px;
margin-bottom: var(--space-1);
}
.avatar-info .email {
font-size: 14px;
font-size: var(--text-base);
color: var(--color-text-subtle);
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
.avatar-info .role-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-4xl);
}
.role-badge-admin {
background: var(--color-role-admin-bg);
@@ -173,7 +173,7 @@ body {
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
gap: var(--space-4);
}
@media (max-width: 560px) {
.info-grid {
@@ -181,9 +181,9 @@ body {
}
}
.info-item {
padding: 16px;
padding: var(--space-4);
background: var(--color-bg-alt);
border-radius: 12px;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border);
}
.info-item .info-label {
@@ -191,31 +191,31 @@ body {
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
margin-bottom: 4px;
font-weight: var(--weight-bold);
margin-bottom: var(--space-1);
display: flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
}
.info-item .info-label i {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-dark);
}
.info-item .info-value {
font-size: 15px;
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
/* ── Storage ── */
.storage-section {
margin-top: 4px;
margin-top: var(--space-1);
}
.storage-stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
margin-bottom: 16px;
gap: var(--space-3-5);
margin-bottom: var(--space-4);
}
@media (max-width: 560px) {
.storage-stats {
@@ -224,26 +224,26 @@ body {
}
.storage-stat {
text-align: center;
padding: 16px;
padding: var(--space-4);
background: var(--color-bg-hover);
border-radius: 12px;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border);
}
.storage-stat .stat-value {
font-size: 1.5rem;
font-weight: 800;
font-size: var(--text-2xl);
font-weight: var(--weight-extrabold);
color: var(--color-text-heading);
}
.storage-stat .stat-label {
font-size: 11px;
font-size: var(--text-2xs);
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-top: 2px;
font-weight: var(--weight-semibold);
margin-top: var(--space-0-5);
}
.storage-bar-wrap {
margin-top: 4px;
margin-top: var(--space-1);
}
.storage-bar {
height: 10px;
@@ -266,29 +266,29 @@ body {
background: var(--color-storage-fill-red);
}
.storage-text {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
text-align: right;
margin-top: 6px;
margin-top: var(--space-1-5);
}
/* ── Change Password ── */
.form-group {
margin-bottom: 16px;
margin-bottom: var(--space-4);
}
.form-group label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
margin-bottom: var(--space-1);
color: var(--color-text-dark);
}
.form-group input {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-input);
transition: all 0.2s;
font-family: inherit;
@@ -305,23 +305,23 @@ body {
}
.form-group small {
color: var(--color-text-faint);
font-size: 12px;
font-size: var(--text-xs);
display: block;
margin-top: 3px;
}
.btn {
padding: 10px 22px;
padding: var(--space-2-5) 22px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border-radius: var(--radius-xl);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
gap: var(--space-1-5);
}
.btn-primary {
background: var(--color-accent-gradient);
@@ -339,11 +339,11 @@ body {
}
.alert {
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
margin-top: 14px;
font-weight: 500;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-xl);
font-size: var(--text-sm);
margin-top: var(--space-3-5);
font-weight: var(--weight-medium);
}
.alert-success {
background: var(--color-badge-success-bg);
@@ -358,22 +358,22 @@ body {
/* ── App Passwords ── */
.section-desc {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-subtle);
margin-bottom: 16px;
line-height: 1.5;
margin-bottom: var(--space-4);
line-height: var(--leading-normal);
}
.scope-checkboxes {
display: flex;
gap: 16px;
gap: var(--space-4);
flex-wrap: wrap;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 500;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-dark);
cursor: pointer;
}
@@ -384,10 +384,10 @@ body {
}
.form-select {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-hover);
color: var(--color-text-heading);
font-family: inherit;
@@ -418,28 +418,28 @@ body {
transform: translateY(-1px);
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
border-radius: 8px;
padding: var(--space-1-5) var(--space-3);
font-size: var(--text-xs);
border-radius: var(--radius-lg);
}
.app-pw-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
font-size: var(--text-sm);
}
.app-pw-table th {
text-align: left;
font-size: 11px;
font-size: var(--text-2xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-faint);
font-weight: 700;
padding: 8px 10px;
font-weight: var(--weight-bold);
padding: var(--space-2) var(--space-2-5);
border-bottom: 2px solid var(--color-border);
}
.app-pw-table td {
padding: 10px;
padding: var(--space-2-5);
border-bottom: 1px solid var(--color-border-light);
vertical-align: middle;
}
@@ -447,23 +447,23 @@ body {
border-bottom: none;
}
.app-pw-label-cell {
font-weight: 600;
font-weight: var(--weight-semibold);
color: var(--color-text-heading);
}
.app-pw-prefix code {
font-size: 12px;
font-size: var(--text-xs);
background: var(--color-border-light);
padding: 2px 8px;
border-radius: 6px;
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-md);
color: var(--color-text-subtle);
}
.badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 2px 10px;
border-radius: 12px;
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
padding: var(--space-0-5) var(--space-2-5);
border-radius: var(--radius-2xl);
}
.badge-active {
background: var(--color-badge-success-bg);
@@ -476,7 +476,7 @@ body {
@media (max-width: 640px) {
.app-pw-table {
font-size: 12px;
font-size: var(--text-xs);
}
.app-pw-table th:nth-child(3),
.app-pw-table td:nth-child(3),
@@ -487,83 +487,79 @@ body {
}
.app-pw-empty {
text-align: center;
padding: 24px;
padding: var(--space-6);
color: var(--color-text-faint);
font-size: 13px;
font-size: var(--text-sm);
}
.app-pw-empty i {
margin-right: 6px;
margin-right: var(--space-1-5);
}
.hidden {
display: none;
}
.app-pw-warn {
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
.app-pw-dismiss {
margin-top: 10px;
margin-top: var(--space-2-5);
}
.app-pw-actions {
display: flex;
gap: 8px;
gap: var(--space-2);
}
.app-pw-new-btn {
margin-top: 14px;
margin-top: var(--space-3-5);
}
.app-pw-created-box {
position: relative;
}
.app-pw-token-row {
display: flex;
gap: 8px;
gap: var(--space-2);
align-items: center;
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
.app-pw-token-input {
flex: 1;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-badge-success-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
font-family: "Courier New", Courier, monospace;
background: var(--color-badge-success-fill-faint);
color: var(--color-badge-success-text);
}
.app-pw-instr-list {
font-size: 12px;
line-height: 1.8;
margin-top: 8px;
font-size: var(--text-xs);
line-height: var(--leading-loose);
margin-top: var(--space-2);
}
.app-pw-instr-list code {
background: var(--color-badge-success-fill-faint);
padding: 1px 6px;
border-radius: 4px;
font-size: 12px;
padding: 1px var(--space-1-5);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
}
/* ── Loading / Error ── */
#loading {
text-align: center;
padding: 80px;
padding: var(--space-20);
color: var(--color-text-faint);
font-size: 15px;
}
#loading i {
font-size: 32px;
font-size: var(--text-4xl);
color: var(--color-accent);
display: block;
margin-bottom: 12px;
margin-bottom: var(--space-3);
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
#auth-error {
text-align: center;
padding: 80px 20px;
padding: var(--space-20) var(--space-5);
}
#auth-error .err-icon {
width: 80px;
@@ -573,33 +569,33 @@ body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
margin: 0 auto var(--space-5);
}
#auth-error .err-icon i {
font-size: 32px;
font-size: var(--text-4xl);
color: var(--color-danger-alt);
}
#auth-error h2 {
color: var(--color-error-text-dark);
margin-bottom: 8px;
font-size: 20px;
margin-bottom: var(--space-2);
font-size: var(--text-xl);
}
#auth-error p {
color: var(--color-text-subtle);
margin-bottom: 20px;
font-size: 14px;
margin-bottom: var(--space-5);
font-size: var(--text-base);
}
#auth-error a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
gap: var(--space-1-5);
padding: var(--space-2-5) var(--space-6);
background: var(--color-accent-gradient);
color: var(--color-sidebar-text-active);
text-decoration: none;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
border-radius: var(--radius-xl);
font-weight: var(--weight-semibold);
font-size: var(--text-base);
box-shadow: 0 3px 12px var(--color-accent-shadow);
transition: all 0.2s;
}
@@ -610,22 +606,22 @@ body {
/* ── App Passwords ── */
.app-pw-desc {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-text-subtle);
margin-bottom: 16px;
line-height: 1.5;
margin-bottom: var(--space-4);
line-height: var(--leading-normal);
}
.app-pw-create {
display: flex;
gap: 10px;
margin-bottom: 16px;
gap: var(--space-2-5);
margin-bottom: var(--space-4);
}
.app-pw-create input {
flex: 1;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 2px solid var(--color-border);
border-radius: 10px;
font-size: 14px;
border-radius: var(--radius-xl);
font-size: var(--text-base);
background: var(--color-bg-input);
transition: all 0.2s;
font-family: inherit;
@@ -645,42 +641,42 @@ body {
.app-pw-created {
background: var(--color-badge-success-bg);
border: 1px solid var(--color-badge-success-border);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
border-radius: var(--radius-2xl);
padding: var(--space-4);
margin-bottom: var(--space-4);
}
.app-pw-created-label {
font-size: 13px;
font-size: var(--text-sm);
color: var(--color-badge-success-text);
margin-bottom: 8px;
font-weight: 500;
margin-bottom: var(--space-2);
font-weight: var(--weight-medium);
}
.app-pw-created-value {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
gap: var(--space-2-5);
margin-bottom: var(--space-1-5);
}
.app-pw-created-value code {
font-family: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 16px;
font-weight: 700;
font-size: var(--text-md);
font-weight: var(--weight-bold);
color: var(--color-badge-success-text);
letter-spacing: 1px;
background: var(--color-badge-success-bg-medium);
padding: 8px 14px;
border-radius: 8px;
padding: var(--space-2) var(--space-3-5);
border-radius: var(--radius-lg);
flex: 1;
word-break: break-all;
}
.btn-copy {
padding: 8px 12px;
padding: var(--space-2) var(--space-3);
border: none;
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-secret-green);
color: var(--color-sidebar-text-active);
cursor: pointer;
font-size: 14px;
font-size: var(--text-base);
transition: all 0.15s;
flex-shrink: 0;
}
@@ -688,13 +684,13 @@ body {
background: var(--color-badge-success-fill);
}
.app-pw-created small {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-badge-success-fill);
}
.app-pw-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-size: var(--text-base);
}
.app-pw-table thead th {
text-align: left;
@@ -702,12 +698,12 @@ body {
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
padding: 8px 12px;
font-weight: var(--weight-bold);
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.app-pw-table tbody td {
padding: 10px 12px;
padding: var(--space-2-5) var(--space-3);
border-bottom: 1px solid var(--color-border-light);
color: var(--color-text-dark);
}
@@ -715,13 +711,13 @@ body {
border-bottom: none;
}
.btn-danger-sm {
padding: 6px 10px;
padding: var(--space-1-5) var(--space-2-5);
border: none;
border-radius: 8px;
border-radius: var(--radius-lg);
background: var(--color-danger-light-bg);
color: var(--color-error-text-dark);
cursor: pointer;
font-size: 13px;
font-size: var(--text-sm);
transition: all 0.15s;
}
.btn-danger-sm:hover {
@@ -731,23 +727,23 @@ body {
.app-pw-empty {
text-align: center;
color: var(--color-text-faint);
font-size: 14px;
padding: 24px 0;
font-size: var(--text-base);
padding: var(--space-6) 0;
}
.app-pw-auto-section {
margin-top: 20px;
margin-top: var(--space-5);
border-top: 1px solid var(--color-border);
padding-top: 16px;
padding-top: var(--space-4);
}
.app-pw-auto-toggle {
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
background: none;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 600;
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
padding: 0;
transition: color 0.15s;
@@ -757,23 +753,23 @@ body {
color: var(--color-text-dark);
}
.app-pw-auto-toggle i {
font-size: 11px;
font-size: var(--text-2xs);
transition: transform 0.15s;
width: 12px;
}
.app-pw-auto-count {
font-size: 11px;
font-weight: 700;
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
background: var(--color-border);
color: var(--color-text-subtle);
padding: 2px 8px;
border-radius: 10px;
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-xl);
margin-left: auto;
}
.app-pw-auto-desc {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
margin: 12px 0 8px;
margin: var(--space-3) 0 var(--space-2);
line-height: 1.4;
}
@@ -807,7 +803,7 @@ body {
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-size: var(--text-2xs);
cursor: pointer;
transition:
opacity 0.15s,
@@ -820,33 +816,33 @@ body {
/* OIDC note shown instead of edit button */
.avatar-oidc-note {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
margin-top: 6px;
margin-top: var(--space-1-5);
font-style: italic;
}
/* ── Photo edit panel ──────────────────────────────────────────────────────── */
.avatar-edit-panel {
margin-top: 20px;
padding-top: 20px;
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.avatar-edit-tabs {
display: flex;
gap: 4px;
margin-bottom: 16px;
gap: var(--space-1);
margin-bottom: var(--space-4);
}
.avatar-tab {
padding: 6px 16px;
padding: var(--space-1-5) var(--space-4);
border: 1px solid var(--color-border);
border-radius: 20px;
border-radius: var(--radius-4xl);
background: none;
color: var(--color-text-subtle);
font-size: 13px;
font-size: var(--text-sm);
cursor: pointer;
transition:
background 0.15s,
@@ -863,17 +859,17 @@ body {
.avatar-tab-pane {
display: flex;
flex-direction: column;
gap: 8px;
gap: var(--space-2);
}
.avatar-url-input {
width: 100%;
padding: 10px 14px;
padding: var(--space-2-5) var(--space-3-5);
border: 1px solid var(--color-border);
border-radius: 10px;
border-radius: var(--radius-xl);
background: var(--color-bg-alt);
color: var(--color-text-dark);
font-size: 14px;
font-size: var(--text-base);
box-sizing: border-box;
}
@@ -884,7 +880,7 @@ body {
}
.avatar-hint {
font-size: 12px;
font-size: var(--text-xs);
color: var(--color-text-faint);
}
@@ -896,13 +892,13 @@ body {
.avatar-file-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
gap: var(--space-2);
padding: var(--space-2-5) var(--space-5);
border: 1px dashed var(--color-border);
border-radius: 10px;
border-radius: var(--radius-xl);
background: var(--color-bg-alt);
color: var(--color-text-subtle);
font-size: 13px;
font-size: var(--text-sm);
cursor: pointer;
transition:
border-color 0.15s,
@@ -925,11 +921,11 @@ body {
.avatar-edit-actions {
display: flex;
gap: 8px;
gap: var(--space-2);
flex-wrap: wrap;
margin-top: 16px;
margin-top: var(--space-4);
}
#p-avatar-status {
margin-top: 12px;
margin-top: var(--space-3);
}
static/css/views/recent.css
+4 -4
View File
@@ -37,20 +37,20 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 20px;
padding: 50px var(--space-5);
text-align: center;
color: var(--color-recent-muted);
}
.recents-empty-state i {
font-size: 48px;
font-size: var(--text-6xl);
color: var(--color-recent-muted);
margin-bottom: 20px;
margin-bottom: var(--space-5);
opacity: 0.6;
}
.recents-empty-state p {
margin-bottom: 10px;
margin-bottom: var(--space-2-5);
max-width: 400px;
}
static/css/views/share-public.css
+58 -36
View File
@@ -7,33 +7,44 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--color-bg-hover);
/* Shared brand backdrop (centralised in --brand-ambient). */
background: var(--brand-ambient);
color: var(--color-text-heading);
display: flex;
justify-content: center;
align-items: safe center;
height: auto;
min-height: 100vh;
min-height: 100dvh;
overflow: auto;
padding: 1rem;
}
.share-card {
background: var(--color-bg-surface);
border-radius: var(--radius, 12px);
box-shadow: 0 4px 24px var(--color-shadow-sm);
border-radius: var(--radius-3xl);
box-shadow: var(--shadow-xl);
padding: 2.5rem;
max-width: 480px;
width: 100%;
text-align: center;
}
.share-trust {
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1-5);
font-size: var(--text-xs);
color: var(--color-text-faint);
}
.share-logo {
margin-bottom: 1.5rem;
}
.share-logo h1 {
font-size: 1.5rem;
font-weight: 700;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
}
.share-logo span {
color: var(--color-primary);
@@ -64,18 +75,29 @@ p.subtitle {
margin: 0 auto 1rem;
animation: spin 0.7s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* @keyframes spin → base/animations.css (canonical, loaded via main.css). */
/* Icons */
.share-icon {
font-size: 3rem;
font-size: var(--text-6xl);
margin-bottom: 0.75rem;
}
/* Inline SVG state icons (replaced the per-OS emoji). Colour comes from the
container via stroke: currentColor. */
.share-icon svg {
width: 56px;
height: 56px;
}
#share-expired .share-icon {
color: var(--color-error-text);
}
#share-file .share-icon {
color: var(--color-accent-text);
}
/* Password form */
#password-form {
text-align: left;
@@ -83,9 +105,9 @@ p.subtitle {
#password-input {
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
font-size: var(--text-md);
border: 2px solid var(--color-border);
border-radius: 8px;
border-radius: var(--radius-lg);
outline: none;
background: var(--color-bg-surface);
color: var(--color-text-heading);
@@ -112,9 +134,9 @@ FIXME: use components/buttons.css ?
background: var(--color-primary);
color: var(--color-bg-surface);
border: none;
border-radius: 8px;
border-radius: var(--radius-lg);
font-size: 0.95rem;
font-weight: 600;
font-weight: var(--weight-semibold);
cursor: pointer;
text-decoration: none;
text-align: center;
@@ -193,8 +215,8 @@ body.gallery-mode .share-logo {
}
.gallery-title {
flex: 1 1 200px;
font-size: 1.25rem;
font-weight: 600;
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
margin: 0;
word-break: break-word;
color: var(--color-text-heading);
@@ -213,7 +235,7 @@ body.gallery-mode .share-logo {
color: var(--color-text-heading);
font-size: 0.85rem;
padding: 0.4rem 0.85rem;
border-radius: 999px;
border-radius: var(--radius-full);
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
transition: background 0.15s;
@@ -226,7 +248,7 @@ body.gallery-mode .share-logo {
display: inline-flex;
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: 999px;
border-radius: var(--radius-full);
padding: 3px;
}
.gallery-view-toggle button {
@@ -234,7 +256,7 @@ body.gallery-mode .share-logo {
border: none;
color: var(--color-text-gray);
padding: 0.35rem 0.75rem;
border-radius: 999px;
border-radius: var(--radius-full);
cursor: pointer;
font-size: 0.85rem;
display: inline-flex;
@@ -252,14 +274,14 @@ body.gallery-mode .share-logo {
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1rem;
border-radius: 999px;
border-radius: var(--radius-full);
width: auto;
font-size: 0.85rem;
}
.gallery-section-title {
font-size: 0.75rem;
font-weight: 600;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-gray);
@@ -278,7 +300,7 @@ body.gallery-mode .share-logo {
padding: 0.75rem 0.85rem;
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: 12px;
border-radius: var(--radius-2xl);
color: var(--color-text-heading);
text-decoration: none;
transition:
@@ -296,13 +318,13 @@ body.gallery-mode .share-logo {
}
.folder-card .card-name {
font-size: 0.9rem;
font-weight: 500;
font-weight: var(--weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.folder-card .card-meta {
font-size: 0.75rem;
font-size: var(--text-xs);
color: var(--color-text-gray);
}
@@ -315,7 +337,7 @@ body.gallery-mode .share-logo {
display: block;
background: var(--color-bg-hover);
border: 1px solid var(--color-border);
border-radius: 12px;
border-radius: var(--radius-2xl);
color: var(--color-text-heading);
text-decoration: none;
overflow: hidden;
@@ -367,7 +389,7 @@ body.gallery-mode .share-logo {
.file-thumb .video-marker::before {
content: "▶";
color: var(--color-on-overlay);
font-size: 28px;
font-size: var(--text-3xl);
text-shadow: 0 2px 8px var(--color-overlay-shadow);
}
.file-card .card-body {
@@ -376,15 +398,15 @@ body.gallery-mode .share-logo {
}
.file-card .card-name {
font-size: 0.85rem;
font-weight: 500;
font-weight: var(--weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-card .card-meta {
font-size: 0.75rem;
font-size: var(--text-xs);
color: var(--color-text-gray);
margin-top: 2px;
margin-top: var(--space-0-5);
}
/* ── List view ───────────────────────────────────────────────── */
@@ -397,7 +419,7 @@ body[data-share-view="list"] .file-card {
gap: 0.75rem;
padding: 0.5rem 0.75rem;
margin-bottom: 0.35rem;
border-radius: 10px;
border-radius: var(--radius-xl);
}
body[data-share-view="list"] .file-card:hover {
transform: none;
@@ -407,14 +429,14 @@ body[data-share-view="list"] .file-thumb {
height: 44px;
aspect-ratio: 1 / 1;
flex: none;
border-radius: 8px;
border-radius: var(--radius-lg);
}
body[data-share-view="list"] .file-thumb .file-type-icon {
width: 24px;
height: 24px;
}
body[data-share-view="list"] .file-thumb .video-marker::before {
font-size: 14px;
font-size: var(--text-base);
}
body[data-share-view="list"] .file-card .card-body {
padding: 0;
@@ -462,7 +484,7 @@ body[data-share-view="list"] .file-card .card-body {
background: var(--color-overlay-button);
color: var(--color-on-overlay);
border: none;
border-radius: 999px;
border-radius: var(--radius-full);
padding: 0.5rem 0.85rem;
font-size: 0.85rem;
text-decoration: none;
static/css/views/sharedWithMe.css
+1 -1
View File
@@ -9,5 +9,5 @@
.swm-load-more-wrapper {
display: flex;
justify-content: center;
padding: 16px 0 24px;
padding: var(--space-4) 0 var(--space-6);
}
static/device-verify.html
+2 -1
View File
@@ -9,8 +9,9 @@
<link rel="stylesheet" href="/css/views/device-verify.css">
</head>
<body>
<div class="dag-card">
<div class="dag-card" role="main">
<div class="dag-logo">
<span class="brand-mark"><svg viewBox="120 120 280 280"><path d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z"/></svg></span>
<h1><span>Oxi</span>Cloud</h1>
</div>
static/index.html
+57 -43
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,6 +9,20 @@
<meta name="color-scheme" content="light dark">
<title data-i18n="app.title">OxiCloud</title>
<link rel="icon" type="image/svg+xml" href="/logo/logo-plain.svg">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/logo/apple-touch-icon.png">
<link rel="mask-icon" href="/logo/logo-plain.svg" color="#ff5e3a">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f5f7fa">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f172a">
<meta property="og:type" content="website">
<meta property="og:title" content="OxiCloud">
<meta property="og:description" content="Fast, private cloud storage built with Rust.">
<meta property="og:image" content="/logo/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="OxiCloud">
<meta name="twitter:description" content="Fast, private cloud storage built with Rust.">
<meta name="twitter:image" content="/logo/og-image.png">
<!-- Apply saved theme immediately to prevent flash of light mode -->
<script src="/js/core/theme-init.js"></script>
@@ -25,6 +39,7 @@
<link rel="stylesheet" href="/css/views/music.css">
<!-- Scripts (defer: download in parallel, execute in order, after HTML parsed) -->
<script defer type="module" src="/js/core/errorBoundary.js"></script>
<script defer type="module" src="/js/core/i18n.js"></script>
<script defer type="module" src="/js/core/csrf.js"></script>
<script defer type="module" src="/js/core/languageSelector.js"></script>
@@ -52,6 +67,7 @@
<script defer type="module" src="/js/app/navigation.js"></script>
<script defer type="module" src="/js/app/authSession.js"></script>
<script defer type="module" src="/js/app/userMenu.js"></script>
<script defer type="module" src="/js/app/commandPalette.js"></script>
<script defer type="module" src="/js/app/filesView.js"></script>
<script defer type="module" src="/js/views/trash/trashView.js"></script>
<script defer type="module" src="/js/app/searchView.js"></script>
@@ -62,6 +78,7 @@
<script defer src="/js/core/sw-register.js"></script>
</head>
<body>
<a href="#main" class="skip-link" data-i18n="a11y.skip_to_content">Skip to content</a>
<!-- Mobile sidebar overlay -->
<div class="sidebar-overlay" id="sidebar-overlay"></div>
<!-- Sidebar -->
@@ -76,40 +93,40 @@
<div class="app-name">OxiCloud</div>
</a>
<div class="nav-menu">
<div class="nav-item">
<i class="fas fa-folder"></i>
<nav class="nav-menu" aria-label="Primary" data-i18n-aria-label="nav.primary">
<button class="nav-item" type="button">
<i class="fas fa-folder" aria-hidden="true"></i>
<span data-i18n="nav.files">Files</span>
</div>
<div class="nav-item" id="nav-shared">
<i class="fas fa-oxiexport"></i>
</button>
<button class="nav-item" type="button" id="nav-shared">
<i class="fas fa-oxiexport" aria-hidden="true"></i>
<span data-i18n="nav.shared">Shared</span>
</div>
<div class="nav-item" id="nav-sharedwithme">
<i class="fas fa-oxiimport"></i>
</button>
<button class="nav-item" type="button" id="nav-sharedwithme">
<i class="fas fa-oxiimport" aria-hidden="true"></i>
<span data-i18n="nav.sharedwithme">Shared with me</span>
</div>
<div class="nav-item">
<i class="fas fa-clock"></i>
</button>
<button class="nav-item" type="button">
<i class="fas fa-clock" aria-hidden="true"></i>
<span data-i18n="nav.recent">Recent</span>
</div>
<div class="nav-item">
<i class="fas fa-star"></i>
</button>
<button class="nav-item" type="button">
<i class="fas fa-star" aria-hidden="true"></i>
<span data-i18n="nav.favorites">Favorites</span>
</div>
<div class="nav-item" id="nav-photos">
<i class="fas fa-images"></i>
</button>
<button class="nav-item" type="button" id="nav-photos">
<i class="fas fa-images" aria-hidden="true"></i>
<span data-i18n="nav.photos">Photos</span>
</div>
<div class="nav-item" id="nav-music">
<i class="fas fa-music"></i>
</button>
<button class="nav-item" type="button" id="nav-music">
<i class="fas fa-music" aria-hidden="true"></i>
<span data-i18n="nav.music">Music</span>
</div>
<div class="nav-item">
<i class="fas fa-trash"></i>
</button>
<button class="nav-item" type="button">
<i class="fas fa-trash" aria-hidden="true"></i>
<span data-i18n="nav.trash">Trash</span>
</div>
</div>
</button>
</nav>
<div class="storage-container">
<div class="storage-title"><i class="fas fa-database"></i> <span data-i18n="storage.title">Storage</span></div>
@@ -125,7 +142,7 @@
<!-- Top Bar -->
<div class="top-bar">
<!-- Mobile menu toggle -->
<button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle navigation menu">
<button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle navigation menu" aria-controls="sidebar" aria-expanded="false">
<i class="fas fa-bars"></i>
</button>
<!-- Mobile search icon (replaces full bar on small screens) -->
@@ -152,8 +169,8 @@
<div class="user-controls">
<!-- Notification Bell -->
<div class="notif-wrapper" id="notif-wrapper">
<button class="notif-bell-btn" id="notif-bell-btn" title="Notifications">
<i class="fas fa-bell"></i>
<button class="notif-bell-btn" id="notif-bell-btn" title="Notifications" aria-label="Notifications" data-i18n-aria-label="notifications.title" aria-haspopup="true">
<i class="fas fa-bell" aria-hidden="true"></i>
<span class="notif-badge hidden" id="notif-badge">0</span>
</button>
<div class="notif-panel" id="notif-panel">
@@ -173,7 +190,7 @@
</div>
<div class="user-menu-wrapper" id="user-menu-wrapper">
<button class="user-avatar-btn" id="user-avatar-btn">
<button class="user-avatar-btn" id="user-avatar-btn" aria-label="User menu" aria-haspopup="true">
<!-- avatar-only userVignette mounted here by updateUserMenuData() -->
</button>
<div class="user-menu" id="user-menu">
@@ -209,7 +226,7 @@
<div class="user-menu-divider hidden" id="user-menu-admin-divider"></div>
<div id="language-selector"></div>
<div class="user-menu-item user-menu-item--theme">
<i class="fas fa-moon"></i>
<i class="fas fa-adjust" aria-hidden="true"></i>
<span data-i18n="user_menu.appearance">Appearance</span>
<div class="theme-segmented" id="user-menu-theme-segmented" role="radiogroup" data-i18n-aria-label="user_menu.appearance" aria-label="Appearance">
<button type="button" class="theme-segmented__opt" data-mode="light"
@@ -246,7 +263,7 @@
</div>
</div>
<div class="content-area">
<div class="content-area" role="main" id="main">
<h1 class="page-title" data-i18n="nav.files">Files</h1>
<div class="page-sticky-header" id="page-sticky-header">
@@ -284,14 +301,14 @@
<!-- Input Modal (for New Folder, Rename, etc.) -->
<div id="input-modal" class="modal-overlay hidden">
<div class="modal-container">
<div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<div class="modal-header">
<div class="modal-icon">
<i id="modal-icon" class="fas fa-folder-plus"></i>
</div>
<h3 id="modal-title" data-i18n="dialogs.new_folder_title">New folder</h3>
<button class="modal-close-btn" id="modal-close-btn">
<i class="fas fa-times"></i>
<h2 id="modal-title" data-i18n="dialogs.new_folder_title">New folder</h2>
<button class="modal-close-btn" id="modal-close-btn" aria-label="Close" data-i18n-aria-label="actions.close">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="modal-body">
@@ -308,11 +325,11 @@
<!-- About Modal -->
<div class="about-modal-overlay hidden" id="about-modal-overlay">
<div class="about-modal">
<div class="about-modal" role="dialog" aria-modal="true" aria-labelledby="about-modal-title">
<div class="about-modal-logo">
<i class="fas fa-cloud"></i>
<svg viewBox="120 120 280 280"><path d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z"/></svg>
</div>
<h2>OxiCloud</h2>
<h2 id="about-modal-title">OxiCloud</h2>
<div class="about-version" id="about-version">v...</div>
<div class="about-description" data-i18n="user_menu.about_description">
Cloud storage platform built with Rust &amp; Clean Architecture. Fast, secure, and private.
@@ -337,8 +354,5 @@
<div id="debug"></div>
<!-- Upload Progress Toast (hidden – driven by notification bell) -->
<div class="upload-toast hidden" id="upload-toast"></div>
</body>
</html>
static/js/app/commandPalette.js
+177
View File
@@ -0,0 +1,177 @@
// Global command palette (Cmd / Ctrl + K).
//
// Lists navigation targets and key actions; running one *clicks the existing
// control* (nav button, menu item, file input) so the palette can never drift
// from the real behaviour. Filtering is a simple case-insensitive substring
// match; keyboard: ↑/↓ to move, Enter to run, Esc to close.
import { i18n } from '../core/i18n.js';
/** @typedef {{ label: string, icon: string, run: () => void }} Command */
const state = {
/** @type {HTMLElement | null} */ overlay: null,
/** @type {HTMLInputElement | null} */ input: null,
/** @type {HTMLElement | null} */ list: null,
/** @type {Command[]} */ items: [],
/** @type {Command[]} */ filtered: [],
index: 0,
/** @type {HTMLElement | null} */ prevFocus: null
};
/** Click an element by selector (no-op if absent). */
function click(selector) {
/** @type {HTMLElement | null} */ (document.querySelector(selector))?.click();
}
/** Activate the sidebar nav button whose label key matches `nav.<section>`. */
function navTo(section) {
document.querySelectorAll('.nav-item').forEach((it) => {
const key = it.querySelector('span[data-i18n]')?.getAttribute('data-i18n');
if (key === `nav.${section}`) /** @type {HTMLElement} */ (it).click();
});
}
/** @returns {Command[]} */
function buildCommands() {
/** @type {Command[]} */
const cmds = [
{ label: i18n.t('nav.files'), icon: 'fa-folder', run: () => navTo('files') },
{ label: i18n.t('nav.shared'), icon: 'fa-oxiexport', run: () => navTo('shared') },
{ label: i18n.t('nav.sharedwithme'), icon: 'fa-oxiimport', run: () => navTo('sharedwithme') },
{ label: i18n.t('nav.recent'), icon: 'fa-clock', run: () => navTo('recent') },
{ label: i18n.t('nav.favorites'), icon: 'fa-star', run: () => navTo('favorites') },
{ label: i18n.t('nav.photos'), icon: 'fa-images', run: () => navTo('photos') },
{ label: i18n.t('nav.music'), icon: 'fa-music', run: () => navTo('music') },
{ label: i18n.t('nav.trash'), icon: 'fa-trash', run: () => navTo('trash') },
{ label: i18n.t('actions.upload_files'), icon: 'fa-cloud-upload-alt', run: () => click('#file-input') },
{ label: i18n.t('user_menu.profile'), icon: 'fa-user-circle', run: () => click('#user-menu-profile') },
{ label: i18n.t('user_menu.about'), icon: 'fa-info-circle', run: () => click('#user-menu-about') },
{ label: i18n.t('actions.logout'), icon: 'fa-sign-out-alt', run: () => click('#user-menu-logout') }
];
const adminBtn = document.getElementById('user-menu-admin');
if (adminBtn && !adminBtn.classList.contains('hidden')) {
cmds.splice(8, 0, {
label: i18n.t('user_menu.admin_panel'),
icon: 'fa-cogs',
run: () => click('#user-menu-admin')
});
}
return cmds;
}
function render() {
if (!state.list) return;
if (!state.filtered.length) {
state.list.innerHTML = `<li class="cmdk-empty">${i18n.t('cmdk.no_results', 'No matching commands')}</li>`;
return;
}
state.list.innerHTML = state.filtered
.map(
(cmd, i) => `
<li class="cmdk-item${i === state.index ? ' is-active' : ''}" role="option" aria-selected="${i === state.index}" data-i="${i}">
<i class="fas ${cmd.icon}" aria-hidden="true"></i>
<span>${cmd.label}</span>
</li>`
)
.join('');
}
function filter(query) {
const q = query.trim().toLowerCase();
state.filtered = q ? state.items.filter((c) => c.label.toLowerCase().includes(q)) : state.items.slice();
state.index = 0;
render();
}
function move(delta) {
if (!state.filtered.length) return;
state.index = (state.index + delta + state.filtered.length) % state.filtered.length;
render();
state.list?.querySelector('.is-active')?.scrollIntoView({ block: 'nearest' });
}
function runActive() {
const cmd = state.filtered[state.index];
close();
cmd?.run();
}
/** @param {KeyboardEvent} e */
function onKeydown(e) {
if (e.key === 'Escape') {
e.preventDefault();
close();
} else if (e.key === 'ArrowDown') {
e.preventDefault();
move(1);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
move(-1);
} else if (e.key === 'Enter') {
e.preventDefault();
runActive();
}
}
function ensureOverlay() {
if (state.overlay) return;
const overlay = document.createElement('div');
overlay.className = 'cmdk-overlay hidden';
overlay.setAttribute('role', 'dialog');
overlay.setAttribute('aria-modal', 'true');
overlay.setAttribute('aria-label', i18n.t('cmdk.title', 'Command palette'));
overlay.innerHTML = `
<div class="cmdk-panel">
<div class="cmdk-search">
<i class="fas fa-search" aria-hidden="true"></i>
<input type="text" class="cmdk-input" autocomplete="off" spellcheck="false" aria-label="${i18n.t('cmdk.title', 'Command palette')}">
</div>
<ul class="cmdk-list" role="listbox"></ul>
</div>`;
document.body.appendChild(overlay);
state.overlay = overlay;
state.input = /** @type {HTMLInputElement} */ (overlay.querySelector('.cmdk-input'));
state.list = /** @type {HTMLElement} */ (overlay.querySelector('.cmdk-list'));
state.input.placeholder = i18n.t('cmdk.placeholder', 'Type a command…');
overlay.addEventListener('click', (e) => {
if (e.target === overlay) close();
});
overlay.addEventListener('keydown', onKeydown);
state.input.addEventListener('input', () => filter(state.input?.value ?? ''));
state.list.addEventListener('click', (e) => {
const li = /** @type {HTMLElement} */ (e.target).closest('.cmdk-item');
if (li instanceof HTMLElement) {
state.index = Number(li.dataset.i);
runActive();
}
});
}
function open() {
ensureOverlay();
state.prevFocus = /** @type {HTMLElement | null} */ (document.activeElement);
state.items = buildCommands();
if (state.input) state.input.value = '';
filter('');
state.overlay?.classList.remove('hidden');
requestAnimationFrame(() => state.overlay?.classList.add('active'));
state.input?.focus();
}
function close() {
if (!state.overlay) return;
state.overlay.classList.remove('active');
state.overlay.classList.add('hidden');
state.prevFocus?.focus?.();
state.prevFocus = null;
}
// Global shortcut: Cmd/Ctrl + K toggles the palette.
document.addEventListener('keydown', (e) => {
if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
e.preventDefault();
if (state.overlay && !state.overlay.classList.contains('hidden')) close();
else open();
}
});
static/js/app/filesView.js
+60 -9
View File
@@ -153,6 +153,21 @@ let _groupBy = '';
/** Whether the current sort order is reversed. */
let _reversed = false;
/**
* Flat column sort set by clicking a list-view header. When non-empty it
* overrides the group-by's `orderBy` and forces `_groupBy = ''`, so the list
* is a flat sort (no swimlanes) — the Drive/Finder column-sort behaviour.
* '' = follow the active group-by.
* @type {string}
*/
let _sortField = '';
/** The order field the server is currently sorting by (group-by or flat). */
function _currentOrderBy() {
if (_sortField) return _sortField;
return GROUP_BY_DEFS.find((d) => d.key === _groupBy)?.orderBy ?? 'name';
}
// ── Group-by controller (public API, consumed by navigation.js / main.js) ───
/**
@@ -177,8 +192,11 @@ const filesView = {
* @param {string} key '' | 'type' | 'modifiedAt' | 'createdAt' | 'size'
*/
setGroupBy(key) {
if (_groupBy === key) return;
// Re-pick the same group while a flat column-sort is active → still
// exit flat-sort and return to grouping, so don't early-return then.
if (_groupBy === key && !_sortField) return;
_groupBy = key;
_sortField = ''; // grouping takes over → follow the group's order field
viewPrefs.save('files', _groupBy, _reversed, viewPrefs.load('files').view);
_nextCursor = null;
_component?.clear();
@@ -197,6 +215,29 @@ const filesView = {
_nextCursor = null;
_component?.clear();
_loadPage({ isFirstPage: true });
},
/**
* Flat-sort the list by a column field (clicking a list-view header).
* Drops any grouping (no swimlanes); re-picking the active field flips the
* direction. Synchronous state update — read `currentSort` right after to
* refresh the header arrow, the async reload follows.
* @param {string} field 'name' | 'type' | 'size' | 'modified_at'
*/
setSortField(field) {
const sameField = _currentOrderBy() === field;
_reversed = sameField ? !_reversed : false;
_sortField = field;
_groupBy = '';
viewPrefs.save('files', _groupBy, _reversed, viewPrefs.load('files').view);
_nextCursor = null;
_component?.clear();
_loadPage({ isFirstPage: true });
},
/** Current effective sort `{ field, reversed }` — for the column-header arrows. */
get currentSort() {
return { field: _currentOrderBy(), reversed: _reversed };
}
};
@@ -315,7 +356,9 @@ async function _loadPage({ isFirstPage = false } = {}) {
try {
const def = GROUP_BY_DEFS.find((d) => d.key === _groupBy);
const orderBy = def?.orderBy ?? 'name';
// Flat column-sort (`_sortField`) overrides the group's order field. When
// it's set, `_groupBy` is '' so `def` has no keyFn → a flat list.
const orderBy = _currentOrderBy();
const { items, nextCursor } = await fetchResourcesPage(app.currentPath, {
cursor: _nextCursor,
@@ -334,6 +377,10 @@ async function _loadPage({ isFirstPage = false } = {}) {
if (isFirstPage) {
_component?.render(items, def?.keyFn, def?.labelFn);
// Keep the list-view column-header arrow in sync however the sort
// changed — header click, toolbar group-by, or direction toggle.
// No-op in grid view (no sortable headers present).
ui.updateListHeaderSort?.();
} else {
_component?.append(items, def?.keyFn, def?.labelFn);
}
@@ -399,14 +446,18 @@ async function loadFiles(options = { insertHistory: true }) {
_groupBy = _savedPrefs.groupBy;
_reversed = _savedPrefs.reversed;
// Delay spinner so fast loads avoid the flash
// Delay the loading skeleton so fast loads avoid a flash of placeholders.
// Skeleton cards/rows hold the layout (no empty-list flash) and mirror the
// current view; reduced-motion is honoured via the global guard.
const spinnerTimeout = setTimeout(() => {
ui.showError(`
<div class="files-loading-spinner">
<div class="spinner"></div>
<span>${i18n.t('files.loading')}</span>
</div>
`);
const isList = app.currentView === 'list';
const cell = isList
? '<div class="skeleton-row"><div class="skeleton skeleton-icon"></div><div class="skeleton skeleton-line skeleton-line--medium"></div><div class="skeleton skeleton-line skeleton-line--short"></div></div>'
: '<div class="skeleton-card"><div class="skeleton skeleton-thumb"></div><div class="skeleton skeleton-line skeleton-line--medium"></div><div class="skeleton skeleton-line skeleton-line--short"></div></div>';
const wrapper = isList ? 'files-skeleton' : 'files-grid-view files-skeleton';
ui.showError(
`<div class="${wrapper}" role="status" aria-busy="true" aria-label="${i18n.t('files.loading')}">${cell.repeat(8)}</div>`
);
}, 100);
// A temporary guard: _loadPage sets _loading itself, but we need to
static/js/app/main.js
+1 -1
View File
@@ -371,7 +371,7 @@ function setupActionsBarDelegation() {
if (recent) {
await recent.clearRecentFiles();
await recentView.init();
ui.showNotification('Cleanup completed', 'Recent files history has been cleared');
ui.showNotification(i18n.t('notif.cleanupCompleted'), i18n.t('notif.cleanupCompletedBody'));
}
break;
default:
static/js/app/navigation.js
+34 -1
View File
@@ -73,16 +73,25 @@ function initSidebarToggle() {
if (!sidebarToggle || !sidebar || !sidebarOverlay) return;
/** @type {HTMLElement | null} */
let drawerPrevFocus = null;
function openSidebar() {
drawerPrevFocus = /** @type {HTMLElement | null} */ (document.activeElement);
sidebar?.classList.add('open');
sidebarOverlay?.classList.add('active');
document.body.style.overflow = 'hidden';
sidebarToggle?.setAttribute('aria-expanded', 'true');
/** @type {HTMLElement | null} */ (sidebar?.querySelector('.nav-item'))?.focus();
}
function closeSidebar() {
sidebar?.classList.remove('open');
sidebarOverlay?.classList.remove('active');
document.body.style.overflow = '';
sidebarToggle?.setAttribute('aria-expanded', 'false');
drawerPrevFocus?.focus?.();
drawerPrevFocus = null;
}
function toggleSidebar() {
@@ -99,6 +108,24 @@ function initSidebarToggle() {
// Close sidebar when clicking overlay
sidebarOverlay.addEventListener('click', closeSidebar);
// Trap Tab focus inside the open drawer (mobile).
sidebar.addEventListener('keydown', (e) => {
if (e.key !== 'Tab' || !sidebar.classList.contains('open')) return;
const f = /** @type {NodeListOf<HTMLElement>} */ (
sidebar.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')
);
if (!f.length) return;
const first = f[0];
const last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault();
first.focus();
}
});
// Close sidebar on escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && sidebar.classList.contains('open')) {
@@ -155,7 +182,13 @@ function setCurrentSection(section) {
// Update nav item active classes by finding matching item from DOM
appElements.navItems?.forEach((item) => {
const itemSection = getSectionFromNavItem(item);
item.classList.toggle('active', itemSection === section);
const isActive = itemSection === section;
item.classList.toggle('active', isActive);
if (isActive) {
item.setAttribute('aria-current', 'page');
} else {
item.removeAttribute('aria-current');
}
});
// Update page title
static/js/app/searchView.js
+2 -1
View File
@@ -2,6 +2,7 @@
* Search view orchestration logic
*/
import { i18n } from '../core/i18n.js';
import { search } from '../features/files/search.js';
import { resolveHomeFolder } from './authSession.js';
import { app } from './state.js';
@@ -50,7 +51,7 @@ async function performSearch(query, sortBy) {
search.displaySearchResults(searchResults);
} catch (error) {
console.error('Search error:', error);
ui.showNotification('Error', 'Error performing search');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.searchError'));
}
}
static/js/app/ui.js
+62 -7
View File
@@ -16,7 +16,7 @@ import { wopiEditor } from '../features/files/wopiEditor.js';
import { recent } from '../features/library/recent.js';
import { buildBatchDownloadUrl } from '../utils/download.js';
import { positionMenu } from '../utils/menuPosition.js';
import { loadFiles } from './filesView.js';
import { loadFiles, filesView } from './filesView.js';
import { updateHistory } from './main.js';
import { activateFilesUI, switchToFilesSection, syncViewContainers } from './navigation.js';
import { app } from './state.js';
@@ -497,10 +497,14 @@ const ui = {
separator.textContent = '>';
breadcrumb?.appendChild(separator);
// Segment item
// Segment item. The home folder's raw name ("My Folder - admin")
// is a technical default — show the friendly "Files" label for it
// (the real name stays as the tooltip).
const item = document.createElement('span');
item.className = 'breadcrumb-item';
item.textContent = segment.name;
const isHomeFolder = app.userHomeFolderId && segment.id === app.userHomeFolderId;
item.textContent = isHomeFolder ? i18n.t('nav.files') : segment.name;
if (isHomeFolder) item.title = segment.name;
item.dataset.folderId = segment.id;
if (!isLast) {
@@ -1007,29 +1011,80 @@ const ui = {
// Let ui.js delegation handle this container again
delete filesList.dataset.managedBy;
// A clickable, flat-sorting column header (Drive-style). The arrow is
// shown only on the active column; direction toggles on re-click.
const sortCol = (field, key, label) =>
`<button type="button" class="list-header-sort" data-sort-field="${field}">` +
`<span data-i18n="${key}">${label}</span>` +
`<i class="fas fa-arrow-up list-header-sort__arrow hidden" aria-hidden="true"></i></button>`;
filesList.innerHTML = `
<div class="list-header">
<div class="list-header-checkbox"><input type="checkbox" id="select-all-checkbox" title="Select all"></div>
<div data-i18n="files.name">Name</div>
${sortCol('name', 'files.name', 'Name')}
<div class="owner-cell${this._ownerVisible ? '' : ' hidden'}" data-i18n="files.owner">Owner</div>
<div data-i18n="files.type">Type</div>
<div data-i18n="files.size">Size</div>
<div data-i18n="files.modified">Modified</div>
${sortCol('type', 'files.type', 'Type')}
${sortCol('size', 'files.size', 'Size')}
${sortCol('modified_at', 'files.modified', 'Modified')}
<div></div><!-- actions -->
</div>`;
i18n.translateElement(filesList);
// Wire column-header sorting; _loadPage doesn't rebuild the header, so
// reflect the new sort in-place after each click.
filesList.querySelectorAll('.list-header-sort').forEach((el) => {
el.addEventListener('click', () => {
filesView.setSortField(/** @type {HTMLElement} */ (el).dataset.sortField || 'name');
this.updateListHeaderSort();
});
});
this.updateListHeaderSort();
filesList.classList.remove('hidden');
filesContainerError?.classList.add('hidden');
},
/**
* Reflect filesView's active sort on the list-view column headers: highlight
* the active column, point its arrow, and describe the state for AT.
* @returns {void}
*/
updateListHeaderSort() {
const { field, reversed } = filesView.currentSort;
document.querySelectorAll('#files-list .list-header-sort').forEach((el) => {
const btn = /** @type {HTMLElement} */ (el);
const active = btn.dataset.sortField === field;
btn.classList.toggle('is-active', active);
const colName = btn.querySelector('span')?.textContent || '';
btn.setAttribute(
'aria-label',
active
? `${colName}: ${reversed ? i18n.t('sort.desc', 'descending') : i18n.t('sort.asc', 'ascending')}`
: colName
);
const arrow = btn.querySelector('.list-header-sort__arrow');
if (arrow) {
arrow.classList.toggle('hidden', !active);
arrow.classList.toggle('fa-arrow-down', active && reversed);
arrow.classList.toggle('fa-arrow-up', !(active && reversed));
}
});
},
showEmptyList() {
this.showError(`
<i class="fas fa-folder-open empty-state-icon"></i>
<p data-i18n="files.no_files"></p>
<p data-i18n="files.empty_hint"></p>
<button type="button" class="btn btn-primary" id="empty-upload-btn">
<i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
<span data-i18n="actions.upload_files">Upload files</span>
</button>
`);
document.getElementById('empty-upload-btn')?.addEventListener('click', () => {
document.getElementById('file-input')?.click();
});
},
/**
static/js/app/uiNotifications.js
+5
View File
@@ -4,6 +4,7 @@
*/
import { notifications } from '../core/notifications.js';
import { announce } from '../core/liveRegion.js';
const uiNotifications = {
/**
@@ -40,6 +41,10 @@ const uiNotifications = {
title: title || '',
text: message || ''
});
// Announce to screen readers — errors interrupt, everything else is polite.
const spoken = [title, message].filter(Boolean).join('. ');
announce(spoken, { assertive: iconClass === 'error' });
return;
}
};
static/js/app/userMenu.js
+8 -2
View File
@@ -2,7 +2,7 @@
* User menu, profile modal and logout logic
*/
import { createUserVignette } from '../components/userVignette.js';
import { createUserVignette, disposeVignette } from '../components/userVignette.js';
import { getCsrfHeaders } from '../core/csrf.js';
import { formatFileSize, formatQuotaSize } from '../core/formatters.js';
import { i18n } from '../core/i18n.js';
@@ -183,11 +183,17 @@ function setupUserMenu() {
function _mountAvatarVignettes(userId) {
const avatarBtn = document.getElementById('user-avatar-btn');
if (avatarBtn) {
avatarBtn.replaceChildren(createUserVignette(userId, 'menu', { showName: false }));
// Dispose the outgoing vignette's tooltip before replacing it, or its
// body-portalled popover orphans (the "email tooltip stays stuck" bug).
disposeVignette(/** @type {HTMLElement | null} */ (avatarBtn.firstElementChild));
// No hover-tooltip on your own avatar — the email is already in the open
// menu header, so it'd be redundant and overlap the notification bell.
avatarBtn.replaceChildren(createUserVignette(userId, 'menu', { showName: false, noTooltip: true }));
}
const menuHeader = document.querySelector('.user-menu-header');
if (menuHeader) {
disposeVignette(/** @type {HTMLElement | null} */ (menuHeader.firstElementChild));
menuHeader.replaceChildren(createUserVignette(userId, 'xl', { showName: true, showEmail: true }));
}
}
static/js/components/modal.js
+39
View File
@@ -48,6 +48,10 @@ const Modal = {
/** @private */
_savedBodyHTML: '',
// Element focused before the modal opened — focus returns here on close.
/** @private @type {HTMLElement|null} */
_previousFocus: null,
/**
* Initialize modal system
*/
@@ -80,6 +84,11 @@ const Modal = {
}
});
// Trap Tab focus within the dialog while it is open.
this.overlay.addEventListener('keydown', (e) => {
if (e.key === 'Tab') this._trapFocus(e);
});
// Clear inline error as soon as the user starts typing
this.input?.addEventListener('input', () => this.clearError());
@@ -227,12 +236,38 @@ const Modal = {
});
},
/**
* Keep Tab focus cycling within the dialog container (focus trap).
* @private
* @param {KeyboardEvent} e
*/
_trapFocus(e) {
const container = this.overlay?.querySelector('.modal-container');
if (!container) return;
const focusables = /** @type {NodeListOf<HTMLElement>} */ (
container.querySelectorAll(
'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
)
);
if (!focusables.length) return;
const first = focusables[0];
const last = focusables[focusables.length - 1];
if (e.shiftKey && document.activeElement === first) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault();
first.focus();
}
},
/**
* Open the modal
*/
open() {
if (!this.overlay) return;
this._previousFocus = /** @type {HTMLElement|null} */ (document.activeElement);
this.confirmBtn.disabled = false;
// Show overlay
@@ -295,6 +330,10 @@ const Modal = {
this._panelMode = false;
this._savedBodyHTML = '';
}
// Return focus to whatever was focused before the modal opened.
this._previousFocus?.focus?.();
this._previousFocus = null;
}, 200);
},
static/js/components/resourceList.js
+45 -5
View File
@@ -18,7 +18,7 @@
// @ts-check
import { escapeHtml, formatDateTime, formatFileSize } from '../core/formatters.js';
import { escapeHtml, formatDateShort, formatDateTime, formatFileSize, formatRelativeTime } from '../core/formatters.js';
import { i18n } from '../core/i18n.js';
import { systemUsers } from '../model/systemUsers.js';
import { buildResourceIcon } from './resourceIcon.js';
@@ -37,6 +37,23 @@ import { createUserVignette } from './userVignette.js';
*/
const JUST_ADDED_KEY = '__oxicloud_just_added__';
/**
* Recency label for a grid card's metadata line: a relative "time ago"
* ("hace 3 días") within the last ~30 days — the dominant retrieval cue under
* a thumbnail — collapsing to a compact absolute date ("13 jun 2026") beyond
* that, so stale files don't read as a vague "hace 8 meses".
* @param {number|string|Date|null|undefined} value Unix seconds, ISO string or Date.
* @returns {string}
*/
function gridMetaDate(value) {
if (!value) return '';
const date =
value instanceof Date ? value : new Date(typeof value === 'number' && value < 1e12 ? value * 1000 : value);
if (Number.isNaN(date.getTime())) return '';
const ageDays = (Date.now() - date.getTime()) / 86_400_000;
return ageDays > 30 ? formatDateShort(value) : formatRelativeTime(value);
}
/**
* @typedef {Object} CustomAction
* @property {string} iconHtml - Inner HTML for the button icon (e.g. `<i class="fas fa-undo"></i>`).
@@ -681,16 +698,24 @@ export class ResourceListComponent {
const isFav = cfg.isFavorite ? cfg.isFavorite(folder.id, 'folder') : false;
const isShared = cfg.isShared ? cfg.isShared(folder.id, 'folder') : false;
const dateVal = /** @type {Record<string,string>} */ (/** @type {unknown} */ (folder))[cfg.dateField] ?? folder.modified_at;
const formattedDate = cfg.dateFormatter ? cfg.dateFormatter(dateVal) : formatDateTime(new Date(dateVal));
// Pass the raw value (Unix seconds) straight to formatDateTime — it does
// the seconds→ms conversion. Wrapping it in new Date() first treated the
// seconds value as milliseconds → every date showed as Jan 1970.
const formattedDate = cfg.dateFormatter ? cfg.dateFormatter(dateVal) : formatDateTime(dateVal);
const relDate = gridMetaDate(dateVal);
el.innerHTML = `
${cfg.selectable ? '<div class="checkbox-cell"><input type="checkbox" class="item-checkbox"></div>' : ''}
<div class="name-cell">
<div class="resource-icon-slot"></div>
<span>${escapeHtml(folder.name)}</span>
<span title="${escapeHtml(folder.name)}">${escapeHtml(folder.name)}</span>
${cfg.showFavorite ? `<div class="file-badge file-badge-favorite${isFav ? '' : ' hidden'}"><i class="fas fa-star favorite-star-inline"></i></div>` : ''}
${cfg.showShareBadge ? `<div class="file-badge file-badge-shared${isShared ? '' : ' hidden'}"><i class="fas fa-oxiexport"></i></div>` : ''}
</div>
<div class="grid-meta" title="${escapeHtml(formattedDate)}">
<span class="grid-meta__date">${escapeHtml(relDate)}</span>
${isShared && folder.owner_id ? `<span class="grid-meta__owner-slot" data-owner-id="${escapeHtml(folder.owner_id)}"></span>` : ''}
</div>
<div class="owner-cell${this._ownerVisible ? '' : ' hidden'}" data-owner-id="${escapeHtml(folder.owner_id || '')}"></div>
${cfg.showPath ? `<div class="path-cell" title="${escapeHtml(folder.path || '')}">${escapeHtml(folder.path || '')}</div>` : ''}
${cfg.showType ? `<div class="type-cell">${labels.folderTypeLabel}</div>` : ''}
@@ -704,6 +729,9 @@ export class ResourceListComponent {
`;
el.querySelector('.resource-icon-slot')?.replaceWith(buildResourceIcon(folder, 'folder'));
if (isShared && folder.owner_id) {
el.querySelector('.grid-meta__owner-slot')?.replaceWith(createUserVignette(folder.owner_id, 'xs', { showName: false }));
}
return el;
}
@@ -718,7 +746,11 @@ export class ResourceListComponent {
const typeLabel = labels.fileTypeLabel(file.category || '');
const fileSize = file.size_formatted || formatFileSize(file.size);
const dateVal = /** @type {Record<string,string>} */ (/** @type {unknown} */ (file))[cfg.dateField] ?? file.modified_at;
const formattedDate = cfg.dateFormatter ? cfg.dateFormatter(dateVal) : formatDateTime(new Date(dateVal));
// Pass the raw value (Unix seconds) straight to formatDateTime — it does
// the seconds→ms conversion. Wrapping it in new Date() first treated the
// seconds value as milliseconds → every date showed as Jan 1970.
const formattedDate = cfg.dateFormatter ? cfg.dateFormatter(dateVal) : formatDateTime(dateVal);
const relDate = gridMetaDate(dateVal);
const isFav = cfg.isFavorite ? cfg.isFavorite(file.id, 'file') : false;
const isShared = cfg.isShared ? cfg.isShared(file.id, 'file') : false;
@@ -736,11 +768,16 @@ export class ResourceListComponent {
${cfg.selectable ? '<div class="checkbox-cell"><input type="checkbox" class="item-checkbox"></div>' : ''}
<div class="name-cell">
<div class="resource-icon-slot"></div>
<span>${escapeHtml(file.name)}</span>
<span title="${escapeHtml(file.name)}">${escapeHtml(file.name)}</span>
${cfg.showFavorite ? `<div class="file-badge file-badge-favorite${isFav ? '' : ' hidden'}"><i class="fas fa-star favorite-star-inline"></i></div>` : ''}
${cfg.showShareBadge ? `<div class="file-badge file-badge-shared${isShared ? '' : ' hidden'}"><i class="fas fa-oxiexport"></i></div>` : ''}
${file.snippet ? `<span class="file-item__snippet" title="${escapeHtml(file.snippet)}">${escapeHtml(file.snippet)}</span>` : ''}
</div>
<div class="grid-meta" title="${escapeHtml(formattedDate)}">
<span class="grid-meta__date">${escapeHtml(relDate)}</span>
<span class="grid-meta__size">${escapeHtml(fileSize)}</span>
${isShared && file.owner_id ? `<span class="grid-meta__owner-slot" data-owner-id="${escapeHtml(file.owner_id)}"></span>` : ''}
</div>
<div class="owner-cell${this._ownerVisible ? '' : ' hidden'}" data-owner-id="${escapeHtml(file.owner_id || '')}"></div>
${cfg.showPath ? `<div class="path-cell" title="${escapeHtml(file.path || '')}">${escapeHtml(file.path || '')}</div>` : ''}
${cfg.showType ? `<div class="type-cell">${typeLabel}</div>` : ''}
@@ -754,6 +791,9 @@ export class ResourceListComponent {
`;
el.querySelector('.resource-icon-slot')?.replaceWith(buildResourceIcon(file, 'file'));
if (isShared && file.owner_id) {
el.querySelector('.grid-meta__owner-slot')?.replaceWith(createUserVignette(file.owner_id, 'xs', { showName: false }));
}
return el;
}
static/js/components/userVignette.js
+29 -3
View File
@@ -91,6 +91,10 @@ function _applyPhoto(avatar, photoUrl, name) {
* When true (and showName is true), the primary email address is shown below
* the name in a lighter style. Name and email are wrapped in a
* `.user-vignette__info` column. Has no effect when showName is false.
* @property {boolean} [noTooltip=false]
* When true, skip the email hover-tooltip. Use for the user's own avatar in
* the toolbar — the email is already shown in the open menu header, so the
* tooltip is redundant (and would overlap the bell).
* @property {boolean} [showOrigin=true]
* When true (the default), an `is_external` badge overlays the
* bottom-right of the avatar for external users only — internal
@@ -108,7 +112,14 @@ function _applyPhoto(avatar, photoUrl, name) {
* @param {VignetteOptions} [options]
* @returns {HTMLElement}
*/
export function createUserVignette(userId, size = 'sm', { showName = true, showEmail = false, showOrigin = true } = {}) {
// Tracks the hover-tooltip cleanup for each vignette so a caller that
// re-renders the vignette (e.g. replaceChildren on a storage update) can
// dispose the previous tooltip — otherwise its body-portalled popover orphans
// and, if it was visible at re-render time, stays stuck on screen.
/** @type {WeakMap<HTMLElement, () => void>} */
const _tooltipCleanups = new WeakMap();
export function createUserVignette(userId, size = 'sm', { showName = true, showEmail = false, showOrigin = true, noTooltip = false } = {}) {
const colorIdx = _colorIndex(userId);
const wrapper = /** @type {HTMLElement} */ (document.createElement('span'));
@@ -182,9 +193,9 @@ export function createUserVignette(userId, size = 'sm', { showName = true, showE
// than the native `title` attribute's ~500–1500 ms wait).
// `aria-label` is set in parallel so screen readers still get
// the email — popover content is mouse/keyboard-hover only.
if (email && !showEmail) {
if (email && !showEmail && !noTooltip) {
wrapper.setAttribute('aria-label', email);
attachTooltip(wrapper, email);
_tooltipCleanups.set(wrapper, attachTooltip(wrapper, email));
}
if (photo) {
_applyPhoto(avatar, photo, name);
@@ -214,3 +225,18 @@ export function createUserVignette(userId, size = 'sm', { showName = true, showE
return wrapper;
}
/**
* Dispose a vignette before discarding it: tears down its hover-tooltip and
* removes the body-portalled popover so nothing orphans on re-render.
* Safe to call on any element (no-op if it has no tracked tooltip).
* @param {HTMLElement | null} el
*/
export function disposeVignette(el) {
if (!el) return;
const cleanup = _tooltipCleanups.get(el);
if (cleanup) {
cleanup();
_tooltipCleanups.delete(el);
}
}
static/js/core/errorBoundary.js
+39
View File
@@ -0,0 +1,39 @@
// Global error boundary.
//
// Surfaces uncaught errors and unhandled promise rejections as a terse,
// throttled toast instead of failing silently — the full detail always goes to
// the console. Intentionally dependency-free so an error handler can never
// itself fail to load.
let lastShown = 0;
/** @param {string} message */
function showToast(message) {
const now = Date.now();
if (now - lastShown < 4000) return; // throttle bursts of related errors
lastShown = now;
const el = document.createElement('div');
el.className = 'error-toast';
el.setAttribute('role', 'alert');
el.textContent = message;
document.body.appendChild(el);
requestAnimationFrame(() => el.classList.add('is-visible'));
setTimeout(() => {
el.classList.remove('is-visible');
setTimeout(() => el.remove(), 300);
}, 5000);
}
const GENERIC = 'Something went wrong. Please try again.';
window.addEventListener('error', (event) => {
console.error('[error-boundary]', event.error || event.message);
showToast(GENERIC);
});
window.addEventListener('unhandledrejection', (event) => {
console.error('[error-boundary] unhandled rejection:', event.reason);
showToast(GENERIC);
});
static/js/core/formatters.js
+39 -3
View File
@@ -27,8 +27,11 @@ function formatFileSize(bytes) {
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
const num = new Intl.NumberFormat(i18n.getCurrentLocale(), { maximumFractionDigits: 2 }).format(
bytes / k ** i
);
return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
return `${num} ${sizes[i]}`;
}
/// Formats a byte count for quota display. When bytes is 0, returns "∞" (unlimited).
@@ -58,7 +61,8 @@ function formatDateTime(value) {
dateValue = new Date(value);
}
if (Number.isNaN(dateValue.getTime())) return String(value);
return `${dateValue.toLocaleDateString()} ${dateValue.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
const loc = i18n.getCurrentLocale();
return `${dateValue.toLocaleDateString(loc)} ${dateValue.toLocaleTimeString(loc, { hour: '2-digit', minute: '2-digit' })}`;
}
/**
@@ -70,13 +74,44 @@ function formatDateShort(value) {
if (!value) return 'N/A';
const dateValue = typeof value === 'number' ? new Date(value * 1000) : new Date(value);
if (Number.isNaN(dateValue.getTime())) return String(value);
return dateValue.toLocaleDateString(undefined, {
return dateValue.toLocaleDateString(i18n.getCurrentLocale(), {
year: 'numeric',
month: 'short',
day: 'numeric'
});
}
/**
* Locale-aware "time ago" via Intl.RelativeTimeFormat (replaces the per-view
* hand-rolled timeAgo helpers).
* @param {Date | number | string | null} value
* @returns {string}
*/
function formatRelativeTime(value) {
if (!value) return '';
const date =
value instanceof Date
? value
: new Date(typeof value === 'number' && value < 1e12 ? value * 1000 : value);
if (Number.isNaN(date.getTime())) return String(value);
const diffSec = Math.round((date.getTime() - Date.now()) / 1000);
const abs = Math.abs(diffSec);
const rtf = new Intl.RelativeTimeFormat(i18n.getCurrentLocale(), { numeric: 'auto' });
/** @type {Array<[Intl.RelativeTimeFormatUnit, number]>} */
const units = [
['year', 31536000],
['month', 2592000],
['week', 604800],
['day', 86400],
['hour', 3600],
['minute', 60]
];
for (const [unit, secs] of units) {
if (abs >= secs) return rtf.format(Math.round(diffSec / secs), unit);
}
return rtf.format(diffSec, 'second');
}
const TEXT_TYPES = [
'application/json',
'application/xml',
@@ -363,6 +398,7 @@ export {
formatExpiryDate,
formatFileSize,
formatQuotaSize,
formatRelativeTime,
isEmailValid,
isTextViewable,
normalizeDateBucket,
static/js/core/liveRegion.js
+61
View File
@@ -0,0 +1,61 @@
/**
* Global ARIA live region.
*
* Announces transient UI messages (toasts, notifications) to assistive
* technology without any visual footprint. Screen-reader users otherwise
* miss feedback that sighted users see in the notification bell / toasts.
*
* Dependency-free; the region is created lazily on first use so importing
* this module has no DOM side effect until something is actually announced.
*
* @module core/liveRegion
*/
/** @type {HTMLElement | null} */
let politeRegion = null;
/** @type {HTMLElement | null} */
let assertiveRegion = null;
/**
* Find or create the visually-hidden live region for the given urgency.
* @param {boolean} assertive
* @returns {HTMLElement | null}
*/
function ensureRegion(assertive) {
if (!document.body) return null;
if (assertive && assertiveRegion) return assertiveRegion;
if (!assertive && politeRegion) return politeRegion;
const el = document.createElement('div');
el.className = 'sr-only';
el.id = assertive ? 'a11y-live-assertive' : 'a11y-live-polite';
el.setAttribute('aria-live', assertive ? 'assertive' : 'polite');
el.setAttribute('aria-atomic', 'true');
el.setAttribute('role', assertive ? 'alert' : 'status');
document.body.appendChild(el);
if (assertive) assertiveRegion = el;
else politeRegion = el;
return el;
}
/**
* Announce a message to screen readers.
*
* @param {string} message - text to announce (empty/whitespace is ignored)
* @param {{ assertive?: boolean }} [opts] - `assertive: true` interrupts the
* current speech (use for errors); default is polite.
*/
export function announce(message, opts = {}) {
const msg = String(message ?? '').trim();
if (!msg) return;
const region = ensureRegion(Boolean(opts.assertive));
if (!region) return;
// Clear first, then set on the next frame so the DOM mutation is registered
// as a change even when the same message is announced twice in a row.
region.textContent = '';
requestAnimationFrame(() => {
region.textContent = msg;
});
}
static/js/features/auth/auth.js
+125
View File
@@ -705,6 +705,9 @@ async function showInitialPanel() {
showPanel(loginPanel);
hidePanel(registerPanel);
hidePanel(adminSetupPanel);
// Cursor ready on the identifier field (panels start hidden, so a static
// `autofocus` attribute wouldn't fire — focus once the panel is shown).
/** @type {HTMLInputElement | null} */ (document.getElementById('login-username'))?.focus();
// Hide the admin setup link if admin already exists
const showAdminSetupLink = document.getElementById('show-admin-setup');
@@ -807,6 +810,7 @@ function initLoginElements() {
showPanel(loginPanel);
hidePanel(registerPanel);
hidePanel(adminSetupPanel);
/** @type {HTMLInputElement | null} */ (document.getElementById('login-username'))?.focus();
});
document.getElementById('show-admin-setup').addEventListener('click', () => {
@@ -821,9 +825,119 @@ function initLoginElements() {
hidePanel(adminSetupPanel);
});
// UX affordances: password reveal, magic-link disclosure, live match feedback,
// Caps-Lock warning on password fields.
initPasswordToggles();
initMagicLinkDisclosure();
initPasswordMatch('register-password', 'register-password-confirm', 'register-match');
initPasswordMatch('admin-password', 'admin-password-confirm', 'admin-match');
['login-password', 'register-password', 'admin-password'].forEach((id) =>
initCapsLockWarning(/** @type {HTMLInputElement | null} */ (document.getElementById(id)))
);
return true;
}
/**
* Wire every password show/hide toggle. Each button sits next to the
* <input> it controls inside an `.auth-input-wrap`.
*/
function initPasswordToggles() {
document.querySelectorAll('[data-pw-toggle]').forEach((btn) => {
const wrap = btn.closest('.auth-input-wrap');
const input = /** @type {HTMLInputElement | null} */ (wrap?.querySelector('input') ?? null);
if (!input) return;
const sync = () => {
const shown = input.type === 'text';
btn.setAttribute('aria-pressed', String(shown));
btn.setAttribute(
'aria-label',
shown ? i18n.t('auth.hidePassword', 'Hide password') : i18n.t('auth.showPassword', 'Show password')
);
};
sync();
btn.addEventListener('click', () => {
input.type = input.type === 'password' ? 'text' : 'password';
sync();
input.focus();
});
});
}
/**
* Show a "Caps Lock is on" hint under a password field while the key is active
* and the field is focused — saves a failed-login round-trip.
* @param {HTMLInputElement | null} input
*/
function initCapsLockWarning(input) {
if (!input) return;
const warn = document.createElement('div');
warn.className = 'auth-caps-warning hidden';
warn.setAttribute('role', 'status');
const icon = document.createElement('i');
icon.className = 'fas fa-arrow-up';
icon.setAttribute('aria-hidden', 'true');
const text = document.createElement('span');
text.textContent = i18n.t('auth.capsLock', 'Caps Lock is on');
warn.append(icon, text);
input.closest('.auth-input-group')?.appendChild(warn);
/** @param {KeyboardEvent} e */
const sync = (e) => {
const on = typeof e.getModifierState === 'function' && e.getModifierState('CapsLock');
warn.classList.toggle('hidden', !(on && document.activeElement === input));
};
input.addEventListener('keydown', sync);
input.addEventListener('keyup', sync);
input.addEventListener('blur', () => warn.classList.add('hidden'));
}
/**
* Progressive disclosure: keep the magic-link form collapsed behind a quiet
* toggle so the login screen leads with a single primary path.
*/
function initMagicLinkDisclosure() {
const toggle = document.getElementById('magic-link-toggle');
const reveal = document.getElementById('magic-link-reveal');
if (!toggle || !reveal) return;
toggle.addEventListener('click', () => {
// classList.toggle returns true when the class is now PRESENT (collapsed).
const open = reveal.classList.toggle('hidden') === false;
toggle.setAttribute('aria-expanded', String(open));
if (open) {
const email = /** @type {HTMLInputElement | null} */ (document.getElementById('magic-link-email'));
email?.focus();
}
});
}
/**
* Live "passwords match" feedback rendered under a confirm field.
* @param {string} passId
* @param {string} confirmId
* @param {string} indicatorId
*/
function initPasswordMatch(passId, confirmId, indicatorId) {
const pass = /** @type {HTMLInputElement | null} */ (document.getElementById(passId));
const confirmEl = /** @type {HTMLInputElement | null} */ (document.getElementById(confirmId));
const out = document.getElementById(indicatorId);
if (!pass || !confirmEl || !out) return;
const update = () => {
if (!confirmEl.value) {
out.className = 'auth-match';
out.textContent = '';
return;
}
const ok = pass.value === confirmEl.value;
out.className = `auth-match show ${ok ? 'auth-match--ok' : 'auth-match--bad'}`;
out.textContent = ok
? i18n.t('auth.passwordsMatch', 'Passwords match')
: i18n.t('auth.passwords_mismatch', "Passwords don't match");
};
pass.addEventListener('input', update);
confirmEl.addEventListener('input', update);
}
// Initialize login elements if on login page
const isLoginPage = initLoginElements();
@@ -993,6 +1107,13 @@ if (isLoginPage && loginForm) {
const username = inputVal('login-username');
const password = inputVal('login-password');
const loginSubmit = /** @type {HTMLButtonElement | null} */ (
document.getElementById('login-submit')
);
loginSubmit?.classList.add('is-loading');
loginSubmit?.setAttribute('aria-busy', 'true');
if (loginSubmit) loginSubmit.disabled = true;
try {
const data = await login(username, password);
@@ -1030,6 +1151,10 @@ if (isLoginPage && loginForm) {
} catch (error) {
loginError.textContent = errMessage(error) || 'Error logging in';
loginError.style.display = 'block';
} finally {
loginSubmit?.classList.remove('is-loading');
loginSubmit?.removeAttribute('aria-busy');
if (loginSubmit) loginSubmit.disabled = false;
}
});
}
static/js/features/files/batchToolbar.js
+10 -10
View File
@@ -202,15 +202,15 @@ const batchToolbar = {
showBatchResult(action, result) {
if (action === 'copy') {
if (result.errors > 0) {
ui.showNotification('Batch copy', `${result.success} copied, ${result.errors} failed`);
ui.showNotification(i18n.t('notif.batchCopy'), i18n.t('notif.batchCopyBody', { success: result.success, errors: result.errors }));
} else {
ui.showNotification('Items copied', `${result.success} item${result.success !== 1 ? 's' : ''} copied successfully`);
ui.showNotification(i18n.t('notif.itemsCopied'), i18n.t('notif.itemsCopiedBody', { count: result.success }));
}
} else {
if (result.errors > 0) {
ui.showNotification('Batch move', `${result.success} moved, ${result.errors} failed`);
ui.showNotification(i18n.t('notif.batchMove'), i18n.t('notif.batchMoveBody', { success: result.success, errors: result.errors }));
} else {
ui.showNotification('Items moved', `${result.success} item${result.success !== 1 ? 's' : ''} moved successfully`);
ui.showNotification(i18n.t('notif.itemsMoved'), i18n.t('notif.itemsMovedBody', { count: result.success }));
}
}
},
@@ -421,13 +421,13 @@ const batchToolbar = {
loadFiles();
if (errors > 0) {
ui.showNotification('Batch delete', `${success} moved to trash, ${errors} failed`);
ui.showNotification(i18n.t('notif.batchDelete'), i18n.t('notif.batchDeleteBody', { success, errors }));
} else {
ui.showNotification('Moved to trash', `${success} item${success !== 1 ? 's' : ''} moved to trash`);
ui.showNotification(i18n.t('notif.movedToTrash'), i18n.t('notif.movedToTrashBody', { count: success }));
}
} catch (e) {
console.error('Batch trash error:', e);
ui.showNotification('Error', 'Could not move items to trash');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.trashItemsError'));
this.clear();
loadFiles();
}
@@ -458,7 +458,7 @@ const batchToolbar = {
const items = this.items;
if (items.length === 0) return;
ui.showNotification('Preparing download', 'Creating ZIP archive...');
ui.showNotification(i18n.t('notif.preparingDownload'), i18n.t('notif.preparingDownloadBody'));
const fileIds = items.filter((i) => i.type === 'file').map((i) => i.id);
const folderIds = items.filter((i) => i.type === 'folder').map((i) => i.id);
@@ -495,7 +495,7 @@ const batchToolbar = {
URL.revokeObjectURL(blobUrl);
} catch (e) {
console.error('Batch download error:', e);
ui.showNotification('Error', 'Could not download selected items');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.downloadItemsError'));
}
},
@@ -539,7 +539,7 @@ const batchToolbar = {
}
} catch (e) {
console.error('Batch favorites error:', e);
ui.showNotification('Error', 'Could not add items to favorites');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.favoritesAddError'));
}
},
static/js/features/files/contextMenus.js
+3 -3
View File
@@ -744,14 +744,14 @@ const contextMenus = {
const shareUrl = app.notificationShareUrl;
if (!email || !shareUrl) {
ui.showNotification('Error', 'Please enter a valid email address');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.invalidEmail'));
return;
}
// Validate email format
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
ui.showNotification('Error', 'Please enter a valid email address');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.invalidEmail'));
return;
}
@@ -760,7 +760,7 @@ const contextMenus = {
document.getElementById('notification-dialog')?.classList.add('hidden');
} catch (error) {
console.error('Error sending notification:', error);
ui.showNotification('Error', 'Could not send notification');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.notificationSendError'));
}
},
static/js/features/files/fileOperations.js
+29 -29
View File
@@ -853,7 +853,7 @@ const fileOps = {
// — no reload needed since the backend already confirmed creation.
filesViewAddItem(folder);
ui.showNotification('Folder created', `"${name}" created successfully`);
ui.showNotification(i18n.t('notif.folderCreated'), i18n.t('notif.folderCreatedBody', { name }));
} else {
const errorText = await response.text();
console.error('Create folder error:', errorText);
@@ -894,7 +894,7 @@ const fileOps = {
if (response.ok) {
// Reload files after moving
await loadFiles();
ui.showNotification('File moved', 'File moved successfully');
ui.showNotification(i18n.t('notif.fileMoved'), i18n.t('notif.fileMovedBody'));
return true;
} else {
let errorMessage = 'Unknown error';
@@ -904,12 +904,12 @@ const fileOps = {
} catch (_e) {
errorMessage = 'Error processing server response';
}
ui.showNotification('Error', `Error moving the file: ${errorMessage}`);
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.fileMoveError', { error: errorMessage }));
return false;
}
} catch (error) {
console.error('Error moving file:', error);
ui.showNotification('Error', 'Error moving the file');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.fileMoveErrorGeneric'));
return false;
}
},
@@ -938,7 +938,7 @@ const fileOps = {
invalidateFolderMeta(folderId);
// Reload files after moving
await loadFiles();
ui.showNotification('Folder moved', 'Folder moved successfully');
ui.showNotification(i18n.t('notif.folderMoved'), i18n.t('notif.folderMovedBody'));
return true;
} else {
let errorMessage = 'Unknown error';
@@ -948,12 +948,12 @@ const fileOps = {
} catch (_e) {
errorMessage = 'Error processing server response';
}
ui.showNotification('Error', `Error moving the folder: ${errorMessage}`);
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.folderMoveError', { error: errorMessage }));
return false;
}
} catch (error) {
console.error('Error moving folder:', error);
ui.showNotification('Error', 'Error moving the folder');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.folderMoveErrorGeneric'));
return false;
}
},
@@ -1037,7 +1037,7 @@ const fileOps = {
await response.json();
// Reload files after copying
await loadFiles();
ui.showNotification('File copied', 'File copied successfully');
ui.showNotification(i18n.t('notif.fileCopied'), i18n.t('notif.fileCopiedBody'));
return true;
} else {
let errorMessage = 'Unknown error';
@@ -1047,12 +1047,12 @@ const fileOps = {
} catch (_e) {
errorMessage = 'Error processing server response';
}
ui.showNotification('Error', `Error copying the file: ${errorMessage}`);
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.fileCopyError', { error: errorMessage }));
return false;
}
} catch (error) {
console.error('Error copying file:', error);
ui.showNotification('Error', 'Error copying the file');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.fileCopyErrorGeneric'));
return false;
}
},
@@ -1195,7 +1195,7 @@ const fileOps = {
if (response.ok) {
// Name changed — drop the cached breadcrumb metadata
invalidateFolderMeta(folderId);
ui.showNotification('Folder renamed', `Folder renamed to "${newName}"`);
ui.showNotification(i18n.t('notif.folderRenamed'), i18n.t('notif.folderRenamedBody', { name: newName }));
} else {
const errorText = await response.text();
console.error('Error response:', errorText);
@@ -1239,7 +1239,7 @@ const fileOps = {
if (response.ok) {
loadFiles();
ui.showNotification('File moved to trash', `"${fileName}" moved to trash`);
ui.showNotification(i18n.t('notif.fileTrashed'), i18n.t('notif.fileTrashedBody', { name: fileName }));
return true;
} else {
// Fallback to direct deletion if trash fails
@@ -1250,16 +1250,16 @@ const fileOps = {
if (fallbackResponse.ok) {
loadFiles();
ui.showNotification('File deleted', `"${fileName}" deleted successfully`);
ui.showNotification(i18n.t('notif.fileDeleted'), i18n.t('notif.fileDeletedBody', { name: fileName }));
return true;
} else {
ui.showNotification('Error', 'Error deleting the file');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.fileDeleteError'));
return false;
}
}
} catch (error) {
console.error('Error deleting file:', error);
ui.showNotification('Error', 'Error deleting the file');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.fileDeleteError'));
return false;
}
},
@@ -1292,7 +1292,7 @@ const fileOps = {
ui.updateBreadcrumb();
}
loadFiles();
ui.showNotification('Folder moved to trash', `"${folderName}" moved to trash`);
ui.showNotification(i18n.t('notif.folderTrashed'), i18n.t('notif.folderTrashedBody', { name: folderName }));
return true;
} else {
// Fallback to direct deletion if trash fails
@@ -1308,16 +1308,16 @@ const fileOps = {
ui.updateBreadcrumb();
}
loadFiles();
ui.showNotification('Folder deleted', `"${folderName}" deleted successfully`);
ui.showNotification(i18n.t('notif.folderDeleted'), i18n.t('notif.folderDeletedBody', { name: folderName }));
return true;
} else {
ui.showNotification('Error', 'Error deleting the folder');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.folderDeleteError'));
return false;
}
}
} catch (error) {
console.error('Error deleting folder:', error);
ui.showNotification('Error', 'Error deleting the folder');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.folderDeleteError'));
return false;
}
},
@@ -1339,15 +1339,15 @@ const fileOps = {
});
if (response.ok) {
ui.showNotification('Item restored', 'Item restored successfully');
ui.showNotification(i18n.t('notif.itemRestored'), i18n.t('notif.itemRestoredBody'));
return true;
} else {
ui.showNotification('Error', 'Error restoring the item');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.itemRestoreError'));
return false;
}
} catch (error) {
console.error('Error restoring item from trash:', error);
ui.showNotification('Error', 'Error restoring the item');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.itemRestoreError'));
return false;
}
},
@@ -1372,15 +1372,15 @@ const fileOps = {
});
if (response.ok) {
ui.showNotification('Item deleted', 'Item permanently deleted');
ui.showNotification(i18n.t('notif.itemDeleted'), i18n.t('notif.itemDeletedBody'));
return true;
} else {
ui.showNotification('Error', 'Error deleting the item');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.itemDeleteError'));
return false;
}
} catch (error) {
console.error('Error deleting item permanently:', error);
ui.showNotification('Error', 'Error deleting the item');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.itemDeleteError'));
return false;
}
},
@@ -1404,15 +1404,15 @@ const fileOps = {
});
if (response.ok) {
ui.showNotification('Trash emptied', 'The trash has been emptied successfully');
ui.showNotification(i18n.t('notif.trashEmptied'), i18n.t('notif.trashEmptiedBody'));
return true;
} else {
ui.showNotification('Error', 'Error emptying the trash');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.trashEmptyError'));
return false;
}
} catch (error) {
console.error('Error emptying trash:', error);
ui.showNotification('Error', 'Error emptying the trash');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.trashEmptyError'));
return false;
}
},
@@ -1435,7 +1435,7 @@ const fileOps = {
async downloadFolder(folderId, folderName) {
// Show notification to user (the server still has to assemble the
// ZIP before the browser's own download UI takes over).
ui.showNotification('Preparing download', 'Preparing the folder for download...');
ui.showNotification(i18n.t('notif.preparingDownload'), i18n.t('notif.preparingDownloadBody'));
triggerBrowserDownload(`/api/folders/${folderId}/download?format=zip`, `${folderName}.zip`);
}
};
static/js/features/files/search.js
+5 -4
View File
@@ -10,6 +10,7 @@
import { loadFiles, renderItems } from '../../app/filesView.js';
import { app } from '../../app/state.js';
import { ui } from '../../app/ui.js';
import { i18n } from '../../core/i18n.js';
import { getAuthHeaders } from './fileOperations.js';
/**
@@ -69,7 +70,7 @@ const search = {
}
} catch (error) {
console.error('Error performing search:', error);
ui.showNotification('Error', 'Error performing search');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.searchError'));
return {
files: [],
folders: [],
@@ -216,15 +217,15 @@ const search = {
});
if (response.ok) {
ui.showNotification('Cache cleared', 'Search cache cleared successfully');
ui.showNotification(i18n.t('notif.cacheCleared'), i18n.t('notif.cacheClearedBody'));
return true;
} else {
ui.showNotification('Error', 'Error clearing search cache');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.cacheClearError'));
return false;
}
} catch (error) {
console.error('Error clearing search cache:', error);
ui.showNotification('Error', 'Error clearing search cache');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.cacheClearError'));
return false;
}
}
static/js/features/files/wopiEditor.js
+2 -1
View File
@@ -7,6 +7,7 @@
import { loadFiles } from '../../app/filesView.js';
import { ui } from '../../app/ui.js';
import { i18n } from '../../core/i18n.js';
class WopiEditor {
constructor() {
@@ -54,7 +55,7 @@ class WopiEditor {
window.open(hostUrl, '_blank');
} catch (error) {
console.error('Failed to open WOPI editor in tab:', error);
ui.showNotification('Could not open the document editor.', 'error');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.wopiOpenError'));
}
}
static/js/features/library/photos.js
+23 -1
View File
@@ -181,6 +181,7 @@ const photosView = {
html += '<div class="photos-sentinel"></div>';
this._container.innerHTML = html;
this._container.onclick = (e) => this._handleClick(e);
this._fadeInTiles();
this._renderedCount = this.items.length;
this._observeSentinel();
this._setupVideoThumbnails();
@@ -237,6 +238,7 @@ const photosView = {
this._renderedCount = this.items.length;
this._observeSentinel();
this._setupVideoThumbnails(startIndex);
this._fadeInTiles();
},
/**
@@ -250,12 +252,32 @@ const photosView = {
const thumbUrl = cachedThumb || `/api/files/${file.id}/thumbnail/preview`;
let h = `<div class="photo-tile${selected}" data-id="${this._escAttr(file.id)}" data-mime="${this._escAttr(file.mime_type)}" data-name="${this._escAttr(file.name)}">`;
h += `<div class="photo-check"><i class="fas fa-check"></i></div>`;
h += `<img src="${thumbUrl}" loading="lazy" alt="${this._escAttr(file.name)}">`;
const srcset = cachedThumb
? ''
: ` srcset="/api/files/${file.id}/thumbnail/icon 150w, /api/files/${file.id}/thumbnail/preview 400w, /api/files/${file.id}/thumbnail/large 800w" sizes="(max-width: 768px) 33vw, 200px"`;
h += `<img src="${thumbUrl}"${srcset} loading="lazy" decoding="async" alt="${this._escAttr(file.name)}">`;
if (isVideo) h += `<div class="video-badge"><i class="fas fa-play"></i></div>`;
h += `</div>`;
return h;
},
/**
* Fade tiles in as their thumbnails finish loading (kills the pop-in).
* Idempotent — only wires images not already marked loaded.
*/
_fadeInTiles() {
this._container?.querySelectorAll('.photo-tile img:not(.is-loaded)').forEach((el) => {
const img = /** @type {HTMLImageElement} */ (el);
if (img.complete) {
img.classList.add('is-loaded');
} else {
const done = () => img.classList.add('is-loaded');
img.addEventListener('load', done, { once: true });
img.addEventListener('error', done, { once: true });
}
});
},
/** (Re-)observe the sentinel element for infinite scroll */
_observeSentinel() {
this._destroyObserver();
static/js/features/library/photosLightbox.js
+14
View File
@@ -157,6 +157,17 @@ export const photosLightbox = {
requestAnimationFrame(() => el.classList.add('active'));
},
/** Preload the immediate prev/next thumbnails so navigation is instant. */
_preloadNeighbors() {
[this.index - 1, this.index + 1].forEach((i) => {
const it = this.items[i];
if (it && !it.mime_type?.startsWith('video/')) {
const pre = new Image();
pre.src = this._thumbUrl(it);
}
});
},
/** Display the current item */
_show() {
if (!this._overlay || this.index < 0) return;
@@ -193,6 +204,9 @@ export const photosLightbox = {
const fullResIcon = fullResBtn.querySelector('i');
if (fullResIcon) fullResIcon.className = 'fas fa-expand';
// Preload neighbours so prev/next is instant.
this._preloadNeighbors();
// Load content
content.innerHTML = '<div class="photos-loading"><i class="fas fa-spinner"></i></div>';
static/js/features/sharing/fileSharing.js
+4 -3
View File
@@ -8,6 +8,7 @@ import { switchToSharedSection } from '../../app/navigation.js';
import { ui } from '../../app/ui.js';
import { getCsrfHeaders } from '../../core/csrf.js';
import { formatDateTime } from '../../core/formatters.js';
import { i18n } from '../../core/i18n.js';
/**
* @import {CreateShare, ShareItem, UpdateShare} from '../../core/types.js'
@@ -169,11 +170,11 @@ const fileSharing = {
async copyLinkToClipboard(url) {
try {
await navigator.clipboard.writeText(url);
ui.showNotification('Link copied', 'Link copied to clipboard');
ui.showNotification(i18n.t('notif.linkCopied'), i18n.t('notif.linkCopiedBody'));
return true;
} catch (error) {
console.error('Error copying to clipboard:', error);
ui.showNotification('Error', 'Could not copy link');
ui.showNotification(i18n.t('notif.errorTitle'), i18n.t('notif.linkCopyError'));
return false;
}
},
@@ -198,7 +199,7 @@ const fileSharing = {
async sendShareNotification(shareUrl, recipientEmail, _message = '') {
// TODO: implement backend endpoint for email notifications
console.log(`Share notification for ${shareUrl} sent to ${recipientEmail}`);
ui.showNotification('Notification sent', `Notification sent to ${recipientEmail}`);
ui.showNotification(i18n.t('notif.notificationSent'), i18n.t('notif.notificationSentBody', { email: recipientEmail }));
return true;
},
static/js/views/admin/admin.js
+2 -9
View File
@@ -1,5 +1,5 @@
import { getCsrfHeaders } from '../../core/csrf.js';
import { escapeHtml } from '../../core/formatters.js';
import { escapeHtml, formatRelativeTime } from '../../core/formatters.js';
import { i18n } from '../../core/i18n.js';
import { oxiIconsInit } from '../../core/icons.js';
@@ -63,14 +63,7 @@ function formatBytes(bytes) {
/** @param {string|null} dateStr */
function timeAgo(dateStr) {
if (!dateStr) return i18n.t('admin.never');
const d = new Date(dateStr);
const now = new Date();
const secs = Math.floor((now.getTime() - d.getTime()) / 1000);
if (secs < 60) return i18n.t('admin.just_now');
if (secs < 3600) return i18n.t('admin.minutes_ago', { n: Math.floor(secs / 60) });
if (secs < 86400) return i18n.t('admin.hours_ago', { n: Math.floor(secs / 3600) });
if (secs < 2592000) return i18n.t('admin.days_ago', { n: Math.floor(secs / 86400) });
return d.toLocaleDateString();
return formatRelativeTime(dateStr);
}
/* ── Custom confirm modal ── */
static/js/views/profile/profile.js
+2 -8
View File
@@ -1,6 +1,7 @@
import { getCsrfHeaders } from '../../core/csrf.js';
import { installFetchInterceptor } from '../../core/fetchWrapper.js';
import { i18n } from '../../core/i18n.js';
import { formatRelativeTime } from '../../core/formatters.js';
import { oxiIconsInit } from '../../core/icons.js';
import { resizeImageToDataUrl } from '../../utils/imageResize.js';
@@ -32,14 +33,7 @@ function formatBytes(bytes) {
/** @param {string | null | undefined} dateStr */
function timeAgo(dateStr) {
if (!dateStr) return i18n.t('profile.never');
const d = new Date(dateStr);
const now = Date.now();
const secs = Math.floor((now - d.valueOf()) / 1000);
if (secs < 60) return i18n.t('profile.just_now');
if (secs < 3600) return i18n.t('profile.minutes_ago', { n: Math.floor(secs / 60) });
if (secs < 86400) return i18n.t('profile.hours_ago', { n: Math.floor(secs / 3600) });
if (secs < 2592000) return i18n.t('profile.days_ago', { n: Math.floor(secs / 86400) });
return d.toLocaleDateString();
return formatRelativeTime(dateStr);
}
// ── Avatar helpers ─────────────────────────────────────────────────────────────
static/locales/ar.json
+98 -3
View File
@@ -157,7 +157,11 @@
"close": "إغلاق",
"delete_permanently": "حذف نهائياً",
"empty_trash": "تفريغ سلة المهملات",
"open_parent_folder": "الانتقال إلى المجلد الأصلي"
"open_parent_folder": "الانتقال إلى المجلد الأصلي",
"add": "Add",
"apply": "Apply",
"clear": "Clear",
"remove": "Remove"
},
"user_menu": {
"appearance": "المظهر",
@@ -197,7 +201,22 @@
"shareCreated": "تم إنشاء رابط المشاركة بنجاح",
"shareUpdated": "تم تحديث إعدادات المشاركة بنجاح",
"shareRemoved": "تمت إزالة المشاركة بنجاح",
"inviteByEmail": "دعوة عبر البريد الإلكتروني — ستُرسل الدعوة"
"inviteByEmail": "دعوة عبر البريد الإلكتروني — ستُرسل الدعوة",
"directoryUnavailable": "User directory unavailable",
"linkNamePlaceholder": "Link name (optional)",
"newLink": "New link",
"noExpiry": "No expiry",
"pending": "Pending",
"people": "People",
"publicLinks": "Public links",
"role": {
"canEdit": "Can edit",
"canManage": "Can manage",
"canView": "Can view"
},
"searchPlaceholder": "Search people…",
"shareOf": "Share of:",
"sharedLink": "Shared link"
},
"share_dialogTitle": "رابط المشاركة",
"share_linkLabel": "رابط المشاركة:",
@@ -460,7 +479,10 @@
"magicLinkSubmit": "إرسال رابط تسجيل الدخول",
"magicLinkSent": "إذا كان هناك حساب لهذا البريد الإلكتروني، فسيتم إرسال رابط تسجيل الدخول. تحقق من صندوق الوارد.",
"magicLinkUnavailable": "تسجيل الدخول عبر البريد الإلكتروني غير متاح على هذا الخادم.",
"magicLinkNetworkError": "تعذر الوصول إلى الخادم: {{message}}"
"magicLinkNetworkError": "تعذر الوصول إلى الخادم: {{message}}",
"magicLinkToggle": "No password? Email me a sign-in link",
"passwordsMatch": "Passwords match",
"capsLock": "Caps Lock is on"
},
"storage": {
"title": "التخزين",
@@ -881,5 +903,78 @@
"notifyRateLimited": "عدد كبير من الإشعارات لهذا المستلم — حاول لاحقًا.",
"removeAccess": "إزالة الوصول",
"resendInvitation": "إعادة إرسال بريد الدعوة"
},
"sort": {
"asc": "ascending",
"desc": "descending"
},
"notif": {
"errorTitle": "Error",
"searchError": "Error performing search",
"cleanupCompleted": "Cleanup completed",
"cleanupCompletedBody": "Recent files history has been cleared",
"batchCopy": "Batch copy",
"batchCopyBody": "{{success}} copied, {{errors}} failed",
"itemsCopied": "Items copied",
"itemsCopiedBody": "{{count}} items copied successfully",
"batchMove": "Batch move",
"batchMoveBody": "{{success}} moved, {{errors}} failed",
"itemsMoved": "Items moved",
"itemsMovedBody": "{{count}} items moved successfully",
"batchDelete": "Batch delete",
"batchDeleteBody": "{{success}} moved to trash, {{errors}} failed",
"movedToTrash": "Moved to trash",
"movedToTrashBody": "{{count}} items moved to trash",
"trashItemsError": "Could not move items to trash",
"preparingDownload": "Preparing download",
"preparingDownloadBody": "Preparing your download…",
"downloadItemsError": "Could not download selected items",
"favoritesAddError": "Could not add items to favorites",
"invalidEmail": "Please enter a valid email address",
"notificationSendError": "Could not send notification",
"folderCreated": "Folder created",
"folderCreatedBody": "\"{{name}}\" created successfully",
"fileMoved": "File moved",
"fileMovedBody": "File moved successfully",
"fileMoveError": "Error moving the file: {{error}}",
"fileMoveErrorGeneric": "Error moving the file",
"folderMoved": "Folder moved",
"folderMovedBody": "Folder moved successfully",
"folderMoveError": "Error moving the folder: {{error}}",
"folderMoveErrorGeneric": "Error moving the folder",
"fileCopied": "File copied",
"fileCopiedBody": "File copied successfully",
"fileCopyError": "Error copying the file: {{error}}",
"fileCopyErrorGeneric": "Error copying the file",
"folderRenamed": "Folder renamed",
"folderRenamedBody": "Folder renamed to \"{{name}}\"",
"fileTrashed": "File moved to trash",
"fileTrashedBody": "\"{{name}}\" moved to trash",
"fileDeleted": "File deleted",
"fileDeletedBody": "\"{{name}}\" deleted successfully",
"fileDeleteError": "Error deleting the file",
"folderTrashed": "Folder moved to trash",
"folderTrashedBody": "\"{{name}}\" moved to trash",
"folderDeleted": "Folder deleted",
"folderDeletedBody": "\"{{name}}\" deleted successfully",
"folderDeleteError": "Error deleting the folder",
"itemRestored": "Item restored",
"itemRestoredBody": "Item restored successfully",
"itemRestoreError": "Error restoring the item",
"itemDeleted": "Item deleted",
"itemDeletedBody": "Item permanently deleted",
"itemDeleteError": "Error deleting the item",
"trashEmptied": "Trash emptied",
"trashEmptiedBody": "The trash has been emptied successfully",
"trashEmptyError": "Error emptying the trash",
"cacheCleared": "Cache cleared",
"cacheClearedBody": "Search cache cleared successfully",
"cacheClearError": "Error clearing search cache",
"wopiOpenError": "Could not open the document editor.",
"linkCopied": "Link copied",
"linkCopiedBody": "Link copied to clipboard",
"linkCopyError": "Could not copy link",
"notificationSent": "Notification sent",
"notificationSentBody": "Notification sent to {{email}}"
}
}

Some files were not shown because too many files have changed in this diff Show More