public/src/css/style.css

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