forked from rDrama/rDrama
fix
kek7198
parent
22d33369c0
commit
0894dd2152
|
|
@ -2,6 +2,31 @@
|
|||
@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;
|
||||
|
|
@ -83,10 +108,10 @@
|
|||
/* ----------------------- VARIABLES --------------------- */
|
||||
/*:root {
|
||||
--color-primary: 220, 38, 38;
|
||||
}*/
|
||||
}*/
|
||||
|
||||
/* ---------------- RESPONSIVE UTILITIES ----------------- */
|
||||
@responsive {
|
||||
/* ---------------- RESPONSIVE UTILITIES ----------------- */
|
||||
@responsive {
|
||||
.text-shadow {
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12)
|
||||
}
|
||||
|
|
@ -113,10 +138,10 @@
|
|||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------- BASE STYLING -------------------- */
|
||||
@layer base {
|
||||
/* -------------------- BASE STYLING -------------------- */
|
||||
@layer base {
|
||||
/* Headings */
|
||||
h1, .h1 {
|
||||
@apply text-5xl font-bold leading-10 mb-2;
|
||||
|
|
@ -180,80 +205,80 @@
|
|||
.label {
|
||||
@apply block font-bold text-gray-700 text-sm leading-normal mb-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------- INPUTS ----------------------- */
|
||||
.form-input {
|
||||
/* ----------------------- 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 {
|
||||
/* ---------------------- 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 {
|
||||
}
|
||||
.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 {
|
||||
}
|
||||
.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 {
|
||||
}
|
||||
.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 {
|
||||
}
|
||||
.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 {
|
||||
}
|
||||
.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 {
|
||||
/* ----------------------- BADGES ----------------------- */
|
||||
.badge {
|
||||
@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded bg-gradient-to-t;
|
||||
}
|
||||
.badge-pink {
|
||||
}
|
||||
.badge-pink {
|
||||
@apply from-pink-600 to-pink-500 text-white;
|
||||
}
|
||||
.badge-purple {
|
||||
}
|
||||
.badge-purple {
|
||||
@apply from-purple-600 to-purple-500 text-white;
|
||||
}
|
||||
.badge-red {
|
||||
}
|
||||
.badge-red {
|
||||
@apply from-red-600 to-red-500 text-white;
|
||||
}
|
||||
.badge-yellow {
|
||||
}
|
||||
.badge-yellow {
|
||||
@apply from-yellow-600 to-yellow-500 text-yellow-900;
|
||||
}
|
||||
.badge-blue {
|
||||
}
|
||||
.badge-blue {
|
||||
@apply from-blue-600 to-blue-500 text-white;
|
||||
}
|
||||
.badge-green {
|
||||
}
|
||||
.badge-green {
|
||||
@apply from-green-600 to-green-500 text-white;
|
||||
}
|
||||
.badge-primary {
|
||||
}
|
||||
.badge-primary {
|
||||
@apply bg-primary text-white;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------- TOOLTIPS ---------------------- */
|
||||
.tooltip-inner {
|
||||
/* ---------------------- TOOLTIPS ---------------------- */
|
||||
.tooltip-inner {
|
||||
background-color: @apply text-black;
|
||||
color: @apply text-white;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------- EMOJI ------------------------ */
|
||||
/* ----------------------- EMOJI ------------------------ */
|
||||
|
||||
img.emoji {
|
||||
img.emoji {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@apply inline-block object-contain
|
||||
}
|
||||
}
|
||||
|
||||
img.emoji-md {
|
||||
img.emoji-md {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@apply inline-block object-contain
|
||||
}
|
||||
}
|
||||
|
||||
img.emoji-lg {
|
||||
img.emoji-lg {
|
||||
max-width: 100%;
|
||||
@apply inline-block object-contain
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue