system/theme/theme-light.css

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