public/src/css/style.css

   1 /*
   2  * Copyright (c) 2017 Samsung Electronics Co., Ltd
   3  *
   4  * Licensed under the Flora License, Version 1.1 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *     http://floralicense.org/license/
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 /* Common */
  18 body {
  19     width: 100%;
  20     height: 100%;
  21 }
  22
  23 @media(min-width:992px) {
  24     .navbar {
  25         -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
  26         -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
  27         transition: background .5s ease-in-out,padding .5s ease-in-out;
  28     }
  29
  30     .top-nav-collapse {
  31         padding: 0;
  32     }
  33 }
  34
  35 .modal {
  36   text-align: center;
  37 }
  38
  39 @media screen and (min-width: 992px) {
  40   .modal:before {
  41     display: inline-block;
  42     vertical-align: middle;
  43     content: " ";
  44     height: 100%;
  45   }
  46 }
  47
  48 .badge {
  49     background-color: #337ab7;
  50 }
  51
  52 /* Modal Dialog */
  53 .modal-dialog {
  54     display: inline-block;
  55     text-align: center;
  56     vertical-align: middle;
  57 }
  58 @media(max-width:768px) {
  59     .modal-dialog {
  60         display: inline-block;
  61         text-align: center;
  62         vertical-align: middle;
  63         width: 100%;
  64     }
  65 }
  66
  67 .modal-body {
  68     word-wrap: break-word;
  69 }
  70
  71 /* Main Navigator Bar */
  72 .navbar-brand {
  73     padding: 10px 15px;
  74 }
  75
  76 #tic-brand-img {
  77     display: inline;
  78 }
  79
  80 .tic-page-scroll {
  81     font-size: 16px;
  82 }
  83
  84 /* Login and Logout Menu */
  85 #tic-page-login-dropdown-menu, #tic-page-logout-dropdown-menu {
  86     min-width: 250px;
  87     padding: 14px 14px 0;
  88     overflow: hidden;
  89     background-color: rgba(255,255,255,.8);
  90 }
  91
  92 #tic-page-login-dropdown-menu .help-block, #tic-page-logout-dropdown-menu .help-block {
  93     font-size: 12px;
  94 }
  95
  96 #tic-page-login-dropdown-menu .bottom, #tic-page-logout-dropdown-menu .bottom {
  97     background-color: rgba(255,255,255,.8);
  98     border-top: 1px solid #ddd;
  99     clear: both;
 100     padding: 14px;
 101 }
 102
 103 #tic-page-login-dropdown-menu .social-buttons, #tic-page-logout-dropdown-menu .social-buttons {
 104     margin: 12px 0;
 105 }
 106
 107 #tic-page-login-dropdown-menu .social-buttons a, #tic-page-logout-dropdown-menu .social-buttons a {
 108     width: 49%;
 109 }
 110
 111 #tic-page-login-dropdown-menu .form-group, #tic-page-logout-dropdown-menu .form-group {
 112     margin-bottom: 10px;
 113 }
 114
 115 @media(max-width:768px) {
 116     #tic-page-login-dropdown-menu, #tic-page-logout-dropdown-menu {
 117         background-color: inherit;
 118         color: #fff;
 119     }
 120     #tic-page-login-dropdown-menu .bottom, #tic-page-logout-dropdown-menu .bottom {
 121         background-color: inherit;
 122         border-top:0 none;
 123     }
 124 }
 125
 126 /* Package Page */
 127 #tic-package-section {
 128     height: 100%;
 129     padding-top: 70px;
 130     background: #e1e1e1;
 131 }
 132
 133 #tic-package-left-col-tree-toolbar, #tic-package-left-col-tree {
 134     padding-top: 10px;
 135 }
 136
 137 #tic-package-left-col-tree {
 138     height: calc(100vh - 200px);
 139     overflow: auto;
 140 }
 141
 142 #tic-package-left-col-tree .list-group-item {
 143     padding: 3px 10px;
 144 }
 145
 146 /* Package Toolbar filter-clear button */
 147 ::-ms-clear {
 148     display: none;
 149 }
 150 .form-control-clear {
 151     z-index: 10;
 152     pointer-events: auto;
 153     cursor: pointer;
 154 }
 155
 156 #tic-package-info-table, #tic-package-summary {
 157     height: calc(50vh - 183px);
 158     display: inline-block;
 159     overflow: auto;
 160 }
 161
 162 /* Bootstrap Treeview */
 163 .treeview .node-disabled {
 164     display: none;
 165 }
 166
 167 /* Job Page */
 168 #tic-job-section {
 169     height: 100%;
 170     padding-top: 70px;
 171     background: #e1e1e1;
 172 }
 173 .job-status-ready {
 174     font-size: 2vh;
 175 }
 176 .job-status-done {
 177     font-size: 2vh;
 178     color: #337ab7;
 179 }
 180 .job-status-cancel {
 181     font-size: 2vh;
 182     color: #2d2222;
 183 }
 184 .job-status-failed {
 185     font-size: 2vh;
 186     color: #e05151;
 187 }
 188 .job-status-inprogress {
 189     font-size: 2vh;
 190     color: #2aa730;
 191 }
 192 #tic-job-list {
 193     height: calc(100vh - 285px);
 194     display: inline-block;
 195     width: 100%;
 196     text-align: center;
 197 }
 198 #tic-job-section .panel-heading .pull-right {
 199     margin-top: -20px;
 200 }
 201 #tic-job-section .navbar-form {
 202     padding: 0px;
 203 }
 204 #tic-job-section .table {
 205     margin-bottom: 0px;
 206 }
 207 #tic-job-list .tic-job-list-btn {
 208     min-width: 10px;
 209     padding: 3px 7px;
 210     font-size: 12px;
 211     font-weight: bold;
 212     color: #fff;
 213     text-align: center;
 214     white-space: nowrap;
 215     vertical-align: middle;
 216     border-radius: 10px;
 217     background-color: slategray;
 218 }
 219 #tic-job-list .btndownload {
 220     background-color: #337ab7;
 221 }
 222 #tic-job-list .btnnotactive {
 223     pointer-events: none;
 224     cursor: default;
 225     background-color: rgba(47, 45, 45, 0.48);
 226     opacity: 0.6;
 227 }
 228 #tic-job-list .btnbiglog {
 229     cursor: pointer;
 230 }
 231 #tic-job-list .btnlogactive {
 232     background-color: blue;
 233     animation-name: btnlogflash;
 234         animation-duration: 1s;
 235         animation-timing-function: linear;
 236         animation-iteration-count: infinite;
 237
 238         /* Chrome 4+, Safari 4+, Opera 15+ */
 239         -webkit-animation-name: btnlogflash;
 240         -webkit-animation-duration: 1s;
 241         -webkit-animation-timing-function: linear;
 242         -webkit-animation-iteration-count: infinite;
 243
 244         /* Firefox 5+ */
 245         -moz-animation-name: btnlogflash;
 246         -moz-animation-duration: 1s;
 247         -moz-animation-timing-function: linear;
 248         -moz-animation-iteration-count: infinite
 249 }
 250 @keyframes btnlogflash {
 251         0% { opacity: 1.0 }
 252         50% { opacity: 0.5 }
 253         100% { opacity: 1.0 }
 254 }
 255 /* Chrome 4+, Safari 4+, Opera 15+ */
 256 @-webkit-keyframes btnlogflash {
 257         0% { opacity: 1.0 }
 258         50% { opacity: 0.5 }
 259         100% { opacity: 1.0 }
 260 }
 261 /* Firefox 5+ */
 262 @-moz-keyframes btnlogflash {
 263         0% { opacity: 1.0 }
 264         50% { opacity: 0.5 }
 265         100% { opacity: 1.0 }
 266 }
 267
 268 .empty_job_table_row {
 269     padding: 8px 0px 8px 0px;
 270     text-align: left;
 271     overflow: hidden;
 272     margin: 0px;
 273 }
 274 .job_table_row {
 275     width: 100%;
 276     margin: 0px;
 277     padding: 8px 0px 8px 0px;
 278     text-align: center;
 279     text-overflow: ellipsis;
 280     display: inline-block;
 281 }
 282 .extended_job_table_row {
 283     border: 1px solid #eee;
 284     border-radius: 3px;
 285     background-color: rgba(13, 19, 14, 0.71);
 286     color: #ddd;
 287     font-size: 12px;
 288     text-align: left;
 289     text-overflow: ellipsis;
 290     overflow: auto;
 291     white-space: pre;
 292     width: 100%;
 293     height: 13vh;
 294     margin: 0px;
 295     padding: 4px;
 296     overflow-y: auto;
 297     overflow-x: hidden;
 298 }
 299 .tic-job-table {
 300     height: calc(100vh - 285px);
 301     width: 100%;
 302     text-align: center;
 303 }
 304 .tic-job-table-body {
 305     overflow-y: auto;
 306     overflow-x: hidden;
 307     height: calc(100vh - 323px);
 308 }
 309 .tic-job-table-body, .tic-job-table-header {
 310     width: 100%;
 311     min-width: 480px;
 312     display: block;
 313 }
 314 .tic-job-table ::-webkit-scrollbar {
 315   -webkit-appearance: none;
 316   width: 7px;
 317 }
 318 .tic-job-table ::-webkit-scrollbar-thumb {
 319   border-radius: 4px;
 320   background-color: rgb(193, 193, 193);
 321   -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
 322 }
 323 .tic-job-table-header {
 324     margin: 0px;
 325     padding: 7px 0px 7px 0px;
 326     white-space: nowrap;
 327     background-color: rgba(51, 122, 183, 0.12);
 328     color: steelblue;
 329     width: 100%;
 330     text-overflow: ellipsis;
 331     text-align: center;
 332     font-weight: bold;
 333 }
 334 .tic-job-table-body {
 335     text-align: center;
 336     margin: 0px;
 337 }
 338
 339 #tic-job-list-pagination {
 340     float: right;
 341     text-align: center;
 342 }
 343
 344 /* Image Page */
 345 #tic-image-section {
 346     height: 100%;
 347     padding-top: 70px;
 348     background: #e1e1e1;
 349 }
 350 #tic-image-new-container {
 351     height: calc(50vh - 183px);
 352     display: inline-block;
 353     overflow: auto;
 354 }
 355 #tic-image-list {
 356     display: inline-block;
 357     overflow: auto;
 358     text-overflow: ellipsis;
 359     width: 100%;
 360 }
 361
 362 /* Image List Item */
 363 .image-list-name {
 364     font-weight: bold;
 365     text-overflow: ellipsis;
 366     white-space:nowrap;
 367     display:inline-block;
 368     min-width: 350px;
 369     overflow: hidden;
 370     color: #31708f;
 371     float: left;
 372     margin-bottom: 8px;
 373     width: 75%;
 374     font-size: 1.18em;
 375 }
 376 .image-list-name-btndownload {
 377     float: left;
 378     min-width: 10px;
 379     padding-right: 4px;
 380 }
 381 .image-list-detail {
 382     padding-left: 10px;
 383     font-size: smaller;
 384     text-overflow: ellipsis;
 385     white-space:nowrap;
 386     overflow: hidden;
 387 }
 388 .image-list-detail > b {
 389     display: inline-block;
 390     width: 100px;
 391 }
 392 .image-list-btndownload {
 393     min-width: 10px;
 394     padding: 3px 7px;
 395     font-size: 12px;
 396     font-weight: bold;
 397     line-height: 1;
 398     color: #fff;
 399     text-align: center;
 400     white-space: nowrap;
 401     vertical-align: middle;
 402     background-color: #337ab7;
 403     border-radius: 10px;
 404 }
 405 .image-item {
 406     overflow: hidden;
 407 }
 408 .image-item-title {
 409     width: 100%;
 410     float: left;
 411     height: 35px;
 412 }
 413 .image-item-info {
 414     width: 100%;
 415     float: left;
 416     display: table;
 417     padding-top: 20px;
 418     height: 120px;
 419 }
 420 #tic-image-list-content {
 421     height: calc(100vh - 260px);
 422     display: inline-block;
 423     width: 100%;
 424 }
 425 #tic-image-list-pagination {
 426     float: right;
 427     text-align: center;
 428 }
 429
 430 /* Settings Page */
 431 #tic-settings-section {
 432     height: 100%;
 433     padding-top: 70px;
 434     background: #e1e1e1;
 435 }
 436
 437 #tic-settings-recipe-toolbar {
 438     margin-bottom: 10px;
 439 }
 440
 441 /* Sortable Repo List */
 442 .dragged {
 443     position: absolute;
 444     opacity: 0.5;
 445     z-index: 2000;
 446 }
 447 #tic-recipe-list li {
 448     cursor: move;
 449     display: block;
 450     padding: 5px;
 451     border: 1px solid #CCC;
 452     color: #333;
 453     background: #eee;
 454     max-width: 100%;
 455 }
 456 #tic-recipe-list li.placeholder {
 457     position: relative;
 458     margin: 0;
 459     padding: 0;
 460     border: none;
 461     content: "";
 462 }
 463 #tic-recipe-list li.placeholder:before {
 464     position: absolute;
 465     content: "";
 466     width: 0;
 467     height: 0;
 468     margin-top: -5px;
 469     left: -5px;
 470     top: -4px;
 471     border: 5px solid transparent;
 472     border-left-color: #f00;
 473     border-right: none;
 474 }
 475 .tic-recipe-name {
 476     overflow: hidden;
 477     white-space: nowrap;
 478     text-overflow: ellipsis;
 479     width: 90%;
 480     display: inline-block;
 481     vertical-align: middle;
 482 }
 483
 484 /* Log View*/
 485 .log-view-content {
 486     z-index: 1982;
 487     background-color: #f9f9f9;
 488     border: 1px solid #ccc;
 489     border-radius: 5px;
 490     position: fixed;
 491 }
 492 .log-view-content-header {
 493     border-bottom-color: #ccc;
 494     border-bottom-style: solid;
 495     border-bottom-width: thin;
 496 }
 497 .log-view-content-close {
 498     margin-right: 10px;
 499     margin-top: 0px;
 500     font-size: 21px;
 501 }
 502 .log-view-content-header-title {
 503     margin-left: 10px;
 504     margin-top: 10px;
 505     color: darkslategray;
 506 }
 507 .log-view-content-body {
 508     margin-left: 10px;
 509     margin-right: 10px;
 510     margin-bottom: 10px;
 511     background-color: rgba(234, 230, 230, 0.78);
 512     margin-top: 10px;
 513     height: calc(100% - 66px);
 514     border-color: gray;
 515     border-style: solid;
 516     border-width: thin;
 517     padding: 4px;
 518     overflow-y: scroll;
 519     white-space: pre-line;
 520 }
 521 a.log-view-content-download {
 522     float: right;
 523     margin-right: 50px;
 524     margin-top: -30px;
 525     cursor: pointer;
 526     font-size: 1.5em;
 527     font-weight: bold;
 528 }
 529
 530
 531 /* Import Dialog */
 532 #tic-import-dialog .form-group {
 533     margin-bottom: 0px;
 534     padding-right: 0px;
 535     padding-left: 0px;
 536 }
 537
 538 .dropzone {
 539     min-height: 0px;
 540     border: 2px dashed #0087F7;
 541     border-radius: 5px;
 542     padding: 0px;
 543     margin-bottom: 10px;
 544 }
 545
 546 .dropzone .dz-preview .dz-progress  {
 547     margin-top: -15px;
 548 }