Adjust hover tooltips in settings

pull/311/head
Kevin Payravi 2023-11-03 09:51:41 -05:00
parent 645296fb51
commit 69d12626cb
1 changed files with 27 additions and 7 deletions

View File

@ -85,9 +85,11 @@
gap: 1em; gap: 1em;
padding-bottom: .5rem; padding-bottom: .5rem;
} }
.two-col>div { .two-col>div {
flex: 1; flex: 1;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.two-col>div { .two-col>div {
flex: 100%; flex: 100%;
@ -153,11 +155,13 @@
font-size: .9em; font-size: .9em;
line-height: 1.3em; line-height: 1.3em;
} }
#notificationBannerContainer span { #notificationBannerContainer span {
padding: .5rem 1rem; padding: .5rem 1rem;
display: none; display: none;
} }
#notificationBannerContainer span ~ span[style] {
#notificationBannerContainer span~span[style] {
border-top: 1px solid #005799; border-top: 1px solid #005799;
} }
@ -216,31 +220,38 @@
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
} }
.toggles img { .toggles img {
line-height: 1.2rem; line-height: 1.2rem;
} }
.toggles a img { .toggles a img {
padding-right: .5rem; padding-right: .5rem;
} }
.toggles span { .toggles span {
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.toggles label { .toggles label {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.toggles input { .toggles input {
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
} }
.toggles>div { .toggles>div {
line-height: 2rem; line-height: 2rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0 .5rem; padding: 0 .5rem;
} }
.toggles .inputsContainer { .toggles .inputsContainer {
display: flex; display: flex;
float: right; float: right;
@ -252,14 +263,17 @@
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
background-color: #f5fbff; background-color: #f5fbff;
} }
.togglesHeader span { .togglesHeader span {
text-align: right; text-align: right;
font-style: italic; font-style: italic;
margin-right: 1em; margin-right: 1em;
} }
.togglesHeader img { .togglesHeader img {
cursor: pointer; cursor: pointer;
} }
.togglesHeader .inputsContainer img { .togglesHeader .inputsContainer img {
width: auto; width: auto;
max-width: 17px; max-width: 17px;
@ -283,14 +297,17 @@
top: 0; top: 0;
z-index: 999; z-index: 999;
} }
#togglesKeys button { #togglesKeys button {
all: unset; all: unset;
height: 18px; display: inline-flex;
display: block; vertical-align: middle;
} }
#togglesKeys button:focus { #togglesKeys button:focus {
outline: revert; outline: revert;
} }
#togglesKeys .inputsContainer>div { #togglesKeys .inputsContainer>div {
position: relative; position: relative;
} }
@ -301,18 +318,20 @@
width: 0; width: 0;
height: 0; height: 0;
} }
#togglesDefaults input+label { #togglesDefaults input+label {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url('images/star-off.png'); background-image: url('images/star-off.png');
background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 18px; background-size: 18px;
} }
#togglesDefaults input:checked+label { #togglesDefaults input:checked+label {
background-image: url('images/star-on.png'); background-image: url('images/star-on.png');
} }
#togglesDefaults label { #togglesDefaults label {
cursor: pointer; cursor: pointer;
} }
@ -327,7 +346,7 @@
color: #fff; color: #fff;
background: #000; background: #000;
z-index: 999999; z-index: 999999;
transform: translateX(calc(-100% - 24px)); transform: translateX(calc(-100% - 5px));
top: 30px; top: 30px;
} }
@ -335,6 +354,7 @@
display: flex; display: flex;
width: 150px; width: 150px;
} }
#togglesColumnLabels>div>div>div { #togglesColumnLabels>div>div>div {
flex: 1 1 0; flex: 1 1 0;
font-weight: 600; font-weight: 600;