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 .row-fill-height, .row-fill-height>div[class*='col-'] {
 223     display: flex;
 224 }
 225 .row-fill-height>div[class*='col-']>div {
 226     width: 100%;
 227 }
 228
 229 /* Show editable popover above side-nav */
 230 .editable-popup.popover {
 231     z-index:1055;
 232 }
 233
 234 /* Do not leave space for left-nav */
 235 div#wrapper {
 236   padding-left: 0;
 237 }
 238
 239 .arv-description-as-subtitle {
 240   padding-bottom: 1em;
 241 }
 242 .arv-description-in-table {
 243   height: 4em;
 244   overflow-x: hidden;
 245   overflow-y: hidden;
 246 }
 247 .arv-description-in-table:hover {
 248   overflow-y: auto;
 249 }
 250
 251 .btn.btn-nodecorate {
 252   border: none;
 253 }
 254 svg text {
 255     font-size: 6pt;
 256 }
 257
 258 div.pane-content iframe {
 259   width: 100%;
 260   border: none;
 261 }
 262 span.editable-textile {
 263   display: inline-block;
 264 }
 265 .text-overflow-ellipsis {
 266   white-space: nowrap;
 267   overflow: hidden;
 268   text-overflow: ellipsis;
 269 }
 270 .time-label-divider {
 271   font-size: 80%;
 272   min-width: 1em;
 273   padding: 0px 2px 0px 0px;
 274 }
 275 .task-summary-status {
 276   font-size: 80%;
 277 }
 278 #page-wrapper > div > h2 {
 279   margin-top: 0px;
 280 }
 281
 282 .compute-summary-numbers td {
 283   font-size: 150%;
 284 }
 285
 286 .arv-log-refresh-control {
 287   display: none;
 288 }
 289
 290 /* Hide Angular content until Angular is ready */
 291 [ng\:cloak], [ng-cloak], .ng-cloak {
 292     display: none !important;
 293 }
 294
 295 /* tabs */
 296 ul.nav.nav-tabs {
 297     font-size: 90%
 298 }
 299
 300 .hover-dropdown:hover .dropdown-menu {
 301   display: block;
 302 }