rDrama
/
rDrama
9
10
Fork 7
Code Issues Pull Requests Packages Releases Wiki Activity
rDrama/files/static/src/main.css

429 lines
10 KiB
CSS
Raw Blame History

@tailwind base;
@tailwind components;
@tailwind utilities;
.theme-blood-orange {
--color-primary: 249,115,22;
--color-100: 224,231,255;
--color-200: 218, 225, 254;
--color-300: 165,180,252;
--color-400: 129,140,248;
--color-500: 125, 128, 236;
--color-600: 79,70,229;
--color-700: 67,56,202;
--color-800: 55,48,163;
--color-900: 49,46,129;
}
.theme-lake-tahoe {
--color-primary: 13,148,136;
--color-100: 245,253,254;
--color-200: 185,239,245;
--color-300: 157,237,247;
--color-400: 126,213,226;
--color-500: 56,173,193;
--color-600: 8,145,178;
--color-700: 23,108,131;
--color-800: 17,76,94;
--color-900: 12,47,60;
}
.theme-alpine {
--color-primary: 8,145,178;
--color-100: 245,244,242;
--color-200: 231,229,227;
--color-300: 214,212,209;
--color-400: 168,164,158;
--color-500: 120,115,108;
--color-600: 87,83,78;
--color-700: 68,66,59;
--color-800: 41,39,36;
--color-900: 28,26,23;
}
.theme-cambridge {
--color-primary: 153,27,27;
--color-100: 231,229,228;
--color-200: 231,229,228;
--color-300: 214,211,209;
--color-400: 168,162,158;
--color-500: 120,113,108;
--color-600: 87,83,78;
--color-700: 68,64,60;
--color-800: 41,37,36;
--color-900: 28,25,23;
}
.theme-limon {
--color-primary: 202,138,4;
--color-100: 236,252,203;
--color-200: 234,255,195;
--color-300: 200,242,126;
--color-400: 136,182,61;
--color-500: 131,181,54;
--color-600: 101,163,13;
--color-700: 72,113,16;
--color-800: 63,98,18;
--color-900: 54,83,20;
}
.theme-mocha {
--color-primary: 5,150,105;
--color-100: 246,246,244;
--color-200: 235,233,229;
--color-300: 219,218,209;
--color-400: 175, 169, 155;
--color-500: 148,144,129;
--color-600: 99,96,77;
--color-700: 82,76,55;
--color-800: 55,52,31;
--color-900: 40,37,17;
}
.theme-choco-mint {
--color-primary: 37, 193, 136;
--color-100: 246,246,244;
--color-200: 235,232,229;
--color-300: 219,218,209;
--color-400: 177,171,158;
--color-500: 130,123,110;
--color-600: 99,96,77;
--color-700: 70,62,47;
--color-800: 52,44,32;
--color-900: 40,37,17;
}
.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: 45,60,80;
--color-800: 30,41,59;
--color-900: 15,23,42;
}
.theme-haskell {
--color-primary: 72,236,135;
--color-100: 251,207,232;
--color-200: 251,207,232;
--color-300: 251,207,232;
--color-400: 244,114,182;
--color-500: 236,72,153;
--color-600: 219,39,119;
--color-700: 0,0,31;
--color-800: 0,0,31;
--color-900: 0,0,31;
}
.theme-war-games {
--color-primary: 236,72,153;
--color-100: 207,251,231;
--color-200: 207,251,231;
--color-300: 207,251,231;
--color-400: 114,244,173;
--color-500: 72,236,135;
--color-600: 39,219,138;
--color-700: 0,23,21;
--color-800: 0,23,21;
--color-900: 0,23,21;
}
.theme-yale {
--color-primary: 109,40,217;
--color-100: 254,231,244;
--color-200: 254,231,244;
--color-300: 254,231,244;
--color-400: 255,245,117;
--color-500: 254,237,8;
--color-600: 219,39,119;
--color-700: 215,57,135;
--color-800: 215,57,135;
--color-900: 157,23,77;
}
.theme-abyss {
--color-primary: 219,39,119;
--color-100: 189,189,193;
--color-200: 189,189,193;
--color-300: 189,189,193;
--color-400: 161,161,171;
--color-500: 117,117,126;
--color-600: 82,82,91;
--color-700: 0,0,0;
--color-800: 0,0,0;
--color-900: 0,0,0;
}
.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;
}
.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,171;
--color-500: 117,117,126;
--color-600: 82,82,91;
--color-700: 63,63,70;
--color-800: 39,39,42;
--color-900: 24,24,27;
}
.theme-bubblegum {
--color-primary: 236,72,153;
--color-100: 254,236,246;
--color-200: 252,223,240;
--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,248,190;
--color-200: 247,237,160;
--color-300: 247,231,109;
--color-400: 210,179,55;
--color-500: 199,159,39;
--color-600: 187,129,6;
--color-700: 170,106,14;
--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;
}
.theme-savile-row {
--color-primary: 21,94,117;
--color-100: 246,245,244;
--color-200: 235,233,229;
--color-300: 219,216,209;
--color-400: 175,169,155;
--color-500: 148,143,129;
--color-600: 99,92,78;
--color-700: 82,71,55;
--color-800: 55,46,31;
--color-900: 40,31,17;
}
/* ----------------------- VARIABLES --------------------- */
/*:root {
--color-primary: 220, 38, 38;
}*/
/* ---------------- 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 */
}
}
/* -------------------- 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-gray-100 dark:bg-gray-700 border-l-2 border-gray-700 dark:border-gray-500 mb-4;
}
hr {
@apply my-3
}
ul {
@apply mb-3
}
.comment-text > ul, .post-body > ul {
@apply list-disc pl-4
}
.comment-text > ol, .post-body > ol {
@apply list-decimal pl-4
}
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 dark:bg-white/[.06] border border-gray-300 hover:border-gray-400 dark:border-gray-900 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;
}
/* ---------------------- DROPDOWNS --------------------- */
.dropdown-item-primary {
@apply block w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-white dark:hover:bg-black bg-gradient-to-t dark:bg-gradient-to-t hover:from-primary hover:to-primary/80 dark:hover:from-primary/80 dark:hover:to-primary hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-b dark:focus:bg-gradient-to-t;
}
/* ----------------------- 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;
}
.patron {
@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded;
}
/* ---------------------- TOOLTIPS ---------------------- */
.tooltip-inner {
background-color: @apply text-black;
color: @apply text-white;
}
/* ----------------------- EMOJI ------------------------ */
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-lg {
max-width: 100%;
@apply inline-block object-contain
}
Reference in New Issue View Git Blame Copy Permalink