ctf-server
old server for hosting capture-the-flag
git clone https://9o.is/git/ctf-server.git
tables.less
(6255B)
1 //
2 // Tables
3 // --------------------------------------------------
4
5
6 // BASE TABLES
7 // -----------------
8
9 table {
10 max-width: 100%;
11 background-color: @tableBackground;
12 border-collapse: collapse;
13 border-spacing: 0;
14 }
15
16 // BASELINE STYLES
17 // ---------------
18
19 .table {
20 width: 100%;
21 margin-bottom: @baseLineHeight;
22 // Cells
23 th,
24 td {
25 padding: 8px;
26 line-height: @baseLineHeight;
27 text-align: left;
28 vertical-align: top;
29 border-top: 1px solid @tableBorder;
30 }
31 th {
32 font-weight: bold;
33 }
34 // Bottom align for column headings
35 thead th {
36 vertical-align: bottom;
37 }
38 // Remove top border from thead by default
39 caption + thead tr:first-child th,
40 caption + thead tr:first-child td,
41 colgroup + thead tr:first-child th,
42 colgroup + thead tr:first-child td,
43 thead:first-child tr:first-child th,
44 thead:first-child tr:first-child td {
45 border-top: 0;
46 }
47 // Account for multiple tbody instances
48 tbody + tbody {
49 border-top: 2px solid @tableBorder;
50 }
51
52 // Nesting
53 .table {
54 background-color: @bodyBackground;
55 }
56 }
57
58
59
60 // CONDENSED TABLE W/ HALF PADDING
61 // -------------------------------
62
63 .table-condensed {
64 th,
65 td {
66 padding: 4px 5px;
67 }
68 }
69
70
71 // BORDERED VERSION
72 // ----------------
73
74 .table-bordered {
75 border: 1px solid @tableBorder;
76 border-collapse: separate; // Done so we can round those corners!
77 *border-collapse: collapse; // IE7 can't round corners anyway
78 border-left: 0;
79 .border-radius(@baseBorderRadius);
80 th,
81 td {
82 border-left: 1px solid @tableBorder;
83 }
84 // Prevent a double border
85 caption + thead tr:first-child th,
86 caption + tbody tr:first-child th,
87 caption + tbody tr:first-child td,
88 colgroup + thead tr:first-child th,
89 colgroup + tbody tr:first-child th,
90 colgroup + tbody tr:first-child td,
91 thead:first-child tr:first-child th,
92 tbody:first-child tr:first-child th,
93 tbody:first-child tr:first-child td {
94 border-top: 0;
95 }
96 // For first th/td in the first row in the first thead or tbody
97 thead:first-child tr:first-child > th:first-child,
98 tbody:first-child tr:first-child > td:first-child,
99 tbody:first-child tr:first-child > th:first-child {
100 .border-top-left-radius(@baseBorderRadius);
101 }
102 // For last th/td in the first row in the first thead or tbody
103 thead:first-child tr:first-child > th:last-child,
104 tbody:first-child tr:first-child > td:last-child,
105 tbody:first-child tr:first-child > th:last-child {
106 .border-top-right-radius(@baseBorderRadius);
107 }
108 // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
109 thead:last-child tr:last-child > th:first-child,
110 tbody:last-child tr:last-child > td:first-child,
111 tbody:last-child tr:last-child > th:first-child,
112 tfoot:last-child tr:last-child > td:first-child,
113 tfoot:last-child tr:last-child > th:first-child {
114 .border-bottom-left-radius(@baseBorderRadius);
115 }
116 // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
117 thead:last-child tr:last-child > th:last-child,
118 tbody:last-child tr:last-child > td:last-child,
119 tbody:last-child tr:last-child > th:last-child,
120 tfoot:last-child tr:last-child > td:last-child,
121 tfoot:last-child tr:last-child > th:last-child {
122 .border-bottom-right-radius(@baseBorderRadius);
123 }
124
125 // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
126 tfoot + tbody:last-child tr:last-child td:first-child {
127 .border-bottom-left-radius(0);
128 }
129 tfoot + tbody:last-child tr:last-child td:last-child {
130 .border-bottom-right-radius(0);
131 }
132
133 // Special fixes to round the left border on the first td/th
134 caption + thead tr:first-child th:first-child,
135 caption + tbody tr:first-child td:first-child,
136 colgroup + thead tr:first-child th:first-child,
137 colgroup + tbody tr:first-child td:first-child {
138 .border-top-left-radius(@baseBorderRadius);
139 }
140 caption + thead tr:first-child th:last-child,
141 caption + tbody tr:first-child td:last-child,
142 colgroup + thead tr:first-child th:last-child,
143 colgroup + tbody tr:first-child td:last-child {
144 .border-top-right-radius(@baseBorderRadius);
145 }
146
147 }
148
149
150
151
152 // ZEBRA-STRIPING
153 // --------------
154
155 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
156 .table-striped {
157 tbody {
158 > tr:nth-child(odd) > td,
159 > tr:nth-child(odd) > th {
160 background-color: @tableBackgroundAccent;
161 }
162 }
163 }
164
165
166 // HOVER EFFECT
167 // ------------
168 // Placed here since it has to come after the potential zebra striping
169 .table-hover {
170 tbody {
171 tr:hover > td,
172 tr:hover > th {
173 background-color: @tableBackgroundHover;
174 }
175 }
176 }
177
178
179 // TABLE CELL SIZING
180 // -----------------
181
182 // Reset default grid behavior
183 table td[class*="span"],
184 table th[class*="span"],
185 .row-fluid table td[class*="span"],
186 .row-fluid table th[class*="span"] {
187 display: table-cell;
188 float: none; // undo default grid column styles
189 margin-left: 0; // undo default grid column styles
190 }
191
192 // Change the column widths to account for td/th padding
193 .table td,
194 .table th {
195 &.span1 { .tableColumns(1); }
196 &.span2 { .tableColumns(2); }
197 &.span3 { .tableColumns(3); }
198 &.span4 { .tableColumns(4); }
199 &.span5 { .tableColumns(5); }
200 &.span6 { .tableColumns(6); }
201 &.span7 { .tableColumns(7); }
202 &.span8 { .tableColumns(8); }
203 &.span9 { .tableColumns(9); }
204 &.span10 { .tableColumns(10); }
205 &.span11 { .tableColumns(11); }
206 &.span12 { .tableColumns(12); }
207 }
208
209
210
211 // TABLE BACKGROUNDS
212 // -----------------
213 // Exact selectors below required to override .table-striped
214
215 .table tbody tr {
216 &.success > td {
217 background-color: @successBackground;
218 }
219 &.error > td {
220 background-color: @errorBackground;
221 }
222 &.warning > td {
223 background-color: @warningBackground;
224 }
225 &.info > td {
226 background-color: @infoBackground;
227 }
228 }
229
230 // Hover states for .table-hover
231 .table-hover tbody tr {
232 &.success:hover > td {
233 background-color: darken(@successBackground, 5%);
234 }
235 &.error:hover > td {
236 background-color: darken(@errorBackground, 5%);
237 }
238 &.warning:hover > td {
239 background-color: darken(@warningBackground, 5%);
240 }
241 &.info:hover > td {
242 background-color: darken(@infoBackground, 5%);
243 }
244 }