@fond: #2D2F34; @fondChamp: #31363B; @fondChampTexte: #232629; @bordure: #5f5f5f; @bordureHover: #808080; @bordureFocus: #b6b6b6; @texte: white; @texteLienCodeSource: #868686; * { font-family: Ubuntu, sans-serif; } html { text-align: center; background-color: @fond; color: @texte; } a { color: @texte; text-decoration: none; } textarea { width: 66%; height: 400px; background-color: @fond; color: @texte; font-size: 20px; padding-top: 6px; padding-left: 10px; } input[type=submit] { background-color: @fondChamp; color: @texte; width: 20%; height: 40px; } input[type=submit], textarea { border: 2px @bordure solid; border-radius: 10px; transition: all 0.3s ease-out; &:hover { border: 2px @bordureHover solid; } &:focus { border: 2px @bordureFocus solid; } } .lienCodeSource { color: @texteLienCodeSource; font-size: 12px; margin-bottom: -20px; text-align: right; transition: color 0.2s; &:hover { color: lighten(@texteLienCodeSource, 10%); } } footer { position: fixed; top: 5px; right: 5px; } @media (max-width: 640px) { // Version mobile textarea { width: 85%; } }