Algov/qrcode.chapril.org
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Don't resize elements on hover and focus

Browse Source
This commit is contained in:
Miraty 2022-01-10 18:22:17 +01:00
parent 6abf28f9f1
commit d65cace611
1 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
style.less
View File

@ -106,7 +106,10 @@ summary {
} }
#qrCode { #qrCode {
max-width: 480px; max-width: 94%;
width: auto;
height: auto;
@width: 2px; @width: 2px;
@lenght: 16px; @lenght: 16px;
padding: @width; padding: @width;
@ -310,7 +313,7 @@ footer {
padding-left: 10px; padding-left: 10px;
font-weight: normal; font-weight: normal;
transition: border-color 0.1s ease; transition: border-color 0.1s ease;
margin-top: 8px; margin: 6px;
@media @light { @media @light {
color: @text-light; color: @text-light;
@ -325,7 +328,8 @@ footer {
} }
&:hover { &:hover {
border-width: 2px; border-width: 3px;
margin: 5px;
border-style: solid; border-style: solid;
@media @light { @media @light {
@ -338,7 +342,8 @@ footer {
} }
&:focus { &:focus {
border-width: 2px; border-width: 4px;
margin: 4px;
border-style: solid; border-style: solid;
outline: none; outline: none;
@ -355,6 +360,24 @@ footer {
#redondancy { #redondancy {
width: 250px; width: 250px;
height: 44px; height: 44px;
&:hover {
height: 46px;
}
&:focus {
height: 48px;
}
}
input[type=color] {
height: 60px;
width: 84px;
padding: 5px;
&:hover {
height: 62px;
}
&:focus {
height: 64px;
}
} }
#size, #margin { #size, #margin {
@ -375,7 +398,6 @@ footer {
#txt { #txt {
padding: 10px; padding: 10px;
margin: 10px;
width: 500px; width: 500px;
scrollbar-width: auto; scrollbar-width: auto;
@ -413,22 +435,6 @@ input[type=submit] {
} }
} }
input[type=color] {
height: 60px;
width: 84px;
padding: 5px;
border-width: 2px;
border-style: solid;
@media @light {
border-color: @border-light;
}
@media @dark {
border-color: @border-dark;
}
}
/* Media queries */ /* Media queries */
@media (max-width: 850px) { @media (max-width: 850px) {
@ -457,17 +463,11 @@ input[type=color] {
width: 85%; width: 85%;
} }
#qrCode {
max-width: 94%;
}
} }
a[download]::before { a[download]::before {
content: "💾 "; content: "💾 ";
filter: drop-shadow(1px 1px white) filter: drop-shadow(-1px 1px 1px white)
drop-shadow(-1px -1px white) drop-shadow(1px -1px 1px white);
drop-shadow(-1px 1px white)
drop-shadow(1px -1px white);
} }