fix stlye sheet scoping,

imrpove some styling

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-05 23:35:11 +00:00
parent 31042464a4
commit b552026d81
8 changed files with 40 additions and 27 deletions

View File

@ -11,6 +11,8 @@
</head>
<body>
<header>
<h1>tronnet</h1>
<hr>
<nav>
<a href="index.html">INSTANCES</a>
<a href="account.html" aria-current="true">ACCOUNT</a>

View File

@ -12,8 +12,11 @@
</head>
<body>
<header>
<h1>tronnet</h1>
<hr>
<nav>
<a href="index.html" aria-current="true">INSTANCES</a>
<a href="account.html">ACCOUNT</a>
<a href="login.html">LOGOUT</a>
</nav>
</header>

View File

@ -2,7 +2,7 @@
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
flex-wrap: nowrap;
gap: 10px;
}

View File

@ -2,47 +2,47 @@ form {
width: fit-content;
}
p {
form p {
text-align: left;
margin: 0px;
}
fieldset {
form fieldset {
border: solid var(--content-txt-color) 1px;
padding: 10px;
margin: 10px;
}
input, label, legend {
form input, form label, form legend {
font-family: monospace;
font-size: 14px;
}
input, select {
form input, form select {
border: solid var(--content-txt-color) 1px;
min-width: fit-content;
}
input:focus, select:focus {
form input:focus, form select:focus {
outline: none;
}
input:disabled, select:disabled {
form input:disabled, form select:disabled {
background-color: var(--form-disabled-color);
}
button {
form button {
margin-top: 0px;
}
.input-grid {
form .input-grid {
display: grid;
column-gap: 10px;
row-gap: 5px;
align-items: center;
}
legend {
form legend {
top: -0.6em;
position: relative;
height: 0;
@ -52,13 +52,13 @@ form img {
width: 16px;
}
hr {
form hr {
width: 100%;
border: none;
border-top: solid var(--content-txt-color) 1px;
}
.last-item {
form .last-item {
width: 100%;
display: flex;
justify-content: flex-end;

View File

@ -31,15 +31,17 @@ header, footer {
background-color: var(--accent-bkg-color);
color: var(--accent-txt-color);
padding: 20px;
width: 15vw;
min-width: max-content;
max-width: 25ch;
}
header {
grid-area: header;
}
header hr {
margin-top: 20px;
margin-bottom: 20px;
}
main {
grid-area: main;
background-color: var(--content-bkg-color);
@ -62,7 +64,7 @@ nav {
nav a {
color: var(--accent-txt-color);
font-size: xx-large;
font-size: x-large;
text-decoration: none;
position: relative;
padding: 10px;
@ -94,21 +96,23 @@ h1, h2, h3, p {
}
h1 {
font-size: xxx-large;
text-align: center;
margin: 0px;
}
h2 {
font-size: xx-large;
text-align: center;
}
h2 {
h3 {
font-size: x-large;
text-align: center;
}
h3 {
font-size: larger;
text-align: center;
}
p {
font-size: large;
text-align: left;
}

View File

@ -5,24 +5,24 @@ table {
text-align: left;
}
thead {
table thead {
background-color: var(--accent-bkg-color);
color: var(--accent-txt-color);
}
tbody {
table tbody {
background-color: var(--content-bkg-color);
color: var(--content-txt-color);
}
tbody tr:nth-child(even) {
table tbody tr:nth-child(even) {
background-color: #ddd;
}
tbody tr:hover {
table tbody tr:hover {
background-color: #aaa;
}
th, td {
table th, table td {
padding: 5px;
}

View File

@ -26,6 +26,8 @@
</head>
<body>
<header>
<h1>tronnet</h1>
<hr>
<nav>
<a href="index.html" aria-current="true">INSTANCES</a>
<a href="account.html">ACCOUNT</a>

View File

@ -12,6 +12,8 @@
</head>
<body>
<header>
<h1>tronnet</h1>
<hr>
<nav>
<a href="login.html" aria-current="true">LOGIN</a>
</nav>