Astro Classes

botanjs/src/Astro/Blog/AstroEdit/Visualizer/_this.css

@@ -0,0 +1,101 @@
+.v_snippet_input {
+	width: 600px;
+	height: 350px;
+}
+
+.v_boundary {
+	cursor: default;
+	padding: 0.2em;
+}
+
+.v_box {
+	min-height: 3em;
+	overflow: hidden;
+	position: relative;
+}
+
+.v_caption, .v_description {
+	background: rgba(0, 0, 0, 0.8);
+	padding: 0.2em;
+	color: white;
+	
+	width: 100%;
+	
+	font-family: sans-serif;
+	font-size: 1em;
+}
+
+.v_caption {
+	position: relative;
+}
+
+.v_description {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+}
+
+.v_caption_desc {
+	font-size: 60%;
+}
+
+.v_boundary:hover {
+	background-color: rgba(0, 0, 0, 0.2);
+}
+
+.v_snippet_input_single {
+	width: 600px;
+	margin-bottom: 0.5em;
+}
+
+.v_instruction {
+	padding: 0.2em 0;
+}
+
+.v_trimmer {
+	overflow: hidden;
+}
+
+.v_select {
+	width: 100%;
+	background-color: #222;
+	font-size: 1em;
+	color: white;
+	
+	background-image: none;
+	border: none;
+	box-shadow: none;
+	-webkit-appearance: none;
+}
+
+div[data-type="token"] {
+	background-color: #111;
+	color: #EEE;
+
+	padding: 0.25em 0.5em;
+	margin-right: 100%;
+
+	min-width: 8em;
+
+	display: inline-block;
+
+	position: relative;
+}
+
+div[data-type="token"]:hover {
+	background-color: #444;
+}
+
+div[data-type="token"]:after {
+	content: "Loading";
+	position: absolute;
+
+	color: rgba( 255, 255, 255, 0.2 );
+
+	right: 0;
+	bottom: 0;
+}
+
+div[data-type="token"]:hover:after {
+	color: rgba( 255, 255, 255, 0.5 );
+}