From 0894dd2152062b2ffe51489c479eea7418ba42a0 Mon Sep 17 00:00:00 2001 From: kek7198 Date: Sat, 18 Dec 2021 23:07:07 -0600 Subject: [PATCH] fix --- files/static/src/main.css | 457 ++++++++++++++++++++------------------ 1 file changed, 241 insertions(+), 216 deletions(-) diff --git a/files/static/src/main.css b/files/static/src/main.css index 333c623e92..2c029c7ac4 100644 --- a/files/static/src/main.css +++ b/files/static/src/main.css @@ -2,258 +2,283 @@ @tailwind components; @tailwind utilities; +.theme-mocha { + --color-100: 246,246,244; + --color-200: 235,233,229; + --color-300: 219,218,209; + --color-400: 155,175,161; + --color-500: 175,171,155; + --color-600: 99,96,77; + --color-700: 82,76,55; + --color-800: 55,52,31; + --color-900: 40,37,17; +} + +.theme-mocha { + --color-primary: 2,132,199; + --color-100: 241,245,249; + --color-200: 226,232,240; + --color-300: 203,213,225; + --color-400: 148,163,184; + --color-500: 100,116,139; + --color-600: 71,85,105; + --color-700: 51,65,85; + --color-800: 30,41,59; + --color-900: 15,23,42; +} + .theme-dramblr { --color-primary: 2,132,199; - --color-100: 241,245,249; - --color-200: 226,232,240; - --color-300: 203,213,225; - --color-400: 148,163,184; - --color-500: 100,116,139; - --color-600: 71,85,105; - --color-700: 51,65,85; - --color-800: 30,41,59; - --color-900: 15,23,42; + --color-100: 241,245,249; + --color-200: 226,232,240; + --color-300: 203,213,225; + --color-400: 148,163,184; + --color-500: 100,116,139; + --color-600: 71,85,105; + --color-700: 51,65,85; + --color-800: 30,41,59; + --color-900: 15,23,42; } .theme-midnight { --color-primary: 219,39,119; - --color-100: 243,244,246; - --color-200: 229,231,235; - --color-300: 209,213,219; - --color-400: 156,163,175; - --color-500: 107,114,128; - --color-600: 75,85,99; - --color-700: 55,65,81; - --color-800: 31,41,55; - --color-900: 17,24,39; + --color-100: 243,244,246; + --color-200: 229,231,235; + --color-300: 209,213,219; + --color-400: 156,163,175; + --color-500: 107,114,128; + --color-600: 75,85,99; + --color-700: 55,65,81; + --color-800: 31,41,55; + --color-900: 17,24,39; } .theme-iron { --color-primary: 219,39,119; - --color-100: 244,244,245; - --color-200: 228,228,231; - --color-300: 212,212,216; - --color-400: 161,161,170; - --color-500: 113,113,122; - --color-600: 82,82,91; - --color-700: 63,63,70; - --color-800: 39,39,42; - --color-900: 24,24,27; + --color-100: 244,244,245; + --color-200: 228,228,231; + --color-300: 212,212,216; + --color-400: 161,161,170; + --color-500: 113,113,122; + --color-600: 82,82,91; + --color-700: 63,63,70; + --color-800: 39,39,42; + --color-900: 24,24,27; } .theme-bubblegum { --color-primary: 2,132,199; - --color-100: 252,231,243; - --color-200: 251,207,232; - --color-300: 249,168,212; - --color-400: 244,114,182; - --color-500: 236,72,153; - --color-600: 219,39,119; - --color-700: 190,24,93; - --color-800: 157,23,77; - --color-900: 131,24,67; + --color-100: 252,231,243; + --color-200: 251,207,232; + --color-300: 249,168,212; + --color-400: 244,114,182; + --color-500: 236,72,153; + --color-600: 219,39,119; + --color-700: 190,24,93; + --color-800: 157,23,77; + --color-900: 131,24,67; } .theme-canary { --color-primary: 2,132,199; - --color-100: 254,249,195; - --color-200: 254,240,138; - --color-300: 253,224,71; - --color-400: 250,204,21; - --color-500: 234,179,8; - --color-600: 202,138,4; - --color-700: 161,98,7; - --color-800: 133,77,14; - --color-900: 113,63,18; + --color-100: 254,249,195; + --color-200: 254,240,138; + --color-300: 253,224,71; + --color-400: 250,204,21; + --color-500: 234,179,8; + --color-600: 202,138,4; + --color-700: 161,98,7; + --color-800: 133,77,14; + --color-900: 113,63,18; } .theme-evergreen { --color-primary: 220, 38, 38; - --color-100: 244,246,244; - --color-200: 229,235,231; - --color-300: 209,219,213; - --color-400: 155,175,161; - --color-500: 106,128,115; - --color-600: 76,99,81; - --color-700: 55,82,62; - --color-800: 31,55,38; - --color-900: 17,40,23; + --color-100: 244,246,244; + --color-200: 229,235,231; + --color-300: 209,219,213; + --color-400: 155,175,161; + --color-500: 106,128,115; + --color-600: 76,99,81; + --color-700: 55,82,62; + --color-800: 31,55,38; + --color-900: 17,40,23; } /* ----------------------- VARIABLES --------------------- */ /*:root { --color-primary: 220, 38, 38; -}*/ + }*/ -/* ---------------- RESPONSIVE UTILITIES ----------------- */ -@responsive { - .text-shadow { - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12) + /* ---------------- RESPONSIVE UTILITIES ----------------- */ + @responsive { + .text-shadow { + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12) + } + .text-shadow-t { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12) + } + .text-shadow-light { + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) + } + .text-shadow-light-t { + text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) + } + .sub-header-shadow { + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, -1px -1px 0.5px rgba(17, 40, 19, 0.1) inset; + } + .gradient-mask { + -webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); mask-image: linear-gradient(180deg,#000 60%,transparent) + } + /* Chrome, Safari and Opera */ + .no-scrollbar::-webkit-scrollbar { + display: none; + } + .no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } } - .text-shadow-t { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12) - } - .text-shadow-light { - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) - } - .text-shadow-light-t { - text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) - } - .sub-header-shadow { - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, -1px -1px 0.5px rgba(17, 40, 19, 0.1) inset; - } - .gradient-mask { - -webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); mask-image: linear-gradient(180deg,#000 60%,transparent) - } - /* Chrome, Safari and Opera */ - .no-scrollbar::-webkit-scrollbar { - display: none; - } - .no-scrollbar { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - } -} -/* -------------------- BASE STYLING -------------------- */ -@layer base { - /* Headings */ - h1, .h1 { - @apply text-5xl font-bold leading-10 mb-2; + /* -------------------- BASE STYLING -------------------- */ + @layer base { + /* Headings */ + h1, .h1 { + @apply text-5xl font-bold leading-10 mb-2; + } + h2, .h2 { + @apply text-4xl font-bold leading-8 mb-2; + } + h3, .h3 { + @apply text-3xl font-bold leading-7 mb-2; + } + h4, .h4 { + @apply text-2xl font-bold leading-6 mb-2; + } + h5, .h5 { + @apply text-lg font-bold leading-5 mb-2; + } + h6, .h6 { + @apply text-base font-bold leading-4 mb-2; + } + /* Typography */ + p { + @apply mb-3 last:mb-0; + } + a { + @apply text-primary break-all + } + blockquote { + @apply bg-green-100 border-l-2 border-green-700 mb-4 + } + hr { + @apply my-3 + } + ul { + @apply mb-3 + } + strong { + @apply font-bold + } + code { + @apply text-pink-600 dark:text-pink-300 font-mono; + } + pre { + white-space: pre-wrap; /* Since CSS 2.1 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ + } + /* Images */ + img { + @apply inline + } + img[lazy=loading] { + @apply animate-pulse; + } + img[width], img[height] { + max-width: none; + height: 24px; + } + /*Inputs*/ + .label { + @apply block font-bold text-gray-700 text-sm leading-normal mb-1; + } } - h2, .h2 { - @apply text-4xl font-bold leading-8 mb-2; - } - h3, .h3 { - @apply text-3xl font-bold leading-7 mb-2; - } - h4, .h4 { - @apply text-2xl font-bold leading-6 mb-2; - } - h5, .h5 { - @apply text-lg font-bold leading-5 mb-2; - } - h6, .h6 { - @apply text-base font-bold leading-4 mb-2; - } - /* Typography */ - p { - @apply mb-3 last:mb-0; - } - a { - @apply text-primary break-all - } - blockquote { - @apply bg-green-100 border-l-2 border-green-700 mb-4 - } - hr { - @apply my-3 - } - ul { - @apply mb-3 - } - strong { - @apply font-bold - } - code { - @apply text-pink-600 dark:text-pink-300 font-mono; - } - pre { - white-space: pre-wrap; /* Since CSS 2.1 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ - } - /* Images */ - img { - @apply inline - } - img[lazy=loading] { - @apply animate-pulse; - } - img[width], img[height] { - max-width: none; - height: 24px; - } - /*Inputs*/ - .label { - @apply block font-bold text-gray-700 text-sm leading-normal mb-1; - } -} -/* ----------------------- INPUTS ----------------------- */ -.form-input { - @apply text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-white border border-gray-300 hover:border-gray-400 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 -} + /* ----------------------- INPUTS ----------------------- */ + .form-input { + @apply text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-white border border-gray-300 hover:border-gray-400 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 + } -/* ---------------------- BUTTONS ----------------------- */ -.btn { - @apply inline-block px-4 py-2 active:shadow-inner border rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold focus:outline-none disabled:opacity-50; -} -.btn-primary { - @apply bg-white bg-gradient-to-t from-primary to-primary/80 hover:from-primary/90 hover:to-primary border-black/10 text-gray-100 focus:text-gray-200; -} -.btn-red { - @apply bg-gradient-to-t from-red-700 to-red-600 hover:from-red-600 hover:to-red-700 border-red-900 text-gray-100 focus:text-white; -} -.btn-green { - @apply bg-gradient-to-t from-green-700 to-green-600 hover:from-green-600 hover:to-green-700 border-green-900 text-gray-100 focus:text-gray-200; -} -.btn-blue { - @apply bg-gradient-to-t from-blue-700 to-blue-600 hover:from-blue-600 hover:to-blue-700 border-blue-900 text-gray-100 focus:text-gray-200; -} -.btn-gray { - @apply bg-gradient-to-t from-gray-200 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-700 focus:text-gray-900; -} + /* ---------------------- BUTTONS ----------------------- */ + .btn { + @apply inline-block px-4 py-2 active:shadow-inner border rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold focus:outline-none disabled:opacity-50; + } + .btn-primary { + @apply bg-white bg-gradient-to-t from-primary to-primary/80 hover:from-primary/90 hover:to-primary border-black/10 text-gray-100 focus:text-gray-200; + } + .btn-red { + @apply bg-gradient-to-t from-red-700 to-red-600 hover:from-red-600 hover:to-red-700 border-red-900 text-gray-100 focus:text-white; + } + .btn-green { + @apply bg-gradient-to-t from-green-700 to-green-600 hover:from-green-600 hover:to-green-700 border-green-900 text-gray-100 focus:text-gray-200; + } + .btn-blue { + @apply bg-gradient-to-t from-blue-700 to-blue-600 hover:from-blue-600 hover:to-blue-700 border-blue-900 text-gray-100 focus:text-gray-200; + } + .btn-gray { + @apply bg-gradient-to-t from-gray-200 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-700 focus:text-gray-900; + } -/* ----------------------- BADGES ----------------------- */ -.badge { - @apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded bg-gradient-to-t; -} -.badge-pink { - @apply from-pink-600 to-pink-500 text-white; -} -.badge-purple { - @apply from-purple-600 to-purple-500 text-white; -} -.badge-red { - @apply from-red-600 to-red-500 text-white; -} -.badge-yellow { - @apply from-yellow-600 to-yellow-500 text-yellow-900; -} -.badge-blue { - @apply from-blue-600 to-blue-500 text-white; -} -.badge-green { - @apply from-green-600 to-green-500 text-white; -} -.badge-primary { - @apply bg-primary text-white; -} + /* ----------------------- BADGES ----------------------- */ + .badge { + @apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded bg-gradient-to-t; + } + .badge-pink { + @apply from-pink-600 to-pink-500 text-white; + } + .badge-purple { + @apply from-purple-600 to-purple-500 text-white; + } + .badge-red { + @apply from-red-600 to-red-500 text-white; + } + .badge-yellow { + @apply from-yellow-600 to-yellow-500 text-yellow-900; + } + .badge-blue { + @apply from-blue-600 to-blue-500 text-white; + } + .badge-green { + @apply from-green-600 to-green-500 text-white; + } + .badge-primary { + @apply bg-primary text-white; + } -/* ---------------------- TOOLTIPS ---------------------- */ -.tooltip-inner { - background-color: @apply text-black; - color: @apply text-white; -} + /* ---------------------- TOOLTIPS ---------------------- */ + .tooltip-inner { + background-color: @apply text-black; + color: @apply text-white; + } -/* ----------------------- EMOJI ------------------------ */ + /* ----------------------- EMOJI ------------------------ */ -img.emoji { - width: 30px; - height: 30px; - @apply inline-block object-contain -} + img.emoji { + width: 30px; + height: 30px; + @apply inline-block object-contain + } -img.emoji-md { - width: 60px; - height: 60px; - @apply inline-block object-contain -} + img.emoji-md { + width: 60px; + height: 60px; + @apply inline-block object-contain + } -img.emoji-lg { - max-width: 100%; - @apply inline-block object-contain -} + img.emoji-lg { + max-width: 100%; + @apply inline-block object-contain + }