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