css refactor

This commit is contained in:
Hamcha 2023-11-25 01:29:19 +01:00
parent 3f62e8302e
commit ddb4ec4a5c
3 changed files with 128 additions and 9 deletions

View file

@ -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);
}
}

107
static/css/resource.css Normal file
View file

@ -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;
}
}

View file

@ -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);