exbert-project/exbert

1@import url(/Users/benjamin.hoover@ibm.com/Projects/exbert/client/src/fonts/plex_sans.css);2body {3  background-color: white;4  font-family: 'IBM Plex Sans', sans-serif;5  font-weight: 400;6}7 8.sticky {9  position: fixed;10}11 12.noscroll {13  overflow: hidden;14}15 16.vpartial {17  max-height: 90vh;18}19 20.scrolling {21  overflow: auto;22  max-height: 98%;23}24 25.btn .btn-xs {26  padding: .25rem .4rem;27  font-size: .875rem;28  line-height: .5;29  border-radius: .2rem;30}31 32button {33  -webkit-transition-duration: 0.4s;34  /* Safari */35  transition-duration: 0.4s;36  background: transparent;37  padding: 5px;38  border-radius: 5px;39  background-color: lightgray;40}41 42button.selected {43  background-color: #98b7d9;44}45 46button:active :focus {47  background-color: #98b7d9;48}49 50#loader {51  border: 5px solid #f3f3f3;52  border-radius: 50%;53  border-top: 5px solid #3498db;54  width: 100px;55  height: 100px;56  -webkit-animation: spin 2s linear infinite;57  /* Safari */58  animation: spin 2s linear infinite;59  position: absolute;60  left: 50%;61  top: 20%;62  display: none;63}64 65/* Safari */66@-webkit-keyframes spin {67  0% {68    -webkit-transform: rotate(0deg);69  }70  100% {71    -webkit-transform: rotate(360deg);72  }73}74 75@keyframes spin {76  0% {77    -webkit-transform: rotate(0deg);78            transform: rotate(0deg);79  }80  100% {81    -webkit-transform: rotate(360deg);82            transform: rotate(360deg);83  }84}85 86svg {87  vertical-align: top;88}89 90select {91  font-size: 9pt;92  font-weight: 600;93  background-color: transparent;94  padding: 8px 6px;95  -webkit-box-sizing: border-box;96  box-sizing: border-box;97  border-radius: 4px;98  border: 0;99  outline: 0;100}101 102.navbar {103  position: absolute;104  top: 0;105  left: 0;106  width: 100%;107  height: 50px;108  background-color: antiquewhite;109}110 111.navbarContent {112  margin: 10px 20px;113}114 115.navbarContent span {116  padding-left: 10px;117}118 119.navbarContent button {120  margin-left: 10px;121}122 123.navbarTitle {124  font-size: 12pt;125  font-weight: bold;126}127 128.main_frame {129  position: fixed;130  top: 55px;131  overflow-x: hidden;132  overflow-y: auto;133}134 135.floating_content {136  padding: 10px;137  height: 94%;138}139 140.container {141  width: 100%;142  height: 95%;143  text-align: center;144  display: inline-block;145  margin: 5px auto;146}147 148#bottom-margin {149  height: 100px;150}151 152.content {153  max-width: 960px;154  margin: auto;155}156 157.whitespace {158  height: 8vh;159}160 161#sentence-input {162  margin-bottom: -30px;163  margin-right: -30px;164  margin-left: 10px;165  width: 90%;166}167 168#sentence-input form {169  display: -webkit-box;170  display: -ms-flexbox;171  display: flex;172  -webkit-box-orient: horizontal;173  -webkit-box-direction: normal;174      -ms-flex-direction: row;175          flex-direction: row;176  -ms-flex-wrap: nowrap;177      flex-wrap: nowrap;178  -webkit-box-pack: space-evenly;179      -ms-flex-pack: space-evenly;180          justify-content: space-evenly;181  -webkit-box-align: center;182      -ms-flex-align: center;183          align-items: center;184}185 186#sentence-input form .form-group {187  -webkit-box-flex: 3;188      -ms-flex-positive: 3;189          flex-grow: 3;190}191 192#sentence-input form .form-group input {193  width: 100%;194  margin-right: 5%;195}196 197#sentence-input form .padding {198  -webkit-box-flex: 0.3;199      -ms-flex-positive: 0.3;200          flex-grow: 0.3;201}202 203#sentence-input form .btn {204  -webkit-box-flex: 1;205      -ms-flex-positive: 1;206          flex-grow: 1;207}208 209.input-description {210  font-weight: 800;211}212 213.connector-controls {214  display: -ms-grid;215  display: grid;216  -ms-grid-columns: 0.5fr 0.5fr;217      grid-template-columns: 0.5fr 0.5fr;218}219 220.slide-container {221  -ms-grid-column: 1;222      grid-column-start: 1;223  grid-column-end: 2;224  -ms-grid-row: 1;225      grid-row-start: 1;226  grid-row-end: 2;227  margin: auto;228  text-align: center;229  width: 75%;230}231 232.slider {233  -webkit-appearance: none;234  width: 10px;235  height: 10px;236  border-radius: 5px;237  background: #d3d3d3;238  outline: none;239  opacity: 0.7;240  -webkit-transition: .2s;241  -webkit-transition: opacity .2s;242  transition: opacity .2s;243}244 245.slider:hover {246  opacity: 1;247}248 249.slider::-webkit-slider-thumb {250  -webkit-appearance: none;251  appearance: none;252  width: 15px;253  height: 15px;254  border-radius: 50%;255  background: #666666;256  cursor: pointer;257}258 259#layer-selection {260  -ms-grid-column: 1;261      grid-column-start: 1;262  grid-column-end: 2;263  -ms-grid-row: 2;264      grid-row-start: 2;265  grid-row-end: 3;266}267 268.layer-select {269  margin-bottom: 2em;270}271 272#atn-container {273  display: -webkit-box;274  display: -ms-flexbox;275  display: flex;276  -webkit-box-orient: horizontal;277  -webkit-box-direction: normal;278      -ms-flex-direction: row;279          flex-direction: row;280  -ms-flex-wrap: nowrap;281      flex-wrap: nowrap;282  -webkit-box-pack: center;283      -ms-flex-pack: center;284          justify-content: center;285  -webkit-box-align: center;286      -ms-flex-align: center;287          align-items: center;288  margin: 0 auto;289  width: 100%;290  vertical-align: top;291}292 293#atn-container #left-att-heads {294  -webkit-box-ordinal-group: 2;295      -ms-flex-order: 1;296          order: 1;297  display: inline-block;298  vertical-align: top;299}300 301#atn-container #left-tokens {302  -webkit-box-ordinal-group: 3;303      -ms-flex-order: 2;304          order: 2;305  text-align: right;306  vertical-align: top;307}308 309#atn-container #atn-display {310  -webkit-box-ordinal-group: 4;311      -ms-flex-order: 3;312          order: 3;313  vertical-align: top;314}315 316#atn-container #right-tokens {317  -webkit-box-ordinal-group: 5;318      -ms-flex-order: 4;319          order: 4;320  text-align: left;321  vertical-align: top;322}323 324#atn-container #right-att-heads {325  -webkit-box-ordinal-group: 6;326      -ms-flex-order: 5;327          order: 5;328  vertical-align: top;329}330 331.att-rect {332  -webkit-transition: fill 0.1s;333  transition: fill 0.1s;334}335 336.token {337  display: block;338}339 340.atn-curve {341  fill: none;342  stroke: purple;343}344 345.masked-token {346  color: rgba(0, 0, 0, 0.2);347}348 349.unselected {350  fill: gray;351}352 353.selected-token {354  border-style: solid;355  border-width: 3px;356  border-color: #99c400;357}358 359/* The switch - the box around the slider */360.switch {361  position: relative;362  display: inline-block;363  width: 60px;364  height: 34px;365  /* Hide default HTML checkbox */366}367 368.switch input {369  opacity: 0;370  width: 0;371  height: 0;372}373 374/* The slider */375.short-slider {376  position: absolute;377  cursor: pointer;378  top: 0;379  left: 0;380  right: 0;381  bottom: 0;382  background-color: #ccc;383  -webkit-transition: .4s;384  transition: .4s;385}386 387.short-slider:before {388  position: absolute;389  content: "";390  height: 26px;391  width: 26px;392  left: 4px;393  bottom: 4px;394  background-color: white;395  -webkit-transition: .4s;396  transition: .4s;397}398 399input:checked + .short-slider {400  background-color: #2196F3;401}402 403input:focus + .short-slider {404  -webkit-box-shadow: 0 0 1px #2196F3;405          box-shadow: 0 0 1px #2196F3;406}407 408input:checked + .short-slider:before {409  -webkit-transform: translateX(26px);410  transform: translateX(26px);411}412 413/* Rounded sliders */414.short-slider.round {415  border-radius: 34px;416}417 418.short-slider.round:before {419  border-radius: 50%;420}421 422#select-all-heads {423  margin-top: 20px;424  margin-bottom: 20px;425}426 427#corpus-vis {428  margin: 0 auto;429  /* Tooltip container */430  /* Tooltip text */431  /* Show the tooltip text when you mouse over the tooltip container */432  /* Add little arrow to box */433}434 435#corpus-vis #main-corpus-vis {436  display: -webkit-box;437  display: -ms-flexbox;438  display: flex;439}440 441#corpus-vis #main-corpus-vis #corpus-mat-container {442  -webkit-box-flex: initial;443      -ms-flex: initial;444          flex: initial;445  vertical-align: top;446  float: left;447}448 449#corpus-vis #main-corpus-vis #corpus-mat-container .corpus-mat {450  display: inline-block;451  margin-right: 0.05em;452  margin-left: 0.05em;453}454 455#corpus-vis #main-corpus-vis #corpus-mat-container .offset-0 {456  border: 0.2em solid black;457}458 459#corpus-vis #main-corpus-vis #corpus-mat-container .mat-hover-display {460  display: -webkit-box;461  display: -ms-flexbox;462  display: flex;463  position: absolute;464  visibility: hidden;465  background-color: #c8c8c8;466  border-radius: 8px 8px 1px 8px;467  margin: auto;468}469 470#corpus-vis #main-corpus-vis #corpus-mat-container .mat-hover-display p {471  margin: auto;472}473 474#corpus-vis #main-corpus-vis #corpus-similar-sentences-div {475  -webkit-box-flex: 1;476      -ms-flex: 1;477          flex: 1;478  vertical-align: top;479  float: left;480  max-width: 80%;481  max-height: 100%;482}483 484#corpus-vis #main-corpus-vis #corpus-similar-sentences-div .hovered-col {485  color: orange;486}487 488#corpus-vis .btn {489  margin-left: 0.25em;490}491 492#corpus-vis .inspector-row {493  display: block;494  margin-left: 10px;495  padding-top: 0.5em;496  padding-bottom: 0.5em;497}498 499#corpus-vis .inspector-cell {500  display: inline-block;501  margin-right: 3px;502  text-align: left;503}504 505#corpus-vis .celltooltip {506  position: relative;507  display: inline-block;508  border-bottom: 1px dotted black;509  /* If you want dots under the hoverable text */510}511 512#corpus-vis .celltooltip .tooltiptext {513  visibility: hidden;514  width: 120px;515  background-color: black;516  color: #fff;517  text-align: center;518  padding: 5px 0;519  border-radius: 6px;520  /* Position the tooltip text - see examples below! */521  position: absolute;522}523 524#corpus-vis .celltooltip:hover .tooltiptext {525  width: 120px;526  bottom: 100%;527  left: 50%;528  margin-left: -60px;529  /* Use half of the width (120/2 = 60), to center the tooltip */530  visibility: visible;531}532 533#corpus-vis .celltooltip .tooltiptext::after {534  content: " ";535  position: absolute;536  top: 100%;537  /* At the bottom of the tooltip */538  left: 50%;539  margin-left: -5px;540  border-width: 5px;541  border-style: solid;542  border-color: black transparent transparent transparent;543}544 545#corpus-vis .matched-cell {546  border-style: solid;547  border-color: rgba(128, 0, 128, 0.7);548  border-width: 3px;549  border-radius: 0.4em;550}551 552#histograms {553  display: block;554  max-width: 100%;555}556 557#histograms .histogram {558  display: inline-block;559  overflow-x: auto;560}561 562#histograms div {563  margin-top: 10px;564}565 566#histograms #max-att-histogram .bar {567  fill: black;568}569 570.pos-selector {571  margin-bottom: 40px;572}573 574body {575  font-family: 'IBM Plex Sans';576}577 578.layerCheckbox {579  background-color: lightgrey;580  padding-left: 8px;581  padding-right: 8px;582}583 584.layerCheckbox.active {585  color: #fff;586  background-color: #6c7067;587}588 589.main-grid {590  width: 100%;591  display: -ms-grid;592  display: grid;593  -ms-grid-columns: 0.18fr 0.2fr 0.2fr 0.04fr 0.2fr 0.2fr 0.18fr;594      grid-template-columns: 0.18fr 0.2fr 0.2fr 0.04fr 0.2fr 0.2fr 0.18fr;595  overflow: auto;596  max-height: 100vh;597}598 599.left-half {600  -ms-grid-column: 1;601      grid-column-start: 1;602  grid-column-end: 4;603  margin-left: 10px;604  margin-right: 10px;605}606 607.vpartial-90 {608  max-height: 90vh;609}610 611.vpartial-95 {612  max-height: 95vh;613}614 615.right-half {616  -ms-grid-column: 5;617      grid-column-start: 5;618  grid-column-end: 9;619  max-height: 98vh;620}621 622.vertical-separator {623  border-left: thick solid #42222298;624  margin: 0 auto;625  margin-top: 10px;626  margin-bottom: 10px;627  border-radius: 3px;628  -ms-grid-column: 4;629      grid-column-start: 4;630  grid-column-end: 5;631  -ms-grid-row: 1;632      grid-row-start: 1;633  grid-row-end: 5;634}635 636#vis-break {637  height: 15px;638}639 640label {641  margin-left: 5px;642}643 644#header {645  width: 100%;646  background-color: lightgray;647  height: 40px;648  margin-bottom: 5px;649}650 651#header .header-logo {652  height: 20px;653  display: inline-block;654  margin-left: 10px;655  margin-top: 5px;656  margin-bottom: 5px;657}658 659#header .header-info {660  font-size: 9pt;661  height: 30px;662  display: inline-block;663  float: right;664  margin-right: 10px;665  margin-top: 10px;666}667 668#header #headertext {669  text-align: center;670  display: inline-block;671  font-size: 18px;672  margin-left: 30%;673  margin-top: 5px;674  margin-bottom: 5px;675}676 677.highlighted {678  background: rgba(152, 83, 216, 0.8);679}680 681#meta-dropdown {682  margin-bottom: 0.75em;683  margin-left: 4em;684}685 686#position-meta-dropdown {687  margin-bottom: 0.75em;688  margin-left: 4em;689}690 691#corpus-control-buttons {692  margin-bottom: 1em;693  position: fixed relative;694}695 696#corpus-control-buttons span {697  margin-left: 5px;698}699 700#selected-heads {701  margin-bottom: 1em;702}703 704#corpus-selection-description {705  display: inline-block;706  margin-right: 15px;707}708 709#corpus-querying {710  display: inline-block;711}712 713#corpus-querying .btn {714  display: inline-block;715}716 717#usage-info {718  margin-top: 10px;719  color: #575757;720  font-size: 14px;721}722/*# sourceMappingURL=main.css.map */