FbIN/libreqr
FbIN/libreqr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use HTML summary/details to display help text

Browse source
This commit is contained in:
Miraty 2021-03-07 19:06:32 +01:00
commit 9944bfbb82
6 changed files with 46 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

80
style.less
View file

@ -30,16 +30,23 @@ p {
margin: 10px;
}
details .helpText {
background-color: @bgHelp;
padding: 5px;
border-radius: 10px;
text-align: left;
}
#menusDeroulants summary {
text-align: center;
margin-left: 20px;
}
#firstWrapper {
display: flex;
flex-direction: row;
}
#menusDeroulants {
text-align: center;
margin-left: 20px;
}
#qrCode {
max-width: 480px;
}
@ -160,20 +167,13 @@ label[for=txt] {
}
.metaText {
color: @secondaryText;
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
color: @text;
padding: 6px;
& a, a:visited {
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
color: @secondaryText;
color: @text;
text-decoration: underline;
}
&:hover, &:hover a {
color: @text;
}
}
footer {
@ -260,58 +260,6 @@ input[type=color] {
border: 2px @border solid;
}
/* Help message */
.helpImg {
width: 22px;
height: 22px;
margin-bottom: -3px;
display: inline-block;
}
.helpButton {
height: 22px;
width: 22px;
color: @secondaryText;
cursor: help;
font-size: 0.8em;
display: inline-block;
}
.helpContainer {
display: inline-block;
margin-left: 5px;
}
.helpContent {
position: absolute;
transform: scale(0) rotate(-12deg);
color: @text;
background: @bgHelp;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.5);
margin-top: 23px;
margin-left: -35px;
transition: all .25s;
opacity: 0;
max-width: 500px;
font-size: 20px;
text-align: left;
@media (max-width: 500px) {
position: fixed;
margin: 5px;
left: 0px;
top: 0px;
}
}
.helpContainer:hover .helpContent, .helpContainer:focus-within .helpContent {
transform: scale(1) rotate(0);
opacity: 1;
}
/* Media queries */
@media (max-width: 850px) {