/* Styles for the ShEx web apps -- shex-simple and shex-worker here, and
 * shexmap-simple and shexmap-worker in @shexjs/extension-map, which link
 * this file rather than keeping a copy.  Four copies is how the shape map
 * lost its left padding on three pages: the fix was made once, in the page
 * whose author noticed, and the others quietly did without.
 *
 * A page keeps a <style> of its own for what is actually its own: how its
 * input area scrolls, and, for the map apps, the bindings pane.
 *
 * The palette, so it stays a family:
 *   schema  #f4f4ff   data  #f4fff4   results  #fffff4   bindings #fffff4
 */

h1 { font-size: 1.3em; }
h1, p, ul { margin: 0; margin-left: .1em; }
.ShExLogo { float:left; height:1.3em; padding-left: .3em; }
/* uncomment for breathing icon
.ShExLogo {
  animation-duration: 2s;
  animation-name: ShExLogo-breath;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes ShExLogo-breath {
  from { transform: scale(1, 1); }
  to { transform: scale(1.2, 1.2); }
}
*/
.passes999 { margin-right: 1em; }
.passes, #results div .passes { padding-left: .1em; border-left: thick solid #bfb; }
.pair.passes { border-left: none; padding-left: none; }
.pair.passes { background-color: #bfb; }
.fails , #results div .fails  { padding-left: .1em; border-left: thick solid #fbb; }
.pair.fails { border-left: none; padding-left: none; }
.pair.fails { background-color: #fbb; }
.error , #results div .error  { padding-left: .1em; border-left: thick solid #b00; }
/* one validation result per block, told apart by a rule rather than
   by the punctuation of a JSON array */
#results > div > * + * { border-top: 1px solid #ccc; margin-top: .5em; padding-top: .5em; }
.running { background-color: #ddf; }
/* a validation over a synchronous data source holds the main thread,
   so the button says so before it starts and nothing else can */
#validate.running { background-color: #ffe9a8; border-color: #d0a400; font-style: italic; }
#inputarea { white-space: nowrap; }
#inputarea textarea { overflow-x: auto }
#inputarea textarea.data.focus {
  width: 100%;
  overflow: hidden;
  border-style: inset;
  border-width: 2px;
  padding: 1px 0px;
}
/* adds a bit of left padding to the shape map to fix issue with blinking cursor on left edge not shown enough when element gets bordered and is focused */      
#queryMap { padding-left: .4em }
ul[data-navColumn] button:focus::before { content: "> "; color: #730; margin-left: -1em; }
ul[data-navColumn] button:focus::after  { content: " <"; color: #730; margin-right: -1em; }
.schema.textarea, .schema, .schema.ui-dialog-content { background-color: #f4f4ff; color: #000000; border-color: #fc561c }
#inputSchema li.selected button { background-color: #e8e8ff; color: #000000; }
#inputData textarea, .data, .data.ui-dialog-content { background-color: #f4fff4; color: #000000; border-color: #f0a133 }
#inputData li.selected button { background-color: #e8ffe8; color: #000000; }
/* results are the third thing on the page, so the third tint in the
   family: schema #f4f4ff, data #f4fff4, results #fffff4.  Whether a
   result passed stays in its left border, which says it louder. */
.results { background-color: #fffff4; color: #000000; }
#manifestDrop { border-color: white; width: 100%; }
#manifestDrop div.manifest { overflow: auto; max-height: 10ex; }
#extensionDrop { border-color: #00ffff; width: 88%; border-width: thin; }
#inputSchema li button, #inputData li button {
  font-size: .7em;
  padding: 0em 2ex;
  border-radius: .5em;
  border: thin solid #000;
  cursor: pointer;
  box-shadow: 0.1em 0px 1em rgba(255, 255, 255, 0.9) inset;
}
#inputSchema li button.disabled, #inputData li button.disabled {
  color: #777;
}
body { border-width: .25em; border-style: solid; border-color: white; }
/* the tab set and the document share one box, whose height the app
   fixes to what a document needs once it has measured one (see
   showDocumentArea) so the buttons below don't move when the settings
   tab, which is short, is showing */
#dataSource-tabs { margin-bottom: .2em; padding: .2em; }
#dataSource-tabs .ui-tabs-nav { padding-left: .2em; }
#dataSource-tabs .ui-tabs-panel { padding: .3em .2em; }
/* one setting per line: they are a form, not a sentence, and a row of
   them runs off the side of a panel that is half the window wide */
#neighborhoodFields label.neighborhoodField { font-size: .85em; display: block; margin: .15em 0; }
#neighborhoodFields label.neighborhoodField > span { display: inline-block; min-width: 11em; }
#neighborhoodFields input[type=text], #neighborhoodFields input[type=number] { width: 22em; max-width: 60%; }
#neighborhoodFields .noSettings { font-size: .85em; font-style: italic; color: #666; }
#dataPaneControls { float: right; }
#dataPaneControls button { font-size: .8em; }
#dataSource { font-size: .8em; }
.droparea { border-width: .25em; border-style: dashed; }
.droparea.hover, body.hover { border: .25em dashed #0c0; }
.stoppable { background-color: red; }
#results div:disabled { background-color: #fff; }
#results div { width: 99%; border: none; }
/* the 99% width above must not reach into CodeMirror internals
   (appinfo results panes): 99%-wide gutters push the code offscreen */
#results .cm-editor div { width: unset; }
#results div:disabled.passes { color: #373; }
#results div:disabled.fails  { color: #733; }
#results div:disabled.error  { color: #300; }
#results div.human { margin: 1ex 0; }
#results div.human pre { margin: 0 2em; }
#results h3 { font-size: larger; margin: 0; }
#results pre { margin: 1ex; }
#results .data, #results .schema { border-style: dotted; border-width: 2px; }
.status { display: none; } /* disable .status 'cause it's redundant against the selected marker. */
#navlist li {
  display: inline;
  list-style-type: none;
  padding-right: 10px;
}
/* the shape map, in its three views (text, editor, fixed).  Not
   "actions": the buttons that act on it live with the data. */
#shapeMapArea {
  float:right;
  margin-right: .1em;
}
/* http://stackoverflow.com/questions/686905/labeling-file-upload-button#answer-35767488 */
.inputfile {
  /* visibility: hidden etc. wont work */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.inputfile:focus + label {
  /* keyboard navigation */
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
  pointer-events: none;
}
label {
  /* border: thin solid black; */
  padding: 0 .3em;
}
.heading {
  font-weight: bold;
}
.panel {
  width: 48.5%;
  display: inline-block;
  margin: 0 .4em;
  vertical-align: top;
}
h2.status { margin: 0; }
#schemaDialect, #dataDialect { font-size: .7em; }
#shapeMap-tabs textarea.error { padding-left: default; border-left: default; background-color: #fdd; }
#editMap input.error { padding-left: none; border-left: none; background-color: #fdd; }
.pair { list-style-type: none; }
.addPair, .removePair { font-size: 80%; line-height: 1ex; font-family: monospace; }
.pair button {
  width: 1em;
  padding: .5em 0;
  padding-right: .5em; /* for firefox rendering issue */
}

#menuForm > fieldset {
    box-shadow: -.3ex .3ex grey;
    display: inline;
}

#controls {
    position: absolute;
    left: 0;
    top: 0;
    list-style: none;
    margin: 0;
    display: none;
    background: white; opacity: 1;
    border: thin solid buttontext;
    /* box-shadow: -.3ex .3ex grey; */
}
#controls div {
    border: 10px solid buttonface;
}
#controls h3 {
    margin: 0;
}
#menu-button { margin-left: 1em; }
#menu-button svg { width: 1em; height: 1.5ex; }
#about {
  margin: 3em;
}
#controls ul { padding-left: 0; margin-left: 0; list-style-type: none; }
#controls li { padding: 0 1em; }
#controls li.menuitem:hover { background-color: buttonface; }

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 0 .1em;
}
.ui-tabs .ui-tabs-panel {
    padding: 0;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: small;
}
#shapeMap-tabs .ui-tabs-panel {
    font-family: monospace;
    min-height: 10ex;
}
#shapeMap-tabs {
    font-family: inherit;
    font-size: inherit;
    margin-top: .5ex;
}
#editMap, #fixedMap {
    padding: 0;
}
#editMap td {
    padding: 0;
}
#editMap td:nth-child(2),
#editMap td:nth-child(4),
#editMap td:nth-child(5) {
    width: .01em;
}
#editMap input, #fixedMap input {
    width: 100%;
}
#fixedMap tr td:nth-child(2),
#fixedMap tr td:nth-child(4),
#fixedMap tr td:nth-child(5) { width: .8em; }
ul {
    padding-left: 1.2em;
    padding-right: .4em;
}