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
  12 @import 'bootstrap-sprockets';
  13 @import 'bootstrap';
  14 @import 'bootstrap3-editable/bootstrap-editable';
  15
  16 //= require morris
  17 //= require_tree .
  18
  19 .contain-align-left {
  20     text-align: left;
  21 }
  22 table.topalign>tbody>tr>td {
  23     vertical-align: top;
  24 }
  25 table.topalign>thead>tr>td {
  26     vertical-align: bottom;
  27 }
  28 tr.cell-valign-center>td {
  29     vertical-align: middle;
  30 }
  31 tr.cell-noborder>td,tr.cell-noborder>th {
  32     border: none;
  33 }
  34 table.table-justforlayout>tr>td,
  35 table.table-justforlayout>tr>th,
  36 table.table-justforlayout>thead>tr>td,
  37 table.table-justforlayout>thead>tr>th,
  38 table.table-justforlayout>tbody>tr>td,
  39 table.table-justforlayout>tbody>tr>th{
  40     border: none;
  41 }
  42 table.table-justforlayout {
  43     margin-bottom: 0;
  44 }
  45 .smaller-text {
  46     font-size: .8em;
  47 }
  48 .deemphasize {
  49     font-size: .8em;
  50     color: #888;
  51 }
  52 .lighten {
  53     color: #888;
  54 }
  55 .arvados-filename,
  56 .arvados-uuid {
  57     font-size: .8em;
  58     font-family: monospace;
  59 }
  60 table .data-size, .table .data-size {
  61     text-align: right;
  62 }
  63 body .editable-empty {
  64     color: #999;
  65 }
  66 body .editable-empty:hover {
  67     color: #0088cc;
  68 }
  69 table.arv-index tbody td.arv-object-AuthorizedKey.arv-attr-public_key {
  70     overflow-x: hidden;
  71     max-width: 120px;
  72 }
  73 table.arv-index > thead > tr > th {
  74     border-top: none;
  75 }
  76 table.table-fixedlayout {
  77     white-space: nowrap;
  78     table-layout: fixed;
  79 }
  80 table.table-fixedlayout td {
  81     overflow: hidden;
  82     overflow-x: hidden;
  83     text-overflow: ellipsis;
  84 }
  85 table.table-smallcontent td {
  86     font-size: 85%;
  87 }
  88 form input.search-mini {
  89     padding: 0 6px;
  90 }
  91 form.small-form-margin {
  92     margin-bottom: 2px;
  93 }
  94 .nowrap {
  95     white-space: nowrap;
  96 }
  97 input.select-on-focus {
  98     font-family: monospace;
  99     background: inherit;
 100     border: thin #ccc solid;
 101     border-radius: .2em;
 102     padding: .15em .5em;
 103 }
 104 input.select-on-focus:focus {
 105     border-color: #9bf;
 106 }
 107
 108 /* top nav */
 109 $top-nav-bg: #3c163d;
 110 $top-nav-bg-bottom: #260027;
 111 nav.navbar-fixed-top .navbar-brand {
 112     color: #79537a;
 113     letter-spacing: 0.4em;
 114 }
 115 nav.navbar-fixed-top {
 116     background: $top-nav-bg;
 117     background: linear-gradient(to bottom, $top-nav-bg 0%,$top-nav-bg-bottom 100%);
 118 }
 119 .navbar.breadcrumbs {
 120     line-height: 50px;
 121     border-radius: 0;
 122     margin-bottom: 0;
 123     border-right: 0;
 124     border-left: 0;
 125 }
 126 .navbar.breadcrumbs .nav > li > a,
 127 .navbar.breadcrumbs .nav > li {
 128     color: #000;
 129 }
 130 .navbar.breadcrumbs .nav > li.nav-separator > i {
 131     color: #bbb;
 132 }
 133 .navbar.breadcrumbs .navbar-form {
 134   margin-top: 0px;
 135   margin-bottom: 0px;
 136 }
 137 .navbar.breadcrumbs .navbar-text {
 138   margin-top: 0px;
 139   margin-bottom: 0px;
 140 }
 141
 142 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a,
 143 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a:focus,
 144 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a:hover {
 145     background: lighten($top-nav-bg, 5%);
 146 }
 147 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a,
 148 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a:focus,
 149 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a:hover {
 150     color: #fff;
 151 }
 152
 153 .dax {
 154     max-width: 10%;
 155     margin-right: 1em;
 156     float: left
 157 }
 158
 159 .smart-scroll {
 160     overflow: auto;
 161     margin-bottom: -15px;
 162 }
 163
 164 .infinite-scroller .fa-warning {
 165     color: #800;
 166 }
 167
 168 th[data-sort-order] {
 169     cursor: pointer;
 170 }
 171
 172 .inline-progress-container div.progress {
 173     margin-bottom: 0;
 174 }
 175
 176 .inline-progress-container {
 177     width: 100%;
 178     display:inline-block;
 179 }
 180
 181 td.add-tag-button {
 182     white-space: normal;
 183 }
 184 td.add-tag-button .add-tag-button {
 185     margin-right: 4px;
 186     opacity: 0.2;
 187 }
 188 td.add-tag-button .add-tag-button:hover {
 189     opacity: 1;
 190 }
 191 span.removable-tag-container {
 192     line-height: 1.6;
 193 }
 194 .label.removable-tag a {
 195     color: #fff;
 196     cursor: pointer;
 197 }
 198
 199 li.notification {
 200     padding: 10px;
 201 }
 202
 203 // See HeaderRowFixer in application.js
 204 table.table-fixed-header-row {
 205     width: 100%;
 206     border-spacing: 0px;
 207     margin:0;
 208 }
 209 table.table-fixed-header-row thead {
 210     position:fixed;
 211     background: #fff;
 212 }
 213 table.table-fixed-header-row tbody {
 214     position:relative;
 215     top:1.5em;
 216 }
 217
 218 .dropdown-menu {
 219     max-height: 30em;
 220     overflow-y: auto;
 221 }
 222
 223 .row-fill-height, .row-fill-height>div[class*='col-'] {
 224     display: flex;
 225 }
 226 .row-fill-height>div[class*='col-']>div {
 227     width: 100%;
 228 }
 229
 230 /* Show editable popover above side-nav */
 231 .editable-popup.popover {
 232     z-index:1055;
 233 }
 234
 235 /* Do not leave space for left-nav */
 236 div#wrapper {
 237   padding-left: 0;
 238 }
 239
 240 .arv-description-as-subtitle {
 241   padding-bottom: 1em;
 242 }
 243 .arv-description-in-table {
 244   height: 4em;
 245   overflow-x: hidden;
 246   overflow-y: hidden;
 247 }
 248 .arv-description-in-table:hover {
 249   overflow-y: auto;
 250 }
 251
 252 .btn.btn-nodecorate {
 253   border: none;
 254 }
 255 svg text {
 256     font-size: 6pt;
 257 }
 258
 259 div.pane-content iframe {
 260   width: 100%;
 261   border: none;
 262 }
 263 span.editable-textile {
 264   display: inline-block;
 265 }
 266 .text-overflow-ellipsis {
 267   white-space: nowrap;
 268   overflow: hidden;
 269   text-overflow: ellipsis;
 270 }
 271 .time-label-divider {
 272   font-size: 80%;
 273   min-width: 1em;
 274   padding: 0px 2px 0px 0px;
 275 }
 276 .task-summary-status {
 277   font-size: 80%;
 278 }
 279 #page-wrapper > div > h2 {
 280   margin-top: 0px;
 281 }
 282
 283 .compute-summary-numbers td {
 284   font-size: 150%;
 285 }
 286
 287 .arv-log-refresh-control {
 288   display: none;
 289 }
 290
 291 /* Hide Angular content until Angular is ready */
 292 [ng\:cloak], [ng-cloak], .ng-cloak {
 293     display: none !important;
 294 }
 295
 296 /* tabs */
 297 ul.nav.nav-tabs {
 298     font-size: 90%
 299 }
 300
 301 .hover-dropdown:hover .dropdown-menu {
 302   display: block;
 303 }
 304
 305 .arv-description-as-subtitle .editable-inline,
 306 .arv-description-as-subtitle .editable-inline .form-group,
 307 .arv-description-as-subtitle .editable-inline .form-group .editable-input,
 308 .arv-description-as-subtitle .editable-inline .form-group .editable-input textarea,
 309 {
 310     width: 98%!important;
 311 }