system/theme/theme-default.css

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