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 /* Job Page */
 147 #tic-job-section {
 148     height: 100%;
 149     padding-top: 70px;
 150     background: #e1e1e1;
 151 }
 152 .job-status-ready {
 153     font-size: 2vh;
 154     display: table-cell;
 155 }
 156 .job-status-done {
 157     font-size: 2vh;
 158     color: blue;
 159     display: table-cell;
 160 }
 161 .job-status-cancel, .job-status-failed {
 162     font-size: 2vh;
 163     color: red;
 164     display: table-cell;
 165 }
 166 .job-status-inprogress {
 167     font-size: 2vh;
 168     color: green;
 169     display: table-cell;
 170 }
 171 #tic-job-list {
 172     height: calc(100vh - 285px);
 173     display: inline-block;
 174     width: 100%;
 175     text-align: center;
 176 }
 177 #tic-job-section .panel-heading .pull-right {
 178     margin-top: -20px;
 179 }
 180 #tic-job-section .navbar-form {
 181     padding: 0px;
 182 }
 183 #tic-job-section .table {
 184     margin-bottom: 0px;
 185 }
 186 #tic-job-list .tic-job-list-btn {
 187     min-width: 10px;
 188     padding: 3px 7px;
 189     font-size: 12px;
 190     font-weight: bold;
 191     line-height: 1;
 192     color: #fff;
 193     text-align: center;
 194     white-space: nowrap;
 195     vertical-align: middle;
 196     border-radius: 10px;
 197     background-color: slategray;
 198 }
 199 #tic-job-list .btndownload {
 200     background-color: lightseagreen;
 201 }
 202 #tic-job-list .btnnotactive {
 203     pointer-events: none;
 204     cursor: defulat;
 205     background-color: rgba(47, 45, 45, 0.48);
 206     opacity: 0.6;
 207 }
 208 .empty_job_table_row > td {
 209     height: 40px;
 210     overflow: hidden;
 211 }
 212 .job_table_row {
 213     width: 100%;
 214 }
 215 .extended_job_table_row {
 216     border: 1px solid #eee;
 217     border-radius: 3px;
 218     line-height: 12vh;
 219     overflow: scroll;
 220     font-size: 12px;
 221     background-color: rgba(13, 19, 14, 0.71);
 222     color: #ddd;
 223     text-align: left;
 224 }
 225 td.extended_job_table_container > div {
 226     width: 100%;
 227     height: 100%;
 228     overflow: auto;
 229 }
 230 td.extended_job_table_container {
 231     height: 13vh;
 232 }
 233 tr.extended_job_table_row:hover {
 234     background-color: rgba(13, 19, 14, 0.71);
 235 }
 236 tr.extended_job_table_row:hover td {
 237     background-color: transparent;
 238 }
 239
 240 .tic-job-table {
 241     height: calc(100vh - 285px);
 242     width: 100%;
 243     text-align: center;
 244     table-layout: fixed;
 245     border-collpase: collapse;
 246 }
 247 .tic-job-table thead {
 248     width: 100%;
 249     min-width: 480px;
 250     display: block;
 251 }
 252 .tic-job-table tbody {
 253     min-width: 480px;
 254     display: block;
 255     overflow-y: auto;
 256     overflow-x: hidden;
 257     height: calc(100vh - 323px);
 258 }
 259 .tic-job-table th {
 260     height: 38px;
 261     white-space: nowrap;
 262     vertical-align: middle;
 263     background-color: rgba(51, 122, 183, 0.12);
 264     color: steelblue;
 265 }
 266 .tic-job-table th, .tic-job-table td {
 267     width: 100%;
 268     text-overflow: ellipsis;
 269     text-align: center;
 270 }
 271 .tic-job-table th:nth-child(1),
 272 .tic-job-table td:nth-child(1) {
 273     width: 71px;
 274     min-width: 41px;
 275     display:table-cell;
 276 }
 277 .tic-job-table th:nth-child(2),
 278 .tic-job-table td:nth-child(2) {
 279     width: 90px;
 280     min-width: 60px;
 281 }
 282 .tic-job-table th:nth-child(3),
 283 .tic-job-table td:nth-child(3) {
 284     width: 12px;
 285     min-width: 90px;
 286 }
 287 .tic-job-table th:nth-child(4),
 288 .tic-job-table td:nth-child(4) {
 289     width: 120px;
 290     min-width: 90px;
 291 }
 292 .tic-job-table th:nth-child(8) {
 293     width: 174px;
 294     min-width: 174px;
 295 }
 296 .tic-job-table td:nth-child(8) {
 297     width: 160px;
 298     min-width: 160px;
 299 }
 300 .tic-job-table th:nth-child(6),
 301 .tic-job-table td:nth-child(6) {
 302     width: 120px;
 303     min-width: 90px;
 304 }
 305 .tic-job-table th:nth-child(7),
 306 .tic-job-table td:nth-child(7) {
 307     width: 120px;
 308     min-width: 90px;
 309 }
 310
 311 #tic-job-list-pagination {
 312     float: right;
 313     text-align: center;
 314 }
 315
 316 /* Image Page */
 317 #tic-image-section {
 318     height: 100%;
 319     padding-top: 70px;
 320     background: #e1e1e1;
 321 }
 322 #tic-image-new-container {
 323     height: calc(50vh - 183px);
 324     display: inline-block;
 325     overflow: auto;
 326 }
 327 #tic-image-list {
 328     display: inline-block;
 329     overflow: auto;
 330     text-overflow: ellipsis;
 331     width: 100%;
 332 }
 333
 334 /* Image List Item */
 335 .image-list-name {
 336     font-weight: bold;
 337     text-overflow: ellipsis;
 338     white-space:nowrap;
 339     display:inline-block;
 340     min-width: 350px;
 341     overflow: hidden;
 342     color: #31708f;
 343     float: left;
 344     margin-bottom: 8px;
 345     width: 75%;
 346 }
 347 .image-list-name-btndownload {
 348     float: left;
 349     min-width: 10px;
 350     padding-right: 4px;
 351 }
 352 .image-list-detail {
 353     padding-left: 10px;
 354     font-size: smaller;
 355     text-overflow: ellipsis;
 356     white-space:nowrap;
 357     overflow: hidden;
 358     display: table-row;
 359 }
 360 .image-list-btndownload {
 361     min-width: 10px;
 362     padding: 3px 7px;
 363     font-size: 12px;
 364     font-weight: bold;
 365     line-height: 1;
 366     color: #fff;
 367     text-align: center;
 368     white-space: nowrap;
 369     vertical-align: middle;
 370     background-color: #337ab7;
 371     border-radius: 10px;
 372 }
 373 .image-item {
 374     overflow: hidden;
 375 }
 376 .image-item-title {
 377     width: 100%;
 378     float: left;
 379     height: 35px;
 380 }
 381 .image-item-info {
 382     width: 100%;
 383     float: left;
 384     display: table;
 385     padding-top: 20px;
 386     height: 120px;
 387 }
 388 #tic-image-list-content {
 389     height: calc(100vh - 260px);
 390     display: inline-block;
 391     width: 100%;
 392 }
 393 #tic-image-list-pagination {
 394     float: right;
 395     text-align: center;
 396 }
 397
 398 /* Settings Page */
 399 #tic-settings-section {
 400     height: 100%;
 401     padding-top: 70px;
 402     background: #e1e1e1;
 403 }
 404
 405 #tic-repository-toolbar {
 406     margin-bottom: 10px;
 407 }
 408
 409 /* Sortable Repo List */
 410 .dragged {
 411     position: absolute;
 412     opacity: 0.5;
 413     z-index: 2000;
 414 }
 415 #tic-repository-list li {
 416     cursor: move;
 417     display: block;
 418     padding: 5px;
 419     border: 1px solid #CCC;
 420     color: #08c;
 421     background: #eee;
 422     max-width: 100%;
 423 }
 424 #tic-repository-list li.placeholder {
 425     position: relative;
 426     margin: 0;
 427     padding: 0;
 428     border: none;
 429     content: "";
 430 }
 431 #tic-repository-list li.placeholder:before {
 432     position: absolute;
 433     content: "";
 434     width: 0;
 435     height: 0;
 436     margin-top: -5px;
 437     left: -5px;
 438     top: -4px;
 439     border: 5px solid transparent;
 440     border-left-color: #f00;
 441     border-right: none;
 442 }
 443 .tic-repository-url {
 444     overflow: hidden;
 445     white-space: nowrap;
 446     text-overflow: ellipsis;
 447     width: 90%;
 448     display: inline-block;
 449     vertical-align: middle;
 450 }
 451
 452 /* Log View*/
 453 .log-view-content {
 454     z-index: 1982;
 455     background-color: #f9f9f9;
 456     border: 1px solid #ccc;
 457     border-radius: 5px;
 458     position: fixed;
 459 }
 460 .log-view-content-header {
 461     border-bottom-color: #ccc;
 462     border-bottom-style: solid;
 463     border-bottom-width: thin;
 464 }
 465 .log-view-content-close {
 466     margin-right: 7px;
 467     margin-top: -7px;
 468     font-size: 20px;
 469 }
 470 .log-view-content-header-title {
 471     margin-left: 10px;
 472     margin-top: 10px;
 473     color: darkslategray;
 474 }
 475 .log-view-content-body {
 476     margin-left: 10px;
 477     margin-right: 10px;
 478     margin-bottom: 10px;
 479     background-color: rgba(234, 230, 230, 0.78);
 480     margin-top: 10px;
 481     height: calc(100% - 66px);
 482     border-color: gray;
 483     border-style: solid;
 484     border-width: thin;
 485     padding: 4px;
 486     overflow-y: scroll;
 487     white-space: pre-line;
 488 }
 489 a.log-view-content-download {
 490     color: cadetblue;
 491     float: right;
 492     margin-right: 40px;
 493     margin-top: -20px;
 494     cursor: pointer;
 495     font-size: 11px;
 496     font-weight: bold;
 497 }