Mercurial > wikked

comparison static/css/wikked.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents 8250c977bc50
children acc615617fdf
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
1 // Includes 1 // Includes
2 @import "/bootstrap/css/bootstrap.min.css"; 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 @baseFontSize: 18px; 7 @wikiLinkColor: #12f;
8 @baseLineHeight: (@baseFontSize * 1.5); 8 @wikiLinkColorHover: #36f;
9 @smallFontSize: 16px; 9 @wikiLinkColorMissing: #f12;
10 @smallerFontSize: 12px;
11
12 @colorNavLink: rgb(128, 128, 128);
13 @colorNavLinkHover: rgb(96, 96, 96);
14 10
15 @colorBlueDark: #48577D; 11 @colorBlueDark: #48577D;
16 @colorBlueMedium: #7690CF; 12 @colorBlueMedium: #7690CF;
17 @colorBlueLight: #D9E3FF; 13 @colorBlueLight: #D9E3FF;
18 14
19 @colorGrayBlueLight: #D3DCF2; 15 @colorGrayBlueLight: #D3DCF2;
20 @colorGrayBlueMedium: #9197A6; 16 @colorGrayBlueMedium: #9197A6;
21 @colorGrayBlueDark: #43464C; 17 @colorGrayBlueDark: #43464C;
22 18
23 @colorGrayLight: #EEE;
24 @colorGrayMedium: #AAA;
25 @colorGrayDark: #666;
26
27 @colorCode: #523C37; 19 @colorCode: #523C37;
28 20
29 @backgroundPage: white; 21 @pageBackground: white;
30 @backgroundPageSpecial: #E5D19E; 22 @pageBackgroundSpecial: #E5D19E;
31 23
32 // Macros 24 // Macros
33 .box-shadow(@style, @c) { 25 .box-shadow(@style, @c) {
34 box-shadow: @style @c; 26 box-shadow: @style @c;
35 -webkit-box-shadow: @style @c; 27 -webkit-box-shadow: @style @c;
38 30
39 // Main tags 31 // Main tags
40 body { 32 body {
41 background: url('../img/gray_jean.png'); 33 background: url('../img/gray_jean.png');
42 //background-image: url(http://basehold.it/i/27); 34 //background-image: url(http://basehold.it/i/27);
43 font-size: @baseFontSize;
44 color: #333;
45 }
46 p {
47 font-size: @baseFontSize;
48 line-height: @baseLineHeight;
49 margin-top: @baseLineHeight;
50 margin-bottom: @baseLineHeight;
51 }
52 h1 {
53 font-size: (@baseFontSize * 2);
54 line-height: (@baseLineHeight * 2);
55 margin-top: @baseLineHeight;
56 margin-bottom: 0;
57 }
58 h2 {
59 font-size: (@baseFontSize * 1.5);
60 line-height: @baseLineHeight;
61 margin-top: @baseLineHeight;
62 margin-bottom: 0;
63 }
64 h3 {
65 font-size: (@baseFontSize * 1.2);
66 line-height: @baseLineHeight;
67 margin-top: @baseLineHeight;
68 margin-bottom: 0;
69 }
70 h4 {
71 font-size: @baseFontSize;
72 line-height: @baseLineHeight;
73 margin-top: @baseLineHeight;
74 margin-bottom: 0;
75 }
76 h5 {
77 font-size: (@baseFontSize / 1.1);
78 line-height: @baseLineHeight;
79 margin-top: @baseLineHeight;
80 margin-bottom: 0;
81 }
82 h6 {
83 font-size: (@baseFontSize / 1.2);
84 line-height: @baseLineHeight;
85 margin-top: @baseLineHeight;
86 margin-bottom: 0;
87 }
88 pre {
89 margin-top: @baseLineHeight;
90 margin-bottom: @baseLineHeight;
91 }
92 sup, sub {
93 line-height: 0;
94 }
95 li {
96 line-height: @baseLineHeight;
97 } 35 }
98 36
99 // Global classes 37 // Global classes
100 a.wiki-link { 38 a.wiki-link {
101 color: #12f;
102 text-decoration: none; 39 text-decoration: none;
103 &:link { color: #12f; } 40 color: @wikiLinkColor;
104 &:visited { color: #12f; } 41 &:link { color: @wikiLinkColor; }
105 &:hover { color: #36f; } 42 &:visited { color: @wikiLinkColor; }
106 &:active { color: #12f; } 43 &:hover { color: @wikiLinkColorHover; text-decoration: underline; }
44 &:active { color: @wikiLinkColor; }
107 } 45 }
108 a.wiki-link.missing { 46 a.wiki-link.missing {
109 color: #f12; 47 color: @wikiLinkColorMissing;
110 } 48 }
111 .decorator { 49 .decorator {
112 text-transform: uppercase; 50 text-transform: uppercase;
113 font-weight: lighter; 51 font-weight: lighter;
114 font-size: 0.7em; 52 font-size: 0.7em;
115 letter-spacing: 0.1em; 53 letter-spacing: 0.1em;
116 color: @colorBlueDark; 54 color: @colorBlueDark;
117 .rev_id { 55 .rev_id {
118 font-family: monospace; 56 font-family: @monoFontFamily;
119 color: @colorCode; 57 color: @colorCode;
120 } 58 }
121 } 59 }
122 60
61 div.alert {
62 font-size: @fontSizeSmall;
63 }
64
123 .container { 65 .container {
124 nav, .meta { 66 nav, .meta {
125 color: @colorNavLink; 67 color: @grayLight;
126 font-size: @smallFontSize; 68 font-size: @fontSizeSmall;
127 line-height: (@baseLineHeight * 2); 69 line-height: (@baseLineHeight * 2);
128 a { 70 a {
129 padding: 0 1em; 71 padding: 0 1em;
130 display: inline-block; 72 display: inline-block;
131 text-decoration: none; 73 text-decoration: none;
132 color: @colorNavLink; 74 color: @grayLight;
133 &:link { color: @colorNavLink; } 75 &:link { color: @grayLight; }
134 &:visited { color: @colorNavLink; } 76 &:visited { color: @grayLight; }
135 &:hover { color: @colorNavLinkHover; } 77 &:hover { color: @linkColorHover; }
136 &:active { color: @colorNavLink; } 78 &:active { color: @grayLight; }
137 } 79 }
138 } 80 }
139 .page { 81 .page {
140 .box-shadow(0 0 10px, rgb(210, 210, 210)); 82 .box-shadow(0 0 10px, rgb(210, 210, 210));
141 padding: @baseLineHeight; 83 padding: @baseLineHeight;
142 background: @backgroundPage; 84 background: @pageBackground;
143 } 85 }
144 .page.special { 86 .page.special {
145 background: @backgroundPageSpecial; 87 background: @pageBackgroundSpecial;
146 } 88 }
147 89
148 .page>pre { 90 .page>pre {
149 margin-top: @baseLineHeight; 91 margin-top: @baseLineHeight;
150 } 92 }
151 .meta { 93 .meta {
152 font-size: @smallerFontSize; 94 font-size: @fontSizeMini;
153 } 95 }
154 } 96 }
155 97
156 form.search { 98 form.form-search {
157 display: inline-block; 99 display: inline-block;
158 margin: 0; 100 margin: 0;
101
102 .search-query {
103 font-size: @fontSizeSmall;
104 height: @fontSizeSmall * 1.5;
105 }
159 } 106 }
160 ul.search-results { 107 ul.search-results {
161 list-style: none; 108 list-style: none;
162 } 109 }
163 110
164 form.page-edit { 111 form.page-edit {
165 textarea { 112 textarea {
166 height: 10em; 113 height: 10em;
167 font-size: 1em; 114 font-size: @baseFontSize;
168 font-family: "Lucida Console", Monaco, Consolas, "Courier New", monospace; 115 font-family: @monoFontFamily;
169 margin-bottom: 0; 116 margin-bottom: 0;
170 border-radius: 0; 117 border-radius: 0;
171 } 118 }
172 } 119 }
173 .wmd-input-wrapper { 120 .wmd-input-wrapper {
174 padding: 1em 0; 121 padding: 1em 0;
175 122
176 .wmd-input-grip { 123 .wmd-input-grip {
177 background: @colorGrayLight; 124 background: @grayLighter;
178 border: 1px solid @colorGrayMedium; 125 border: 1px solid @grayLight;
179 border-width: 0 1px 1px 1px; 126 border-width: 0 1px 1px 1px;
180 height: 12px; 127 height: 12px;
181 cursor: ns-resize; 128 cursor: ns-resize;
182 } 129 }
183 } 130 }