##// END OF EJS Templates
add zebra striping to the dashboard
Mathieu -
Show More
@@ -1,261 +1,266 b''
1 1
2 2 /**
3 3 * Primary styles
4 4 *
5 5 * Author: IPython Development Team
6 6 */
7 7
8 8 @dashboard_tb_pad: 4px;
9 9 @dashboard_lr_pad: 7px;
10 10 // These are the total heights of the Bootstrap small and mini buttons. These values
11 11 // are not less variables so we have to track them statically.
12 12 @btn_small_height: 24px;
13 13 @btn_mini_height: 22px;
14 14 @dark_dashboard_color: @breadcrumb-color;
15 @list_stripe_color: lighten(@page-backdrop-color,3%);
15 16
16 17 ul#tabs {
17 18 margin-bottom: @dashboard_tb_pad;
18 19 }
19 20
20 21 ul#tabs a {
21 22 padding-top: @dashboard_tb_pad + 2px;
22 23 padding-bottom: @dashboard_tb_pad;
23 24 }
24 25
25 26 ul.breadcrumb {
26 27 a:focus, a:hover {
27 28 text-decoration: none;
28 29 }
29 30 i.icon-home {
30 31 font-size: 16px;
31 32 margin-right: 4px;
32 33 }
33 34
34 35 span {
35 36 color: @dark_dashboard_color;
36 37 }
37 38 }
38 39
39 40 .list_toolbar {
40 41 padding: @dashboard_tb_pad 0 @dashboard_tb_pad 0;
41 42 vertical-align: middle;
42 43
43 44 .tree-buttons {
44 45 padding-top: 1px;
45 46 }
46 47 }
47 48
48 49 .dynamic-buttons {
49 50 display: inline-block;
50 51 }
51 52
52 53 .list_toolbar [class*="span"] {
53 54 min-height: @btn_small_height;
54 55 }
55 56
56 57 .list_header {
57 58 font-weight: bold;
59 background-color: @page-backdrop-color
58 60 }
59 61
60 62 .list_container {
61 63 margin-top: @dashboard_tb_pad;
62 64 margin-bottom: 5*@dashboard_tb_pad;
63 65 border: 1px solid @table-border-color;
64 66 border-radius: @border-radius-base;
65 67 }
66 68
67 69 .list_container > div {
68 70 border-bottom: 1px solid @table-border-color;
69 71 &:hover .list-item{
70 72 background-color: red;
71 73 };
72 74 }
73 75
74 76 .list_container > div:last-child {
75 77 border: none;
76 78 }
77 79
78 80 .list_item {
79 81 &:hover .list_item {
80 82 background-color: @table-border-color;
81 83 };
82 84 a {text-decoration: none;}
85 &:nth-child(odd) {
86 background-color: @list_stripe_color;
87 }
83 88 }
84 89
85 90 .action_col {
86 91 text-align: right;
87 92 }
88 93
89 94 .list_header>div, .list_item>div {
90 95 padding-top: @dashboard_tb_pad;
91 96 padding-bottom: @dashboard_tb_pad;
92 97 padding-left: @dashboard_lr_pad;
93 98 padding-right: @dashboard_lr_pad;
94 99 line-height: @btn_mini_height;
95 100
96 101 input {
97 102 margin-right: @dashboard_lr_pad;
98 103 }
99 104 }
100 105
101 106 .item_name {
102 107 line-height: @btn_mini_height;
103 108 height: @btn_small_height;
104 109 }
105 110
106 111 .item_icon {
107 112 font-size: 14px;
108 113 color: @dark_dashboard_color;
109 114 margin-right: @dashboard_lr_pad;
110 115 }
111 116
112 117 .item_buttons {
113 118 padding-top: @dashboard_tb_pad;
114 119 line-height: 1em;
115 120 .btn-toolbar();
116 121 .btn {
117 122 min-width: 13ex;
118 123 }
119 124 .running-indicator {
120 125 color: @brand-success;
121 126 }
122 127 }
123 128
124 129 .toolbar_info {
125 130 height: @btn_small_height;
126 131 line-height: @btn_small_height;
127 132 }
128 133
129 134 input.nbname_input, input.engine_num_input {
130 135 // These settings give these inputs a height that matches @btn_mini_height = 22
131 136 padding-top: 3px;
132 137 padding-bottom: 3px;
133 138 height: @btn_mini_height;
134 139 line-height: 14px;
135 140 margin: 0px;
136 141 }
137 142
138 143 input.engine_num_input {
139 144 width: 60px;
140 145 }
141 146
142 147 .highlight_text {
143 148 color: blue;
144 149 }
145 150
146 151 #project_name > .breadcrumb {
147 152 padding: 0px;
148 153 margin-bottom: 0px;
149 154 background-color: transparent;
150 155 font-weight: bold;
151 156
152 157 }
153 158
154 159 .tab-content .row {
155 160 margin-left: 0px;
156 161 margin-right: 0px;
157 162 }
158 163
159 164 .folder_icon:before {
160 165 .icon(@fa-var-folder-o)
161 166 }
162 167
163 168 .notebook_icon:before {
164 169 .icon(@fa-var-book)
165 170 }
166 171
167 172 .running_notebook_icon:before {
168 173 .icon(@fa-var-book);
169 174 color: @brand-success
170 175 }
171 176
172 177
173 178 .file_icon:before {
174 179 .icon(@fa-var-file-o)
175 180 }
176 181
177 182 #notebook_toolbar .pull-right {
178 183 padding-top: 0px;
179 184 margin-right: -1px;
180 185 }
181 186
182 187 ul#new-menu {
183 188 // align right instead of left
184 189 left: auto;
185 190 right: 0;
186 191 }
187 192
188 193 .kernel-menu-icon {
189 194 padding-right: 12px;
190 195 width: 24px;
191 196 content: @fa-var-square-o;
192 197 }
193 198
194 199 .kernel-menu-icon:before {
195 200 content: @fa-var-square-o;
196 201 }
197 202
198 203 .kernel-menu-icon-current:before {
199 204 content: @fa-var-check;
200 205 }
201 206
202 207 #tab_content {
203 208 padding-top: @page-header-padding;
204 209 }
205 210
206 211 #running {
207 212 .panel-group{
208 213 .panel {
209 214 margin-top: 3px;
210 215 margin-bottom: 1em;
211 216
212 217 .panel-heading {
213 218 background-color: @page-backdrop-color;
214 219 padding-top: @dashboard_tb_pad;
215 220 padding-bottom: @dashboard_tb_pad;
216 221 padding-left: @dashboard_lr_pad;
217 222 padding-right: @dashboard_lr_pad;
218 223 line-height: @btn_mini_height;
219 224
220 225 a:focus, a:hover {
221 226 text-decoration: none;
222 227 }
223 228 }
224 229
225 230 .panel-body {
226 231 padding: 0px;
227 232
228 233 .list_container {
229 234 margin-top: 0px;
230 235 margin-bottom: 0px;
231 236 border: 0px;
232 237 border-radius: 0px;
233 238
234 239 .list_item {
235 240 border-bottom: 1px solid @table-border-color;
236 241
237 242 &:last-child {
238 243 border-bottom: 0px;
239 244 }
240 245 }
241 246 }
242 247 }
243 248 }
244 249 }
245 250 }
246 251
247 252 .delete-button {
248 253 display: none;
249 254 }
250 255
251 256 .duplicate-button {
252 257 display: none;
253 258 }
254 259
255 260 .rename-button {
256 261 display: none;
257 262 }
258 263
259 264 .shutdown-button {
260 265 display: none;
261 266 }
General Comments 0
You need to be logged in to leave comments. Login now