Spaces:
Running
Running
| :root { | |
| --shaded-shape-color: #9e9e9e; | |
| --not-shaded-shape-color: white; | |
| --classifier-bg-color: #e6e6e6; | |
| } | |
| .right { | |
| float: right; | |
| } | |
| .left { | |
| float: left; | |
| } | |
| .gt-shaded { | |
| fill: var(--shaded-shape-color); | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .gt-unshaded { | |
| fill: var(--not-shaded-shape-color); | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| .shape-label-group { | |
| opacity: 0; | |
| } | |
| .shape-label-group.visible { | |
| opacity: 100; | |
| } | |
| .incorrect.is-classified { | |
| stroke-width: 2; | |
| transition: stroke-width 0.5s; | |
| transition-timing-function: cubic-bezier(0, 7, 0, 7); | |
| stroke: #d15830; | |
| } | |
| .correct.is-classified { | |
| stroke-width: 1; | |
| stroke: green; | |
| } | |
| .shape-label-rect { | |
| opacity: 50; | |
| fill: white; | |
| stroke: none; | |
| } | |
| .shape-label-text { | |
| color: black; | |
| } | |
| .source { | |
| text-decoration: none; | |
| font-size: 10px; | |
| } | |
| .newspaper-image { | |
| width: 450px; | |
| } | |
| .interface-image { | |
| width: 450px; | |
| } | |
| .summary-text { | |
| opacity: 0; | |
| padding-top: 0px; | |
| padding-bottom: 20px; | |
| text-indent: 50px; | |
| } | |
| .summary-text.is-classified { | |
| transition: opacity 1000ms; | |
| transition-delay: 2500ms; | |
| opacity: 100; | |
| } | |
| .classifier { | |
| /* fill:#c2c2c2; | |
| stroke-width: 0;*/ | |
| opacity: 0; | |
| } | |
| .classifier.is-classified { | |
| transition: opacity 1000ms; | |
| transition-delay: 1500ms; | |
| opacity: 100; | |
| fill: #c2c2c2; | |
| stroke-width: 2; | |
| } | |
| .classifier-text { | |
| text-anchor: middle; | |
| /*alignment-baseline: central;*/ | |
| font-size: 30px; | |
| } | |
| .classifier-caption { | |
| width: 800px; | |
| text-align: center; | |
| position: relative; | |
| left: 50%; | |
| margin-left: -400px; | |
| font-size: 12px; | |
| /*right: 50%;*/ | |
| } | |
| .classifier-bg-shaded { | |
| fill: var(--classifier-bg-color); | |
| stroke-width: 0; | |
| } | |
| .classifier-bg-unshaded { | |
| fill: var(--classifier-bg-color); | |
| } | |
| .item-text.invisible { | |
| fill-opacity: 10; | |
| } | |
| .item-text { | |
| fill-opacity: 100; | |
| } | |
| .explainer-label-text { | |
| padding-left: 2px; | |
| padding-right: 2px; | |
| padding-top: 1px; | |
| padding-bottom: 1px; | |
| } | |
| mark { | |
| padding-left: 2px; | |
| padding-right: 2px; | |
| padding-top: 1px; | |
| padding-bottom: 1px; | |
| outline: 1px solid #000000; | |
| } | |
| img.interface { | |
| padding-top: 20px; | |
| padding-right: 20px; | |
| padding-bottom: 20px; | |
| padding-left: 20px; | |
| } | |
| .classifier-button { | |
| padding: 10px 20px; | |
| text-align: center; | |
| font-family: "Google Sans", sans-serif; | |
| margin-left: 20px; | |
| margin-right: 20px; | |
| } | |
| .classifer-bg-text { | |
| font-family: "Consolas", "monaco", "monospace"; | |
| } | |
| .emphasis { | |
| font-weight: 500; | |
| } | |
| .dropdown { | |
| padding: 8px 7px; | |
| min-width: 200px; | |
| background-color: #f9f9f9; | |
| box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); | |
| font-family: "Google Sans", sans-serif; | |
| font-size: 14px; | |
| } | |
| .fake-dropdown { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| .monospace { | |
| font-family: "Consolas", "monaco", "monospace"; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .monospace.shaded { | |
| background-color: var(--shaded-shape-color); | |
| outline: 1px solid #000000; | |
| padding: 1px; | |
| font-size: 14px; | |
| } | |
| .monospace.not-shaded { | |
| background-color: var(--not-shaded-shape-color); | |
| outline: 1px solid #000000; | |
| padding: 1px; | |
| font-size: 14px; | |
| } | |
| .classifier-info-blurb { | |
| font-style: italic; | |
| font-size: 11; | |
| } | |
| .photo-button { | |
| cursor: pointer; | |
| } | |
| .photo-button rect { | |
| fill: #ffffff; | |
| } | |
| .photo-button.is-active-button rect { | |
| stroke: #000; | |
| } | |
| .explainer-button { | |
| cursor: pointer; | |
| } | |
| .explainer-button rect { | |
| fill: #f9f9f9; | |
| stroke: #000000; | |
| } | |
| .explainer-button.explainer-active-button rect { | |
| fill: #fefefe; | |
| stroke-width: 3; | |
| } | |
| .tooltip { | |
| width: 180px; | |
| text-align: center; | |
| } | |
| .tooltip .correct-row span { | |
| outline: 1px solid red; | |
| padding: 2px; | |
| } | |
| .tooltip .correct-row.is-correct-tooltip span { | |
| outline: 1px solid green; | |
| } | |
| #row.row-highlighted { | |
| opacity: 0.2; | |
| } | |
| .shape-row-unhighlighted { | |
| opacity: 0.2; | |
| } | |
| .results-table { | |
| text-align: center; | |
| } | |
| .results-table tr.active { | |
| background-color: var(--classifier-bg-color); | |
| outline: 1px solid; | |
| } | |