@stencila/style-stencila/dist/molecules/index.css

Custom designed theme for Stencila components

*,:after,:before{border:0 solid;box-sizing:border-box}html{font-size:16px}.hidden{display:none}code,code[class*=language-],output{font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:75%}pre{border:1px solid #cfd2e1;border-color:var(--color-neutral-100,#cfd2e1);border-radius:.25rem;margin:.5rem;overflow:auto;padding:.5rem}.preReset{border-width:0;margin:0;padding:0}:host,stencila-code-chunk{
  /** @prop --background: Background color of the `outputs` section */--background:var(--color-stock,#fff);

  /** @prop --background-editor: Background color of the code editor section */--background-editor:var(--color-neutral-50,#edf2f7);

  /** @prop --border: Border color around the component as well as internal section dividers */--border:var(--color-neutral-100,#e2e8f0);border-color:var(--border);border-radius:.25rem;border-style:solid;border-width:1px;display:block;margin-bottom:1rem;margin-top:1rem;overflow:hidden;position:relative;width:100%}:host>figure,stencila-code-chunk>figure{margin:0;padding:0}:host stencila-action-menu,stencila-code-chunk stencila-action-menu{border-left-width:0;border-radius:0;border-right-width:0;display:block;padding:0;position:relative;width:100%}:host stencila-action-menu .executeStatus,stencila-code-chunk stencila-action-menu .executeStatus{--height:0.875rem;--width:0.875rem;cursor:pointer;padding:.25rem}:host stencila-action-menu .executeStatus.scheduled,stencila-code-chunk stencila-action-menu .executeStatus.scheduled{cursor:wait}:host stencila-action-menu .layoutToggle,stencila-code-chunk stencila-action-menu .layoutToggle{display:none}@media (min-width:1024px){:host stencila-action-menu .layoutToggle,stencila-code-chunk stencila-action-menu .layoutToggle{display:inline-block}}:host stencila-editor,stencila-code-chunk stencila-editor{--border-width:0;background-color:var(--background-editor);flex-grow:1}:host ::slotted([slot=outputs]),:host [slot=outputs],stencila-code-chunk ::slotted([slot=outputs]),stencila-code-chunk [slot=outputs]{background-color:var(--background);margin:0;padding:.5rem}:host ::slotted([slot=outputs]):empty,:host [slot=outputs]:empty,stencila-code-chunk ::slotted([slot=outputs]):empty,stencila-code-chunk [slot=outputs]:empty{display:none}.editorContainer{background:var(--background-editor);border-color:var(--border);border-radius:0;border-width:0 0 1px;display:flex;flex:1 1 auto;flex-direction:column;height:intrinsic;margin:0;position:relative}.editorContainer pre,.editorContainer pre[class*=language-]{background-color:transparent}.editorContainer.hidden{display:none}@media (min-width:1024px){:host(:not(.isStacked))>figure>div,stencila-code-chunk:not(.isStacked)>figure>div{display:flex}:host(:not(.isStacked))>figure>div,stencila-code-chunk:not(.isStacked)>figure>div{width:100%}:host(:not(.isStacked))>figure>div,stencila-code-chunk:not(.isStacked)>figure>div{flex-direction:row}:host(:not(.isStacked))>figure>div,stencila-code-chunk:not(.isStacked)>figure>div{align-items:stretch}:host(:not(.isStacked))>figure>div .editorContainer,stencila-code-chunk:not(.isStacked)>figure>div .editorContainer{width:50%}:host(:not(.isStacked))>figure>div .editorContainer,stencila-code-chunk:not(.isStacked)>figure>div .editorContainer{border-bottom-width:0}:host(:not(.isStacked))>figure>div .editorContainer,stencila-code-chunk:not(.isStacked)>figure>div .editorContainer{border-right-width:1px}:host(:not(.isStacked))>figure>div stencila-node-list,stencila-code-chunk:not(.isStacked)>figure>div stencila-node-list{width:50%}:host(:not(.isStacked))>figure>div stencila-node-list,stencila-code-chunk:not(.isStacked)>figure>div stencila-node-list{flex-grow:1}}:host,stencila-code-dependency{display:block;font-family:sans-serif;font-family:var(--font-family-body,sans-serif);font-size:.75rem;line-height:1rem;padding:.5rem}:host a,:host a:link,:host a:visited,stencila-code-dependency a,stencila-code-dependency a:link,stencila-code-dependency a:visited{color:#444a5e;color:var(--color-neutral-700,#444a5e);display:flex;flex-direction:row;flex-wrap:nowrap;text-decoration-line:none;width:100%}:host:not(:last-of-type),stencila-code-dependency:not(:last-of-type){border-bottom:1px solid var(--color-neutral-100)}:host stencila-tooltip,stencila-code-dependency stencila-tooltip{line-height:2;vertical-align:middle}:host .content,stencila-code-dependency .content{flex-grow:1;line-height:1;padding-left:.5rem}:host .label,stencila-code-dependency .label{display:flex;font-weight:700;justify-content:space-between}:host .label code,stencila-code-dependency .label code{background-color:#e9eaf1;background-color:var(--color-neutral-50,#e9eaf1);border:1px solid #b6bacf;border-color:var(--color-neutral-200,#b6bacf);border-radius:.25rem;font-family:monospace;font-family:var(--font-family-mono,monospace);font-weight:400;padding:1px}:host stencila-menu-item[divider],stencila-code-dependencies stencila-menu-item[divider]{background-color:#e9eaf1;background-color:var(--color-neutral-50,#e9eaf1);font-size:.75rem;height:auto;line-height:1rem;line-height:2}:host .none,stencila-code-dependencies .none{display:block;font-family:sans-serif;font-family:var(--font-family-body,sans-serif);font-size:.75rem;font-style:italic;font-weight:200;line-height:1rem;padding:.5rem}:host,stencila-code-expression{
  /** @prop --background: Background color of element as a whole */--background:var(--color-neutral-50,#edf2f7);

  /** @prop --background-editor: Background color of the code editor section */--background-editor:var(--color-stock,#fff);

  /** @prop --background-output: Background color of the output section */--background-output:var(--color-stock,#fff);

  /** @prop --border: Border color around the component and internal section dividers */--border:var(--color-neutral-100,#e2e8f0);align-items:center;background-color:var(--background);border-color:var(--border);border-radius:.25rem;border-style:solid;border-width:1px;display:inline-flex;font-size:.875rem;line-height:1.25rem;line-height:1;padding:0;position:relative;vertical-align:text-bottom}:host stencila-tooltip,stencila-code-expression stencila-tooltip{align-items:stretch;display:inline-flex;line-height:1;overflow:hidden;padding:0;vertical-align:bottom}:host .actions,stencila-code-expression .actions{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem;display:inline-flex;flex:0 1 auto;position:relative;white-space:nowrap}:host .actions stencila-button,stencila-code-expression .actions stencila-button{align-items:stretch;align-self:flex-start;cursor:default;display:inline-flex;flex-shrink:0;overflow:hidden;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:padding,width,max-width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1)}:host .actions .secondaryAction,stencila-code-expression .actions .secondaryAction{cursor:default;display:inline-block;overflow:hidden;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);width:0}:host(.hover) .actions .secondaryAction,:host(.isCodeVisible) .actions .secondaryAction,:host(:focus) .actions .secondaryAction,:host(:focus-within) .actions .secondaryAction,:host(:hover) .actions .secondaryAction,stencila-code-expression.hover .actions .secondaryAction,stencila-code-expression.isCodeVisible .actions .secondaryAction,stencila-code-expression:focus .actions .secondaryAction,stencila-code-expression:focus-within .actions .secondaryAction,stencila-code-expression:hover .actions .secondaryAction{display:inline-flex;max-width:100%;width:1.25rem}:host .executeStatus,stencila-code-expression .executeStatus{--height:0.875rem;--width:0.875rem;cursor:pointer;padding:.25rem}:host .executeStatus.scheduled,stencila-code-expression .executeStatus.scheduled{cursor:wait}:host .text,stencila-code-expression .text{background-color:var(--background-editor);border-color:var(--border);color:#4a4a4a;color:var(--color-key,#4a4a4a);display:inline-block;font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:.875rem;line-height:1.25rem;line-height:1;min-width:0;overflow:hidden;padding:0;transition-duration:.15s;transition-property:width;transition-timing-function:cubic-bezier(0,0,.2,1);white-space:nowrap;width:0}:host(.isCodeVisible) .text,stencila-code-expression.isCodeVisible .text{border-radius:.25rem;border-width:1px;display:inline-block;margin-right:.25rem;min-width:1em;padding:.25rem .5rem;white-space:pre-line;width:auto}:host ::slotted([slot=errors]),:host [slot=errors],stencila-code-expression ::slotted([slot=errors]),stencila-code-expression [slot=errors]{display:none}:host ::slotted([slot=errors]) stencila-code-error,:host [slot=errors] stencila-code-error,stencila-code-expression ::slotted([slot=errors]) stencila-code-error,stencila-code-expression [slot=errors] stencila-code-error{background:none;border-style:none;font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:.875rem;line-height:1.25rem;line-height:1.5;padding:0}:host ::slotted([slot=errors]) stencila-code-error stencila-details,:host ::slotted([slot=errors]) stencila-code-error stencila-icon,:host [slot=errors] stencila-code-error stencila-details,:host [slot=errors] stencila-code-error stencila-icon,stencila-code-expression ::slotted([slot=errors]) stencila-code-error stencila-details,stencila-code-expression ::slotted([slot=errors]) stencila-code-error stencila-icon,stencila-code-expression [slot=errors] stencila-code-error stencila-details,stencila-code-expression [slot=errors] stencila-code-error stencila-icon{display:none}:host.isCodeVisible ::slotted([slot=errors]),:host.isCodeVisible [slot=errors],stencila-code-expression.isCodeVisible ::slotted([slot=errors]),stencila-code-expression.isCodeVisible [slot=errors]{display:inline-block}:host .divider,stencila-code-expression .divider{fill:var(--background);align-self:center;background-color:var(--background-output);display:inline-block;display:none;width:.5rem}:host.isCodeVisible .divider,stencila-code-expression.isCodeVisible .divider{display:inline-block}:host ::slotted([slot=output]),:host [slot=output],stencila-code-expression ::slotted([slot=output]),stencila-code-expression [slot=output]{background-color:#fff;background-color:var(--color-stock,#fff);background-color:var(--background-output);border-style:none;color:#4a4a4a;color:var(--color-key,#4a4a4a);display:inline-block;font-size:1rem;line-height:1.5rem;line-height:1.5;margin:0;padding:0 .25rem 0 .5rem;transition:padding .12s ease-out;white-space:normal}:host ::slotted([slot=output]):empty,:host [slot=output]:empty,stencila-code-expression ::slotted([slot=output]):empty,stencila-code-expression [slot=output]:empty{display:none}:host ::slotted([slot=output]) *,:host [slot=output] *,stencila-code-expression ::slotted([slot=output]) *,stencila-code-expression [slot=output] *{background-color:#fff;background-color:var(--color-stock,#fff);border-style:none;color:#4a4a4a;color:var(--color-key,#4a4a4a);display:inline;font-size:1rem;line-height:1.5rem;line-height:1.5;margin:0;padding:0;white-space:normal}[itemtype="https://schema.stenci.la/Datatable"],stencila-data-table{display:block;overflow:auto}[itemtype="https://schema.stenci.la/Datatable"]::slotted(table),stencila-data-table::slotted(table){border-collapse:collapse;font-family:sans-serif;font-family:var(--font-family-body,sans-serif);font-size:.875rem;line-height:1.25rem}[itemtype="https://schema.stenci.la/Datatable"]::slotted(table) td,[itemtype="https://schema.stenci.la/Datatable"]::slotted(table) th,stencila-data-table::slotted(table) td,stencila-data-table::slotted(table) th{padding:.25rem .5rem}[itemtype="https://schema.stenci.la/Datatable"]::slotted(table) th,stencila-data-table::slotted(table) th{background-color:#e9eaf1;background-color:var(--color-neutral-50,#e9eaf1);font-weight:700}[itemtype="https://schema.stenci.la/Datatable"]::slotted(table) tbody tr:nth-child(2n),stencila-data-table::slotted(table) tbody tr:nth-child(2n){background-color:#e9eaf1;background-color:var(--color-neutral-50,#e9eaf1)}:host,stencila-details{
  /** @prop --disclosure-icon-right: Position of the disclosure toggle icon relative to
  * the right boundary of the closest relatively positioned parent element.
  */--disclosure-icon-right:var(--disclosure-icon-right,0);

  /** @prop --disclosure-icon-top: Position of the disclosure toggle icon relative to
  * the top boundary of the closest relatively positioned parent element.
  */--disclosure-icon-top:var(--disclosure-icon-top,0);display:block;font-family:sans-serif;font-family:var(--font-family-body,sans-serif);position:relative}:host .contents,stencila-details .contents{overflow:hidden}:host .contents.hidden,stencila-details .contents.hidden{display:none}:host ::slotted([slot=summary]),:host(::slotted([slot=summary])),stencila-details ::slotted([slot=summary]),stencila-details::slotted([slot=summary]){cursor:pointer}:host .disclosure-toggle,stencila-details .disclosure-toggle{cursor:pointer;pointer-events:none;position:absolute;right:0;right:var(--disclosure-icon-right,0);top:0;top:var(--disclosure-icon-top,0);transform:rotate(0deg);transition:transform .12s ease-in-out}:host .disclosure-toggle svg,stencila-details .disclosure-toggle svg{stroke:#6e7591;stroke:var(--color-neutral-500,#6e7591)}:host[isopen] .disclosure-toggle,stencila-details[isopen] .disclosure-toggle{transform:rotate(180deg)}:host(:focus) ::slotted(.disclosure-toggle>svg),:host(:focus::slotted(.disclosure-toggle)>svg),:host(:hover) ::slotted(.disclosure-toggle>svg),:host(:hover::slotted(.disclosure-toggle)>svg),stencila-details:focus ::slotted(.disclosure-toggle>svg),stencila-details:focus::slotted(.disclosure-toggle>svg),stencila-details:hover ::slotted(.disclosure-toggle>svg),stencila-details:hover::slotted(.disclosure-toggle>svg){stroke:#444a5e;stroke:var(--color-neutral-700,#444a5e)}:host,stencila-parameter{
  /** @prop --background: Background color of the Parameter component */--background:var(--color-stock,#fff);

  /** @prop --background-buttons: Background color of the parameter validator section */--background-buttons:var(--color-neutral-50,#edf2f7);

  /** @prop --border: Border color around the component as well as internal section dividers */--border:var(--color-neutral-100,#e2e8f0);background-color:var(--background);border-color:var(--border);border-radius:.25rem;border-style:solid;border-width:1px;color:#4a4a4a;color:var(--color-key,#4a4a4a);display:inline-flex;font-size:.875rem;line-height:1.25rem;line-height:1;padding:0;vertical-align:text-bottom;white-space:nowrap}:host .actions,stencila-parameter .actions{background-color:var(--background-buttons);cursor:default;display:inline-block;overflow:hidden;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);width:0}:host([mode=edit].hover) .actions,:host([mode=edit]:focus) .actions,:host([mode=edit]:focus-within) .actions,:host([mode=edit]:hover) .actions,stencila-parameter[mode=edit].hover .actions,stencila-parameter[mode=edit]:focus .actions,stencila-parameter[mode=edit]:focus-within .actions,stencila-parameter[mode=edit]:hover .actions{display:inline-flex;max-width:100%;width:100%}:host .actions form,stencila-parameter .actions form{display:flex;flex-direction:column;padding:.5rem}:host .actions form label,stencila-parameter .actions form label{color:var(--color-neutral-600);display:block;font-family:sans-serif;font-family:var(--font-family-body,sans-serif);font-size:.75rem;line-height:1rem}:host .actions form label:not(:first-of-type),stencila-parameter .actions form label:not(:first-of-type){margin-top:.5rem}:host .actions form label input,:host .actions form label select,stencila-parameter .actions form label input,stencila-parameter .actions form label select{border-color:var(--border);border-radius:.25rem;border-style:solid;border-width:1px;display:block;font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:.875rem;line-height:1.25rem;margin-top:.25rem;width:100%}:host .name,stencila-parameter .name{background-color:var(--background-buttons);cursor:text;font-family:monospace;font-family:var(--font-family-mono,monospace);padding:.25rem}:host .name::slotted(label),stencila-parameter .name::slotted(label){cursor:text}:host .value,stencila-parameter .value{background-color:var(--background);font-family:monospace;font-family:var(--font-family-mono,monospace);margin:0;padding:0 .25rem}:host .value::slotted(input),:host .value::slotted(select),stencila-parameter .value::slotted(input),stencila-parameter .value::slotted(select){border-width:0;display:inline-block;font-family:monospace;font-family:var(--font-family-mono,monospace)}:host ::slotted(input),:host input,stencila-parameter ::slotted(input),stencila-parameter input{min-width:4rem}:host ::slotted(input:invalid),:host input:invalid,stencila-parameter ::slotted(input:invalid),stencila-parameter input:invalid{border-radius:.25rem;box-shadow:0 0 0 2px var(--color-danger-500)}stencila-tab-list{display:block}:host ul,stencila-tab-list ul,ul[role=tablist]{background-color:#e9eaf1;background-color:var(--color-neutral-50,#e9eaf1);display:flex;flex-direction:row;margin:0;padding:0}:host{background-color:var(--color-neutral-200);background-color:var(--background,var(--color-neutral-200));display:block;
  /** @prop --background: Sets the background color of the component. */z-index:40}:host([position=fixed]){left:0;position:fixed;top:0;width:100%;z-index:30}:host([position=fixed])+*{margin-top:3rem}:host[color=stock],:host[color=stock] div{--background:var(--color-stock)}:host[color=key],:host[color=key] div{--background:var(--color-key)}:host[color=primary],:host[color=primary] div{--background:var(--color-primary-500)}:host([color=neutral]),:host([color=neutral]) div{--background:var(--color-neutral-200);color:#444a5e;color:var(--color-neutral-700,#444a5e)}:host[color=success],:host[color=success] div{--background:var(--color-success-500)}:host[color=warn],:host[color=warn] div{--background:var(--color-warn-500)}:host[color=danger],:host[color=danger] div{--background:var(--color-danger-500)}:host div{align-items:center;background-color:var(--color-neutral-200);background-color:var(--background,var(--color-neutral-200));color:#fff;color:var(--color-stock,#fff);display:flex;flex-direction:row;font-family:sans-serif;font-family:var(--font-family-body,sans-serif);height:100%;justify-content:space-between;line-height:1;margin:0;padding:.5rem;vertical-align:middle}:host div>*{vertical-align:middle}:host ::slotted([slot=middle]){flex-grow:1;padding-left:1rem;padding-right:1rem}
/*# sourceMappingURL=index.css.map */