apps/workbench/app/assets/stylesheets/application.css.scss

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 /*
   6  * This is a manifest file that'll be compiled into application.css, which will include all the files
   7  * listed below.
   8  *
   9  * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
  10  * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
  11  *
  12  * You're free to add application-wide styles to this file and they'll appear at the top of the
  13  * compiled file, but it's generally better to create a new file per style scope.
  14  *
  15  *= require_self
  16  *= require bootstrap
  17  *= require bootstrap3-editable/bootstrap-editable
  18  *= require morris
  19  *= require awesomplete
  20  *= require_tree .
  21  */
  22
  23 .contain-align-left {
  24     text-align: left;
  25 }
  26 table.topalign>tbody>tr>td {
  27     vertical-align: top;
  28 }
  29 table.topalign>thead>tr>td {
  30     vertical-align: bottom;
  31 }
  32 tr.cell-valign-center>td {
  33     vertical-align: middle;
  34 }
  35 tr.cell-noborder>td,tr.cell-noborder>th {
  36     border: none;
  37 }
  38 table.table-justforlayout>tr>td,
  39 table.table-justforlayout>tr>th,
  40 table.table-justforlayout>thead>tr>td,
  41 table.table-justforlayout>thead>tr>th,
  42 table.table-justforlayout>tbody>tr>td,
  43 table.table-justforlayout>tbody>tr>th{
  44     border: none;
  45 }
  46 table.table-justforlayout {
  47     margin-bottom: 0;
  48 }
  49 .smaller-text {
  50     font-size: .8em;
  51 }
  52 .deemphasize {
  53     font-size: .8em;
  54     color: #888;
  55 }
  56 .lighten {
  57     color: #888;
  58 }
  59 .arvados-filename,
  60 .arvados-uuid {
  61     font-size: .8em;
  62     font-family: monospace;
  63 }
  64 table .data-size, .table .data-size {
  65     text-align: right;
  66 }
  67 body .editable-empty {
  68     color: #999;
  69 }
  70 body .editable-empty:hover {
  71     color: #0088cc;
  72 }
  73 table.arv-index tbody td.arv-object-AuthorizedKey.arv-attr-public_key {
  74     overflow-x: hidden;
  75     max-width: 120px;
  76 }
  77 table.arv-index > thead > tr > th {
  78     border-top: none;
  79 }
  80 table.table-fixedlayout {
  81     white-space: nowrap;
  82     table-layout: fixed;
  83 }
  84 table.table-fixedlayout td {
  85     overflow: hidden;
  86     overflow-x: hidden;
  87     text-overflow: ellipsis;
  88 }
  89 table.table-smallcontent td {
  90     font-size: 85%;
  91 }
  92 form input.search-mini {
  93     padding: 0 6px;
  94 }
  95 form.small-form-margin {
  96     margin-bottom: 2px;
  97 }
  98 .nowrap {
  99     white-space: nowrap;
 100 }
 101 input.select-on-focus {
 102     font-family: monospace;
 103     background: inherit;
 104     border: thin #ccc solid;
 105     border-radius: .2em;
 106     padding: .15em .5em;
 107 }
 108 input.select-on-focus:focus {
 109     border-color: #9bf;
 110 }
 111
 112 /* top nav */
 113 $top-nav-bg: #3c163d;
 114 $top-nav-bg-bottom: #260027;
 115 nav.navbar-fixed-top .navbar-brand {
 116     color: #79537a;
 117     letter-spacing: 0.4em;
 118 }
 119 nav.navbar-fixed-top {
 120     background: $top-nav-bg;
 121     background: linear-gradient(to bottom, $top-nav-bg 0%,$top-nav-bg-bottom 100%);
 122 }
 123 .navbar.breadcrumbs {
 124     line-height: 50px;
 125     border-radius: 0;
 126     margin-bottom: 0;
 127     border-right: 0;
 128     border-left: 0;
 129 }
 130 .navbar.breadcrumbs .nav > li > a,
 131 .navbar.breadcrumbs .nav > li {
 132     color: #000;
 133 }
 134 .navbar.breadcrumbs .nav > li.nav-separator > i {
 135     color: #bbb;
 136 }
 137 .navbar.breadcrumbs .navbar-form {
 138   margin-top: 0px;
 139   margin-bottom: 0px;
 140 }
 141 .navbar.breadcrumbs .navbar-text {
 142   margin-top: 0px;
 143   margin-bottom: 0px;
 144 }
 145
 146 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a,
 147 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a:focus,
 148 nav.navbar-fixed-top .navbar-nav.navbar-right > li.open > a:hover {
 149     background: lighten($top-nav-bg, 5%);
 150 }
 151 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a,
 152 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a:focus,
 153 nav.navbar-fixed-top .navbar-nav.navbar-right > li > a:hover {
 154     color: #fff;
 155 }
 156
 157 .dax {
 158     max-width: 10%;
 159     margin-right: 1em;
 160     float: left
 161 }
 162
 163 .smart-scroll {
 164     overflow: auto;
 165     margin-bottom: -15px;
 166 }
 167
 168 .infinite-scroller .fa-warning {
 169     color: #800;
 170 }
 171
 172 th[data-sort-order] {
 173     cursor: pointer;
 174 }
 175
 176 .inline-progress-container div.progress {
 177     margin-bottom: 0;
 178 }
 179
 180 .inline-progress-container {
 181     width: 100%;
 182     display:inline-block;
 183 }
 184
 185 td.add-tag-button {
 186     white-space: normal;
 187 }
 188 td.add-tag-button .add-tag-button {
 189     margin-right: 4px;
 190     opacity: 0.2;
 191 }
 192 td.add-tag-button .add-tag-button:hover {
 193     opacity: 1;
 194 }
 195 span.removable-tag-container {
 196     line-height: 1.6;
 197 }
 198 .label.removable-tag a {
 199     color: #fff;
 200     cursor: pointer;
 201 }
 202
 203 li.notification {
 204     padding: 10px;
 205 }
 206
 207 td.trash-project-msg {
 208     white-space: normal;
 209 }
 210
 211 // See HeaderRowFixer in application.js
 212 table.table-fixed-header-row {
 213     width: 100%;
 214     border-spacing: 0px;
 215     margin:0;
 216 }
 217 table.table-fixed-header-row thead {
 218     position:fixed;
 219     background: #fff;
 220 }
 221 table.table-fixed-header-row tbody {
 222     position:relative;
 223     top:1.5em;
 224 }
 225
 226 .dropdown-menu {
 227     max-height: 30em;
 228     overflow-y: auto;
 229 }
 230
 231 .dropdown-menu a {
 232     cursor: pointer;
 233 }
 234
 235 .row-fill-height, .row-fill-height>div[class*='col-'] {
 236     display: flex;
 237 }
 238 .row-fill-height>div[class*='col-']>div {
 239     width: 100%;
 240 }
 241
 242 /* Show editable popover above side-nav */
 243 .editable-popup.popover {
 244     z-index:1055;
 245 }
 246
 247 /* Do not leave space for left-nav */
 248 div#wrapper {
 249   padding-left: 0;
 250 }
 251
 252 .arv-description-as-subtitle {
 253   padding-bottom: 1em;
 254 }
 255 .arv-description-in-table {
 256   height: 4em;
 257   overflow-x: hidden;
 258   overflow-y: hidden;
 259 }
 260 .arv-description-in-table:hover {
 261   overflow-y: auto;
 262 }
 263
 264 .btn.btn-nodecorate {
 265   border: none;
 266 }
 267 svg text {
 268     font-size: 6pt;
 269 }
 270
 271 div.pane-content iframe {
 272   width: 100%;
 273   border: none;
 274 }
 275 span.editable-textile {
 276   display: inline-block;
 277 }
 278 .text-overflow-ellipsis {
 279   white-space: nowrap;
 280   overflow: hidden;
 281   text-overflow: ellipsis;
 282 }
 283 .time-label-divider {
 284   font-size: 80%;
 285   min-width: 1em;
 286   padding: 0px 2px 0px 0px;
 287 }
 288 .task-summary-status {
 289   font-size: 80%;
 290 }
 291 #page-wrapper > div > h2 {
 292   margin-top: 0px;
 293 }
 294
 295 .compute-summary-numbers td {
 296   font-size: 150%;
 297 }
 298
 299 .arv-log-refresh-control {
 300   display: none;
 301 }
 302
 303 /* Hide Angular content until Angular is ready */
 304 [ng\:cloak], [ng-cloak], .ng-cloak {
 305     display: none !important;
 306 }
 307
 308 /* tabs */
 309 ul.nav.nav-tabs {
 310     font-size: 90%
 311 }
 312
 313 .hover-dropdown:hover .dropdown-menu {
 314   display: block;
 315 }
 316
 317 .arv-description-as-subtitle .editable-inline,
 318 .arv-description-as-subtitle .editable-inline .form-group,
 319 .arv-description-as-subtitle .editable-inline .form-group .editable-input,
 320 .arv-description-as-subtitle .editable-inline .form-group .editable-input textarea,
 321 {
 322     width: 98%!important;
 323 }
 324
 325 /* Needed for awesomplete to play nice with bootstrap */
 326 div.awesomplete {
 327     display: block;
 328 }
 329 /* Makes awesomplete listings to be scrollable */
 330 .awesomplete > ul {
 331     max-height: 410px;
 332     overflow-y: auto;
 333 }
 334
 335 .dropdown-menu > li > form > button {
 336     display: block;
 337     padding: 3px 20px;
 338     clear: both;
 339     font-weight: normal;
 340     line-height: 1.428571429;
 341     color: #333333;
 342     white-space: nowrap;
 343     cursor: pointer;
 344     text-decoration: none;
 345     background: transparent;
 346     border-style: none;
 347 }
 348
 349 .dropdown-menu > li > form > button:hover {
 350     text-decoration: none;
 351     color: #262626;
 352     background-color: #f5f5f5;
 353 }