fix: minor UI styling
This commit is contained in:
liyasthomas
@@ -15,17 +15,10 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-divider;
|
||||
@apply bg-divider bg-clip-content;
|
||||
@apply rounded-full;
|
||||
@apply border-solid;
|
||||
@apply border-4;
|
||||
@apply border-transparent;
|
||||
@apply bg-clip-content;
|
||||
|
||||
&:hover {
|
||||
@apply bg-dividerDark;
|
||||
@apply bg-clip-content;
|
||||
}
|
||||
@apply border-solid border-4 border-transparent;
|
||||
@apply hover:(bg-dividerDark bg-clip-content);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -53,8 +46,7 @@ html {
|
||||
|
||||
body {
|
||||
@apply bg-primary;
|
||||
@apply text-secondary;
|
||||
@apply !text-sm;
|
||||
@apply text-secondary !text-sm;
|
||||
@apply font-medium;
|
||||
@apply select-none;
|
||||
@apply overflow-x-hidden;
|
||||
@@ -73,7 +65,8 @@ body {
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to .page-enter,
|
||||
.fade-leave-to,
|
||||
.page-enter,
|
||||
.page-leave-to,
|
||||
.layout-enter,
|
||||
.layout-leave-to {
|
||||
@@ -96,26 +89,25 @@ a {
|
||||
@apply text-current;
|
||||
@apply no-underline;
|
||||
@apply outline-none;
|
||||
@apply focus-visible:ring;
|
||||
@apply focus-visible:ring-inset;
|
||||
@apply focus-visible:ring-accent;
|
||||
@apply rounded-lg;
|
||||
@apply focus-visible:(ring ring-inset ring-accent);
|
||||
@apply transition;
|
||||
|
||||
&.link {
|
||||
@apply items-center;
|
||||
@apply px-2 py-1;
|
||||
@apply -mx-2 -my-1;
|
||||
@apply text-accent;
|
||||
@apply hover:text-accent;
|
||||
@apply focus:text-accent;
|
||||
@apply hover:text-accentDark;
|
||||
}
|
||||
}
|
||||
|
||||
.tippy-popper {
|
||||
.tooltip-theme {
|
||||
@apply bg-tooltip;
|
||||
@apply text-primaryLight;
|
||||
@apply text-xs;
|
||||
@apply text-primaryLight text-xs;
|
||||
@apply font-semibold;
|
||||
@apply py-1;
|
||||
@apply px-2;
|
||||
@apply py-1 px-2;
|
||||
@apply shadow;
|
||||
|
||||
kbd {
|
||||
@@ -139,59 +131,51 @@ a {
|
||||
}
|
||||
|
||||
&[x-placement^="top"] .tippy-tooltip .tippy-arrow {
|
||||
border-top-color: var(--primary-color);
|
||||
@apply border-t-primary;
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
|
||||
border-bottom-color: var(--primary-color);
|
||||
@apply border-b-primary;
|
||||
}
|
||||
|
||||
&[x-placement^="left"] .tippy-tooltip .tippy-arrow {
|
||||
border-left-color: var(--primary-color);
|
||||
@apply border-l-primary;
|
||||
}
|
||||
|
||||
&[x-placement^="right"] .tippy-tooltip .tippy-arrow {
|
||||
border-right-color: var(--primary-color);
|
||||
@apply border-r-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.tippy-content > div {
|
||||
@apply flex;
|
||||
@apply flex-col;
|
||||
@apply flex flex-col;
|
||||
@apply max-h-64;
|
||||
@apply overflow-y-auto;
|
||||
@apply items-stretch;
|
||||
@apply overflow-y-auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply border-b;
|
||||
@apply border-dividerLight;
|
||||
@apply border-b border-dividerLight;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@apply font-bold;
|
||||
@apply text-secondaryDark;
|
||||
@apply text-lg;
|
||||
@apply text-secondaryDark text-lg;
|
||||
}
|
||||
|
||||
.input,
|
||||
.select {
|
||||
@apply flex;
|
||||
@apply flex-1;
|
||||
@apply flex flex-1;
|
||||
@apply w-full;
|
||||
@apply px-4;
|
||||
@apply py-2;
|
||||
@apply px-4 py-2;
|
||||
@apply bg-primary;
|
||||
@apply truncate;
|
||||
@apply rounded-lg;
|
||||
@apply font-semibold;
|
||||
@apply font-mono;
|
||||
@apply font-semibold font-mono;
|
||||
@apply text-xs;
|
||||
@apply border;
|
||||
@apply border-divider;
|
||||
@apply border border-divider;
|
||||
@apply transition;
|
||||
@apply focus:outline-none;
|
||||
@apply focus:border-accent;
|
||||
@apply focus:(outline-none border-accent);
|
||||
}
|
||||
|
||||
.input[type="file"],
|
||||
@@ -202,13 +186,13 @@ hr {
|
||||
|
||||
pre.ace_editor {
|
||||
@apply font-mono;
|
||||
@apply z-0;
|
||||
@apply resize-none;
|
||||
@apply z-0;
|
||||
}
|
||||
|
||||
select {
|
||||
@apply cursor-pointer;
|
||||
@apply appearance-none;
|
||||
@apply cursor-pointer;
|
||||
|
||||
&::-ms-expand {
|
||||
@apply hidden;
|
||||
@@ -220,8 +204,8 @@ select {
|
||||
@apply w-full;
|
||||
|
||||
&::after {
|
||||
@apply inline-block;
|
||||
@apply absolute;
|
||||
@apply inline-block;
|
||||
@apply pointer-events-none;
|
||||
@apply font-icon;
|
||||
@apply text-secondaryLight;
|
||||
@@ -241,8 +225,7 @@ input[type="checkbox"] {
|
||||
@apply cursor-pointer;
|
||||
|
||||
&::before {
|
||||
@apply border;
|
||||
@apply border-secondary;
|
||||
@apply border border-secondary;
|
||||
@apply rounded-lg;
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@@ -293,8 +276,6 @@ input[type="checkbox"] {
|
||||
textarea {
|
||||
@apply m-0;
|
||||
@apply w-full;
|
||||
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.covers-response {
|
||||
@@ -309,11 +290,9 @@ input[type="checkbox"] {
|
||||
.toasted-container {
|
||||
.toasted {
|
||||
&.toasted-primary {
|
||||
@apply px-6;
|
||||
@apply py-1;
|
||||
@apply px-6 py-1;
|
||||
@apply bg-tooltip;
|
||||
@apply text-primary;
|
||||
@apply text-xs;
|
||||
@apply text-white text-xs;
|
||||
@apply !font-semibold;
|
||||
|
||||
.material-icons {
|
||||
@@ -322,10 +301,8 @@ input[type="checkbox"] {
|
||||
|
||||
.action {
|
||||
@apply transition;
|
||||
@apply text-current;
|
||||
@apply text-xs;
|
||||
@apply hover:opacity-75;
|
||||
@apply hover:no-underline;
|
||||
@apply text-current text-xs;
|
||||
@apply hover:(opacity-75 no-underline);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -336,12 +313,6 @@ input[type="checkbox"] {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
main {
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
.splitpanes__splitter {
|
||||
@apply relative;
|
||||
@apply bg-primaryLight;
|
||||
@@ -402,3 +373,9 @@ input[type="checkbox"] {
|
||||
bottom: -2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
main {
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,11 +123,11 @@
|
||||
// Dark Accent color
|
||||
--accent-dark-color: theme("colors.teal.600");
|
||||
// Gradient from
|
||||
--gradient-from-color: theme("colors.blue.200");
|
||||
--gradient-from-color: theme("colors.teal.200");
|
||||
// Gradient via
|
||||
--gradient-via-color: theme("colors.blue.400");
|
||||
--gradient-via-color: theme("colors.teal.400");
|
||||
// Gradient to
|
||||
--gradient-to-color: theme("colors.blue.600");
|
||||
--gradient-to-color: theme("colors.teal.600");
|
||||
}
|
||||
|
||||
@mixin indigoTheme {
|
||||
@@ -138,11 +138,11 @@
|
||||
// Dark Accent color
|
||||
--accent-dark-color: theme("colors.indigo.600");
|
||||
// Gradient from
|
||||
--gradient-from-color: theme("colors.blue.200");
|
||||
--gradient-from-color: theme("colors.indigo.200");
|
||||
// Gradient via
|
||||
--gradient-via-color: theme("colors.blue.400");
|
||||
--gradient-via-color: theme("colors.indigo.400");
|
||||
// Gradient to
|
||||
--gradient-to-color: theme("colors.blue.600");
|
||||
--gradient-to-color: theme("colors.indigo.600");
|
||||
}
|
||||
|
||||
@mixin purpleTheme {
|
||||
@@ -153,11 +153,11 @@
|
||||
// Dark Accent color
|
||||
--accent-dark-color: theme("colors.purple.600");
|
||||
// Gradient from
|
||||
--gradient-from-color: theme("colors.blue.200");
|
||||
--gradient-from-color: theme("colors.purple.200");
|
||||
// Gradient via
|
||||
--gradient-via-color: theme("colors.blue.400");
|
||||
--gradient-via-color: theme("colors.purple.400");
|
||||
// Gradient to
|
||||
--gradient-to-color: theme("colors.blue.600");
|
||||
--gradient-to-color: theme("colors.purple.600");
|
||||
}
|
||||
|
||||
@mixin orangeTheme {
|
||||
@@ -168,11 +168,11 @@
|
||||
// Dark Accent color
|
||||
--accent-dark-color: theme("colors.orange.600");
|
||||
// Gradient from
|
||||
--gradient-from-color: theme("colors.blue.200");
|
||||
--gradient-from-color: theme("colors.orange.200");
|
||||
// Gradient via
|
||||
--gradient-via-color: theme("colors.blue.400");
|
||||
--gradient-via-color: theme("colors.orange.400");
|
||||
// Gradient to
|
||||
--gradient-to-color: theme("colors.blue.600");
|
||||
--gradient-to-color: theme("colors.orange.600");
|
||||
}
|
||||
|
||||
@mixin pinkTheme {
|
||||
@@ -183,11 +183,11 @@
|
||||
// Dark Accent color
|
||||
--accent-dark-color: theme("colors.pink.600");
|
||||
// Gradient from
|
||||
--gradient-from-color: theme("colors.blue.200");
|
||||
--gradient-from-color: theme("colors.pink.200");
|
||||
// Gradient via
|
||||
--gradient-via-color: theme("colors.blue.400");
|
||||
--gradient-via-color: theme("colors.pink.400");
|
||||
// Gradient to
|
||||
--gradient-to-color: theme("colors.blue.600");
|
||||
--gradient-to-color: theme("colors.pink.600");
|
||||
}
|
||||
|
||||
@mixin redTheme {
|
||||
@@ -198,11 +198,11 @@
|
||||
// Dark Accent color
|
||||
--accent-dark-color: theme("colors.red.600");
|
||||
// Gradient from
|
||||
--gradient-from-color: theme("colors.blue.200");
|
||||
--gradient-from-color: theme("colors.red.200");
|
||||
// Gradient via
|
||||
--gradient-via-color: theme("colors.blue.400");
|
||||
--gradient-via-color: theme("colors.red.400");
|
||||
// Gradient to
|
||||
--gradient-to-color: theme("colors.blue.600");
|
||||
--gradient-to-color: theme("colors.red.600");
|
||||
}
|
||||
|
||||
@mixin yellowTheme {
|
||||
@@ -213,11 +213,11 @@
|
||||
// Dark Accent color
|
||||
--accent-dark-color: theme("colors.yellow.600");
|
||||
// Gradient from
|
||||
--gradient-from-color: theme("colors.blue.200");
|
||||
--gradient-from-color: theme("colors.yellow.200");
|
||||
// Gradient via
|
||||
--gradient-via-color: theme("colors.blue.400");
|
||||
--gradient-via-color: theme("colors.yellow.400");
|
||||
// Gradient to
|
||||
--gradient-to-color: theme("colors.blue.600");
|
||||
--gradient-to-color: theme("colors.yellow.600");
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
Reference in New Issue
Block a user