PHP Web interface for generating QR codes
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

371 lines
5.4 KiB

/*
Ce fichier fait partie de LibreQR.
LibreQR est un logiciel libre ; vous pouvez le redistribuer ou le modifier
suivant les termes de la GNU Affero General Public License
telle que publiée par la Free Software Foundation ; soit la version 3
de la licence, soit (à votre gré) toute version ultérieure.
LibreQR est distribué dans l'espoir qu'il sera utile,
mais SANS AUCUNE GARANTIE ; sans même la garantie tacite de
QUALITÉ MARCHANDE ou d'ADÉQUATION à UN BUT PARTICULIER.
Consultez la GNU Affero General Public License pour plus de détails.
Vous devez avoir reçu une copie de la GNU Affero General Public License
en même temps que LibreQR ; si ce n'est pas le cas,
consultez <https://www.gnu.org/licenses/>.
*/
* {
font-family: "Ubuntu", sans-serif;
scrollbar-color: @text @bg;
scrollbar-width: auto;
}
a {
color: @text;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
p {
margin: 10px;
}
#firstWrapper {
display: flex;
flex-direction: row;
}
#menusDeroulants {
text-align: center;
margin-left: 20px;
}
#qrCode {
max-width: 480px;
}
.centered {
text-align: center;
}
.button {
padding: 3px 10px 3px 10px;
text-decoration: none;
}
form {
flex-grow: 1;
margin-bottom: 30px;
}
main {
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
width: 814px;
height: 99%;
}
body {
margin: 18px;
background-color: @bg;
color: @text;
font-weight: normal;
font-size: 20px;
height: 99%;
}
html {
height: 97%;
}
header {
text-align: center;
padding: 0px;
margin: 0px;
height: 64px;
}
#logo {
width: 64px;
height: 64px;
}
#titles {
margin-left: 20px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0px;
font-weight: normal;
}
h1 {
font-size: 33px;
}
h2 {
font-size: 22px;
}
#linkTitles {
text-align: left;
justify-content: center;
text-decoration: none;
display: flex;
flex-direction: row;
}
#showOnlyQR {
margin-top: 30px;
}
.param {
padding: 10px;
padding-left: 0px;
margin-left: 0px;
padding-right: 0px;
margin-right: 0px;
}
.inputColorContainer {
display: flex;
flex-direction: row;
justify-content: center;
}
::selection {
color: @bg;
background-color: @text;
}
label[for=txt] {
padding-left: 22px;
}
#colors {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
& .param {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
}
}
.metaText {
color: @secondaryText;
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
padding: 6px;
& a, a:visited {
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
color: @secondaryText;
text-decoration: underline;
}
&:hover, &:hover a {
color: @text;
}
}
footer {
font-size: 14px;
padding-top: 20px;
text-align: left;
}
header, footer {
flex-shrink: 0;
}
#info {
font-size: 16px;
bottom: 20px;
right: 20px;
margin: 0px;
& h3 {
font-size: 20px;
font-weight: normal;
padding-bottom: 10px;
}
}
/* Inputs */
#redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
border: 2px @border solid;
border-radius: 10px;
font-size: 20px;
padding-left: 10px;
font-weight: normal;
color: @text;
transition: border 0.1s linear;
background-color: @bgField;
margin-top: 8px;
&:hover {
border: 2px @borderHover solid;
}
&:focus {
border: 2px @borderFocus solid;
outline: none;
}
}
#redondancy, #size, #margin {
background-color: @bgField;
width: 250px;
height: 40px;
}
#txt {
background-color: @bgTextField;
color: @text;
padding: 10px;
margin: 10px;
width: 500px;
scrollbar-color: @text @bgTextField;
scrollbar-width: auto;
}
input[type=submit] {
font-size: 28px;
padding: 10px;
padding-left: 14px;
padding-right: 14px;
}
#txt::placeholder {
color: @secondaryText;
opacity: 1;
font-family: "Ubuntu", sans-serif;
font-weight: normal;
font-size: 1em;
}
input[type=color] {
height: 60px;
width: 84px;
padding: 5px;
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) {
main {
width: auto;
}
#firstWrapper {
flex-direction: column;
}
body {
margin: 10px;
}
#txt {
width: 92%;
}
}
@media (max-width: 500px) { // Mobile version
#colors {
flex-direction: column;
}
h1 {
font-size: 28px;
padding-top: 6px;
}
#txt {
width: 85%;
}
#qrCode {
max-width: 94%;
}
}
@media (max-width: 415px) {
h1 {
padding: 0px;
}
}