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