system/system.css

   1 /* Desktop System */
   2
   3 #kit-wallpaper {
   4   position: fixed;
   5   top: 0px;
   6   left: 0px;
   7   height: 100%;
   8   width: 100%;
   9   background: url("./wallpaper/11.jpg");
  10   background-size: cover;
  11   background-position: center;
  12 }
  13
  14 *::selection {
  15   background: rgba(0, 0, 0, .0);
  16 }
  17
  18 section {
  19   position: absolute;
  20   top: 30px;
  21   left: 0px;
  22   min-width: 100%;
  23   min-height: calc(100% - 70px);
  24   display: none;
  25   transition: 1s all ease;
  26   cursor: url(./cursor-1.png), auto;
  27 }
  28
  29 .selected-section {
  30   transform: scale(0.8);
  31   background: rgba(0, 0, 0, .2);
  32   box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
  33 }
  34
  35 .selected-section:before {
  36   color: #ffffff;
  37   text-shadow: 0px 0px 3px black;
  38   top: -40px;
  39   font-size: 20px;
  40   position: absolute;
  41   width: 100%;
  42   text-align: center;
  43   content: "Desktop";
  44 }
  45
  46 #desktop-0 {
  47   display: block;
  48 }
  49
  50 .fas,
  51 .fa {
  52   font-weight: 100;
  53   line-height: 100%;
  54 }
  55
  56 .fa:before {
  57   font-weight: 700;
  58 }
  59
  60 /* Lock */
  61
  62 #desktop-l {
  63   padding: 20px 0;
  64   font-weight: 400;
  65   font-size: 24px;
  66   color: white;
  67   text-align: center;
  68   background: rgba(0, 0, 0, .5);
  69   box-sizing: border-box;
  70   top: 0px;
  71   height: 100%;
  72 }
  73
  74 #desktop-l .window {
  75   font-size: 16px;
  76   color: white;
  77   text-align: left;
  78   text-shadow: none;
  79   font-weight: 400;
  80 }
  81
  82 #lock-unl {
  83   display: block;
  84   cursor: url(./cursor-2.png), pointer;
  85   font-size: 16px;
  86   margin: 20px;
  87 }
  88
  89 #lock-unl:hover {
  90   color: #99d1ff;
  91 }
  92
  93 #lock-unl>span {
  94   display: block;
  95   font-size: 32px;
  96 }
  97
  98 #lock-username {
  99   margin: 10px;
 100   font-size: 40px;
 101 }
 102
 103 #lock-user-icon {
 104   display: inline-block;
 105   background: white;
 106   width: 100px;
 107   height: 100px;
 108   margin-top: 15px;
 109   border-radius: 999px;
 110   box-shadow: 0px 1px 10px 0 rgba(0, 0, 0, .5), inset 0px -2px 15px 5px rgba(255, 255, 255, .4);
 111   border: 3px solid #ffffff;
 112 }
 113
 114 #lock-user-icon:after {
 115   content: "";
 116   display: inline-block;
 117   background: rgba(255, 255, 255, .2);
 118   box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, .1);
 119   width: 100px;
 120   height: 50px;
 121   border-radius: 999px 999px 0px 0px;
 122 }
 123
 124 /* Header */
 125
 126 header {
 127   cursor: url(./cursor-1.png), default;
 128   z-index: 9995;
 129   box-sizing: border-box;
 130   position: fixed;
 131   top: 0px;
 132   left: 0px;
 133   width: 100%;
 134   padding: 3px;
 135   background: #f0f0f0;
 136   color: #3d3d3d;
 137   box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
 138 }
 139
 140 header a {
 141   cursor: url(./cursor-2.png), pointer;
 142   padding: 3px 4px;
 143 }
 144
 145 header a:hover {
 146   text-shadow: 0px 1px 3px dodgerblue;
 147 }
 148
 149 .dropdown {
 150   display: none;
 151   z-index: 9996;
 152   position: fixed;
 153   top: 31px;
 154   right: 0;
 155   background: #f0f0f0;
 156   box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .3);
 157   border-radius: 0 0 5px 5px;
 158 }
 159
 160 #dropdown-clock {
 161   right: 58px;
 162 }
 163
 164 #dropdown-sound {
 165   right: 152px;
 166   padding: 6px;
 167 }
 168
 169 #dropdown-sound-slider {
 170   margin: 10px;
 171   width: 180px;
 172 }
 173
 174 .ui-slider-horizontal {
 175   border-radius: 999px;
 176   border: 1px solid white !important;
 177   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
 178 }
 179
 180 .ui-slider-handle {
 181   outline: none;
 182   border-radius: 999px;
 183   border: 1px solid white !important;
 184   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .5);
 185   cursor: url(./cursor-1.png), auto !important;
 186 }
 187
 188 /* Desktop Icons */
 189
 190 .desktop-icons {
 191   display: flex;
 192   flex-wrap: wrap;
 193   padding: 4px;
 194 }
 195
 196 .desktop-icon {
 197   border-radius: 5px;
 198   padding: 4px;
 199   margin: 4px;
 200   width: 100px;
 201   text-align: center;
 202   overflow: hidden;
 203   color: #fff;
 204 }
 205
 206 .desktop-icon:hover {
 207   background: rgba(0, 0, 0, .5);
 208 }
 209
 210 .desktop-icon img {
 211   display: block;
 212   margin: 0 auto;
 213   height: 50px;
 214 }
 215
 216 .home-icon:before {
 217   line-height: 0px;
 218   display: block;
 219   font-size: 30px;
 220   height: 25px;
 221 }
 222
 223 .home-icon {
 224   font-size: 14px;
 225   display: inline-block;
 226   color: white;
 227   text-shadow: 0px 1px 2px black;
 228   cursor: url(./cursor-1.png), default;
 229   margin: 10px 0px;
 230   padding: 5px;
 231   border-radius: 6px;
 232   text-align: center;
 233   width: 100px;
 234 }
 235
 236 .home-icon:hover {
 237   background: rgba(255, 255, 255, .5);
 238 }
 239
 240 .home-fa {
 241   margin-bottom: 5px;
 242   display: block;
 243   font-size: 32px;
 244 }
 245
 246 /* Footer */
 247
 248 footer {
 249   cursor: url(./cursor-1.png), default;
 250   z-index: 9998;
 251   background: #f0f0f0;
 252   width: 100%;
 253   min-height: 45px;
 254   position: fixed;
 255   left: 0px;
 256   bottom: -5px;
 257   box-sizing: border-box;
 258   box-shadow: 0px 0px 8px rgba(0, 0, 0, .4);
 259   border-top: 5px solid #ffffff;
 260   padding-left: 58px;
 261 }
 262
 263 .footermaximize {
 264   transition: .2s all ease;
 265 }
 266
 267 .footermaximize-hidden {
 268   bottom: -39px !important;
 269 }
 270
 271 footer #launch {
 272   cursor: url(./cursor-2.png), pointer;
 273   position: fixed;
 274   bottom: -2px;
 275   left: -2px;
 276   background: dodgerblue;
 277   border: 2px solid white;
 278   color: white;
 279   padding: 16px;
 280 }
 281
 282 footer .task {
 283   cursor: url(./cursor-1.png), default;
 284   box-sizing: border-box;
 285   display: inline-block;
 286   background: #ffffff;
 287   color: #3d3d3d;
 288   padding: 5px 4px;
 289   border-top: 5px solid #303030;
 290   width: 200px;
 291   margin: 0px 0px;
 292   overflow: hidden;
 293   height: 38px;
 294   font-size: 15px;
 295   margin-top: -5px;
 296 }
 297
 298 footer .task:hover {
 299   background: #f0f0f0;
 300   color: #3d3d3d;
 301 }
 302
 303 footer .t-active {
 304   background: #6060c0;
 305   color: #ffffff;
 306   box-shadow: none !important;
 307   border-top: 5px solid rgb(100, 245, 100) !important;
 308 }
 309
 310 footer .task img {
 311   float: left;
 312   height: 24px;
 313   width: 24px;
 314   margin-right: 4px;
 315 }
 316
 317
 318 footer .task-min {
 319   font-weight: 900;
 320 }
 321
 322 footer .task-min:after {
 323   content: "";
 324   display: block;
 325   background: limegreen;
 326   float: right;
 327   margin-top: 5px;
 328   width: 12px;
 329   height: 12px;
 330   border: 2px solid #404040;
 331   border-radius: 3px;
 332 }
 333
 334 #footer-noti {
 335   position: absolute;
 336   cursor: url(./cursor-2.png), pointer;
 337   padding: 6px;
 338   right: 4px;
 339   bottom: 5px;
 340 }
 341
 342 #footer-noti:hover {
 343   text-shadow: 0px 1px 3px dodgerblue;
 344 }
 345
 346 #footer-tasks {
 347   color: white;
 348   text-shadow: 0px 1px 3px black;
 349   position: absolute;
 350   cursor: url(./cursor-2.png), pointer;
 351   font-size: 22px;
 352   padding: 6px 5px;
 353 }
 354
 355 #tasks {
 356   padding-left: 38px;
 357 }
 358
 359 /* Notifications */
 360
 361 #notifications {
 362   z-index: 9994;
 363   display: none;
 364   box-sizing: border-box;
 365   position: fixed;
 366   top: 0;
 367   right: 0;
 368   min-height: 100%;
 369   max-height: 100%;
 370   width: 340px;
 371   background: #f0f0f0;
 372   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .4);
 373   padding: 40px 8px 50px 8px;
 374   cursor: url(./cursor-1.png), default;
 375 }
 376
 377 #notifications-show-history {
 378   display: block;
 379   text-align: right;
 380 }
 381
 382 .notis {
 383   position: relative;
 384   overflow: hidden;
 385   cursor: url(./cursor-1.png), default;
 386   padding: 4px;
 387   border-radius: 5px;
 388   margin: 10px 4px;
 389   background: #ffffff;
 390 }
 391
 392 .notis .notis_img {
 393   float: left;
 394   max-height: 64px;
 395   max-width: 64px;
 396   margin: 2px;
 397   border-radius: 3px;
 398   z-index: 0;
 399 }
 400
 401 .notis .notis_close {
 402   position: absolute;
 403   right: 4px;
 404   top: 4px;
 405 }
 406
 407 .notis .notis_app {
 408   margin-bottom: 2px;
 409   font-size: 14px;
 410   color: #999999;
 411 }
 412
 413 .notis_app img {
 414   height: 18px;
 415   vertical-align: top;
 416   margin-right: 4px;
 417 }
 418
 419 .notis>span {
 420   display: block;
 421   font-weight: 700;
 422 }
 423
 424 .notis .notis_close {
 425   cursor: url(./cursor-2.png), pointer;
 426   float: right;
 427   background: rgba(255, 100, 100, .8);
 428   width: 16px;
 429   height: 16px;
 430   margin: 2px;
 431   border-radius: 99px;
 432 }
 433
 434 .notis .notis_time {
 435   text-align: right;
 436   font-size: 12px;
 437   color: #c0c0c0;
 438 }
 439
 440 .notis .notis_buttons {
 441   text-align: right;
 442 }
 443
 444 .notis_buttons a {
 445   display: inline-block;
 446   color: dodgerblue;
 447   font-size: 14px;
 448   padding: 2px 6px;
 449   border-radius: 3px;
 450   cursor: pointer;
 451   margin: 2px 3px;
 452 }
 453
 454 .notis_buttons a:hover {
 455   background: #f0f0f0;
 456   box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, .3);
 457 }
 458
 459
 460 /* Last Notification */
 461
 462 #last-notification {
 463   max-height: 200px;
 464   width: 320px;
 465   z-index: 9999;
 466   display: none;
 467   position: fixed;
 468   padding: 4px;
 469   bottom: 54px;
 470   right: 12px;
 471   border-radius: 4px;
 472   cursor: url(./cursor-1.png), default;
 473   background: #ffffff;
 474   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .5);
 475   overflow: hidden;
 476 }
 477
 478 #last-notification-close {
 479   background: red;
 480   width: 15px;
 481   height: 15px;
 482   display: inline-block;
 483   float: right;
 484   border-radius: 999px;
 485   cursor: url(./cursor-2.png), pointer;
 486   opacity: .8;
 487 }
 488
 489 #last-notification-title {
 490   font-weight: 700;
 491 }
 492
 493 #last-notification-img {
 494   float: left;
 495   max-height: 64px;
 496   max-width: 64px;
 497   margin: 2px;
 498   margin-right: 10px;
 499   border-radius: 3px;
 500 }
 501
 502 #last-notification-buttons {
 503   text-align: right;
 504   padding: 6px 0;
 505 }
 506
 507 #last-notification-buttons a {
 508   color: dodgerblue;
 509   border: 1px solid transparent;
 510   transition: .2s all ease;
 511   font-size: 14px;
 512   padding: 2px 6px;
 513   border-radius: 3px;
 514   cursor: pointer;
 515   margin: 0 3px;
 516 }
 517
 518 #last-notification-buttons a:hover {
 519   box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, .3);
 520   background: #ffffff;
 521 }
 522
 523 #last-notification-buttons a:active {
 524   position: relative;
 525   top: 2px;
 526   background: #ffffff;
 527 }
 528
 529 #last-notification-app {
 530   font-size: 12px;
 531   color: #a0a0a0;
 532 }
 533
 534 #last-notification-app img {
 535   height: 16px;
 536   vertical-align: top;
 537   margin-right: 4px;
 538 }
 539
 540 /* Sightre */
 541
 542 #kit-sightre {
 543   position: fixed;
 544   top: 0px;
 545   left: 20%;
 546   width: 60%;
 547   background: rgba(255, 255, 255, .9);
 548   overflow: hidden;
 549   backdrop-filter: blur(4px);
 550   margin: 0;
 551   padding: 0;
 552   border-radius: 0 0 6px 6px;
 553   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .3);
 554   display: none;
 555   z-index: 9995;
 556 }
 557
 558 #kit-sightre input {
 559   all: initial;
 560   font-family: 'Noto Sans JP', sans-serif;
 561   background: transparent;
 562   width: 100%;
 563   font-size: 20px;
 564   padding: 10px;
 565   cursor: url(./cursor-3.png), text;
 566 }
 567
 568 .kit-sightre-result {
 569   padding: 6px;
 570   display: flex;
 571   flex-direction: row;
 572   cursor: url(./cursor-1.png), default;
 573 }
 574
 575 .kit-sightre-result:hover {
 576   transition: .2s all ease;
 577   background: #ffffff;
 578   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
 579 }
 580
 581 .kit-sightre-result.-app {
 582   border-left: 5px solid limegreen;
 583 }
 584
 585 .kit-sightre-result.-file {
 586   border-left: 5px solid orange;
 587 }
 588
 589 .kit-sightre-result.-link {
 590   border-left: 5px solid dodgerblue;
 591 }
 592
 593 .kit-sightre-result.-first {
 594   border-left: 5px solid crimson;
 595 }
 596
 597 .kit-sightre-result .--open {
 598   opacity: 0;
 599   font-size: 24px;
 600   color: #909090;
 601   align-self: center;
 602   margin-right: 15px;
 603 }
 604
 605 .kit-sightre-result:hover .--open {
 606   transition: .2s all ease;
 607   opacity: 1;
 608   margin-right: 5px;
 609 }
 610
 611 .kit-sightre-result .--info {
 612   flex-grow: 1;
 613 }
 614
 615 .kit-sightre-result .--icon {
 616   float: left;
 617   width: 40px;
 618   text-align: center;
 619   margin: 4px 8px 4px 4px;
 620   font-size: 30px;
 621   align-self: center;
 622 }
 623
 624 .kit-sightre-result .--name {
 625   font-size: 18px;
 626   font-weight: 700;
 627 }
 628
 629 .kit-sightre-result .--desc {
 630   font-size: 14px;
 631   color: #909090;
 632 }
 633
 634 /* App Window */
 635
 636 .window {
 637   position: absolute;
 638   box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .5);
 639   border-radius: 4px;
 640   background: transparent;
 641   min-width: 200px;
 642   padding: 0px;
 643   cursor: url(./cursor-1.png), default;
 644 }
 645
 646 .window:after {
 647   visibility: hidden;
 648   content: "_";
 649   position: absolute;
 650   height: 60px;
 651 }
 652
 653 section .ui-draggable-dragging {
 654   box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5), 0 0 0 8px rgba(30, 70, 255, .6);
 655 }
 656
 657 .win-highlight {
 658   box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5), 0 0 0 8px rgba(255, 30, 70, .6);
 659 }
 660
 661 .windowactive {
 662   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .5);
 663 }
 664
 665 .windowmaximize {
 666   position: fixed;
 667   border-radius: none;
 668   overflow: hidden;
 669 }
 670
 671 .windowmaximize:after {
 672   height: 0px;
 673 }
 674
 675 .wt {
 676   display: block;
 677   min-height: 24px;
 678   color: #3d3d3d;
 679   font-size: 17px;
 680   padding: 3px 0;
 681   padding-right: 100px;
 682   border-radius: 4px 4px 0 0;
 683   background: #d0d0d0;
 684 }
 685
 686 .wt:before {
 687   color: white;
 688   text-shadow: 0px 1px 2px black;
 689 }
 690
 691 .wt img {
 692   width: 20px;
 693   height: 20px;
 694   float: left;
 695   margin: 3px;
 696 }
 697
 698 .windowactive>.wt {
 699   background: #f0f0f0;
 700 }
 701
 702 .wtmaximize {
 703   display: none;
 704 }
 705
 706 .windowactive span {
 707   opacity: 1.0;
 708 }
 709
 710 .wmzx {
 711   position: absolute;
 712   top: 0px;
 713   right: 0px;
 714   display: flex;
 715   justify-content: flex-end;
 716 }
 717
 718 .wm {
 719   padding: 8px 8px;
 720   opacity: .6;
 721 }
 722
 723 .wm:hover {
 724   background: dodgerblue;
 725   color: #fff;
 726 }
 727
 728 .wz {
 729   padding: 8px 8px;
 730   opacity: .6;
 731 }
 732
 733 .wz:hover {
 734   background: orange;
 735   color: #fff;
 736 }
 737
 738 .wx {
 739   padding: 8px 10px;
 740   opacity: .6;
 741 }
 742
 743 .wx:hover {
 744   background: #ff0000;
 745   color: white;
 746   border-radius: 0px 4px 0px 0px;
 747 }
 748
 749 .winc {
 750   box-sizing: border-box;
 751   border-top: 1px solid #757575;
 752   color: #3d3d3d;
 753   background: #ffffff;
 754   border-radius: 0px 0px 4px 4px;
 755   padding: 5px;
 756   overflow: hidden !important;
 757   max-width: 100%;
 758 }
 759
 760 /* Utils */
 761
 762 .kit-selectable {
 763   cursor: url(./cursor-3.png), text;
 764 }
 765
 766 .kit-selectable *::selection,
 767 .kit-selectable::selection {
 768   background: #1e90ff;
 769   color: white;
 770 }
 771
 772 .little {
 773   font-size: 14px;
 774 }
 775
 776 h3 {
 777   font-size: 18px;
 778   margin: 0px;
 779   font-weight: normal;
 780 }
 781
 782 /* Task Context */
 783
 784 #task-ctx {
 785   z-index: 9999;
 786   display: none;
 787   position: fixed;
 788   bottom: 0px;
 789   background: #ffffff;
 790   width: 200px;
 791   left: 74px;
 792   box-sizing: border-box;
 793   padding: 6px;
 794   padding-bottom: 10px;
 795   border: 2px solid white;
 796   border-radius: 5px 5px 0px 0px;
 797   border-bottom: none;
 798   box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
 799 }
 800
 801 #task-ctx-name {
 802   font-size: 18px;
 803 }
 804
 805 #task-ctx-ver {
 806   font-size: 14px;
 807   padding-bottom: 5px;
 808   margin-bottom: 5px;
 809   color: #909090;
 810   border-bottom: 1px solid #c0c0c0;
 811 }
 812
 813 #task-ctx a {
 814   cursor: url(./cursor-1.png), default;
 815   display: block;
 816   border-bottom: 1px solid transparent;
 817 }
 818
 819 #task-ctx a:hover {
 820   color: dodgerblue;
 821   border-bottom: 1px solid dodgerblue;
 822 }
 823
 824 #task-ctx-img {
 825   float: left;
 826   height: 26px;
 827   max-width: 30px;
 828 }
 829
 830 /* Power Menu */
 831
 832 #kit-power {
 833   display: none;
 834   position: fixed;
 835   top: 0px;
 836   left: 0px;
 837   box-sizing: border-box;
 838   width: 100%;
 839   height: 100%;
 840   z-index: 10000;
 841   background: rgba(0, 0, 0, 0.5);
 842   text-align: left;
 843 }
 844
 845 #kit-power a {
 846   cursor: url(./cursor-2.png), pointer !important;
 847   display: block;
 848   font-size: 30px;
 849   padding: 10px;
 850   color: white;
 851   text-shadow: 0 2px 5px #000000;
 852 }
 853
 854 #kit-power a:hover {
 855   text-decoration: underline;
 856 }
 857
 858 #kit-power a:after {
 859   display: block;
 860   font-size: 16px;
 861 }
 862
 863 #kit-power-shutdown:after {
 864   content: "アプリケーションを全て終了してシステムを終了します";
 865 }
 866
 867 #kit-power-reboot:after {
 868   content: "シャットダウンし、再びシステムを起動します";
 869 }
 870
 871 #kit-power-suspend:after {
 872   content: "より高速な再起動をします(試験的な機能)";
 873 }
 874
 875 #kit-power-lock:after {
 876   content: "ユーザーからログアウトしロック画面を表示します";
 877 }
 878
 879 /* Context Menu */
 880
 881 #kit-context {
 882   cursor: url(./cursor-1.png), default;
 883   display: none;
 884   z-index: 9993;
 885   position: absolute;
 886   top: 100px;
 887   left: 100px;
 888   background: #f0f0f0;
 889   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
 890   border-radius: 6px;
 891   padding: 0px;
 892   padding-bottom: 4px;
 893 }
 894
 895 #kit-context input {
 896   width: 180px;
 897   margin: 5px;
 898   padding: 2px 5px;
 899   font-size: 15px;
 900 }
 901
 902 #kit-context a {
 903   display: block;
 904   padding: 3px 6px;
 905   font-size: 15px;
 906 }
 907
 908 #kit-context a:hover {
 909   background: #d0d0d0;
 910 }
 911
 912 #kit-context-elem {
 913   color: #a0a0a0;
 914   padding: 0px 5px;
 915 }
 916
 917 #kit-context-size {
 918   color: #a0a0a0;
 919   font-size: 12px;
 920   padding: 0px 5px;
 921   border-bottom: 1px solid #c0c0c0;
 922 }
 923
 924 #kit-context-text,
 925 #kit-context-desktop,
 926 #kit-context-custom {
 927   color: #a0a0a0;
 928   font-size: 15px;
 929   padding: 4px 5px;
 930   border-top: 1px solid #c0c0c0;
 931   border-bottom: 1px solid transparent;
 932 }
 933
 934 /* Tasks */
 935
 936 #kit-tasks {
 937   display: none;
 938   position: fixed;
 939   top: 0px;
 940   left: 0px;
 941   width: 100%;
 942   height: 100%;
 943   box-sizing: border-box;
 944   background: rgba(0, 0, 0, .8);
 945   backdrop-filter: blur(5px);
 946   padding: 20px;
 947   padding-bottom: 120px;
 948   overflow: scroll;
 949 }
 950
 951 #kit-tasks:before {
 952   content: "実行中のアプリケーション ( クリックで強制終了 )";
 953   display: block;
 954   color: #ffffff;
 955 }
 956
 957 #kit-tasks .task {
 958   cursor: url(./cursor-2.png), pointer;
 959   display: inline-block;
 960   color: #f0f0f0;
 961   border: 2px solid #909090;
 962   padding: 4px 8px;
 963   border-radius: 5px;
 964   min-width: 150px;
 965   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .5);
 966   margin: 12px 10px;
 967   opacity: .8;
 968 }
 969
 970 #kit-tasks .task:hover {
 971   opacity: 1.0;
 972   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 1);
 973   border: 2px solid #f0f0f0;
 974 }
 975
 976 #kit-tasks .task:hover:after {
 977   content: "クリックして終了";
 978   display: block;
 979   position: absolute;
 980   color: #e0e0e0;
 981   font-size: 12px;
 982   padding: 5px 0;
 983 }
 984
 985 #kit-tasks .task-min:before {
 986   content: "";
 987   display: block;
 988   background: limegreen;
 989   float: right;
 990   margin-top: 5px;
 991   width: 15px;
 992   height: 15px;
 993   border-radius: 50%;
 994 }
 995
 996 #kit-tasks .task img {
 997   float: left;
 998   height: 24px;
 999 }
1000
1001 /* Launcher */
1002
1003 #launcher {
1004   display: none;
1005   position: fixed;
1006   top: 0px;
1007   left: 0px;
1008   width: 100%;
1009   height: 100%;
1010   box-sizing: border-box;
1011   background: rgba(0, 0, 0, .5);
1012   color: white;
1013 }
1014
1015 #launcher-header {
1016   margin-top: 30px;
1017   padding: 10px;
1018   font-size: 24px;
1019 }
1020
1021 #launcher-header .kit-button {
1022   font-size: 16px;
1023   margin-left: 10px;
1024   float: right;
1025 }
1026
1027 #launcher-apps {
1028   padding: 0 10px;
1029   display: flex;
1030   flex-wrap: wrap;
1031 }
1032
1033 .launcher-app {
1034   border-radius: 5px;
1035   padding: 4px;
1036   margin: 4px;
1037   text-shadow: 0px 0px 3px black;
1038   width: 120px;
1039   max-height: 95px;
1040   overflow: hidden;
1041   text-align: center;
1042 }
1043
1044 .launcher-app:hover {
1045   background: rgba(0, 0, 0, .5);
1046   opacity: .8;
1047   overflow: visible;
1048 }
1049
1050 .launcher-app:active {
1051   filter: brightness(0.6);
1052 }
1053
1054 .launcher-app img {
1055   display: block;
1056   margin: 0 auto;
1057   height: 70px;
1058 }
1059
1060 /* Fusen */
1061
1062 .kit-fusen {
1063   background: rgb(255, 250, 220);
1064   width: 220px;
1065   padding: 4px;
1066   margin: 8px;
1067   border-radius: 6px;
1068   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
1069   position: absolute;
1070   bottom: 20px;
1071   height: 100px;
1072   color: rgba(0, 0, 0, .75);
1073 }
1074
1075 .kit-fusen-textarea {
1076   scrollbar-color: light;
1077   scrollbar-width: thin;
1078   outline: none;
1079   color: #3d3d3d;
1080   cursor: url(./cursor-3.png), text;
1081   margin-left: 10px;
1082   font-family: 'Noto Sans JP', sans-serif;
1083   font-size: 15px;
1084   position: absolute;
1085   background: transparent;
1086   border: none;
1087   resize: none;
1088   width: 180px;
1089   height: 98px;
1090 }