// http://web.kitit.ml/
// https://github.com/mtsgi/kit
-"use strict";
-
$( document ).ready( Load );
function Load() {
$( "#kit-milp" ).fadeOut( 200 );
} ).on( 'keydown keyup keypress change', function() {
$( "#kit-milp-text" ).text( $( this ).val() );
+ } ).keypress( function( e ) {
+ if( e.which == 13 ) $( "#kit-milp-launch" ).click();
} );
$( "#kit-milp-launch" ).click( function() {
let _app = $( "#milp" ).val().split(",")[0];
} );
//コンテキストメニュー
- $(":root section").on("contextmenu", function() {
+ $(":root section:not(#desktop-l)").on("contextmenu", function() {
let _ptelem = $( document.elementFromPoint(S.mouseX, S.mouseY) );
S.selectedElement = _ptelem;
$( "#kit-context-input" ).val( _ptelem.text() );
$( "#task-ctx-info" ).off().on( "click", function() {appInfo( data.id )} );
$( "#task-ctx-sshot" ).off().on( "click", function() { S.screenshot(pid, true) } );
$( "#task-ctx-min" ).off().on( "click", function() { S.min( String(pid) ) } );
+ $( "#task-ctx-front" ).off().on( "click", function() {
+ $("#w"+pid).css("z-index", System.windowIndex + 1);
+ System.refreshWindowIndex();
+ } );
$( "#task-ctx-close" ).off().on( "click", function() { close( String(pid) ) } );
$( "#task-ctx-kill" ).off().on( "click", function() { kill( String(data.id) ) } );
const _ctxleft = $( "#t" + pid ).offset().left;
this.refreshWindowIndex = function(){
let num = $(".window").length;
- let _array = new Array();
- let _obj = new Object();
+ let array = new Array();
+ let obj = new Object();
for( let i = 0; i < num; i++ ){
- _obj = { id: $(".window")[i].id, zindex: $(".window")[i].style.zIndex };
- _array.push( _obj );
+ obj = { id: $(".window")[i].id, zindex: $(".window")[i].style.zIndex };
+ array.push( obj );
};
- _array.sort( (a,b) => {
+ array.sort( (a,b) => {
return Number(a.zindex - b.zindex);
} );
- for( let i in _array ){
- document.getElementById(_array[i].id).style.zIndex = i;
+ for( let i in array ){
+ document.getElementById(array[i].id).style.zIndex = i;
}
System.windowIndex = num;
}
--- /dev/null
+
+@font-face {
+ font-family: "Noto";
+ src: url("fonts/NotoSansMonoCJKjp-Regular.otf");
+}
+body {
+ margin: 0px;
+ font-size: 16px;
+ font-family: 'Noto Sans JP', sans-serif;
+ overscroll-behavior: none;
+ cursor: url(../cursor-1.png), auto;
+}
+*::selection{
+ background: rgba(0,0,0,.0);
+}
+#kit-wallpaper{
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ height: 100%;
+ width: 100%;
+ background: url("../wallpaper/11.jpg");
+ background-size: cover;
+}
+section {
+ position: absolute;
+ top : 25px;
+ left: 0px;
+ width: 100%;
+ height: calc(100% - 65px);
+ transition: 1s all ease;
+ cursor: url(../cursor-1.png), auto;
+}
+
+.selected-section{
+ transform: scale(0.8);
+ background: rgba(0,0,0,.2);
+ box-shadow: 0px 0px 5px rgba(0,0,0,.5);
+}
+.selected-section:before{
+ color: #ffffff;
+ text-shadow: 0px 0px 3px black;
+ top : -40px;
+ font-size: 20px;
+ position: absolute;
+ width: 100%;
+ text-align: center;
+ content:"Desktop";
+}
+
+#desktop-0 {
+ display: block;
+}
+#desktop-l{
+ padding: 20px 0;
+ padding-top: 20%;
+ font-weight: 100;
+ font-size: 18px;
+ color: white;
+ text-align: center;
+ text-shadow: 0px 1px 4px black;
+ background: rgba(0,0,0,.5);
+ box-sizing: border-box;
+ top: 0px;
+ height: 100%;
+}
+#desktop-l .window{
+ font-size: 16px;
+ color: white;
+ text-align: center;
+ text-shadow: none;
+ font-weight: 400;
+}
+#lock-unl{
+ display: block;
+ cursor:url(../cursor-2.png), pointer;
+ font-size: 16px;
+ margin: 20px 0;
+ position: fixed;
+ bottom: 0px;
+ width: 100%;
+}
+#lock-unl > span{
+ display: block;
+ font-size: 32px;
+ margin: 4px;
+}
+#lock-username{
+ margin: 10px;
+ font-size: 20px;
+}
+#lock-user-icon{
+ display: inline-block;
+ background : white;
+ width: 60px;
+ height: 60px;
+ margin-top: 15px;
+ border-radius: 999px;
+ box-shadow: 0px 1px 10px 0 rgba(0,0,0,.5), inset 0px -2px 15px 5px rgba(255,255,255,.4);
+ border: 0px solid #ffffff;
+}
+#lock-user-icon:after{
+ content: "";
+ display: inline-block;
+ background : rgba(255,255,255,.2);
+ box-shadow: 0px 1px 10px 0px rgba(0,0,0,.1);
+ width: 60px;
+ height: 30px;
+ border-radius: 999px 999px 0px 0px;
+}
+#desktop-l > .textbox{
+ border: none;
+ padding: 4px;
+ width: 200px;
+ background: rgba(255,255,255,.7);
+}
+.fas, .fa{
+ font-weight: 100;
+ line-height: 100%;
+}
+.fa:before{
+ font-weight: 700;
+}
+header{
+ z-index: 9996;
+ box-sizing: border-box;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ background: #fff;
+ padding : 0px;
+ color: #000000;
+ box-shadow: 0px 0px 5px rgba(0,0,0,.3);
+ opacity: .9;
+}
+header #header-right{
+ float: right;
+}
+header a{
+ cursor: url(../cursor-2.png),pointer;
+ padding : 0px 4px;
+}
+header a:hover{
+ color: #fff;
+ background: #27E;
+}
+#kit-milp{
+ z-index: 9994;
+ font-weight: 100;
+ display: none;
+ position: fixed;
+ background: rgba(255,255,255,.95);
+ padding-top: 30px;
+ padding-bottom: 8px;
+ left: 98px;
+ width: 216px;
+ border-radius: 0px 0px 6px 6px;
+ box-shadow: 0px 1px 4px 0px rgba(0,0,0,.4);
+}
+#kit-milp-text{
+ font-size: 19px;
+ padding: 0px 3px;
+ margin-bottom: 4px;
+}
+#kit-milp a{
+ padding: 1px 6px;
+ display: block;
+ cursor:url(../cursor-1.png), default;
+ overflow: hidden;
+}
+#kit-milp a:hover{
+ background: #27E;
+ color: #fff;
+}
+#kit-milp-launch:before{
+ content: "アプリを起動する"
+}
+#kit-milp-search:before{
+ content: "Webで検索する"
+}
+#kit-milp-wikipedia:before{
+ content: "Wikipediaで調べる"
+}
+.home-icon:before{
+ line-height: 0px;
+ display: block;
+ font-size: 30px;
+ height : 25px;
+}
+.home-icon{
+ font-size: 14px;
+ display: inline-block;
+ color: white;
+ text-shadow: 0px 1px 2px black;
+ cursor:url(../cursor-1.png), default;
+ margin : 10px 0px;
+ padding : 5px;
+ border-radius: 6px;
+ text-align: center;
+ width: 100px;
+}
+.home-icon:hover{
+ background: rgba(255,255,255,.5);
+}
+.home-fa{
+ margin-bottom: 5px;
+ display: block;
+ font-size: 32px;
+}
+footer{
+ z-index: 9998;
+ background: rgba(255,255,255,.5);
+ width : 80%;
+ height: 75px;
+ padding: 5px;
+ position: fixed;
+ left: 10%;
+ bottom: -5px;
+ box-sizing: border-box;
+ box-shadow: 0px 0px 8px rgba(0,0,0,.4);
+ border-radius: 10px 10px 0 0;
+ text-align: center;
+}
+footer #launch{
+ color: white;
+ text-shadow: 0px 1px 3px black;
+ position: fixed;
+ left: 10px;
+ bottom: 10px;
+ cursor: url(../cursor-2.png), pointer;
+ font-size: 22px;
+ padding: 6px 5px;
+}
+footer .task{
+ cursor:url(../cursor-1.png), default;
+ box-sizing: border-box;
+ display: inline-block;
+ padding: 5px 4px;
+ width: 70px;
+ transition: .2s all ease;
+ position: relative;
+ top : -5px;
+ text-align: center;
+ font-size: 0px;
+ color: transparent;
+ transition: .2s all ease;
+}
+footer .task:hover{
+ transform: scale(1.4);
+ position: relative;
+ top: -20px;
+}
+footer .task:active{
+ transition: 0s;
+}
+footer .task img{
+ display: block;
+ height : 50px;
+ margin: 0 auto;
+}
+footer .task-min{
+ font-weight: 900;
+}
+footer .task-min:before{
+ content: "";
+ display: inline-block;
+ background: #606060;
+ position: absolute;
+ bottom: -5px;
+ left: calc(50% - 6px);
+ margin: 0px;
+ width: 9px;
+ height: 9px;
+ border-radius: 99px;
+}
+#footer-noti{
+ position: fixed;
+ color: #fff;
+ font-weight: 100;
+ text-shadow: 0px 1px 4px black;
+ cursor:url(../cursor-2.png), pointer;
+ padding: 6px;
+ right : 4px;
+ bottom : 5px;
+}
+#footer-noti:hover{
+ text-shadow: 0px 1px 3px dodgerblue;
+}
+#footer-tasks{
+ color: white;
+ text-shadow: 0px 1px 3px black;
+ position: fixed;
+ left: 50px;
+ bottom: 10px;
+ cursor: url(../cursor-2.png), pointer;
+ font-size: 22px;
+ padding: 6px 5px;
+}
+#footer-tasks:hover{
+ text-shadow: 0px 1px 3px dodgerblue;
+}
+#notifications{
+ z-index: 9995;
+ display: none;
+ box-sizing: border-box;
+ position: fixed;
+ right: 0px;
+ min-height: 100%;
+ max-height: 100%;
+ width: 300px;
+ background: rgba(255,255,255,.7);
+ box-shadow: 0px 0px 60px 0px rgba(0,0,0,.4);
+ padding: 40px 8px 50px 8px;
+}
+#notifications-show-history{
+ display: block;
+ text-align: right;
+ color: white;
+ text-shadow: none;
+ text-decoration: none;
+ background: rgba(0,0,0,.3);
+ position: absolute;
+ bottom: 90px;
+ right: 20px;
+ padding: 1px 18px;
+ border-radius: 4px;
+}
+#notifications .notis{
+ cursor:url(../cursor-1.png), default;
+ border: 1px solid #a0a0a0;
+ border-radius: 5px;
+ margin: 6px 4px;
+ background: rgba(255,255,255,.9);
+ padding-bottom: 10px;
+}
+#notifications .notis:hover{
+ border: 1px solid #505050;
+ box-shadow: 0px 1px 5px 0px rgba(0,0,0,.3);
+}
+.notis > span{
+ display: block;
+ background: rgba(0,0,0,.1);
+ font-weight: 700;
+ padding: 5px;
+ margin-bottom: 10px;
+}
+.notis .notis_close{
+ cursor:url(../cursor-2.png), pointer;
+ float: right;
+ background: gray;
+ padding: 0;
+ width: 16px;
+ height: 16px;
+ margin: 9px;
+ border-radius: 99px;
+}
+.window{
+ position: absolute;
+ box-shadow: 0px 2px 20px 0px rgba(0,0,0,.8);
+ border-radius : 4px;
+ border-top: 1px solid #fff;
+ background: rgba(255,255,255,.9);
+ min-width : 200px;
+ padding : 0px;
+ cursor:url(../cursor-1.png), default;
+ background : linear-gradient(#F5F5F5 0%,#d9d9d9 30px);
+ text-align: center;
+}
+.window:after{
+ visibility: hidden;
+ content: "_";
+ position: absolute;
+ height: 60px;
+}
+section .ui-draggable-dragging{
+ box-shadow: 0px 2px 20px 0px rgba(0,0,0,.8), 0px 0px 0px 8px rgba(30,70,255,.6);
+}
+.win-highlight{
+ box-shadow: 0px 2px 20px 0px rgba(0,0,0,.8), 0px 0px 0px 8px rgba(255,30,70,.6);
+}
+.wt{
+ display: inline-block;
+ color: #000000;
+ font-size: 16px;
+ padding-top: 1px;
+}
+.wt img{
+ width: 18px;
+ height: 18px;
+ float: left;
+ margin: 3px;
+}
+.wm{
+ position: absolute;
+ left: 25px;
+ padding: 0px;
+ background: #38C93B;
+ border: 1px solid #23961D;
+ font-size: 7px;
+ color: transparent;
+ height: 12px;
+ width: 12px;
+ border-radius: 99px;
+ margin: 6px 0;
+}
+.wm:hover{
+ color: rgba(0,0,0,.9);
+}
+.wx{
+ position: absolute;
+ left: 5px;
+ padding: 0px;
+ background: #F03E3E;
+ border: 1px solid #C23232;
+ font-size: 7px;
+ line-height: 12px;
+ color: transparent;
+ height: 12px;
+ width: 12px;
+ border-radius: 99px;
+ margin: 6px 0;
+}
+.wx:hover{
+ color: rgba(0,0,0,.9);
+}
+.winc{
+ text-align: left;
+ box-sizing: border-box;
+ border-top : 1px solid #A0A0A0;
+ color: #000000;
+ background: #ffffff;
+ border-radius: 0px 0px 4px 4px;
+ padding : 5px;
+ overflow : hidden;
+ max-width: 100%;
+}
+.kit-button{
+ display: inline-block;
+ cursor:url(../cursor-1.png), default;
+ border-radius: 4px;
+ background : linear-gradient(#18C5F5 10%,#0567F0 90%);
+ border: 1px solid #468FD4;
+ color: #ffffff;
+ padding: 1px 15px;
+ margin: 1px 2px;
+ text-decoration: none;
+}
+.kit-button:hover{
+ box-shadow: inset 0 999px 0 0 rgba(0,0,0,.3);
+}
+.kit-button:active{
+ position: relative;
+ top: 1px;
+}
+.kit-selectable{
+ cursor:url(../cursor-3.png), text;
+}
+.kit-selectable *::selection, .kit-selectable::selection{
+ background: dodgerblue;
+ color: white;
+}
+#task-ctx{
+ z-index: 9999;
+ display: none;
+ position: fixed;
+ bottom: 0px;
+ background: #f0f0f0;
+ width: 200px;
+ left : 74px;
+ box-sizing: border-box;
+ padding : 6px 0;
+ border : 1px solid #a0a0a0;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ border-bottom: none;
+ box-shadow: 0px 2px 16px 0px rgba(0,0,0,.5);
+}
+#task-ctx:after{
+ content: "";
+ background: transparent;
+ width: 0px;
+ height: 0px;
+ box-sizing: border-box;
+ position: absolute;
+ bottom: -30px;
+ left: 20px;
+ box-sizing: border-box;
+ border: 15px solid transparent;
+ border-top: 20px solid #f0f0f0;
+}
+#task-ctx-name{
+ font-size: 18px;
+}
+#task-ctx-ver{
+ padding-left: 6px;
+ font-size: 14px;
+ padding-bottom : 5px;
+ margin-bottom: 5px;
+ border-bottom: 1px solid gray;
+}
+#task-ctx a{
+ cursor:url(../cursor-1.png), default;
+ display: block;
+ padding: 0 6px;
+}
+#task-ctx a:hover{
+ color: #fff;
+ background: #27E;
+}
+#task-ctx a span{
+ opacity: .7;
+}
+#task-ctx-img{
+ float: left;
+ height : 26px;
+ max-width: 30px;
+ margin: 0 4px;
+}
+
+#milp{
+ outline: none;
+ width: 150px;
+ font-family: 'Noto Sans JP', sans-serif;
+ position: absolute;
+ top:0px;
+ border: none;
+ font-size: 15px;
+ padding: 1px 8px;
+ color: #fff;
+ background: rgba(0,0,0,.5);
+ margin: 0px 4px;
+ font-weight: 100;
+}
+h3{
+ font-size: 20px;
+ margin: 0px;
+ font-weight: normal;
+}
+.btn{
+ cursor:url(../cursor-2.png), pointer;
+ border: 1px solid #a0a0a0;
+ margin: 4px 0px;
+ padding: 2px 4px;
+ border-radius: 5px;
+ background: #f0f0f0;
+ transition: .2s all ease;
+ box-shadow: inset 0px 1px 0 0 #ffffff;
+}
+.btn:hover{
+ border: 1px solid black;
+ background: #e0e0e0;
+}
+.little{
+ font-size: 14px;
+}
+.textbox{
+ cursor:url(../cursor-3.png), text;
+ outline: none;
+ border: 1px solid #000000;
+ font-size: 15px;
+ padding: 3px 5px;
+ background: #f0f0f0;
+ box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5);
+ border-radius: 5px;
+ transition: .2s all ease;
+ font-family: 'Noto Sans JP', sans-serif;
+}
+.textbox:focus{
+ background: #fff;
+ box-shadow: 0 0 0 3px rgba(0,70,200,.5);
+}
+.textbox::selection{
+ background: #27E;
+ color: white;
+}
+.task-name{
+ font-family: 'Noto Sans JP', sans-serif;
+}
+.kit-hyperlink{
+ color: dodgerblue;
+ text-decoration: underline;
+ cursor:url(../cursor-2.png), pointer;
+}
+#kit-power{
+ display: none;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ z-index: 10000;
+ background: rgba(0,0,0,0.6);
+ text-align: center;
+}
+#kit-power a{
+ cursor:url(../cursor-2.png), pointer!important;
+ display: block;
+ font-size: 30px;
+ font-weight: 100;
+ padding: 10px 0;
+ color: white;
+ transition: .1s all ease;
+}
+#kit-power a:hover{
+ text-shadow: 0px 0px 30px cyan, 0px 0px 18px cyan, 0px 0px 8px cyan;
+}
+#kit-power a:after{
+ display: block;
+ font-size: 16px;
+}
+#kit-power-shutdown:after{
+ content: "アプリケーションを全て終了してシステムを終了します";
+}
+#kit-power-reboot:after{
+ content: "シャットダウンし、再びシステムを起動します";
+}
+#kit-power-suspend:after{
+ content: "起動中のアプリケーションの情報を保持して終了します";
+}
+#kit-power-lock:after{
+ content: "ユーザーからログアウトしロック画面を表示します";
+}
+
+#kit-context{
+ display: none;
+ z-index: 9994;
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ background: #f0f0f0;
+ border: 1px solid #a0a0a0;
+ box-shadow: 1px 1px 15px 0 rgba(0,0,0,.6);
+ border-radius: 4px;
+ padding: 0px;
+ padding-bottom: 6px;
+}
+#kit-context input{
+ width: 180px;
+ margin: 5px;
+ padding: 2px 5px;
+ font-size: 15px;
+}
+#kit-context a{
+ display: block;
+ padding: 0px 6px;
+ font-size: 15px;
+}
+#kit-context a:hover{
+ background: #27e;
+ color: #fff;
+}
+#kit-context-elem{
+ color: #a0a0a0;
+ padding: 0px 5px;
+}
+#kit-context-size{
+ color: #a0a0a0;
+ font-size: 12px;
+ padding: 0px 5px;
+ border-bottom: 1px solid #a0a0a0;
+}
+
+#kit-tasks{
+ display: none;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background: rgba(0,0,0,.9);
+ padding: 20px;
+ padding-bottom: 120px;
+ overflow: scroll;
+}
+#kit-tasks:before{
+ content: "実行中のアプリケーション ( クリックで強制終了 )";
+ display: block;
+ color: #ffffff;
+}
+#kit-tasks .task{
+ cursor:url(../cursor-2.png), pointer;
+ display: inline-block;
+ background: transparent;
+ padding: 4px 8px;
+ border: 2px solid #ffffff;
+ color: #fff;
+ border-radius: 5px;
+ width: 150px;
+ box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
+ margin: 16px 10px;
+ transition: .2s all ease;
+ opacity: .8;
+}
+#kit-tasks .task:hover{
+ opacity: 1.0;
+ transform: scale(1.1);
+ box-shadow: 0px 2px 6px 0px rgba(0,0,0,1);
+}
+#kit-tasks .task:hover:after{
+ content: "クリックして終了";
+ text-align: center;
+ display: block;
+ position: absolute;
+ top : 35px;
+ color: #e0e0e0;
+ width: 150px;
+ font-size: 12px;
+}
+#kit-tasks .task-min:before{
+ content: "";
+ display: inline-block;
+ background: limegreen;
+ float: right;
+ margin-top: 5px;
+ width: 12px;
+ height: 12px;
+ border: 2px solid #404040;
+ border-radius: 3px;
+}
+#kit-tasks .task img{
+ float: left;
+ height: 24px;
+}
+#launcher{
+ display: none;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ padding: 20px;
+ background: rgba(0,0,0,.4);
+ color: white;
+}
+#launcher-header{
+ font-weight: 100;
+ margin-top: 30px;
+ padding: 10px;
+ font-size: 24px;
+}
+#launcher-header .kit-button{
+ font-size: 18px;
+ float: right;
+}
+#launcher-apps{
+ display: flex;
+ flex-wrap: wrap;
+}
+.launcher-app{
+ border-radius: 5px;
+ padding: 4px;
+ margin: 4px;
+ text-shadow: 0px 1px 3px black;
+ width: 120px;
+ font-size: 14px;
+ text-align: center;
+}
+.launcher-app:hover{
+ opacity: .5;
+}
+.launcher-app img{
+ display: block;
+ margin: 5px auto;
+ height: 70px;
+}
+#last-notification{
+ z-index: 9996;
+ display: none;
+ position: fixed;
+ background: rgba(255,255,255,.9);
+ top: 38px;
+ right: 12px;
+ width: 200px;
+ border-radius: 4px;
+ cursor:url(../cursor-1.png), default;
+ box-shadow: 0px 1px 14px 0px rgba(0,0,0,.3);
+ border: 1px solid #a0a0a0;
+}
+#last-notification-close{
+ background: red;
+ width: 15px;
+ height: 15px;
+ margin: 8px;
+ display: inline-block;
+ float: right;
+ border-radius: 999px;
+ cursor:url(../cursor-2.png), pointer;
+ opacity: .6;
+}
+#last-notification-title{
+ font-weight: 700;
+ padding: 4px;
+ background: rgba(0,0,0,.1);
+}
+#last-notification-content{
+ font-size: 14px;
+ padding: 0 4px;
+}
+#last-notification-app{
+ font-size: 14px;
+ color: #a0a0a0;
+ text-align: right;
+ padding: 0 4px;
+}
+
+
+
OSDN Git Service
