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 c6659cffd9
commit 58862f32a5
8 changed files with 40 additions and 27 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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