css refactor
This commit is contained in:
parent
3f62e8302e
commit
ddb4ec4a5c
3 changed files with 128 additions and 9 deletions
|
@ -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
107
static/css/resource.css
Normal 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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
|
|
Reference in a new issue