css refactor

static/css/editor.css

@@ -21,8 +21,8 @@
 
 	& .error {
 		border-radius: 3px;
-		background-color: #500F1C;
-		color: #FF9592;
+		background-color: var(--danger-bg);
+		color: var(--danger-text);
 		padding: 4px 8px;
 		display: none;
 	}
@@ -35,14 +35,14 @@
 
 .ace_editor {
 	min-height: 50vh;
-	border: 3px solid #5958B1;
+	border: var(--table-border);
 	border-radius: 3px;
 
 	&.checked {
-		border-color: #46A758;
+		border-color: var(--success-bright);
 	}
 
 	&.err {
-		border-color: #E5484D;
+		border-color: var(--danger-bright);
 	}
 }

static/css/resource.css

@@ -0,0 +1,107 @@
+.actions {
+	display: flex;
+	gap: 0.5rem;
+
+	& form {
+		display: flex;
+		min-width: 80px;
+	}
+
+	& button {
+		flex: 1;
+
+		&.danger {
+			background-color: var(--danger-bg);
+			border-color: var(--danger-bright);
+			color: var(--danger-bright);
+
+			&:hover {
+				border-color: var(--link);
+				color: var(--link);
+				background-color: var(--danger-bright);
+			}
+		}
+	}
+
+	&.big button {
+		font-size: 14pt;
+		padding: 8px 20px;
+	}
+}
+
+
+dd~dt,
+dd~dd {
+	border-top: 1px solid #262A65;
+}
+
+dd[data-state] {
+	background-color: var(--table-bg);
+}
+
+dd[data-state="running"] {
+	background-color: var(--success-bg);
+	color: var(--success-text);
+}
+
+dd[data-state="stopped"],
+dd[data-state="exited"],
+dd[data-state="dead"] {
+	background-color: var(--danger-bg);
+	color: var(--danger-text);
+}
+
+dt,
+dd {
+	box-sizing: border-box;
+	padding: 4px;
+}
+
+
+dt {
+	padding-bottom: 0;
+}
+
+dd {
+	background-color: #171625;
+	padding: 4px 8px;
+	word-break: break-all;
+}
+
+dl.table {
+	border: 1px solid #3D3E82;
+	background-color: var(--table-bg);
+	margin: 0;
+
+	& dt {
+		float: left;
+		width: 25%;
+	}
+
+	& dd {
+		margin-left: 25%;
+		border-left: 1px dotted #3D3E82;
+	}
+
+
+	& dd:after {
+		content: "";
+		display: block;
+		clear: both;
+	}
+}
+
+dl.list {
+	border: 1px solid #3D3E82;
+	background-color: var(--table-bg);
+	margin: 0;
+	border-top: 0;
+
+	& dd {
+		margin: 0;
+	}
+
+	& dt {
+		padding: 4px 8px;
+	}
+}

static/css/screen.css

@@ -2,6 +2,11 @@
 	--background: #13131E;
 	--bg-raised: #171625;
 	--text: #E0DFFE;
+	--text-accent: #E796F3;
+
+	--table-border-color: #5958B1;
+	--table-border: 3px solid var(--table-border-color);
+	--table-bg: #202248;
 
 	--link: #FFC53D;
 	--link-hover: #e28d0e;
@@ -11,6 +16,14 @@
 	--button-border: #5B5BD6;
 	--button-bg-hover: #7E451D;
 
+	--success-bright: #46A758;
+	--success-bg: #113B29;
+	--success-text: #3DD68C;
+
+	--danger-bright: #E5484D;
+	--danger-bg: #500F1C;
+	--danger-text: #FF9592;
+
 	background-color: var(--background);
 	color: var(--text);
 	font-family: Inter, sans-serif;
@@ -64,7 +77,6 @@ nav {
 	}
 }
 
-
 main {
 	padding: 10px;
 }
@@ -92,7 +104,7 @@ button {
 
 table.table {
 	background-color: var(--bg-raised);
-	border: 3px solid #5958B1;
+	border: var(--table-border);
 	border-radius: 3px;
 
 	& th,
@@ -105,7 +117,7 @@ table.table {
 	}
 
 	& thead {
-		background-color: #202248;
+		background-color: var(--table-bg);
 	}
 }
 
@@ -116,7 +128,7 @@ table.table {
 
 input,
 textarea {
-	border: 1px solid #5958B1;
+	border: 1px solid var(--table-border-color);
 	border-radius: 3px;
 	background-color: var(--bg-raised);
 	color: var(--text);