diff --git a/.gitignore b/.gitignore index 3130ad18c3..30e1695322 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ __pycache__/ .clangd .DS_Store .emsdk +.plan .pnpm-store .ipynb_checkpoints .perspectiverc diff --git a/Cargo.lock b/Cargo.lock index 87deef98fc..6d1026aa32 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2,6 +2,17 @@ # It is not intended for manual editing. version = 4 +[[package]] +name = "ahash" +version = "0.7.8" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "891477e0c6a8957309ee5c45a6368af3ae14bb510732d2684ffa19af310920f9" +dependencies = [ + "getrandom 0.2.16", + "once_cell", + "version_check", +] + [[package]] name = "ahash" version = "0.8.12" @@ -96,7 +107,7 @@ version = "57.3.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "4c8955af33b25f3b175ee10af580577280b4bd01f7e823d94c7cdef7cf8c9aef" dependencies = [ - "ahash", + "ahash 0.8.12", "arrow-buffer", "arrow-data", "arrow-schema", @@ -159,7 +170,7 @@ version = "57.3.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "68bf3e3efbd1278f770d67e5dc410257300b161b93baedb3aae836144edcaf4b" dependencies = [ - "ahash", + "ahash 0.8.12", "arrow-array", "arrow-buffer", "arrow-data", @@ -260,6 +271,15 @@ version = "0.22.1" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6" +[[package]] +name = "base64-simd" +version = "0.7.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "781dd20c3aff0bd194fe7d2a977dd92f21c173891f3a03b677359e5fa457e5d5" +dependencies = [ + "simd-abstraction", +] + [[package]] name = "basic-toml" version = "0.1.10" @@ -284,6 +304,18 @@ version = "2.10.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "812e12b5285cc515a9c72a5c1d3b6d46a19dac5acfef5265968c166106e31dd3" +[[package]] +name = "bitvec" +version = "1.0.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "1bc2832c24239b0141d5674bb9174f9d68a8b5b3f2753311927c172ca46f7e9c" +dependencies = [ + "funty", + "radium", + "tap", + "wyz", +] + [[package]] name = "block-buffer" version = "0.10.4" @@ -299,6 +331,28 @@ version = "3.19.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "46c5e41b57b8bba42a04676d81cb89e9ee8e859a1a66f80a5a72e1cb76b34d43" +[[package]] +name = "bytecheck" +version = "0.6.12" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "23cdc57ce23ac53c931e88a43d06d070a6fd142f2617be5855eb75efc9beb1c2" +dependencies = [ + "bytecheck_derive", + "ptr_meta", + "simdutf8", +] + +[[package]] +name = "bytecheck_derive" +version = "0.6.12" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3db406d29fbcd95542e92559bed4d8ad92636d1ca8b3b72ede10b4bcc010e659" +dependencies = [ + "proc-macro2", + "quote", + "syn 1.0.109", +] + [[package]] name = "bytes" version = "1.11.0" @@ -506,6 +560,35 @@ dependencies = [ "tiny-keccak", ] +[[package]] +name = "const-str" +version = "0.3.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "21077772762a1002bb421c3af42ac1725fa56066bfc53d9a55bb79905df2aaf3" +dependencies = [ + "const-str-proc-macro", +] + +[[package]] +name = "const-str-proc-macro" +version = "0.3.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "5e1e0fdd2e5d3041e530e1b21158aeeef8b5d0e306bc5c1e3d6cf0930d10e25a" +dependencies = [ + "proc-macro2", + "quote", + "syn 1.0.109", +] + +[[package]] +name = "convert_case" +version = "0.6.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "ec182b0ca2f35d8fc196cf3404988fd8b8c739a4d270ff118a398feb0cbec1ca" +dependencies = [ + "unicode-segmentation", +] + [[package]] name = "core-foundation-sys" version = "0.8.7" @@ -562,6 +645,38 @@ dependencies = [ "typenum", ] +[[package]] +name = "cssparser" +version = "0.33.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "9be934d936a0fbed5bcdc01042b770de1398bf79d0e192f49fa7faea0e99281e" +dependencies = [ + "cssparser-macros", + "dtoa-short", + "itoa", + "phf", + "smallvec", +] + +[[package]] +name = "cssparser-color" +version = "0.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "556c099a61d85989d7af52b692e35a8d68a57e7df8c6d07563dc0778b3960c9f" +dependencies = [ + "cssparser", +] + +[[package]] +name = "cssparser-macros" +version = "0.6.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331" +dependencies = [ + "quote", + "syn 2.0.111", +] + [[package]] name = "cxx" version = "1.0.190" @@ -624,12 +739,34 @@ dependencies = [ "syn 2.0.111", ] +[[package]] +name = "dashmap" +version = "5.5.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "978747c1d849a7d2ee5e8adc0159961c48fb7e5db2f06af6723b80123bb53856" +dependencies = [ + "cfg-if", + "hashbrown 0.14.5", + "lock_api", + "once_cell", + "parking_lot_core", +] + [[package]] name = "data-encoding" version = "2.9.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "2a2330da5de22e8a3cb63252ce2abb30116bf5265e89c0e01bc17015ce30a476" +[[package]] +name = "data-url" +version = "0.1.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3a30bfce702bcfa94e906ef82421f2c0e61c076ad76030c16ee5d2e9a32fe193" +dependencies = [ + "matches", +] + [[package]] name = "derivative" version = "2.2.0" @@ -647,12 +784,6 @@ version = "1.6.2" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "abd57806937c9cc163efc8ea3910e00a62e2aeb0b8119f1793a978088f8f6b04" -[[package]] -name = "difflib" -version = "0.4.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "6184e33543162437515c2e2b48714794e37845ec9851711914eec9d308f6ebe8" - [[package]] name = "diffy" version = "0.3.0" @@ -694,10 +825,19 @@ dependencies = [ ] [[package]] -name = "downcast" -version = "0.11.0" +name = "dtoa" +version = "1.0.11" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "1435fa1053d8b2fbbe9be7e97eca7f33d37b28409959813daefc1446a14247f1" +checksum = "4c3cf4824e2d5f025c7b531afcb2325364084a16806f6d47fbc1f5fbd9960590" + +[[package]] +name = "dtoa-short" +version = "0.3.5" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "cd1511a7b6a56299bd043a9c167a6d2bfb37bf84a6dfceaba651168adfb43c87" +dependencies = [ + "dtoa", +] [[package]] name = "either" @@ -795,15 +935,6 @@ dependencies = [ "rustc_version", ] -[[package]] -name = "float-cmp" -version = "0.9.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "98de4bbd547a563b716d8dfa9aad1cb19bfab00f4fa09a6a4ed21dbcf44ce9c4" -dependencies = [ - "num-traits", -] - [[package]] name = "fnv" version = "1.0.7" @@ -832,10 +963,10 @@ dependencies = [ ] [[package]] -name = "fragile" -version = "2.0.1" +name = "funty" +version = "2.0.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "28dd6caf6059519a65843af8fe2a3ae298b14b80179855aeb4adc2c1934ee619" +checksum = "e6d5a32815ae3f33302d95fdcb2ce17862f8c65363dcfd29360480ba1001fc9c" [[package]] name = "futures" @@ -1198,6 +1329,15 @@ name = "hashbrown" version = "0.12.3" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888" +dependencies = [ + "ahash 0.7.8", +] + +[[package]] +name = "hashbrown" +version = "0.14.5" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "e5274423e17b7c9fc20b6e7e208532f9b19825d82dfd615708b70edd83df41f1" [[package]] name = "hashbrown" @@ -1548,6 +1688,46 @@ dependencies = [ "libc", ] +[[package]] +name = "lightningcss" +version = "1.0.0-alpha.71" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "cb6314c2f0590ac93c86099b98bb7ba8abcf759bfd89604ffca906472bb54937" +dependencies = [ + "ahash 0.8.12", + "bitflags", + "const-str", + "cssparser", + "cssparser-color", + "dashmap", + "data-encoding", + "getrandom 0.3.4", + "indexmap 2.12.1", + "itertools 0.10.5", + "lazy_static", + "lightningcss-derive", + "parcel_selectors", + "parcel_sourcemap", + "pastey", + "pathdiff", + "rayon", + "serde", + "serde-content", + "smallvec", +] + +[[package]] +name = "lightningcss-derive" +version = "1.0.0-alpha.43" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "84c12744d1279367caed41739ef094c325d53fb0ffcd4f9b84a368796f870252" +dependencies = [ + "convert_case", + "proc-macro2", + "quote", + "syn 1.0.109", +] + [[package]] name = "link-cplusplus" version = "1.0.12" @@ -1603,6 +1783,12 @@ dependencies = [ "regex-automata", ] +[[package]] +name = "matches" +version = "0.1.10" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "2532096657941c2fea9c289d370a250971c689d4f143798ff67113ec042024a5" + [[package]] name = "matchit" version = "0.8.4" @@ -1679,33 +1865,6 @@ dependencies = [ "windows-sys 0.61.2", ] -[[package]] -name = "mockall" -version = "0.11.4" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4c84490118f2ee2d74570d114f3d0493cbf02790df303d2707606c3e14e07c96" -dependencies = [ - "cfg-if", - "downcast", - "fragile", - "lazy_static", - "mockall_derive", - "predicates", - "predicates-tree", -] - -[[package]] -name = "mockall_derive" -version = "0.11.4" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "22ce75669015c4f47b289fd4d4f56e894e4c96003ffdf3ac51313126f94c6cbb" -dependencies = [ - "cfg-if", - "proc-macro2", - "quote", - "syn 1.0.109", -] - [[package]] name = "multimap" version = "0.10.1" @@ -1722,12 +1881,6 @@ dependencies = [ "minimal-lexical", ] -[[package]] -name = "normalize-line-endings" -version = "0.3.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "61807f77802ff30975e01f4f071c8ba10c022052f98b3294119f3e615d13e5be" - [[package]] name = "nu-ansi-term" version = "0.46.0" @@ -1819,12 +1972,48 @@ version = "0.2.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d" +[[package]] +name = "outref" +version = "0.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "7f222829ae9293e33a9f5e9f440c6760a3d450a64affe1846486b140db81c1f4" + [[package]] name = "overload" version = "0.1.1" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "b15813163c1d831bf4a13c3610c05c0d03b39feb07f7e09fa234dac9b15aaf39" +[[package]] +name = "parcel_selectors" +version = "0.28.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "54fd03f1ad26cb6b3ec1b7414fa78a3bd639e7dbb421b1a60513c96ce886a196" +dependencies = [ + "bitflags", + "cssparser", + "log", + "phf", + "phf_codegen", + "precomputed-hash", + "rustc-hash", + "smallvec", +] + +[[package]] +name = "parcel_sourcemap" +version = "2.1.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "485b74d7218068b2b7c0e3ff12fbc61ae11d57cb5d8224f525bd304c6be05bbb" +dependencies = [ + "base64-simd", + "data-url", + "rkyv", + "serde", + "serde_json", + "vlq", +] + [[package]] name = "parking_lot" version = "0.12.5" @@ -1854,6 +2043,18 @@ version = "1.0.15" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "57c0d7b74b563b49d38dae00a0c37d4d6de9b432382b2892f0574ddcae73fd0a" +[[package]] +name = "pastey" +version = "0.1.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "35fb2e5f958ec131621fdd531e9fc186ed768cbe395337403ae56c17a74c68ec" + +[[package]] +name = "pathdiff" +version = "0.2.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "df94ce210e5bc13cb6651479fa48d14f601d9858cfe0467f43ae157023b938d3" + [[package]] name = "percent-encoding" version = "2.3.2" @@ -1905,7 +2106,7 @@ dependencies = [ "prost-build", "prost-types", "protobuf-src", - "rand", + "rand 0.9.1", "serde", "serde_bytes", "serde_json", @@ -2014,11 +2215,11 @@ dependencies = [ "glob", "itertools 0.14.0", "js-sys", + "lightningcss", "macro_rules_attribute", "nom", "perspective-client", "perspective-js", - "procss", "serde", "serde-wasm-bindgen", "serde_json", @@ -2045,6 +2246,58 @@ dependencies = [ "indexmap 2.12.1", ] +[[package]] +name = "phf" +version = "0.11.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "1fd6780a80ae0c52cc120a26a1a42c1ae51b247a253e4e06113d23d2c2edd078" +dependencies = [ + "phf_macros", + "phf_shared", +] + +[[package]] +name = "phf_codegen" +version = "0.11.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "aef8048c789fa5e851558d709946d6d79a8ff88c0440c587967f8e94bfb1216a" +dependencies = [ + "phf_generator", + "phf_shared", +] + +[[package]] +name = "phf_generator" +version = "0.11.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3c80231409c20246a13fddb31776fb942c38553c51e871f8cbd687a4cfb5843d" +dependencies = [ + "phf_shared", + "rand 0.8.5", +] + +[[package]] +name = "phf_macros" +version = "0.11.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "f84ac04429c13a7ff43785d75ad27569f2951ce0ffd30a3321230db2fc727216" +dependencies = [ + "phf_generator", + "phf_shared", + "proc-macro2", + "quote", + "syn 2.0.111", +] + +[[package]] +name = "phf_shared" +version = "0.11.3" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "67eabc2ef2a60eb7faa00097bd1ffdb5bd28e62bf39990626a582201b7a754e5" +dependencies = [ + "siphasher", +] + [[package]] name = "pin-project" version = "1.1.10" @@ -2119,34 +2372,10 @@ dependencies = [ ] [[package]] -name = "predicates" -version = "2.1.5" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "59230a63c37f3e18569bdb90e4a89cbf5bf8b06fea0b84e65ea10cc4df47addd" -dependencies = [ - "difflib", - "float-cmp", - "itertools 0.10.5", - "normalize-line-endings", - "predicates-core", - "regex", -] - -[[package]] -name = "predicates-core" -version = "1.0.9" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "727e462b119fe9c93fd0eb1429a5f7647394014cf3c04ab2c0350eeb09095ffa" - -[[package]] -name = "predicates-tree" -version = "1.0.12" +name = "precomputed-hash" +version = "0.1.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "72dd2d6d381dfb73a193c7fca536518d7caee39fc8503f74e7dc0be0531b425c" -dependencies = [ - "predicates-core", - "termtree", -] +checksum = "925383efa346730478fb4838dbe9137d2a47675ad789c546d150a6e1dd4ab31c" [[package]] name = "prettyplease" @@ -2201,23 +2430,6 @@ dependencies = [ "unicode-ident", ] -[[package]] -name = "procss" -version = "0.1.18" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "5aab2f146f9f527c7e31c6d2cc8d57765686aa4cee61e4aad1077a12574a3291" -dependencies = [ - "anyhow", - "base64", - "console_error_panic_hook", - "js-sys", - "mockall", - "nom", - "serde-wasm-bindgen", - "wasm-bindgen", - "web-sys", -] - [[package]] name = "prost" version = "0.12.6" @@ -2279,6 +2491,26 @@ dependencies = [ "cmake", ] +[[package]] +name = "ptr_meta" +version = "0.1.4" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "0738ccf7ea06b608c10564b31debd4f5bc5e197fc8bfe088f68ae5ce81e7a4f1" +dependencies = [ + "ptr_meta_derive", +] + +[[package]] +name = "ptr_meta_derive" +version = "0.1.4" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "16b845dbfca988fa33db069c0e230574d15a3088f147a87b64c7589eb662c9ac" +dependencies = [ + "proc-macro2", + "quote", + "syn 1.0.109", +] + [[package]] name = "pyo3" version = "0.25.1" @@ -2401,6 +2633,21 @@ version = "5.3.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "69cdb34c158ceb288df11e18b4bd39de994f6657d83847bdffdbd7f346754b0f" +[[package]] +name = "radium" +version = "0.7.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "dc33ff2d4973d518d823d61aa239014831e521c75da58e3df4840d3f47749d09" + +[[package]] +name = "rand" +version = "0.8.5" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "34af8d1a0e25924bc5b7c43c079c942339d8f0a8b57c39049bef581b46327404" +dependencies = [ + "rand_core 0.6.4", +] + [[package]] name = "rand" version = "0.9.1" @@ -2408,7 +2655,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "9fbfd9d094a40bf3ae768db9361049ace4c0e04a4fd6b359518bd7b73a73dd97" dependencies = [ "rand_chacha", - "rand_core", + "rand_core 0.9.3", ] [[package]] @@ -2418,9 +2665,15 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "d3022b5f1df60f26e1ffddd6c66e8aa15de382ae63b3a0c1bfc0e4d3e3f325cb" dependencies = [ "ppv-lite86", - "rand_core", + "rand_core 0.9.3", ] +[[package]] +name = "rand_core" +version = "0.6.4" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c" + [[package]] name = "rand_core" version = "0.9.3" @@ -2499,6 +2752,44 @@ version = "0.8.8" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "7a2d987857b319362043e95f5353c0535c1f58eec5336fdfcf626430af7def58" +[[package]] +name = "rend" +version = "0.4.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "71fe3824f5629716b1589be05dacd749f6aa084c87e00e016714a8cdfccc997c" +dependencies = [ + "bytecheck", +] + +[[package]] +name = "rkyv" +version = "0.7.46" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "2297bf9c81a3f0dc96bc9521370b88f054168c29826a75e89c55ff196e7ed6a1" +dependencies = [ + "bitvec", + "bytecheck", + "bytes", + "hashbrown 0.12.3", + "ptr_meta", + "rend", + "rkyv_derive", + "seahash", + "tinyvec", + "uuid", +] + +[[package]] +name = "rkyv_derive" +version = "0.7.46" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "84d7b42d4b8d06048d3ac8db0eb31bcb942cbeb709f0b5f2b2ebde398d3038f5" +dependencies = [ + "proc-macro2", + "quote", + "syn 1.0.109", +] + [[package]] name = "rust-axum" version = "4.3.0" @@ -2518,6 +2809,12 @@ version = "0.1.26" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "56f7d92ca342cea22a06f2121d944b4fd82af56988c270852495420f961d4ace" +[[package]] +name = "rustc-hash" +version = "2.1.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "357703d41365b4b27c590e3ed91eabb1b663f07c4c084095e60cbed4362dff0d" + [[package]] name = "rustc_version" version = "0.4.1" @@ -2573,6 +2870,12 @@ version = "1.0.9" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "d68f2ec51b097e4c1a75b681a8bec621909b5e91f15bb7b840c4f2f7b01148b2" +[[package]] +name = "seahash" +version = "4.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "1c107b6f4780854c8b126e228ea8869f4d7b71260f962fefb57b996b8959ba6b" + [[package]] name = "semver" version = "0.9.0" @@ -2608,6 +2911,15 @@ dependencies = [ "serde_derive", ] +[[package]] +name = "serde-content" +version = "0.1.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3753ca04f350fa92d00b6146a3555e63c55388c9ef2e11e09bce2ff1c0b509c6" +dependencies = [ + "serde", +] + [[package]] name = "serde-wasm-bindgen" version = "0.6.5" @@ -2753,6 +3065,27 @@ dependencies = [ "libc", ] +[[package]] +name = "simd-abstraction" +version = "0.7.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "9cadb29c57caadc51ff8346233b5cec1d240b68ce55cf1afc764818791876987" +dependencies = [ + "outref", +] + +[[package]] +name = "simdutf8" +version = "0.1.5" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "e3a9fe34e3e7a50316060351f37187a3f546bce95496156754b601a5fa71b76e" + +[[package]] +name = "siphasher" +version = "1.0.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "b2aa850e253778c88a04c3d7323b043aeda9d3e30d5971937c1855769763678e" + [[package]] name = "slab" version = "0.4.11" @@ -2905,6 +3238,12 @@ dependencies = [ "lock_api", ] +[[package]] +name = "tap" +version = "1.0.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "55937e1799185b12863d447f42597ed69d9928686b8d88a1df17376a097d8369" + [[package]] name = "target-lexicon" version = "0.13.3" @@ -2933,12 +3272,6 @@ dependencies = [ "winapi-util", ] -[[package]] -name = "termtree" -version = "0.5.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8f50febec83f5ee1df3015341d8bd429f2d1cc62bcba7ea2076759d315084683" - [[package]] name = "thiserror" version = "1.0.69" @@ -2997,6 +3330,21 @@ dependencies = [ "crunchy", ] +[[package]] +name = "tinyvec" +version = "1.11.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3e61e67053d25a4e82c844e8424039d9745781b3fc4f32b8d55ed50f5f667ef3" +dependencies = [ + "tinyvec_macros", +] + +[[package]] +name = "tinyvec_macros" +version = "0.1.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20" + [[package]] name = "tokio" version = "1.48.0" @@ -3283,7 +3631,7 @@ dependencies = [ "http 1.4.0", "httparse", "log", - "rand", + "rand 0.9.1", "sha1", "thiserror 2.0.17", "utf-8", @@ -3307,6 +3655,12 @@ version = "1.0.22" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "9312f7c4f6ff9069b165498234ce8be658059c6728633667c526e27dc2cf1df5" +[[package]] +name = "unicode-segmentation" +version = "1.12.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493" + [[package]] name = "unicode-width" version = "0.1.14" @@ -3343,6 +3697,16 @@ version = "0.2.2" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821" +[[package]] +name = "uuid" +version = "1.22.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "a68d3c8f01c0cfa54a75291d83601161799e4a89a39e0929f4b0354d88757a37" +dependencies = [ + "js-sys", + "wasm-bindgen", +] + [[package]] name = "valuable" version = "0.1.1" @@ -3355,6 +3719,12 @@ version = "0.9.5" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a" +[[package]] +name = "vlq" +version = "0.5.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "65dd7eed29412da847b0f78bcec0ac98588165988a8cfe41d4ea1d429f8ccfff" + [[package]] name = "walkdir" version = "2.5.0" @@ -3418,8 +3788,6 @@ dependencies = [ "cfg-if", "once_cell", "rustversion", - "serde", - "serde_json", "wasm-bindgen-macro", "wasm-bindgen-shared", ] @@ -3882,6 +4250,15 @@ version = "0.46.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "f17a85883d4e6d00e8a97c586de764dabcc06133f7f1d55dce5cdc070ad7fe59" +[[package]] +name = "wyz" +version = "0.5.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "05f360fc0b24296329c78fda852a1e9ae82de9cf7b27dae4b7f62f118f77b9ed" +dependencies = [ + "tap", +] + [[package]] name = "yew" version = "0.22.0" diff --git a/docs/md/how_to/javascript/theming.md b/docs/md/how_to/javascript/theming.md index 41d84d7ea8..ebfe66b9fd 100644 --- a/docs/md/how_to/javascript/theming.md +++ b/docs/md/how_to/javascript/theming.md @@ -79,12 +79,12 @@ theme-able variable to get a functional UI. ### Icons and Translation UI icons are defined by CSS variables provided by -[`@perspective-dev/viewer/dist/css/icons.css`](https://github.com/perspective-dev/perspective/blob/master/rust/perspective-viewer/src/themes/icons.less). +[`@perspective-dev/viewer/dist/css/icons.css`](https://github.com/perspective-dev/perspective/blob/master/rust/perspective-viewer/src/themes/icons.css). These variables must be defined for the UI icons to work - there are no default icons without a theme. UI text is also defined in CSS variables provided by -[`@perspective-dev/viewer/dist/css/intl.css`](https://github.com/perspective-dev/perspective/blob/master/rust/perspective-viewer/src/themes/intl.less), +[`@perspective-dev/viewer/dist/css/intl.css`](https://github.com/perspective-dev/perspective/blob/master/rust/perspective-viewer/src/themes/intl.css), and has identical import requirements. Some _example definitions_ (automatically-translated sans-editing) can be found [`@perspective-dev/viewer/dist/css/intl/` folder](https://github.com/perspective-dev/perspective/tree/master/rust/perspective-viewer/src/themes/intl). diff --git a/docs/src/css/regular_table_reset.css b/docs/src/css/regular_table_reset.css index 2b5db896b6..3c83b0a9eb 100644 --- a/docs/src/css/regular_table_reset.css +++ b/docs/src/css/regular_table_reset.css @@ -18,8 +18,9 @@ tbody, table thead { border: 0; font-size: 12px; - font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", - "Consolas", "Liberation Mono", monospace; + font-family: + "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", + "Liberation Mono", monospace; margin: 0; padding: 0; vertical-align: middle; diff --git a/examples/blocks/src/fractal/index.css b/examples/blocks/src/fractal/index.css index dfba871141..0ce58160c6 100644 --- a/examples/blocks/src/fractal/index.css +++ b/examples/blocks/src/fractal/index.css @@ -19,7 +19,7 @@ perspective-viewer { perspective-viewer[theme="Pro Light"], perspective-viewer[theme="Pro Dark"] { - --d3fc-positive--gradient: linear-gradient( + --psp-d3fc--pos-gradient--background: linear-gradient( #94d0ff, #8795e8, #966bff, diff --git a/examples/esbuild-duckdb-virtual/src/index.ts b/examples/esbuild-duckdb-virtual/src/index.ts index 7db1aefa56..9db268e3be 100644 --- a/examples/esbuild-duckdb-virtual/src/index.ts +++ b/examples/esbuild-duckdb-virtual/src/index.ts @@ -61,7 +61,6 @@ async function initializeDuckDB() { } async function loadSampleData(db: duckdb.AsyncDuckDBConnection) { - // const c = await db.connect(); try { const response = await fetch(SUPERSTORE_ARROW); const arrayBuffer = await response.arrayBuffer(); @@ -83,6 +82,6 @@ const client = await perspective.worker(server); const viewer = document.querySelector("perspective-viewer")!; viewer.load(client); viewer.restore({ - table: "data_source_one", + table: "memory.data_source_one", group_by: ["State"], }); diff --git a/packages/jupyterlab/build.mjs b/packages/jupyterlab/build.mjs index c72c5fa2af..9b460357db 100644 --- a/packages/jupyterlab/build.mjs +++ b/packages/jupyterlab/build.mjs @@ -14,13 +14,17 @@ import { WasmPlugin } from "@perspective-dev/esbuild-plugin/wasm.js"; import { WorkerPlugin } from "@perspective-dev/esbuild-plugin/worker.js"; import { build } from "@perspective-dev/esbuild-plugin/build.js"; import * as path from "node:path"; -import { BuildCss } from "@prospective.co/procss/target/cjs/procss.js"; +import { bundleAsync as bundleCss, composeVisitors } from "lightningcss"; import * as fs from "node:fs"; import * as url from "node:url"; -import { createRequire } from "node:module"; +// import { createRequire } from "node:module"; import { execSync } from "node:child_process"; +import { + resolveNPM, + inlineUrlVisitor, +} from "@perspective-dev/viewer/tools.mjs"; -const _require = createRequire(import.meta.url); +// const _require = createRequire(import.meta.url); const __dirname = url.fileURLToPath(new URL(".", import.meta.url)).slice(0, -1); const NBEXTENSION_PATH = path.resolve( @@ -105,13 +109,6 @@ const NB_BUILDS = [ // }, ]; -function add(builder, path, path2) { - builder.add( - path, - fs.readFileSync(_require.resolve(path2 || path)).toString(), - ); -} - const IS_TEST = process.argv.some((x) => x === "--test"); const BUILD = IS_TEST ? [LAB_BUILD, ...NB_BUILDS, TEST_BUILD] @@ -119,16 +116,17 @@ const BUILD = IS_TEST async function build_all() { fs.mkdirSync("dist/css", { recursive: true }); - const builder3 = new BuildCss(""); - add(builder3, "@perspective-dev/viewer/dist/css/themes.css"); - add(builder3, "./index.less", "./src/less/index.less"); - fs.writeFileSync( - "dist/css/perspective-jupyterlab.css", - builder3.compile().get("index.css"), - ); + const filename = path.resolve(__dirname, "src/css/index.css"); + const { code } = await bundleCss({ + filename, + minify: true, + visitor: inlineUrlVisitor(filename), + resolver: resolveNPM(import.meta.url), + }); + fs.writeFileSync("dist/css/perspective-jupyterlab.css", code); await Promise.all(BUILD.map(build)).catch(() => process.exit(1)); - fs.cpSync("src/less", "dist/less", { recursive: true }); + fs.cpSync("src/css", "dist/css/src", { recursive: true }); execSync("jupyter labextension build .", { stdio: "inherit", }); diff --git a/packages/jupyterlab/package.json b/packages/jupyterlab/package.json index 82109088aa..7231755ca7 100644 --- a/packages/jupyterlab/package.json +++ b/packages/jupyterlab/package.json @@ -38,7 +38,7 @@ "@perspective-dev/esbuild-plugin": "workspace:", "@perspective-dev/test": "workspace:", "@jupyterlab/builder": "^4", - "@prospective.co/procss": "^0.1.16", + "lightningcss": "catalog:", "copy-webpack-plugin": "~12", "zx": "^8.1.8" }, diff --git a/packages/jupyterlab/src/less/index.less b/packages/jupyterlab/src/css/index.css similarity index 68% rename from packages/jupyterlab/src/less/index.less rename to packages/jupyterlab/src/css/index.css index cea5e70e03..c17514c8d3 100644 --- a/packages/jupyterlab/src/less/index.less +++ b/packages/jupyterlab/src/css/index.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ @import "@perspective-dev/viewer/dist/css/themes.css"; @@ -25,18 +26,18 @@ div.PSPContainer { resize: vertical; } -// Widget height for Jupyterlab +/* Widget height for Jupyterlab */ .jp-NotebookPanel-notebook div.PSPContainer { height: 520px; } -// Widget height for Jupyter Notebook +/* Widget height for Jupyter Notebook */ .jupyter-widgets-view div.PSPContainer { height: 520px; } -// Widget height for Voila -// Widget height for VS Code +/* Widget height for Voila */ +/* Widget height for VS Code */ body[data-voila="voila"] .jp-OutputArea-output div.PSPContainer, body[data-vscode-theme-id] .cell-output-ipywidget-background div.PSPContainer { min-height: 520px; @@ -44,7 +45,7 @@ body[data-vscode-theme-id] .cell-output-ipywidget-background div.PSPContainer { } div.PSPContainer perspective-viewer[theme="Pro Light"] { - --plugin--border: 1px solid #e0e0e0; + --psp-plugin--border: 1px solid #e0e0e0; } div.PSPContainer perspective-viewer { diff --git a/packages/viewer-d3fc/build.mjs b/packages/viewer-d3fc/build.mjs index a64cb10cc5..37906415f4 100644 --- a/packages/viewer-d3fc/build.mjs +++ b/packages/viewer-d3fc/build.mjs @@ -12,13 +12,10 @@ import { NodeModulesExternal } from "@perspective-dev/esbuild-plugin/external.js"; import { build } from "@perspective-dev/esbuild-plugin/build.js"; -import { BuildCss } from "@prospective.co/procss/target/cjs/procss.js"; -import { promisify } from "node:util"; +import { bundle as bundleCss } from "lightningcss"; import { execSync } from "node:child_process"; import * as fs from "node:fs"; -import * as path_mod from "node:path"; - -const exec = promisify(execSync); +import { inlineUrlVisitor } from "@perspective-dev/viewer/tools.mjs"; const BUILD = [ { @@ -74,21 +71,14 @@ const BUILD = [ }, ]; -function add(builder, path) { - builder.add( - path, - fs.readFileSync(path_mod.join("./src/less", path)).toString(), - ); -} - async function compile_css() { fs.mkdirSync("dist/css", { recursive: true }); - const builder = new BuildCss(""); - add(builder, "./chart.less"); - fs.writeFileSync( - "dist/css/perspective-viewer-d3fc.css", - builder.compile().get("chart.css"), - ); + const { code } = bundleCss({ + filename: "./src/css/chart.css", + minify: true, + visitor: inlineUrlVisitor("./src/css/chart.css"), + }); + fs.writeFileSync("dist/css/perspective-viewer-d3fc.css", code); } async function build_all() { @@ -100,7 +90,7 @@ async function build_all() { // esbuild can handle typescript files, and strips out types from the output, // but it is unable to check types, so we must run tsc as a separate step. try { - await exec("tsc", { stdio: "inherit" }); + execSync("tsc", { stdio: "inherit" }); } catch (error) { console.error(error); // tsc errors tend to get buried when running multiple package builds. If diff --git a/packages/viewer-d3fc/package.json b/packages/viewer-d3fc/package.json index 100ca74ea6..b26c4d7b82 100644 --- a/packages/viewer-d3fc/package.json +++ b/packages/viewer-d3fc/package.json @@ -72,7 +72,7 @@ "devDependencies": { "@perspective-dev/esbuild-plugin": "workspace:", "@perspective-dev/test": "workspace:", - "@prospective.co/procss": "catalog:", + "lightningcss": "catalog:", "@types/d3": "catalog:", "typescript": "catalog:" } diff --git a/packages/viewer-d3fc/src/less/chart.less b/packages/viewer-d3fc/src/css/chart.css similarity index 76% rename from packages/viewer-d3fc/src/less/chart.less rename to packages/viewer-d3fc/src/css/chart.css index faf92969e8..282e90e811 100644 --- a/packages/viewer-d3fc/src/less/chart.less +++ b/packages/viewer-d3fc/src/css/chart.css @@ -1,23 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@mixin icon { - background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; -} +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { user-select: none; @@ -38,8 +30,8 @@ } text { - // `font-family` does not apply to `` nodes via inheritance. - font-family: var(--interface-monospace--font-family); + /* `font-family` does not apply to `` nodes via inheritance. */ + font-family: var(--psp-interface-monospace--font-family); } &.heatmap, @@ -80,7 +72,7 @@ display: flex; justify-content: center; align-items: center; - background: var(--d3fc-legend--background); + background: var(--psp-d3fc--legend--background); } & .multi-ylabel { position: absolute; @@ -90,7 +82,7 @@ display: flex; justify-content: center; align-items: center; - background: var(--d3fc-legend--background); + background: var(--psp-d3fc--legend--background); } & .outer-container { @@ -114,7 +106,7 @@ text-anchor: middle; user-select: none; pointer-events: none; - fill: var(--d3fc-treedata--labels, rgb(51, 51, 51)); + fill: var(--psp-d3fc--treemap--labels, rgb(51, 51, 51)); } & div.xy-scatter-container { @@ -151,7 +143,10 @@ } & path { - fill: var(--d3fc-series, rgba(31, 119, 180, 0.5)); + fill: var( + --psp-d3fc--series--color, + rgba(31, 119, 180, 0.5) + ); } & text.segment, @@ -159,7 +154,7 @@ text-anchor: middle; user-select: none; pointer-events: none; - fill: var(--d3fc-treedata--labels, rgb(51, 51, 51)); + fill: var(--psp-d3fc--treemap--labels, rgb(51, 51, 51)); } & div.title-container { @@ -206,13 +201,19 @@ & .treerect { stroke: var( - --d3fc-treedata-axis--lines, - var(--d3fc-axis--lines, white) + --psp-d3fc--treemap-axis--lines, + var(--psp-d3fc--axis-lines--color, white) + ); + fill: var( + --psp-d3fc--series--color, + rgba(31, 119, 180, 0.5) ); - fill: var(--d3fc-series, rgba(31, 119, 180, 0.5)); &:hover { cursor: pointer; - stroke: var(--d3fc-treedata--hover-highlight, black); + stroke: var( + --psp-d3fc--treemap--hover-highlight, + black + ); stroke-opacity: 1; } } @@ -226,7 +227,7 @@ &:hover { fill-opacity: 0.1; opacity: 1; - fill: var(--d3fc-treedata--hover-highlight, black); + fill: var(--psp-d3fc--treemap--hover-highlight, black); } } & .leafnode { @@ -257,7 +258,7 @@ z-index: 4; } & text { - fill: var(--d3fc-treedata--labels, rgb(51, 51, 51)); + fill: var(--psp-d3fc--treemap--labels, rgb(51, 51, 51)); &.title { dominant-baseline: hanging; } @@ -286,7 +287,7 @@ & .x-label, & .y-label { - color: var(--d3fc-label--color, inherit); + color: var(--psp-d3fc--label--color, inherit); font-size: 14px; } @@ -306,13 +307,13 @@ & .y-axis text, & .y2-axis text, & .x-axis text { - fill: var(--d3fc-axis-ticks--color, rgb(80, 80, 80)); + fill: var(--psp-d3fc--axis-ticks--color, rgb(80, 80, 80)); font-size: 11px; } & .y-axis path, & .y2-axis path, & .x-axis path { - stroke: var(--d3fc-axis--lines, rgb(180, 210, 225)); + stroke: var(--psp-d3fc--axis-lines--color, rgb(180, 210, 225)); } & .splitter-label { @@ -322,12 +323,12 @@ &::after { margin-left: 5px; - color: var(--d3fc-axis--lines, rgb(180, 210, 225)); + color: var(--psp-d3fc--axis-lines--color, rgb(180, 210, 225)); } &:hover { &::after { - color: var(--d3fc-axis-ticks--color, rgb(80, 80, 80)); + color: var(--psp-d3fc--axis-ticks--color, rgb(80, 80, 80)); } } @@ -340,19 +341,29 @@ } & .y-label.left-label .splitter-label::after { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; width: 16px; height: 12px; - -webkit-mask-image: var(--sort-desc-icon--mask-image); - mask-image: var(--sort-desc-icon--mask-image); + -webkit-mask-image: var(--psp-icon--sort-desc--mask-image); + mask-image: var(--psp-icon--sort-desc--mask-image); } & .y-label.right-label .splitter-label::after { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; width: 16px; height: 12px; - -webkit-mask-image: var(--sort-asc-icon--mask-image); - mask-image: var(--sort-asc-icon--mask-image); + -webkit-mask-image: var(--psp-icon--sort-asc--mask-image); + mask-image: var(--psp-icon--sort-asc--mask-image); } &.ybar .y-axis path, @@ -378,7 +389,7 @@ } & .nearbyTip { - fill: var(--d3fc-series, rgba(31, 119, 180, 0.5)); + fill: var(--psp-d3fc--series--color, rgba(31, 119, 180, 0.5)); } } @@ -413,7 +424,7 @@ &[borderbox-on-hover="true"] { transition: box-shadow 1s; &:hover { - background-color: var(--d3fc-legend--background, #ffffff); + background-color: var(--psp-d3fc--legend--background, #ffffff); transition: box-shadow 0.2s, background-color 0.2s; @@ -428,8 +439,11 @@ cursor: pointer; & path { - fill: var(--d3fc-series, rgba(31, 119, 180, 0.5)); - stroke: var(--d3fc-series, rgb(31, 119, 180)); + fill: var( + --psp-d3fc--series--color, + rgba(31, 119, 180, 0.5) + ); + stroke: var(--psp-d3fc--series--color, rgb(31, 119, 180)); } &.hidden path { fill: rgba(204, 204, 204, 0.5); @@ -443,7 +457,7 @@ } & text { - fill: var(--d3fc-legend--text, rgb(51, 51, 51)); + fill: var(--psp-d3fc--legend--color, rgb(51, 51, 51)); } & .label { @@ -453,7 +467,7 @@ } & #legend-axis path { - stroke: var(--d3fc-legend--text, rgb(51, 51, 51)); + stroke: var(--psp-d3fc--legend--color, rgb(51, 51, 51)); } & .legend-controls { @@ -494,9 +508,9 @@ & button { -webkit-appearance: none; - background: var(--plugin--background, rgb(247, 247, 247)); - border: 1px solid var(--inactive--color, rgb(204, 204, 204)); - color: var(--d3fc-label--color, inherit); + background: var(--psp--background-color, rgb(247, 247, 247)); + border: 1px solid var(--psp-inactive--color, rgb(204, 204, 204)); + color: var(--psp-d3fc--label--color, inherit); font-size: 12px; padding: 8px; opacity: 0.5; @@ -535,10 +549,10 @@ font-weight: 300; white-space: nowrap; padding: 0.5em; - background: var(--d3fc-tooltip--background, #ffffff); - color: var(--d3fc-tooltip--color, black); - border: 1px solid var(--d3fc-tooltip--border-color, #777777); - box-shadow: var(--d3fc-tooltip--box-shadow, none); + background: var(--psp-d3fc--tooltip--background, #ffffff); + color: var(--psp-d3fc--tooltip--color, black); + border: 1px solid var(--psp-d3fc--tooltip--border-color, #777777); + box-shadow: var(--psp-d3fc--tooltip--box-shadow, none); pointer-events: none; } diff --git a/packages/viewer-d3fc/src/ts/series/colorStyles.ts b/packages/viewer-d3fc/src/ts/series/colorStyles.ts index 55b4fc3752..267de95b05 100644 --- a/packages/viewer-d3fc/src/ts/series/colorStyles.ts +++ b/packages/viewer-d3fc/src/ts/series/colorStyles.ts @@ -27,10 +27,10 @@ export const initialiseStyles = ( }; const computed = computedStyle(container); - styles["series"] = computed(`--d3fc-series`); + styles["series"] = computed(`--psp-d3fc--series--color`); for (let i = 1; ; i++) { const key = `series-${i}`; - const color = computed(`--d3fc-${key}`); + const color = computed(`--psp-d3fc--${key}--color`); if (!color) { break; } @@ -40,11 +40,11 @@ export const initialiseStyles = ( } styles.opacity = getOpacityFromColor(styles.series); - styles.grid.gridLineColor = computed`--d3fc-gridline--color`; + styles.grid.gridLineColor = computed`--psp-d3fc--gridline--color`; - const gradients = ["full", "positive", "negative"]; + const gradients = ["full", "pos", "neg"]; gradients.forEach((g) => { - const gradient = computed(`--d3fc-${g}--gradient`); + const gradient = computed(`--psp-d3fc--${g}-gradient--background`); styles.gradient[g] = parseGradient(gradient, styles.opacity); }); diff --git a/packages/viewer-d3fc/src/ts/series/seriesRange.ts b/packages/viewer-d3fc/src/ts/series/seriesRange.ts index 1f93bac2c0..34f3f1bdd9 100644 --- a/packages/viewer-d3fc/src/ts/series/seriesRange.ts +++ b/packages/viewer-d3fc/src/ts/series/seriesRange.ts @@ -33,9 +33,9 @@ export function seriesColorRange( let gradient = settings.colorStyles.gradient.full; if (extent[0] >= 0) { - gradient = settings.colorStyles.gradient.positive; + gradient = settings.colorStyles.gradient.pos; } else if (extent[1] <= 0) { - gradient = settings.colorStyles.gradient.negative; + gradient = settings.colorStyles.gradient.neg; } else { const maxVal = Math.max(-extent[0], extent[1]); extent = [-maxVal, maxVal]; diff --git a/packages/viewer-d3fc/src/ts/series/treemap/treemapLabel.ts b/packages/viewer-d3fc/src/ts/series/treemap/treemapLabel.ts index b6e4776edd..ff73fb5421 100644 --- a/packages/viewer-d3fc/src/ts/series/treemap/treemapLabel.ts +++ b/packages/viewer-d3fc/src/ts/series/treemap/treemapLabel.ts @@ -41,7 +41,7 @@ export const restoreLabels = (nodes) => { export const preventTextCollisions = (nodes) => { const textCollisionFuzzFactorPx = -2; - const textAdjustPx = 14; // This should remain the same as the css value for .top => font-size in the chart.less + const textAdjustPx = 14; // This should remain the same as the css value for .top => font-size in the chart.css const rect = (element): DOMRect => element.getBoundingClientRect(); const topNodes = []; diff --git a/packages/viewer-datagrid/build.mjs b/packages/viewer-datagrid/build.mjs index 1669e69556..7583c57265 100644 --- a/packages/viewer-datagrid/build.mjs +++ b/packages/viewer-datagrid/build.mjs @@ -12,9 +12,9 @@ import { NodeModulesExternal } from "@perspective-dev/esbuild-plugin/external.js"; import { build } from "@perspective-dev/esbuild-plugin/build.js"; -import { BuildCss } from "@prospective.co/procss/target/cjs/procss.js"; +import { bundle as bundleCss } from "lightningcss"; import * as fs from "node:fs"; -import * as path_mod from "node:path"; +import { inlineUrlVisitor } from "@perspective-dev/viewer/tools.mjs"; import "zx/globals"; @@ -47,32 +47,23 @@ const BUILD = [ }, ]; -function add(builder, path) { - builder.add( - path, - fs.readFileSync(path_mod.join("./src/less", path)).toString(), - ); -} - async function compile_css() { fs.mkdirSync("dist/css", { recursive: true }); - const builder1 = new BuildCss(""); - add(builder1, "./pro.less"); - add(builder1, "./mitered-headers.less"); - add(builder1, "./row-hover.less"); - add(builder1, "./sub-cell-scroll.less"); - add(builder1, "./scrollbar.less"); - add(builder1, "./regular_table.less"); - fs.writeFileSync( - "dist/css/perspective-viewer-datagrid.css", - builder1.compile().get("regular_table.css"), - ); + const { code: datagridCode } = bundleCss({ + filename: "./src/css/perspective-viewer-datagrid.css", + minify: true, + visitor: inlineUrlVisitor("./src/css/perspective-viewer-datagrid.css"), + }); + fs.writeFileSync("dist/css/perspective-viewer-datagrid.css", datagridCode); - const builder2 = new BuildCss(""); - add(builder2, "./toolbar.less"); + const { code: toolbarCode } = bundleCss({ + filename: "./src/css/toolbar.css", + minify: true, + visitor: inlineUrlVisitor("./src/css/toolbar.css"), + }); fs.writeFileSync( "dist/css/perspective-viewer-datagrid-toolbar.css", - builder2.compile().get("toolbar.css"), + toolbarCode, ); } diff --git a/packages/viewer-datagrid/package.json b/packages/viewer-datagrid/package.json index d51a40d55b..fc273fd9d0 100644 --- a/packages/viewer-datagrid/package.json +++ b/packages/viewer-datagrid/package.json @@ -39,7 +39,7 @@ "regular-table": "catalog:" }, "devDependencies": { - "@prospective.co/procss": "catalog:", + "lightningcss": "catalog:", "@perspective-dev/esbuild-plugin": "workspace:", "@perspective-dev/test": "workspace:", "@types/chroma-js": "catalog:", diff --git a/packages/viewer-datagrid/src/css/mitered-headers.css b/packages/viewer-datagrid/src/css/mitered-headers.css new file mode 100644 index 0000000000..0c8a1f6f08 --- /dev/null +++ b/packages/viewer-datagrid/src/css/mitered-headers.css @@ -0,0 +1,64 @@ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ + +.psp-header-border:not(.psp-is-top):not(.psp-header-leaf) { + /* right */ + box-shadow: 1px 0px var(--psp-inactive--border-color, #8b868045); +} + +.psp-header-group { + /* bottom */ + box-shadow: 0px 10px 0 -9px var(--psp-inactive--border-color, #8b868045); +} + +.psp-is-top { + /* top-miter-right */ + box-shadow: 5px 4px 0px -4px var(--psp-inactive--border-color, #8b868045); +} + +.psp-is-top.psp-header-group:not(.psp-header-group-corner) { + /* top-miter-right and bottom */ + box-shadow: + 5px 4px 0px -4px var(--psp-inactive--border-color, #8b868045), + 0px 10px 0 -9px var(--psp-inactive--border-color, #8b868045); +} + +.psp-header-border.psp-header-group { + &:not(.psp-is-top):not(.psp-header-group-corner) { + /* right and bottom */ + box-shadow: + 1px 0px var(--psp-inactive--border-color, #8b868045), + 0px 10px 0 -9px var(--psp-inactive--border-color, #8b868045); + } +} + +perspective-viewer[settings] + tr.rt-autosize + .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) { + box-shadow: 1px 0px var(--psp-inactive--border-color, #8b868045); +} + +:host-context(perspective-viewer[settings]) + tr.rt-autosize + .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) { + box-shadow: 1px 0px var(--psp-inactive--border-color, #8b868045); +} + +.psp-header-leaf.psp-header-border { + /* bottom-miter-right */ + box-shadow: 5px -4px 0px -4px var(--psp-inactive--border-color, #8b868045); +} + +tr:only-child th { + box-shadow: none !important; +} diff --git a/packages/viewer-datagrid/src/css/perspective-viewer-datagrid.css b/packages/viewer-datagrid/src/css/perspective-viewer-datagrid.css new file mode 100644 index 0000000000..9dde8b42ea --- /dev/null +++ b/packages/viewer-datagrid/src/css/perspective-viewer-datagrid.css @@ -0,0 +1,6 @@ +@import "./pro.css"; +@import "./mitered-headers.css"; +@import "./row-hover.css"; +@import "./sub-cell-scroll.css"; +@import "./scrollbar.css"; +@import "./regular_table.css"; diff --git a/packages/viewer-datagrid/src/less/pro.less b/packages/viewer-datagrid/src/css/pro.css similarity index 70% rename from packages/viewer-datagrid/src/less/pro.less rename to packages/viewer-datagrid/src/css/pro.css index 05193cd694..3f8864472f 100644 --- a/packages/viewer-datagrid/src/less/pro.less +++ b/packages/viewer-datagrid/src/css/pro.css @@ -1,22 +1,21 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@row-height: 19px; +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ regular-table { padding: 0; margin: 12px 0 0 12px; font-family: inherit; - --rt-hover--border-color: var(--inactive--color, #c5c9d080); + --psp-datagrid--hover--border-color: var(--psp-inactive--color, #c5c9d080); div[tabindex] { outline: none; @@ -35,7 +34,7 @@ regular-table { text-align: center; } - // Header groups should overflow and not contribute to auto-sizing. + /* Header groups should overflow and not contribute to auto-sizing. */ thead tr:not(.rt-autosize) th { overflow: hidden; max-width: 0px; @@ -70,7 +69,7 @@ regular-table { text-align: left; } - // frozen rows + /* frozen rows */ thead tr:last-child th { border-bottom: 1px solid #8b868045; @@ -95,12 +94,11 @@ regular-table { td, th { white-space: nowrap; - font-size: 12px; padding-right: 5px; padding-left: 5px; padding-top: 0px; padding-bottom: 0px; - height: @row-height; + height: var(--psp-datagrid--row--height, 19px); } table * { @@ -116,7 +114,7 @@ regular-table { span.rt-row-header-icon { color: #aaa; padding-right: 4px; - font-family: var(--button--font-family); + font-family: var(--psp-button--font-family); } span.rt-column-header-icon { @@ -124,7 +122,7 @@ regular-table { padding-left: 3px; display: inline-block; width: 10px; - font-family: var(--button--font-family); + font-family: var(--psp-button--font-family); } span.rt-row-header-icon:hover { @@ -141,17 +139,17 @@ regular-table { text-overflow: ellipsis; } - // OPTIONAL zebra striping + /* OPTIONAL zebra striping */ - // @zebra-stripe-color: rgb(238,238,238); + /* @zebra-stripe-color: rgb(238,238,238); */ - // tbody tr:nth-child(even) td:not(.rt-group-header) { - // background: @zebra-stripe-color; - // } + /* tbody tr:nth-child(even) td:not(.rt-group-header) { */ + /* background: @zebra-stripe-color; */ + /* } */ - // tbody tr:nth-child(even) span.rt-group-name { - // background: @zebra-stripe-color; - // } + /* tbody tr:nth-child(even) span.rt-group-name { */ + /* background: @zebra-stripe-color; */ + /* } */ td span.rt-group-name, th span.rt-group-name { @@ -182,15 +180,18 @@ regular-table { } a { - color: var(--rt-pos-cell--color); + color: var(--psp-datagrid--pos-cell--color); } a:visited { - color: var(--active--color); + color: var(--psp-active--color); } td.psp-null:after, th.psp-null:after { - content: var(--null--content, "-"); + content: var(--psp-label--null--content, "-"); + color: var(--psp-label--null--color, inherit); + font-size: var(--psp-label--null--font-size, inherit); + vertical-align: middle; } } diff --git a/packages/viewer-datagrid/src/less/regular_table.less b/packages/viewer-datagrid/src/css/regular_table.css similarity index 55% rename from packages/viewer-datagrid/src/less/regular_table.less rename to packages/viewer-datagrid/src/css/regular_table.css index b02b892cbe..75600e9277 100644 --- a/packages/viewer-datagrid/src/less/regular_table.less +++ b/packages/viewer-datagrid/src/css/regular_table.css @@ -1,53 +1,41 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@import "./pro.less"; -@import "./mitered-headers.less"; -@import "./row-hover.less"; -@import "./sub-cell-scroll.less"; -@import "./scrollbar.less"; - -// Row Selection - -@mixin icon { - background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; -} - -// // TODO this makes the UI flash a CSS layout for a millsiecond when toggling -// // settings butit could be fixed. - -// perspective-viewer:not([settings]) { -// @include settings-not-open; -// } - -// :host-context(perspective-viewer:not([settings])) { -// @include settings-not-open; -// } - -// @mixin settings-not-open { -// regular-table table tr.rt-autosize + tr th { -// height: 0px; -// span { -// display: none; -// } -// } -// } - -@mixin settings-open { +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ +/* + +/* Row Selection */ + +/* // TODO this makes the UI flash a CSS layout for a millsiecond when toggling */ +/* // settings butit could be fixed. */ + +/* perspective-viewer:not([settings]) { */ +/* @include settings-not-open; */ +/* } */ + +/* :host-context(perspective-viewer:not([settings])) { */ +/* @include settings-not-open; */ +/* } */ + +/* @mixin settings-not-open { */ +/* regular-table table tr.rt-autosize + tr th { */ +/* height: 0px; */ +/* span { */ +/* display: none; */ +/* } */ +/* } */ +/* } */ + +perspective-viewer, +:host { .psp-menu-enabled { padding: 0 6px; font-size: 8px; @@ -56,65 +44,55 @@ .psp-menu-enabled:hover, tr:not(.rt-autosize) th.psp-menu-open { - color: var(--plugin--background); - background-color: var(--icon--color); - border-bottom-color: var(--icon--color); + color: var(--psp--background-color); + background-color: var(--psp--color); + border-bottom-color: var(--psp--color); cursor: pointer; } tr:not(.rt-autosize) th.psp-menu-open { &:before { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; height: 8px; width: 10px; - -webkit-mask-image: var(--column-settings-icon--mask-image); - mask-image: var(--column-settings-icon--mask-image); + -webkit-mask-image: var(--psp-icon--column-settings--mask-image); + mask-image: var(--psp-icon--column-settings--mask-image); margin-right: 4px; - background-color: var(--plugin--background); + background-color: var(--psp--background-color); } } td.psp-menu-open { box-shadow: - inset -2px 0px 0px var(--icon--color), - inset 2px 0px 0px var(--icon--color); + inset -2px 0px 0px var(--psp--color), + inset 2px 0px 0px var(--psp--color); } tr:first-child td.psp-menu-open { - border-top-color: var(--icon--color) !important; + border-top-color: var(--psp--color) !important; } tr:last-child td.psp-menu-open { box-shadow: - inset -2px 0px 0px var(--icon--color), - inset 2px 0px 0px var(--icon--color), - inset 0px -2px 0px var(--icon--color); + inset -2px 0px 0px var(--psp--color), + inset 2px 0px 0px var(--psp--color), + inset 0px -2px 0px var(--psp--color); } } -perspective-viewer { - @include settings-open; -} - -:host { - @include settings-open; -} - -@mixin viewer-table-styles { +perspective-viewer, +:host-context(perspective-viewer) { regular-table table thead tr:last-child th { border-bottom-width: 1px; - border-bottom-color: var(--inactive--border-color, #8b868045); + border-bottom-color: var(--psp-inactive--border-color, #8b868045); } } -perspective-viewer { - @include viewer-table-styles; -} - -:host-context(perspective-viewer) { - @include viewer-table-styles; -} - .psp-sort-enabled:hover { cursor: pointer; } @@ -159,96 +137,131 @@ td:focus { outline-width: 1px; } -@mixin table-no-dragging { +perspective-viewer.dragging, +:host-context(perspective-viewer.dragging) { regular-table { pointer-events: none; } } -perspective-viewer.dragging { - @include table-no-dragging; -} -:host-context(perspective-viewer.dragging) { - @include table-no-dragging; -} .psp-header-border:last-child { border-right-width: 0px; } .psp-header-sort-desc:after { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; width: 14px; height: 11px; margin-left: 4px; - -webkit-mask-image: var(--sort-desc-icon--mask-image); - mask-image: var(--sort-desc-icon--mask-image); + -webkit-mask-image: var(--psp-icon--sort-desc--mask-image); + mask-image: var(--psp-icon--sort-desc--mask-image); } .psp-header-sort-asc:after { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; width: 14px; height: 11px; margin-left: 4px; - -webkit-mask-image: var(--sort-asc-icon--mask-image); - mask-image: var(--sort-asc-icon--mask-image); + -webkit-mask-image: var(--psp-icon--sort-asc--mask-image); + mask-image: var(--psp-icon--sort-asc--mask-image); } .psp-header-sort-col-desc:after { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; width: 14px; height: 11px; margin-left: 4px; - -webkit-mask-image: var(--sort-col-desc-icon--mask-image); - mask-image: var(--sort-col-desc-icon--mask-image); + -webkit-mask-image: var(--psp-icon--sort-col-desc--mask-image); + mask-image: var(--psp-icon--sort-col-desc--mask-image); } .psp-header-sort-col-asc:after { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; width: 14px; height: 11px; margin-left: 4px; - -webkit-mask-image: var(--sort-col-asc-icon--mask-image); - mask-image: var(--sort-col-asc-icon--mask-image); + -webkit-mask-image: var(--psp-icon--sort-col-asc--mask-image); + mask-image: var(--psp-icon--sort-col-asc--mask-image); } .psp-header-sort-abs-desc:after { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; width: 14px; height: 11px; margin-left: 4px; - -webkit-mask-image: var(--sort-abs-desc-icon--mask-image); - mask-image: var(--sort-abs-desc-icon--mask-image); + -webkit-mask-image: var(--psp-icon--sort-abs-desc--mask-image); + mask-image: var(--psp-icon--sort-abs-desc--mask-image); } .psp-header-sort-abs-asc:after { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; width: 14px; height: 11px; margin-left: 4px; - -webkit-mask-image: var(--sort-abs-asc-icon--mask-image); - mask-image: var(--sort-abs-asc-icon--mask-image); + -webkit-mask-image: var(--psp-icon--sort-abs-asc--mask-image); + mask-image: var(--psp-icon--sort-abs-asc--mask-image); } .psp-header-sort-abs-col-desc:after { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; width: 14px; height: 11px; margin-left: 4px; - -webkit-mask-image: var(--sort-abs-col-desc-icon--mask-image); - mask-image: var(--sort-abs-col-desc-icon--mask-image); + -webkit-mask-image: var(--psp-icon--sort-abs-col-desc--mask-image); + mask-image: var(--psp-icon--sort-abs-col-desc--mask-image); } .psp-header-sort-abs-col-asc:after { - @include icon; + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; width: 14px; height: 11px; margin-left: 4px; - -webkit-mask-image: var(--sort-abs-col-asc-icon--mask-image); - mask-image: var(--sort-abs-col-asc-icon--mask-image); + -webkit-mask-image: var(--psp-icon--sort-abs-col-asc--mask-image); + mask-image: var(--psp-icon--sort-abs-col-asc--mask-image); } tbody th:last-of-type { - border-right: 1px solid var(--inactive--border-color, #8b868045); + border-right: 1px solid var(--psp-inactive--border-color, #8b868045); overflow: hidden; text-overflow: ellipsis; } @@ -256,7 +269,7 @@ tbody th:empty { background-image: linear-gradient( to right, transparent 9px, - var(--inactive--border-color, #eee) 10px, + var(--psp-inactive--border-color, #eee) 10px, transparent 11px ); background-repeat: no-repeat; @@ -272,17 +285,17 @@ regular-table:not(.flat-group-rollup-mode) { } .psp-tree-label:before { - color: var(--icon--color); - font-family: var(--button--font-family, inherit); + color: var(--psp--color); + font-family: var(--psp-button--font-family, inherit); padding-right: 11px; } .psp-tree-label-expand:before { - content: var(--tree-label-expand--content, "+"); + content: var(--psp-label--tree-expand--content, "+"); } .psp-tree-label-collapse:before { - content: var(--tree-label-collapse--content, "-"); + content: var(--psp-label--tree-collapse--content, "-"); } .psp-tree-label-expand, @@ -291,8 +304,8 @@ regular-table:not(.flat-group-rollup-mode) { } .psp-tree-label:hover:before { - color: var(--active--color); - text-shadow: 0px 0px 5px var(--active--color); + color: var(--psp-active--color); + text-shadow: 0px 0px 5px var(--psp-active--color); } } @@ -307,10 +320,10 @@ regular-table:not(.flat-group-rollup-mode) { text-align: left; } .psp-positive:not(:focus) { - color: var(--rt-pos-cell--color); + color: var(--psp-datagrid--pos-cell--color); } .psp-negative:not(:focus) { - color: var(--rt-neg-cell--color); + color: var(--psp-datagrid--neg-cell--color); } regular-table table tbody td { @@ -339,7 +352,7 @@ regular-table table { td, th { - border-color: var(--inactive--border-color, #8b868045); + border-color: var(--psp-inactive--border-color, #8b868045); height: 23px; } @@ -371,10 +384,10 @@ regular-table table { td.psp-select-region, th.psp-select-region { - // transition: background-color 0.5s, color 0.5s, border-color 0.5s; - background-color: var(--icon--color) !important; - color: var(--plugin--background) !important; - border-color: var(--plugin--background) !important; + /* transition: background-color 0.5s, color 0.5s, border-color 0.5s; */ + background-color: var(--psp--color) !important; + color: var(--psp--background-color) !important; + border-color: var(--psp--background-color) !important; } } @@ -387,63 +400,56 @@ regular-table tr:hover + tr td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected) { - border-color: var(--plugin--background) !important; + border-color: var(--psp--background-color) !important; } regular-table tbody tr:hover { td.psp-select-region.psp-menu-open { &:not(.psp-row-selected):not(.psp-row-subselected) { box-shadow: - inset -2px 0px 0px var(--plugin--background), - inset 2px 0px 0px var(--plugin--background); + inset -2px 0px 0px var(--psp--background-color), + inset 2px 0px 0px var(--psp--background-color); } } } :host-context(perspective-viewer[settings]) td.psp-select-region.psp-menu-open { box-shadow: - inset -2px 0px 0px var(--plugin--background), - inset 2px 0px 0px var(--plugin--background); -} - -// This is a design/architecture bug. When the datagrid draws during a sidepanel -// collapse/uncollapse, the `settings` attribute is set to the _previous_ state -// as this collapse takes a while and we dont want the new state CSS to apply -// until the drawing is done. However, this causes the datagrid to draw its -// _first_ frame as if its in the wrong state, as it detects sidepanel state -// via HTML attribute checking. -@mixin design-slash-architecture-bug { - regular-table #psp-column-edit-buttons:after { - content: none; - } + inset -2px 0px 0px var(--psp--background-color), + inset 2px 0px 0px var(--psp--background-color); } +/* This is a design/architecture bug. When the datagrid draws during a sidepanel */ +/* collapse/uncollapse, the `settings` attribute is set to the _previous_ state */ +/* as this collapse takes a while and we dont want the new state CSS to apply */ +/* until the drawing is done. However, this causes the datagrid to draw its */ +/* _first_ frame as if its in the wrong state, as it detects sidepanel state */ +/* via HTML attribute checking. */ regular-table #psp-column-edit-buttons th:not(.rt-group-corner) span:not(.rt-column-resize):before { - content: var(--datagrid-column-edit-button--content, "Edit"); -} - -perspective-viewer:not([settings]) { - @include design-slash-architecture-bug; + content: var(--psp-datagrid--column-edit-button--content, "Edit"); } +perspective-viewer:not([settings]), :host-context(perspective-viewer:not([settings])) { - @include design-slash-architecture-bug; + regular-table #psp-column-edit-buttons:after { + content: none; + } } -// Style the last row of the `` so that is has a bottom border. +/* Style the last row of the `` so that is has a bottom border. */ regular-table table thead tr:last-child:after { width: 10000px; box-sizing: border-box; display: block; height: 23px; content: " "; - border-bottom: 1px solid var(--inactive--border-color); + border-bottom: 1px solid var(--psp-inactive--border-color); } -// Extend every row to the right edge of the page with a fake column. +/* Extend every row to the right edge of the page with a fake column. */ regular-table table tbody tr:after { width: 10000px; box-sizing: border-box; @@ -454,15 +460,15 @@ regular-table table tbody tr:after { } regular-table table tbody tr:not(:first-child):after { - border-top: 1px solid var(--inactive--border-color); + border-top: 1px solid var(--psp-inactive--border-color); } regular-table table tbody tr:hover:not(:first-child):after { - border-top: 1px solid var(--rt-hover--border-color); + border-top: 1px solid var(--psp-datagrid--hover--border-color); } regular-table table tbody tr:hover + tr:after { - border-top: 1px solid var(--rt-hover--border-color); + border-top: 1px solid var(--psp-datagrid--hover--border-color); } @keyframes pulse_pos { diff --git a/packages/viewer-datagrid/src/less/row-hover.less b/packages/viewer-datagrid/src/css/row-hover.css similarity index 66% rename from packages/viewer-datagrid/src/less/row-hover.less rename to packages/viewer-datagrid/src/css/row-hover.css index 008ac0eb39..c5c5c54a77 100644 --- a/packages/viewer-datagrid/src/less/row-hover.less +++ b/packages/viewer-datagrid/src/css/row-hover.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ regular-table { tbody { @@ -18,24 +19,29 @@ regular-table { th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected), tr:hover td:not(.psp-row-selected):not(.psp-row-subselected), tr:hover:after { - border-color: var(--rt-hover--border-color, #c5c9d080) !important; - box-shadow: 0px 1px 0px var(--rt-hover--border-color, #c5c9d080); + border-color: var( + --psp-datagrid--hover--border-color, + #c5c9d080 + ) !important; + box-shadow: 0px 1px 0px + var(--psp-datagrid--hover--border-color, #c5c9d080); &.psp-menu-open { box-shadow: - inset -2px 0px 0px var(--icon--color), - inset 2px 0px 0px var(--icon--color), - 0px 1px 0px var(--rt-hover--border-color, #c5c9d080); + inset -2px 0px 0px var(--psp--color), + inset 2px 0px 0px var(--psp--color), + 0px 1px 0px + var(--psp-datagrid--hover--border-color, #c5c9d080); } } tr:last-child:hover td:not(.psp-row-selected):not(.psp-row-subselected).psp-menu-open { box-shadow: - inset -2px 0px 0px var(--icon--color), - inset 2px 0px 0px var(--icon--color), - inset 0px -2px 0px var(--icon--color), - 0px 1px 0px var(--rt-hover--border-color, #c5c9d080); + inset -2px 0px 0px var(--psp--color), + inset 2px 0px 0px var(--psp--color), + inset 0px -2px 0px var(--psp--color), + 0px 1px 0px var(--psp-datagrid--hover--border-color, #c5c9d080); } tr:hover @@ -71,7 +77,7 @@ regular-table { th:first-child:empty ~ th:empty + th:not(:empty), td:first-child { border-left-color: var( - --rt-hover--border-color, + --psp-datagrid--hover--border-color, #c5c9d080 ) !important; } @@ -79,7 +85,7 @@ regular-table { th:last-child, td:last-child { border-right-color: var( - --rt-hover--border-color, + --psp-datagrid--hover--border-color, #c5c9d080 ) !important; } diff --git a/packages/viewer-datagrid/src/less/scrollbar.less b/packages/viewer-datagrid/src/css/scrollbar.css similarity index 63% rename from packages/viewer-datagrid/src/less/scrollbar.less rename to packages/viewer-datagrid/src/css/scrollbar.css index f2b6b332ec..70d6a3c70e 100644 --- a/packages/viewer-datagrid/src/less/scrollbar.less +++ b/packages/viewer-datagrid/src/css/scrollbar.css @@ -1,20 +1,21 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ -// Scrollbar styling +/* Scrollbar styling */ regular-table { outline: none; - // webkit (chrome, safari, etc) scrollbar styling + /* webkit (chrome, safari, etc) scrollbar styling */ &::-webkit-scrollbar, &::-webkit-scrollbar-corner { background-color: transparent; @@ -24,8 +25,8 @@ regular-table { &::-webkit-scrollbar-thumb { background-clip: content-box; - background: var(--icon--color); - border: 5.5px solid var(--plugin--background); + background: var(--psp--color); + border: 5.5px solid var(--psp--background-color); max-height: 50%; max-width: 50%; min-width: 10%; diff --git a/packages/viewer-datagrid/src/less/sub-cell-scroll.less b/packages/viewer-datagrid/src/css/sub-cell-scroll.css similarity index 79% rename from packages/viewer-datagrid/src/less/sub-cell-scroll.less rename to packages/viewer-datagrid/src/css/sub-cell-scroll.css index 2749c77e39..c85944f134 100644 --- a/packages/viewer-datagrid/src/less/sub-cell-scroll.less +++ b/packages/viewer-datagrid/src/css/sub-cell-scroll.css @@ -1,17 +1,18 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ -// Handles sub-cell scrolling via CSS transform offset by variables set during -// rendering. +/* Handles sub-cell scrolling via CSS transform offset by variables set during */ +/* rendering. */ perspective-viewer-datagrid:not(.sub-cell-scroll-disabled) regular-table table, :host(:not(.sub-cell-scroll-disabled)) regular-table table { tbody td, diff --git a/packages/viewer-datagrid/src/less/toolbar.less b/packages/viewer-datagrid/src/css/toolbar.css similarity index 63% rename from packages/viewer-datagrid/src/less/toolbar.less rename to packages/viewer-datagrid/src/css/toolbar.css index a205a504ea..ccab11e478 100644 --- a/packages/viewer-datagrid/src/less/toolbar.less +++ b/packages/viewer-datagrid/src/css/toolbar.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { position: relative; @@ -42,9 +43,9 @@ &:hover { box-shadow: - -4px 0 0 var(--icon--color), - 4px 0 0 var(--icon--color); - background-color: var(--icon--color); + -4px 0 0 var(--psp--color), + 4px 0 0 var(--psp--color); + background-color: var(--psp--color); } } @@ -54,11 +55,11 @@ } #scroll_lock.lock-scroll:before { - -webkit-mask-image: var(--toolbar-scroll-lock-active--content); + -webkit-mask-image: var(--psp-toolbar-scroll-lock-active--content); } #scroll_lock:before { - -webkit-mask-image: var(--toolbar-scroll-lock--content); + -webkit-mask-image: var(--psp-toolbar-scroll-lock--content); } #select_mode:before { @@ -70,69 +71,75 @@ } #edit_mode[data-edit-mode="READ_ONLY"]:before { - -webkit-mask-image: var(--toolbar-edit-mode--read-only--content); + -webkit-mask-image: var(--psp-toolbar-edit-mode-read-only--content); } #edit_mode[data-edit-mode="EDIT"]:before { - -webkit-mask-image: var(--toolbar-edit-mode--edit--content); + -webkit-mask-image: var(--psp-toolbar-edit-mode-edit--content); } :host(.aggregated) #toolbar #edit_mode[data-edit-mode="EDIT"]:before { - -webkit-mask-image: var(--toolbar-edit-mode--read-only--content); + -webkit-mask-image: var(--psp-toolbar-edit-mode-read-only--content); } #edit_mode[data-edit-mode="SELECT_ROW"]:before { - -webkit-mask-image: var(--toolbar-edit-mode--select-row--content); + -webkit-mask-image: var(--psp-toolbar-edit-mode-select-row--content); } #edit_mode[data-edit-mode="SELECT_COLUMN"]:before { - -webkit-mask-image: var(--toolbar-edit-mode--select-column--content); + -webkit-mask-image: var(--psp-toolbar-edit-mode-select-column--content); } #edit_mode[data-edit-mode="SELECT_REGION"]:before { - -webkit-mask-image: var(--toolbar-edit-mode--select-region--content); + -webkit-mask-image: var(--psp-toolbar-edit-mode-select-region--content); } -// #edit_mode span:before { -// content: var(--edit-mode-toggle--content, "N/A"); -// } +/* #edit_mode span:before { */ +/* content: var(--edit-mode-toggle--content, "N/A"); */ +/* } */ #edit_mode[data-edit-mode="READ_ONLY"] span:before { - content: var(--edit-mode--read-only--content, "Read Only"); + content: var(--psp-label--edit-mode-read-only--content, "Read Only"); } #edit_mode[data-edit-mode="EDIT"] span:before { - content: var(--edit-mode--edit--content, "Editable"); + content: var(--psp-label--edit-mode-edit--content, "Editable"); } #edit_mode[data-edit-mode="SELECT_ROW"] span:before { - content: var(--edit-mode--select-row--content, "Row Select"); + content: var(--psp-label--edit-mode-select-row--content, "Row Select"); } #edit_mode[data-edit-mode="SELECT_COLUMN"] span:before { - content: var(--edit-mode--select-column--content, "Column Select"); + content: var( + --psp-label--edit-mode-select-column--content, + "Column Select" + ); } #edit_mode[data-edit-mode="SELECT_REGION"] span:before { - content: var(--edit-mode--select-region--content, "Region Select"); + content: var( + --psp-label--edit-mode-select-region--content, + "Region Select" + ); } #scroll_lock span:before { - content: var(--scroll-lock-toggle--content, "Free Scroll"); + content: var(--psp-label--scroll-lock-toggle--content, "Free Scroll"); } #scroll_lock.lock-scroll span:before { - content: var(--scroll-lock-alt-toggle--content, "Align Scroll"); + content: var(--psp-label--scroll-lock-alt-toggle--content, "Align Scroll"); } -// The icon. +/* The icon. */ .button:before { width: 21px; height: 21px; content: ""; -webkit-mask-size: cover; mask-size: cover; - background-color: var(--icon--color); + background-color: var(--psp--color); } .button.editable:before, @@ -167,8 +174,8 @@ .hover-target:focus-within .button, .hover-target:hover .button { position: relative; - background-color: var(--icon--color); - color: var(--plugin--background); + background-color: var(--psp--color); + color: var(--psp--background-color); opacity: 1; display: flex; align-items: center; @@ -177,10 +184,10 @@ .hover-target:focus-within .button:before, .hover-target:hover .button:before { - background-color: var(--plugin--background); + background-color: var(--psp--background-color); } -// The label. +/* The label. */ .hover-target:focus-within .button > span, .hover-target:hover .button > span { display: block; @@ -194,7 +201,7 @@ white-space: pre-wrap; line-height: 1; font-size: 9px; - background-color: var(--icon--color); + background-color: var(--psp--color); width: 35px; text-align: center; border-radius: 0 0 3px 3px; diff --git a/packages/viewer-datagrid/src/less/mitered-headers.less b/packages/viewer-datagrid/src/less/mitered-headers.less deleted file mode 100644 index f42ec4b5cf..0000000000 --- a/packages/viewer-datagrid/src/less/mitered-headers.less +++ /dev/null @@ -1,65 +0,0 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -.psp-header-border:not(.psp-is-top):not(.psp-header-leaf) { - // right - box-shadow: 1px 0px var(--inactive--border-color, #8b868045); -} - -.psp-header-group { - // bottom - box-shadow: 0px 10px 0 -9px var(--inactive--border-color, #8b868045); -} - -.psp-is-top { - // top-miter-right - box-shadow: 5px 4px 0px -4px var(--inactive--border-color, #8b868045); -} - -.psp-is-top.psp-header-group:not(.psp-header-group-corner) { - // top-miter-right and bottom - box-shadow: - 5px 4px 0px -4px var(--inactive--border-color, #8b868045), - 0px 10px 0 -9px var(--inactive--border-color, #8b868045); -} - -.psp-header-border.psp-header-group { - &:not(.psp-is-top):not(.psp-header-group-corner) { - // right and bottom - box-shadow: - 1px 0px var(--inactive--border-color, #8b868045), - 0px 10px 0 -9px var(--inactive--border-color, #8b868045); - } -} - -@mixin disabled-menu-funky-box-shadow { - tr.rt-autosize .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) { - box-shadow: 1px 0px var(--inactive--border-color, #8b868045); - } -} - -perspective-viewer[settings] { - @include disabled-menu-funky-box-shadow; -} - -:host-context(perspective-viewer[settings]) { - @include disabled-menu-funky-box-shadow; -} - -.psp-header-leaf.psp-header-border { - // bottom-miter-right - box-shadow: 5px -4px 0px -4px var(--inactive--border-color, #8b868045); -} - -tr:only-child th { - box-shadow: none !important; -} diff --git a/packages/viewer-datagrid/src/ts/model/create.ts b/packages/viewer-datagrid/src/ts/model/create.ts index 20b481835a..aa29b70c2b 100644 --- a/packages/viewer-datagrid/src/ts/model/create.ts +++ b/packages/viewer-datagrid/src/ts/model/create.ts @@ -152,15 +152,15 @@ export async function createModel( ]); const _plugin_background = chroma( - get_rule(regular, "--plugin--background", "#FFFFFF"), + get_rule(regular, "--psp--background-color", "#FFFFFF"), ).rgb(); const _pos_fg_color = make_color_record( - get_rule(regular, "--rt-pos-cell--color", "#338DCD"), + get_rule(regular, "--psp-datagrid--pos-cell--color", "#338DCD"), ); const _neg_fg_color = make_color_record( - get_rule(regular, "--rt-neg-cell--color", "#FF5942"), + get_rule(regular, "--psp-datagrid--neg-cell--color", "#FF5942"), ); const _pos_bg_color = make_color_record( @@ -172,7 +172,7 @@ export async function createModel( ); const _color = make_color_record( - get_rule(regular, "--active--color", "#ff0000"), + get_rule(regular, "--psp-active--color", "#ff0000"), ); const _schema: Schema = { diff --git a/packages/viewer-datagrid/src/ts/style_handlers/body.ts b/packages/viewer-datagrid/src/ts/style_handlers/body.ts index 97462ae06e..7031d74136 100644 --- a/packages/viewer-datagrid/src/ts/style_handlers/body.ts +++ b/packages/viewer-datagrid/src/ts/style_handlers/body.ts @@ -94,7 +94,7 @@ export function applyBodyCellStyles( } else if (type === "string") { cell_style_string.call(this, plugin as any, td, metadata as any); } else if (type === "date" || type === "datetime") { - cell_style_datetime.call(this, plugin as any, td, metadata as any); + cell_style_datetime.call(this, plugin as any, td, metadata); } else { td.style.backgroundColor = ""; td.style.color = ""; diff --git a/packages/viewer-datagrid/src/ts/style_handlers/table_cell/datetime.ts b/packages/viewer-datagrid/src/ts/style_handlers/table_cell/datetime.ts index 37764db082..8a37381278 100644 --- a/packages/viewer-datagrid/src/ts/style_handlers/table_cell/datetime.ts +++ b/packages/viewer-datagrid/src/ts/style_handlers/table_cell/datetime.ts @@ -17,20 +17,23 @@ import { } from "../../color_utils.js"; import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js"; +interface PluginWithColor extends Omit { + color?: ColorRecord; +} + export function cell_style_datetime( this: DatagridModel, - plugin: ColumnConfig, + plugin: PluginWithColor, td: HTMLElement, metadata: CellMetadata, ): void { - const colorRecord: ColorRecord = //(() => { - // if (plugin?.color !== undefined) { - // return plugin.color; - // } else { - // return - this._color; - // } - // })(); + const colorRecord: ColorRecord = (() => { + if (plugin?.color !== undefined) { + return plugin.color; + } else { + return this._color; + } + })(); const [hex, r, g, b] = colorRecord; diff --git a/packages/viewer-openlayers/build.mjs b/packages/viewer-openlayers/build.mjs index 3db0ef7334..b243b3848b 100644 --- a/packages/viewer-openlayers/build.mjs +++ b/packages/viewer-openlayers/build.mjs @@ -12,12 +12,12 @@ import { NodeModulesExternal } from "@perspective-dev/esbuild-plugin/external.js"; import { build } from "@perspective-dev/esbuild-plugin/build.js"; -import { BuildCss } from "@prospective.co/procss/target/cjs/procss.js"; +import { bundleAsync as bundleCssAsync } from "lightningcss"; import * as fs from "node:fs"; -import * as path_mod from "node:path"; -import { createRequire } from "node:module"; - -const _require = createRequire(import.meta.url); +import { + resolveNPM, + inlineUrlVisitor, +} from "@perspective-dev/viewer/tools.mjs"; const BUILD = [ { @@ -42,19 +42,14 @@ const BUILD = [ async function compile_css() { fs.mkdirSync("dist/css", { recursive: true }); - const builder = new BuildCss(""); - builder.add( - "ol/ol.css", - fs.readFileSync(_require.resolve("ol/ol.css")).toString(), - ); - builder.add( - "./plugin.less", - fs.readFileSync("./src/less/plugin.less").toString(), - ); - fs.writeFileSync( - "dist/css/perspective-viewer-openlayers.css", - builder.compile().get("plugin.css"), - ); + const filename = "./src/css/perspective-viewer-openlayers.css"; + const { code } = await bundleCssAsync({ + filename, + minify: true, + resolver: resolveNPM(import.meta.url), + visitor: inlineUrlVisitor(filename), + }); + fs.writeFileSync("dist/css/perspective-viewer-openlayers.css", code); } async function build_all() { diff --git a/packages/viewer-openlayers/package.json b/packages/viewer-openlayers/package.json index 38ddf05996..0fa212a409 100644 --- a/packages/viewer-openlayers/package.json +++ b/packages/viewer-openlayers/package.json @@ -35,6 +35,6 @@ "devDependencies": { "@perspective-dev/esbuild-plugin": "workspace:", "@perspective-dev/test": "workspace:", - "@prospective.co/procss": "catalog:" + "lightningcss": "catalog:" } } diff --git a/packages/viewer-openlayers/src/css/perspective-viewer-openlayers.css b/packages/viewer-openlayers/src/css/perspective-viewer-openlayers.css new file mode 100644 index 0000000000..e5578b0dac --- /dev/null +++ b/packages/viewer-openlayers/src/css/perspective-viewer-openlayers.css @@ -0,0 +1,2 @@ +@import "ol/ol.css"; +@import "./plugin.css"; diff --git a/packages/viewer-openlayers/src/less/plugin.less b/packages/viewer-openlayers/src/css/plugin.css similarity index 73% rename from packages/viewer-openlayers/src/less/plugin.less rename to packages/viewer-openlayers/src/css/plugin.css index c67767eae6..45ef4dc91a 100644 --- a/packages/viewer-openlayers/src/less/plugin.less +++ b/packages/viewer-openlayers/src/css/plugin.css @@ -1,16 +1,17 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ -@import "ol/ol.css"; +/* @import "ol/ol.css"; */ :host { #container { @@ -28,13 +29,13 @@ } & .ol-attribution { - filter: var(--map-attribution--filter, none); + filter: var(--psp-openlayers--attribution--filter, none); } & .map-tooltip { position: absolute; display: none; - background: var(--map-element-background, #eee); + background: var(--psp-openlayers--element--background, #eee); border: 1px solid #888; border-radius: 5px; padding: 5px; @@ -75,7 +76,7 @@ right: 4em; width: 80px; height: 122px; - background: var(--map-element-background, #eee); + background: var(--psp-openlayers--element--background, #eee); border-radius: 5px; pointer-events: none; opacity: 0.8; @@ -86,7 +87,7 @@ } & .tick line { - color: var(--map-element-background, #eee); + color: var(--psp-openlayers--element--background, #eee); } } } diff --git a/packages/viewer-openlayers/src/themes/material.dark.css b/packages/viewer-openlayers/src/themes/material.dark.css new file mode 100644 index 0000000000..4ce33c568a --- /dev/null +++ b/packages/viewer-openlayers/src/themes/material.dark.css @@ -0,0 +1,41 @@ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */ + +perspective-viewer { + --map-element-background: #333333; + + /* colors for categories 1 to 11 */ + --map-category-1: #1f77b4; + --map-category-2: #0366d6; + --map-category-3: #ff7f0e; + --map-category-4: #2ca02c; + --map-category-5: #d62728; + --map-category-6: #9467bd; + --map-category-7: #8c564b; + --map-category-8: #e377c2; + --map-category-9: #7f7f7f; + --map-category-10: #bcbd22; + --map-category-11: #17becf; + + /* color gradient when color value is selected */ + --map-gradient: linear-gradient( + #4d342f 0%, + #e4521b 22.5%, + #decb45 42.5%, + #a0a0a0 50%, + #bccda8 57.5%, + #42b3d5 67.5%, + #1a237e 100% + ); + + --map-tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"; +} diff --git a/packages/viewer-openlayers/src/themes/material.dark.less b/packages/viewer-openlayers/src/themes/material.dark.less deleted file mode 100644 index badbe2c5dc..0000000000 --- a/packages/viewer-openlayers/src/themes/material.dark.less +++ /dev/null @@ -1,33 +0,0 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -perspective-viewer { - --map-element-background: #333333; - - // colors for categories 1 to 11 - --map-category-1: #1f77b4; - --map-category-2: #0366d6; - --map-category-3: #ff7f0e; - --map-category-4: #2ca02c; - --map-category-5: #d62728; - --map-category-6: #9467bd; - --map-category-7: #8c564b; - --map-category-8: #e377c2; - --map-category-9: #7f7f7f; - --map-category-10: #bcbd22; - --map-category-11: #17becf; - - // color gradient when color value is selected - --map-gradient: linear-gradient(#4d342f 0%, #e4521b 22.5%, #decb45 42.5%, #a0a0a0 50%, #bccda8 57.5%, #42b3d5 67.5%, #1a237e 100%); - - --map-tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"; -} diff --git a/packages/workspace/build.mjs b/packages/workspace/build.mjs index d271db5a32..f4eae23d3f 100644 --- a/packages/workspace/build.mjs +++ b/packages/workspace/build.mjs @@ -15,13 +15,20 @@ import { WasmPlugin } from "@perspective-dev/esbuild-plugin/wasm.js"; import { WorkerPlugin } from "@perspective-dev/esbuild-plugin/worker.js"; import { ResolvePlugin } from "@perspective-dev/esbuild-plugin/resolve.js"; import { build } from "@perspective-dev/esbuild-plugin/build.js"; -import { BuildCss } from "@prospective.co/procss/target/cjs/procss.js"; +import { + bundle as bundleCss, + bundleAsync as bundleCssAsync, +} from "lightningcss"; import * as fs from "node:fs"; -import { createRequire } from "node:module"; +// import { createRequire } from "node:module"; +import { + inlineUrlVisitor, + resolveNPM, +} from "@perspective-dev/viewer/tools.mjs"; import "zx/globals"; -const _require = createRequire(import.meta.url); +// const _require = createRequire(import.meta.url); const BUILD = [ { @@ -66,81 +73,42 @@ const BUILD = [ }, ]; -function add(builder, path, path2) { - builder.add( - path, - fs.readFileSync(_require.resolve(path2 || path)).toString(), - ); -} - async function build_all() { - fs.mkdirSync("build/css", { recursive: true }); fs.mkdirSync("dist/css", { recursive: true }); - const builder3 = new BuildCss(""); - - add(builder3, "@lumino/widgets/style/widget.css"); - add(builder3, "@lumino/widgets/style/accordionpanel.css"); - add(builder3, "@lumino/widgets/style/commandpalette.css"); - add(builder3, "@lumino/widgets/style/dockpanel.css"); - add(builder3, "@lumino/widgets/style/menu.css"); - add(builder3, "@lumino/widgets/style/menubar.css"); - add(builder3, "@lumino/widgets/style/scrollbar.css"); - add(builder3, "@lumino/widgets/style/splitpanel.css"); - add(builder3, "@lumino/widgets/style/tabbar.css"); - add(builder3, "@lumino/widgets/style/tabpanel.css"); - - add(builder3, "@lumino/widgets/style/menu.css"); - add(builder3, "@lumino/widgets/style/index.css"); - - add(builder3, "./tabbar.less", "./src/less/tabbar.less"); - add(builder3, "./dockpanel.less", "./src/less/dockpanel.less"); - add(builder3, "./widget.less", "./src/less/widget.less"); - - add(builder3, "./viewer.less", "./src/less/viewer.less"); - add(builder3, "./menu.less", "./src/less/menu.less"); - add(builder3, "./workspace.less", "./src/less/workspace.less"); - add(builder3, "./injected.less", "./src/less/injected.less"); - fs.writeFileSync( - "build/css/workspace.css", - builder3.compile().get("workspace.css"), - ); - - fs.writeFileSync( - "build/css/injected.css", - builder3.compile().get("injected.css"), - ); - - const pro = new BuildCss("./src/themes"); - add(pro, "icons.less", "@perspective-dev/viewer/src/themes/icons.less"); - add(pro, "intl.less", "@perspective-dev/viewer/src/themes/intl.less"); - add(pro, "pro.less", "@perspective-dev/viewer/src/themes/pro.less"); - add(pro, "output.scss", "./src/themes/pro.less"); - fs.writeFileSync("dist/css/pro.css", pro.compile().get("output.css")); - - const pro_dark = new BuildCss("./src/themes"); - add( - pro_dark, - "icons.less", - "@perspective-dev/viewer/src/themes/icons.less", - ); - add(pro_dark, "intl.less", "@perspective-dev/viewer/src/themes/intl.less"); - add(pro_dark, "pro.less", "@perspective-dev/viewer/src/themes/pro.less"); - add( - pro_dark, - "pro-dark.less", - "@perspective-dev/viewer/src/themes/pro-dark.less", - ); - // add(builder2, "@perspective-dev/viewer/src/themes/pro-dark.less"); - // add(builder2, "pro-workspace.less", "./src/themes/pro.less"); - // add(builder2, "@perspective-dev/viewer/src/themes/variables.less"); - add(pro_dark, "output.scss", "./src/themes/pro-dark.less"); - fs.writeFileSync( - "dist/css/pro-dark.css", - pro_dark.compile().get("output.css"), - ); - + const { code: wsCode } = await bundleCssAsync({ + filename: "./src/css/workspace.css", + resolver: resolveNPM(import.meta.url), + minify: true, + errorRecovery: true, + visitor: inlineUrlVisitor("./src/css/workspace.css"), + }); + + fs.writeFileSync("dist/css/workspace.css", wsCode); + const { code: injCode } = await bundleCssAsync({ + filename: "./src/css/injected.css", + resolver: resolveNPM(import.meta.url), + minify: true, + errorRecovery: true, + visitor: inlineUrlVisitor("./src/css/workspace.css"), + }); + + // Workspace themes — bundle with lightningcss (resolves @imports) + fs.writeFileSync("dist/css/injected.css", injCode); + const { code: proCode } = bundleCss({ + filename: "./src/themes/pro.css", + minify: true, + visitor: inlineUrlVisitor("./src/themes/pro.css"), + }); + + fs.writeFileSync("dist/css/pro.css", proCode); + const { code: proDarkCode } = bundleCss({ + filename: "./src/themes/pro-dark.css", + minify: true, + visitor: inlineUrlVisitor("./src/themes/pro-dark.css"), + }); + + fs.writeFileSync("dist/css/pro-dark.css", proDarkCode); await Promise.all(BUILD.map(build)).catch(() => process.exit(1)); - try { await $`tsc --project ./tsconfig.json`.stdio( "inherit", diff --git a/packages/workspace/package.json b/packages/workspace/package.json index 946e348eb7..ce8c40c340 100644 --- a/packages/workspace/package.json +++ b/packages/workspace/package.json @@ -45,7 +45,7 @@ }, "devDependencies": { "@perspective-dev/viewer": "workspace:", - "@prospective.co/procss": "catalog:", + "lightningcss": "catalog:", "@perspective-dev/esbuild-plugin": "workspace:", "@perspective-dev/test": "workspace:", "@types/lodash": "catalog:", diff --git a/packages/workspace/src/css/dockpanel.css b/packages/workspace/src/css/dockpanel.css new file mode 100644 index 0000000000..38f1932bca --- /dev/null +++ b/packages/workspace/src/css/dockpanel.css @@ -0,0 +1,110 @@ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ + +:host { + .lm-DockPanel { + overflow: var(--dock-panel--overflow, hidden); + position: absolute; + background-color: var(--detail--background-color, transparent); + padding: var(--psp-workspace--spacing); + top: 0; + left: 0; + right: 0; + bottom: 0; + &[data-mode="single-document"] { + padding: 0px; + } + } + + .lm-Widget, + .lm-Widget { + cursor: inherit; + } + + .lm-DockPanel.ew, + .lm-DockPanel.ew .lm-Widget, + .lm-SplitPanel.ew, + .lm-SplitPanel.ew .lm-Widget { + cursor: ew-resize !important; + } + + .lm-DockPanel.ns, + .lm-DockPanel.ns .lm-Widget, + .lm-SplitPanel.ns, + .lm-SplitPanel.ns .lm-Widget { + cursor: ns-resize !important; + } + + .workspace-master-widget { + min-width: 100px !important; + } + + .lm-DockPanel.resizing ::slotted(perspective-viewer), + .lm-SplitPanel.resizing ::slotted(perspective-viewer) { + pointer-events: none; + } + + .widget-blur ::slotted(perspective-viewer) { + opacity: 0.5; + } + + .lm-DockPanel-handle.resizing { + background-color: rgba(0, 0, 0, 0.05); + } + + .perspective-scroll-panel { + overflow: auto !important; + } + + .lm-Panel { + min-height: 100%; + } + + .lm-DockPanel-handle { + background-color: none; + } + + .lm-SplitPanel-handle { + background-color: var( + --psp-workspace--split-panel-handle--background-color + ); + } + + .lm-SplitPanel-handle, + .lm-DockPanel-handle { + transition: background-color 0.3s ease-out; + &:hover { + background-color: rgba(0, 0, 0, 0.05); + } + } + + .lm-DockPanel-handle[data-orientation="horizontal"] { + width: 10px !important; + margin-left: -5px; + } + + .lm-DockPanel-handle[data-orientation="vertical"] { + height: 10px !important; + margin-top: -5px; + } + + .lm-DockPanel-overlay { + background: rgba(75, 75, 75, 0.2); + border: 1px dashed #666; + border-radius: 6px; + transition-property: top, left, right, bottom; + transition-duration: 50ms; + transition-timing-function: linear; + margin: 0px; + } +} diff --git a/packages/workspace/src/less/injected.less b/packages/workspace/src/css/injected.css similarity index 61% rename from packages/workspace/src/less/injected.less rename to packages/workspace/src/css/injected.css index 1ff896c656..96454e54ed 100644 --- a/packages/workspace/src/less/injected.less +++ b/packages/workspace/src/css/injected.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ -@import "./viewer.less"; -@import "./menu.less"; +@import "./viewer.css"; +@import "./menu.css"; diff --git a/packages/workspace/src/css/menu.css b/packages/workspace/src/css/menu.css new file mode 100644 index 0000000000..a431917453 --- /dev/null +++ b/packages/workspace/src/css/menu.css @@ -0,0 +1,130 @@ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ + +@import "@lumino/widgets/style/menu.css"; + +:host { + .lm-Menu { + font-size: 12px; + padding: 8px; + background-color: var(--psp--background-color); + color: var(--psp--color); + border: 1px solid var(--psp-inactive--color); + border-radius: 3px; + max-width: 350px; + top: 0; + left: 0; + } + + .lm-Menu.perspective-workspace-menu { + .lm-Menu-item { + padding-left: 37px !important; + } + } + + .lm-Menu-item.lm-mod-active { + background-color: var(--psp--color); + color: var(--psp--background-color); + } + + .lm-Menu-item.lm-mod-disabled { + opacity: 0.5; + } + + .lm-Menu-itemIcon { + width: 24px; + height: 12px; + margin-right: 4px; + } + + .lm-Menu-itemLabel { + flex: 1 1; + padding: 4px 2px 4px 2px; + } + + .lm-Menu-itemMnemonic { + text-decoration: underline; + } + + .lm-Menu-itemShortcut { + padding: 4px 0px; + } + + .lm-Menu-itemSubmenuIcon { + width: 24px; + height: 18px; + } + + .lm-Menu-item { + display: flex; + align-items: center; + outline: none; + + margin: 0 -8px; + padding: 0 8px; + } + + .lm-Menu-item[data-type="separator"] > div { + padding: 0; + height: 9px; + } + + .lm-Menu-item[data-type="separator"] > div::after { + content: ""; + display: block; + position: relative; + top: 4px; + border-top: 1px solid; + } + + .lm-MenuBar-menu { + transform: translateY(-1px); + } + + .lm-MenuBar-item { + padding: 10px 32px; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + color: #737373 !important; + } + + .lm-MenuBar-item.lm-mod-active { + background: rgba(0, 0, 0, 0.2); + } + + .lm-MenuBar.lm-mod-active .lm-MenuBar-item.lm-mod-active { + z-index: 10001; + background: rgba(0, 0, 0, 0.2); + /* border-left: 1px solid #c0c0c0; */ + /* border-right: 1px solid #c0c0c0; */ + } + + .lm-Menu-itemIcon:before { + content: attr(content); + font-family: + "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", + "Liberation Mono", monospace; + } + + [data-type="submenu"] .lm-Menu-itemSubmenuIcon:before { + content: ">"; + font-family: + "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", + "Liberation Mono", monospace; + height: 18px; + } + + .lm-mod-drag-image.lm-TabBar-tab { + display: none; + } +} diff --git a/packages/workspace/src/css/tabbar.css b/packages/workspace/src/css/tabbar.css new file mode 100644 index 0000000000..fcc85cff51 --- /dev/null +++ b/packages/workspace/src/css/tabbar.css @@ -0,0 +1,378 @@ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ + +:host { + .lm-TabBar-tabLabel { + background-color: transparent; + border: none; + color: var(--psp--color, #666); + cursor: pointer; + padding: 0px 6px; + margin: 0; + margin-left: 15.5px; + margin-right: auto; + flex: 0 1 auto; + border-radius: 3px; + &:hover { + background-color: var(--psp--color); + color: var(--psp--background-color); + } + } + + /* .p-TabBar-tabLabel[value="[untitled]"] { */ + /* color: #ddd !important; */ + /* } */ + + .lm-TabBar-tabLabel:focus { + outline: none; + color: var(--workspace-secondary--color, #666) !important; + cursor: text; + } + + .lm-TabBar-tab.lm-mod-closable > .lm-TabBar-tabCloseIcon:before { + content: var(--close-button--content, "\2715"); + } + + .lm-TabBar-tab > .lm-TabBar-tabConfigIcon:before { + content: var(--open-settings-button--content, "\1F527"); + font-family: var(--settings--font-family, "Arial"); + transition: color 0.5s ease; + } + + .lm-TabBar-tab.lm-mod-current.settings_open + > .lm-TabBar-tabConfigIcon:before { + content: var(--close-settings-button--content, "\1F527"); + } + + .lm-TabBar-tab.lm-mod-current.linked > .lm-TabBar-tabConfigIcon:before { + color: #22a0ce; + } + + .lm-TabBar-tab > .lm-TabBar-tabConfigIcon { + opacity: 0; + pointer-events: none; + } + + .lm-TabBar-tab.lm-mod-current > .lm-TabBar-tabConfigIcon { + opacity: 1; + pointer-events: all; + } + + .lm-mod-current { + .lm-TabBar-tabConfigIcon, + .lm-TabBar-tabCloseIcon { + color: inherit; + transition: color 0.2s ease-out; + } + + .lm-TabBar-tabConfigIcon:hover, + .lm-TabBar-tabCloseIcon:hover { + color: #1a7da1; + transition: color 0.2s ease-out; + } + } + + .lm-BoxPanel { + overflow: scroll !important; + } + + .lm-TabBar, + .lm-TabBar-tab { + position: relative; + + overflow: visible !important; + } + + .lm-TabBar-tabLabel:empty::after { + content: "untitled"; + color: #aaa; + } + + .lm-mod-current .lm-TabBar-tabLabel:empty::after { + color: #ddd; + } + + .lm-TabBar-tabLabel:empty::after { + content: "untitled"; + } + + .divider { + left: 32px; + bottom: 0; + position: absolute; + right: 32px; + + height: 1px; + background-color: var(--psp-workspace--tabbar--border-color); + margin-bottom: 0px; + } + + .lm-TabBar-tab .drag-handle { + pointer-events: all; + height: 12px; + width: 14px; + -webkit-mask-image: var(--psp-icon--column-drag-handle--mask-image); + mask-image: var(--psp-icon--column-drag-handle--mask-image); + padding: 12px 0 12px 12px; + background-repeat: no-repeat; + background-color: var(--psp--color, red); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: auto; + mask-position: center; + mask-repeat: no-repeat; + } + + .lm-TabBar { + /* z-index: -1; */ + pointer-events: none; + .lm-TabBar-tabCloseIcon { + pointer-events: all; + } + + .bookmarks-button { + pointer-events: all; + } + } + + .lm-TabBar-tab.lm-mod-hidden { + display: flex !important; + opacity: 0.5; + } + + .lm-TabBar-tab.lm-mod-current .divider { + display: block; + } + + .pfm-button-base { + background: white !important; + } + + .pfm-button-base:active { + background: #016bc6 !important; + } + + .lm-TabBar-content { + padding: 0px; + border-bottom: 0px solid #fff !important; + border-left: #eaeaea; + border-right: #eaeaea; + } + + .lm-TabBar-tab.lm-mod-current { + .shadow { + margin: -1px; + position: absolute; + width: calc(100% + 2px); + height: 200%; + pointer-events: none; + left: 0px; + } + + &.settings_open .shadow { + box-shadow: none; + } + } + + .lm-TabBar-tab { + /* margin: 0px 4px; */ + border-color: #eaeaea; + align-items: center; + } + + .lm-TabBar-content.inactive-blur > .lm-TabBar-tab { + background-color: var( + --workspace-inactive-blur--background-color, + transparent + ); + } + + .condensed .lm-TabBar-content { + & > .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabConfigIcon { + display: block; + } + + & > .lm-TabBar-tab.lm-mod-current.settings_open { + .lm-TabBar-tabLabel { + margin-left: 0px; + } + } + } + + .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.settings_open { + border-width: 1px 1px 0px 1px !important; + border-color: var(--psp-workspace--tabbar--border-color, #ddd); + + .lm-TabBar-tabToolbar { + display: flex; + } + + .divider { + height: 1px; + margin-bottom: 0px; + background-color: var(--psp-workspace--tabbar--border-color, #ddd); + } + + &:last-child:first-child .divider { + transition: none; + } + } + + .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.perspective_updating { + .lm-TabBar-tabConfigIcon { + display: none; + } + + .lm-TabBar-tabLoadingIcon { + display: block; + } + } + + .lm-TabBar-content > .lm-TabBar-tab { + max-width: 100000px !important; + flex: 0 1 100000px !important; + background: none; + color: #737373; + height: 40px !important; + max-height: 40px !important; + margin-bottom: -40px; + transform: none !important; + transition: color 0.2s ease-out; + } + + .lm-TabBar-content > .lm-TabBar-tab { + color: #ccc; + } + + .lm-TabBar-content > .lm-TabBar-tab { + color: #ccc; + } + + .lm-TabBar-content > .lm-TabBar-tab:hover { + color: #ccc; + } + + .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current { + color: var(--workspace-secondary--color, #666); + } + + .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabLabel { + white-space: nowrap !important; + } + + .lm-TabBar-tabLabel { + font-family: inherit; + font-size: 12px; + line-height: 22px; + text-align: start; + white-space: normal !important; + word-break: break-all; + } + + .lm-TabBar-tabCloseIcon, + .lm-TabBar-tabConfigIcon { + cursor: pointer !important; + line-height: 22px !important; + padding-right: 16.5px !important; + } + + .lm-TabBar-tabConfigIcon { + padding-left: 8px; + padding-right: 8px !important; + } + + .lm-TabBar-tabLoadingIcon { + padding-left: 11px; + padding-right: 12px; + } + + .bottom .lm-TabBar-tab { + flex-basis: 10000px !important; + max-width: 10000px !important; + } + + .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current { + color: var(--workspace-tabbar--color, #666) !important; + /* border: var(--psp-workspace--tabbar--border, 1px solid #ddd); */ + /* border-width: var(--psp-workspace--tabbar-tab--border-width); */ + /* box-shadow: 0 13px 0 -12px var(--psp-inactive--border-color); */ + /* border-radius: var(--psp-workspace--tabbar--border-radius, 6px) */ + /* var(--psp-workspace--tabbar--border-radius, 6px) 0 0; */ + /* background-color: var(--workspace-tabbar--background-color, white); */ + background: none; + height: 40px !important; + max-height: 40px !important; + margin-bottom: -40px; + border: 0 solid transparent; + border-width: 1px 1px 0px 1px; + } + + .bottom .lm-TabBar-tab.lm-mod-current { + border: none; + } + + ::-webkit-scrollbar-thumb { + background-color: #ccc; + } + + .perspective-workspace.context-menu * .lm-TabBar.context-focus { + opacity: 1; + } + + .perspective-workspace.context-menu * .lm-TabBar, + .perspective-workspace.context-menu + .lm-Widget.workspace-widget:not(.context-focus) + .viewer-container { + opacity: 0.2; + } + + .bookmarks-button { + margin-left: 11px; + margin-right: -13px; + height: 20px; + border-radius: 3px; + border: 1px solid var(--psp-inactive--color); + background-color: var(--psp--background-color); + + &:hover { + background-color: var(--psp--color); + border-color: var(--psp--color); + } + } + + .bookmarks { + background-repeat: no-repeat; + background-color: var(--psp--color); + content: ""; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + cursor: pointer; + width: 20px; + height: 12px; + -webkit-mask-image: var(--psp-icon--bookmarks--mask-image); + mask-image: var(--psp-icon--bookmarks--mask-image); + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: auto; + mask-size: auto; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + padding: 4px 6px; + + &:hover { + background-color: var(--psp--background-color); + } + } +} diff --git a/packages/workspace/src/less/viewer.less b/packages/workspace/src/css/viewer.css similarity index 62% rename from packages/workspace/src/less/viewer.less rename to packages/workspace/src/css/viewer.css index da4463c516..af50ef46b2 100644 --- a/packages/workspace/src/less/viewer.less +++ b/packages/workspace/src/css/viewer.css @@ -1,55 +1,54 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@border-color: 1px solid #eaeaea; +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ ::slotted(.workspace-master-widget) { - --status-bar--display: none; - --config-button-icon--content: var( + --psp-status-bar--display: none; + --psp-label--config-button--content: var( --open-settings-button--content, "\1F527" ) !important; } .workspace-master-widget[settings] { - --config-button-icon--content: var( + --psp-label--config-button--content: var( --close-settings-button--content, "\1F527" ) !important; } :not(.workspace-master-widget).widget-maximize { - --config-button-icon--content: var( + --psp-label--config-button--content: var( --open-settings-button--content, "\1F527" ) !important; } :not(.workspace-master-widget).widget-maximize[settings] { - --config-button-icon--content: var( + --psp-label--config-button--content: var( --close-settings-button--content, "\1F527" ) !important; } .lm-DockPanel-widget { - border: @border-color; + border: 1px solid #eaeaea; border-width: 0px !important; min-width: 300px; min-height: 200px; } :not.workspace-master-widget { - --config-button-icon--content: "" !important; + --psp-label--config-button--content: "" !important; } .context-menu > perspective-viewer.context-focus { @@ -66,7 +65,7 @@ } :host { - --bookmarks--mask-image: url("../svg/bookmark-icon.svg"); + --psp-icon--bookmarks--mask-image: url("../svg/bookmark-icon.svg"); } ::slotted(perspective-viewer) { @@ -79,17 +78,19 @@ width: 100%; height: 100%; overflow: visible !important; - --close-button--display: flex; + --psp-close-button--display: flex; } ::slotted(perspective-viewer.bookmarks-container:not([settings])) { - --status-ok-icon--mask-image: var(--bookmarks--mask-image) !important; - --status-ok-icon--border-color: var(--inactive--color); - --status-ok-icon--hover--border-color: var(--icon--color); - --status-ok-icon--hover--background-color: var(--icon--color); - --status-ok-icon--hover--color: var(--plugin--background); - --status-ok-icon--cursor: pointer; - --status-indicator--pointer-events: all; + --psp-icon--status-ok--mask-image: var( + --psp-icon--bookmarks--mask-image + ) !important; + --psp-status-icon--ok--border-color: var(--psp-inactive--color); + --psp-status-icon--ok-hover--border-color: var(--psp--color); + --psp-status-icon--ok-hover--background-color: var(--psp--color); + --psp-status-icon--ok-hover--color: var(--psp--background-color); + --psp-status-icon--ok--cursor: pointer; + --psp-status-icon--pointer-events: all; } ::slotted(perspective-viewer::part(status-indicator)) { @@ -98,7 +99,7 @@ } ::slotted(perspective-viewer:not(.widget-maximize)) { - --status-bar--padding: 0 36px 0 8px; + --psp-status-bar--padding: 0 36px 0 8px; } :host-context(.lm-mod-override-cursor) { diff --git a/packages/workspace/src/less/widget.less b/packages/workspace/src/css/widget.css similarity index 57% rename from packages/workspace/src/less/widget.less rename to packages/workspace/src/css/widget.css index 93d03fd007..8c67d93459 100644 --- a/packages/workspace/src/less/widget.less +++ b/packages/workspace/src/css/widget.css @@ -1,24 +1,26 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@border-color: 1px solid #eaedef; +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ .lm-DockPanel:not([data-mode="single-document"]) .viewer-container { - border: var(--workspace-tabbar--border, 1px solid var(--inactive--color)); - border-width: var(--workspace-tabbar--border-width); - border-radius: var(--workspace-tabbar--border-radius, 6px) - var(--workspace-tabbar--border-radius, 6px) - var(--workspace-tabbar--border-radius, 6px) - var(--workspace-tabbar--border-radius, 6px); + border: var( + --psp-workspace--tabbar--border, + 1px solid var(--psp-inactive--color) + ); + border-width: var(--psp-workspace--tabbar--border-width); + border-radius: var(--psp-workspace--tabbar--border-radius, 6px) + var(--psp-workspace--tabbar--border-radius, 6px) + var(--psp-workspace--tabbar--border-radius, 6px) + var(--psp-workspace--tabbar--border-radius, 6px); } .viewer-container { @@ -37,6 +39,6 @@ .workspace-widget { display: flex; flex-direction: column; - border: @border-color; + border: 1px solid #eaedef; border-width: 0px !important; } diff --git a/packages/workspace/src/less/workspace.less b/packages/workspace/src/css/workspace.css similarity index 60% rename from packages/workspace/src/less/workspace.less rename to packages/workspace/src/css/workspace.css index b35231352f..0cb8c25297 100644 --- a/packages/workspace/src/less/workspace.less +++ b/packages/workspace/src/css/workspace.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ @import "@lumino/widgets/style/widget.css"; @import "@lumino/widgets/style/accordionpanel.css"; @@ -21,17 +22,28 @@ @import "@lumino/widgets/style/tabbar.css"; @import "@lumino/widgets/style/tabpanel.css"; -@import "./injected.less"; +/* @import "@lumino/widgets/style/widget.css"; +@import "@lumino/widgets/style/accordionpanel.css"; +@import "@lumino/widgets/style/commandpalette.css"; +@import "@lumino/widgets/style/dockpanel.css"; +@import "@lumino/widgets/style/menu.css"; +@import "@lumino/widgets/style/menubar.css"; +@import "@lumino/widgets/style/scrollbar.css"; +@import "@lumino/widgets/style/splitpanel.css"; +@import "@lumino/widgets/style/tabbar.css"; +@import "@lumino/widgets/style/tabpanel.css"; */ +@import "@lumino/widgets/style/index.css"; -:host { - @import "./tabbar.less"; - @import "./dockpanel.less"; - @import "./widget.less"; +@import "./injected.css"; +@import "./tabbar.css"; +@import "./dockpanel.css"; +@import "./widget.css"; - --workspace-spacing: 3px; +:host { + --psp-workspace--spacing: 3px; - // width: 100%; - // height: 100%; + /* width: 100%; */ + /* height: 100%; */ .workspace { width: 100%; @@ -44,7 +56,9 @@ } div.lm-SplitPanel-handle { - background-color: var(--workspace-split-panel-handle--background-color); + background-color: var( + --psp-workspace--split-panel-handle--background-color + ); } .master-panel { diff --git a/packages/workspace/src/less/dockpanel.less b/packages/workspace/src/less/dockpanel.less deleted file mode 100644 index acd4dfda6a..0000000000 --- a/packages/workspace/src/less/dockpanel.less +++ /dev/null @@ -1,105 +0,0 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -.lm-DockPanel { - overflow: var(--dock-panel--overflow, hidden); - position: absolute; - background-color: var(--detail--background-color, transparent); - padding: var(--workspace-spacing); - top: 0; - left: 0; - right: 0; - bottom: 0; - &[data-mode="single-document"] { - padding: 0px; - } -} - -.lm-Widget, -.lm-Widget { - cursor: inherit; -} - -.lm-DockPanel.ew, -.lm-DockPanel.ew .lm-Widget, -.lm-SplitPanel.ew, -.lm-SplitPanel.ew .lm-Widget { - cursor: ew-resize !important; -} - -.lm-DockPanel.ns, -.lm-DockPanel.ns .lm-Widget, -.lm-SplitPanel.ns, -.lm-SplitPanel.ns .lm-Widget { - cursor: ns-resize !important; -} - -.workspace-master-widget { - min-width: 100px !important; -} - -.lm-DockPanel.resizing ::slotted(perspective-viewer), -.lm-SplitPanel.resizing ::slotted(perspective-viewer) { - pointer-events: none; -} - -.widget-blur ::slotted(perspective-viewer) { - opacity: 0.5; -} - -.lm-DockPanel-handle.resizing { - background-color: rgba(0, 0, 0, 0.05); -} - -.perspective-scroll-panel { - overflow: auto !important; -} - -.lm-Panel { - min-height: 100%; -} - -.lm-DockPanel-handle { - background-color: none; -} - -.lm-SplitPanel-handle { - background-color: var(--workspace-split-panel-handle--background-color); -} - -.lm-SplitPanel-handle, -.lm-DockPanel-handle { - transition: background-color 0.3s ease-out; - &:hover { - background-color: rgba(0, 0, 0, 0.05); - } -} - -.lm-DockPanel-handle[data-orientation="horizontal"] { - width: 10px !important; - margin-left: -5px; -} - -.lm-DockPanel-handle[data-orientation="vertical"] { - height: 10px !important; - margin-top: -5px; -} - -.lm-DockPanel-overlay { - background: rgba(75, 75, 75, 0.2); - border: 1px dashed #666; - border-radius: 6px; - transition-property: top, left, right, bottom; - transition-duration: 50ms; - transition-timing-function: linear; - margin: 0px; -} diff --git a/packages/workspace/src/less/menu.less b/packages/workspace/src/less/menu.less deleted file mode 100644 index 334b9931a1..0000000000 --- a/packages/workspace/src/less/menu.less +++ /dev/null @@ -1,128 +0,0 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@import "@lumino/widgets/style/menu.css"; - -.lm-Menu { - font-size: 12px; - padding: 8px; - background-color: var(--plugin--background); - color: var(--icon--color); - border: 1px solid var(--inactive--color); - border-radius: 3px; - max-width: 350px; - top: 0; - left: 0; -} - -.lm-Menu.perspective-workspace-menu { - .lm-Menu-item { - padding-left: 37px !important; - min-width: var(--min-width); - } -} - -.lm-Menu-item.lm-mod-active { - background-color: var(--icon--color); - color: var(--plugin--background); -} - -.lm-Menu-item.lm-mod-disabled { - opacity: 0.5; -} - -.lm-Menu-itemIcon { - width: 24px; - height: 12px; - margin-right: 4px; -} - -.lm-Menu-itemLabel { - flex: 1 1; - padding: 4px 2px 4px 2px; -} - -.lm-Menu-itemMnemonic { - text-decoration: underline; -} - -.lm-Menu-itemShortcut { - padding: 4px 0px; -} - -.lm-Menu-itemSubmenuIcon { - width: 24px; - height: 18px; -} - -.lm-Menu-item { - display: flex; - align-items: center; - outline: none; - - margin: 0 -8px; - padding: 0 8px; -} - -.lm-Menu-item[data-type="separator"] > div { - padding: 0; - height: 9px; -} - -.lm-Menu-item[data-type="separator"] > div::after { - content: ""; - display: block; - position: relative; - top: 4px; - border-top: 1px solid; -} - -.lm-MenuBar-menu { - transform: translateY(-1px); -} - -.lm-MenuBar-item { - padding: 10px 32px; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - color: #737373 !important; -} - -.lm-MenuBar-item.lm-mod-active { - background: rgba(0, 0, 0, 0.2); -} - -.lm-MenuBar.lm-mod-active .lm-MenuBar-item.lm-mod-active { - z-index: 10001; - background: rgba(0, 0, 0, 0.2); - // border-left: 1px solid #c0c0c0; - // border-right: 1px solid #c0c0c0; -} - -.lm-Menu-itemIcon:before { - content: attr(content); - font-family: - "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", - "Liberation Mono", monospace; -} - -[data-type="submenu"] .lm-Menu-itemSubmenuIcon:before { - content: ">"; - font-family: - "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", - "Liberation Mono", monospace; - height: 18px; -} - -.lm-mod-drag-image.lm-TabBar-tab { - display: none; -} diff --git a/packages/workspace/src/less/tabbar.less b/packages/workspace/src/less/tabbar.less deleted file mode 100644 index f428d240a0..0000000000 --- a/packages/workspace/src/less/tabbar.less +++ /dev/null @@ -1,389 +0,0 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -.lm-TabBar-tabLabel { - background-color: transparent; - border: none; - color: var(--icon--color, #666); - cursor: pointer; - padding: 0px 6px; - margin: 0; - margin-left: 15.5px; - margin-right: auto; - flex: 0 1 auto; - border-radius: 3px; - &:hover { - background-color: var(--icon--color); - color: var(--plugin--background); - } -} - -// .p-TabBar-tabLabel[value="[untitled]"] { -// color: #ddd !important; -// } - -.lm-TabBar-tabLabel:focus { - outline: none; - color: var(--workspace-secondary--color, #666) !important; - cursor: text; -} - -.lm-TabBar-tab.lm-mod-closable > .lm-TabBar-tabCloseIcon:before { - content: var(--close-button--content, "\2715"); -} - -.lm-TabBar-tab > .lm-TabBar-tabConfigIcon:before { - content: var(--open-settings-button--content, "\1F527"); - font-family: var(--settings--font-family, "Arial"); - transition: color 0.5s ease; -} - -.lm-TabBar-tab.lm-mod-current.settings_open > .lm-TabBar-tabConfigIcon:before { - content: var(--close-settings-button--content, "\1F527"); -} - -.lm-TabBar-tab.lm-mod-current.linked > .lm-TabBar-tabConfigIcon:before { - color: #22a0ce; -} - -.lm-TabBar-tab > .lm-TabBar-tabConfigIcon { - opacity: 0; - pointer-events: none; -} - -.lm-TabBar-tab.lm-mod-current > .lm-TabBar-tabConfigIcon { - opacity: 1; - pointer-events: all; -} - -.lm-mod-current { - .lm-TabBar-tabConfigIcon, - .lm-TabBar-tabCloseIcon { - color: inherit; - transition: color 0.2s ease-out; - } - - .lm-TabBar-tabConfigIcon:hover, - .lm-TabBar-tabCloseIcon:hover { - color: #1a7da1; - transition: color 0.2s ease-out; - } -} - -.lm-BoxPanel { - overflow: scroll !important; -} - -.lm-TabBar, -.lm-TabBar-tab { - position: relative; - - overflow: visible !important; -} - -.lm-TabBar-tabLabel:empty::after { - content: "untitled"; - color: #aaa; -} - -.lm-mod-current .lm-TabBar-tabLabel:empty::after { - color: #ddd; -} - -.lm-TabBar-tabLabel:empty::after { - content: "untitled"; -} - -.divider { - left: 32px; - bottom: 0; - position: absolute; - right: 32px; - - height: 1px; - background-color: var(--workspace-tabbar--border-color); - margin-bottom: 0px; -} - -.lm-TabBar-tab .drag-handle { - pointer-events: all; - height: 12px; - width: 14px; - -webkit-mask-image: var(--column-drag-handle--mask-image); - mask-image: var(--column-drag-handle--mask-image); - padding: 12px 0 12px 12px; - background-repeat: no-repeat; - background-color: var(--icon--color, red); - content: ""; - display: inline-block; - -webkit-mask-size: cover; - mask-size: auto; - mask-position: center; - mask-repeat: no-repeat; -} - -.lm-TabBar { - // z-index: -1; - pointer-events: none; - .lm-TabBar-tabCloseIcon { - pointer-events: all; - } - - .bookmarks-button { - pointer-events: all; - } -} - -.lm-TabBar-tab.lm-mod-hidden { - display: flex !important; - opacity: 0.5; -} - -.lm-TabBar-tab.lm-mod-current .divider { - display: block; -} - -// .lm-TabBar-tabLabel input { -// height: 18px; -// } - -// .lm-TabBar { -// // min-height: 0px !important; -// } - -@border-color: 1px solid #eaeaea; -@night-border-color: 1px solid #ddd; - -.pfm-button-base { - background: white !important; -} - -.pfm-button-base:active { - background: #016bc6 !important; -} - -.lm-TabBar-content { - padding: 0px; - border-bottom: 0px solid #fff !important; - border-left: #eaeaea; - border-right: #eaeaea; -} - -.lm-TabBar-tab.lm-mod-current { - .shadow { - margin: -1px; - position: absolute; - width: calc(100% + 2px); - height: 200%; - pointer-events: none; - left: 0px; - } - - &.settings_open .shadow { - box-shadow: none; - } -} - -.lm-TabBar-tab { - // margin: 0px 4px; - border-color: #eaeaea; - align-items: center; -} - -.lm-TabBar-content.inactive-blur > .lm-TabBar-tab { - background-color: var( - --workspace-inactive-blur--background-color, - transparent - ); -} - -.condensed .lm-TabBar-content { - & > .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabConfigIcon { - display: block; - } - - & > .lm-TabBar-tab.lm-mod-current.settings_open { - .lm-TabBar-tabLabel { - margin-left: 0px; - } - } -} - -.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.settings_open { - border-width: 1px 1px 0px 1px !important; - border-color: var(--workspace-tabbar--border-color, #ddd); - - .lm-TabBar-tabToolbar { - display: flex; - } - - .divider { - height: 1px; - margin-bottom: 0px; - background-color: var(--workspace-tabbar--border-color, #ddd); - } - - &:last-child:first-child .divider { - transition: none; - } -} - -.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.perspective_updating { - .lm-TabBar-tabConfigIcon { - display: none; - } - - .lm-TabBar-tabLoadingIcon { - display: block; - } -} - -.lm-TabBar-content > .lm-TabBar-tab { - max-width: 100000px !important; - flex: 0 1 100000px !important; - background: none; - color: #737373; - height: 40px !important; - max-height: 40px !important; - margin-bottom: -40px; - transform: none !important; - transition: color 0.2s ease-out; -} - -.lm-TabBar-content > .lm-TabBar-tab { - color: #ccc; -} - -.lm-TabBar-content > .lm-TabBar-tab { - color: #ccc; -} - -.lm-TabBar-content > .lm-TabBar-tab:hover { - color: #ccc; -} - -.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current { - color: var(--workspace-secondary--color, #666); -} - -.lm-TabBar-tab.lm-mod-current .lm-TabBar-tabLabel { - white-space: nowrap !important; -} - -.lm-TabBar-tabLabel { - font-family: inherit; - font-size: 12px; - line-height: 22px; - text-align: start; - white-space: normal !important; - word-break: break-all; -} - -.lm-TabBar-tabCloseIcon, -.lm-TabBar-tabConfigIcon { - cursor: pointer !important; - line-height: 22px !important; - padding-right: 16.5px !important; -} - -.lm-TabBar-tabConfigIcon { - padding-left: 8px; - padding-right: 8px !important; -} - -.lm-TabBar-tabLoadingIcon { - padding-left: 11px; - padding-right: 12px; -} - -.bottom .lm-TabBar-tab { - flex-basis: 10000px !important; - max-width: 10000px !important; -} - -.lm-TabBar-content > .lm-TabBar-tab.lm-mod-current { - color: var(--workspace-tabbar--color, #666) !important; - // border: var(--workspace-tabbar--border, 1px solid #ddd); - // border-width: var(--workspace-tabbar-tab--border-width); - // box-shadow: 0 13px 0 -12px var(--inactive--border-color); - // border-radius: var(--workspace-tabbar--border-radius, 6px) - // var(--workspace-tabbar--border-radius, 6px) 0 0; - // background-color: var(--workspace-tabbar--background-color, white); - background: none; - height: 40px !important; - max-height: 40px !important; - margin-bottom: -40px; - border: 0 solid transparent; - border-width: 1px 1px 0px 1px; -} - -.bottom .lm-TabBar-tab.lm-mod-current { - border: none; -} - -::-webkit-scrollbar-thumb { - background-color: #ccc; -} - -.perspective-workspace.context-menu * .lm-TabBar.context-focus { - opacity: 1; -} - -.perspective-workspace.context-menu * .lm-TabBar, -.perspective-workspace.context-menu - .lm-Widget.workspace-widget:not(.context-focus) - .viewer-container { - opacity: 0.2; -} - -@mixin icon { - background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; -} - -.bookmarks-button { - margin-left: 11px; - margin-right: -13px; - height: 20px; - border-radius: 3px; - border: 1px solid var(--inactive--color); - background-color: var(--plugin--background); - - &:hover { - background-color: var(--icon--color); - border-color: var(--icon--color); - } -} - -.bookmarks { - @include icon; - cursor: pointer; - width: 20px; - height: 12px; - -webkit-mask-image: var(--bookmarks--mask-image); - mask-image: var(--bookmarks--mask-image); - -webkit-mask-position: center; - mask-position: center; - -webkit-mask-size: auto; - mask-size: auto; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - padding: 4px 6px; - - &:hover { - background-color: var(--plugin--background); - } -} diff --git a/packages/workspace/src/svg/bookmark-icon.svg b/packages/workspace/src/svg/bookmark-icon.svg index 73a34079ab..a9fbef4004 100644 --- a/packages/workspace/src/svg/bookmark-icon.svg +++ b/packages/workspace/src/svg/bookmark-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/workspace/src/themes/pro-dark.less b/packages/workspace/src/themes/pro-dark.css similarity index 73% rename from packages/workspace/src/themes/pro-dark.less rename to packages/workspace/src/themes/pro-dark.css index 7571e72d27..d3b6b93ec5 100644 --- a/packages/workspace/src/themes/pro-dark.less +++ b/packages/workspace/src/themes/pro-dark.css @@ -1,20 +1,14 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@grey60: #c5c9d0; -@grey500: #3b3f46; -@grey600: #2f3136; -@grey700: #2a2c2f; -@grey800: #242526; +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */ perspective-workspace, perspective-workspace[theme="Pro Dark"], @@ -23,8 +17,8 @@ perspective-indicator[theme="Pro Dark"] { } perspective-workspace perspective-viewer { - --status-bar--height: 39px; - --plugin-selector--height: 47px; + --psp-status-bar--height: 39px; + --psp-plugin-selector--height: 47px; } perspective-workspace perspective-viewer.widget-maximize { @@ -38,38 +32,7 @@ perspective-workspace perspective-viewer.widget-maximize { } perspective-workspace { - @include perspective-workspace-pro-base; - @include perspective-viewer-pro-dark--colors; - - background-color: #000202; - color: white; - // --workspace-master--background-color: @grey800; - --workspace-tabbar--background-color: @grey800; - // --workspace-tabbar--border: 1px solid @grey500; - // --workspace-tabbar--border-color: @grey500; - --workspace-secondary--color: @grey60; - --workspace-tabbar--border: 1px solid var(--inactive--color); - --workspace-tabbar--border-width: 1px 1px 1px 1px; - --workspace-tabbar--border-radius: 6px; - --workspace-tabbar--border-color: var(--inactive--color); - --workspace-tabbar-tab--border-width: 1px 1px 0 1px; -} - -perspective-viewer[theme="Pro Dark"].workspace-master-widget { - --plugin--background: @grey800; -} - -perspective-workspace-menu { - font-family: - "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", - "Liberation Mono", monospace; - font-weight: 300; - background: @grey700 !important; - color: white !important; - border: 1px solid @grey500 !important; -} - -@mixin perspective-workspace-pro-base { + /* perspective-workspace-pro-base */ font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace; @@ -98,14 +61,13 @@ perspective-workspace-menu { --workspace-tabbar--border-color: var(--inactive--color); --workspace-tabbar-tab--border-width: 1px 1px 0px 1px; - // Workspace + /* Workspace */ --column-drag-handle--mask-image: url("../svg/drag-handle.svg"); --bookmarks--mask-image: url("../svg/bookmark-icon.svg"); -} -@mixin perspective-viewer-pro-dark--colors { + /* perspective-viewer-pro-dark--colors */ background-color: #242526; - --workspace-split-panel-handle--background-color: @grey800; + --workspace-split-panel-handle--background-color: #242526; color: white; --icon--color: white; --active--color: #2770a9; @@ -113,7 +75,6 @@ perspective-workspace-menu { --inactive--color: #61656e; --inactive--border-color: #4c505b; --plugin--background: #242526; - --modal-target--background: rgba(255, 255, 255, 0.05); --active--background: rgba(39, 113, 170, 0.5); --expression--operator-color: #c5c9d0; --expression--function-color: #22a0ce; @@ -130,11 +91,34 @@ perspective-workspace-menu { --select-arrow-dark--background-image ); - // Syntax + /* Syntax */ --code-editor-symbol--color: white; --code-editor-literal--color: #7dc3f0; --code-editor-operator--color: rgb(23, 166, 123); --code-editor-comment--color: rgb(204, 120, 48); --code-editor-column--color: #e18ee1; - // --code-editor-unknown--color: rgb(204, 120, 48); + + background-color: #000202; + color: white; + --workspace-tabbar--background-color: #242526; + --workspace-secondary--color: #c5c9d0; + --workspace-tabbar--border: 1px solid var(--inactive--color); + --workspace-tabbar--border-width: 1px 1px 1px 1px; + --workspace-tabbar--border-radius: 6px; + --workspace-tabbar--border-color: var(--inactive--color); + --workspace-tabbar-tab--border-width: 1px 1px 0 1px; +} + +perspective-viewer[theme="Pro Dark"].workspace-master-widget { + --plugin--background: #242526; +} + +perspective-workspace-menu { + font-family: + "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", + "Liberation Mono", monospace; + font-weight: 300; + background: #2a2c2f !important; + color: white !important; + border: 1px solid #3b3f46 !important; } diff --git a/packages/workspace/src/themes/pro.less b/packages/workspace/src/themes/pro.css similarity index 63% rename from packages/workspace/src/themes/pro.less rename to packages/workspace/src/themes/pro.css index 29008f31d9..4a5eed045a 100644 --- a/packages/workspace/src/themes/pro.less +++ b/packages/workspace/src/themes/pro.css @@ -1,16 +1,14 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@import url("ref://pro.less"); +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */ .lm-cursor-backdrop { display: none; @@ -23,38 +21,7 @@ perspective-indicator[theme="Pro Light"] { } perspective-workspace { - @include perspective-workspace-pro-base; - @include perspective-viewer-pro--colors; - background-color: #dadada; -} - -perspective-workspace perspective-viewer.widget-maximize { - --modal-panel--margin: -4px 0 -4px 0; - --status-bar--border-radius: 6px 0 0 0; - --main-column--margin: 3px 0 3px 3px; - --main-column--border: 1px solid var(--inactive--color); - --main-column--border-width: 1px 0px 1px 1px; - --main-column--border-radius: 6px 0 0 6px; - --settings-button--margin: 10px 0 0 0; -} - -perspective-workspace perspective-viewer { - --status-bar--height: 39px; - --plugin-selector--height: 47px; -} - -perspective-viewer[theme="Pro Light"].workspace-master-widget { - background-color: #f2f4f6; - --plugin--background: #f2f4f6; - regular-table { - td, - th { - border-color: #e0e4e9; - } - } -} - -@mixin perspective-workspace-pro-base { + /* perspective-workspace-pro-base */ font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace; @@ -84,9 +51,61 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget { --workspace-tabbar--border-color: var(--inactive--color); --workspace-tabbar-tab--border-width: 1px 1px 0px 1px; - // Workspace + /* Workspace */ --column-drag-handle--mask-image: url("../svg/drag-handle.svg"); --bookmarks--mask-image: url("../svg/bookmark-icon.svg"); + + /* perspective-viewer-pro--colors */ + color: #161616; + background-color: #dadada; + --icon--color: #161616; + --inactive--color: #ababab; + --inactive--border-color: #dadada; + + --active--color: #2670a9; + --error--color: #ff471e; + --plugin--background: #ffffff; + --overflow-hint-icon--color: rgba(0, 0, 0, 0.2); + --select--background-color: none; + --warning--background: #042121; + --warning--color: #fdfffd; + + --select-arrow--background-image: var( + --select-arrow-dark--background-image + ); + + --select-arrow--hover--background-image: var( + --select-arrow-light--background-image + ); + + /* TODO deprecate me */ + --overflow-hint-icon--color: #fdfffd; +} + +perspective-workspace perspective-viewer.widget-maximize { + /* --modal-panel--margin: -4px 0 -4px 0; */ + --psp-status-bar--border-radius: 6px 0 0 0; + --psp-main-column--margin: 3px 0 3px 3px; + --psp-main-column--border: 1px solid var(--inactive--color); + --psp-main-column--border-width: 1px 0px 1px 1px; + --psp-main-column--border-radius: 6px 0 0 6px; + /* --settings-button--margin: 10px 0 0 0; */ +} + +perspective-workspace perspective-viewer { + --psp-status-bar--height: 39px; + --psp-plugin-selector--height: 47px; +} + +perspective-viewer[theme="Pro Light"].workspace-master-widget { + background-color: #f2f4f6; + --plugin--background: #f2f4f6; + regular-table { + td, + th { + border-color: #e0e4e9; + } + } } perspective-viewer { diff --git a/packages/workspace/src/ts/perspective-workspace.ts b/packages/workspace/src/ts/perspective-workspace.ts index 550dc8607e..8c420052cf 100644 --- a/packages/workspace/src/ts/perspective-workspace.ts +++ b/packages/workspace/src/ts/perspective-workspace.ts @@ -22,7 +22,7 @@ export { PerspectiveViewerWidget } from "./workspace/widget"; export * from "./extensions"; import { PerspectiveWorkspace, PerspectiveWorkspaceConfig } from "./workspace"; import { bindTemplate, CustomElementProto } from "./utils/custom_elements"; -import style from "../../build/css/workspace.css"; +import style from "../../dist/css/workspace.css"; import template from "../html/workspace.html"; export { PerspectiveWorkspaceConfig }; diff --git a/packages/workspace/src/ts/workspace/dockpanel.ts b/packages/workspace/src/ts/workspace/dockpanel.ts index 29274764ee..ae069eca4a 100644 --- a/packages/workspace/src/ts/workspace/dockpanel.ts +++ b/packages/workspace/src/ts/workspace/dockpanel.ts @@ -149,7 +149,7 @@ export class PerspectiveDockPanel extends DockPanel { parseInt( window .getComputedStyle(this._workspace.element) - .getPropertyValue("--workspace-spacing"), + .getPropertyValue("--psp-workspace--spacing"), ) || 0; 1; } diff --git a/packages/workspace/src/ts/workspace/workspace.ts b/packages/workspace/src/ts/workspace/workspace.ts index e7de217f56..403d228da6 100644 --- a/packages/workspace/src/ts/workspace/workspace.ts +++ b/packages/workspace/src/ts/workspace/workspace.ts @@ -24,7 +24,7 @@ import type { } from "@perspective-dev/viewer"; import type * as psp from "@perspective-dev/client"; import type * as psp_viewer from "@perspective-dev/viewer"; -import injectedStyles from "../../../build/css/injected.css"; +import injectedStyles from "../../../dist/css/injected.css"; import { PerspectiveDockPanel } from "./dockpanel"; import { WorkspaceMenu } from "./menu"; import { createCommands } from "./commands"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1f4c6f1e0c..e406c24b2f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,9 +30,6 @@ catalogs: '@playwright/test': specifier: '=1.58.0' version: 1.58.0 - '@prospective.co/procss': - specifier: 0.1.18 - version: 0.1.18 '@types/chroma-js': specifier: ^3.1.2 version: 3.1.2 @@ -123,6 +120,9 @@ catalogs: less: specifier: ^4.1.0 version: 4.4.2 + lightningcss: + specifier: ^1.29.0 + version: 1.32.0 lodash: specifier: ^4.17.20 version: 4.17.21 @@ -246,7 +246,7 @@ importers: version: link:packages/workspace '@playwright/experimental-ct-react': specifier: 'catalog:' - version: 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1) + version: 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1) '@playwright/test': specifier: 'catalog:' version: 1.58.0 @@ -273,13 +273,13 @@ importers: dependencies: '@docusaurus/core': specifier: ^3.7.0 - version: 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + version: 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/preset-classic': specifier: ^3.7.0 - version: 3.9.2(@algolia/client-search@5.41.0)(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3) + version: 3.9.2(@algolia/client-search@5.41.0)(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(@types/react@19.2.2)(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3) '@docusaurus/theme-common': specifier: ^3.7.0 - version: 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mdx-js/react': specifier: ^3.0.0 version: 3.1.1(@types/react@19.2.2)(react@18.3.1) @@ -671,7 +671,7 @@ importers: devDependencies: vite: specifier: 'catalog:' - version: 6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1) + version: 6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1) examples/webpack-example: dependencies: @@ -783,12 +783,12 @@ importers: '@perspective-dev/test': specifier: 'workspace:' version: link:../../tools/test - '@prospective.co/procss': - specifier: ^0.1.16 - version: 0.1.17 copy-webpack-plugin: specifier: ~12 version: 12.0.2(webpack@5.102.1(webpack-cli@5.1.4)) + lightningcss: + specifier: 'catalog:' + version: 1.32.0 zx: specifier: ^8.1.8 version: 8.8.5 @@ -875,12 +875,12 @@ importers: '@perspective-dev/test': specifier: 'workspace:' version: link:../../tools/test - '@prospective.co/procss': - specifier: 'catalog:' - version: 0.1.18 '@types/d3': specifier: 'catalog:' version: 7.4.3 + lightningcss: + specifier: 'catalog:' + version: 1.32.0 typescript: specifier: 'catalog:' version: 5.9.3 @@ -906,12 +906,12 @@ importers: '@perspective-dev/test': specifier: 'workspace:' version: link:../../tools/test - '@prospective.co/procss': - specifier: 'catalog:' - version: 0.1.18 '@types/chroma-js': specifier: 'catalog:' version: 3.1.2 + lightningcss: + specifier: 'catalog:' + version: 1.32.0 prettier: specifier: 'catalog:' version: 3.6.2 @@ -952,9 +952,9 @@ importers: '@perspective-dev/test': specifier: 'workspace:' version: link:../../tools/test - '@prospective.co/procss': + lightningcss: specifier: 'catalog:' - version: 0.1.18 + version: 1.32.0 packages/workspace: dependencies: @@ -998,15 +998,15 @@ importers: '@perspective-dev/viewer': specifier: 'workspace:' version: link:../../rust/perspective-viewer - '@prospective.co/procss': - specifier: 'catalog:' - version: 0.1.18 '@types/lodash': specifier: 'catalog:' version: 4.17.20 '@types/react': specifier: 'catalog:' version: 19.2.2 + lightningcss: + specifier: 'catalog:' + version: 1.32.0 typescript: specifier: 'catalog:' version: 5.9.3 @@ -1050,7 +1050,7 @@ importers: version: link:../../tools/test '@playwright/experimental-ct-react': specifier: 'catalog:' - version: 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1) + version: 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1) '@playwright/test': specifier: 'catalog:' version: 1.58.0 @@ -1142,13 +1142,10 @@ importers: version: link:../../tools/test '@playwright/experimental-ct-react': specifier: 'catalog:' - version: 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1) + version: 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1) '@playwright/test': specifier: 'catalog:' version: 1.58.0 - '@prospective.co/procss': - specifier: 'catalog:' - version: 0.1.18 '@types/node': specifier: 'catalog:' version: 24.9.1 @@ -1158,6 +1155,9 @@ importers: '@types/react-dom': specifier: 'catalog:' version: 18.3.7(@types/react@19.2.2) + lightningcss: + specifier: 'catalog:' + version: 1.32.0 prettier: specifier: 'catalog:' version: 3.6.2 @@ -1278,7 +1278,7 @@ importers: version: 3.0.0 '@playwright/experimental-ct-react': specifier: 'catalog:' - version: 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1) + version: 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1) '@playwright/test': specifier: 'catalog:' version: 1.58.0 @@ -1311,7 +1311,7 @@ importers: dependencies: '@playwright/experimental-ct-react': specifier: 'catalog:' - version: 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1) + version: 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1) '@playwright/test': specifier: 'catalog:' version: 1.58.0 @@ -3384,12 +3384,6 @@ packages: '@polka/url@1.0.0-next.29': resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==} - '@prospective.co/procss@0.1.17': - resolution: {integrity: sha512-jZCbEji9gTgJIJ41a0VQQV8GARUNKp9ils8/6347fbNkGBtA3cRwhQfRAxnqc0dhyo6pTSjMSflqop5ToIiSwQ==} - - '@prospective.co/procss@0.1.18': - resolution: {integrity: sha512-odl+Vd/Lm2XdkB223/eghsGS4A5x5q8D9f/vCei2Wb/ljyLCGFWvP7w4Dtglid9xpvDCpJZtogeZASLcitMxug==} - '@puppeteer/browsers@2.10.12': resolution: {integrity: sha512-mP9iLFZwH+FapKJLeA7/fLqOlSUwYpMwjR1P5J23qd4e7qGJwecJccJqHYrjw33jmIZYV4dtiTHPD/J+1e7cEw==} engines: {node: '>=18'} @@ -5150,6 +5144,10 @@ packages: resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==} engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16} + detect-libc@2.1.2: + resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} + engines: {node: '>=8'} + detect-node@2.1.0: resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==} @@ -6436,6 +6434,76 @@ packages: webpack: optional: true + lightningcss-android-arm64@1.32.0: + resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [android] + + lightningcss-darwin-arm64@1.32.0: + resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + + lightningcss-darwin-x64@1.32.0: + resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + + lightningcss-freebsd-x64@1.32.0: + resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [freebsd] + + lightningcss-linux-arm-gnueabihf@1.32.0: + resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + + lightningcss-linux-arm64-gnu@1.32.0: + resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + + lightningcss-linux-arm64-musl@1.32.0: + resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + + lightningcss-linux-x64-gnu@1.32.0: + resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + + lightningcss-linux-x64-musl@1.32.0: + resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + + lightningcss-win32-arm64-msvc@1.32.0: + resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [win32] + + lightningcss-win32-x64-msvc@1.32.0: + resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + + lightningcss@1.32.0: + resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==} + engines: {node: '>= 12.0.0'} + lilconfig@3.1.3: resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==} engines: {node: '>=14'} @@ -10556,7 +10624,7 @@ snapshots: - uglify-js - webpack-cli - '@docusaurus/bundler@3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/bundler@3.9.2(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: '@babel/core': 7.28.5 '@docusaurus/babel': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -10568,7 +10636,7 @@ snapshots: clean-css: 5.3.3 copy-webpack-plugin: 11.0.0(webpack@5.102.1) css-loader: 6.11.0(webpack@5.102.1) - css-minimizer-webpack-plugin: 5.0.1(clean-css@5.3.3)(webpack@5.102.1) + css-minimizer-webpack-plugin: 5.0.1(clean-css@5.3.3)(lightningcss@1.32.0)(webpack@5.102.1) cssnano: 6.1.2(postcss@8.5.6) file-loader: 6.2.0(webpack@5.102.1) html-minifier-terser: 7.2.0 @@ -10597,10 +10665,10 @@ snapshots: - uglify-js - webpack-cli - '@docusaurus/core@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/core@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: '@docusaurus/babel': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@docusaurus/bundler': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/bundler': 3.9.2(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/logger': 3.9.2 '@docusaurus/mdx-loader': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -10726,13 +10794,13 @@ snapshots: - uglify-js - webpack-cli - '@docusaurus/plugin-content-blog@3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/plugin-content-blog@3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/logger': 3.9.2 '@docusaurus/mdx-loader': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@docusaurus/plugin-content-docs': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/theme-common': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@docusaurus/plugin-content-docs': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/theme-common': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils-common': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -10767,13 +10835,13 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/logger': 3.9.2 '@docusaurus/mdx-loader': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/module-type-aliases': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@docusaurus/theme-common': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@docusaurus/theme-common': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils-common': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -10807,9 +10875,9 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/plugin-content-pages@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/plugin-content-pages@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/mdx-loader': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -10837,9 +10905,9 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/plugin-css-cascade-layers@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/plugin-css-cascade-layers@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils-validation': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -10864,9 +10932,9 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/plugin-debug@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/plugin-debug@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) fs-extra: 11.3.2 @@ -10892,9 +10960,9 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/plugin-google-analytics@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/plugin-google-analytics@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils-validation': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 @@ -10918,9 +10986,9 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/plugin-google-gtag@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/plugin-google-gtag@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils-validation': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@types/gtag.js': 0.0.12 @@ -10945,9 +11013,9 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/plugin-google-tag-manager@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/plugin-google-tag-manager@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils-validation': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 @@ -10971,9 +11039,9 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/plugin-sitemap@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/plugin-sitemap@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/logger': 3.9.2 '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -11002,9 +11070,9 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/plugin-svgr@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/plugin-svgr@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils-validation': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -11032,22 +11100,22 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/preset-classic@3.9.2(@algolia/client-search@5.41.0)(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3)': - dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-content-blog': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-content-docs': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-content-pages': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-css-cascade-layers': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-debug': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-google-analytics': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-google-gtag': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-google-tag-manager': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-sitemap': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-svgr': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/theme-classic': 3.9.2(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/theme-common': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@docusaurus/theme-search-algolia': 3.9.2(@algolia/client-search@5.41.0)(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3) + '@docusaurus/preset-classic@3.9.2(@algolia/client-search@5.41.0)(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(@types/react@19.2.2)(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3)': + dependencies: + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-content-blog': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-content-docs': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-content-pages': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-css-cascade-layers': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-debug': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-google-analytics': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-google-gtag': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-google-tag-manager': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-sitemap': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-svgr': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/theme-classic': 3.9.2(@types/react@19.2.2)(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/theme-common': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@docusaurus/theme-search-algolia': 3.9.2(@algolia/client-search@5.41.0)(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(@types/react@19.2.2)(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3) '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -11077,16 +11145,16 @@ snapshots: '@types/react': 19.2.2 react: 18.3.1 - '@docusaurus/theme-classic@3.9.2(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': + '@docusaurus/theme-classic@3.9.2(@types/react@19.2.2)(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)': dependencies: - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/logger': 3.9.2 '@docusaurus/mdx-loader': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/module-type-aliases': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@docusaurus/plugin-content-blog': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-content-docs': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/plugin-content-pages': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/theme-common': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@docusaurus/plugin-content-blog': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-content-docs': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-content-pages': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/theme-common': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/theme-translations': 3.9.2 '@docusaurus/types': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -11124,11 +11192,11 @@ snapshots: - utf-8-validate - webpack-cli - '@docusaurus/theme-common@3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@docusaurus/theme-common@3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@docusaurus/mdx-loader': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/module-type-aliases': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@docusaurus/plugin-content-docs': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/plugin-content-docs': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils-common': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@types/history': 4.7.11 @@ -11148,13 +11216,13 @@ snapshots: - uglify-js - webpack-cli - '@docusaurus/theme-search-algolia@3.9.2(@algolia/client-search@5.41.0)(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3)': + '@docusaurus/theme-search-algolia@3.9.2(@algolia/client-search@5.41.0)(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(@types/react@19.2.2)(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.9.3)': dependencies: '@docsearch/react': 4.2.0(@algolia/client-search@5.41.0)(@types/react@19.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3) - '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/core': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) '@docusaurus/logger': 3.9.2 - '@docusaurus/plugin-content-docs': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) - '@docusaurus/theme-common': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@docusaurus/plugin-content-docs': 3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + '@docusaurus/theme-common': 3.9.2(@docusaurus/plugin-content-docs@3.9.2(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@18.3.1))(lightningcss@1.32.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/theme-translations': 3.9.2 '@docusaurus/utils': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@docusaurus/utils-validation': 3.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -12533,11 +12601,11 @@ snapshots: '@perspective-dev/server@4.3.0': {} - '@playwright/experimental-ct-core@1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)': + '@playwright/experimental-ct-core@1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)': dependencies: playwright: 1.58.0 playwright-core: 1.58.0 - vite: 6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1) + vite: 6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1) transitivePeerDependencies: - '@types/node' - jiti @@ -12551,10 +12619,10 @@ snapshots: - tsx - yaml - '@playwright/experimental-ct-react@1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1)': + '@playwright/experimental-ct-react@1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1)': dependencies: - '@playwright/experimental-ct-core': 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1) - '@vitejs/plugin-react': 4.7.0(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)) + '@playwright/experimental-ct-core': 1.58.0(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1) + '@vitejs/plugin-react': 4.7.0(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)) transitivePeerDependencies: - '@types/node' - jiti @@ -12588,10 +12656,6 @@ snapshots: '@polka/url@1.0.0-next.29': {} - '@prospective.co/procss@0.1.17': {} - - '@prospective.co/procss@0.1.18': {} - '@puppeteer/browsers@2.10.12': dependencies: debug: 4.4.3 @@ -13234,7 +13298,7 @@ snapshots: '@vercel/oidc@3.0.3': {} - '@vitejs/plugin-react@4.7.0(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))': + '@vitejs/plugin-react@4.7.0(vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))': dependencies: '@babel/core': 7.28.5 '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5) @@ -13242,7 +13306,7 @@ snapshots: '@rolldown/pluginutils': 1.0.0-beta.27 '@types/babel__core': 7.20.5 react-refresh: 0.17.0 - vite: 6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1) + vite: 6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1) transitivePeerDependencies: - supports-color @@ -14149,7 +14213,7 @@ snapshots: optionalDependencies: webpack: 5.102.1(webpack-cli@5.1.4) - css-minimizer-webpack-plugin@5.0.1(clean-css@5.3.3)(webpack@5.102.1): + css-minimizer-webpack-plugin@5.0.1(clean-css@5.3.3)(lightningcss@1.32.0)(webpack@5.102.1): dependencies: '@jridgewell/trace-mapping': 0.3.31 cssnano: 6.1.2(postcss@8.5.6) @@ -14160,6 +14224,7 @@ snapshots: webpack: 5.102.1(webpack-cli@5.1.4) optionalDependencies: clean-css: 5.3.3 + lightningcss: 1.32.0 css-prefers-color-scheme@10.0.0(postcss@8.5.6): dependencies: @@ -14551,6 +14616,8 @@ snapshots: destroy@1.2.0: {} + detect-libc@2.1.2: {} + detect-node@2.1.0: {} detect-port@1.6.1: @@ -16049,6 +16116,55 @@ snapshots: optionalDependencies: webpack: 5.102.1(webpack-cli@5.1.4) + lightningcss-android-arm64@1.32.0: + optional: true + + lightningcss-darwin-arm64@1.32.0: + optional: true + + lightningcss-darwin-x64@1.32.0: + optional: true + + lightningcss-freebsd-x64@1.32.0: + optional: true + + lightningcss-linux-arm-gnueabihf@1.32.0: + optional: true + + lightningcss-linux-arm64-gnu@1.32.0: + optional: true + + lightningcss-linux-arm64-musl@1.32.0: + optional: true + + lightningcss-linux-x64-gnu@1.32.0: + optional: true + + lightningcss-linux-x64-musl@1.32.0: + optional: true + + lightningcss-win32-arm64-msvc@1.32.0: + optional: true + + lightningcss-win32-x64-msvc@1.32.0: + optional: true + + lightningcss@1.32.0: + dependencies: + detect-libc: 2.1.2 + optionalDependencies: + lightningcss-android-arm64: 1.32.0 + lightningcss-darwin-arm64: 1.32.0 + lightningcss-darwin-x64: 1.32.0 + lightningcss-freebsd-x64: 1.32.0 + lightningcss-linux-arm-gnueabihf: 1.32.0 + lightningcss-linux-arm64-gnu: 1.32.0 + lightningcss-linux-arm64-musl: 1.32.0 + lightningcss-linux-x64-gnu: 1.32.0 + lightningcss-linux-x64-musl: 1.32.0 + lightningcss-win32-arm64-msvc: 1.32.0 + lightningcss-win32-x64-msvc: 1.32.0 + lilconfig@3.1.3: {} lines-and-columns@1.2.4: {} @@ -18965,7 +19081,7 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.3 - vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1): + vite@6.4.1(@types/node@24.9.1)(jiti@1.21.7)(less@4.4.2)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1): dependencies: esbuild: 0.25.11 fdir: 6.5.0(picomatch@4.0.3) @@ -18978,6 +19094,7 @@ snapshots: fsevents: 2.3.3 jiti: 1.21.7 less: 4.4.2 + lightningcss: 1.32.0 terser: 5.44.0 tsx: 4.20.6 yaml: 2.8.1 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 4609d8d215..849962c9a9 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -52,7 +52,7 @@ catalog: "@jupyterlab/builder": "^4" "@playwright/experimental-ct-react": "=1.58.0" "@playwright/test": "=1.58.0" - "@prospective.co/procss": "0.1.18" + "lightningcss": "^1.29.0" "@types/d3": "^7.4.3" "@types/lodash": "^4.17.20" "@types/node": ">=22" diff --git a/rust/perspective-js/src/rust/virtual_server.rs b/rust/perspective-js/src/rust/virtual_server.rs index b1b2fc91c8..c918aeb0d4 100644 --- a/rust/perspective-js/src/rust/virtual_server.rs +++ b/rust/perspective-js/src/rust/virtual_server.rs @@ -589,7 +589,6 @@ impl VirtualDataSlice { #[wasm_bindgen(js_name = "fromArrowIpc")] pub fn from_arrow_ipc(&self, ipc: Uint8Array) -> Result<(), JsValue> { - // tracing::error!("L {}", ipc.len()); self.1 .lock() .unwrap() diff --git a/rust/perspective-python/build.mjs b/rust/perspective-python/build.mjs index 85b85339b4..a4befb5d79 100644 --- a/rust/perspective-python/build.mjs +++ b/rust/perspective-python/build.mjs @@ -11,7 +11,7 @@ // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ import * as fs from "node:fs"; -import sh from "../../tools/scripts/sh.mjs"; +import { execSync } from "child_process"; import * as url from "url"; import * as toml from "@iarna/toml"; import * as tar from "tar"; @@ -38,22 +38,20 @@ fs.mkdirSync(`./perspective_python-${version}.data`, { recursive: true }); fs.copyFileSync("../../LICENSE.md", "./LICENSE.md"); const cwd = process.cwd(); -const cmd = sh(); +const env = { ...process.env }; +let emsdk_prefix = ""; if (is_pyodide) { - const emsdkdir = sh.path`${__dirname}/../../.emsdk`; + const emsdkdir = path.resolve(__dirname, "../../.emsdk"); const { emscripten } = JSON.parse( - fs.readFileSync(sh.path`${__dirname}/../../package.json`), + fs.readFileSync(path.resolve(__dirname, "../../package.json")), ); - cmd.sh`cd ${emsdkdir}`.sh`. ./emsdk_env.sh` - .sh`./emsdk activate ${emscripten}`.sh`cd ${cwd}`; + emsdk_prefix = `cd ${emsdkdir} && . ./emsdk_env.sh && ./emsdk activate ${emscripten} && cd ${cwd} && `; } // if not windows if (process.platform !== "win32") { - cmd.env({ - PSP_ROOT_DIR: "../..", - }); + env.PSP_ROOT_DIR = "../.."; } const build_wheel = !!process.env.PSP_BUILD_WHEEL || is_pyodide; @@ -101,7 +99,7 @@ if (build_wheel) { features.push(...standard_features); } - cmd.sh(`maturin build ${flags} --features=${features.join(",")} ${target}`); + execSync(`${emsdk_prefix}maturin build ${flags} --features=${features.join(",")} ${target}`, { stdio: "inherit", env }); } if (build_sdist) { @@ -154,17 +152,12 @@ if (process.env["PSP_UV"] === "1") { if (!build_wheel && !build_sdist) { const dev_features = ["abi3"]; - cmd.sh( - `maturin develop --features=${dev_features.join( - ",", - )} ${flags} ${target}`, + execSync( + `${emsdk_prefix}maturin develop --features=${dev_features.join(",")} ${flags} ${target}`, + { stdio: "inherit", env }, ); } -if (!cmd.isEmpty()) { - cmd.runSync(); -} - // Generates version 2.3 according to https://packaging.python.org/en/latest/specifications/core-metadata/ // Takes parsed pyproject.toml, Cargo.toml, and contents of README.md. function generatePkgInfo(pyproject, cargo, readme_md) { diff --git a/rust/perspective-viewer/Cargo.toml b/rust/perspective-viewer/Cargo.toml index e0aa93e4b8..4928bf7449 100644 --- a/rust/perspective-viewer/Cargo.toml +++ b/rust/perspective-viewer/Cargo.toml @@ -39,8 +39,7 @@ talc-allocator = ["perspective-js/talc-allocator"] trace-allocator = ["perspective-js/trace-allocator"] [build-dependencies] -serde_json = { version = "1.0.59", features = ["raw_value"] } -procss = { version = "0.1.18" } +lightningcss = "1.0.0-alpha.71" glob = "0.3.0" anyhow = "1.0.66" diff --git a/rust/perspective-viewer/build.mjs b/rust/perspective-viewer/build.mjs index a6ccba30ee..e21efa6c50 100644 --- a/rust/perspective-viewer/build.mjs +++ b/rust/perspective-viewer/build.mjs @@ -14,8 +14,14 @@ import { execSync } from "child_process"; import { build } from "@perspective-dev/esbuild-plugin/build.js"; import { NodeModulesExternal } from "@perspective-dev/esbuild-plugin/external.js"; import * as fs from "node:fs"; -import { BuildCss } from "@prospective.co/procss/target/cjs/procss.js"; +import * as path from "node:path"; +import { + bundle as bundleCss, + composeVisitors, + bundleAsync as bundleAsyncCss, +} from "lightningcss"; import { compress } from "pro_self_extracting_wasm"; +import { get_host, inlineUrlVisitor, resolveNPM } from "./tools.mjs"; const IS_DEBUG = !!process.env.PSP_DEBUG || process.argv.indexOf("--debug") >= 0; @@ -25,19 +31,18 @@ const INHERIT = { stderr: "inherit", }; -function get_host() { - return /host\: (.+?)$/gm.exec(execSync(`rustc -vV`).toString())[1]; -} -async function build_all() { - execSync( - `cargo bundle --target=${get_host()} -- perspective_viewer ${IS_DEBUG ? "" : "--release"}`, - INHERIT, - ); +export async function build_all() { + if (!process.env.PSP_SKIP_WASM) { + execSync( + `cargo bundle --target=${get_host()} -- perspective_viewer ${IS_DEBUG ? "" : "--release"}`, + INHERIT, + ); - await compress( - "dist/wasm/perspective-viewer.wasm", - "dist/wasm/perspective-viewer.wasm", - ); + await compress( + "dist/wasm/perspective-viewer.wasm", + "dist/wasm/perspective-viewer.wasm", + ); + } // JavaScript const BUILD = [ @@ -109,41 +114,46 @@ async function build_all() { // Typecheck execSync("tsc --project tsconfig.json", INHERIT); - // Generate themes. `cargo` is not a great tool for this as there's no - // simple way to find the output artifact. - function add(builder, path) { - builder.add(path, fs.readFileSync(`./src/themes/${path}`).toString()); - } - + // Generate themes via lightningcss bundling. fs.mkdirSync("./dist/css/intl", { recursive: true }); - const builder = new BuildCss("./src/themes"); - add(builder, "variables.less"); - add(builder, "intl.less"); - add(builder, "icons.less"); - add(builder, "pro.less"); - add(builder, "pro-dark.less"); - add(builder, "botanical.less"); - add(builder, "monokai.less"); - add(builder, "solarized.less"); - add(builder, "solarized-dark.less"); - add(builder, "vaporwave.less"); - add(builder, "gruvbox.less"); - add(builder, "gruvbox-dark.less"); - add(builder, "dracula.less"); - add(builder, "themes.less"); - for (const [name, css] of builder.compile()) { - fs.writeFileSync(`dist/css/${name}`, css); + const themes = [ + "icons", + "intl", + "pro", + "pro-dark", + "botanical", + "monokai", + "solarized", + "solarized-dark", + "vaporwave", + "gruvbox", + "gruvbox-dark", + "dracula", + "themes", + ]; + + for (const name of themes) { + const filename = `./src/themes/${name}.css`; + const { code } = await bundleAsyncCss({ + filename, + minify: true, + visitor: inlineUrlVisitor(filename), + resolver: resolveNPM(import.meta.url), + }); + + fs.writeFileSync(`dist/css/${name}.css`, code); } - const intl_builder = new BuildCss("./src/themes/intl"); - add(intl_builder, "intl/de.less"); - add(intl_builder, "intl/es.less"); - add(intl_builder, "intl/fr.less"); - add(intl_builder, "intl/ja.less"); - add(intl_builder, "intl/pt.less"); - add(intl_builder, "intl/zh.less"); - for (const [name, css] of intl_builder.compile()) { - fs.writeFileSync(`dist/css/intl/${name}`, css); + const intl_langs = ["de", "es", "fr", "ja", "pt", "zh"]; + for (const lang of intl_langs) { + const filename = `./src/themes/intl/${lang}.css`; + const { code } = await bundleAsyncCss({ + filename, + minify: true, + visitor: inlineUrlVisitor(filename), + }); + + fs.writeFileSync(`dist/css/intl/${lang}.css`, code); } } diff --git a/rust/perspective-viewer/build.rs b/rust/perspective-viewer/build.rs index eae7b398f9..4e303590ce 100644 --- a/rust/perspective-viewer/build.rs +++ b/rust/perspective-viewer/build.rs @@ -10,37 +10,32 @@ // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ -#![feature(exit_status_error)] - use glob::glob; -use procss::BuildCss; - -fn with_wd(indir: &str, f: impl FnOnce() -> T) -> T { - let current_dir = std::env::current_dir().unwrap(); - std::env::set_current_dir(indir).unwrap(); - let res = f(); - std::env::set_current_dir(current_dir).unwrap(); - res -} - -fn glob_with_wd(indir: &str, input: &str) -> Vec { - with_wd(indir, || { - glob(input) - .unwrap() - .map(|x| x.unwrap().to_string_lossy().to_string()) - .collect() - }) -} +use lightningcss::bundler::{Bundler, FileProvider}; +use lightningcss::stylesheet::PrinterOptions; fn main() -> Result<(), anyhow::Error> { let out_dir = std::env::var("OUT_DIR").unwrap(); let out_path = std::path::Path::new(&out_dir); - let mut build = BuildCss::new("./src/less"); - let files = glob_with_wd("./src/less", "**/*.less"); - for src in files.iter() { - build.add_file(src); + let fs: &'static FileProvider = Box::leak(Box::new(FileProvider::new())); + for entry in glob("./src/css/**/*.css")? { + let entry = entry?; + let relative = entry + .strip_prefix("./src/css/") + .or_else(|_| entry.strip_prefix("src/css/"))?; + + let mut bundler = Bundler::new(fs, None, Default::default()); + let stylesheet = bundler.bundle(&entry)?; + let output = stylesheet.to_css(PrinterOptions { + minify: true, + ..Default::default() + })?; + + let out_file = out_path.join("css").join(relative); + std::fs::create_dir_all(out_file.parent().unwrap())?; + std::fs::write(&out_file, output.code)?; + println!("cargo:rerun-if-changed={}", entry.display()); } - build.compile()?.write(out_path.join("css"))?; Ok(()) } diff --git a/rust/perspective-viewer/package.json b/rust/perspective-viewer/package.json index a4171b688f..5317ead057 100644 --- a/rust/perspective-viewer/package.json +++ b/rust/perspective-viewer/package.json @@ -19,7 +19,8 @@ "./src/*": "./src/*", "./test/*": "./test/*", "./package.json": "./package.json", - "./tsconfig.json": "./tsconfig.json" + "./tsconfig.json": "./tsconfig.json", + "./tools.mjs": "./tools.mjs" }, "files": [ "dist/**/*", @@ -43,7 +44,7 @@ "@perspective-dev/esbuild-plugin": "workspace:", "@perspective-dev/test": "workspace:", "@perspective-dev/metadata": "workspace:", - "@prospective.co/procss": "catalog:", + "lightningcss": "catalog:", "@playwright/test": "catalog:", "@playwright/experimental-ct-react": "catalog:", "@types/react": "catalog:", diff --git a/rust/perspective-viewer/src/less/aggregate-selector.less b/rust/perspective-viewer/src/css/aggregate-selector.css similarity index 68% rename from rust/perspective-viewer/src/less/aggregate-selector.less rename to rust/perspective-viewer/src/css/aggregate-selector.css index fca602ddfc..e85b3bfbb7 100644 --- a/rust/perspective-viewer/src/less/aggregate-selector.less +++ b/rust/perspective-viewer/src/css/aggregate-selector.css @@ -1,26 +1,27 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { - // Wrapper prevents the width of the selector options from increasing the width of - // the container it is embedded in. + /* Wrapper prevents the width of the selector options from increasing the width of */ + /* the container it is embedded in. */ .aggregate-selector-wrapper { height: 19px; display: flex; - padding-left: 23px; - width: 85px; - min-width: 85px; - max-width: 85px; - flex: 0 0 85px; + padding-left: 6px; + width: 68px; + min-width: 68px; + max-width: 68px; + flex: 0 0 68px; label { font-size: 10px; @@ -34,7 +35,6 @@ } .aggregate-selector { - font-size: 10px; border-bottom-width: 0px; margin-top: 0px; height: 19px; @@ -43,9 +43,12 @@ text-overflow: ellipsis; padding-right: 12px; border: 1px solid transparent; + select { + font-size: 0.8em; + } &:hover { - border: 1px solid var(--icon--color); + border: 1px solid var(--psp--color); border-radius: 2px; transition: none; } diff --git a/rust/perspective-viewer/src/css/column-dropdown.css b/rust/perspective-viewer/src/css/column-dropdown.css new file mode 100644 index 0000000000..98bd077c75 --- /dev/null +++ b/rust/perspective-viewer/src/css/column-dropdown.css @@ -0,0 +1,109 @@ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ + +:host { + box-sizing: border-box; + position: fixed; + z-index: 10000; + outline: none; + font-size: 0.75em; + border: inherit; + /* box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%); */ + user-select: none; + background-color: var(--psp--color, #fff) !important; + color: var(--psp--background-color, #333) !important; + /* padding: 6px 8px; */ + border: 1px solid var(--psp--color) !important; + max-width: 300px; + overflow: hidden; + max-height: 600px; + overflow: auto; + &:hover { + --fix: ; + } + &::-webkit-scrollbar-thumb { + border-radius: 2px; + border: 2px solid transparent; + box-shadow: inset 0px 0px 0 4px var(--psp-inactive--color); + } + &:hover::-webkit-scrollbar-thumb { + border: 1px solid transparent; + box-shadow: inset 0px 0px 0 4px var(--psp-inactive--color); + } + &::-webkit-scrollbar, + &::-webkit-scrollbar-corner { + background-color: transparent; + width: 6px; + height: 6px; + } + + display: flex; + flex-direction: column; + + .selected { + background-color: var(--psp--background-color) !important; + color: var(--psp--color) !important; + } + + span { + cursor: pointer; + padding: 4px 5px; + } + + .no-results { + padding: 3px 24px 6px 11px; + color: var(--psp-error--color); + font-size: 8px; + } + + .no-results:before { + content: var(--psp-label--no-results--content, "Invalid Column"); + } + + #add-expression { + .icon { + background-repeat: no-repeat; + background-color: var(--psp--color); + display: inline-flex; + -webkit-mask-size: cover; + mask-size: cover; + margin-right: 5px; + -webkit-mask-image: var(--psp-icon--add-expression--mask-image); + mask-image: var(--psp-icon--add-expression--mask-image); + &:before { + line-height: 0; + content: var(--psp-icon--add-expression--mask-image); + visibility: hidden; + } + } + } +} + +:host(:hover) { + .selected { + background-color: var(--psp--color, #fff) !important; + color: var(--psp--background-color, #333) !important; + } + + span:hover, + span.selected:hover { + background-color: var(--psp--background-color) !important; + color: var(--psp--color) !important; + } +} + +:host(.no-results) { + overflow: hidden; + background-color: transparent !important; + border: none !important; +} diff --git a/rust/perspective-viewer/src/less/column-selector.less b/rust/perspective-viewer/src/css/column-selector.css similarity index 59% rename from rust/perspective-viewer/src/less/column-selector.less rename to rust/perspective-viewer/src/css/column-selector.css index 537f1e716a..da859649b5 100644 --- a/rust/perspective-viewer/src/less/column-selector.less +++ b/rust/perspective-viewer/src/css/column-selector.css @@ -1,30 +1,19 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@import "dom/scrollbar.less"; - -// TODO this could be a class -@mixin icon { - background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; -} +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { #add-expression-button:before { - content: var(--add-expression-button--content, "New Column"); + content: var(--psp-label--add-expression-button--content, "New Column"); text-transform: uppercase; font-size: 0.8333333em; } @@ -41,7 +30,7 @@ overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; - padding-left: 23px; + padding-left: 6px; display: inline-block; align-items: center; line-height: normal; @@ -59,8 +48,8 @@ flex: 0 100000000 67px; } - // Inactive columns need to account for expression buttons, which won't be - // the last child if it has a button + /* Inactive columns need to account for expression buttons, which won't be */ + /* the last child if it has a button */ #sub-columns .column-selector--spacer:last-child { width: 93px; flex: 0 100000000 93px; @@ -86,7 +75,7 @@ border: var(--column-add--border, 1px solid transparent); min-height: 24px; flex-direction: row; - background-color: #8b868045; + background-color: var(--psp-placeholder--background); border-radius: 2px; display: flex; align-items: center; @@ -94,17 +83,24 @@ cursor: pointer; margin-bottom: 4px; - // Button icon - &:before { - @include icon; - width: 14px; - height: 14px; - margin-left: 12px; - -webkit-mask-image: var(--add-expression-icon--mask-image); - mask-image: var(--add-expression-icon--mask-image); + /* Button icon */ + & > .icon { + background-repeat: no-repeat; + background-color: var(--psp--color); + display: inline-flex; + -webkit-mask-size: cover; + mask-size: cover; + margin-left: 9px; + -webkit-mask-image: var(--psp-icon--add-expression--mask-image); + mask-image: var(--psp-icon--add-expression--mask-image); + &:before { + line-height: 0; + content: var(--psp-icon--add-expression--mask-image); + visibility: hidden; + } } - // Text label of the button e.g. "New Column" + /* Text label of the button e.g. "New Column" */ & > span { align-self: center; margin-left: 7.5px; @@ -115,10 +111,10 @@ &.modal-target, &.dragdrop-hover { - color: var(--plugin--background); - background-color: var(--icon--color); - &:before { - background-color: var(--plugin--background); + color: var(--psp--background-color); + background-color: var(--psp--color); + & > .icon { + background-color: var(--psp--background-color); } } } @@ -126,15 +122,15 @@ .dragdrop-highlight { .pivot-column-border, .column-selector-column-border { - border: 1px solid var(--icon--color); + border: 1px solid var(--psp--color); } } .column-selector-column-border, .pivot-column-border { &.snap-drag-image { - background-color: var(--plugin--background) !important; - border: 1px solid var(--icon--color) !important; + background-color: var(--psp--background-color) !important; + border: 1px solid var(--psp--color) !important; position: absolute !important; pointer-events: none; left: 0; @@ -170,7 +166,7 @@ } .column_name { - padding-left: 23px !important; + padding-left: 6px !important; } } @@ -182,7 +178,7 @@ #top_panel .pivot-column.column-empty .pivot-column-draggable { - border-color: var(--icon--color); + border-color: var(--psp--color); } .column-selector-column { @@ -190,11 +186,11 @@ flex-direction: row-reverse; align-items: center; - // Expression column toolbar buttons + /* Expression column toolbar buttons */ span.expression-edit-button, span.expression-delete-button { padding-top: 1px; - font-family: var(--button--font-family, inherit); + font-family: var(--psp-button--font-family, inherit); cursor: pointer; padding: 2px 4px 0 4px; margin-right: 4px; @@ -202,10 +198,9 @@ border-radius: 3px; &:hover, &.is-editing { - background-color: var(--icon--color); - &:before { - background-color: var(--plugin--background); - border-radius: 3px; + background-color: var(--psp--color); + .icon { + background-color: var(--psp--background-color); } } } @@ -229,12 +224,19 @@ margin-left: 0px; } - span.expression-edit-button:before { - @include icon; - height: 14px; - width: 14px; - -webkit-mask-image: var(--column-settings-icon--mask-image); - mask-image: var(--column-settings-icon--mask-image); + span.expression-edit-button .icon { + background-repeat: no-repeat; + background-color: var(--psp--color); + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: var(--psp-icon--column-settings--mask-image); + mask-image: var(--psp-icon--column-settings--mask-image); + + &:before { + content: var(--psp-icon--column-settings--mask-image); + visibility: hidden; + } } .column-selector-draggable { @@ -263,14 +265,27 @@ min-height: 24px; } - &:not(.empty-named) .column-selector-column-border:before { - margin: 0px 0 0 6px; // TODO - flex: 0 0 auto; // TODO - @include icon; - height: 12px; - width: 5px; - -webkit-mask-image: var(--column-drag-handle--mask-image); - mask-image: var(--column-drag-handle--mask-image); + &:not(.empty-named) .column-selector-column-border > .drag-handle { + margin: 0px 0 0 6px; + flex: 0 0 auto; + background-repeat: no-repeat; + background-color: var(--psp--color); + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: var( + --psp-icon--psp-icon--column-drag-handle--mask-image + ); + mask-image: var( + --psp-icon--psp-icon--column-drag-handle--mask-image + ); + + &:before { + content: var( + --psp-icon--psp-icon--column-drag-handle--mask-image + ); + visibility: hidden; + } } } } @@ -283,25 +298,19 @@ .is_column_active { display: inline-flex; overflow: hidden; - padding-bottom: 4px; + margin-bottom: 4px; flex: 0 0 auto; cursor: pointer; - font-size: var(--column-selector--font-size, 14px); + font-size: var(--psp-column-selector--font-size, 14px); font-family: var( --column-selector--font-family, - var(--button--font-family, inherit) + var(--psp-button--font-family, inherit) ) !important; - &.select-mode { - margin: 0 6.5px; - // Width of the icon, which is not always present - min-width: 14px; - } - &, + &.select-mode, &.toggle-mode { - margin: 0 6.5px; - min-width: 14px; + margin: 0 6.5px 4px 6.5px; } } @@ -318,23 +327,29 @@ overflow-x: hidden !important; overflow-y: scroll; min-height: 20%; - @include scrollbar; } #sub-columns .scroll-panel-container:before { font-size: var(--label--font-size, 0.75em); padding: var(--column_type--padding, 0px 0px 0px 0px); position: absolute; - margin-top: -13px; - top: 0; - content: var(--all-columns-label--content, "All Columns"); + height: 28px; + top: -28px; + display: inline-flex; + align-items: flex-end; + content: var(--psp-label--all-columns--content, "All Columns"); } - #sub-columns .scroll-panel-container:first-child { + #sub-columns .scroll-panel-container { margin-top: 28px; margin-bottom: 4px; } + /* #sub-acolumns .scroll-panel-container #add-expression { + padding-top: 28px; + margin-top: 0; + } */ + #sub-columns .column-selector-column.column-selector-column-hidden { overflow: hidden; height: 0; @@ -351,38 +366,50 @@ padding-bottom: 8px; } + #active-columns, + #column_settings_sidebar, + #sub-columns { + .is_column_active { + background-repeat: no-repeat; + background-color: var(--psp--color); + -webkit-mask-size: cover; + mask-size: cover; + } + } + #active-columns, #column_settings_sidebar { width: 100%; - .is_column_active:before { - @include icon; - } .is_column_active.select-mode { + -webkit-mask-image: var(--psp-icon--radio-on--mask-image); + mask-image: var(--psp-icon--radio-on--mask-image); + &:before { - width: 14px; - height: 14px; - -webkit-mask-image: var(--column-radio-on--mask-image); - mask-image: var(--column-radio-on--mask-image); + line-height: 0; + content: var(--psp-icon--radio-on--mask-image); + visibility: hidden; } - &:not(.required):hover:before { - -webkit-mask-image: var(--column-radio-hover--mask-image); - mask-image: var(--column-radio-hover--mask-image); + &:not(.required):hover { + -webkit-mask-image: var(--psp-icon--radio-hover--mask-image); + mask-image: var(--psp-icon--radio-hover--mask-image); } } .is_column_active.toggle-mode { + -webkit-mask-image: var(--psp-icon--checkbox-on--mask-image); + mask-image: var(--psp-icon--checkbox-on--mask-image); + &:before { - width: 14px; - height: 14px; - -webkit-mask-image: var(--column-checkbox-on--mask-image); - mask-image: var(--column-checkbox-on--mask-image); + line-height: 0; + content: var(--psp-icon--checkbox-on--mask-image); + visibility: hidden; } - &:not(.required):hover:before { - -webkit-mask-image: var(--column-checkbox-hover--mask-image); - mask-image: var(--column-checkbox-hover--mask-image); + &:not(.required):hover { + -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image); + mask-image: var(--psp-icon--checkbox-hover--mask-image); } } @@ -392,8 +419,7 @@ cursor: initial; } - &.inactive:before { - content: ""; + &.inactive { background: none; } } @@ -406,8 +432,8 @@ } .column-selector-column-border { - border-color: var(--inactive--color); - background-color: var(--plugin--background); + border-color: var(--psp-inactive--color); + background-color: var(--psp--background-color); } &:before { @@ -427,7 +453,7 @@ .dragover, .column-selector-column .column-selector-draggable.empty-named { - background-color: #8b868045; + background-color: var(--psp-placeholder--background); border-color: transparent; border-radius: 2px; } @@ -440,7 +466,7 @@ } .column-selector-column .column-selector-draggable.dragover { - border: 1px solid var(--icon--color); + border: 1px solid var(--psp--color); position: relative; &:before { content: " "; @@ -451,7 +477,7 @@ right: 5px; bottom: 5px; border-radius: 2px; - background-color: var(--icon--color); + background-color: var(--psp--color); opacity: 0.3; } @@ -462,7 +488,7 @@ .column-selector-column { .column-selector-column-border { - background-color: #8b868045; + background-color: var(--psp-placeholder--background); border: 1px solid transparent; align-items: center; } @@ -472,12 +498,12 @@ #active-columns.dragdrop-highlight .column-selector-column, .column-selector-column.dragdrop-hover { .column-selector-column-border { - border-color: var(--icon--color); + border-color: var(--psp--color); } } - // Inactive Columns are the columns in the column selector not currently - // selected for the `columns` field of the `ViewConfig`. + /* Inactive Columns are the columns in the column selector not currently */ + /* selected for the `columns` field of the `ViewConfig`. */ #sub-columns { padding-bottom: 8px; @@ -486,34 +512,35 @@ margin: 0px; } - .is_column_active:before { - @include icon; - } - .is_column_active.select-mode { + -webkit-mask-image: var(--psp-icon--radio-off--mask-image); + mask-image: var(--psp-icon--radio-off--mask-image); + &:before { - width: 14px; - height: 14px; - -webkit-mask-image: var(--column-radio-off--mask-image); - mask-image: var(--column-radio-off--mask-image); + line-height: 0; + content: var(--psp-icon--radio-off--mask-image); + visibility: hidden; } - &:hover:before { - -webkit-mask-image: var(--column-radio-hover--mask-image); - mask-image: var(--column-radio-hover--mask-image); + + &:hover { + -webkit-mask-image: var(--psp-icon--radio-hover--mask-image); + mask-image: var(--psp-icon--radio-hover--mask-image); } } .is_column_active.toggle-mode { + -webkit-mask-image: var(--psp-icon--checkbox-off--mask-image); + mask-image: var(--psp-icon--checkbox-off--mask-image); + &:before { - width: 14px; - height: 14px; - -webkit-mask-image: var(--column-checkbox-off--mask-image); - mask-image: var(--column-checkbox-off--mask-image); + line-height: 0; + content: var(--psp-icon--checkbox-off--mask-image); + visibility: hidden; } - &:hover:before { - -webkit-mask-image: var(--column-checkbox-hover--mask-image); - mask-image: var(--column-checkbox-hover--mask-image); + &:hover { + -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image); + mask-image: var(--psp-icon--checkbox-hover--mask-image); } } diff --git a/rust/perspective-viewer/src/less/column-settings-panel.less b/rust/perspective-viewer/src/css/column-settings-panel.css similarity index 57% rename from rust/perspective-viewer/src/less/column-settings-panel.less rename to rust/perspective-viewer/src/css/column-settings-panel.css index 6425261f91..f55e489f9f 100644 --- a/rust/perspective-viewer/src/less/column-settings-panel.less +++ b/rust/perspective-viewer/src/css/column-settings-panel.css @@ -1,16 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@import (reference) url(./column-selector.less); +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { #column_settings_sidebar { @@ -33,9 +32,9 @@ flex: 0 1 auto; } - // NOTE: These should probably make their way to global form styling eventually. + /* NOTE: These should probably make their way to global form styling eventually. */ .errored { - outline-color: var(--error--color); + outline-color: var(--psp-error--color); } .item_title { @@ -47,14 +46,14 @@ &[type="text"], &[type="search"] { outline: 1px solid; - outline-color: var(--inactive--color); - background-color: var(--plugin--background); + outline-color: var(--psp-inactive--color); + background-color: var(--psp--background-color); border: none; margin-bottom: 0.5em; font-family: inherit; font-size: 1em; &:disabled { - background-color: var(--inactive--color); + background-color: var(--psp-inactive--color); } } @@ -74,7 +73,7 @@ align-items: center; border-radius: 3px; outline-width: 1px; - outline-color: var(--inactive--color); + outline-color: var(--psp-inactive--color); &.editable { &:hover { @@ -84,13 +83,13 @@ } &:focus { outline-style: solid; - background: var(--plugin--background); + background: var(--psp--background-color); } &.edited { outline-style: dashed; } &.invalid { - outline-color: var(--error--color); + outline-color: var(--psp-error--color); } .sidebar_header_title { @@ -112,140 +111,155 @@ } label#color-label:before { - content: var(--color-label--content, "Color"); + content: var(--psp-label--color--content, "Color"); } label#format-label:before { - content: var(--format-label--content, "Format"); + content: var(--psp-label--format--content, "Format"); } label#timezone-label:before { - content: var(--timezone-label--content, "Timezone"); + content: var(--psp-label--timezone--content, "Timezone"); } label#date-style-label:before { - content: var(--date-style-label--content, "Date Style"); + content: var(--psp-label--date-style--content, "Date Style"); } label#time-style-label:before { - content: var(--time-style-label--content, "Time Style"); + content: var(--psp-label--time-style--content, "Time Style"); } label#foreground-label:before { - content: var(--foreground-label--content, "Foreground"); + content: var(--psp-label--foreground--content, "Foreground"); } label#background-label:before { - content: var(--background-label--content, "Background"); + content: var(--psp-label--background--content, "Background"); } label#series-label:before { - content: var(--series-label--content, "Series"); + content: var(--psp-label--series--content, "Series"); } label#color-range-label:before { - content: var(--color-range-label--content, "Color Range"); + content: var(--psp-label--color-range--content, "Color Range"); } label#style-label:before { - content: var(--style-label--content, "Style"); + content: var(--psp-label--style--content, "Style"); } label#minimum-integer-digits-label:before { content: var( - --minimum-integer-digits-label--content, + --psp-label--minimum-integer-digits--content, "Minimum Integer Digits" ); } label#rounding-increment-label:before { - content: var(--rounding-increment-label--content, "Rounding Increment"); + content: var( + --psp-label--rounding-increment--content, + "Rounding Increment" + ); } label#notation-label:before { - content: var(--notation-label--content, "Notation"); + content: var(--psp-label--notation--content, "Notation"); } label#use-grouping-label:before { - content: var(--use-grouping-label--content, "Use Grouping"); + content: var(--psp-label--use-grouping--content, "Use Grouping"); } label#sign-display-label:before { - content: var(--sign-display-label--content, "Sign Display"); + content: var(--psp-label--sign-display--content, "Sign Display"); } label#aggregate-depth-label:before { - content: var(--aggregate-depth-label--content, "Aggregate Depth"); + content: var(--psp-label--aggregate-depth--content, "Aggregate Depth"); } label#max-value-label:before { - content: var(--max-value-label--content, "Max Value"); + content: var(--psp-label--max-value--content, "Max Value"); } label#rounding-priority-label:before { - content: var(--rounding-priority-label--content, "Rounding Priority"); + content: var( + --psp-label--rounding-priority--content, + "Rounding Priority" + ); } label#rounding-mode-label:before { - content: var(--rounding-mode-label--content, "Rounding Mode"); + content: var(--psp-label--rounding-mode--content, "Rounding Mode"); } label#trailing-zero-display-label:before { content: var( - --trailing-zero-display-label--content, + --psp-label--trailing-zero-display--content, "Trailing Zero Display" ); } label#significant-digits-label:before { - content: var(--significant-digits-label--content, "Significant Digits"); + content: var( + --psp-label--significant-digits--content, + "Significant Digits" + ); } label#fractional-digits-label:before { - content: var(--fractional-digits-label--content, "Fractional Digits"); + content: var( + --psp-label--fractional-digits--content, + "Fractional Digits" + ); } label#year-label:before { - content: var(--year-label--content, "Year"); + content: var(--psp-label--year--content, "Year"); } label#month-label:before { - content: var(--month-label--content, "Month"); + content: var(--psp-label--month--content, "Month"); } label#day-label:before { - content: var(--day-label--content, "Day"); + content: var(--psp-label--day--content, "Day"); } label#weekday-label:before { - content: var(--weekday-label--content, "Weekday"); + content: var(--psp-label--weekday--content, "Weekday"); } label#hour-label:before { - content: var(--hour-label--content, "Hour"); + content: var(--psp-label--hour--content, "Hour"); } label#minute-label:before { - content: var(--minute-label--content, "Minute"); + content: var(--psp-label--minute--content, "Minute"); } label#second-label:before { - content: var(--second-label--content, "Second"); + content: var(--psp-label--second--content, "Second"); } label#fractional-seconds-label:before { - content: var(--fractional-seconds-label--content, "Fractional Seconds"); + content: var( + --psp-label--fractional-seconds--content, + "Fractional Seconds" + ); } label#hours-label:before { - content: var(--hours-label--content, "12/24 Hours"); + content: var(--psp-label--hours--content, "12/24 Hours"); } div.tab-title#Style:before { - content: var(--style-tab-label--content, "Style"); + content: var(--psp-label--style-tab--content, "Style"); } div.tab-title#Attributes:before { - content: var(--attributes-tab-label--content, "Attributes"); + content: var(--psp-label--attributes-tab--content, "Attributes"); } } diff --git a/rust/perspective-viewer/src/less/column-style.less b/rust/perspective-viewer/src/css/column-style.css similarity index 71% rename from rust/perspective-viewer/src/less/column-style.less rename to rust/perspective-viewer/src/css/column-style.css index eb879baf28..3ba952f6c3 100644 --- a/rust/perspective-viewer/src/less/column-style.less +++ b/rust/perspective-viewer/src/css/column-style.css @@ -1,23 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@mixin icon { - background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; -} +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { #column-style-container { @@ -26,11 +18,11 @@ &.no-style { font-style: italic; - background-color: #8b868045; + background-color: var(--psp-placeholder--background); } .is-default-value .dropdown-width-container { - background-color: var(--plugin--background); + background-color: var(--psp--background-color); } .dropdown-width-container { @@ -40,11 +32,11 @@ border-radius: 2px; padding: 0 8px; border-radius: 2px; - // border: 1px solid transparent; - border-color: var(--inactive--color, #666); + /* border: 1px solid transparent; */ + border-color: var(--psp-inactive--color, #666); &:hover { - background-color: var(--plugin--background); + background-color: var(--psp--background-color); } } @@ -52,8 +44,8 @@ cursor: pointer; font-size: 10px; height: 22px; - // padding-bottom: 2px; - // border-bottom: 1px solid var(--input--border-color, #ccc); + /* padding-bottom: 2px; */ + /* border-bottom: 1px solid var(--input--border-color, #ccc); */ padding: 0 8px; } @@ -68,7 +60,7 @@ margin-left: 4px; width: 14px; height: 14px; - border: 1px solid var(--inactive--border-color); + border: 1px solid var(--psp-inactive--border-color); border-radius: 2px; } @@ -77,18 +69,22 @@ width: 22px; height: 22px; margin-right: -4px; + display: inline-block; + background-repeat: no-repeat; + background-color: var(--psp--color); + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: var(--psp-icon--close--mask-image); + mask-image: var(--psp-icon--close--mask-image); &:before { - @include icon; - width: 22px; - height: 22px; - -webkit-mask-image: var(--close-icon--mask-image); - mask-image: var(--close-icon--mask-image); + content: var(--psp-icon--close--mask-image); + visibility: hidden; } } .is-default-value input.parameter { - background-color: var(--plugin--background); + background-color: var(--psp--background-color); } input.parameter { @@ -110,7 +106,7 @@ border-width: 1px; border-color: var( --input--border-color, - var(--inactive--color, inherit) + var(--psp-inactive--color, inherit) ); } @@ -141,23 +137,27 @@ input[type="radio"] { appearance: none; + display: inline-block; + background-repeat: no-repeat; + background-color: var(--psp--color); + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: var(--psp-icon--radio-off--mask-image); + mask-image: var(--psp-icon--radio-off--mask-image); - &:checked:before { - -webkit-mask-image: var(--column-radio-on--mask-image); - mask-image: var(--column-radio-on--mask-image); + &:before { + content: var(--psp-icon--radio-off--mask-image); + visibility: hidden; } - &:before { - @include icon; - width: 10px; - height: 10px; - -webkit-mask-image: var(--column-radio-off--mask-image); - mask-image: var(--column-radio-off--mask-image); + &:checked { + -webkit-mask-image: var(--psp-icon--radio-on--mask-image); + mask-image: var(--psp-icon--radio-on--mask-image); } - &:hover:before { - -webkit-mask-image: var(--column-radio-hover--mask-image); - mask-image: var(--column-radio-hover--mask-image); + &:hover { + -webkit-mask-image: var(--psp-icon--radio-hover--mask-image); + mask-image: var(--psp-icon--radio-hover--mask-image); } } @@ -209,7 +209,7 @@ grid-column: 1; grid-row: 1; margin: 0; - font-family: var(--button--font-family, inherit); + font-family: var(--psp-button--font-family, inherit); color: var(--sign--color, white); width: 36px; height: 24px; @@ -279,7 +279,7 @@ appearance: none; background: none; color: inherit; - border: 1px solid var(--inactive--color); + border: 1px solid var(--psp-inactive--color); border-radius: 3px; font-family: inherit; padding: 6px; @@ -292,9 +292,9 @@ } &:hover { - border-color: var(--icon--color); - background-color: var(--icon--color); - color: var(--plugin--background); + border-color: var(--psp--color); + background-color: var(--psp--color); + color: var(--psp--background-color); } &:hover:before { diff --git a/rust/perspective-viewer/src/less/column-symbol-attributes.less b/rust/perspective-viewer/src/css/column-symbol-attributes.css similarity index 74% rename from rust/perspective-viewer/src/less/column-symbol-attributes.less rename to rust/perspective-viewer/src/css/column-symbol-attributes.css index 83ac78dee5..2f8550475d 100644 --- a/rust/perspective-viewer/src/less/column-symbol-attributes.less +++ b/rust/perspective-viewer/src/css/column-symbol-attributes.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { #attributes-symbols { @@ -16,8 +17,8 @@ svg { width: 15px; height: auto; - color: var(--icon--color); - fill: var(--icon--color); + color: var(--psp--color); + fill: var(--psp--color); background: none; } @@ -40,7 +41,7 @@ } .row-selector-errored input { - border-color: var(--error--color); + border-color: var(--psp-error--color); } } diff --git a/rust/perspective-viewer/src/less/config-selector.less b/rust/perspective-viewer/src/css/config-selector.css similarity index 52% rename from rust/perspective-viewer/src/less/config-selector.less rename to rust/perspective-viewer/src/css/config-selector.css index bdf0f37db2..3bf34221f6 100644 --- a/rust/perspective-viewer/src/less/config-selector.less +++ b/rust/perspective-viewer/src/css/config-selector.css @@ -1,69 +1,61 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@mixin icon { - background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; -} +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { #top_panel.dragdrop-highlight { .psp-text-field { - border-bottom-color: var(--icon--color) !important; + border-bottom-color: var(--psp--color) !important; } .pivot-column-border { - border-color: var(--icon--color) !important; + border-color: var(--psp--color) !important; } } #top_panel.group-rollup-mode-total { #group_by { width: 100%; - // height: 26px; + /* height: 26px; */ .pivot-column { .pivot-column-total { min-height: 24px; margin-bottom: 4px; &:before { - background-color: var(--plugin--background); + background-color: var(--psp--background-color); } } .column_name { - color: var(--inactive--color); + color: var(--psp-inactive--color); } .type-icon { - background-color: var(--inactive--color); + background-color: var(--psp-inactive--color); } &:hover .pivot-column-border { - border-color: var(--inactive--color, #ababab); + border-color: var(--psp-inactive--color, #ababab); } - // input { - // background-color: var(--plugin--background); - // pointer-events: none; - // border: 1px solid var(--inactive--color); - // color: var(--inactive--color) !important; - // // &:placeholder { + /* input { */ + /* background-color: var(--psp--background-color); */ + /* pointer-events: none; */ + /* border: 1px solid var(--psp-inactive--color); */ + /* color: var(--psp-inactive--color) !important; */ + /* // &:placeholder { */ - // // } - // } + /* // } */ + /* } */ } } } @@ -80,24 +72,24 @@ margin: 0 6.5px 4px 6.5px; cursor: pointer; height: 14px; - } - - .row_close:before { - height: 14px; - width: 14px; + display: inline-block; background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; + background-color: var(--psp--color); -webkit-mask-size: cover; mask-size: cover; - display: inline-block; - -webkit-mask-image: var(--column-checkbox-on--mask-image); - mask-image: var(--column-checkbox-on--mask-image); - } + -webkit-mask-image: var(--psp-icon--checkbox-on--mask-image); + mask-image: var(--psp-icon--checkbox-on--mask-image); + + &:before { + line-height: 0; + content: var(--psp-icon--checkbox-on--mask-image); + visibility: hidden; + } - .row_close:hover:before { - -webkit-mask-image: var(--column-checkbox-hover--mask-image); - mask-image: var(--column-checkbox-hover--mask-image); + &:hover { + -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image); + mask-image: var(--psp-icon--checkbox-hover--mask-image); + } } .pivot-column { @@ -109,8 +101,8 @@ .pivot-column-border { flex: 1 1 auto; overflow: hidden; - background-color: var(--plugin--background); - border: 1px solid var(--inactive--color, #ababab); + background-color: var(--psp--background-color); + border: 1px solid var(--psp-inactive--color, #ababab); border-radius: 2px; display: flex; align-items: center; @@ -127,7 +119,7 @@ } &:hover .pivot-column-border { - border-color: var(--icon--color); + border-color: var(--psp--color); } .pivot-column-draggable { @@ -140,19 +132,27 @@ cursor: move; } - &:not(.column-empty) .pivot-column-border:before { + &:not(.column-empty) .pivot-column-border > .drag-handle { flex: 0 0 auto; - height: 12px; - width: 5px; - -webkit-mask-image: var(--column-drag-handle--mask-image); - mask-image: var(--column-drag-handle--mask-image); margin: 0px 0 0 6px; background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; + background-color: var(--psp--color); display: inline-block; -webkit-mask-size: cover; mask-size: cover; + -webkit-mask-image: var( + --psp-icon--psp-icon--column-drag-handle--mask-image + ); + mask-image: var( + --psp-icon--psp-icon--column-drag-handle--mask-image + ); + + &:before { + content: var( + --psp-icon--psp-icon--column-drag-handle--mask-image + ); + visibility: hidden; + } } span { @@ -161,16 +161,16 @@ span:first-child { text-overflow: ellipsis; - // max-width: 250px; + /* max-width: 250px; */ overflow: hidden; } - // Column is being dragged-over, e.g. this is the drop indicator. + /* Column is being dragged-over, e.g. this is the drop indicator. */ & .config-drop { - background-color: #8b868045; + background-color: var(--psp-placeholder--background); margin-right: 7px; margin-bottom: 4px; - border: 1px solid var(--icon--color); + border: 1px solid var(--psp--color); border-radius: 2px; overflow: visible; flex: 1 1 auto; @@ -185,7 +185,7 @@ right: 5px; bottom: 5px; border-radius: 2px; - background-color: var(--icon--color); + background-color: var(--psp--color); opacity: 0.3; } @@ -200,19 +200,19 @@ } #group_by label.pivot-selector-label:before { - content: var(--group-by-label--content, "Group By"); + content: var(--psp-label--group-by--content, "Group By"); } #split_by label.pivot-selector-label:before { - content: var(--split-by-label--content, "Split By"); + content: var(--psp-label--split-by--content, "Split By"); } #sort label.pivot-selector-label:before { - content: var(--sort-label--content, "Order By"); + content: var(--psp-label--sort--content, "Order By"); } #filter label.pivot-selector-label:before { - content: var(--filter-label--content, "Where"); + content: var(--psp-label--filter--content, "Where"); } .rrow { @@ -274,7 +274,7 @@ line-height: 17px; box-sizing: border-box; white-space: nowrap; - padding: var(--column-drop-container--padding, 0px); + padding: 0px; font-size: var(--label--font-size, 0.75em); display: inline-block; } @@ -299,19 +299,18 @@ margin-right: 28px; margin-top: 9px; select:hover { - color: var(--icon--color, inherit); + color: var(--psp--color, inherit); } } .group_rollup_wrapper { - width: 48px; margin-bottom: -30px; flex: 0 1 auto; - color: var(--inactive--color); + color: var(--psp-inactive--color); padding-top: 15px; - font-size: 9px; + font-size: var(--label--font-size, 0.75em); select { - font-size: 9px !important; + font-size: var(--label--font-size); } } @@ -323,21 +322,21 @@ user-select: none; padding: 0; align-self: center; - // margin-bottom: -23px; - // margin-top: 11.5px; - // align-self: flex-end; + /* margin-bottom: -23px; */ + /* margin-top: 11.5px; */ + /* align-self: flex-end; */ z-index: 1; min-height: 0px; - // margin-right: 30px; + /* margin-right: 30px; */ &:hover:before { - color: var(--icon--color, inherit); + color: var(--psp--color, inherit); } &:before { - font-family: var(--button--font-family, inherit); - color: var(--inactive--color, #666); - content: var(--transpose-button--content, "Swap"); + font-family: var(--psp-button--font-family, inherit); + color: var(--psp-inactive--color, #666); + content: var(--psp-label--transpose-button--content, "Swap"); } } } @@ -345,64 +344,98 @@ .sort-icon { display: inline-flex; margin-left: auto; - // margin-right: 8px; + /* margin-right: 8px; */ cursor: pointer; - font-family: var(--button--font-family, inherit); + font-family: var(--psp-button--font-family, inherit); + background-repeat: no-repeat; + background-color: var(--psp--color); + -webkit-mask-size: cover; + mask-size: cover; &:hover { opacity: 1; - color: var(--active--color, inherit); - } - - &:before { - @include icon; - width: 16px; - height: 16px; + color: var(--psp-active--color, inherit); } - &.desc:before { - -webkit-mask-image: var(--sort-desc-icon--mask-image); - mask-image: var(--sort-desc-icon--mask-image); + &.desc { + -webkit-mask-image: var(--psp-icon--sort-desc--mask-image); + mask-image: var(--psp-icon--sort-desc--mask-image); + &:before { + content: var(--psp-icon--sort-desc--mask-image); + visibility: hidden; + } } - &.asc:before { - -webkit-mask-image: var(--sort-asc-icon--mask-image); - mask-image: var(--sort-asc-icon--mask-image); + &.asc { + -webkit-mask-image: var(--psp-icon--sort-asc--mask-image); + mask-image: var(--psp-icon--sort-asc--mask-image); + &:before { + content: var(--psp-icon--sort-asc--mask-image); + visibility: hidden; + } } - &.none:before { - -webkit-mask-image: var(--sort-none-icon--mask-image); - mask-image: var(--sort-none-icon--mask-image); + &.none { + -webkit-mask-image: var(--psp-icon--sort-none--mask-image); + mask-image: var(--psp-icon--sort-none--mask-image); + &:before { + content: var(--psp-icon--sort-none--mask-image); + visibility: hidden; + } } - &.asc.abs:before { - -webkit-mask-image: var(--sort-abs-asc-icon--mask-image); - mask-image: var(--sort-abs-asc-icon--mask-image); + &.asc.abs { + -webkit-mask-image: var(--psp-icon--sort-abs-asc--mask-image); + mask-image: var(--psp-icon--sort-abs-asc--mask-image); + &:before { + content: var(--psp-icon--sort-abs-asc--mask-image); + visibility: hidden; + } } - &.desc.abs:before { - -webkit-mask-image: var(--sort-abs-desc-icon--mask-image); - mask-image: var(--sort-abs-desc-icon--mask-image); + &.desc.abs { + -webkit-mask-image: var(--psp-icon--sort-abs-desc--mask-image); + mask-image: var(--psp-icon--sort-abs-desc--mask-image); + &:before { + content: var(--psp-icon--sort-abs-desc--mask-image); + visibility: hidden; + } } - &.col.asc:before { - -webkit-mask-image: var(--sort-col-asc-icon--mask-image); - mask-image: var(--sort-col-asc-icon--mask-image); + &.col.asc { + -webkit-mask-image: var(--psp-icon--sort-col-asc--mask-image); + mask-image: var(--psp-icon--sort-col-asc--mask-image); + &:before { + content: var(--psp-icon--sort-col-asc--mask-image); + visibility: hidden; + } } - &.col.desc:before { - -webkit-mask-image: var(--sort-col-desc-icon--mask-image); - mask-image: var(--sort-col-desc-icon--mask-image); + &.col.desc { + -webkit-mask-image: var(--psp-icon--sort-col-desc--mask-image); + mask-image: var(--psp-icon--sort-col-desc--mask-image); + &:before { + content: var(--psp-icon--sort-col-desc--mask-image); + visibility: hidden; + } } - &.col.asc.abs:before { - -webkit-mask-image: var(--sort-abs-col-asc-icon--mask-image); - mask-image: var(--sort-abs-col-asc-icon--mask-image); + &.col.asc.abs { + -webkit-mask-image: var(--psp-icon--sort-abs-col-asc--mask-image); + mask-image: var(--psp-icon--sort-abs-col-asc--mask-image); + &:before { + content: var(--psp-icon--sort-abs-col-asc--mask-image); + visibility: hidden; + } } - &.col.desc.abs:before { - -webkit-mask-image: var(--sort-abs-col-desc-icon--mask-image); - mask-image: var(--sort-abs-col-desc-icon--mask-image); + &.col.desc.abs { + -webkit-mask-image: var(--psp-icon--sort-abs-col-desc--mask-image); + mask-image: var(--psp-icon--sort-abs-col-desc--mask-image); + &:before { + content: var(--psp-icon--sort-abs-col-desc--mask-image); + visibility: hidden; + } } } } diff --git a/rust/perspective-viewer/src/less/containers/dropdown-menu.less b/rust/perspective-viewer/src/css/containers/dropdown-menu.css similarity index 67% rename from rust/perspective-viewer/src/less/containers/dropdown-menu.less rename to rust/perspective-viewer/src/css/containers/dropdown-menu.css index f609c97b79..ff7269bf5e 100644 --- a/rust/perspective-viewer/src/less/containers/dropdown-menu.less +++ b/rust/perspective-viewer/src/css/containers/dropdown-menu.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { position: fixed; @@ -26,23 +27,23 @@ min-width: 80px; code { - font-family: var(--interface-monospace--font-family), monospace; + font-family: var(--psp-interface-monospace--font-family), monospace; } input { margin: 0; padding: 0; border: none; - border-bottom: 1px solid var(--inactive--color, #ccc); + border-bottom: 1px solid var(--psp-inactive--color, #ccc); background: transparent; - font-family: var(--interface-monospace--font-family), monospace; + font-family: var(--psp-interface-monospace--font-family), monospace; color: inherit; outline: none; } .invalid { - color: var(--error--color, #ff0000); - border-color: var(--error--color, #ff0000); + color: var(--psp-error--color, #ff0000); + border-color: var(--psp-error--color, #ff0000); } .selected { @@ -50,7 +51,7 @@ } .dropdown-group-label { - color: var(--inactive--color); + color: var(--psp-inactive--color); &:not(:first-of-type) { margin-top: 16px; @@ -88,7 +89,7 @@ } .dropdown-group-container span:hover { - background-color: var(--icon--color); - color: var(--plugin--background); + background-color: var(--psp--color); + color: var(--psp--background-color); } } diff --git a/rust/perspective-viewer/src/less/containers/pairs-list.less b/rust/perspective-viewer/src/css/containers/pairs-list.css similarity index 70% rename from rust/perspective-viewer/src/less/containers/pairs-list.less rename to rust/perspective-viewer/src/css/containers/pairs-list.css index 84c4af7075..fb4f3e9f14 100644 --- a/rust/perspective-viewer/src/less/containers/pairs-list.less +++ b/rust/perspective-viewer/src/css/containers/pairs-list.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ .pairs-list { ul { @@ -24,7 +25,7 @@ flex-direction: row; align-items: center; justify-content: space-between; - border-bottom: solid 1px var(--inactive--border-color); + border-bottom: solid 1px var(--psp-inactive--border-color); margin-bottom: 12px; } diff --git a/rust/perspective-viewer/src/less/containers/scroll-panel.less b/rust/perspective-viewer/src/css/containers/scroll-panel.css similarity index 66% rename from rust/perspective-viewer/src/less/containers/scroll-panel.less rename to rust/perspective-viewer/src/css/containers/scroll-panel.css index 8ac0885f2b..64f10922c1 100644 --- a/rust/perspective-viewer/src/less/containers/scroll-panel.less +++ b/rust/perspective-viewer/src/css/containers/scroll-panel.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { .scroll-panel-container { diff --git a/rust/perspective-viewer/src/less/containers/split-panel.less b/rust/perspective-viewer/src/css/containers/split-panel.css similarity index 75% rename from rust/perspective-viewer/src/less/containers/split-panel.less rename to rust/perspective-viewer/src/css/containers/split-panel.css index 40e088e064..3eae3319fa 100644 --- a/rust/perspective-viewer/src/less/containers/split-panel.less +++ b/rust/perspective-viewer/src/css/containers/split-panel.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { #modal_panel.split-panel.orient-reverse @@ -54,7 +55,7 @@ flex: 0 0 auto; } - // The thing you click to drag the panel size. + /* The thing you click to drag the panel size. */ .split-panel-divider { flex: 0 0 6px; transition: background-color 0.2s ease-out; @@ -66,8 +67,8 @@ } } - // Make the elements embedded in each child stretch to fill the - // container + /* Make the elements embedded in each child stretch to fill the */ + /* container */ .split-panel-child { position: relative; display: flex; diff --git a/rust/perspective-viewer/src/less/containers/tabs.less b/rust/perspective-viewer/src/css/containers/tabs.css similarity index 71% rename from rust/perspective-viewer/src/less/containers/tabs.less rename to rust/perspective-viewer/src/css/containers/tabs.css index fb0d953995..9d47ca4df4 100644 --- a/rust/perspective-viewer/src/less/containers/tabs.less +++ b/rust/perspective-viewer/src/css/containers/tabs.css @@ -1,20 +1,19 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@import "dom/scrollbar.less"; +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { .tab-gutter { - border-color: var(--inactive--color, #6e6e6e); + border-color: var(--psp-inactive--color, #6e6e6e); display: flex; .tab.tab-padding { @@ -29,21 +28,21 @@ } .tab { - //TODO: This needs to be a variable color. Which one? + /* TODO: This needs to be a variable color. Which one? */ background: rgba(0, 0, 0, 0.125); - border-right: 1px solid var(--inactive--color, #6e6e6e); + border-right: 1px solid var(--psp-inactive--color, #6e6e6e); user-select: none; cursor: pointer; .tab-title { font-size: 10px; padding: 10px; - border-bottom: 1px solid var(--inactive--color, #6e6e6e); + border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e); } .tab-border { height: 2px; width: 100%; - background-color: var(--inactive--color, #6e6e6e); + background-color: var(--psp-inactive--color, #6e6e6e); margin-top: 1px; } @@ -68,7 +67,6 @@ } .tab-content { - @include scrollbar; flex: 1 1 auto; overflow: hidden; display: flex; diff --git a/rust/perspective-viewer/src/css/dom/checkbox.css b/rust/perspective-viewer/src/css/dom/checkbox.css new file mode 100644 index 0000000000..afbae7d6ba --- /dev/null +++ b/rust/perspective-viewer/src/css/dom/checkbox.css @@ -0,0 +1,102 @@ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ + +:host { + input[type="checkbox"].alternate { + appearance: none; + height: 14px; + width: 14px; + padding: 0px; + cursor: pointer; + outline: none; + margin: 0 5px; + display: inline-block; + background-repeat: no-repeat; + background-color: var(--psp--color, #ccc); + -webkit-mask-size: cover; + mask-size: cover; + font-family: var(--psp-button--font-family, inherit); + -webkit-mask-image: var( + --psp-label--inactive-column-selector--content, + none + ); + mask-image: var(--psp-label--inactive-column-selector--content, none); + + &:before { + content: var(--psp-label--inactive-column-selector--content, none); + visibility: hidden; + } + + &:hover { + border-radius: 2px; + outline: 1px solid var(--psp--color); + } + + &:checked:hover { + background-color: var(--psp--color, #ccc); + } + + &:checked { + -webkit-mask-image: var( + --psp-label--active-column-selector--content, + none + ); + mask-image: var(--psp-label--active-column-selector--content, none); + } + } + + input[type="checkbox"] { + float: left; + appearance: none; + height: 14px; + width: 14px; + padding: 0px; + cursor: pointer; + outline: none; + margin: 0 5px 0 0; + display: inline-block; + background-repeat: no-repeat; + background-color: var(--psp--color); + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: var(--psp-icon--checkbox-off--mask-image); + mask-image: var(--psp-icon--checkbox-off--mask-image); + + &:before { + content: var(--psp-icon--checkbox-off--mask-image); + visibility: hidden; + } + + &:checked { + -webkit-mask-image: var(--psp-icon--checkbox-on--mask-image); + mask-image: var(--psp-icon--checkbox-on--mask-image); + } + + &[disabled] { + opacity: 0.2s; + } + + &:hover { + background-color: transparent; + } + + &:hover { + -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image); + mask-image: var(--psp-icon--checkbox-hover--mask-image); + } + } + + input[type="checkbox"]:not(:disabled) { + cursor: pointer; + } +} diff --git a/rust/perspective-viewer/src/css/dom/scrollbar.css b/rust/perspective-viewer/src/css/dom/scrollbar.css new file mode 100644 index 0000000000..eeb9b9716d --- /dev/null +++ b/rust/perspective-viewer/src/css/dom/scrollbar.css @@ -0,0 +1,35 @@ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ + +:host { + .scrollable { + &:hover { + --fix: ; + } + &::-webkit-scrollbar-thumb { + border-radius: 2px; + border: 2px solid transparent; + box-shadow: inset 0px 0px 0 4px var(--psp-inactive--color); + } + &:hover::-webkit-scrollbar-thumb { + border: 1px solid transparent; + box-shadow: inset 0px 0px 0 4px var(--psp-inactive--color); + } + &::-webkit-scrollbar, + &::-webkit-scrollbar-corner { + background-color: transparent; + width: 6px; + height: 6px; + } + } +} diff --git a/rust/perspective-viewer/src/less/dom/select.less b/rust/perspective-viewer/src/css/dom/select.css similarity index 68% rename from rust/perspective-viewer/src/less/dom/select.less rename to rust/perspective-viewer/src/css/dom/select.css index d2e06f489d..4b1f577bff 100644 --- a/rust/perspective-viewer/src/less/dom/select.less +++ b/rust/perspective-viewer/src/css/dom/select.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { .dropdown-width-container { @@ -41,21 +42,21 @@ appearance: none; color: inherit; padding: 0px 12px 0px 0px; - font-size: 10px; + /* font-size: 10px; */ font-family: inherit; background-color: transparent; - background-image: var(--select-arrow--background-image); + background-image: var(--psp-icon--select-arrow--mask-image); background-position: right 2px center; background-repeat: no-repeat; &.invert:focus-within, &.invert:hover { - background-image: var(--select-arrow--hover--background-image); + background-image: var(--psp-icon--select-arrow-hover--mask-image); } option { - color: var(--icon--color, inherit); - background: var(--plugin--background, transparent); + color: var(--psp--color, inherit); + background: var(--psp--background-color, transparent); } } } diff --git a/rust/perspective-viewer/src/less/empty-column.less b/rust/perspective-viewer/src/css/empty-column.css similarity index 72% rename from rust/perspective-viewer/src/less/empty-column.less rename to rust/perspective-viewer/src/css/empty-column.css index e08fdb5cd8..1ea72cdef6 100644 --- a/rust/perspective-viewer/src/less/empty-column.less +++ b/rust/perspective-viewer/src/css/empty-column.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { --invalid-column-pattern: url("data:image/svg+xml;utf8,"); @@ -21,7 +22,7 @@ .column-invalid-input { mask-image: var(--invalid-column-pattern); -webkit-mask-image: var(--invalid-column-pattern); - background-color: var(--icon--color); + background-color: var(--psp--color); mask-size: cover; -webkit-mask-size: cover; width: 100%; @@ -36,8 +37,8 @@ position: relative; box-sizing: border-box; width: calc(100% - 7px); - background-color: #8b868045; - border: 1px solid var(--icon--color); + background-color: var(--psp-placeholder--background); + border: 1px solid var(--psp--color); border-radius: 2px; margin-right: 6px; margin-bottom: 4px; @@ -52,7 +53,7 @@ align-items: stretch; cursor: auto; - background-color: #8b868045; + background-color: var(--psp-placeholder--background); border: 1px solid transparent; border-radius: 2px; padding-bottom: 0px; @@ -65,8 +66,8 @@ } .column-empty-input:focus { - color: var(--plugin--background); - background-color: var(--icon--color); - border: 1px solid var(--icon--color); + color: var(--psp--background-color); + background-color: var(--psp--color); + border: 1px solid var(--psp--color); } } diff --git a/rust/perspective-viewer/src/less/expression-editor.less b/rust/perspective-viewer/src/css/expression-editor.css similarity index 78% rename from rust/perspective-viewer/src/less/expression-editor.less rename to rust/perspective-viewer/src/css/expression-editor.css index f45cd78594..8ea220748b 100644 --- a/rust/perspective-viewer/src/less/expression-editor.less +++ b/rust/perspective-viewer/src/css/expression-editor.css @@ -1,22 +1,23 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { #editor-container { display: flex; flex-direction: column; min-width: 0px; - border: 1px solid var(--inactive--color); - background-color: var(--plugin--background); + border: 1px solid var(--psp-inactive--color); + background-color: var(--psp--background-color); border-radius: 3px; overflow: hidden; @@ -25,7 +26,7 @@ overflow: hidden; text-overflow: ellipsis; min-height: 1.5em; - color: var(--error--color); + color: var(--psp-error--color); top: 0.5em; left: 0.5em; position: absolute; @@ -37,7 +38,7 @@ #textarea_editable, #line_numbers, #editor { - background-color: var(--inactive--border-color); + background-color: var(--psp-inactive--border-color); } } } @@ -129,7 +130,7 @@ font-family: inherit; font-size: 0.8333em; text-transform: uppercase; - border: 1px solid var(--icon--color); + border: 1px solid var(--psp--color); border-radius: 2px; height: 24px; padding: 2px 12px; @@ -140,8 +141,8 @@ &:not([disabled]):hover { cursor: pointer; - background-color: var(--icon--color); - color: var(--plugin--background); + background-color: var(--psp--color); + color: var(--psp--background-color); } &[disabled] { diff --git a/rust/perspective-viewer/src/less/filter-dropdown.less b/rust/perspective-viewer/src/css/filter-dropdown.css similarity index 73% rename from rust/perspective-viewer/src/less/filter-dropdown.less rename to rust/perspective-viewer/src/css/filter-dropdown.css index 3ddbd15023..f6421de1aa 100644 --- a/rust/perspective-viewer/src/less/filter-dropdown.less +++ b/rust/perspective-viewer/src/css/filter-dropdown.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { position: fixed; diff --git a/rust/perspective-viewer/src/less/filter-item.less b/rust/perspective-viewer/src/css/filter-item.css similarity index 81% rename from rust/perspective-viewer/src/less/filter-item.less rename to rust/perspective-viewer/src/css/filter-item.css index 734773153f..2abf51ec09 100644 --- a/rust/perspective-viewer/src/less/filter-item.less +++ b/rust/perspective-viewer/src/css/filter-item.css @@ -1,18 +1,19 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { :-webkit-calendar-picker-indicator { - filter: var(--calendar--filter, none); + filter: var(--psp-calendar--filter, none); } #top_panel { @@ -39,14 +40,14 @@ grid-area: 1 / 1; padding: 0; border: none; - border-bottom: 1px solid var(--inactive--color, #ccc); + border-bottom: 1px solid var(--psp-inactive--color, #ccc); background: transparent; color: inherit; } &:after { content: attr(data-value) " "; - color: var(--inactive--color, inherit); + color: var(--psp-inactive--color, inherit); visibility: hidden; white-space: nowrap; padding-right: 18px; @@ -85,7 +86,7 @@ } } - // The filter comparator + /* The filter comparator */ #filter { .pivot-column { input { diff --git a/rust/perspective-viewer/src/less/form/code-editor.less b/rust/perspective-viewer/src/css/form/code-editor.css similarity index 69% rename from rust/perspective-viewer/src/less/form/code-editor.less rename to rust/perspective-viewer/src/css/form/code-editor.css index 46d8b3d418..7558e7e3dc 100644 --- a/rust/perspective-viewer/src/less/form/code-editor.less +++ b/rust/perspective-viewer/src/css/form/code-editor.css @@ -1,16 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@import "dom/scrollbar.less"; +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { #editor { @@ -19,7 +18,6 @@ position: relative; overflow-x: visible; overflow-y: auto; - @include scrollbar; #editor-height-sizer { height: 100px; @@ -33,13 +31,13 @@ } #line_numbers { - color: var(--inactive--color); - background-color: var(--plugin--background, white); + color: var(--psp-inactive--color); + background-color: var(--psp--background-color, white); box-sizing: border-box; display: flex; flex-direction: column; flex: 0 0 auto; - font-family: var(--interface-monospace--font-family, monospace); + font-family: var(--psp-interface-monospace--font-family, monospace); font-weight: 400; overflow: hidden; padding: 6px 0 6px 6px; @@ -59,25 +57,25 @@ pre#content { margin: 0 6px 6px 0; padding: 6px 0; - // margin-left: 36px; + /* margin-left: 36px; */ box-sizing: border-box; pointer-events: none; font-weight: 400; - font-family: var(--interface-monospace--font-family, monospace); + font-family: var(--psp-interface-monospace--font-family, monospace); color: var(--code-editor-error--color, red); white-space: pre; overflow: hidden; span { - // display: contents; + /* display: contents; */ } .comment { - color: var(--code-editor-comment--color, orange); + color: var(--psp-code-editor--comment--color, orange); } .operator { - color: var(--code-editor-operator--color, green); + color: var(--psp-code-editor--operator--color, green); } .unknown { @@ -85,19 +83,19 @@ } .symbol { - color: var(--code-editor-symbol--color, #242526); + color: var(--psp-code-editor--symbol--color, #242526); } .column { - color: var(--code-editor-column--color, purple); + color: var(--psp-code-editor--column--color, purple); } .literal { - color: var(--code-editor-literal--color, blue); + color: var(--psp-code-editor--literal--color, blue); } .error_highlight { - // background-color: + /* background-color: */ color: var(--code-editor-error--color, red); background-color: rgba(255, 0, 0, 0.1); border: 0px solid var(--code-editor-error--color, red); @@ -107,12 +105,10 @@ } #textarea_editable { - @include scrollbar; - position: absolute; width: 100%; height: 100%; - font-family: var(--interface-monospace--font-family, monospace); + font-family: var(--psp-interface-monospace--font-family, monospace); font-size: 1em; resize: none; padding: 6px 0; @@ -120,7 +116,7 @@ border: none; outline: none; color: transparent; - caret-color: var(--code-editor-symbol--color, #242526); + caret-color: var(--psp-code-editor--symbol--color, #242526); white-space: pre; box-sizing: border-box; background-color: transparent; diff --git a/rust/perspective-viewer/src/less/form/debug.less b/rust/perspective-viewer/src/css/form/debug.css similarity index 71% rename from rust/perspective-viewer/src/less/form/debug.less rename to rust/perspective-viewer/src/css/form/debug.css index 07f182525e..86610e83c2 100644 --- a/rust/perspective-viewer/src/less/form/debug.less +++ b/rust/perspective-viewer/src/css/form/debug.css @@ -1,18 +1,19 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { div.tab-title#Debug:before { - content: var(--debug-tab-label--content, "Debug JSON"); + content: var(--psp-label--debug-tab--content, "Debug JSON"); } #debug-panel-overflow { @@ -47,7 +48,7 @@ appearance: none; background-color: transparent; border-radius: 3px; - border: 1px solid var(--icon--color); + border: 1px solid var(--psp--color); color: inherit; cursor: pointer; flex: 0 1 100px; @@ -59,8 +60,8 @@ overflow: hidden; width: 0px; &:not([disabled]):hover { - background-color: var(--icon--color); - color: var(--plugin--background); + background-color: var(--psp--color); + color: var(--psp--background-color); } &[disabled] { @@ -79,10 +80,10 @@ } #editor { - background-color: var(--plugin--background); - border: 1px solid var(--inactive--color); + background-color: var(--psp--background-color); + border: 1px solid var(--psp-inactive--color); border-radius: 2px; - // height: 100%; + /* height: 100%; */ } } } diff --git a/rust/perspective-viewer/src/less/function-dropdown.less b/rust/perspective-viewer/src/css/function-dropdown.css similarity index 71% rename from rust/perspective-viewer/src/less/function-dropdown.less rename to rust/perspective-viewer/src/css/function-dropdown.css index 54be01fb8a..78a98d84b2 100644 --- a/rust/perspective-viewer/src/less/function-dropdown.less +++ b/rust/perspective-viewer/src/css/function-dropdown.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { position: fixed; diff --git a/rust/perspective-viewer/src/css/plugin-selector.css b/rust/perspective-viewer/src/css/plugin-selector.css new file mode 100644 index 0000000000..28a7359665 --- /dev/null +++ b/rust/perspective-viewer/src/css/plugin-selector.css @@ -0,0 +1,261 @@ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ + +:host { + #settings_panel { + #plugin_selector_container.open ~ * { + opacity: 0; + } + + #plugin_selector_container { + min-height: var( + --psp-plugin-selector--height, + var(--psp-status-bar--height, 48px) + ); + display: flex; + white-space: nowrap; + flex-direction: column; + flex: 0 0 auto; + + /* Overflow the padding bounds of the container */ + /* TODO these bounds exist to protext the resizer and scrollbar (left & */ + /* right resp) but we really should find a way to remove it and delegate */ + /* to sub-containers. */ + margin: 0 0px 0 -9px; + + #plugin_selector_border { + height: 2px; + min-height: 2px; + width: 100%; + background-color: var(--psp-inactive--color, #6e6e6e); + margin-top: 2px; + } + + .plugin-selector-options { + overflow-y: auto; + } + + &.open { + position: absolute; + margin: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; + + /* This element is first in the container but visually "overlaps" */ + /* when expanded */ + z-index: 3; + color: var(--psp--color, #042121); + /* background: var(--psp--background-color); */ + + .plugin-select-item { + padding-left: 8px; + } + } + + .plugin-select-item-name { + padding-left: 10px; + font-size: 1.33333em; + } + + .plugin-select-item-name:before { + /* This value is set in a `style` tag from Yew! */ + content: var(--default-column-title); + } + + .plugin-select-item { + /* width: 48px; */ + padding-left: 9px; + height: var( + --psp-plugin-selector--height, + var(--psp-status-bar--height, 48px) + ); + min-height: var( + --psp-plugin-selector--height, + var(--psp-status-bar--height, 48px) + ); + display: flex; + align-items: center; + border-bottom: 1px solid transparent; + box-shadow: 0px 1px var(--psp-inactive--color, #6e6e6e); + cursor: pointer; + } + + .plugin-select-item > .icon { + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + background-repeat: no-repeat; + background-color: var(--psp--color); + } + + .plugin-select-item:hover { + background-color: var(--psp--color, #042121); + color: var(--psp--background-color, #fdfffd); + } + + .plugin-select-item:hover > .icon { + background-color: var(--psp--background-color, #fdfffd); + } + + .plugin-select-item[data-plugin="Candlestick"] > .icon { + -webkit-mask-image: var( + --psp-plugin-selector--candlestick--content + ); + mask-image: var(--psp-plugin-selector--candlestick--content); + &:before { + content: var(--psp-plugin-selector--candlestick--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="Heatmap"] > .icon { + -webkit-mask-image: var( + --psp-plugin-selector--heatmap--content + ); + mask-image: var(--psp-plugin-selector--heatmap--content); + &:before { + content: var(--psp-plugin-selector--heatmap--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="Map Scatter"] > .icon { + -webkit-mask-image: var( + --psp-plugin-selector--map-scatter--content + ); + mask-image: var(--psp-plugin-selector--map-scatter--content); + &:before { + content: var(--psp-plugin-selector--map-scatter--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="OHLC"] > .icon { + -webkit-mask-image: var(--psp-plugin-selector--ohlc--content); + mask-image: var(--psp-plugin-selector--ohlc--content); + &:before { + content: var(--psp-plugin-selector--ohlc--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="Sunburst"] > .icon { + -webkit-mask-image: var( + --psp-plugin-selector--sunburst--content + ); + mask-image: var(--psp-plugin-selector--sunburst--content); + &:before { + content: var(--psp-plugin-selector--sunburst--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="Treemap"] > .icon { + -webkit-mask-image: var( + --psp-plugin-selector--treemap--content + ); + mask-image: var(--psp-plugin-selector--treemap--content); + &:before { + content: var(--psp-plugin-selector--treemap--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="X Bar"] > .icon { + -webkit-mask-image: var(--psp-plugin-selector--x-bar--content); + mask-image: var(--psp-plugin-selector--x-bar--content); + &:before { + content: var(--psp-plugin-selector--x-bar--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="X/Y Line"] > .icon { + -webkit-mask-image: var( + --psp-plugin-selector--x-y-line--content + ); + mask-image: var(--psp-plugin-selector--x-y-line--content); + &:before { + content: var(--psp-plugin-selector--x-y-line--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="X/Y Scatter"] > .icon { + -webkit-mask-image: var( + --psp-plugin-selector--x-y-scatter--content + ); + mask-image: var(--psp-plugin-selector--x-y-scatter--content); + &:before { + content: var(--psp-plugin-selector--x-y-scatter--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="Y Area"] > .icon { + -webkit-mask-image: var(--psp-plugin-selector--y-area--content); + mask-image: var(--psp-plugin-selector--y-area--content); + &:before { + content: var(--psp-plugin-selector--y-area--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="Y Bar"] > .icon { + -webkit-mask-image: var(--psp-plugin-selector--y-bar--content); + mask-image: var(--psp-plugin-selector--y-bar--content); + &:before { + content: var(--psp-plugin-selector--y-bar--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="Y Line"] > .icon { + -webkit-mask-image: var(--psp-plugin-selector--y-line--content); + mask-image: var(--psp-plugin-selector--y-line--content); + &:before { + content: var(--psp-plugin-selector--y-line--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="Y Scatter"] > .icon { + -webkit-mask-image: var( + --psp-plugin-selector--y-scatter--content + ); + mask-image: var(--psp-plugin-selector--y-scatter--content); + &:before { + content: var(--psp-plugin-selector--y-scatter--content); + visibility: hidden; + } + } + + .plugin-select-item[data-plugin="Datagrid"] > .icon { + -webkit-mask-image: var( + --psp-plugin-selector--datagrid--content + ); + mask-image: var(--psp-plugin-selector--datagrid--content); + &:before { + content: var(--psp-plugin-selector--datagrid--content); + visibility: hidden; + } + } + } + + #plugin_selector { + flex-grow: 1; + } + } +} diff --git a/rust/perspective-viewer/src/less/render-warning.less b/rust/perspective-viewer/src/css/render-warning.css similarity index 72% rename from rust/perspective-viewer/src/less/render-warning.less rename to rust/perspective-viewer/src/css/render-warning.css index dd0bb6e126..441f2364dc 100644 --- a/rust/perspective-viewer/src/less/render-warning.less +++ b/rust/perspective-viewer/src/css/render-warning.css @@ -1,20 +1,21 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ -// @amber400: #ffca28; +/* @amber400: #ffca28; */ :host { .plugin_information { - color: var(--warning--color, inherit); + color: var(--psp-warning--color, inherit); box-sizing: border-box; display: flex; position: absolute; @@ -30,7 +31,7 @@ align-items: center; &.plugin_information--warning { - background: var(--warning--background, #ffca28); + background: var(--psp-warning--background, #ffca28); } .plugin_information__text { @@ -45,13 +46,13 @@ } .plugin_information__icon:before { - content: var(--overflow-hint-icon--content); + content: var(--psp-icon-overflow-hint--content); height: 20px; font-family: var( --overflow_hint--font-family, - var(--button--font-family, inherit) + var(--psp-button--font-family, inherit) ); - color: var(--overflow-hint-icon--color); + color: var(--psp-icon-overflow-hint--color); padding: var(--overflow-hint-icon--padding, 0 12px 0 6px); font-size: 16px; } diff --git a/rust/perspective-viewer/src/less/status-bar.less b/rust/perspective-viewer/src/css/status-bar.css similarity index 61% rename from rust/perspective-viewer/src/less/status-bar.less rename to rust/perspective-viewer/src/css/status-bar.css index 2a5d967998..687c5a7e9a 100644 --- a/rust/perspective-viewer/src/less/status-bar.less +++ b/rust/perspective-viewer/src/css/status-bar.css @@ -1,14 +1,15 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host(:hover) { #status_bar.settings-closed.floating { @@ -18,11 +19,11 @@ } :host { - // When settings open ... + /* When settings open ... */ #main_column #status_bar, #main_column #status_bar.titled { input::placeholder { - color: var(--inactive--color); + color: var(--psp-inactive--color); } } @@ -43,23 +44,25 @@ min-height: auto; max-height: none; gap: 6px; - top: calc((var(--status-bar--height, 48px) - 20px) / 2); - right: calc(min(48px, (var(--status-bar--height, 48px) - 20px) / 2)); + top: calc((var(--psp-status-bar--height, 48px) - 20px) / 2); + right: calc( + min(48px, (var(--psp-status-bar--height, 48px) - 20px) / 2) + ); } #status_bar { - box-shadow: 0 13px 0 -12px var(--inactive--border-color); + box-shadow: 0 13px 0 -12px var(--psp-inactive--border-color); z-index: 1; - display: var(--status-bar--display, flex); + display: var(--psp-status-bar--display, flex); gap: 6px; align-items: center; - background: var(--plugin--background); - padding: var(--status-bar--padding, 0 31px 0 8px); + background: var(--psp--background-color); + padding: var(--psp-status-bar--padding, 0 31px 0 8px); position: relative; - height: var(--status-bar--height, 48px); - min-height: var(--status-bar--height, 48px); - max-height: var(--status-bar--height, 48px); - border-radius: var(--status-bar--border-radius); + height: var(--psp-status-bar--height, 48px); + min-height: var(--psp-status-bar--height, 48px); + max-height: var(--psp-status-bar--height, 48px); + border-radius: var(--psp-status-bar--border-radius); #status-bar-placeholder { margin: 0px; margin-right: -5px; @@ -71,8 +74,8 @@ } input:placeholder-shown + #status-bar-placeholder:before { - content: var(--untitled--content, "untitled"); - color: var(--inactive--color); + content: var(--psp-label--untitled--content, "untitled"); + color: var(--psp-inactive--color); } .input-sizer { @@ -106,7 +109,7 @@ &:after { content: attr(data-value) " "; - color: var(--inactive--color, inherit); + color: var(--psp-inactive--color, inherit); visibility: hidden; white-space: nowrap; padding-right: 12px; @@ -148,11 +151,11 @@ span.x, span.total { - color: var(--inactive--color); + color: var(--psp-inactive--color); } } - // Exceptions when the menu bar is visible and the settings panel is closed. + /* Exceptions when the menu bar is visible and the settings panel is closed. */ #menu-bar { flex: 0 1000000 auto; height: 100%; @@ -175,16 +178,13 @@ span.icon { height: 100%; - line-height: 36px; + /* line-height: 36px; */ margin: 0; } span#status { - width: 20px; - height: 20px; background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; + background-color: var(--psp--color); mask-size: contain; mask-repeat: no-repeat; mask-position: center; @@ -193,12 +193,17 @@ margin: 0 5px; } - // span#status_updating + /* span#status_updating */ span#status.loading { image-rendering: pixelated; - mask-image: var(--downloading-icon--mask-image); - -webkit-mask-image: var(--downloading-icon--mask-image); + mask-image: var(--psp-icon--downloading--mask-image); + -webkit-mask-image: var(--psp-icon--downloading--mask-image); + &:before { + visibility: hidden; + content: var(--psp-icon--downloading--mask-image); + line-height: 0; + } } span#status.uninitialized { @@ -207,8 +212,13 @@ span#status.connected, span#status.updating { - mask-image: var(--status-ok-icon--mask-image); - -webkit-mask-image: var(--status-ok-icon--mask-image); + mask-image: var(--psp-icon--status-ok--mask-image); + -webkit-mask-image: var(--psp-icon--status-ok--mask-image); + &:before { + visibility: hidden; + content: var(--psp-icon--status-ok--mask-image); + line-height: 0; + } } .error-dialog { @@ -222,9 +232,9 @@ padding: 0px 0px 0px 50px; display: none; white-space: pre-wrap; - color: var(--plugin--background); - background: var(--icon--color); - border-radius: var(--status-bar--border-radius); + color: var(--psp--background-color); + background: var(--psp--color); + border-radius: var(--psp-status-bar--border-radius); } .error-dialog-message { @@ -233,14 +243,14 @@ align-items: center; display: flex; padding-right: 17px; - height: var(--status-bar--height, 48px); - min-height: var(--status-bar--height, 48px); + height: var(--psp-status-bar--height, 48px); + min-height: var(--psp-status-bar--height, 48px); } .error-dialog-stack { font-size: 10px; padding-right: 17px; - color: var(--inactive--color); + color: var(--psp-inactive--color); overflow-y: auto; padding-bottom: 24px; } @@ -256,22 +266,23 @@ border-radius: 3px; margin: 0; height: auto; - border: 1px solid var(--status-ok-icon--border-color, transparent); - cursor: var(--status-ok-icon--cursor); - pointer-events: var(--status-indicator--pointer-events, none); + border: 1px solid + var(--psp-status-icon--ok--border-color, transparent); + cursor: var(--psp-status-icon--ok--cursor); + pointer-events: var(--psp-status-icon--pointer-events, none); &:hover { background-color: var( - --status-ok-icon--hover--background-color, + --psp-status-icon--ok-hover--background-color, transparent ); border-color: var( - --status-ok-icon--hover--border-color, + --psp-status-icon--ok-hover--border-color, transparent ); span#status { background-color: var( - --status-ok-icon--hover--color, - var(--icon--color) + --psp-status-icon--ok-hover--color, + var(--psp--color) ); } } @@ -292,37 +303,42 @@ align-items: center; justify-content: center; height: 20px; + width: 20px; border-radius: 10px; - color: var(--plugin--background); + color: var(--psp--background-color); &:before { content: "!"; } } &.errored:hover { - background-color: var(--icon--color); + background-color: var(--psp--color); span#status.errored { - color: var(--icon--color); - background-color: var(--plugin--background); + color: var(--psp--color); + background-color: var(--psp--background-color); } } } - // Status bar status icon animations + /* Status bar status icon animations */ span#status_updating { position: absolute; + display: inline-flex; + margin: 0 5px; opacity: 0; - width: 20px; - height: 20px; background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; + background-color: var(--psp--color); -webkit-mask-size: cover; mask-size: cover; pointer-events: none; image-rendering: pixelated; - mask-image: var(--updating-icon--mask-image); - -webkit-mask-image: var(--updating-icon--mask-image); + mask-image: var(--psp-icon--updating--mask-image); + -webkit-mask-image: var(--psp-icon--updating--mask-image); + &:before { + visibility: hidden; + content: var(--psp-icon--updating--mask-image); + line-height: 0; + } } span#status.updating { @@ -339,51 +355,76 @@ animation-duration: 0.3s; } - .button:before { - height: 21px; - width: 21px; + .button > .icon { background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; + background-color: var(--psp--color); -webkit-mask-size: cover; mask-size: cover; pointer-events: none; + display: inline-block; } span#export { - &:before { - -webkit-mask-image: var(--export-icon--mask-image); - mask-image: var(--export-icon--mask-image); + & > .icon { + -webkit-mask-image: var(--psp-icon--export--mask-image); + mask-image: var(--psp-icon--export--mask-image); + display: inline-flex; + &:before { + line-height: 0; + content: var(--psp-icon--export--mask-image); + visibility: hidden; + } } - span:before { - content: var(--export-button--content, "Export"); + + span:not(.icon):before { + content: var(--psp-label--export-button--content, "Export"); } } span#lock { - &:before { - -webkit-mask-image: var(--free-scroll-icon--mask-image); - mask-image: var(--free-scroll-icon--mask-image); + & > .icon { + -webkit-mask-image: var(--psp-icon--free-scroll--mask-image); + mask-image: var(--psp-icon--free-scroll--mask-image); + + &:before { + line-height: 0; + content: var(--psp-icon--free-scroll--mask-image); + visibility: hidden; + } } } span#reset { - &:before { - -webkit-mask-image: var(--reset-icon--mask-image); - mask-image: var(--reset-icon--mask-image); + & > .icon { + -webkit-mask-image: var(--psp-icon--reset--mask-image); + mask-image: var(--psp-icon--reset--mask-image); + display: inline-flex; + &:before { + line-height: 0; + content: var(--psp-icon--reset--mask-image); + visibility: hidden; + } } - span:before { - content: var(--reset-button--content); + span:not(.icon):before { + content: var(--psp-label--reset-button--content); } } span#copy { - &:before { - -webkit-mask-image: var(--copy-icon--mask-image); - mask-image: var(--copy-icon--mask-image); + & > .icon { + -webkit-mask-image: var(--psp-icon--copy--mask-image); + mask-image: var(--psp-icon--copy--mask-image); + display: inline-flex; + + &:before { + line-height: 0; + content: var(--psp-icon--copy--mask-image); + visibility: hidden; + } } - span:before { - content: var(--copy-button--content); + + span:not(.icon):before { + content: var(--psp-label--copy-button--content); } } @@ -405,21 +446,29 @@ height: 100%; } - &:before { + & > .icon { margin: 0 6px 0 4px; - -webkit-mask-image: var(--theme-icon--mask-image); - mask-image: var(--theme-icon--mask-image); + height: auto; + -webkit-mask-image: var(--psp-icon--theme--mask-image); + mask-image: var(--psp-icon--theme--mask-image); + display: inline-flex; + &:before { + line-height: 0; + content: var(--psp-icon--theme--mask-image); + visibility: hidden; + } } } - #theme_icon.modified:hover + #theme:before { - -webkit-mask-image: var(--close-icon--mask-image); - mask-image: var(--close-icon--mask-image); + #theme_icon.modified:hover + #theme > .icon { + -webkit-mask-image: var(--psp-icon--close--mask-image); + mask-image: var(--psp-icon--close--mask-image); } #theme_selector { max-width: 100px; text-overflow: ellipsis; + font-size: 0.8em; } .button { @@ -428,7 +477,7 @@ align-items: center; margin: 0px; padding: 0 5px; - color: var(--inactive--color, #ccc); + color: var(--psp-inactive--color, #ccc); border: 1px solid transparent; border-radius: 3px; font-size: var(--label--font-size, 0.75em); @@ -440,7 +489,7 @@ display: none; } - &:before { + & > .icon { z-index: 1; } } @@ -455,9 +504,9 @@ &:hover, &.modal-target { box-shadow: - -4px 0 0 var(--icon--color), - 4px 0 0 var(--icon--color); - background-color: var(--icon--color); + -4px 0 0 var(--psp--color), + 4px 0 0 var(--psp--color); + background-color: var(--psp--color); } &:focus-within .button select, @@ -466,26 +515,26 @@ } .modal-target .button > span { - color: var(--icon--color) !important; + color: var(--psp--color) !important; } &:focus-within .button, &:hover .button, &.modal-target .button { position: relative; - min-width: var(--button--min-width, 33px); + min-width: var(--psp-button--min-width, 33px); color: inherit; cursor: pointer; transition: none; - background-color: var(--icon--color); - color: var(--plugin--background); + background-color: var(--psp--color); + color: var(--psp--background-color); - &:before { - background-color: var(--plugin--background); + & > .icon { + background-color: var(--psp--background-color); } - // The label. - @mixin label { + & > span:not(.icon) { + /* The label. */ display: block; text-align: center; position: absolute; @@ -498,20 +547,16 @@ white-space: nowrap; line-height: 1; width: 41px; - background-color: var(--icon--color); + background-color: var(--psp--color); border-radius: 0 0 3px 3px; } - & > span { - @include label; - } - & > .dropdown-width-container { display: block; margin: 0; white-space: nowrap; line-height: 1; - background-color: var(--icon--color); + background-color: var(--psp--color); pointer-events: all; & > select { diff --git a/rust/perspective-viewer/src/css/type-icon.css b/rust/perspective-viewer/src/css/type-icon.css new file mode 100644 index 0000000000..4ca48b4e84 --- /dev/null +++ b/rust/perspective-viewer/src/css/type-icon.css @@ -0,0 +1,116 @@ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ + +:host #selected-columns .type-icon, +:host #sub-columns .type-icon { + /* position: absolute; */ + /* left: 15px; */ + margin-left: 4px; +} + +:host .icon { + background-repeat: no-repeat; + background-color: var(--psp--color); + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + flex-shrink: 0; + line-height: 0; + &.integer { + -webkit-mask-image: var(--icon-image); + mask-image: var(--icon-image); + + &:before { + content: var(--icon-image); + visibility: hidden; + } + } +} + +:host .type-icon { + background-repeat: no-repeat; + background-color: var(--psp--color); + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + flex-shrink: 0; + line-height: 0; + + &.none { + content: none; + } + + &.integer { + -webkit-mask-image: var(--psp-column-type--integer--mask-image); + mask-image: var(--psp-column-type--integer--mask-image); + + &:before { + content: var(--psp-column-type--integer--mask-image); + visibility: hidden; + } + } + + &.float { + -webkit-mask-image: var(--psp-column-type--float--mask-image); + mask-image: var(--psp-column-type--float--mask-image); + &:before { + content: var(--psp-column-type--float--mask-image); + visibility: hidden; + } + } + + &.string { + -webkit-mask-image: var(--psp-column-type--string--mask-image); + mask-image: var(--psp-column-type--string--mask-image); + &:before { + content: var(--psp-column-type--string--mask-image); + visibility: hidden; + } + } + + &.boolean { + -webkit-mask-image: var(--psp-column-type--boolean--mask-image); + mask-image: var(--psp-column-type--boolean--mask-image); + &:before { + content: var(--psp-column-type--boolean--mask-image); + visibility: hidden; + } + } + + &.date { + -webkit-mask-image: var(--psp-column-type--date--mask-image); + mask-image: var(--psp-column-type--date--mask-image); + &:before { + content: var(--psp-column-type--date--mask-image); + visibility: hidden; + } + } + + &.datetime { + -webkit-mask-image: var(--psp-column-type--datetime--mask-image); + mask-image: var(--psp-column-type--datetime--mask-image); + &:before { + content: var(--psp-column-type--datetime--mask-image); + visibility: hidden; + } + } + + &.expression { + -webkit-mask-image: var(--psp-icon--add-expression--mask-image); + mask-image: var(--psp-icon--add-expression--mask-image); + &:before { + content: var(--psp-icon--add-expression--mask-image); + visibility: hidden; + } + } +} diff --git a/rust/perspective-viewer/src/less/viewer.less b/rust/perspective-viewer/src/css/viewer.css similarity index 58% rename from rust/perspective-viewer/src/less/viewer.less rename to rust/perspective-viewer/src/css/viewer.css index 8c17946326..11276a6cbf 100644 --- a/rust/perspective-viewer/src/less/viewer.less +++ b/rust/perspective-viewer/src/css/viewer.css @@ -1,18 +1,19 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ +/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ + * ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ + * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ + * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ + * ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ + * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ + * ┃ Copyright (c) 2017, the Perspective Authors. ┃ + * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ + * ┃ This file is part of the Perspective library, distributed under the terms ┃ + * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ + * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + */ :host { --settings-panel-z-index: 10; - --icon--color: #ff0000; + --psp--color: #ff0000; } ::slotted(*) { @@ -25,8 +26,8 @@ padding-top: calc( ( var( - --plugin-selector--height, - var(--status-bar--height, 48px) + --psp-plugin-selector--height, + var(--psp-status-bar--height, 48px) ) - 20px ) / @@ -35,15 +36,18 @@ padding-bottom: calc( ( var( - --plugin-selector--height, - var(--status-bar--height, 48px) + --psp-plugin-selector--height, + var(--psp-status-bar--height, 48px) ) - 20px ) / 2 ); z-index: 10000; - height: var(--plugin-selector--height, var(--status-bar--height, 48px)); + height: var( + --psp-plugin-selector--height, + var(--psp-status-bar--height, 48px) + ); &:hover { cursor: pointer; @@ -52,25 +56,27 @@ .sidebar_close_button_inner { border-radius: 5px 0 0 5px; height: 20px; - background-color: var(--plugin--background); + background-color: var(--psp--background-color); } - .sidebar_close_button_inner:before { + .sidebar_close_button_inner .icon { display: inline-block; - height: 20px; - width: 20px; - content: ""; mask-size: cover; -webkit-mask-size: cover; background-repeat: no-repeat; - background-color: var(--icon--color); - mask-image: var(--drawer-tab-icon--mask-image); - -webkit-mask-image: var(--drawer-tab-icon--mask-image); + background-color: var(--psp--color); + mask-image: var(--psp-icon--drawer-tab--mask-image); + -webkit-mask-image: var(--psp-icon--drawer-tab--mask-image); + + &:before { + content: var(--psp-icon--drawer-tab--mask-image); + visibility: hidden; + } } - &:hover .sidebar_close_button_inner:before { - mask-image: var(--drawer-tab-icon--hover--mask-image); - -webkit-mask-image: var(--drawer-tab-icon--hover--mask-image); + &:hover .sidebar_close_button_inner .icon { + mask-image: var(--psp-icon--drawer-tab-hover--mask-image); + -webkit-mask-image: var(--psp-icon--drawer-tab-hover--mask-image); } } @@ -81,20 +87,20 @@ :host #debug_close_button.sidebar_close_button .sidebar_close_button_inner { background-attachment: fixed; - background: var(--sidebar--background); - background-size: 4px; + background: var(--psp-sidebar--background); - &:before { - mask-image: var(--drawer-tab-icon--hover--mask-image); - -webkit-mask-image: var(--drawer-tab-icon--hover--mask-image); + .icon { + mask-image: var(--psp-icon--drawer-tab-hover--mask-image); + -webkit-mask-image: var(--psp-icon--drawer-tab-hover--mask-image); } } :host #debug_close_button.sidebar_close_button:hover - .sidebar_close_button_inner:before { - mask-image: var(--drawer-tab-icon--mask-image); - -webkit-mask-image: var(--drawer-tab-icon--mask-image); + .sidebar_close_button_inner + .icon { + mask-image: var(--psp-icon--drawer-tab--mask-image); + -webkit-mask-image: var(--psp-icon--drawer-tab--mask-image); } :host #debug_open_button.sidebar_close_button { @@ -107,14 +113,16 @@ } :host #debug_open_button.sidebar_close_button .sidebar_close_button_inner { - &:before { - mask-image: var(--drawer-tab-inverted-icon--mask-image); - -webkit-mask-image: var(--drawer-tab-inverted-icon--mask-image); + .icon { + mask-image: var(--psp-icon--drawer-tab-inverted--mask-image); + -webkit-mask-image: var(--psp-icon--drawer-tab-inverted--mask-image); } - &:hover:before { - mask-image: var(--drawer-tab-inverted-icon--hover--mask-image); - -webkit-mask-image: var(--drawer-tab-inverted-icon--hover--mask-image); + &:hover .icon { + mask-image: var(--psp-icon--drawer-tab-inverted-hover--mask-image); + -webkit-mask-image: var( + --psp-icon--drawer-tab-inverted-hover--mask-image + ); } } @@ -164,7 +172,7 @@ height: auto; flex-direction: row-reverse; & > .split-panel-divider { - border-left: 1px solid var(--inactive--color, #6e6e6e); + border-left: 1px solid var(--psp-inactive--color, #6e6e6e); margin-right: -5px; } } @@ -183,12 +191,12 @@ } #modal_panel > .split-panel-divider { - border-left: 1px solid var(--inactive--color, #6e6e6e); + border-left: 1px solid var(--psp-inactive--color, #6e6e6e); margin-right: -5px; } #status_bar { - height: var(--status-bar--height, 48px); + height: var(--psp-status-bar--height, 48px); } #main_column_container { @@ -204,19 +212,22 @@ overflow: hidden; flex-direction: column; position: relative; - margin: var(--main-column--margin); - border: var(--main-column--border); - border-width: var(--main-column--border-width); - border-radius: var(--main-column--border-radius); + margin: var(--psp-main-column--margin); + border: var(--psp-main-column--border); + border-width: var(--psp-main-column--border-width); + border-radius: var(--psp-main-column--border-radius); } #main_panel_container { position: relative; height: 100%; box-shadow: var(--plugin--box-shadow, none); - background: var(--plugin--background, none); + background: var( + --psp-main-column--background, + var(--psp--background-color, none) + ); overflow: hidden; - border: var(--plugin--border, none); + border: var(--psp-plugin--border, none); } #settings_panel { @@ -233,8 +244,8 @@ } & > .split-panel-divider { - border-top: 1px solid var(--inactive--color, #6e6e6e); - border-bottom: 2px solid var(--inactive--color, #6e6e6e); + border-top: 1px solid var(--psp-inactive--color, #6e6e6e); + border-bottom: 2px solid var(--psp-inactive--color, #6e6e6e); margin-left: -9px; margin-right: 0px; flex: 0 0 4px; @@ -242,8 +253,8 @@ } #column_settings_sidebar .split-panel-divider { - border-top: 1px solid var(--inactive--color, #6e6e6e); - border-bottom: 2px solid var(--inactive--color, #6e6e6e); + border-top: 1px solid var(--psp-inactive--color, #6e6e6e); + border-bottom: 2px solid var(--psp-inactive--color, #6e6e6e); margin-left: -9px; margin-right: -4px; flex: 0 0 4px; @@ -256,8 +267,7 @@ } .sidebar_column { - background: var(--sidebar--background); - background-size: 4px; + background: var(--psp-sidebar--background); background-attachment: fixed; display: flex; @@ -265,7 +275,7 @@ flex-direction: column; flex: 1; - // Needs 2 because it must take precedence over teh chart legend. + /* Needs 2 because it must take precedence over teh chart legend. */ z-index: 2; } @@ -273,7 +283,7 @@ margin-top: 3px; border-bottom-width: 1px; border-style: solid; - border-color: var(--inactive--color, #c5c9d0); + border-color: var(--psp-inactive--color, #c5c9d0); border-top-width: 0px; border-left-width: 0px; border-right-width: 0px; @@ -289,80 +299,82 @@ } #close_button { - background-color: var(--plugin--background); + background-color: var(--psp--background-color); padding: 0px; overflow: hidden; - display: var(--close-button--display, none); + display: var(--psp-close-button--display, none); align-items: center; justify-content: center; z-index: 10000; - border: 1px solid var(--inactive--color); + border: 1px solid var(--psp-inactive--color); border-radius: 5px; font-size: 10px; font-weight: normal; &:hover { - color: var(--plugin--background, inherit); - background-color: var(--icon--color); + color: var(--psp--background-color, inherit); + background-color: var(--psp--color); cursor: pointer; } - &:hover:before { - background-color: var(--plugin--background); + &:hover .icon { + background-color: var(--psp--background-color); } - &:before { + .icon { display: inline-block; - height: 20px; - min-height: 20px; - width: 20px; - min-width: 20px; - content: ""; mask-size: cover; -webkit-mask-size: cover; background-repeat: no-repeat; - background-color: var(--icon--color); - mask-image: var(--close-icon--mask-image); - -webkit-mask-image: var(--close-icon--mask-image); + background-color: var(--psp--color); + mask-image: var(--psp-icon--close--mask-image); + -webkit-mask-image: var(--psp-icon--close--mask-image); + + &:before { + content: var(--psp-icon--close--mask-image); + visibility: hidden; + } } } #settings_button { - background-color: var(--plugin--background); + background-color: var(--psp--background-color); padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; z-index: 3; - border: 1px solid var(--inactive--color); + border: 1px solid var(--psp-inactive--color); border-radius: 5px; font-size: 10px; font-weight: normal; &:hover { - color: var(--plugin--background, inherit); - background-color: var(--icon--color); + color: var(--psp--background-color, inherit); + background-color: var(--psp--color); cursor: pointer; } - &:hover:before { - background-color: var(--plugin--background); + &:hover .icon { + background-color: var(--psp--background-color); } - &:before { + .icon { display: inline-block; - height: 20px; - min-height: 20px; - width: 20px; - min-width: 20px; - content: ""; mask-size: cover; -webkit-mask-size: cover; background-repeat: no-repeat; - background-color: var(--icon--color); - mask-image: var(--drawer-tab-inverted-icon--mask-image); - -webkit-mask-image: var(--drawer-tab-inverted-icon--mask-image); + background-color: var(--psp--color); + mask-image: var(--psp-icon--drawer-tab-inverted--mask-image); + -webkit-mask-image: var( + --psp-icon--drawer-tab-inverted--mask-image + ); + + &:before { + content: var(--psp-icon--drawer-tab-inverted--mask-image); + visibility: hidden; + } } } @@ -373,14 +385,14 @@ .sidebar_header { min-height: var( - --plugin-selector--height, - var(--status-bar--height, 48px) + --psp-plugin-selector--height, + var(--psp-status-bar--height, 48px) ); overflow: hidden; display: flex; flex-direction: column; justify-content: center; - border-bottom: 1px solid var(--inactive--color, #6e6e6e); + border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e); } .sidebar_header_title { @@ -394,7 +406,7 @@ .sidebar_border { height: 2px; width: 100%; - background-color: var(--inactive--color, #6e6e6e); + background-color: var(--psp-inactive--color, #6e6e6e); margin-top: 1px; flex-shrink: 0; flex-grow: 0; diff --git a/rust/perspective-viewer/src/less/column-dropdown.less b/rust/perspective-viewer/src/less/column-dropdown.less deleted file mode 100644 index 68da85dcc8..0000000000 --- a/rust/perspective-viewer/src/less/column-dropdown.less +++ /dev/null @@ -1,95 +0,0 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@import "dom/scrollbar.less"; - -@mixin icon { - background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; -} - -:host { - box-sizing: border-box; - position: fixed; - z-index: 10000; - outline: none; - font-size: 0.75em; - border: inherit; - // box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%); - user-select: none; - background-color: var(--icon--color, #fff) !important; - color: var(--plugin--background, #333) !important; - // padding: 6px 8px; - border: 1px solid var(--icon--color) !important; - max-width: 300px; - overflow: hidden; - max-height: 600px; - overflow: auto; - @include scrollbar; - - display: flex; - flex-direction: column; - - .selected { - background-color: var(--plugin--background) !important; - color: var(--icon--color) !important; - } - - span { - cursor: pointer; - padding: 4px 5px; - } - - .no-results { - padding: 3px 24px 6px 11px; - color: var(--error--color); - font-size: 8px; - } - - .no-results:before { - content: var(--no-results--content, "Invalid Column"); - } - - #add-expression { - &:before { - @include icon; - width: 14px; - height: 12px; - margin-right: 5px; - -webkit-mask-image: var(--add-expression-icon--mask-image); - mask-image: var(--add-expression-icon--mask-image); - } - } -} - -:host(:hover) { - .selected { - background-color: var(--icon--color, #fff) !important; - color: var(--plugin--background, #333) !important; - } - - span:hover, - span.selected:hover { - background-color: var(--plugin--background) !important; - color: var(--icon--color) !important; - } -} - -:host(.no-results) { - overflow: hidden; - background-color: transparent !important; - border: none !important; -} diff --git a/rust/perspective-viewer/src/less/dom/checkbox.less b/rust/perspective-viewer/src/less/dom/checkbox.less deleted file mode 100644 index b76eb17012..0000000000 --- a/rust/perspective-viewer/src/less/dom/checkbox.less +++ /dev/null @@ -1,100 +0,0 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@mixin icon { - background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; -} - -:host { - input[type="checkbox"].alternate { - appearance: none; - height: 14px; - width: 14px; - padding: 0px; - cursor: pointer; - outline: none; - margin: 0 5px; - - &:before { - @include icon; - width: 14px; - height: 14px; - font-family: var(--button--font-family, inherit); - background-color: var(--icon--color, #ccc); - -webkit-mask-image: var(--inactive-column-selector--content, none); - mask-image: var(--inactive-column-selector--content, none); - } - - &:hover { - border-radius: 2px; - outline: 1px solid var(--icon--color); - } - - &:checked:hover { - background-color: var(--icon--color, #ccc); - &:before { - background-color: var(--plugin--background, #ccc); - } - } - - &:checked:before { - -webkit-mask-image: var(--active-column-selector--content, none); - mask-image: var(--active-column-selector--content, none); - } - } - - input[type="checkbox"] { - float: left; - appearance: none; - height: 14px; - width: 14px; - padding: 0px; - cursor: pointer; - outline: none; - margin: 0 5px 0 0; - - &:checked:before { - -webkit-mask-image: var(--column-checkbox-on--mask-image); - mask-image: var(--column-checkbox-on--mask-image); - } - - &[disabled]:before { - opacity: 0.2s; - } - - &:before { - @include icon; - height: 13px; - width: 13px; - -webkit-mask-image: var(--column-checkbox-off--mask-image); - mask-image: var(--column-checkbox-off--mask-image); - } - - &:hover { - background-color: transparent; - } - - &:hover:before { - -webkit-mask-image: var(--column-checkbox-hover--mask-image); - mask-image: var(--column-checkbox-hover--mask-image); - } - } - - input[type="checkbox"]:not(:disabled) { - cursor: pointer; - } -} diff --git a/rust/perspective-viewer/src/less/dom/scrollbar.less b/rust/perspective-viewer/src/less/dom/scrollbar.less deleted file mode 100644 index d74d4bd1b4..0000000000 --- a/rust/perspective-viewer/src/less/dom/scrollbar.less +++ /dev/null @@ -1,35 +0,0 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@mixin scrollbar { - &:hover { - --fix: ; - } - - &::-webkit-scrollbar-thumb { - border-radius: 2px; - border: 2px solid transparent; - box-shadow: inset 0px 0px 0 4px var(--inactive--color); - } - - &:hover::-webkit-scrollbar-thumb { - border: 1px solid transparent; - box-shadow: inset 0px 0px 0 4px var(--inactive--color); - } - - &::-webkit-scrollbar, - &::-webkit-scrollbar-corner { - background-color: transparent; - width: 6px; - height: 6px; - } -} diff --git a/rust/perspective-viewer/src/less/plugin-selector.less b/rust/perspective-viewer/src/less/plugin-selector.less deleted file mode 100644 index 6eb8234387..0000000000 --- a/rust/perspective-viewer/src/less/plugin-selector.less +++ /dev/null @@ -1,183 +0,0 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -@import "dom/scrollbar.less"; - -:host { - #settings_panel { - #plugin_selector_container.open ~ * { - opacity: 0; - } - - #plugin_selector_container { - min-height: var( - --plugin-selector--height, - var(--status-bar--height, 48px) - ); - display: flex; - white-space: nowrap; - flex-direction: column; - flex: 0 0 auto; - - // Overflow the padding bounds of the container - // TODO these bounds exist to protext the resizer and scrollbar (left & - // right resp) but we really should find a way to remove it and delegate - // to sub-containers. - margin: 0 0px 0 -9px; - - #plugin_selector_border { - height: 2px; - min-height: 2px; - width: 100%; - background-color: var(--inactive--color, #6e6e6e); - margin-top: 2px; - } - - .plugin-selector-options { - overflow-y: auto; - @include scrollbar; - } - - &.open { - position: absolute; - margin: 0; - top: 0; - left: 0; - right: 0; - bottom: 0; - - // This element is first in the container but visually "overlaps" - // when expanded - z-index: 3; - color: var(--icon--color, #042121); - // background: var(--plugin--background); - - .plugin-select-item { - padding-left: 8px; - } - } - - .plugin-select-item-name { - padding-left: 10px; - font-size: 1.33333em; - } - - .plugin-select-item-name:before { - // This value is set in a `style` tag from Yew! - content: var(--default-column-title); - } - - .plugin-select-item { - // width: 48px; - padding-left: 9px; - height: var( - --plugin-selector--height, - var(--status-bar--height, 48px) - ); - min-height: var( - --plugin-selector--height, - var(--status-bar--height, 48px) - ); - display: flex; - align-items: center; - border-bottom: 1px solid transparent; - box-shadow: 0px 1px var(--inactive--color, #6e6e6e); - cursor: pointer; - } - - // Hadn't seen this technique before, makes sizing/positioning these - // trivial. There's some indication this doesn't work on non-chrome - // https://stackoverflow.com/questions/36259410/how-to-set-size-of-svg-image-in-before-pseudo-class - // https://stackoverflow.com/questions/21509982/change-svg-fill-color-in-before-or-after-css - .plugin-select-item:before { - content: ""; - display: inline-block; - height: 35px; - width: 40px; - -webkit-mask-size: cover; - mask-size: cover; - background-repeat: no-repeat; - background-color: var(--icon--color); - } - - .plugin-select-item:hover { - background-color: var(--icon--color, #042121); - color: var(--plugin--background, #fdfffd); - } - - .plugin-select-item:hover:before { - background-color: var(--plugin--background, #fdfffd); - } - - .plugin-select-item[data-plugin="Candlestick"]:before { - // mask-image: var(--plugin-selector-candlestick--content); - -webkit-mask-image: var(--plugin-selector-candlestick--content); - } - - .plugin-select-item[data-plugin="Heatmap"]:before { - -webkit-mask-image: var(--plugin-selector-heatmap--content); - } - - .plugin-select-item[data-plugin="Map Scatter"]:before { - -webkit-mask-image: var(--plugin-selector-map-scatter--content); - } - - .plugin-select-item[data-plugin="OHLC"]:before { - -webkit-mask-image: var(--plugin-selector-ohlc--content); - } - - .plugin-select-item[data-plugin="Sunburst"]:before { - -webkit-mask-image: var(--plugin-selector-sunburst--content); - } - - .plugin-select-item[data-plugin="Treemap"]:before { - -webkit-mask-image: var(--plugin-selector-treemap--content); - } - - .plugin-select-item[data-plugin="X Bar"]:before { - -webkit-mask-image: var(--plugin-selector-x-bar--content); - } - - .plugin-select-item[data-plugin="X/Y Line"]:before { - -webkit-mask-image: var(--plugin-selector-x-y-line--content); - } - - .plugin-select-item[data-plugin="X/Y Scatter"]:before { - -webkit-mask-image: var(--plugin-selector-x-y-scatter--content); - } - - .plugin-select-item[data-plugin="Y Area"]:before { - -webkit-mask-image: var(--plugin-selector-y-area--content); - } - - .plugin-select-item[data-plugin="Y Bar"]:before { - -webkit-mask-image: var(--plugin-selector-y-bar--content); - } - - .plugin-select-item[data-plugin="Y Line"]:before { - -webkit-mask-image: var(--plugin-selector-y-line--content); - } - - .plugin-select-item[data-plugin="Y Scatter"]:before { - -webkit-mask-image: var(--plugin-selector-y-scatter--content); - } - - .plugin-select-item[data-plugin="Datagrid"]:before { - -webkit-mask-image: var(--plugin-selector-datagrid--content); - } - } - - #plugin_selector { - flex-grow: 1; - } - } -} diff --git a/rust/perspective-viewer/src/less/type-icon.less b/rust/perspective-viewer/src/less/type-icon.less deleted file mode 100644 index c74014b970..0000000000 --- a/rust/perspective-viewer/src/less/type-icon.less +++ /dev/null @@ -1,68 +0,0 @@ -// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ -// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ -// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ -// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ -// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ -// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ -// ┃ Copyright (c) 2017, the Perspective Authors. ┃ -// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃ -// ┃ This file is part of the Perspective library, distributed under the terms ┃ -// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃ -// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ - -:host #selected-columns .type-icon, -:host #sub-columns .type-icon { - position: absolute; - left: 15px; -} - -:host .type-icon { - height: 13px; - width: 13px; - background-repeat: no-repeat; - background-color: var(--icon--color); - content: ""; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; - flex-shrink: 0; - - &.none { - content: none; - } - - &.integer { - -webkit-mask-image: var(--column-type-integer--mask-image); - mask-image: var(--column-type-integer--mask-image); - } - - &.float { - -webkit-mask-image: var(--column-type-float--mask-image); - mask-image: var(--column-type-float--mask-image); - } - - &.string { - -webkit-mask-image: var(--column-type-string--mask-image); - mask-image: var(--column-type-string--mask-image); - } - - &.boolean { - -webkit-mask-image: var(--column-type-boolean--mask-image); - mask-image: var(--column-type-boolean--mask-image); - } - - &.date { - -webkit-mask-image: var(--column-type-date--mask-image); - mask-image: var(--column-type-date--mask-image); - } - - &.datetime { - -webkit-mask-image: var(--column-type-datetime--mask-image); - mask-image: var(--column-type-datetime--mask-image); - } - - &.expression { - -webkit-mask-image: var(--add-expression-icon--mask-image); - mask-image: var(--add-expression-icon--mask-image); - } -} diff --git a/rust/perspective-viewer/src/rust/components/column_dropdown.rs b/rust/perspective-viewer/src/rust/components/column_dropdown.rs index 9d38b0de94..ff927d57e5 100644 --- a/rust/perspective-viewer/src/rust/components/column_dropdown.rs +++ b/rust/perspective-viewer/src/rust/components/column_dropdown.rs @@ -246,7 +246,7 @@ fn ColumnDropDownView(props: &ColumnDropDownViewProps) -> Html { { col } }, InPlaceColumn::Expression(col) => html! { - { col.name.clone() } + { col.name.clone() } }, }; diff --git a/rust/perspective-viewer/src/rust/components/column_selector.rs b/rust/perspective-viewer/src/rust/components/column_selector.rs index a37fa82f72..88748ce373 100644 --- a/rust/perspective-viewer/src/rust/components/column_selector.rs +++ b/rust/perspective-viewer/src/rust/components/column_selector.rs @@ -62,7 +62,7 @@ pub struct ColumnSelectorProps { pub selected_column: Option, /// Value props threaded from root's `SessionProps` / `RendererProps`. - pub has_table: bool, + pub has_table: Option, pub named_column_count: usize, pub view_config: PtrEqRc, pub drag_column: Option, @@ -285,7 +285,7 @@ impl Component for ColumnSelector { move |_| dragdrop.notify_drag_end() }); - let mut active_classes = classes!(); + let mut active_classes = classes!("scrollable"); if ctx.props().drag_column.is_some() { active_classes.push("dragdrop-highlight"); }; @@ -491,6 +491,7 @@ impl Component for ColumnSelector {
+ if ctx.props().is_aggregated { Html { html! {
+
} diff --git a/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs b/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs index d9bf1633c6..622a8db754 100644 --- a/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs +++ b/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs @@ -615,6 +615,7 @@ impl Component for ConfigSelector { id="group_rollup_mode_selector" wrapper_class="group_rollup_wrapper" + is_autosize=true values={Rc::new( group_rollups .iter() diff --git a/rust/perspective-viewer/src/rust/components/column_selector/expr_edit_button.rs b/rust/perspective-viewer/src/rust/components/column_selector/expr_edit_button.rs index 09c5ddcad8..394dbb6113 100644 --- a/rust/perspective-viewer/src/rust/components/column_selector/expr_edit_button.rs +++ b/rust/perspective-viewer/src/rust/components/column_selector/expr_edit_button.rs @@ -54,5 +54,5 @@ pub fn ExprEditButton(p: &ExprEditButtonProps) -> Html { "expression-edit-button" }; - html! { } + html! { } } diff --git a/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs index 2ef12de155..07e7b30ace 100644 --- a/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs +++ b/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs @@ -350,6 +350,7 @@ impl Component for FilterColumn { >
+ // { filter.column().to_owned() } diff --git a/rust/perspective-viewer/src/rust/components/column_selector/inactive_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/inactive_column.rs index d4d6a77a10..bd80bd3693 100644 --- a/rust/perspective-viewer/src/rust/components/column_selector/inactive_column.rs +++ b/rust/perspective-viewer/src/rust/components/column_selector/inactive_column.rs @@ -171,6 +171,7 @@ impl Component for InactiveColumn { {ondragend} >
+ { ctx.props().name.clone() } diff --git a/rust/perspective-viewer/src/rust/components/column_selector/pivot_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/pivot_column.rs index 4b439dc574..4fcb2ce724 100644 --- a/rust/perspective-viewer/src/rust/components/column_selector/pivot_column.rs +++ b/rust/perspective-viewer/src/rust/components/column_selector/pivot_column.rs @@ -99,6 +99,7 @@ impl Component for PivotColumn { ondragend={dragend} >
+ { ctx.props().column.clone() }
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/sort_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/sort_column.rs index 5a579f093b..cacbd57153 100644 --- a/rust/perspective-viewer/src/rust/components/column_selector/sort_column.rs +++ b/rust/perspective-viewer/src/rust/components/column_selector/sort_column.rs @@ -132,6 +132,7 @@ impl Component for SortColumn { ondragend={dragend} >
+ // { ctx.props().sort.0.to_owned() } diff --git a/rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs b/rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs index 557a4c9ab8..41d5635d6c 100644 --- a/rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs +++ b/rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs @@ -309,6 +309,7 @@ where if ctx.props().disabled && ctx.props().is_dragover.is_none() {
+ { "TOTAL" }
diff --git a/rust/perspective-viewer/src/rust/components/containers/sidebar_close_button.rs b/rust/perspective-viewer/src/rust/components/containers/sidebar_close_button.rs index d6131e4f74..2e57b28be0 100644 --- a/rust/perspective-viewer/src/rust/components/containers/sidebar_close_button.rs +++ b/rust/perspective-viewer/src/rust/components/containers/sidebar_close_button.rs @@ -24,7 +24,7 @@ pub fn SidebarCloseButton(p: &SidebarCloseButtonProps) -> Html { let id = &p.id; html! {
-
+
} } diff --git a/rust/perspective-viewer/src/rust/components/containers/split_panel.rs b/rust/perspective-viewer/src/rust/components/containers/split_panel.rs index 2fe4b4b709..02ee1e86cd 100644 --- a/rust/perspective-viewer/src/rust/components/containers/split_panel.rs +++ b/rust/perspective-viewer/src/rust/components/containers/split_panel.rs @@ -412,6 +412,7 @@ impl ResizingState { Orientation::Vertical => event.client_y(), }) }); + move |x| cb.emit(x) }); diff --git a/rust/perspective-viewer/src/rust/components/containers/tab_list.rs b/rust/perspective-viewer/src/rust/components/containers/tab_list.rs index cfea53daa3..19c519bb4d 100644 --- a/rust/perspective-viewer/src/rust/components/containers/tab_list.rs +++ b/rust/perspective-viewer/src/rust/components/containers/tab_list.rs @@ -95,7 +95,7 @@ impl Component for TabList {
-
+
{ ctx.props().children.iter().nth(self.selected_idx) }
diff --git a/rust/perspective-viewer/src/rust/components/form/code_editor.rs b/rust/perspective-viewer/src/rust/components/form/code_editor.rs index e2457411df..d8c81141e4 100644 --- a/rust/perspective-viewer/src/rust/components/form/code_editor.rs +++ b/rust/perspective-viewer/src/rust/components/form/code_editor.rs @@ -166,7 +166,11 @@ pub fn code_editor(props: &CodeEditorProps) -> Html { )) .collect::(); - let class = if props.wordwrap { "wordwrap" } else { "" }; + let class = if props.wordwrap { + "wordwrap scrollable" + } else { + "scrollable" + }; clone!(props.disabled); html! { <> @@ -177,6 +181,7 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {