CoolFace
Apppublic

exbert-project/exbert

sourceHugging Faceapache-2.0updated 3y agoView on Hugging Face
183likes
AttentionConnectorControls.css218 linesDownload Raw Back to css
1.input-description {2  font-weight: 800;3}4 5.connector-controls {6  display: -ms-grid;7  display: grid;8  -ms-grid-columns: 0.5fr 0.5fr;9      grid-template-columns: 0.5fr 0.5fr;10}11 12.slide-container {13  -ms-grid-column: 1;14      grid-column-start: 1;15  grid-column-end: 2;16  -ms-grid-row: 1;17      grid-row-start: 1;18  grid-row-end: 2;19  margin: auto;20  text-align: center;21  width: 75%;22}23 24.slider {25  -webkit-appearance: none;26  width: 10px;27  height: 10px;28  border-radius: 5px;29  background: #d3d3d3;30  outline: none;31  opacity: 0.7;32  -webkit-transition: .2s;33  -webkit-transition: opacity .2s;34  transition: opacity .2s;35}36 37.slider:hover {38  opacity: 1;39}40 41.slider::-webkit-slider-thumb {42  -webkit-appearance: none;43  appearance: none;44  width: 15px;45  height: 15px;46  border-radius: 50%;47  background: #666666;48  cursor: pointer;49}50 51#layer-selection {52  -ms-grid-column: 1;53      grid-column-start: 1;54  grid-column-end: 2;55  -ms-grid-row: 2;56      grid-row-start: 2;57  grid-row-end: 3;58}59 60.layer-select {61  margin-bottom: 2em;62}63 64#atn-container {65  display: -webkit-box;66  display: -ms-flexbox;67  display: flex;68  -webkit-box-orient: horizontal;69  -webkit-box-direction: normal;70      -ms-flex-direction: row;71          flex-direction: row;72  -ms-flex-wrap: nowrap;73      flex-wrap: nowrap;74  -webkit-box-pack: center;75      -ms-flex-pack: center;76          justify-content: center;77  -webkit-box-align: center;78      -ms-flex-align: center;79          align-items: center;80  margin: 0 auto;81  width: 100%;82  vertical-align: top;83}84 85#atn-container #left-att-heads {86  -webkit-box-ordinal-group: 2;87      -ms-flex-order: 1;88          order: 1;89  display: inline-block;90  vertical-align: top;91}92 93#atn-container #left-tokens {94  -webkit-box-ordinal-group: 3;95      -ms-flex-order: 2;96          order: 2;97  text-align: right;98  vertical-align: top;99}100 101#atn-container #atn-display {102  -webkit-box-ordinal-group: 4;103      -ms-flex-order: 3;104          order: 3;105  vertical-align: top;106}107 108#atn-container #right-tokens {109  -webkit-box-ordinal-group: 5;110      -ms-flex-order: 4;111          order: 4;112  text-align: left;113  vertical-align: top;114}115 116#atn-container #right-att-heads {117  -webkit-box-ordinal-group: 6;118      -ms-flex-order: 5;119          order: 5;120  vertical-align: top;121}122 123.att-rect {124  -webkit-transition: fill 0.1s;125  transition: fill 0.1s;126}127 128.token {129  display: block;130}131 132.atn-curve {133  fill: none;134  stroke: purple;135}136 137.masked-token {138  color: rgba(0, 0, 0, 0.2);139}140 141.unselected {142  fill: gray;143}144 145.selected-token {146  border-style: solid;147  border-width: 3px;148  border-color: #99c400;149}150 151/* The switch - the box around the slider */152.switch {153  position: relative;154  display: inline-block;155  width: 60px;156  height: 34px;157  /* Hide default HTML checkbox */158}159 160.switch input {161  opacity: 0;162  width: 0;163  height: 0;164}165 166/* The slider */167.short-slider {168  position: absolute;169  cursor: pointer;170  top: 0;171  left: 0;172  right: 0;173  bottom: 0;174  background-color: #ccc;175  -webkit-transition: .4s;176  transition: .4s;177}178 179.short-slider:before {180  position: absolute;181  content: "";182  height: 26px;183  width: 26px;184  left: 4px;185  bottom: 4px;186  background-color: white;187  -webkit-transition: .4s;188  transition: .4s;189}190 191input:checked + .short-slider {192  background-color: #2196F3;193}194 195input:focus + .short-slider {196  -webkit-box-shadow: 0 0 1px #2196F3;197          box-shadow: 0 0 1px #2196F3;198}199 200input:checked + .short-slider:before {201  -webkit-transform: translateX(26px);202  transform: translateX(26px);203}204 205/* Rounded sliders */206.short-slider.round {207  border-radius: 34px;208}209 210.short-slider.round:before {211  border-radius: 50%;212}213 214#select-all-heads {215  margin-top: 20px;216  margin-bottom: 20px;217}218/*# sourceMappingURL=AttentionConnectorControls.css.map */