test.less (2671B)
1 // TODO : dans galerie les images ne sont pas centrées verticalement dans leur boîte. 2 3 @largeur-contenu: 63em; 4 5 /* Couleurs principales */ 6 @base: #ffff00; 7 @base2: #ba7500; 8 @fg: #000000; 9 @bg: #ffffff; 10 @couleur-important: #ff0000; 11 12 /* Couleurs dérivées */ 13 @softbase: (2*@base + @bg) / 3; 14 @softbase2: (4*@bg + @base) / 5; 15 @bodybg: @softbase2; 16 @demi: (@fg + @bg) / 2; 17 18 .nospace { 19 margin: 0; 20 padding: 0; 21 } 22 23 .lien-monochrome (@couleur: @fg) { 24 color: @couleur; 25 &:link {color: @couleur;} 26 &:visited {color: @couleur;} 27 &:hover {color: @couleur;} 28 &:active {color: @couleur;} 29 } 30 31 a { 32 &:visited { 33 color: @base2; 34 } 35 &:hover, &:active { 36 color: (@base2 + @fg) / 2; 37 } 38 } 39 40 body { 41 .nospace; 42 background-color: @bodybg; 43 color: @fg; 44 } 45 46 h1 { 47 background-color: @softbase; // @softbase2 48 border-bottom: thick solid @fg; 49 margin: 0 0 0.8em 0; 50 padding: 0.2em 1em; 51 a { 52 .lien-monochrome(@fg); 53 text-decoration: none; 54 } 55 } 56 57 h2 { 58 margin-top: 0; 59 60 input { 61 font-size: x-large; 62 font-weight: bold; 63 } 64 } 65 66 .prochain-evenement { 67 color: @couleur-important; 68 background-color: (6*@bg + @couleur-important) / 7; 69 border: thick solid @couleur-important; 70 margin: 0 5em 1em; 71 padding: 1em; 72 text-align: center; 73 } 74 75 .site { 76 &.connexion { 77 a { 78 .lien-monochrome(@fg); 79 } 80 position: absolute; 81 top: 0; 82 right: 0; 83 padding: 0.1em 0.2em; 84 } 85 86 &.navigation { 87 background-color: @softbase; 88 border: thick solid @fg; 89 float: left; 90 padding: 0em 0em; 91 margin: 0 1em 1em; 92 text-align: center; 93 94 ul { 95 .nospace; 96 } 97 li:hover { 98 background-color: @fg; 99 a { 100 color: @bg; 101 } 102 } 103 li { 104 border-bottom: thin solid @fg; 105 &:last-child { 106 border:none; 107 } 108 padding: 0.5em 1.5em; 109 list-style-type: none; 110 111 } 112 a { 113 color: black; 114 } 115 } 116 117 &.contenu { 118 max-width: @largeur-contenu; 119 float: left; 120 } 121 } 122 123 .galerie { 124 &.infos { 125 border-bottom: thick solid @demi; 126 padding-bottom: 1em; 127 } 128 &.photos { 129 ul { 130 .nospace; 131 li { 132 list-style-type: none; 133 float: left; 134 margin: 1em; 135 padding: 0; 136 width: 9em; 137 text-align: center; 138 a { 139 .lien-monochrome; 140 display:block; 141 } 142 } 143 } 144 .miniature { 145 border: thin solid @demi; 146 display:block; 147 height: 70px; 148 img { 149 border: none; 150 } 151 } 152 li:hover { 153 .miniature { 154 border-color: (@base2)/2; 155 background-color: (@bg*3 + @base2)/4; 156 } 157 .titre { 158 color: @base2; 159 } 160 } 161 .titre { 162 display:block; 163 padding: 0.2em 0.4em; 164 height: 5em; 165 } 166 } 167 } 168 169 .admin.permissions.regles { 170 width: 100%; 171 } 172 173 .clearboth { 174 clear: both; 175 } 176 177 textarea { 178 width: @largeur-contenu / 2; 179 margin: 1em 0; 180 /* font-size: large; */ /* Activer pour plus d'accessibilité. */ 181 }