Mercurial > wikked

comparison static/css/wikked.less @ 89:b03f083c3a29

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Lots of HTML/JS/Less changes: - more semantic and simple markup, no useless grid. - simpler colour schemes (TODO: colours are ugly, tune them). - better error handling in Backbone views. - fixed some view bugs. - changed new/modified page alert to a ribbon with tooltip.
author Ludovic Chabant <ludovic@chabant.com>
date Sat, 06 Apr 2013 18:07:31 -0700
parents acc615617fdf
children 315c32a4ce58
comparison
equal deleted inserted replaced
88:a5a3d454eac9 89:b03f083c3a29
2 @import "/bootstrap/less/bootstrap.less"; 2 @import "/bootstrap/less/bootstrap.less";
3 @import "/css/syntax.css"; 3 @import "/css/syntax.css";
4 @import "/css/wmd.css"; 4 @import "/css/wmd.css";
5 5
6 // Constants 6 // Constants
7 @wikiLinkColor: #12f; 7 @colorBlue: #0F1FFF;
8 @wikiLinkColorHover: #36f; 8 @colorBlueDark: #1D3982;
9 @wikiLinkColorMissing: #f12; 9 @colorOrange: #B03500;
10 10 @colorGreen: #B6CC95;
11 @colorBlueDark: #48577D; 11 @colorGreenDark: #496B15;
12 @colorBlueMedium: #7690CF; 12 @colorPage: #FFFFFF;
13 @colorBlueLight: #D9E3FF; 13 @colorFooter: #E5E7FF;
14
15 @colorGrayBlueLight: #D3DCF2;
16 @colorGrayBlueMedium: #9197A6;
17 @colorGrayBlueDark: #43464C;
18
19 @colorCode: #523C37; 14 @colorCode: #523C37;
20 15
21 @pageBackground: white;
22 @pageBackgroundSpecial: #E5D19E;
23 16
24 // Macros 17 // Macros
25 .box-shadow(@style, @c) { 18 .box-shadow(@style, @c) {
26 box-shadow: @style @c; 19 box-shadow: @style @c;
27 -webkit-box-shadow: @style @c; 20 -webkit-box-shadow: @style @c;
33 background: url('../img/gray_jean.png'); 26 background: url('../img/gray_jean.png');
34 //background-image: url(http://basehold.it/i/27); 27 //background-image: url(http://basehold.it/i/27);
35 } 28 }
36 29
37 // Global classes 30 // Global classes
38 a.wiki-link { 31 a {
39 text-decoration: none; 32 text-decoration: none;
40 color: @wikiLinkColor; 33 color: @colorBlue;
41 &:link { color: @wikiLinkColor; } 34 &:link { color: @colorBlue; }
42 &:visited { color: @wikiLinkColor; } 35 &:visited { color: @colorBlue; }
43 &:hover { color: @wikiLinkColorHover; text-decoration: underline; } 36 &:hover { color: @colorBlue; text-decoration: underline; }
44 &:active { color: @wikiLinkColor; } 37 &:active { color: @colorBlue; }
45 } 38 }
46 a.wiki-link.missing { 39 a.wiki-link.missing {
47 color: @wikiLinkColorMissing; 40 color: @colorOrange;
41 &:hover { color: @colorOrange; text-decoration: underline; }
48 } 42 }
49 .decorator { 43 .decorator {
50 text-transform: uppercase; 44 text-transform: uppercase;
51 font-weight: lighter; 45 font-weight: lighter;
52 font-size: 0.7em; 46 font-size: 0.7em;
53 letter-spacing: 0.1em; 47 letter-spacing: 0.1em;
54 color: @colorBlueDark; 48 color: @colorBlue;
55 .rev_id { 49 .rev_id {
56 font-family: @monoFontFamily; 50 font-family: @monoFontFamily;
57 color: @colorCode; 51 }
58 } 52 }
59 } 53 .tooltip {
60 54 font-size: @baseFontSize*0.75;
61 div.alert { 55 }
56 .alert {
62 font-size: @fontSizeSmall; 57 font-size: @fontSizeSmall;
63 } 58 }
64 59
65 .container { 60 // Main classes
66 nav, .meta { 61 .wrapper>nav,
62 .wrapper>footer {
63 color: @grayLight;
64 font-size: @fontSizeSmall;
65 line-height: (@baseLineHeight * 2);
66
67 a {
68 padding: 0 1em;
69 display: inline-block;
70 text-decoration: none;
67 color: @grayLight; 71 color: @grayLight;
68 font-size: @fontSizeSmall; 72 &:link { color: @grayLight; }
69 line-height: (@baseLineHeight * 2); 73 &:visited { color: @grayLight; }
70 a { 74 &:hover { color: @linkColorHover; }
71 padding: 0 1em; 75 &:active { color: @grayLight; }
72 display: inline-block; 76 }
73 text-decoration: none; 77 }
74 color: @grayLight; 78 .wrapper>article {
75 &:link { color: @grayLight; } 79 .box-shadow(0 0 10px, rgb(210, 210, 210));
76 &:visited { color: @grayLight; } 80 background: @colorPage;
77 &:hover { color: @linkColorHover; } 81 overflow: hidden;
78 &:active { color: @grayLight; } 82
79 } 83 header {
80 } 84 background: @colorBlueDark;
81 .page { 85 color: @colorPage;
82 .box-shadow(0 0 10px, rgb(210, 210, 210)); 86 }
83 padding: @baseLineHeight; 87 footer {
84 background: @pageBackground; 88 background: @colorFooter;
85 overflow: hidden; 89 border-top: 1px dashed darken(@colorFooter, 5%);
86 } 90 }
87 .page.special { 91 pre {
88 background: @pageBackgroundSpecial;
89 }
90
91 .page>pre {
92 margin-top: @baseLineHeight; 92 margin-top: @baseLineHeight;
93 } 93 }
94 .meta { 94 }
95 font-size: @fontSizeMini; 95 .wrapper>article>header,
96 } 96 .wrapper>article>section,
97 } 97 .wrapper>article>footer {
98 98 padding: @baseLineHeight;
99 }
100 .wrapper>footer {
101 font-size: @fontSizeMini;
102 }
103 .special>article {
104 background: @colorGreen;
105 }
106 .special>article header {
107 background: @colorGreenDark;
108 }
109 .special>article footer {
110 background: @colorGreen;
111 }
112
113 // Other classes
99 form.form-search { 114 form.form-search {
100 display: inline-block; 115 display: inline-block;
101 margin: 0; 116 margin: 0;
102 117
103 .search-query { 118 .search-query {
104 font-size: @fontSizeSmall; 119 font-size: @fontSizeSmall;
105 height: @fontSizeSmall * 1.5; 120 height: @fontSizeSmall * 1.5;
106 } 121 }
107 } 122 }
108 ul.search-results { 123 ul.search-results {
109 list-style: none; 124 list-style: none;
110 } 125 }
111 126 #page-edit {
112 form.page-edit {
113 textarea { 127 textarea {
114 height: 10em; 128 height: 10em;
115 font-size: @baseFontSize; 129 font-size: @baseFontSize;
116 font-family: @monoFontFamily; 130 font-family: @monoFontFamily;
117 margin-bottom: 0; 131 margin-bottom: 0;
118 border-radius: 0; 132 border-radius: 0;
119 } 133 }
120 } 134 }
121 .wmd-input-wrapper { 135 #wmd-input-wrapper {
122 padding: 1em 0; 136 padding: 1em 0;
123 137
124 .wmd-input-grip { 138 #wmd-input-grip {
125 background: @grayLighter; 139 background: @grayLighter;
126 border: 1px solid @grayLight; 140 border: 1px solid @grayLight;
127 border-width: 0 1px 1px 1px; 141 border-width: 0 1px 1px 1px;
128 height: 12px; 142 height: 12px;
129 cursor: ns-resize; 143 cursor: ns-resize;
130 } 144 }
131 } 145 }
132 .wmd-preview-wrapper { 146 #wmd-preview-wrapper {
133 border: 1px dashed @colorGrayBlueMedium; 147 border: 1px dashed @colorBlueDark;
134 background: @colorGrayBlueLight;
135 148
136 h3 { 149 h3 {
137 margin-left: 1em; 150 margin: 0.5em 1em 0.5em 1em;
138 margin-right: 1em; 151 }
139 margin-bottom: 1em; 152 #wmd-preview {
140 }
141 .wmd-preview {
142 margin: 1em; 153 margin: 1em;
143 background: none; 154 background: none;
144 } 155 }
145 } 156 }
146 #wmd-button-bar li { 157 #wmd-button-bar li {
147 margin-left: 0; 158 margin-left: 0;
148 } 159 }
149 .preview-wiki-meta { 160 .preview-wiki-meta {
150 .meta-name { 161 .meta-name {
151 background: @colorBlueMedium; 162 background: @colorBlueDark;
152 color: #fff; 163 color: @colorPage;
153 padding: 0.2em 0.4em 0.2em 0.6em; 164 padding: 0.2em 0.4em 0.2em 0.6em;
154 border-radius: 0.5em 0 0 0.5em; 165 border-radius: 0.5em 0 0 0.5em;
155 font-variant: small-caps; 166 font-variant: small-caps;
156 letter-spacing: 0.18em; 167 letter-spacing: 0.18em;
157 } 168 }
158 .meta-value { 169 .meta-value {
159 background: @colorGrayBlueDark; 170 background: @colorFooter;
160 color: #fff; 171 color: black;
161 padding: 0.2em 0.6em 0.2em 0.4em; 172 padding: 0.2em 0.6em 0.2em 0.4em;
162 border-radius: 0 0.5em 0.5em 0; 173 border-radius: 0 0.5em 0.5em 0;
163 } 174 }
164 } 175 }
165 .commit-meta { 176 .commit-meta {
166 margin-top: 1em; 177 margin-top: 1em;
167 margin-bottom: 1em; 178 margin-bottom: 1em;
168 } 179 }
169
170 b.match { 180 b.match {
171 padding: 0 0.2em; 181 padding: 0 0.2em;
172 background: #ffeb84; 182 background: #ffeb84;
173 } 183 }
174 184
175 // Page alerts 185 // Page alerts
176 .page .alert { 186 article .alert {
177 float: right; 187 float: right;
178 margin-left: -100%; 188 margin-left: -100%;
179 top: -@baseLineHeight;
180 position: relative; 189 position: relative;
181 width: 50%; 190 width: 50%;
182 -webkit-border-radius: 0; 191 -webkit-border-radius: 0;
183 -moz-border-radius: 0; 192 -moz-border-radius: 0;
184 border-radius: 0; 193 border-radius: 0;
186 195
187 // Corner ribbon 196 // Corner ribbon
188 .makeRibbon(@bgColor) { 197 .makeRibbon(@bgColor) {
189 background-color: @bgColor; 198 background-color: @bgColor;
190 overflow: hidden; 199 overflow: hidden;
191 transform: translate(50%, -@baseLineHeight) translate(-3em,3em) rotate(45deg); 200 transform: translate(50%, 0) translate(-3em, 2.05em) rotate(45deg);
192 -moz-transform: translate(50%, -@baseLineHeight) translate(-3em,3em) rotate(45deg); 201 -moz-transform: translate(50%, 0) translate(-3em, 2.05em) rotate(45deg);
193 -webkit-transform: translate(50%, -@baseLineHeight) translate(-3em,3em) rotate(45deg); 202 -webkit-transform: translate(50%, 0) translate(-3em, 2.05em) rotate(45deg);
194 box-shadow: 0 0 1em #888; 203 box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
195 -moz-box-shadow: 0 0 1em #888; 204 -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
196 -webkit-box-shadow: 0 0 1em #888; 205 -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
206 float: right;
197 } 207 }
198 .makeRibbonContent(@borderColor, @textColor) { 208 .makeRibbonContent(@borderColor, @textColor) {
199 border: 1px solid @borderColor; 209 border: 1px solid @borderColor;
200 color: @textColor; 210 color: @textColor;
201 display: block; 211 display: block;
202 margin: 0.05em 0 0.05em 0; 212 margin: 0.05em 0 0.05em 0;
203 padding: 0.5em 3.5em; 213 padding: 0.5em 5em;
204 text-align: center; 214 text-align: center;
205 text-shadow: 0 0 0.5em #444; 215 text-shadow: 0 0 0.5em rgba(1, 1, 1, 0.2);
206 } 216 }
207 .ribbon { 217 .ribbon {
208 .makeRibbon(#a00); 218 .makeRibbon(lighten(@colorOrange, 10%));
209 margin-bottom: @baseFontSize * -2.6 - 4px; 219 float: right;
210 220
211 .ribbon-inner { 221 .ribbon-inner {
212 .makeRibbonContent(#faa, #fff); 222 .makeRibbonContent(@colorOrange, @colorPage);
213 } 223 a { color: #fff; text-decoration: none; }
214 } 224 }
225 }