|
: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 { |
|
|
|
|
|
opacity: 0; |
|
} |
|
|
|
.classifier.is-classified { |
|
transition: opacity 1000ms; |
|
transition-delay: 1500ms; |
|
opacity: 100; |
|
fill: #c2c2c2; |
|
stroke-width: 2; |
|
} |
|
|
|
.classifier-text { |
|
text-anchor: middle; |
|
|
|
font-size: 30px; |
|
} |
|
|
|
.classifier-caption { |
|
width: 800px; |
|
text-align: center; |
|
position: relative; |
|
left: 50%; |
|
margin-left: -400px; |
|
font-size: 12px; |
|
|
|
} |
|
|
|
.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; |
|
} |
|
|