chore: make style sheets consistent (#3074)
This commit is contained in:
Liyas Thomas
GitHub
@@ -207,16 +207,19 @@
|
||||
:root.light {
|
||||
@include light-theme;
|
||||
@include light-editor-theme;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
@include dark-theme;
|
||||
@include dark-editor-theme;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root.black {
|
||||
@include black-theme;
|
||||
@include black-editor-theme;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root[data-accent="blue"] {
|
||||
|
||||
@@ -8,7 +8,9 @@ export const APP_INFO = {
|
||||
keywords:
|
||||
"hoppscotch, hopp scotch, hoppscotch online, hoppscotch app, postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql, socketio",
|
||||
app: {
|
||||
background: "#202124",
|
||||
background: "#181818",
|
||||
lightThemeColor: "#ffffff",
|
||||
darkThemeColor: "#181818",
|
||||
},
|
||||
social: {
|
||||
twitter: "@hoppscotch_io",
|
||||
@@ -108,7 +110,17 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
|
||||
// PWA
|
||||
{
|
||||
name: "theme-color",
|
||||
content: APP_INFO.app.background,
|
||||
content: APP_INFO.app.darkThemeColor,
|
||||
media: "(prefers-color-scheme: dark)",
|
||||
},
|
||||
{
|
||||
name: "theme-color",
|
||||
content: APP_INFO.app.lightThemeColor,
|
||||
media: "(prefers-color-scheme: light)",
|
||||
},
|
||||
{
|
||||
name: "supported-color-schemes",
|
||||
content: "light dark",
|
||||
},
|
||||
{
|
||||
name: "mask-icon",
|
||||
|
||||
BIN
packages/hoppscotch-common/public/icons/pwa-1024x1024.png
Normal file
BIN
packages/hoppscotch-common/public/icons/pwa-1024x1024.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
packages/hoppscotch-common/public/icons/pwa-128x128.png
Normal file
BIN
packages/hoppscotch-common/public/icons/pwa-128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
packages/hoppscotch-common/public/icons/pwa-16x16.png
Normal file
BIN
packages/hoppscotch-common/public/icons/pwa-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 400 B |
BIN
packages/hoppscotch-common/public/icons/pwa-192x192.png
Normal file
BIN
packages/hoppscotch-common/public/icons/pwa-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
packages/hoppscotch-common/public/icons/pwa-256x256.png
Normal file
BIN
packages/hoppscotch-common/public/icons/pwa-256x256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
packages/hoppscotch-common/public/icons/pwa-32x32.png
Normal file
BIN
packages/hoppscotch-common/public/icons/pwa-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 871 B |
BIN
packages/hoppscotch-common/public/icons/pwa-512x512.png
Normal file
BIN
packages/hoppscotch-common/public/icons/pwa-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Hoppscotch - Open source API development ecosystem</title>
|
||||
<title>Hoppscotch • Open source API development ecosystem</title>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
@@ -8,7 +8,9 @@ export const APP_INFO = {
|
||||
keywords:
|
||||
"hoppscotch, hopp scotch, hoppscotch online, hoppscotch app, postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql, socketio",
|
||||
app: {
|
||||
background: "#202124",
|
||||
background: "#181818",
|
||||
lightThemeColor: "#ffffff",
|
||||
darkThemeColor: "#181818",
|
||||
},
|
||||
social: {
|
||||
twitter: "@hoppscotch_io",
|
||||
@@ -108,7 +110,17 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
|
||||
// PWA
|
||||
{
|
||||
name: "theme-color",
|
||||
content: APP_INFO.app.background,
|
||||
content: APP_INFO.app.darkThemeColor,
|
||||
media: "(prefers-color-scheme: dark)",
|
||||
},
|
||||
{
|
||||
name: "theme-color",
|
||||
content: APP_INFO.app.lightThemeColor,
|
||||
media: "(prefers-color-scheme: light)",
|
||||
},
|
||||
{
|
||||
name: "supported-color-schemes",
|
||||
content: "light dark",
|
||||
},
|
||||
{
|
||||
name: "mask-icon",
|
||||
|
||||
@@ -150,20 +150,54 @@ export default defineConfig({
|
||||
short_name: APP_INFO.name,
|
||||
description: APP_INFO.shortDescription,
|
||||
start_url: "/?source=pwa",
|
||||
id: "/?source=pwa",
|
||||
protocol_handlers: [
|
||||
{
|
||||
protocol: "web+hoppscotch",
|
||||
url: "/%s",
|
||||
},
|
||||
{
|
||||
protocol: "web+hopp",
|
||||
url: "/%s",
|
||||
},
|
||||
],
|
||||
background_color: APP_INFO.app.background,
|
||||
theme_color: APP_INFO.app.background,
|
||||
icons: [
|
||||
{
|
||||
src: "/icon.png",
|
||||
sizes: "512x512",
|
||||
src: "/icons/pwa-16x16.png",
|
||||
sizes: "16x16",
|
||||
type: "image/png",
|
||||
purpose: "any maskable",
|
||||
},
|
||||
{
|
||||
src: "/logo.svg",
|
||||
sizes: "48x48 72x72 96x96 128x128 256x256 512x512",
|
||||
type: "image/svg+xml",
|
||||
purpose: "any maskable",
|
||||
src: "/icons/pwa-32x32.png",
|
||||
sizes: "32x32",
|
||||
type: "image/png",
|
||||
},
|
||||
{
|
||||
src: "/icons/pwa-128x128.png",
|
||||
sizes: "128x128",
|
||||
type: "image/png",
|
||||
},
|
||||
{
|
||||
src: "/icons/pwa-192x192.png",
|
||||
sizes: "192x192",
|
||||
type: "image/png",
|
||||
},
|
||||
{
|
||||
src: "/icons/pwa-256x256.png",
|
||||
sizes: "256x256",
|
||||
type: "image/png",
|
||||
},
|
||||
{
|
||||
src: "/icons/pwa-512x512.png",
|
||||
sizes: "512x512",
|
||||
type: "image/png",
|
||||
},
|
||||
{
|
||||
src: "/icons/pwa-1024x1024.png",
|
||||
sizes: "1024x1024",
|
||||
type: "image/png",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -34,7 +34,7 @@ input::placeholder,
|
||||
textarea::placeholder,
|
||||
.cm-placeholder {
|
||||
@apply text-secondary;
|
||||
@apply opacity-35;
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
input,
|
||||
@@ -323,9 +323,10 @@ pre.ace_editor {
|
||||
@apply after:justify-center;
|
||||
@apply after:pointer-events-none;
|
||||
@apply after:font-icon;
|
||||
@apply after:text-secondaryLight;
|
||||
@apply after:text-current;
|
||||
@apply after:right-3;
|
||||
@apply after:content-["\e313"];
|
||||
@apply after:text-lg;
|
||||
}
|
||||
|
||||
.info-response {
|
||||
@@ -416,7 +417,6 @@ pre.ace_editor {
|
||||
|
||||
.smart-splitter .splitpanes__splitter {
|
||||
@apply relative;
|
||||
@apply bg-primaryLight;
|
||||
@apply before:absolute;
|
||||
@apply before:inset-0;
|
||||
@apply before:bg-accentLight;
|
||||
@@ -424,48 +424,47 @@ pre.ace_editor {
|
||||
@apply before:z-20;
|
||||
@apply before:transition;
|
||||
@apply before:content-DEFAULT;
|
||||
@apply after:absolute;
|
||||
@apply after:inset-0;
|
||||
@apply after:z-20;
|
||||
@apply after:transition;
|
||||
@apply after:flex;
|
||||
@apply after:items-center;
|
||||
@apply after:justify-center;
|
||||
@apply after:text-dividerDark;
|
||||
@apply after:font-icon;
|
||||
@apply hover:before:opacity-100;
|
||||
@apply hover:after:text-accentDark;
|
||||
}
|
||||
|
||||
.no-splitter .splitpanes__splitter {
|
||||
@apply relative;
|
||||
@apply bg-primaryLight;
|
||||
}
|
||||
|
||||
.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
|
||||
@apply w-1;
|
||||
@apply w-0;
|
||||
@apply before:-left-0.5;
|
||||
@apply before:-right-0.5;
|
||||
@apply before:h-full;
|
||||
@apply after:content-["\e5d4"];
|
||||
@apply bg-divider;
|
||||
}
|
||||
|
||||
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
|
||||
@apply h-1;
|
||||
@apply h-0;
|
||||
@apply before:-top-0.5;
|
||||
@apply before:-bottom-0.5;
|
||||
@apply before:w-full;
|
||||
@apply after:content-["\e5d3"];
|
||||
@apply bg-divider;
|
||||
}
|
||||
|
||||
.no-splitter.splitpanes--vertical > .splitpanes__splitter {
|
||||
@apply w-0.5;
|
||||
@apply w-0;
|
||||
@apply pointer-events-none;
|
||||
@apply bg-dividerLight;
|
||||
}
|
||||
|
||||
.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
|
||||
@apply h-0.5;
|
||||
@apply h-0;
|
||||
@apply pointer-events-none;
|
||||
@apply bg-dividerLight;
|
||||
}
|
||||
|
||||
.splitpanes--horizontal .splitpanes__pane {
|
||||
@apply transition-none;
|
||||
}
|
||||
|
||||
.splitpanes--vertical .splitpanes__pane {
|
||||
@apply transition-none;
|
||||
}
|
||||
|
||||
.cm-focused {
|
||||
|
||||
@@ -6,16 +6,19 @@
|
||||
}
|
||||
|
||||
@mixin dark-theme {
|
||||
--primary-color: theme('colors.neutral.900');
|
||||
--primary-color: theme('colors.dark.800');
|
||||
--primary-light-color: theme('colors.dark.600');
|
||||
--primary-dark-color: theme('colors.neutral.800');
|
||||
--primary-contrast-color: #161616;
|
||||
--primary-contrast-color: theme('colors.neutral.900');
|
||||
|
||||
--secondary-color: theme('colors.neutral.400');
|
||||
--secondary-light-color: theme('colors.neutral.500');
|
||||
--secondary-dark-color: theme('colors.neutral.100');
|
||||
--secondary-dark-color: theme('colors.neutral.50');
|
||||
|
||||
--divider-color: theme('colors.neutral.800');
|
||||
--divider-light-color: theme('colors.dark.500');
|
||||
--divider-dark-color: theme('colors.dark.300');
|
||||
|
||||
--error-color: theme('colors.stone.800');
|
||||
--tooltip-color: theme('colors.neutral.100');
|
||||
--popover-color: theme('colors.dark.700');
|
||||
@@ -24,15 +27,18 @@
|
||||
|
||||
@mixin light-theme {
|
||||
--primary-color: theme('colors.white');
|
||||
--primary-light-color: theme('colors.neutral.50');
|
||||
--primary-dark-color: theme('colors.neutral.100');
|
||||
--primary-contrast-color: #fefefe;
|
||||
--secondary-color: theme('colors.neutral.500');
|
||||
--secondary-light-color: theme('colors.neutral.400');
|
||||
--secondary-dark-color: theme('colors.neutral.900');
|
||||
--primary-light-color: theme('colors.gray.50');
|
||||
--primary-dark-color: theme('colors.gray.100');
|
||||
--primary-contrast-color: theme('colors.light.50');
|
||||
|
||||
--secondary-color: theme('colors.gray.500');
|
||||
--secondary-light-color: theme('colors.gray.400');
|
||||
--secondary-dark-color: theme('colors.gray.900');
|
||||
|
||||
--divider-color: theme('colors.gray.100');
|
||||
--divider-light-color: theme('colors.neutral.100');
|
||||
--divider-dark-color: theme('colors.neutral.300');
|
||||
--divider-light-color: theme('colors.gray.100');
|
||||
--divider-dark-color: theme('colors.gray.300');
|
||||
|
||||
--error-color: theme('colors.yellow.100');
|
||||
--tooltip-color: theme('colors.neutral.800');
|
||||
--popover-color: theme('colors.white');
|
||||
@@ -43,16 +49,19 @@
|
||||
--primary-color: theme('colors.dark.900');
|
||||
--primary-light-color: theme('colors.neutral.900');
|
||||
--primary-dark-color: theme('colors.dark.800');
|
||||
--primary-contrast-color: #0e0e0e;
|
||||
--primary-contrast-color: theme('colors.dark.900');
|
||||
|
||||
--secondary-color: theme('colors.neutral.400');
|
||||
--secondary-light-color: theme('colors.neutral.500');
|
||||
--secondary-dark-color: theme('colors.neutral.100');
|
||||
--divider-color: theme('colors.neutral.800');
|
||||
|
||||
--divider-color: theme('colors.dark.600');
|
||||
--divider-light-color: theme('colors.dark.800');
|
||||
--divider-dark-color: theme('colors.dark.300');
|
||||
--divider-dark-color: theme('colors.dark.200');
|
||||
|
||||
--error-color: theme('colors.stone.900');
|
||||
--tooltip-color: theme('colors.neutral.100');
|
||||
--popover-color: theme('colors.dark.600');
|
||||
--popover-color: theme('colors.dark.900');
|
||||
--editor-theme: 'twilight';
|
||||
}
|
||||
|
||||
@@ -188,6 +197,67 @@
|
||||
--gradient-to-color: theme('colors.pink.600');
|
||||
}
|
||||
|
||||
:root {
|
||||
@include base-theme;
|
||||
@include dark-theme;
|
||||
@include green-theme;
|
||||
@include dark-editor-theme;
|
||||
}
|
||||
|
||||
:root.light {
|
||||
@include light-theme;
|
||||
@include light-editor-theme;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
@include dark-theme;
|
||||
@include dark-editor-theme;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root.black {
|
||||
@include black-theme;
|
||||
@include black-editor-theme;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root[data-accent='blue'] {
|
||||
@include blue-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='green'] {
|
||||
@include green-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='teal'] {
|
||||
@include teal-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='indigo'] {
|
||||
@include indigo-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='purple'] {
|
||||
@include purple-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='orange'] {
|
||||
@include orange-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='pink'] {
|
||||
@include pink-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='red'] {
|
||||
@include red-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='yellow'] {
|
||||
@include yellow-theme;
|
||||
}
|
||||
|
||||
@mixin font-small {
|
||||
--font-size-body: 0.75rem;
|
||||
--line-height-body: 1rem;
|
||||
@@ -236,65 +306,6 @@
|
||||
--sidebar-primary-sticky-fold: 2.5rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
@include base-theme;
|
||||
@include dark-theme;
|
||||
@include green-theme;
|
||||
@include dark-editor-theme;
|
||||
@include font-medium;
|
||||
}
|
||||
|
||||
:root.light {
|
||||
@include light-theme;
|
||||
@include light-editor-theme;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
@include dark-theme;
|
||||
@include dark-editor-theme;
|
||||
}
|
||||
|
||||
:root.black {
|
||||
@include black-theme;
|
||||
@include black-editor-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='blue'] {
|
||||
@include blue-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='green'] {
|
||||
@include green-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='teal'] {
|
||||
@include teal-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='indigo'] {
|
||||
@include indigo-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='purple'] {
|
||||
@include purple-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='orange'] {
|
||||
@include orange-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='pink'] {
|
||||
@include pink-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='red'] {
|
||||
@include red-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='yellow'] {
|
||||
@include yellow-theme;
|
||||
}
|
||||
|
||||
:root[data-font-size='small'] {
|
||||
@include font-small;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,64 @@
|
||||
* {
|
||||
@apply backface-hidden;
|
||||
@apply before:backface-hidden;
|
||||
@apply after:backface-hidden;
|
||||
@apply selection:bg-accentDark;
|
||||
@apply selection:text-accentContrast;
|
||||
}
|
||||
|
||||
:root {
|
||||
@apply antialiased;
|
||||
accent-color: var(--accent-color);
|
||||
font-variant-ligatures: common-ligatures;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
@apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-divider bg-clip-content;
|
||||
@apply rounded-full;
|
||||
@apply border-solid border-transparent border-4;
|
||||
@apply hover:bg-dividerDark;
|
||||
@apply hover:bg-clip-content;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@apply w-4;
|
||||
@apply h-0;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder,
|
||||
.cm-placeholder {
|
||||
@apply text-secondary;
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
@apply text-secondaryDark;
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-primary;
|
||||
@apply text-secondary text-body;
|
||||
@apply font-medium;
|
||||
@apply select-none;
|
||||
@apply overflow-x-hidden;
|
||||
@apply leading-body;
|
||||
animation: fade 300ms forwards;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
@apply opacity-0;
|
||||
@@ -69,6 +130,89 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.cm-tooltip {
|
||||
.tippy-box {
|
||||
@apply shadow-none;
|
||||
@apply fixed;
|
||||
@apply inline-flex;
|
||||
@apply -mt-8;
|
||||
}
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~="tooltip"] {
|
||||
@apply bg-tooltip;
|
||||
@apply border-solid border-tooltip;
|
||||
@apply rounded;
|
||||
@apply shadow;
|
||||
|
||||
.tippy-content {
|
||||
@apply flex;
|
||||
@apply text-tiny text-primary;
|
||||
@apply font-semibold;
|
||||
@apply py-1 px-2;
|
||||
@apply truncate;
|
||||
@apply leading-normal;
|
||||
@apply items-center;
|
||||
|
||||
kbd {
|
||||
@apply hidden;
|
||||
@apply font-sans;
|
||||
@apply bg-gray-500/45;
|
||||
@apply text-primaryLight;
|
||||
@apply rounded-sm;
|
||||
@apply px-1;
|
||||
@apply my-0 ml-1;
|
||||
@apply truncate;
|
||||
@apply sm:inline-flex;
|
||||
}
|
||||
|
||||
.env-icon {
|
||||
@apply transition;
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
}
|
||||
}
|
||||
|
||||
.tippy-svg-arrow {
|
||||
svg:first-child {
|
||||
@apply fill-tooltip;
|
||||
}
|
||||
|
||||
svg:last-child {
|
||||
@apply fill-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~="popover"] {
|
||||
@apply bg-popover;
|
||||
@apply border-solid border-dividerDark;
|
||||
@apply rounded;
|
||||
@apply shadow-lg;
|
||||
|
||||
.tippy-content {
|
||||
@apply flex flex-col;
|
||||
@apply max-h-56;
|
||||
@apply items-stretch;
|
||||
@apply overflow-y-auto;
|
||||
@apply text-secondary text-body;
|
||||
@apply p-2;
|
||||
@apply leading-normal;
|
||||
@apply focus:outline-none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.tippy-svg-arrow {
|
||||
svg:first-child {
|
||||
@apply fill-dividerDark;
|
||||
}
|
||||
|
||||
svg:last-child {
|
||||
@apply fill-popover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-v-tippy] {
|
||||
@apply flex flex-1;
|
||||
}
|
||||
@@ -102,6 +246,252 @@ hr {
|
||||
@apply focus-visible:border-dividerDark;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
@apply truncate;
|
||||
@apply transition;
|
||||
@apply text-body;
|
||||
@apply leading-body;
|
||||
@apply focus:outline-none;
|
||||
@apply disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.input[type="file"],
|
||||
.input[type="radio"],
|
||||
#installPWA {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.floating-input ~ label {
|
||||
@apply absolute;
|
||||
@apply px-2 py-0.5;
|
||||
@apply m-2;
|
||||
@apply rounded;
|
||||
@apply transition;
|
||||
@apply origin-top-left;
|
||||
}
|
||||
|
||||
.floating-input:focus-within ~ label,
|
||||
.floating-input:not(:placeholder-shown) ~ label {
|
||||
@apply bg-primary;
|
||||
@apply transform;
|
||||
@apply origin-top-left;
|
||||
@apply scale-75;
|
||||
@apply translate-x-1 -translate-y-4;
|
||||
}
|
||||
|
||||
.floating-input:focus-within ~ label {
|
||||
@apply text-secondaryDark;
|
||||
}
|
||||
|
||||
.floating-input ~ .end-actions {
|
||||
@apply absolute;
|
||||
@apply right-0.2;
|
||||
@apply inset-y-0;
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
}
|
||||
|
||||
.floating-input:has(~ .end-actions) {
|
||||
@apply pr-12;
|
||||
}
|
||||
|
||||
pre.ace_editor {
|
||||
@apply font-mono;
|
||||
@apply resize-none;
|
||||
@apply z-0;
|
||||
}
|
||||
|
||||
.select {
|
||||
@apply appearance-none;
|
||||
@apply cursor-pointer;
|
||||
|
||||
&::-ms-expand {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
@apply flex flex-1;
|
||||
@apply relative;
|
||||
@apply after:absolute;
|
||||
@apply after:flex;
|
||||
@apply after:inset-y-0;
|
||||
@apply after:items-center;
|
||||
@apply after:justify-center;
|
||||
@apply after:pointer-events-none;
|
||||
@apply after:font-icon;
|
||||
@apply after:text-current;
|
||||
@apply after:right-3;
|
||||
@apply after:content-["\e313"];
|
||||
@apply after:text-lg;
|
||||
}
|
||||
|
||||
.info-response {
|
||||
@apply text-pink-500;
|
||||
}
|
||||
|
||||
.success-response {
|
||||
@apply text-green-500;
|
||||
}
|
||||
|
||||
.redir-response {
|
||||
@apply text-yellow-500;
|
||||
}
|
||||
|
||||
.cl-error-response {
|
||||
@apply text-red-500;
|
||||
}
|
||||
|
||||
.sv-error-response {
|
||||
@apply text-red-600;
|
||||
}
|
||||
|
||||
.missing-data-response {
|
||||
@apply text-secondaryLight;
|
||||
}
|
||||
|
||||
.toasted-container {
|
||||
@apply max-w-md;
|
||||
|
||||
.toasted {
|
||||
&.toasted-primary {
|
||||
@apply px-4 py-2;
|
||||
@apply bg-tooltip;
|
||||
@apply border-secondaryDark;
|
||||
@apply text-primary text-body;
|
||||
@apply justify-between;
|
||||
@apply shadow-lg;
|
||||
@apply font-semibold;
|
||||
@apply transition;
|
||||
@apply leading-body;
|
||||
@apply sm:rounded;
|
||||
@apply sm:border;
|
||||
|
||||
.action {
|
||||
@apply relative;
|
||||
@apply flex flex-shrink-0;
|
||||
@apply text-body;
|
||||
@apply px-4;
|
||||
@apply my-1;
|
||||
@apply ml-auto;
|
||||
@apply normal-case;
|
||||
@apply font-semibold;
|
||||
@apply leading-body;
|
||||
@apply tracking-normal;
|
||||
@apply rounded;
|
||||
@apply last:ml-4;
|
||||
@apply sm:ml-8;
|
||||
@apply before:absolute;
|
||||
@apply before:bg-current;
|
||||
@apply before:opacity-10;
|
||||
@apply before:inset-0;
|
||||
@apply before:transition;
|
||||
@apply before:content-DEFAULT;
|
||||
@apply hover:no-underline;
|
||||
@apply hover:before:opacity-20;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
@apply bg-accent;
|
||||
@apply text-accentContrast;
|
||||
@apply border-accentDark;
|
||||
}
|
||||
|
||||
&.error {
|
||||
@apply bg-red-200;
|
||||
@apply text-red-800;
|
||||
@apply border-red-400;
|
||||
}
|
||||
|
||||
&.success {
|
||||
@apply bg-green-200;
|
||||
@apply text-green-800;
|
||||
@apply border-green-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.smart-splitter .splitpanes__splitter {
|
||||
@apply relative;
|
||||
@apply before:absolute;
|
||||
@apply before:inset-0;
|
||||
@apply before:bg-accentLight;
|
||||
@apply before:opacity-0;
|
||||
@apply before:z-20;
|
||||
@apply before:transition;
|
||||
@apply before:content-DEFAULT;
|
||||
@apply hover:before:opacity-100;
|
||||
}
|
||||
|
||||
.no-splitter .splitpanes__splitter {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
|
||||
@apply w-0;
|
||||
@apply before:-left-0.5;
|
||||
@apply before:-right-0.5;
|
||||
@apply before:h-full;
|
||||
@apply bg-divider;
|
||||
}
|
||||
|
||||
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
|
||||
@apply h-0;
|
||||
@apply before:-top-0.5;
|
||||
@apply before:-bottom-0.5;
|
||||
@apply before:w-full;
|
||||
@apply bg-divider;
|
||||
}
|
||||
|
||||
.no-splitter.splitpanes--vertical > .splitpanes__splitter {
|
||||
@apply w-0;
|
||||
@apply pointer-events-none;
|
||||
@apply bg-dividerLight;
|
||||
}
|
||||
|
||||
.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
|
||||
@apply h-0;
|
||||
@apply pointer-events-none;
|
||||
@apply bg-dividerLight;
|
||||
}
|
||||
|
||||
.splitpanes--horizontal .splitpanes__pane {
|
||||
@apply transition-none;
|
||||
}
|
||||
|
||||
.splitpanes--vertical .splitpanes__pane {
|
||||
@apply transition-none;
|
||||
}
|
||||
|
||||
.cm-focused {
|
||||
@apply select-auto;
|
||||
@apply outline-none #{!important};
|
||||
|
||||
.cm-activeLine {
|
||||
@apply bg-primaryLight;
|
||||
}
|
||||
|
||||
.cm-activeLineGutter {
|
||||
@apply bg-primaryDark;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-editor {
|
||||
.cm-line::selection {
|
||||
@apply bg-accentDark #{!important};
|
||||
@apply text-accentContrast #{!important};
|
||||
}
|
||||
|
||||
.cm-line ::selection {
|
||||
@apply bg-accentDark #{!important};
|
||||
@apply text-accentContrast #{!important};
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut-key {
|
||||
@apply inline-flex;
|
||||
@apply font-sans;
|
||||
@@ -118,3 +508,62 @@ hr {
|
||||
@apply shadow-sm;
|
||||
@apply <sm:hidden;
|
||||
}
|
||||
|
||||
.capitalize-first {
|
||||
@apply first-letter:capitalize;
|
||||
}
|
||||
|
||||
details {
|
||||
@apply select-none;
|
||||
}
|
||||
|
||||
details summary::-webkit-details-marker {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
details summary .indicator {
|
||||
@apply transition;
|
||||
}
|
||||
|
||||
details[open] summary .indicator {
|
||||
@apply transform;
|
||||
@apply rotate-90;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
main {
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
.env-highlight {
|
||||
@apply text-accentContrast;
|
||||
|
||||
&.env-found {
|
||||
@apply bg-accentDark;
|
||||
@apply hover:bg-accent;
|
||||
}
|
||||
|
||||
&.env-not-found {
|
||||
@apply bg-red-500;
|
||||
@apply hover:bg-red-600;
|
||||
}
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
@apply bg-accent #{!important};
|
||||
}
|
||||
|
||||
.color-picker[type="color"] {
|
||||
@apply appearance-none;
|
||||
}
|
||||
|
||||
.color-picker[type="color"]::-webkit-color-swatch-wrapper {
|
||||
@apply rounded;
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
.color-picker[type="color"]::-webkit-color-swatch {
|
||||
@apply rounded;
|
||||
@apply border-0;
|
||||
}
|
||||
|
||||
@@ -207,16 +207,19 @@
|
||||
:root.light {
|
||||
@include light-theme;
|
||||
@include light-editor-theme;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
@include dark-theme;
|
||||
@include dark-editor-theme;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root.black {
|
||||
@include black-theme;
|
||||
@include black-editor-theme;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root[data-accent="blue"] {
|
||||
|
||||
Reference in New Issue
Block a user