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