/* CSS for the WASM /pikchrshow app. */
/* emcscript-related styling, used during the module load/intialization processes... */
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
div.emscripten { text-align: center; }
div.emscripten_border { border: 1px solid black; }
#module-spinner { overflow: visible; }
#module-spinner > * {
margin-top: 1em;
}
.spinner {
height: 50px;
width: 50px;
margin: 0px auto;
animation: rotation 0.8s linear infinite;
border-left: 10px solid rgb(0,150,240);
border-right: 10px solid rgb(0,150,240);
border-bottom: 10px solid rgb(0,150,240);
border-top: 10px solid rgb(100,0,200);
border-radius: 100%;
background-color: rgb(200,100,250);
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
/* The following styles are for app-level use. */
textarea {
font-family: monospace;
flex: 1 1 auto;
}
#main-wrapper {
display: flex;
flex-direction: column-reverse;
flex: 1 1 auto;
margin: 0.5em 0;
}
#main-wrapper.side-by-side {
flex-direction: row-reverse;
}
#main-wrapper.swapio {
flex-direction: column;
}
#main-wrapper.side-by-side.swapio {
flex-direction: row;
}
.zone-wrapper{
display: flex;
flex-direction: column;
align-items: stretch;
margin: 0 0.25em;
flex: 1 1 auto;
}
.zone-wrapper.output {
}
#pikchr-output {
/*flex: 1 1 auto;*/
/*overflow: auto;*/
padding: 0;
margin: 0;
}
#pikchr-output-wrapper {
flex: 1 1 auto;
overflow: auto;
}
#pikchr-output-wrapper.text {
display: flex;
align-items: stretch;
}
#pikchr-output-wrapper.text > #pikchr-output {
display: flex;
align-items: stretch;
flex: 1 1 auto;
}
#pikchr-output-wrapper.text > #pikchr-output > textarea {
flex: 1 1 auto;
}
.zone-wrapper textarea {
flex: 10 1 auto;
}
.zone-wrapper.input {
/*min-height: 10em;*/
min-width: 20em;
}
.zone-wrapper.output {
overflow: auto;
justify-content: space-between;
}
.button-bar {
display: flex;
justify-content: center;
flex: 0 1 auto;
flex-wrap: wrap;
}
.button-bar button {
margin: 0.25em 1em;
}
label[for] {
cursor: pointer;
}
.error {
color: red;
background-color: yellow;
}
.hidden, .initially-hidden {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
display: none !important;
}
/* Safari supports neither styling of nor event handling on a
fieldset legend, so we emulate a fieldset-like widget. */
.fieldset {
border-radius: 0.5em;
border: 1px inset;
border-top: none;
display: flex;
flex-direction: column;
}
.fieldset > .legend {
position: relative;
top: -1.5ex;
padding: 0 0.5em;
font-size: 85%;
margin-left: 0.5em;
flex: 0 1 auto;
align-self: self-start;
cursor: pointer;
}
.fieldset.options > div {
display: flex;
flex-wrap: wrap;
font-size: 70%;
margin: 0 0.5em 0.5em 0.5em;
}
.fieldset > .legend > span {
position: relative;
}
.fieldset > .legend::before {
/* Hide the parent element's top border where this
element intersects it. */
content: ' ';
width: 100%;
height: 100%;
opacity: 1;
position: absolute;
top: 0;
left: 0;
}
.fieldset > .legend::after {
content: " [hide]";
position: relative;
}
.fieldset.collapsed > .legend::after {
content: " [show]";
position: relative;
}
span.labeled-input {
padding: 0.25em;
margin: 0.25em 0.5em;
border-radius: 0.25em;
white-space: nowrap;
background: #0002;
display: flex;
align-items: center;
}
.center { text-align: center; }
.app-view {
flex: 20 1 auto;
}
#titlebar {
display: flex;
justify-content: space-between;
margin-bottom: 0.5em;
}
#view-split {
display: flex;
flex-direction: column-reverse;
}
#view-split > .fieldset.options {
margin-top: 0.5em;
}
body.fossil-dark-style #pikchr-output svg {
/* Flip the colors to approximate a dark theme look */
filter: invert(1) hue-rotate(180deg);
}