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