Make UI more consistent

This commit is contained in:
Anders Pitman 2020-10-17 09:19:59 -06:00
parent 18e09120a7
commit ca89553354
2 changed files with 26 additions and 19 deletions

View File

@ -14,3 +14,5 @@
is wrong when domain stuff breaks.
* Responses to unauthorized requests are leaking information about the current
tunnels through the genereated CSS.
* The act of refreshing a page can delete tunnels created by other UI
sessions, I think because it has local CSS checkbox state.

View File

@ -15,17 +15,21 @@ main {
}
#menu-label {
color: var(--background-color);
background: var(--main-color);
font-size: 18px;
font-weight: bold;
display: block;
/*width: 100%;*/
border: 1px solid black;
border: 2px solid var(--main-color);
cursor: pointer;
padding: 5px;
padding: .7em;
user-select: none;
}
#menu-label:hover {
background: var(--hover-color);
color: var(--main-color);
background: var(--background-color);
border: 2px solid var(--main-color);
}
.menu {
@ -33,21 +37,29 @@ main {
flex-direction: column;
position: absolute;
background: #fff;
border: 1px solid black;
border: 1px solid var(--main-color);
/*min-width: 256px;*/
}
.menu-item {
border-bottom: 1px solid black;
padding: 5px;
font-weight: bold;
border-bottom: 1px solid var(--main-color);
padding: .7em 2em;
text-decoration: none;
}
.menu-item:hover {
background: var(--hover-color);
}
.menu-item:any-link {
color: #000;
color: var(--main-color);
}
.active-tab.menu-item:any-link {
color: #fff;
}
.active-tab.menu-item {
background: var(--main-color);
}
.toggle {
display: none;
@ -60,21 +72,19 @@ main {
display: flex;
}
#menu-toggle:checked ~ #menu-label {
color: #fff;
background: #000;
}
.content {
border: 1px solid black;
border: 1px solid var(--main-color);
}
.button {
padding: .5em 1em;
margin: 5px;
border: 2px solid #555555;
border: 2px solid var(--main-color);
border-radius: .5em;
color: #fff;
background-color: #555555;
background-color: var(--main-color);
text-decoration: none;
user-select: none;
cursor: pointer;
@ -87,7 +97,7 @@ main {
.button:hover {
color: #555555;
background-color: #fff;
border: 2px solid #555555;
border: 2px solid var(--main-color);
}
.button-row {
@ -109,7 +119,7 @@ main {
.list-item {
padding: 5px;
border-bottom: 1px solid black;
border-bottom: 1px solid var(--main-color);
display: flex;
justify-content: space-between;
align-items: center;
@ -135,11 +145,6 @@ main *:target {
display: flex;
}
.active-tab.menu-item:any-link {
color: #fff;
background: #000;
}
.confirm-dialog {
display: none;
}