insomnia/packages/insomnia-components/.storybook/preview-head.html
2020-05-15 08:27:43 +12:00

739 lines
19 KiB
HTML

<script>
window.onload = function() {
document.body.setAttribute('theme', 'default');
};
</script>
<style>
/* reset.css */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: normal;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
<style>
html {
--font-monospace: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace,
'Droid Sans Fallback';
--font-default: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI',
'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans', sans-serif;
--font-ligatures: normal;
}
body {
overflow: auto;
padding: 0.5rem 40px;
font-family: var(--font-default);
font-size: var(--font-size);
}
#root {
max-width: 70rem;
margin-left: auto;
margin-right: auto;
}
#story-root,
#dropdowns-container {
background-color: var(--color-bg);
color: var(--color-font);
}
#story-root {
padding: 0.5rem 40px;
}
.storybook-skinny {
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
.simplebar-content pre {
font-size: 0.8rem;
}
html,
body {
}
</style>
<!-- Default Theme Variables -->
<style>
html {
/* Font Size */
--font-size-xxs: 10px;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-md: 13px;
--font-size-lg: 14px;
--font-size-xl: 16px;
--font-size-xxl: 18px;
--font-size-xxxl: 22px;
--font-size: var(--font-size-md);
/* Font Weight */
--font-weight-regular: 400;
--font-weight-medium: 600;
--font-weight-bold: 700;
/* Line Height */
--font-line-height-sm: calc(var(--font-size) * 1);
--font-line-height-md: calc(var(--font-size) * 1.25);
--font-line-height-lg: calc(var(--font-size) * 1.4);
--font-line-height-xl: calc(var(--font-size) * 1.75);
--font-line-height-xxl: calc(var(--font-size) * 2);
--font-line-height-xxxl: calc(var(--font-size) * 2.25);
/* Spacing */
--spacing-xs: calc(var(--font-size) * 0.4);
--spacing-sm: calc(var(--font-size) * 0.6);
--spacing-md: calc(var(--font-size) * 1);
--spacing-lg: calc(var(--font-size) * 1.25);
--spacing-xl: calc(var(--font-size) * 1.5);
--spacing-xxl: calc(var(--font-size) * 2);
--spacing-xxxl: calc(var(--font-size) * 3);
--spacing-xxxxl: calc(var(--font-size) * 4);
/* Colors */
--color-border: var(--hl-md);
--color-sidebar: var(--color-bg);
--color-text: var(--color-font);
/* Padding */
--padding-md: calc(var(--font-size) * 1.2);
--padding-sm: calc(var(--font-size) * 0.6);
--padding-xs: calc(var(--font-size) * 0.4);
--padding-xxs: calc(var(--font-size) * 0.2);
--padding-lg: calc(var(--font-size) * 2.5);
--padding-xl: calc(var(--font-size) * 5);
/* Wrapper */
--line-height-md: calc(var(--font-size) * 3.6);
--line-height-sm: calc(var(--font-size) * 2.88);
--line-height-xs: calc(var(--font-size) * 2.448);
--line-height-xxs: calc(var(--font-size) * 2.08);
/* Breakpoints */
--breakpoint-lg: 1100px;
--breakpoint-md: 880px;
--breakpoint-sm: 660px;
/* Radius */
--radius-sm: calc(var(--font-size) * 0.2);
--radius-md: calc(var(--font-size) * 0.3);
/* Scrollbars */
--scrollbar-width: calc(var(--font-size) * 0.6);
/* Modals */
--modal-width: calc(var(--font-size) * 60);
--modal-width-wide: calc(var(--font-size) * 70);
--modal-width-skinny: calc(var(--font-size) * 30);
/* Other */
--drag-width: calc(var(--font-size) * 0.5);
--height-nav: var(--line-height-md);
}
</style>
<style data-theme-name="studio-light">
[theme='studio-light'],
[subtheme='studio-light'] {
/* Background */
--color-bg: rgb(255, 255, 255);
--color-bg-rgb: 255, 255, 255;
--color-success: rgb(61, 156, 98);
--color-success-rgb: 61, 156, 98;
--color-notice: rgb(187, 151, 0);
--color-notice-rgb: 187, 151, 0;
--color-warning: rgb(214, 128, 62);
--color-warning-rgb: 214, 128, 62;
--color-danger: rgb(218, 91, 86);
--color-danger-rgb: 218, 91, 86;
--color-surprise: rgb(132, 103, 195);
--color-surprise-rgb: 132, 103, 195;
--color-info: rgb(0, 48, 82);
--color-info-rgb: 0, 48, 82;
/* Foreground */
--color-font: rgb(85, 85, 85);
--color-font-rgb: 85, 85, 85;
--color-font-success: rgb(255, 255, 255);
--color-font-success-rgb: 255, 255, 255;
--color-font-notice: rgb(255, 255, 255);
--color-font-notice-rgb: 255, 255, 255;
--color-font-warning: rgb(255, 255, 255);
--color-font-warning-rgb: 255, 255, 255;
--color-font-danger: rgb(255, 255, 255);
--color-font-danger-rgb: 255, 255, 255;
--color-font-surprise: rgb(255, 255, 255);
--color-font-surprise-rgb: 255, 255, 255;
--color-font-info: rgb(255, 255, 255);
--color-font-info-rgb: 255, 255, 255;
/* Highlight */
--hl: rgb(130, 130, 130);
--hl-rgb: 130, 130, 130;
--hl-xxs: rgba(130, 130, 130, 0.05);
--hl-xxs-rgb: 130, 130, 130, 0.05;
--hl-xs: rgba(130, 130, 130, 0.1);
--hl-xs-rgb: 130, 130, 130, 0.1;
--hl-sm: rgba(130, 130, 130, 0.25);
--hl-sm-rgb: 130, 130, 130, 0.25;
--hl-md: rgba(130, 130, 130, 0.35);
--hl-md-rgb: 130, 130, 130, 0.35;
--hl-lg: rgba(130, 130, 130, 0.5);
--hl-lg-rgb: 130, 130, 130, 0.5;
--hl-xl: rgba(130, 130, 130, 0.8);
--hl-xl-rgb: 130, 130, 130, 0.8;
}
[theme='studio-light'] .theme--activity-bar,
[subtheme='studio-light'] .theme--activity-bar--sub {
/* Background */
--color-bg: rgb(0, 48, 82);
--color-bg-rgb: 0, 48, 82;
/* Foreground */
--color-font: rgb(255, 255, 255);
--color-font-rgb: 255, 255, 255;
/* Highlight */
--hl: rgb(23, 130, 207);
--hl-rgb: 23, 130, 207;
--hl-xxs: rgba(23, 130, 207, 0.05);
--hl-xxs-rgb: 23, 130, 207, 0.05;
--hl-xs: rgba(23, 130, 207, 0.1);
--hl-xs-rgb: 23, 130, 207, 0.1;
--hl-sm: rgba(23, 130, 207, 0.2);
--hl-sm-rgb: 23, 130, 207, 0.2;
--hl-md: rgba(23, 130, 207, 0.3);
--hl-md-rgb: 23, 130, 207, 0.3;
--hl-lg: rgba(23, 130, 207, 0.5);
--hl-lg-rgb: 23, 130, 207, 0.5;
--hl-xl: rgba(23, 130, 207, 0.8);
--hl-xl-rgb: 23, 130, 207, 0.8;
}
[theme='studio-light'] .theme--dropdown__menu,
[subtheme='studio-light'] .theme--dropdown__menu--sub {
/* Background */
--color-info: rgb(0, 91, 158);
--color-info-rgb: 0, 91, 158;
}
[theme='studio-light'] .theme--tooltip,
[subtheme='studio-light'] .theme--tooltip--sub {
/* Background */
--color-info: rgb(0, 91, 158);
--color-info-rgb: 0, 91, 158;
}
[theme='studio-light'] .theme--transparent-overlay,
[subtheme='studio-light'] .theme--transparent-overlay--sub {
/* Background */
--color-bg: rgba(230, 240, 250, 0.8);
--color-bg-rgb: 230, 240, 250, 0.8;
/* Foreground */
--color-font: rgb(85, 85, 85);
--color-font-rgb: 85, 85, 85;
}
[theme='studio-light'] .theme--dialog,
[subtheme='studio-light'] .theme--dialog--sub {
/* Background */
--color-info: rgb(0, 91, 158);
--color-info-rgb: 0, 91, 158;
}
[theme='studio-light'] .theme--sidebar,
[subtheme='studio-light'] .theme--sidebar--sub {
/* Background */
--color-bg: rgb(247, 250, 252);
--color-bg-rgb: 247, 250, 252;
--color-success: rgb(80, 161, 79);
--color-success-rgb: 80, 161, 79;
--color-notice: rgb(193, 132, 1);
--color-notice-rgb: 193, 132, 1;
--color-warning: rgb(193, 132, 1);
--color-warning-rgb: 193, 132, 1;
--color-danger: rgb(228, 86, 73);
--color-danger-rgb: 228, 86, 73;
--color-surprise: rgb(166, 38, 164);
--color-surprise-rgb: 166, 38, 164;
--color-info: rgb(1, 132, 188);
--color-info-rgb: 1, 132, 188;
/* Foreground */
--color-font: rgb(68, 68, 68);
--color-font-rgb: 68, 68, 68;
/* Highlight */
}
[theme='studio-light'] .theme--link,
[subtheme='studio-light'] .theme--link--sub {
/* Foreground */
--color-font: rgb(104, 169, 162);
--color-font-rgb: 104, 169, 162;
}
[theme='studio-light'] .theme--editor,
[subtheme='studio-light'] .theme--editor--sub {
/* Background */
--color-surprise: rgb(0, 48, 82);
--color-surprise-rgb: 0, 48, 82;
--color-info: rgb(132, 103, 195);
--color-info-rgb: 132, 103, 195;
}
[theme='studio-light'] .CodeMirror-info,
[subtheme='studio-light'] .CodeMirror-info--sub {
/* Background */
--color-info: rgb(0, 91, 158);
--color-info-rgb: 0, 91, 158;
}
[theme='studio-light'] .theme--activity-bar,
[subtheme='studio-light'] .theme--activity-bar--sub {
/* Background */
--color-bg: rgb(0, 48, 82);
--color-bg-rgb: 0, 48, 82;
/* Foreground */
--color-font: rgb(255, 255, 255);
--color-font-rgb: 255, 255, 255;
/* Highlight */
--hl: rgb(23, 130, 207);
--hl-rgb: 23, 130, 207;
--hl-xxs: rgba(23, 130, 207, 0.05);
--hl-xxs-rgb: 23, 130, 207, 0.05;
--hl-xs: rgba(23, 130, 207, 0.1);
--hl-xs-rgb: 23, 130, 207, 0.1;
--hl-sm: rgba(23, 130, 207, 0.2);
--hl-sm-rgb: 23, 130, 207, 0.2;
--hl-md: rgba(23, 130, 207, 0.3);
--hl-md-rgb: 23, 130, 207, 0.3;
--hl-lg: rgba(23, 130, 207, 0.5);
--hl-lg-rgb: 23, 130, 207, 0.5;
--hl-xl: rgba(23, 130, 207, 0.8);
--hl-xl-rgb: 23, 130, 207, 0.8;
}
[theme='studio-light'] .theme--dropdown__menu,
[subtheme='studio-light'] .theme--dropdown__menu--sub {
/* Background */
--color-info: rgb(0, 91, 158);
--color-info-rgb: 0, 91, 158;
}
[theme='studio-light'] .theme--tooltip,
[subtheme='studio-light'] .theme--tooltip--sub {
/* Background */
--color-info: rgb(0, 91, 158);
--color-info-rgb: 0, 91, 158;
}
[theme='studio-light'] .theme--transparent-overlay,
[subtheme='studio-light'] .theme--transparent-overlay--sub {
/* Background */
--color-bg: rgba(230, 240, 250, 0.8);
--color-bg-rgb: 230, 240, 250, 0.8;
/* Foreground */
--color-font: rgb(85, 85, 85);
--color-font-rgb: 85, 85, 85;
}
[theme='studio-light'] .theme--dialog,
[subtheme='studio-light'] .theme--dialog--sub {
/* Background */
--color-info: rgb(0, 91, 158);
--color-info-rgb: 0, 91, 158;
}
[theme='studio-light'] .theme--sidebar,
[subtheme='studio-light'] .theme--sidebar--sub {
/* Background */
--color-bg: rgb(247, 250, 252);
--color-bg-rgb: 247, 250, 252;
--color-success: rgb(80, 161, 79);
--color-success-rgb: 80, 161, 79;
--color-notice: rgb(193, 132, 1);
--color-notice-rgb: 193, 132, 1;
--color-warning: rgb(193, 132, 1);
--color-warning-rgb: 193, 132, 1;
--color-danger: rgb(228, 86, 73);
--color-danger-rgb: 228, 86, 73;
--color-surprise: rgb(166, 38, 164);
--color-surprise-rgb: 166, 38, 164;
--color-info: rgb(1, 132, 188);
--color-info-rgb: 1, 132, 188;
/* Foreground */
--color-font: rgb(68, 68, 68);
--color-font-rgb: 68, 68, 68;
/* Highlight */
}
[theme='studio-light'] .theme--link,
[subtheme='studio-light'] .theme--link--sub {
/* Foreground */
--color-font: rgb(104, 169, 162);
--color-font-rgb: 104, 169, 162;
}
[theme='studio-light'] .theme--editor,
[subtheme='studio-light'] .theme--editor--sub {
/* Background */
--color-surprise: rgb(0, 48, 82);
--color-surprise-rgb: 0, 48, 82;
--color-info: rgb(132, 103, 195);
--color-info-rgb: 132, 103, 195;
}
[theme='studio-light'] .CodeMirror-info,
[subtheme='studio-light'] .CodeMirror-info--sub {
/* Background */
--color-info: rgb(0, 91, 158);
--color-info-rgb: 0, 91, 158;
}
<style data-theme-name='studio-colorful' > [theme='studio-colorful'],
[subtheme='studio-colorful'] {
/* Background */
--color-bg: rgb(0, 48, 82);
--color-bg-rgb: 0, 48, 82;
--color-success: rgb(105, 199, 144);
--color-success-rgb: 105, 199, 144;
--color-notice: rgb(237, 203, 2);
--color-notice-rgb: 237, 203, 2;
--color-warning: rgb(232, 156, 66);
--color-warning-rgb: 232, 156, 66;
--color-danger: rgb(239, 110, 110);
--color-danger-rgb: 239, 110, 110;
--color-surprise: rgb(191, 163, 249);
--color-surprise-rgb: 191, 163, 249;
--color-info: rgb(106, 199, 230);
--color-info-rgb: 106, 199, 230;
/* Foreground */
--color-font: rgb(230, 239, 245);
--color-font-rgb: 230, 239, 245;
--color-font-success: rgb(255, 255, 255);
--color-font-success-rgb: 255, 255, 255;
--color-font-notice: rgb(255, 255, 255);
--color-font-notice-rgb: 255, 255, 255;
--color-font-warning: rgb(255, 255, 255);
--color-font-warning-rgb: 255, 255, 255;
--color-font-danger: rgb(255, 255, 255);
--color-font-danger-rgb: 255, 255, 255;
--color-font-surprise: rgb(255, 255, 255);
--color-font-surprise-rgb: 255, 255, 255;
--color-font-info: rgb(255, 255, 255);
--color-font-info-rgb: 255, 255, 255;
/* Highlight */
--hl: rgb(133, 157, 176);
--hl-rgb: 133, 157, 176;
--hl-xxs: rgba(133, 157, 176, 0.05);
--hl-xxs-rgb: 133, 157, 176, 0.05;
--hl-xs: rgba(133, 157, 176, 0.1);
--hl-xs-rgb: 133, 157, 176, 0.1;
--hl-sm: rgba(133, 157, 176, 0.2);
--hl-sm-rgb: 133, 157, 176, 0.2;
--hl-md: rgba(133, 157, 176, 0.3);
--hl-md-rgb: 133, 157, 176, 0.3;
--hl-lg: rgba(133, 157, 176, 0.5);
--hl-lg-rgb: 133, 157, 176, 0.5;
--hl-xl: rgba(133, 157, 176, 0.8);
--hl-xl-rgb: 133, 157, 176, 0.8;
}
[theme='studio-colorful'] .theme--activity-bar,
[subtheme='studio-colorful'] .theme--activity-bar--sub {
/* Background */
--color-bg: rgb(0, 69, 114);
--color-bg-rgb: 0, 69, 114;
/* Foreground */
--color-font: rgb(255, 255, 255);
--color-font-rgb: 255, 255, 255;
/* Highlight */
--hl: rgb(23, 130, 207);
--hl-rgb: 23, 130, 207;
--hl-xxs: rgba(23, 130, 207, 0.05);
--hl-xxs-rgb: 23, 130, 207, 0.05;
--hl-xs: rgba(23, 130, 207, 0.1);
--hl-xs-rgb: 23, 130, 207, 0.1;
--hl-sm: rgba(23, 130, 207, 0.2);
--hl-sm-rgb: 23, 130, 207, 0.2;
--hl-md: rgba(23, 130, 207, 0.3);
--hl-md-rgb: 23, 130, 207, 0.3;
--hl-lg: rgba(23, 130, 207, 0.5);
--hl-lg-rgb: 23, 130, 207, 0.5;
--hl-xl: rgba(23, 130, 207, 0.8);
--hl-xl-rgb: 23, 130, 207, 0.8;
}
[theme='studio-colorful'] .theme--dropdown__menu,
[subtheme='studio-colorful'] .theme--dropdown__menu--sub {
/* Background */
--color-bg: rgb(0, 70, 114);
--color-bg-rgb: 0, 70, 114;
}
[theme='studio-colorful'] .theme--tooltip,
[subtheme='studio-colorful'] .theme--tooltip--sub {
/* Background */
--color-bg: rgb(0, 70, 114);
--color-bg-rgb: 0, 70, 114;
}
[theme='studio-colorful'] .theme--transparent-overlay,
[subtheme='studio-colorful'] .theme--transparent-overlay--sub {
/* Background */
--color-bg: rgba(0, 37, 64, 0.8);
--color-bg-rgb: 0, 37, 64, 0.8;
}
[theme='studio-colorful'] .theme--dialog,
[subtheme='studio-colorful'] .theme--dialog--sub {
/* Background */
--color-bg: rgb(0, 70, 114);
--color-bg-rgb: 0, 70, 114;
}
[theme='studio-colorful'] .theme--sidebar,
[subtheme='studio-colorful'] .theme--sidebar--sub {
/* Background */
--color-bg: rgb(0, 57, 97);
--color-bg-rgb: 0, 57, 97;
/* Foreground */
--color-font: rgb(255, 255, 255);
--color-font-rgb: 255, 255, 255;
}
[theme='studio-colorful'] .theme--link,
[subtheme='studio-colorful'] .theme--link--sub {
/* Foreground */
--color-font: rgb(104, 169, 162);
--color-font-rgb: 104, 169, 162;
}
[theme='studio-colorful'] .CodeMirror-info,
[subtheme='studio-colorful'] .CodeMirror-info--sub {
/* Background */
--color-bg: rgb(0, 70, 114);
--color-bg-rgb: 0, 70, 114;
}
[theme='studio-light'] .theme--pane__header,
[subtheme='studio-light'] .theme--pane__header--sub {
/* Background */
--color-bg: rgb(240, 249, 255);
--color-bg-rgb: 240, 249, 255;
}
[theme='studio-light'] .theme--sidebar,
[subtheme='studio-light'] .theme--sidebar--sub {
/* Background */
--color-bg: rgb(0, 60, 102);
--color-bg-rgb: 0, 60, 102;
--color-success: rgb(116, 212, 156);
--color-success-rgb: 116, 212, 156;
--color-notice: rgb(255, 219, 2);
--color-notice-rgb: 255, 219, 2;
--color-warning: rgb(255, 172, 73);
--color-warning-rgb: 255, 172, 73;
--color-danger: rgb(255, 117, 117);
--color-danger-rgb: 255, 117, 117;
--color-surprise: rgb(191, 163, 249);
--color-surprise-rgb: 191, 163, 249;
--color-info: rgb(117, 221, 255);
--color-info-rgb: 117, 221, 255;
/* Foreground */
--color-font: rgb(255, 255, 255);
--color-font-rgb: 255, 255, 255;
/* Highlight */
--hl: rgb(133, 157, 176);
--hl-rgb: 133, 157, 176;
--hl-xxs: rgba(133, 157, 176, 0.05);
--hl-xxs-rgb: 133, 157, 176, 0.05;
--hl-xs: rgba(133, 157, 176, 0.1);
--hl-xs-rgb: 133, 157, 176, 0.1;
--hl-sm: rgba(133, 157, 176, 0.2);
--hl-sm-rgb: 133, 157, 176, 0.2;
--hl-md: rgba(133, 157, 176, 0.3);
--hl-md-rgb: 133, 157, 176, 0.3;
--hl-lg: rgba(133, 157, 176, 0.5);
--hl-lg-rgb: 133, 157, 176, 0.5;
--hl-xl: rgba(133, 157, 176, 0.8);
--hl-xl-rgb: 133, 157, 176, 0.8;
}
[theme='studio-light'] .theme--sidebar__header,
[subtheme='studio-light'] .theme--sidebar__header--sub {
/* Foreground */
--color-font: rgb(255, 255, 255);
--color-font-rgb: 255, 255, 255;
}
[theme='studio-light'] .theme--link,
[subtheme='studio-light'] .theme--link--sub {
/* Foreground */
--color-font: rgb(104, 169, 162);
--color-font-rgb: 104, 169, 162;
}
[theme='studio-light'] .theme--editor,
[subtheme='studio-light'] .theme--editor--sub {
/* Background */
--color-success: rgb(61, 156, 98);
--color-success-rgb: 61, 156, 98;
--color-notice: rgb(187, 151, 0);
--color-notice-rgb: 187, 151, 0;
--color-warning: rgb(214, 136, 83);
--color-warning-rgb: 214, 136, 83;
--color-danger: rgb(230, 92, 87);
--color-danger-rgb: 230, 92, 87;
--color-surprise: rgb(0, 95, 157);
--color-surprise-rgb: 0, 95, 157;
--color-info: rgb(132, 103, 195);
--color-info-rgb: 132, 103, 195;
}
[theme='studio-light'] .CodeMirror-info,
[subtheme='studio-light'] .CodeMirror-info--sub {
/* Background */
--color-info: rgb(0, 91, 158);
--color-info-rgb: 0, 91, 158;
}
</style>