Colored file size

frontend/src/components/FileSize.vue

@@ -6,27 +6,38 @@
 import type { Document } from '@/repositories/Document'
 import { computed } from 'vue'
 
-const sizeClass = computed(() => props.doc.sizedisp.split('\u202F').slice(-1)[0])
+const sizeClass = computed(() => {
+  const unit = props.doc.sizedisp.split('\u202F').slice(-1)[0]
+  return +unit ? "bytes" : unit
+})
 
 const props = defineProps<{
     doc: Document
 }>()
 </script>
 
-<style>
-.size.empty {
-  opacity: 50%;
+<style scoped>
+.size.empty { color: #555 }
+.size.bytes { color: #77a }
+.size.kB { color: #474 }
+.size.MB { color: #a80 }
+.size.GB { color: #f83 }
+.size.TB, .size.PB, .size.EB, .size.huge {
+  color: #f44;
+  text-shadow: 0 0 .2em;
 }
-.size.bytes {
-  opacity: 60%;
+
+@media (prefers-color-scheme: dark) {
+  .size.empty { color: #bbb }
+  .size.bytes { color: #99d }
+  .size.kB { color: #aea }
+  .size.MB { color: #ff4 }
+  .size.GB { color: #f86 }
+  .size.TB, .size.PB, .size.EB, .size.huge { color: #f55 }
 }
-.size.kB {
-  opacity: 70%;
-}
-.size.MB {
-  opacity: 80%;
-}
-.size.GB {
-  opacity: 90%;
+
+.cursor .size {
+  color: inherit;
+  text-shadow: none;
 }
 </style>