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 .task-min{
 287         font-weight: 900;
 288 }
 289 footer .task-min:after{
 290         content: "";
 291         display: inline-block;
 292         background: limegreen;
 293         float: right;
 294         margin-top: 6px;
 295         width: 10px;
 296         height: 10px;
 297         border: 2px solid #404040;
 298 }
 299 #footer-noti{
 300         position: absolute;
 301         cursor:url(../cursor-2.png), pointer;
 302         padding: 6px;
 303         right : 4px;
 304         bottom : 5px;
 305 }
 306 #footer-noti:hover{
 307         color: dodgerblue;
 308 }
 309 #footer-tasks{
 310         color: #000000;
 311         position: absolute;
 312         cursor:url(../cursor-2.png), pointer;
 313         font-size: 22px;
 314         padding: 6px 0px;
 315 }
 316 #footer-tasks:hover{
 317         color: dodgerblue;
 318 }
 319 #notifications{
 320         z-index: 9995;
 321         display: none;
 322         box-sizing: border-box;
 323         position: fixed;
 324         right: 0px;
 325         min-height: 100%;
 326         max-height: 100%;
 327         width: 250px;
 328         background: #e0e0e0;
 329         padding: 30px 4px 50px 4px;
 330 }
 331 #notifications-show-history{
 332         display: block;
 333         text-align: right;
 334 }
 335 #notifications .notis{
 336         cursor: url(../cursor-1.png), default;
 337         border: 1px solid #a0a0a0;
 338         padding: 2px;
 339         margin: 6px 4px;
 340         background: #ffffff;
 341         font-size: 15px;
 342 }
 343 #notifications .notis:hover{
 344         border: 1px solid #505050;
 345         background: #e0e0e0;
 346 }
 347 .notis > span{
 348         display: block;
 349         font-weight: 700;
 350 }
 351 .notis_close{
 352         cursor:url(../cursor-2.png), pointer;
 353         float: right;
 354         background: red;
 355         width: 13px;
 356         height: 13px;
 357         margin: 2px;
 358 }
 359 .notis_time{
 360         font-size: 13px;
 361         color: #909090;
 362 }
 363 #tasks{
 364         padding-left: 28px;
 365 }
 366 .window{
 367         font-size: 15px;
 368         position: absolute;
 369         min-width : 200px;
 370         max-width: 100%;
 371         padding : 0px;
 372         cursor:url(../cursor-1.png), default;
 373         background: #FFF7D4;
 374         border: 1px solid #404040;
 375         transition: none;
 376 }
 377 .window:after{
 378         visibility: hidden;
 379         content: "_";
 380         position: absolute;
 381         height: 44px;
 382 }
 383 section .ui-draggable-dragging{
 384         box-shadow: 0px 2px 10px 0px rgba(0,0,0,.5), 0px 0px 0px 8px rgba(30,70,255,.6);
 385 }
 386 .win-highlight{
 387         background: white;
 388 }
 389 .windowactive{
 390         border: 1px solid black;
 391 }
 392 .windowactive .wt{
 393         background: #90a0f0;
 394 }
 395 .wt{
 396         display: block;
 397         color: #000000;
 398         font-size: 16px;
 399         padding-top: 2px;
 400 }
 401 .wt:before{
 402         color: white;
 403         text-shadow: 0px 1px 2px black;
 404 }
 405 .wt img{
 406         width: 18px;
 407         height: 18px;
 408         float: left;
 409         margin: 3px;
 410 }
 411 .wtmaximize{
 412         display: none;
 413 }
 414 .windowactive span{
 415         opacity: 1.0;
 416 }
 417 .wmzx{
 418         position: absolute;
 419         top: 0px;
 420         right: 0px;
 421         font-size: 12px;
 422         display: flex;
 423   justify-content: flex-end;
 424 }
 425 .wm{
 426         padding: 8px 8px;
 427         opacity: .6;
 428 }
 429 .wm:hover{
 430         background: dodgerblue;
 431         color: #fff;
 432 }
 433 .wz{
 434         padding: 8px 8px;
 435         opacity: .6;
 436 }
 437 .wz:hover{
 438         background: orange;
 439         color: #fff;
 440 }
 441 .wx{
 442         cursor:url(../cursor-1.png), default;
 443         padding: 8px 10px;
 444         float: right;
 445         opacity: .6;
 446 }
 447 .wx:hover{
 448         background: #ff0000;
 449         color: white;
 450 }
 451 .winc{
 452         box-sizing: border-box;
 453         border-top : 1px solid #757575;
 454         color: #000000;
 455         background: #ffffff;
 456         padding : 5px;
 457         overflow : hidden;
 458 }
 459 .kit-button{
 460         display: inline-block;
 461         cursor:url(../cursor-1.png), default;
 462         line-height: 200%;
 463         background: dodgerblue;
 464         color: #ffffff;
 465         padding: 0px 10px;
 466         margin: 4px 1px 0px;
 467         text-decoration: none;
 468         border: 1px solid #ffffff;
 469 }
 470 .kit-button:hover{
 471         border: 1px solid black;
 472 }
 473 .kit-button:active{
 474         position: relative;
 475         top: 2px;
 476 }
 477 .kit-selectable{
 478           cursor:url(../cursor-3.png), text;
 479 }
 480 .kit-selectable *::selection, .kit-selectable::selection{
 481     background: dodgerblue;
 482     color: white;
 483 }
 484 #task-ctx{
 485         z-index: 9999;
 486         display: none;
 487         position: absolute;
 488         bottom: 0px;
 489         background: rgb(222,222,222);
 490         width: 175px;
 491         left : 74px;
 492         box-sizing: border-box;
 493         padding : 6px;
 494         padding-bottom: 8px;
 495         margin-top: 24px;
 496         border : 2px solid white;
 497         font-size: 15px;
 498 }
 499 #task-ctx-name{
 500         font-size: 16px;
 501 }
 502 #task-ctx-ver{
 503         font-size: 12px;
 504         padding-bottom : 5px;
 505         margin-bottom: 5px;
 506         border-bottom: 1px solid gray;
 507 }
 508 #task-ctx a{
 509         cursor:url(../cursor-1.png), default;
 510         display: block;
 511         border-bottom : 2px solid transparent;
 512 }
 513 #task-ctx a:hover{
 514         color: dodgerblue;
 515         border-bottom: 2px solid dodgerblue;
 516 }
 517 #task-ctx-img{
 518         float: left;
 519         height : 26px;
 520         max-width: 30px;
 521 }
 522
 523 #milp{
 524         outline: none;
 525         width: 200px;
 526         font-family: 'Noto Sans JP', sans-serif;
 527         position: absolute;
 528         top:0px;
 529         border: none;
 530         font-size: 15px;
 531         padding: 1px 4px;
 532         color: #fff;
 533         background: #444;
 534         margin: 0px 4px;
 535         font-weight: 100;
 536 }
 537 h3{
 538         font-size: 18px;
 539         margin: 0px;
 540         font-weight: normal;
 541 }
 542 .btn{
 543         cursor:url(../cursor-2.png), pointer;
 544         border: 1px solid gray;
 545         margin: 4px 0px;
 546         padding: 2px 4px;
 547         background: #f0f0f0;
 548 }
 549 .btn:hover{
 550         border: 1px solid black;
 551         background: #e0e0e0;
 552 }
 553 .little{
 554         font-size: 13px;
 555 }
 556 .textbox{
 557         cursor:url(../cursor-3.png), text;
 558         outline: none;
 559         border: 1px solid #000000;
 560         font-size: 16px;
 561         padding: 3px;
 562         font-family: 'Noto Sans JP', sans-serif;
 563 }
 564 .textbox::selection{
 565     background: dodgerblue;
 566     color: white;
 567 }
 568 .task-name{
 569         font-family: 'Noto Sans JP', sans-serif;
 570 }
 571 .kit-hyperlink{
 572         color: dodgerblue;
 573         text-decoration: underline;
 574         cursor:url(../cursor-2.png), pointer;
 575 }
 576 #kit-power{
 577         display: none;
 578         position: fixed;
 579         top: 0px;
 580         left: 0px;
 581         box-sizing: border-box;
 582         width: 100%;
 583         height: 100%;
 584         z-index: 10000;
 585         background: #000000;
 586         transition: none;
 587         text-align: center;
 588 }
 589 #kit-power a{
 590         cursor:url(../cursor-2.png), pointer!important;
 591         display: block;
 592         font-size: 20px;
 593         font-weight: 100;
 594         padding: 5px 0;
 595         color: white;
 596         transition: .1s all ease;
 597 }
 598 #kit-power a:hover{
 599         color: cyan;
 600 }
 601 #kit-power a:after{
 602         display: block;
 603         font-size: 13px;
 604 }
 605 #kit-power-shutdown:after{
 606         content: "アプリケーションを全て終了してシステムを終了します";
 607 }
 608 #kit-power-reboot:after{
 609         content: "シャットダウンし、再びシステムを起動します";
 610 }
 611 #kit-power-suspend:after{
 612         content: "起動中のアプリケーションの情報を保持して終了します";
 613 }
 614 #kit-power-lock:after{
 615         content: "ユーザーからログアウトしロック画面を表示します";
 616 }
 617
 618 #kit-context{
 619         cursor:url(../cursor-1.png), default;
 620         display: none;
 621         z-index: 9994;
 622         position: absolute;
 623         top: 100px;
 624         left: 100px;
 625         background: white;
 626         border: 1px solid #606060;
 627         padding: 0px;
 628         padding-bottom: 3px;
 629 }
 630 #kit-context input{
 631         width: 180px;
 632         margin: 5px;
 633         padding: 2px 5px;
 634         font-size: 14px;
 635 }
 636 #kit-context a{
 637         display: block;
 638         padding: 1px 6px;
 639         font-size: 14px;
 640 }
 641 #kit-context a:hover{
 642         background: dodgerblue;
 643         color: white;
 644 }
 645 #kit-context-elem{
 646         color: #a0a0a0;
 647         padding: 0px 5px;
 648 }
 649 #kit-context-size{
 650         color: #a0a0a0;
 651         font-size: 12px;
 652         padding: 0px 5px;
 653         border-bottom: 1px solid #a0a0a0;
 654 }
 655 #kit-context-text, #kit-context-desktop, #kit-context-custom{
 656         color: #a0a0a0;
 657         font-size: 15px;
 658         padding: 4px 5px;
 659         border-top: 1px solid #a0a0a0;
 660         border-bottom: 1px solid #a0a0a0;
 661 }
 662
 663 #kit-tasks{
 664         display: none;
 665         position: fixed;
 666         top: 0px;
 667         left: 0px;
 668         width: 100%;
 669         height: 100%;
 670         box-sizing: border-box;
 671         background: #000030;
 672         padding: 20px;
 673         padding-bottom: 120px;
 674         overflow: scroll;
 675 }
 676 #kit-tasks:before{
 677         content: "実行中のアプリケーション ( クリックで強制終了 )";
 678         display: block;
 679         color: #ffffff;
 680 }
 681 #kit-tasks .task{
 682         cursor:url(../cursor-2.png), pointer;
 683         display: inline-block;
 684         background: #e0e0e0;
 685         padding: 4px 8px;
 686         border: 1px solid #000000;
 687         width: 150px;
 688         margin: 16px 10px;
 689 }
 690 #kit-tasks .task:hover{
 691         background: #ffffff;
 692 }
 693 #kit-tasks .task:hover:after{
 694         content: "クリックして終了";
 695         text-align: center;
 696         display: block;
 697         position: absolute;
 698         color: #e0e0e0;
 699         width: 150px;
 700         font-size: 12px;
 701 }
 702 #kit-tasks .task-min:before{
 703         content: "";
 704         display: inline-block;
 705         background: limegreen;
 706         float: right;
 707         margin-top: 5px;
 708         width: 12px;
 709         height: 12px;
 710         border: 2px solid #404040;
 711 }
 712 #kit-tasks .task img{
 713         float: left;
 714         height: 24px;
 715 }
 716 #launcher{
 717         display: none;
 718         position: fixed;
 719         top: 0px;
 720         left: 0px;
 721         width: 100%;
 722         height: 100%;
 723         box-sizing: border-box;
 724         background: rgba(0,0,0,.4);
 725         color: white;
 726 }
 727 #launcher-header{
 728         font-weight: 100;
 729         margin-top: 30px;
 730         padding: 10px;
 731         font-size: 20px;
 732 }
 733 #launcher-header .kit-button{
 734         font-size: 16px;
 735         float: right;
 736 }
 737 #launcher-apps{
 738         display: flex;
 739         flex-wrap: wrap;
 740 }
 741 .launcher-app{
 742         padding: 4px;
 743         margin: 4px;
 744         width: 120px;
 745         text-align: center;
 746 }
 747 .launcher-app:hover{
 748         background: black;
 749 }
 750 .launcher-app img{
 751         display: block;
 752         margin: 0 auto;
 753         height: 70px;
 754 }
 755 #last-notification{
 756         z-index: 9996;
 757         display: none;
 758         position: fixed;
 759         background: #e0e0e0;
 760         padding: 4px;
 761         bottom: 54px;
 762         right: 12px;
 763         width: 180px;
 764         cursor:url(../cursor-1.png), default;
 765 }
 766 #last-notification-close{
 767         background: red;
 768         width: 15px;
 769         height: 15px;
 770         display: inline-block;
 771         float: right;
 772         cursor:url(../cursor-2.png), pointer;
 773 }
 774 #last-notification-title{
 775         font-weight: 700;
 776 }
 777 #last-notification-content{
 778         font-size: 14px;
 779 }
 780 #last-notification-app{
 781         font-size: 14px;
 782         color: #a0a0a0;
 783         text-align: right;
 784 }
 785 .kit-fusen{
 786         background: rgb(255,250,220);
 787         border: 1px solid #909090;
 788         width: 200px;
 789         padding: 4px;
 790         margin: 8px;
 791         position: absolute;
 792         bottom: 20px;
 793         height: 55px;
 794 }
 795 .kit-fusen-textarea{
 796         cursor:url(../cursor-3.png), text;
 797         font-family: 'Noto Sans JP', sans-serif;
 798         position: absolute;
 799         width: 180px;
 800         background: transparent;
 801         border: none;
 802         resize: none;
 803 }