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