3781: Merge branch 'master' into 3781-browser-upload
[arvados.git] / apps / workbench / app / assets / stylesheets / application.css.scss
1 /*
2  * This is a manifest file that'll be compiled into application.css, which will include all the files
3  * listed below.
4  *
5  * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6  * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
7  *
8  * You're free to add application-wide styles to this file and they'll appear at the top of the
9  * compiled file, but it's generally better to create a new file per style scope.
10  *
11  *= require_self
12  *= require bootstrap
13  *= require bootstrap3-editable/bootstrap-editable
14  *= require morris
15  *= require_tree .
16  */
17
18 .contain-align-left {
19     text-align: left;
20 }
21 table.topalign>tbody>tr>td {
22     vertical-align: top;
23 }
24 table.topalign>thead>tr>td {
25     vertical-align: bottom;
26 }
27 tr.cell-valign-center>td {
28     vertical-align: middle;
29 }
30 tr.cell-noborder>td,tr.cell-noborder>th {
31     border: none;
32 }
33 table.table-justforlayout>tr>td,
34 table.table-justforlayout>tr>th,
35 table.table-justforlayout>thead>tr>td,
36 table.table-justforlayout>thead>tr>th,
37 table.table-justforlayout>tbody>tr>td,
38 table.table-justforlayout>tbody>tr>th{
39     border: none;
40 }
41 table.table-justforlayout {
42     margin-bottom: 0;
43 }
44 .smaller-text {
45     font-size: .8em;
46 }
47 .deemphasize {
48     font-size: .8em;
49     color: #888;
50 }
51 .lighten {
52     color: #888;
53 }
54 .arvados-filename,
55 .arvados-uuid {
56     font-size: .8em;
57     font-family: monospace;
58 }
59 table .data-size, .table .data-size {
60     text-align: right;
61 }
62 body .editable-empty {
63     color: #999;
64 }
65 body .editable-empty:hover {
66     color: #0088cc;
67 }
68 table.arv-index tbody td.arv-object-AuthorizedKey.arv-attr-public_key {
69     overflow-x: hidden;
70     max-width: 120px;
71 }
72 table.arv-index > thead > tr > th {
73     border-top: none;
74 }
75 table.table-fixedlayout {
76     white-space: nowrap;
77     table-layout: fixed;
78 }
79 table.table-fixedlayout td {
80     overflow: hidden;
81     overflow-x: hidden;
82     text-overflow: ellipsis;
83 }
84 table.table-smallcontent td {
85     font-size: 85%;
86 }
87 form input.search-mini {
88     padding: 0 6px;
89 }
90 form.small-form-margin {
91     margin-bottom: 2px;
92 }
93 .nowrap {
94     white-space: nowrap;
95 }
96
97 /* top nav */
98 $top-nav-bg: #3c163d;
99 $top-nav-bg-bottom: #260027;
100 nav.navbar-fixed-top .navbar-brand {
101     color: #79537a;
102     letter-spacing: 0.4em;
103 }
104 nav.navbar-fixed-top {
105     background: $top-nav-bg;
106     background: linear-gradient(to bottom, $top-nav-bg 0%,$top-nav-bg-bottom 100%);
107 }
108 .navbar.breadcrumbs {
109     line-height: 50px;
110     border-radius: 0;
111     margin-bottom: 0;
112     border-right: 0;
113     border-left: 0;
114 }
115 .navbar.breadcrumbs .nav > li > a,
116 .navbar.breadcrumbs .nav > li {
117     color: #000;
118 }
119 .navbar.breadcrumbs .nav > li.nav-separator > i {
120     color: #bbb;
121 }
122 .navbar.breadcrumbs .navbar-form {
123   margin-top: 0px;
124   margin-bottom: 0px;
125 }
126 .navbar.breadcrumbs .navbar-text {
127   margin-top: 0px;
128   margin-bottom: 0px;
129 }
130
131 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a,
132 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a:focus,
133 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a:hover {
134     background: lighten($top-nav-bg, 5%);
135 }
136 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a,
137 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a:focus,
138 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a:hover {
139     color: #fff;
140 }
141
142 .dax {
143     max-width: 10%;
144     margin-right: 1em;
145     float: left
146 }
147
148 .smart-scroll {
149     overflow: auto;
150     margin-bottom: -15px;
151 }
152
153 .infinite-scroller .fa-warning {
154     color: #800;
155 }
156
157 th[data-sort-order] {
158     cursor: pointer;
159 }
160
161 .inline-progress-container div.progress {
162     margin-bottom: 0;
163 }
164
165 .inline-progress-container {
166     width: 100%;
167     display:inline-block;
168 }
169
170 td.add-tag-button {
171     white-space: normal;
172 }
173 td.add-tag-button .add-tag-button {
174     margin-right: 4px;
175     opacity: 0.2;
176 }
177 td.add-tag-button .add-tag-button:hover {
178     opacity: 1;
179 }
180 span.removable-tag-container {
181     line-height: 1.6;
182 }
183 .label.removable-tag a {
184     color: #fff;
185     cursor: pointer;
186 }
187
188 li.notification {
189     padding: 10px;
190 }
191
192 // See HeaderRowFixer in application.js
193 table.table-fixed-header-row {
194     width: 100%;
195     border-spacing: 0px;
196     margin:0;
197 }
198 table.table-fixed-header-row thead {
199     position:fixed;
200     background: #fff;
201 }
202 table.table-fixed-header-row tbody {
203     position:relative;
204     top:1.5em;
205 }
206
207 .row-fill-height, .row-fill-height>div[class*='col-'] {
208     display: flex;
209 }
210 .row-fill-height>div[class*='col-']>div {
211     width: 100%;
212 }
213
214 /* Show editable popover above side-nav */
215 .editable-popup.popover {
216     z-index:1055;
217 }
218
219 /* Do not leave space for left-nav */
220 div#wrapper {
221   padding-left: 0;
222 }
223
224 .arv-description-as-subtitle {
225   padding-bottom: 1em;
226 }
227 .arv-description-in-table {
228   height: 4em;
229   overflow-x: hidden;
230   overflow-y: hidden;
231 }
232 .arv-description-in-table:hover {
233   overflow-y: auto;
234 }
235
236 .btn.btn-nodecorate {
237   border: none;
238 }
239 svg text {
240     font-size: 6pt;
241 }
242
243 div.pane-content iframe {
244   width: 100%;
245   border: none;
246 }
247 span.editable-textile {
248   display: inline-block;
249 }
250 .text-overflow-ellipsis {
251   white-space: nowrap;
252   overflow: hidden;
253   text-overflow: ellipsis;
254 }
255 .time-label-divider {
256   font-size: 80%;
257   min-width: 1em;
258   padding: 0px 2px 0px 0px;
259 }
260 .task-summary-status {
261   font-size: 80%;
262 }
263 #page-wrapper > div > h2 {
264   margin-top: 0px;
265 }
266
267 .compute-summary-numbers td {
268   font-size: 150%;
269 }
270
271 .arv-log-refresh-control {
272   display: none;
273 }
274
275 [ng\:cloak], [ng-cloak], .ng-cloak {
276     display: none !important;
277 }