"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/hoppscotch-app/assets/scss/styles.scss" between
hoppscotch-2.2.1.tar.gz and hoppscotch-3.0.0.tar.gz

About: Hoppscotch is a light-weight, web based API development suite.

styles.scss  (hoppscotch-2.2.1):styles.scss  (hoppscotch-3.0.0)
* { * {
@apply backface-hidden; @apply backface-hidden;
@apply before:backface-hidden; @apply before: backface-hidden;
@apply after:backface-hidden; @apply after: backface-hidden;
@apply selection:bg-accentDark; @apply selection: bg-accentDark;
@apply selection:text-accentContrast; @apply selection: text-accentContrast;
} }
:root { :root {
@apply antialiased; @apply antialiased;
accent-color: var(--accent-color); accent-color: var(--accent-color);
font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@apply bg-transparent; @apply bg-transparent;
@apply border-solid border-l border-dividerLight border-t-0 border-b-0 border- r-0;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@apply bg-divider bg-clip-content; @apply bg-divider bg-clip-content;
@apply rounded-full; @apply rounded-full;
@apply border-solid border-transparent border-4; @apply border-solid border-transparent border-4;
@apply hover:bg-dividerDark; @apply hover: bg-dividerDark;
@apply hover:bg-clip-content; @apply hover: bg-clip-content;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@apply w-4; @apply w-4;
@apply h-4; @apply h-0;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
@apply hidden;
} }
input::placeholder, input::placeholder,
textarea::placeholder { textarea::placeholder,
.cm-placeholder {
@apply text-secondary; @apply text-secondary;
@apply opacity-35; @apply opacity-35;
} }
input, input,
textarea { textarea {
@apply text-secondaryDark; @apply text-secondaryDark;
@apply font-medium; @apply font-medium;
} }
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
@apply bg-primary; @apply bg-primary;
@apply text-secondary; @apply text-secondary text-body;
@apply font-medium; @apply font-medium;
@apply select-none; @apply select-none;
@apply overflow-x-hidden; @apply overflow-x-hidden;
@apply text-body;
@apply leading-body; @apply leading-body;
animation: fade 300ms forwards; animation: fade 300ms forwards;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;
} }
@keyframes fade { @keyframes fade {
0% { 0% {
@apply opacity-0; @apply opacity-0;
} }
100% { 100% {
@apply opacity-100; @apply opacity-100;
} }
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active, .fade-leave-active {
.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
@apply transition-opacity; @apply transition-opacity;
} }
.fade-enter, .fade-enter-from,
.fade-leave-to, .fade-leave-to {
.page-enter,
.page-leave-to,
.layout-enter,
.layout-leave-to {
@apply opacity-0; @apply opacity-0;
} }
.material-icons { .slide-enter-active,
@apply flex-shrink-0; .slide-leave-active {
@apply overflow-hidden; @apply transition;
@apply duration-300;
}
font-size: var(--line-height-body) !important; .slide-enter-from,
width: var(--line-height-body); .slide-leave-to {
@apply transform;
@apply translate-x-full;
} }
.svg-icons { .svg-icons {
@apply flex-shrink-0; @apply flex-shrink-0;
@apply overflow-hidden; @apply overflow-hidden;
height: var(--line-height-body); height: var(--line-height-body);
width: var(--line-height-body); width: var(--line-height-body);
} }
a { a {
@apply inline-flex; @apply inline-flex;
@apply text-current; @apply text-current;
@apply no-underline; @apply no-underline;
@apply outline-none;
@apply transition; @apply transition;
@apply text-body;
@apply leading-body; @apply leading-body;
@apply focus: outline-none;
&.link { &.link {
@apply items-center; @apply items-center;
@apply py-0.5 px-1; @apply py-0.5 px-1;
@apply -my-0.5 -mx-1; @apply -my-0.5 -mx-1;
@apply text-accent; @apply text-accent;
@apply rounded; @apply rounded;
@apply hover:text-accentDark; @apply hover: text-accentDark;
@apply focus-visible:ring; @apply focus-visible: ring;
@apply focus-visible:ring-accent; @apply focus-visible: ring-accent;
@apply focus-visible: text-accentDark;
} }
} }
.tooltip-theme { .cm-tooltip {
.tippy-box {
@apply fixed;
@apply -mt-6;
}
}
.tippy-box[data-theme="tooltip"] {
@apply bg-tooltip; @apply bg-tooltip;
@apply text-primary; @apply text-primary;
@apply font-semibold; @apply font-semibold;
@apply py-1 px-2; @apply py-1 px-2;
@apply rounded; @apply rounded;
@apply truncate; @apply truncate;
@apply shadow; @apply shadow;
@apply leading-body; @apply leading-body;
font-size: 86%; font-size: 86%;
kbd { xmp {
@apply hidden; @apply hidden;
@apply sm:inline-flex;
@apply font-sans; @apply font-sans;
@apply bg-gray-500; @apply bg-gray-500/45;
@apply bg-opacity-45;
@apply text-primaryLight; @apply text-primaryLight;
@apply rounded-sm; @apply rounded-sm;
@apply px-1; @apply px-1;
@apply ml-1; @apply my-0 ml-1;
@apply truncate; @apply truncate;
@apply sm: inline-flex;
&.expand-loop {
@apply bg-error;
@apply text-accentContrast;
}
}
.tippy-svg-arrow svg {
@apply fill-tooltip;
} }
} }
.popover-theme { .tippy-box[data-theme="popover"] {
@apply flex flex-col;
@apply max-h-46;
@apply items-stretch;
@apply overflow-y-auto;
@apply bg-popover; @apply bg-popover;
@apply text-secondary; @apply text-secondary text-body;
@apply p-2; @apply p-2;
@apply shadow-lg; @apply shadow-lg;
@apply text-body;
@apply leading-body; @apply leading-body;
@apply focus:outline-none; @apply border border-dividerDark;
@apply focus: outline-none;
.tippy-roundarrow svg { .tippy-svg-arrow svg {
@apply fill-popover; @apply fill-popover;
} }
} }
[interactive] > div { .tippy-content {
@apply flex; @apply p-0;
@apply flex-1;
@apply h-full;
} }
.tippy-content > div { [data-v-tippy] {
@apply flex flex-col; @apply flex flex-1;
@apply max-h-46; }
@apply items-stretch;
@apply overflow-y-auto; [interactive]>div {
@apply flex flex-1;
@apply h-full;
} }
hr { hr {
@apply border-b border-dividerLight; @apply border-b border-dividerLight;
@apply my-2; @apply my-2;
} }
.heading { .heading {
@apply font-bold; @apply font-bold;
@apply text-secondaryDark text-lg; @apply text-secondaryDark text-lg;
@apply tracking-tight;
} }
.input, .input,
.select, .select,
.textarea { .textarea {
@apply flex; @apply flex;
@apply w-full; @apply w-full;
@apply py-2 px-4; @apply py-2 px-4;
@apply bg-transparent; @apply bg-transparent;
@apply rounded; @apply rounded;
@apply text-secondaryDark; @apply text-secondaryDark;
@apply border border-divider; @apply border border-divider;
@apply focus-visible:border-dividerDark; @apply focus-visible: border-dividerDark;
} }
input, input,
select, select,
textarea, textarea,
button { button {
@apply truncate; @apply truncate;
@apply transition; @apply transition;
@apply text-body; @apply text-body;
@apply leading-body; @apply leading-body;
@apply focus:outline-none; @apply focus: outline-none;
@apply disabled:cursor-not-allowed; @apply disabled: cursor-not-allowed;
} }
.input[type="file"], .input[type="file"],
.input[type="radio"], .input[type="radio"],
#installPWA { #installPWA {
@apply hidden; @apply hidden;
} }
.floating-input ~ label { .floating-input~label {
@apply py-0.5; @apply absolute;
@apply px-2; @apply px-2 py-0.5;
@apply m-2; @apply m-2;
@apply rounded; @apply rounded;
@apply transition; @apply transition;
@apply absolute;
@apply origin-top-left; @apply origin-top-left;
} }
.floating-input:focus-within ~ label, .floating-input:focus-within~label,
.floating-input:not(:placeholder-shown) ~ label { .floating-input:not(:placeholder-shown)~label {
@apply bg-primary; @apply bg-primary;
@apply transform; @apply transform;
@apply origin-top-left; @apply origin-top-left;
@apply scale-75; @apply scale-75;
@apply -translate-y-4; @apply translate-x-1 -translate-y-4;
@apply translate-x-1;
} }
.floating-input:focus-within ~ label { .floating-input:focus-within~label {
@apply text-secondaryDark; @apply text-secondaryDark;
} }
pre.ace_editor { pre.ace_editor {
@apply font-mono; @apply font-mono;
@apply resize-none; @apply resize-none;
@apply z-0; @apply z-0;
} }
.select { .select {
skipping to change at line 273 skipping to change at line 275
@apply cursor-pointer; @apply cursor-pointer;
&::-ms-expand { &::-ms-expand {
@apply hidden; @apply hidden;
} }
} }
.select-wrapper { .select-wrapper {
@apply flex flex-1; @apply flex flex-1;
@apply relative; @apply relative;
@apply after: absolute;
&::after { @apply after: flex;
@apply absolute; @apply after: inset-y-0;
@apply flex; @apply after: items-center;
@apply inset-y-0; @apply after: justify-center;
@apply items-center; @apply after: pointer-events-none;
@apply justify-center; @apply after: font-icon;
@apply pointer-events-none; @apply after: text-secondaryLight;
@apply font-icon; @apply after: right-3;
@apply text-secondaryLight; @apply after: content-["\e313"];
@apply right-3;
content: "\e313";
}
} }
.info-response { .info-response {
@apply text-pink-500; @apply text-pink-500;
} }
.success-response { .success-response {
@apply text-green-500; @apply text-green-500;
} }
skipping to change at line 314 skipping to change at line 312
.sv-error-response { .sv-error-response {
@apply text-red-600; @apply text-red-600;
} }
.missing-data-response { .missing-data-response {
@apply text-secondaryLight; @apply text-secondaryLight;
} }
.toasted-container { .toasted-container {
@apply max-w-md;
.toasted { .toasted {
&.toasted-primary { &.toasted-primary {
@apply px-4 py-2;
@apply bg-tooltip; @apply bg-tooltip;
@apply text-primary; @apply border-secondaryDark;
@apply text-primary text-body;
@apply justify-between; @apply justify-between;
@apply shadow; @apply shadow-lg;
@apply font-medium; @apply font-semibold;
@apply transition; @apply transition;
@apply text-body;
@apply leading-body; @apply leading-body;
@apply sm: rounded;
@apply sm: border;
.action { .action {
@apply bg-gray-500; @apply relative;
@apply flex flex-shrink-0;
@apply text-body;
@apply px-4; @apply px-4;
@apply bg-opacity-10; @apply my-1;
@apply ml-auto; @apply ml-auto;
@apply last:ml-4;
@apply sm:ml-8;
@apply rounded;
@apply text-current;
@apply normal-case; @apply normal-case;
@apply font-medium; @apply font-semibold;
@apply text-body;
@apply leading-body; @apply leading-body;
@apply hover:bg-opacity-20; @apply tracking-normal;
@apply hover:no-underline; @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 { &.info {
@apply !bg-accent; @apply bg-accent;
@apply text-accentContrast;
@apply border-accentDark;
} }
&.error { &.error {
@apply !bg-red-200; @apply bg-red-200;
@apply !text-red-800; @apply text-red-800;
@apply border-red-400;
} }
&.success { &.success {
@apply !bg-green-200; @apply bg-green-200;
@apply !text-green-800; @apply text-green-800;
@apply border-green-400;
} }
} }
} }
.smart-splitter .splitpanes__splitter { .smart-splitter .splitpanes__splitter {
@apply relative; @apply relative;
@apply bg-primaryLight; @apply bg-primaryLight;
@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 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 { .no-splitter .splitpanes__splitter {
@apply relative; @apply relative;
@apply bg-primaryLight; @apply bg-primaryLight;
} }
.smart-splitter.splitpanes--vertical > .splitpanes__splitter { .smart-splitter.splitpanes--vertical>.splitpanes__splitter {
@apply w-1; @apply w-1;
@apply before: -left-0.5;
@apply before: -right-0.5;
@apply before: h-full;
@apply after: content-["\e5d4"];
} }
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter { .smart-splitter.splitpanes--horizontal>.splitpanes__splitter {
@apply h-1; @apply h-1;
@apply before: -top-0.5;
@apply before: -bottom-0.5;
@apply before: w-full;
@apply after: content-["\e5d3"];
} }
.no-splitter.splitpanes--vertical > .splitpanes__splitter { .no-splitter.splitpanes--vertical>.splitpanes__splitter {
@apply w-0.5; @apply w-0.5;
@apply pointer-events-none; @apply pointer-events-none;
} }
.no-splitter.splitpanes--horizontal > .splitpanes__splitter { .no-splitter.splitpanes--horizontal>.splitpanes__splitter {
@apply h-0.5; @apply h-0.5;
@apply pointer-events-none; @apply pointer-events-none;
} }
.smart-splitter .splitpanes__splitter::before {
@apply absolute;
@apply inset-0;
@apply bg-accentLight;
@apply opacity-0;
@apply z-20;
@apply transition;
content: "";
}
.smart-splitter .splitpanes__splitter::after {
@apply absolute;
@apply inset-0;
@apply z-20;
@apply transition;
@apply flex;
@apply items-center;
@apply justify-center;
@apply text-dividerDark;
@apply font-icon;
}
.smart-splitter.splitpanes--vertical > .splitpanes__splitter::after {
content: "\e5d4";
}
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::after {
content: "\e5d3";
}
.smart-splitter .splitpanes__splitter:hover::before {
@apply opacity-100;
}
.smart-splitter.splitpanes--vertical > .splitpanes__splitter::before {
@apply -left-0.5;
@apply -right-0.5;
@apply h-full;
}
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::before {
@apply -top-0.5;
@apply -bottom-0.5;
@apply w-full;
}
.cm-focused { .cm-focused {
@apply select-auto; @apply select-auto;
@apply !outline-none; @apply outline-none;
.cm-activeLine { .cm-activeLine {
@apply bg-primaryLight; @apply bg-primaryLight;
} }
.cm-activeLineGutter { .cm-activeLineGutter {
@apply bg-primaryDark; @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 { .shortcut-key {
@apply inline-flex; @apply inline-flex;
@apply font-sans; @apply font-sans;
@apply text-tiny; @apply text-tiny;
@apply bg-divider; @apply bg-divider;
@apply rounded; @apply rounded;
@apply ml-2; @apply ml-2;
@apply px-1; @apply px-1;
@apply transition; @apply transition;
} }
.capitalize-first { .capitalize-first {
@apply first-letter:capitalize; @apply first-letter: capitalize;
}
details {
@apply select-none;
} }
details summary::-webkit-details-marker { details summary::-webkit-details-marker {
@apply hidden; @apply hidden;
} }
details[open] summary .indicator {
@apply transform;
@apply rotate-90;
}
@media (max-width: 767px) { @media (max-width: 767px) {
main { main {
margin-bottom: env(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);
} }
} }
.env-highlight {
* {
@apply text-accentContrast;
}
}
#nprogress .bar {
@apply bg-accent #{!important};
}
 End of changes. 68 change blocks. 
162 lines changed or deleted 175 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)