exbert-project/exbert

1.input-description {2	font-weight: 8003}4 5#connector-container {6	//margin: 40px 40px 40px 40px;7    align-items: center;8}9 10.connector-controls {11	display: grid;12	grid-template-columns: 0.5fr 0.5fr;13}14 15//.slide-container {16//	grid-column-start: 1;17//	grid-column-end: 2;18//	grid-row-start: 1;19//	grid-row-end: 2;20//	margin: auto;21//	text-align: center;22//	width: 75%;23//}24 25.slider {26	-webkit-appearance: none;27	width: 10px;28	height: 10px;29	border-radius: 5px;30	background: #d3d3d3;31	outline: none;32	opacity: 0.7;33	-webkit-transition: .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	grid-column-start: 1;53	grid-column-end: 2;54	grid-row-start: 2;55	grid-row-end: 3;56 57}58.layer-select {59	margin-bottom: 2em;60}61 62#atn-container {63	display: flex;64	flex-direction: row;65	flex-wrap: nowrap;66	justify-content: center;67	align-items: top;68 69	margin: 0 auto;70	width: 100%;71	vertical-align: top;72 73	#left-att-heads {74		order:1;75		display: inline-block;76		vertical-align: top;77	}78 79	#left-tokens {80		order: 2;81		text-align: right;82		vertical-align: top;83	}84 85 86	#atn-display {87		order: 3;88		vertical-align: top;89	}90 91	#right-tokens {92		order: 4;93		text-align: left;94		vertical-align: top;95	}96 97	#right-att-heads {98		order: 5;99		vertical-align: top;100	}101 102}103 104.att-rect {105	transition: fill 0.1s;106}107 108.token {109	display: block;110}111 112.atn-curve {113	fill: none;114	// stroke-width: 3;115	stroke: purple;116}117 118.masked-token {119	color: rgba(0,0,0,0.2)120}121 122.unselected {123	fill: gray;124}125 126.selected-token {127	border-style: solid;128	border-width: 3px;129	border-color: rgb(153, 196, 0);130}131 132/* The switch - the box around the slider */133.switch {134	position: relative;135	display: inline-block;136	width: 46px;137	height: 20px;138 139/* Hide default HTML checkbox */140	input {141		opacity: 0;142		width: 0;143		height: 0;144	}145}146 147/* The slider */148.short-slider {149	position: absolute;150	cursor: pointer;151	top: 0;152	left: 0;153	right: 0;154	bottom: 0;155	background-color: #ccc;156	-webkit-transition: .4s;157	transition: .4s;158 159	&:before {160		position: absolute;161		content: "";162		height: 13px;163		width: 13px;164		left: 4px;165		bottom: 4px;166		background-color: white;167		-webkit-transition: .4s;168		transition: .4s;169	}170}171 172input:checked + .short-slider {173	background-color: #2196F3;174}175 176input:focus + .short-slider {177	box-shadow: 0 0 1px #2196F3;178}179 180input:checked + .short-slider:before {181	-webkit-transform: translateX(26px);182	-ms-transform: translateX(26px);183	transform: translateX(26px);184}185 186/* Rounded sliders */187.short-slider.round {188	border-radius: 17px;189}190 191.short-slider.round:before {192	border-radius: 50%;193}194 195#select-all-heads{196	margin-top: 20px;197	margin-bottom: 20px;198}199