/* Code publiƩ sous licence Apache 2.0 https://code.antopie.org/miraty/qr */ @font-face { font-family: "ubuntu-dl"; src: url('ubuntu-dl.ttf'); } #redondance, #marge, #texte, #taille { border: 2px @bordure solid; border-radius: 7px; font-size: 20px; padding-left: 10px; font-weight: normal; color: @texteForm; margin-top: 8px; transition: border 0.2s linear; } #redondance, #taille, #marge { background-color: @fondChamp; width: 250px; height: 40px; } #texte { background-color: @fondChampTexte; color: @texteForm; padding-top: 6px; width: 500px; } #menusDeroulants { text-align: center; } #codeQR { max-width: 500px; } #lienCodeQR { text-align: center; } .centrer { text-align: center; } footer { position: absolute; top: 5px; right: 5px; } input[type=submit], .bouton { background-color: @fondChamp; border: 2px @bordure solid; color: @texteForm; padding: 3px 10px 3px 10px; border-radius: 3px; font-size: 1.2em; text-decoration: none; display: inline; transition: border 0.2s linear; } #redondance:hover, #marge:hover, #texte:hover, #taille:hover, input[type=submit]:hover, .bouton:hover { border: 2px @bordureHover solid; } #texte:focus, input[type=submit]:focus, .bouton:focus { border: 2px @bordureFocus solid; } form { display: flex; flex-direction: column; display: inline; padding: 0px; margin: 0px; } html { width: 500px; margin-left: auto; margin-right: auto; background-color: @fond; color: @texte; font-family: "ubuntu", "ubuntu-dl"; font-weight: normal; font-size: 1em; & a { color: @texte; text-decoration: none; } } label { font-size: 20px; margin-bottom: 100px; } .lienCodeSource { color: @texteLienCodeSource; font-size: 12px; margin-bottom: -20px; text-align: right; } header { text-align: center; padding: 0px; margin: 0px; } header > a { display: flex; } h1, #logo { margin: auto; font-size: 35px; } .param { padding: 10px; padding-left: 0px; margin-left: 0px; padding-right: 0px; margin-right: 0px; } @media (max-width: 640px) { // Version mobile html { margin: 10px; width: 100%; } #texte { width: 90%; } h1 { font-size: 25px; } } #logo { width: 48px; } ::placeholder { color: fadeout(@texte, 50%); opacity: 1; font-family: "ubuntu", "ubuntu-dl"; font-weight: normal; font-size: 1em; } /* Infobulle */ .conteneurAide { color: #ccc; text-shadow: 0 -1px 0 black; } .conteneurAide:hover, .conteneurAide:focus { background: rgba(0,0,0,.4); } .conteneurAide .contenuAide { position: absolute; transform: scale(0) rotate(-12deg); color: #FFFFFF; background: rgba(0,0,0,1); padding: 15px; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,.5); margin-top: 23px; margin-left: -35px; transition: all .25s; opacity: 0; } .conteneurAide:hover .contenuAide, .conteneurAide:focus .contenuAide { transform: scale(1) rotate(0); opacity: 1; } .conteneurAide, .conteneurAide:hover { background-color: @fond; text-decoration: none; }