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 |
|---|
"Fossies" - the Fresh Open Source Software Archive 