Un générateur de codes QR en PHP pour le Web. https://qr.antopie.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

413 lines
6.0KB

  1. /*
  2. Ce fichier fait partie de LibreQR.
  3. LibreQR est un logiciel libre ; vous pouvez le redistribuer ou le modifier
  4. suivant les termes de la GNU Affero General Public License
  5. telle que publiée par la Free Software Foundation ; soit la version 3
  6. de la licence, soit (à votre gré) toute version ultérieure.
  7. LibreQR est distribué dans l'espoir qu'il sera utile,
  8. mais SANS AUCUNE GARANTIE ; sans même la garantie tacite de
  9. QUALITÉ MARCHANDE ou d'ADÉQUATION à UN BUT PARTICULIER.
  10. Consultez la GNU Affero General Public License pour plus de détails.
  11. Vous devez avoir reçu une copie de la GNU Affero General Public License
  12. en même temps que LibreQR ; si ce n'est pas le cas,
  13. consultez <https://www.gnu.org/licenses/>.
  14. */
  15. * {
  16. font-family: "Ubuntu", sans-serif;
  17. scrollbar-color: @text @bg;
  18. scrollbar-width: auto;
  19. }
  20. a {
  21. color: @text;
  22. text-decoration: underline;
  23. &:hover {
  24. text-decoration: none;
  25. }
  26. }
  27. #firstWrapper {
  28. display: flex;
  29. flex-direction: row;
  30. }
  31. #menusDeroulants {
  32. text-align: center;
  33. margin-left: 20px;
  34. }
  35. #qrCode {
  36. max-width: 480px;
  37. }
  38. .centrer {
  39. text-align: center;
  40. }
  41. .bouton {
  42. padding: 3px 10px 3px 10px;
  43. text-decoration: none;
  44. }
  45. form {
  46. display: block;
  47. margin-bottom: 30px;
  48. }
  49. .center {
  50. display: flex;
  51. flex-direction: column;
  52. justify-content: center;
  53. margin-left: auto;
  54. margin-right: auto;
  55. width: 814px;
  56. }
  57. body {
  58. margin: 18px;
  59. background-color: @bg;
  60. color: @text;
  61. font-weight: normal;
  62. font-size: 20px;
  63. & h1 {
  64. color: @text;
  65. text-decoration: none;
  66. }
  67. }
  68. label {
  69. font-size: 20px;
  70. }
  71. header {
  72. text-align: center;
  73. padding: 0px;
  74. margin: 0px;
  75. height: 64px;
  76. }
  77. #logo {
  78. width: 64px;
  79. height: 64px;
  80. }
  81. #titres {
  82. margin-left: 20px;
  83. }
  84. h1, h2, h3, h4, h5, h6 {
  85. margin: 0px;
  86. font-weight: normal;
  87. }
  88. h1 {
  89. font-size: 33px;
  90. }
  91. h2 {
  92. font-size: 22px;
  93. }
  94. #lienTitres {
  95. text-align: left;
  96. justify-content: center;
  97. text-decoration: none;
  98. display: flex;
  99. flex-direction: row;
  100. }
  101. #showOnlyQR {
  102. margin-top: 30px;
  103. }
  104. #titre {
  105. text-align: center;
  106. justify-content: center;
  107. }
  108. .param {
  109. padding: 10px;
  110. padding-left: 0px;
  111. margin-left: 0px;
  112. padding-right: 0px;
  113. margin-right: 0px;
  114. }
  115. .conteneurInputColor {
  116. display: flex;
  117. flex-direction: row;
  118. justify-content: center;
  119. }
  120. ::selection {
  121. color: @bg;
  122. background-color: @text;
  123. }
  124. label[for=txt] {
  125. padding-left: 22px;
  126. }
  127. #colors {
  128. display: flex;
  129. flex-direction: row;
  130. justify-content: space-between;
  131. text-align: center;
  132. & .param {
  133. text-align: center;
  134. display: flex;
  135. justify-content: center;
  136. flex-direction: column;
  137. width: 100%;
  138. }
  139. }
  140. .metaText {
  141. color: @secondaryText;
  142. text-align: left;
  143. transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
  144. position: fixed;
  145. width: 400px;
  146. & a:link {
  147. transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
  148. color: @secondaryText;
  149. text-decoration: underline;
  150. }
  151. &:hover, &:hover a:link {
  152. color: @text;
  153. }
  154. }
  155. footer {
  156. font-size: 14px;
  157. bottom: 20px;
  158. left: 20px;
  159. }
  160. #info {
  161. font-size: 16px;
  162. bottom: 20px;
  163. right: 20px;
  164. margin: 0px;
  165. & h3 {
  166. font-size: 20px;
  167. font-weight: normal;
  168. padding-bottom: 10px;
  169. }
  170. }
  171. /* Inputs */
  172. #redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .bouton {
  173. border: 2px @border solid;
  174. border-radius: 10px;
  175. font-size: 20px;
  176. padding-left: 10px;
  177. font-weight: normal;
  178. color: @text;
  179. transition: border 0.1s linear;
  180. background-color: @bgField;
  181. margin-top: 8px;
  182. &:hover {
  183. border: 2px @borderHover solid;
  184. }
  185. &:focus {
  186. border: 2px @borderFocus solid;
  187. outline: none;
  188. }
  189. }
  190. #redondancy, #size, #margin {
  191. background-color: @bgField;
  192. width: 250px;
  193. height: 40px;
  194. }
  195. #txt {
  196. background-color: @bgTextField;
  197. color: @text;
  198. padding: 10px;
  199. margin: 10px;
  200. width: 500px;
  201. scrollbar-color: @text @bgTextField;
  202. scrollbar-width: auto;
  203. }
  204. input[type=submit] {
  205. font-size: 28px;
  206. padding: 10px;
  207. padding-left: 14px;
  208. padding-right: 14px;
  209. }
  210. #txt::placeholder {
  211. color: @secondaryText;
  212. opacity: 1;
  213. font-family: "Ubuntu", sans-serif;
  214. font-weight: normal;
  215. font-size: 1em;
  216. }
  217. input[type=color] {
  218. height: 60px;
  219. width: 84px;
  220. padding: 5px;
  221. border: 2px @border solid;
  222. }
  223. /* Infobulle */
  224. #helpImg {
  225. width: 20px;
  226. height: 20px;
  227. margin-bottom: -3px;
  228. margin-left: 5px;
  229. }
  230. .boutonAide {
  231. height: 0px;
  232. width: 0px;
  233. color: @secondaryText;
  234. cursor: help;
  235. font-size: 0.8em;
  236. }
  237. .conteneurAide .contenuAide {
  238. position: absolute;
  239. transform: scale(0) rotate(-12deg);
  240. color: @text;
  241. background: @bgHelp;
  242. padding: 15px;
  243. border-radius: 10px;
  244. box-shadow: 0 0 10px rgba(0,0,0,.5);
  245. margin-top: 23px;
  246. margin-left: -35px;
  247. transition: all .25s;
  248. opacity: 0;
  249. max-width: 500px;
  250. font-size: 20px;
  251. text-align: left;
  252. @media (max-width: 500px) {
  253. position: fixed;
  254. margin: 5px;
  255. left: 0px;
  256. top: 0px;
  257. }
  258. }
  259. .conteneurAide:hover .contenuAide, .conteneurAide:focus-within .contenuAide {
  260. transform: scale(1) rotate(0);
  261. opacity: 1;
  262. }
  263. /* Media queries */
  264. @media (max-width: 1400px) {
  265. .metaText {
  266. width: 250px;
  267. }
  268. }
  269. @media (max-width: 1050px) {
  270. #metaTexts {
  271. display: flex;
  272. flex-direction: row;
  273. }
  274. .metaText {
  275. width: 100%;
  276. position: static;
  277. font-size: 20px;
  278. }
  279. #info {
  280. color: @text;
  281. margin-bottom: 20px;
  282. padding-top: 30px;
  283. font-size: 20px;
  284. & a:link {
  285. color: @text;
  286. }
  287. }
  288. }
  289. @media (max-width: 850px) {
  290. #metaTexts {
  291. flex-direction: column;
  292. width: 480px;
  293. justify-content: center;
  294. margin-left: auto;
  295. margin-right: auto;
  296. }
  297. .center {
  298. width: auto;
  299. }
  300. #firstWrapper {
  301. flex-direction: column;
  302. }
  303. body {
  304. margin: 10px;
  305. }
  306. #txt {
  307. width: 92%;
  308. }
  309. }
  310. @media (max-width: 500px) { // Version mobile
  311. #metaTexts {
  312. width: auto;
  313. }
  314. #colors {
  315. flex-direction: column;
  316. }
  317. h1 {
  318. font-size: 28px;
  319. padding-top: 6px;
  320. }
  321. #txt {
  322. width: 85%;
  323. }
  324. #qrCode {
  325. max-width: 94%;
  326. }
  327. }
  328. @media (max-width: 415px) {
  329. h1 {
  330. padding: 0px;
  331. }
  332. }