libreqr/style.less

410 lines
5.9 KiB
Plaintext
Raw Normal View History

/*
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/>.
*/
2019-08-13 21:17:08 +02:00
* {
font-family: "Ubuntu", sans-serif;
scrollbar-color: @text @bg;
scrollbar-width: auto;
2019-01-26 14:23:19 +01:00
}
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;
}
2019-01-26 14:23:19 +01:00
.centrer {
text-align: center;
2019-01-26 14:23:19 +01:00
}
2019-08-13 21:17:08 +02:00
.bouton {
2019-01-26 14:23:19 +01:00
padding: 3px 10px 3px 10px;
text-decoration: none;
2019-01-26 14:23:19 +01:00
}
form {
display: block;
margin-bottom: 30px;
2019-01-26 14:23:19 +01:00
}
.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;
2019-01-26 14:23:19 +01:00
font-weight: normal;
font-size: 20px;
2019-08-13 21:17:08 +02:00
& h1 {
color: @text;
text-decoration: none;
}
2019-01-26 14:23:19 +01:00
}
label {
font-size: 20px;
2019-01-26 15:17:36 +01:00
}
2019-02-24 19:11:31 +01:00
header {
text-align: center;
2019-01-26 15:17:36 +01:00
padding: 0px;
margin: 0px;
height: 64px;
2019-02-24 19:11:31 +01:00
}
#logo {
width: 64px;
height: 64px;
}
#titres {
margin-left: 20px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0px;
font-weight: normal;
}
h1 {
padding: auto;
font-size: 33px;
}
h2 {
font-size: 22px;
}
#lienTitres {
text-align: left;
justify-content: center;
text-decoration: none;
2019-02-24 19:11:31 +01:00
display: flex;
2019-08-13 21:17:08 +02:00
flex-direction: row;
2019-02-24 19:11:31 +01:00
}
#showOnlyQR {
margin-top: 30px;
2019-01-26 14:23:19 +01:00
}
.param {
padding: 10px;
2019-01-26 15:17:36 +01:00
padding-left: 0px;
margin-left: 0px;
padding-right: 0px;
margin-right: 0px;
2019-01-26 14:23:19 +01:00
}
2019-08-13 21:17:08 +02:00
.conteneurInputColor {
display: flex;
flex-direction: row;
justify-content: center;
}
::selection {
color: @bg;
background-color: @text;
2019-08-13 21:17:08 +02:00
}
label[for=txt] {
padding-left: 22px;
2019-08-13 21:17:08 +02:00
}
#colors {
2019-08-13 21:17:08 +02:00
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%;
}
2019-08-13 21:17:08 +02:00
}
.metaText {
color: @secondaryText;
text-align: left;
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
position: fixed;
width: 400px;
2019-08-13 21:17:08 +02:00
& a:link {
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
color: @secondaryText;
text-decoration: underline;
2019-08-13 21:17:08 +02:00
}
&:hover, &:hover a:link {
color: @text;
2019-08-13 21:17:08 +02:00
}
}
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;
}
}
2019-08-13 21:17:08 +02:00
/* Inputs */
#redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .bouton {
border: 2px @border solid;
2019-08-13 21:17:08 +02:00
border-radius: 10px;
font-size: 20px;
padding-left: 10px;
font-weight: normal;
color: @text;
2019-08-13 21:17:08 +02:00
transition: border 0.1s linear;
background-color: @bgField;
2019-08-13 21:17:08 +02:00
margin-top: 8px;
&:hover {
border: 2px @borderHover solid;
2019-08-13 21:17:08 +02:00
}
&:focus {
border: 2px @borderFocus solid;
outline: none;
2019-08-13 21:17:08 +02:00
}
}
#redondancy, #size, #margin {
background-color: @bgField;
2019-08-13 21:17:08 +02:00
width: 250px;
height: 40px;
}
#txt {
background-color: @bgTextField;
color: @text;
padding: 10px;
margin: 10px;
2019-08-13 21:17:08 +02:00
width: 500px;
scrollbar-color: @text @bgTextField;
scrollbar-width: auto;
2019-08-13 21:17:08 +02:00
}
input[type=submit] {
font-size: 28px;
padding: 10px;
padding-left: 14px;
padding-right: 14px;
2019-08-13 21:17:08 +02:00
}
#txt::placeholder {
color: @secondaryText;
opacity: 1;
font-family: "Ubuntu", sans-serif;
2019-03-28 22:44:06 +01:00
font-weight: normal;
font-size: 1em;
}
2019-08-13 21:17:08 +02:00
input[type=color] {
height: 60px;
width: 84px;
2019-08-13 21:17:08 +02:00
padding: 5px;
border: 2px @border solid;
2019-08-13 21:17:08 +02:00
}
2019-01-26 14:23:19 +01:00
/* Infobulle */
2019-08-13 21:17:08 +02:00
svg {
width: 20px;
height: 20px;
margin-bottom: -3px;
margin-left: 5px;
2019-08-13 21:17:08 +02:00
}
.boutonAide {
height: 0px;
width: 0px;
color: @text;
2019-08-13 21:17:08 +02:00
cursor: help;
}
2019-01-26 14:23:19 +01:00
.conteneurAide .contenuAide {
position: absolute;
transform: scale(0) rotate(-12deg);
color: @text;
background: @bgHelp;
2019-01-26 14:23:19 +01:00
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.5);
2019-01-26 14:23:19 +01:00
margin-top: 23px;
margin-left: -35px;
transition: all .25s;
opacity: 0;
max-width: 500px;
font-size: 20px;
text-align: left;
@media (max-width: 500px) {
width: 300px;
}
2019-01-26 14:23:19 +01:00
}
.conteneurAide:hover .contenuAide, .conteneurAide:focus-within .contenuAide {
2019-01-26 14:23:19 +01:00
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;
}
footer {
margin-top: 50px;
}
#info {
color: @text;
margin-bottom: 20px;
padding-top: 30px;
& 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;
}
2019-01-26 14:23:19 +01:00
}