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 input.select-on-focus {
  97     font-family: monospace;
  98     background: inherit;
  99     border: thin #ccc solid;
 100     border-radius: .2em;
 101     padding: .15em .5em;
 102 }
 103 input.select-on-focus:focus {
 104     border-color: #9bf;
 105 }
 106
 107 /* top nav */
 108 $top-nav-bg: #3c163d;
 109 $top-nav-bg-bottom: #260027;
 110 nav.navbar-fixed-top .navbar-brand {
 111     color: #79537a;
 112     letter-spacing: 0.4em;
 113 }
 114 nav.navbar-fixed-top {
 115     background: $top-nav-bg;
 116     background: linear-gradient(to bottom, $top-nav-bg 0%,$top-nav-bg-bottom 100%);
 117 }
 118 .navbar.breadcrumbs {
 119     line-height: 50px;
 120     border-radius: 0;
 121     margin-bottom: 0;
 122     border-right: 0;
 123     border-left: 0;
 124 }
 125 .navbar.breadcrumbs .nav > li > a,
 126 .navbar.breadcrumbs .nav > li {
 127     color: #000;
 128 }
 129 .navbar.breadcrumbs .nav > li.nav-separator > i {
 130     color: #bbb;
 131 }
 132 .navbar.breadcrumbs .navbar-form {
 133   margin-top: 0px;
 134   margin-bottom: 0px;
 135 }
 136 .navbar.breadcrumbs .navbar-text {
 137   margin-top: 0px;
 138   margin-bottom: 0px;
 139 }
 140
 141 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a,
 142 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a:focus,
 143 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a:hover {
 144     background: lighten($top-nav-bg, 5%);
 145 }
 146 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a,
 147 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a:focus,
 148 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a:hover {
 149     color: #fff;
 150 }
 151
 152 .dax {
 153     max-width: 10%;
 154     margin-right: 1em;
 155     float: left
 156 }
 157
 158 .smart-scroll {
 159     overflow: auto;
 160     margin-bottom: -15px;
 161 }
 162
 163 .infinite-scroller .fa-warning {
 164     color: #800;
 165 }
 166
 167 th[data-sort-order] {
 168     cursor: pointer;
 169 }
 170
 171 .inline-progress-container div.progress {
 172     margin-bottom: 0;
 173 }
 174
 175 .inline-progress-container {
 176     width: 100%;
 177     display:inline-block;
 178 }
 179
 180 td.add-tag-button {
 181     white-space: normal;
 182 }
 183 td.add-tag-button .add-tag-button {
 184     margin-right: 4px;
 185     opacity: 0.2;
 186 }
 187 td.add-tag-button .add-tag-button:hover {
 188     opacity: 1;
 189 }
 190 span.removable-tag-container {
 191     line-height: 1.6;
 192 }
 193 .label.removable-tag a {
 194     color: #fff;
 195     cursor: pointer;
 196 }
 197
 198 li.notification {
 199     padding: 10px;
 200 }
 201
 202 // See HeaderRowFixer in application.js
 203 table.table-fixed-header-row {
 204     width: 100%;
 205     border-spacing: 0px;
 206     margin:0;
 207 }
 208 table.table-fixed-header-row thead {
 209     position:fixed;
 210     background: #fff;
 211 }
 212 table.table-fixed-header-row tbody {
 213     position:relative;
 214     top:1.5em;
 215 }
 216
 217 .dropdown-menu {
 218     max-height: 30em;
 219     overflow-y: auto;
 220 }
 221
 222 .dropdown-menu a {
 223     cursor: pointer;
 224 }
 225
 226 .row-fill-height, .row-fill-height>div[class*='col-'] {
 227     display: flex;
 228 }
 229 .row-fill-height>div[class*='col-']>div {
 230     width: 100%;
 231 }
 232
 233 /* Show editable popover above side-nav */
 234 .editable-popup.popover {
 235     z-index:1055;
 236 }
 237
 238 /* Do not leave space for left-nav */
 239 div#wrapper {
 240   padding-left: 0;
 241 }
 242
 243 .arv-description-as-subtitle {
 244   padding-bottom: 1em;
 245 }
 246 .arv-description-in-table {
 247   height: 4em;
 248   overflow-x: hidden;
 249   overflow-y: hidden;
 250 }
 251 .arv-description-in-table:hover {
 252   overflow-y: auto;
 253 }
 254
 255 .btn.btn-nodecorate {
 256   border: none;
 257 }
 258 svg text {
 259     font-size: 6pt;
 260 }
 261
 262 div.pane-content iframe {
 263   width: 100%;
 264   border: none;
 265 }
 266 span.editable-textile {
 267   display: inline-block;
 268 }
 269 .text-overflow-ellipsis {
 270   white-space: nowrap;
 271   overflow: hidden;
 272   text-overflow: ellipsis;
 273 }
 274 .time-label-divider {
 275   font-size: 80%;
 276   min-width: 1em;
 277   padding: 0px 2px 0px 0px;
 278 }
 279 .task-summary-status {
 280   font-size: 80%;
 281 }
 282 #page-wrapper > div > h2 {
 283   margin-top: 0px;
 284 }
 285
 286 .compute-summary-numbers td {
 287   font-size: 150%;
 288 }
 289
 290 .arv-log-refresh-control {
 291   display: none;
 292 }
 293
 294 /* Hide Angular content until Angular is ready */
 295 [ng\:cloak], [ng-cloak], .ng-cloak {
 296     display: none !important;
 297 }
 298
 299 /* tabs */
 300 ul.nav.nav-tabs {
 301     font-size: 90%
 302 }
 303
 304 .hover-dropdown:hover .dropdown-menu {
 305   display: block;
 306 }
 307
 308 .arv-description-as-subtitle .editable-inline,
 309 .arv-description-as-subtitle .editable-inline .form-group,
 310 .arv-description-as-subtitle .editable-inline .form-group .editable-input,
 311 .arv-description-as-subtitle .editable-inline .form-group .editable-input textarea,
 312 {
 313     width: 98%!important;
 314 }