/* 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 . */ * { font-family: "Ubuntu", sans-serif; scrollbar-color: @text @bg; scrollbar-width: auto; } a { color: @text; text-decoration: underline; &:hover { text-decoration: none; } } #firstWrapper { display: flex; flex-direction: row; } #menusDeroulants { text-align: center; margin-left: 20px; } #qrCode { max-width: 480px; } .centrer { text-align: center; } .bouton { padding: 3px 10px 3px 10px; text-decoration: none; } form { display: block; margin-bottom: 30px; } .center { display: flex; flex-direction: column; justify-content: center; margin-left: auto; margin-right: auto; width: 814px; } body { margin: 18px; background-color: @bg; color: @text; font-weight: normal; font-size: 20px; & h1 { color: @text; text-decoration: none; } } label { font-size: 20px; } header { text-align: center; padding: 0px; margin: 0px; height: 64px; } #logo { width: 64px; height: 64px; } #titres { margin-left: 20px; } h1, h2, h3, h4, h5, h6 { margin: 0px; font-weight: normal; } h1 { font-size: 33px; } h2 { font-size: 22px; } #lienTitres { text-align: left; justify-content: center; text-decoration: none; display: flex; flex-direction: row; } #showOnlyQR { margin-top: 30px; } #titre { text-align: center; justify-content: center; } .param { padding: 10px; padding-left: 0px; margin-left: 0px; padding-right: 0px; margin-right: 0px; } .conteneurInputColor { 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; text-align: left; transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0); position: fixed; width: 400px; & a:link { transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0); color: @secondaryText; text-decoration: underline; } &:hover, &:hover a:link { color: @text; } } footer { font-size: 14px; bottom: 20px; left: 20px; } #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], .bouton { 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; } /* Infobulle */ #helpImg { width: 20px; height: 20px; margin-bottom: -3px; margin-left: 5px; } .boutonAide { height: 0px; width: 0px; color: @secondaryText; cursor: help; font-size: 0.8em; } .conteneurAide .contenuAide { 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; } } .conteneurAide:hover .contenuAide, .conteneurAide:focus-within .contenuAide { transform: scale(1) rotate(0); opacity: 1; } /* Media queries */ @media (max-width: 1400px) { .metaText { width: 250px; } } @media (max-width: 1050px) { #metaTexts { display: flex; flex-direction: row; } .metaText { width: 100%; position: static; font-size: 20px; } #info { color: @text; margin-bottom: 20px; padding-top: 30px; font-size: 20px; & a:link { color: @text; } } } @media (max-width: 850px) { #metaTexts { flex-direction: column; width: 480px; justify-content: center; margin-left: auto; margin-right: auto; } .center { width: auto; } #firstWrapper { flex-direction: column; } body { margin: 10px; } #txt { width: 92%; } } @media (max-width: 500px) { // Version mobile #metaTexts { width: auto; } #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; } }