btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

chore: make style sheets consistent (#3074)

Browse Source
This commit is contained in:
Liyas Thomas
2023-05-30 05:42:58 +05:30
committed by GitHub
parent 7c7ed68b20
commit 215df02783
16 changed files with 629 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/hoppscotch-sh-admin/assets/scss/styles.scss
View File

@@ -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 {

159
packages/hoppscotch-sh-admin/assets/scss/themes.scss
View File

@@ -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;
}