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