libreqr/style.less

/*

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;
  }

}