init

frontend/static/css/color.css

@@ -0,0 +1,652 @@
+/* casper color.css */
+
+/* discord */
+:root {
+  --discord-primary: #5865F2;
+  --discord-light: #E0E3FF;
+  --discord-dark-1: #2C2F33;
+  --discord-dark-2: #23272A;
+  --discord-text: #FFFFFF;
+}
+/* bandcamp */
+:root {
+  --bandcamp-primary: #629AA9;
+  --bandcamp-light: #A0C3CC;
+  --bandcamp-dark-1: #1C1C1C;
+  --bandcamp-dark-2: #0F0F0F;
+  --bandcamp-text: #FFFFFF;
+}
+/* youtube */
+:root {
+  --youtube-primary: #FF0000;
+  --youtube-light: #FF6666;
+  --youtube-dark-1: #282828;
+  --youtube-dark-2: #1F1F1F;
+  --youtube-text: #FFFFFF;
+}
+/* soundcloud */
+:root {
+  --soundcloud-primary: #FF7700;
+  --soundcloud-light: #FFA64D;
+  --soundcloud-dark-1: #282828;
+  --soundcloud-dark-2: #1F1F1F;
+  --soundcloud-text: #FFFFFF;
+}
+/* twitter/x */
+:root {
+  --twitter-primary: #1DA1F2;
+  --twitter-light: #A4D9F9;
+  --twitter-dark-1: #14171A;
+  --twitter-dark-2: #0D0F12;
+  --twitter-text: #FFFFFF;
+}
+:root {
+  --gray-1: #fcfcfd;
+  --gray-2: #f8f9fa;
+  --gray-3: #f1f3f5;
+  --gray-4: #e9ecef;
+  --gray-5: #dee2e6;
+  --gray-6: #ced4da;
+  --gray-7: #adb5bd;
+  --gray-8: #868e96;
+  --gray-9: #495057;
+  --gray-10: #343a40;
+  --gray-11: #212529;
+  --gray-12: #121619;
+}
+:root {
+  --mauve-1: #fcfcfd;
+  --mauve-2: #f8f8fa;
+  --mauve-3: #f3f3f6;
+  --mauve-4: #edeff1;
+  --mauve-5: #e8e8ea;
+  --mauve-6: #e2e2e5;
+  --mauve-7: #dcdde0;
+  --mauve-8: #d4d4d8;
+  --mauve-9: #babac0;
+  --mauve-10: #a1a1a8;
+  --mauve-11: #85858e;
+  --mauve-12: #3c3c44;
+}
+:root {
+  --slate-1: #f8f9fa;
+  --slate-2: #f1f3f5;
+  --slate-3: #e9ecef;
+  --slate-4: #e2e6ea;
+  --slate-5: #d9dde1;
+  --slate-6: #ced2d7;
+  --slate-7: #bec4ca;
+  --slate-8: #adb5bd;
+  --slate-9: #8b9aa7;
+  --slate-10: #728198;
+  --slate-11: #5c697f;
+  --slate-12: #3d5060;
+}
+:root {
+  --sage-1: #f8f9f4;
+  --sage-2: #f1f3e9;
+  --sage-3: #e9ece0;
+  --sage-4: #e2e6d6;
+  --sage-5: #dae0cc;
+  --sage-6: #ced4c1;
+  --sage-7: #bfc6b3;
+  --sage-8: #acb3a1;
+  --sage-9: #909982;
+  --sage-10: #767e69;
+  --sage-11: #5d6551;
+  --sage-12: #3c3f37;
+}
+:root {
+  --olive-1: #fbfefd;
+  --olive-2: #f7fbfa;
+  --olive-3: #f2f7f3;
+  --olive-4: #edf3ed;
+  --olive-5: #e8efe7;
+  --olive-6: #e1e9e0;
+  --olive-7: #dbe3da;
+  --olive-8: #d4ddd3;
+  --olive-9: #b8c0b9;
+  --olive-10: #9aa39c;
+  --olive-11: #7c867f;
+  --olive-12: #343d35;
+}
+:root {
+  --sand-1: #fcfaf7;
+  --sand-2: #faf6f1;
+  --sand-3: #f6f1ec;
+  --sand-4: #f2ece6;
+  --sand-5: #efebe1;
+  --sand-6: #ebe8dd;
+  --sand-7: #e7e4d8;
+  --sand-8: #e3dfd4;
+  --sand-9: #d0c9bf;
+  --sand-10: #b9b2a9;
+  --sand-11: #a29b93;
+  --sand-12: #79736d;
+}
+:root {
+  --gold-1: #fdfdfc;
+  --gold-2: #fbf9f2;
+  --gold-3: #f5f2e9;
+  --gold-4: #eeeadd;
+  --gold-5: #e5dfd0;
+  --gold-6: #dad1bd;
+  --gold-7: #cbbda4;
+  --gold-8: #b8a383;
+  --gold-9: #978365;
+  --gold-10: #8c795d;
+  --gold-11: #776750;
+  --gold-12: #3b352b;
+}
+:root {
+  --bronze-1: #fdfcfc;
+  --bronze-2: #fdf8f6;
+  --bronze-3: #f8f1ee;
+  --bronze-4: #f2e8e4;
+  --bronze-5: #eaddd7;
+  --bronze-6: #e0cec7;
+  --bronze-7: #d1b9b0;
+  --bronze-8: #bfa094;
+  --bronze-9: #a18072;
+  --bronze-10: #957468;
+  --bronze-11: #846358;
+  --bronze-12: #43302b;
+}
+:root {
+  --brown-1: #fefdfc;
+  --brown-2: #fcf9f6;
+  --brown-3: #f8f1eb;
+  --brown-4: #f2e8de;
+  --brown-5: #eaddd0;
+  --brown-6: #e0cebf;
+  --brown-7: #d1b9a4;
+  --brown-8: #bfa083;
+  --brown-9: #a18065;
+  --brown-10: #977459;
+  --brown-11: #84634a;
+  --brown-12: #433026;
+}
+:root {
+  --yellow-1: #fdfdfc;
+  --yellow-2: #fefce9;
+  --yellow-3: #fffab8;
+  --yellow-4: #fff394;
+  --yellow-5: #ffe770;
+  --yellow-6: #f3d768;
+  --yellow-7: #e4c767;
+  --yellow-8: #d5b862;
+  --yellow-9: #ffe629;
+  --yellow-10: #ffdc00;
+  --yellow-11: #946800;
+  --yellow-12: #35290f;
+}
+:root {
+  --amber-1: #fefdfb;
+  --amber-2: #fff9ed;
+  --amber-3: #fff4d5;
+  --amber-4: #ffecbc;
+  --amber-5: #ffe3a2;
+  --amber-6: #ffd386;
+  --amber-7: #f3ba63;
+  --amber-8: #ee9d2b;
+  --amber-9: #ffb224;
+  --amber-10: #ffa01c;
+  --amber-11: #ad5700;
+  --amber-12: #4e2009;
+}
+:root {
+  --orange-1: #fefcfb;
+  --orange-2: #fff7ed;
+  --orange-3: #ffefd6;
+  --orange-4: #ffe4b5;
+  --orange-5: #ffd599;
+  --orange-6: #ffc182;
+  --orange-7: #f5a65b;
+  --orange-8: #ec8a31;
+  --orange-9: #f76808;
+  --orange-10: #ed5f00;
+  --orange-11: #bd4b00;
+  --orange-12: #451e11;
+}
+:root {
+  --tomato-1: #fffcfc;
+  --tomato-2: #fff8f7;
+  --tomato-3: #ffefed;
+  --tomato-4: #ffe6e2;
+  --tomato-5: #fdd8d3;
+  --tomato-6: #fac7be;
+  --tomato-7: #f3b0a2;
+  --tomato-8: #ea9280;
+  --tomato-9: #e54d2e;
+  --tomato-10: #db4324;
+  --tomato-11: #ca3214;
+  --tomato-12: #341711;
+}
+:root {
+  --red-1: #fffcfc;
+  --red-2: #fff7f7;
+  --red-3: #ffefef;
+  --red-4: #ffe5e5;
+  --red-5: #fdd8d8;
+  --red-6: #f9c6c6;
+  --red-7: #f3aeaf;
+  --red-8: #eb9091;
+  --red-9: #e5484d;
+  --red-10: #dc3d43;
+  --red-11: #cd2b31;
+  --red-12: #381316;
+}
+:root {
+  --ruby-1: #fffcfd;
+  --ruby-2: #fff7f9;
+  --ruby-3: #feeff3;
+  --ruby-4: #ffe5eb;
+  --ruby-5: #fdd8e2;
+  --ruby-6: #f9c6d6;
+  --ruby-7: #f3aec4;
+  --ruby-8: #eb91af;
+  --ruby-9: #e54666;
+  --ruby-10: #db3b5b;
+  --ruby-11: #ca244d;
+  --ruby-12: #3a0c1c;
+}
+:root {
+  --crimson-1: #fffcfd;
+  --crimson-2: #fff7fb;
+  --crimson-3: #feeff6;
+  --crimson-4: #fce5f0;
+  --crimson-5: #f9d8e7;
+  --crimson-6: #f4c6db;
+  --crimson-7: #edadc8;
+  --crimson-8: #e58fb1;
+  --crimson-9: #e93d82;
+  --crimson-10: #df3476;
+  --crimson-11: #cb1d63;
+  --crimson-12: #35111f;
+}
+:root {
+  --pink-1: #fefcfd;
+  --pink-2: #fff7fb;
+  --pink-3: #feeff6;
+  --pink-4: #fce5f0;
+  --pink-5: #f9d8e7;
+  --pink-6: #f3c6db;
+  --pink-7: #ecadc8;
+  --pink-8: #e38fb1;
+  --pink-9: #d6409f;
+  --pink-10: #d23197;
+  --pink-11: #cd1d8d;
+  --pink-12: #3b0a2a;
+}
+:root {
+  --plum-1: #fefcff;
+  --plum-2: #fdf7fd;
+  --plum-3: #f8eff9;
+  --plum-4: #f3e7f4;
+  --plum-5: #eddcee;
+  --plum-6: #e3cce5;
+  --plum-7: #d3b3d8;
+  --plum-8: #be8cca;
+  --plum-9: #ab4aba;
+  --plum-10: #a43cb3;
+  --plum-11: #9c2bad;
+  --plum-12: #340c3b;
+}
+:root {
+    --purple-1: #fefcfe;
+    --purple-2: #fbf7fc;
+    --purple-3: #f7eff9;
+    --purple-4: #f2e7f4;
+    --purple-5: #eadcf0;
+    --purple-6: #e0cdec;
+    --purple-7: #d1b5e7;
+    --purple-8: #bc8dec;
+    --purple-9: #8e4ec6;
+    --purple-10: #8445b9;
+    --purple-11: #793aab;
+ }
+:root {
+  --violet-1: #fdfcfe;
+  --violet-2: #fbfaff;
+  --violet-3: #f5f2ff;
+  --violet-4: #ede9fe;
+  --violet-5: #e4defc;
+  --violet-6: #d7cff9;
+  --violet-7: #c4b8f3;
+  --violet-8: #aa99ec;
+  --violet-9: #6e56cf;
+  --violet-10: #644fc1;
+  --violet-11: #5746af;
+  --violet-12: #20134b;
+}
+:root {
+  --iris-1: #fdfdff;
+  --iris-2: #f8f8ff;
+  --iris-3: #f0f1fe;
+  --iris-4: #e6e7ff;
+  --iris-5: #dadcff;
+  --iris-6: #cbceff;
+  --iris-7: #b8bcff;
+  --iris-8: #9b9eff;
+  --iris-9: #5b5bd6;
+  --iris-10: #5151c4;
+  --iris-11: #3e3eb0;
+  --iris-12: #1b1b66;
+}
+:root {
+  --indigo-1: #fdfdfe;
+  --indigo-2: #f8faff;
+  --indigo-3: #f0f4ff;
+  --indigo-4: #e6edfe;
+  --indigo-5: #d9e2fc;
+  --indigo-6: #c6d4f9;
+  --indigo-7: #aec0f5;
+  --indigo-8: #8da4ef;
+  --indigo-9: #3e63dd;
+  --indigo-10: #3a5ccc;
+  --indigo-11: #3451b2;
+  --indigo-12: #101d46;
+}
+
+:root {
+  --blue-1: #fbfdff;
+  --blue-2: #f4faff;
+  --blue-3: #e6f4fe;
+  --blue-4: #d5efff;
+  --blue-5: #c2e5ff;
+  --blue-6: #acd8fc;
+  --blue-7: #8ec8f6;
+  --blue-8: #5eb1ef;
+  --blue-9: #0091ff;
+  --blue-10: #0588f0;
+  --blue-11: #0d74ce;
+  --blue-12: #113264;
+}
+:root {
+  --sky-1: #f9feff;
+  --sky-2: #f1fafd;
+  --sky-3: #e1f6fb;
+  --sky-4: #d1f0f7;
+  --sky-5: #bee7f2;
+  --sky-6: #a9dce9;
+  --sky-7: #8dcedc;
+  --sky-8: #60bcd0;
+  --sky-9: #7ce2fe;
+  --sky-10: #74daf8;
+  --sky-11: #00749e;
+  --sky-12: #1d3e46;
+}
+:root {
+  --cyan-1: #fafdfe;
+  --cyan-2: #f2fbfd;
+  --cyan-3: #e7f9fb;
+  --cyan-4: #d8f3f6;
+  --cyan-5: #c4eaef;
+  --cyan-6: #aadee6;
+  --cyan-7: #84cdda;
+  --cyan-8: #3db9cf;
+  --cyan-9: #00a2c7;
+  --cyan-10: #0797b9;
+  --cyan-11: #107d98;
+  --cyan-12: #0d3c48;
+}
+:root {
+  --teal-1: #fafefd;
+  --teal-2: #f3fbf9;
+  --teal-3: #e6f7f4;
+  --teal-4: #d8f1ec;
+  --teal-5: #c7e8e2;
+  --teal-6: #b3dcd5;
+  --teal-7: #94ccc5;
+  --teal-8: #5bb9b1;
+  --teal-9: #12a594;
+  --teal-10: #0d9b8a;
+  --teal-11: #008573;
+  --teal-12: #0d3d38;
+}
+:root {
+  --jade-1: #f9fefd;
+  --jade-2: #effdf9;
+  --jade-3: #e1f9f2;
+  --jade-4: #d3f3ea;
+  --jade-5: #c2ebe0;
+  --jade-6: #ade0d3;
+  --jade-7: #8ecfbf;
+  --jade-8: #4cbba5;
+  --jade-9: #00a383;
+  --jade-10: #00997b;
+  --jade-11: #00826c;
+  --jade-12: #0d3c37;
+}
+:root {
+  --mint-1: #f9fefd;
+  --mint-2: #f2fcfa;
+  --mint-3: #dff9f2;
+  --mint-4: #ccf3ea;
+  --mint-5: #b8eae0;
+  --mint-6: #a1ded2;
+  --mint-7: #83cdc0;
+  --mint-8: #4fb9ab;
+  --mint-9: #86ead4;
+  --mint-10: #7de0cb;
+  --mint-11: #027d6c;
+  --mint-12: #16433c;
+}
+:root {
+  --green-1: #fbfefc;
+  --green-2: #f4fbf6;
+  --green-3: #e6f6eb;
+  --green-4: #d6f1df;
+  --green-5: #c4e8d1;
+  --green-6: #adddc0;
+  --green-7: #8eceaa;
+  --green-8: #5bb98b;
+  --green-9: #30a46c;
+  --green-10: #2b9a66;
+  --green-11: #218358;
+  --green-12: #193b2d;
+}
+:root {
+
+    --grass-1: #fbfefb;
+    --grass-2: #f3fbf3;
+    --grass-3: #e6f6e6;
+    --grass-4: #d6f1d6;
+    --grass-5: #c4e8c4;
+    --grass-6: #addcad;
+    --grass-7: #8ecf8e;
+    --grass-8: #5bb95b;
+    --grass-9: #30a930;
+    --grass-10: #2b9e2b;
+    --grass-11: #218821;
+    --grass-12: #193b19;
+}
+
+:root {
+  --background-color: #0d0d0d;
+  --text-color: #ffffff;
+  --light-purple: #c7a4f5;
+  --light-purple-hover: #dbb5fc;
+  --error-color: #FF5C5C;
+  --success-color: #7FD1AE;
+  --border-color: #2a2a2a;
+  --card-bg: #151515;
+  --input-bg: #1c1c1c;
+  --placeholder-color: #555;
+  --button-bg: #2d2d2d;
+  --button-border: #444;
+  --button-bg-hover: #3f3f3f;
+  --button-border-hover: #666;
+  --button-focus: #444;
+  --button-loading-bg: #555;
+  --button-loading-border: #666;
+  --button-loading-text: #ccc;
+  --login-card-border: #777;
+  --checkbox-bg: #333;
+  --checkbox-accent: #999;
+  --fetching-glow: #8aff8a;
+  --fetching-mid: #797979;
+  --progress-track-bg: #444;
+  --progress-indicator-bg: #77c;
+  --format-bg: #222;
+  --close-btn-color: #444;
+  --close-btn-hover: #e33;
+  --spinner-border: #777;
+  --spinner-top: #bbb;
+}
+
+.error-badge {
+  background-color: var(--error-color) !important;
+  color: #fff !important;
+}
+.success-badge {
+  background-color: var(--success-color) !important;
+  color: #000 !important;
+}
+
+:root,
+[data-radix-themes="dark"] {
+  --badge-fill-error: rgba(239, 68, 68, 0.1);
+  --badge-border-error: #ef4444;
+  --badge-text-error: #f87171;
+    --error-bg: #a33636;
+}
+[data-radix-themes="light"] {
+  --badge-fill-error: rgba(255, 0, 0, 0.05);
+  --badge-border-error: #ff6b6b;
+  --badge-text-error: #e11d48;
+}
+
+.radix-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 0.77rem;
+  font-weight: 500;
+  font-family: 'Cascadia Code', monospace;
+  border-radius: 5px;
+  border: 1px solid;
+  text-transform: none;
+  letter-spacing: 0.02em;
+  margin: 0.25rem;
+  white-space: nowrap;
+  user-select: none;
+  transition: all 0.2s ease-in-out;
+  background-color: #2a2a2a;
+
+}
+
+.badge-row {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0.77rem;
+  text-align: center;
+  margin: 0.5rem auto;
+}
+/*
+#a47d3f – Golden brown (bottom bars)
+
+#113264 – Deep blue (top right)
+
+#4e2009 – Dark brown (top center)
+
+#3a0c1c – Deep burgundy (top left)
+*/
+
+.radix-badge.videos-badge {
+  background: var(--ruby-12);
+  border-color: var(--ruby-6);
+  /*color: var(--ruby-4); */
+  color:white;
+}
+.radix-badge.usage-badge {
+  background: var(--blue-12);
+  border-color: var(--blue-5);
+  /*color: var(--mauve-1); */
+  color:white;
+}
+.radix-badge.time-badge {
+  background: var(--violet-11);
+  border-color: var(--amber-6);
+  /*color: var(--amber-3); */
+  color:white;
+}
+.radix-badge.xp-level-badge,
+.radix-badge.xp-total-badge {
+  background: var(--teal-12);
+  border-color: var(--teal-6);
+  /*color: var(--teal-1); */
+  color:white;
+}
+/* Tiers */
+.radix-badge.tier-badge.rank-1 {
+  background: var(--amber-12);
+  border-color: var(--amber-5);
+  color: var(--mauve-1);
+}
+.radix-badge.tier-badge.rank-2 {
+  background: var(--gray12);
+  border-color: var(--gray-5);
+  color: var(--gray-12);
+}
+.radix-badge.tier-badge.rank-3 {
+  background: var(--brown-12);
+  border-color: var(--orange-5);
+  color: var(--gray-1);
+}
+.radix-badge.tier-badge.stamped {
+  background: var(--cyan-12);
+  border-color: var(--blue-5);
+  color: var(--gray-1);
+}
+.radix-badge.tier-badge.valid {
+  background: var(--green-12);
+  border-color: var(--green-5);
+  color: var(--gray-1);
+}
+.radix-badge.tier-badge.online {
+  background: var(--gray-11);
+  border-color: var(--gray-5);
+  color: var(--gray-1);
+}
+.radix-badge.tier-badge.limited {
+  background: var(--amber-12);
+  border-color: var(--amber-6);
+  color: var(--gray-1);
+}
+.radix-badge.tier-badge.offline {
+  background: var(--red-12);
+  border-color: var(--red-6);
+  color: var(--gray-1);
+}
+
+#platformBadge {
+  display: none;
+  margin-top: 0.55rem;
+  opacity: 0;
+}
+.badge-youtube {
+  background-color: var(--red-12)!important;
+  border-color: var(--red-8)!important;
+  color: white;
+}
+
+.badge-soundcloud {
+  background-color: var(--orange-9);
+  border-color: var(--orange-5);
+  color: black;
+}
+
+.badge-twitterx {
+  background-color: var(--gray-9);
+  border-color: var(--gray-5);
+  color: white;
+}
+
+.badge-bandcamp {
+  background-color: var(--indigo-9);
+  border-color: var(--indigo-5);
+  color: white;
+}