-.winc-console{
+.winc-console {
padding: 8px;
color: #ffffff;
background: #000000;
}
-.winc-console .textbox{
+
+.winc-console .textbox {
box-sizing: border-box;
background: #000000;
color: limegreen;
border-color: limegreen;
- width: calc( 100% - 35px );
+ width: calc(100% - 35px);
}
-.winc-console .textbox::selection{
+
+.winc-console .textbox::selection {
background-color: limegreen;
color: black;
}
-.winc-console .console-exec{
+
+.winc-console .console-exec {
cursor: pointer;
float: right;
margin: 9px;
margin-right: 5px;
}
-.winc-console .console-wrapper{
+
+.winc-console .console-wrapper {
box-sizing: border-box;
padding: 2px;
- border : 1px solid gray;
- margin-top : 10px;
+ border: 1px solid gray;
+ margin-top: 10px;
overflow: auto;
min-height: 200px;
}
-.winc-console .simple-box{
+
+.winc-console .simple-box {
font-size: 13px;
padding: 2px;
}
-.winc-console .simple-box::selection{
+.winc-console .simple-box::selection {
background-color: limegreen;
color: black;
}
-.winc-console .console-log{
+
+.winc-console .console-log {
color: #a0a0a0;
}
-.winc-console .console-log::selection{
+
+.winc-console .console-log::selection {
background-color: limegreen;
color: black;
}
-.winc-console pre{
+
+.winc-console pre {
+ font-size: inherit;
+ background: transparent;
display: inline;
- font-family: 'Noto Sans JP', sans-serif;
+ font-family: 'Noto Sans JP', sans-serif;
}
-.winc-console pre::selection{
+
+.winc-console pre::selection {
user-select: text;
background: limegreen;
color: black;
-}
+}
\ No newline at end of file
"id": "console",
"name": "コンソール",
"icon": "icon.png",
- "version": "3.0.4",
+ "version": "3.0.5",
"author": "kit",
"support": {
<link href="./system/system.css" rel="stylesheet">
<!-- kitstrap -->
<link href="./system/kitstrap/kitstrap.css" rel="stylesheet">
+ <link href="./system/kitstrap/kitstrap-font.css" rel="stylesheet">
<link href="./system/kitstrap/kitstrap-cursor.css" rel="stylesheet">
<!-- Theme -->
<link href="./system/theme/theme-default.css" rel="stylesheet" id="kit-theme-file">
<div id="notifications">
<a id="notifications-show-history" class="kit-hyperlink" onclick="launch('ntflist')">通知の履歴</a>
- <div class="kit-toggle">
- <input type="checkbox" id="notifications-dnp">
+ <label class="kit-toggle">
+ <input type="checkbox" id="notifications-dnp">非通知モード
<label for="notifications-dnp"></label>
- <label for="notifications-dnp"><span class="fa fa-bed"></span> 非通知モード</label>
- </div>
+ <span class="fa fa-bed"></span>
+ </label>
</div>
<div class="dropdown" id="dropdown-clock"><canvas class="dropdown-clock-canvas"></canvas></div>
<div class="dropdown" id="dropdown-sound">
音量：<span id="dropdown-sound-level">100</span>
- <div class="kit-toggle">
- <input type="checkbox" id="dropdown-sound-silent">
- <label for="dropdown-sound-silent"></label>
- <label for="dropdown-sound-silent"><span class="fa fa-volume-off"></span> サイレント</label>
- </div>
+ <label class="kit-toggle">
+ <input type="checkbox" id="dropdown-sound-silent">サイレント
+ <label for="dropdown-sound-silent"></label>
+ <span class="fa fa-volume-off"></span>
+ </label>
<div id="dropdown-sound-slider"></div>
</div>
<header>
<a id="desktops"><span class="far fa-clone"></span>Desktop</a>
<a id="kit-header-sightre"><span class="fa fa-search"></span>さがす</a>
- <div id="header-right">
+ <div class="kit-right">
<a id="kit-header-fullscreen"><span class="fa fa-window-maximize"></span>最大化を解除</a>
<a id="kit-header-user"><span class="fa fa-user"></span><span id="kit-header-username"></span></a>
<a onclick="$('#dropdown-sound').toggle()"><span id="kit-header-sound-icon" class="fa fa-volume-up"></span></a>
else clockmove = setInterval( System.clock, 10 );
if ( localStorage.getItem("kit-shutted-down") == "false" ) {
- Notification.push( "お知らせ", "kitは前回終了時、正しくシャットダウンされませんでした。", "system" );
+ Notification.push("お知らせ", "kitは前回終了時、正しくシャットダウンされませんでした。", "system");
}
localStorage.setItem("kit-shutted-down", false);
- Notification.push( "kitへようこそ", localStorage["kit-username"] + "さん、こんにちは。", "system", null, null, 'documents/icon.png', [
+ Notification.push("kitへようこそ", localStorage["kit-username"] + "さん、こんにちは。", "system", null, null, 'documents/icon.png', [
{
label: 'kitについて',
func: () => launch( 'settings', {'view': 'about'} )
this.max = function( _pid ){
if( KWS.fullscreen.pid ){
- Notification.push("最大化に失敗", "最大化しているウィンドウがあります。");
+ Notification.push("最大化に失敗", "最大化しているウィンドウがあります。", "system");
return;
}
$( "#wt"+_pid ).addClass("wtmaximize");
}
})
$(".kit-fusen-textarea").off().on("change",function(){
- Notification.push($(this).attr("data-fid"), $(this).val(), "debug");
KWS.fusen.list[$(this).attr("data-fid")] = $(this).val();
localStorage.setItem("kit-fusen", JSON.stringify( KWS.fusen.list ));
});
-/* notifications */
+/* Desktop System */
+
+#kit-wallpaper {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ height: 100%;
+ width: 100%;
+ background: url("./wallpaper/11.jpg");
+ background-size: cover;
+ background-position: center;
+}
+
+*::selection {
+ background: rgba(0, 0, 0, .0);
+}
+
+section {
+ position: absolute;
+ top: 30px;
+ left: 0px;
+ min-width: 100%;
+ min-height: calc(100% - 70px);
+ display: none;
+ 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;
+}
+
+.fas,
+.fa {
+ font-weight: 100;
+ line-height: 100%;
+}
+
+.fa:before {
+ font-weight: 700;
+}
+
+/* Lock */
+
+#desktop-l {
+ padding: 20px 0;
+ font-weight: 400;
+ font-size: 24px;
+ color: white;
+ text-align: center;
+ background: rgba(0, 0, 0, .5);
+ box-sizing: border-box;
+ top: 0px;
+ height: 100%;
+}
+
+#desktop-l .window {
+ font-size: 16px;
+ color: white;
+ text-align: left;
+ text-shadow: none;
+ font-weight: 400;
+}
+
+#lock-unl {
+ display: block;
+ cursor: url(./cursor-2.png), pointer;
+ font-size: 16px;
+ margin: 20px;
+}
+
+#lock-unl:hover {
+ color: #99d1ff;
+}
+
+#lock-unl>span {
+ display: block;
+ font-size: 32px;
+}
+
+#lock-username {
+ margin: 10px;
+ font-size: 40px;
+}
+
+#lock-user-icon {
+ display: inline-block;
+ background: white;
+ width: 100px;
+ height: 100px;
+ 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: 3px 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: 100px;
+ height: 50px;
+ border-radius: 999px 999px 0px 0px;
+}
+
+/* Header */
+
+header {
+ cursor: url(./cursor-1.png), default;
+ z-index: 9995;
+ box-sizing: border-box;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ padding: 3px;
+ background: #f0f0f0;
+ color: #3d3d3d;
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
+}
+
+header a {
+ cursor: url(./cursor-2.png), pointer;
+ padding: 3px 4px;
+}
+
+header a:hover {
+ text-shadow: 0px 1px 3px dodgerblue;
+}
+
+.dropdown {
+ display: none;
+ z-index: 9996;
+ position: fixed;
+ top: 31px;
+ right: 0;
+ background: #f0f0f0;
+ box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .3);
+ border-radius: 0 0 5px 5px;
+}
+
+#dropdown-clock {
+ right: 58px;
+}
+
+#dropdown-sound {
+ right: 152px;
+ padding: 6px;
+}
+
+#dropdown-sound-slider {
+ margin: 10px;
+ width: 180px;
+}
+
+.ui-slider-horizontal {
+ border-radius: 999px;
+ border: 1px solid white !important;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
+}
+
+.ui-slider-handle {
+ outline: none;
+ border-radius: 999px;
+ border: 1px solid white !important;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .5);
+ cursor: url(./cursor-1.png), auto !important;
+}
+
+/* Desktop Icons */
+
+.desktop-icons {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 4px;
+}
+
+.desktop-icon {
+ border-radius: 5px;
+ padding: 4px;
+ margin: 4px;
+ width: 100px;
+ text-align: center;
+ overflow: hidden;
+ color: #fff;
+}
+
+.desktop-icon:hover {
+ background: rgba(0, 0, 0, .5);
+}
+
+.desktop-icon img {
+ display: block;
+ margin: 0 auto;
+ height: 50px;
+}
+
+.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 */
+
+footer {
+ cursor: url(./cursor-1.png), default;
+ z-index: 9998;
+ background: #f0f0f0;
+ width: 100%;
+ min-height: 45px;
+ position: fixed;
+ left: 0px;
+ bottom: -5px;
+ box-sizing: border-box;
+ box-shadow: 0px 0px 8px rgba(0, 0, 0, .4);
+ border-top: 5px solid #ffffff;
+ padding-left: 58px;
+}
+
+.footermaximize {
+ transition: .2s all ease;
+}
+
+.footermaximize-hidden {
+ bottom: -39px !important;
+}
+
+footer #launch {
+ cursor: url(./cursor-2.png), pointer;
+ position: fixed;
+ bottom: -2px;
+ left: -2px;
+ background: dodgerblue;
+ border: 2px solid white;
+ color: white;
+ padding: 16px;
+}
+
+footer .task {
+ cursor: url(./cursor-1.png), default;
+ box-sizing: border-box;
+ display: inline-block;
+ background: #ffffff;
+ color: #3d3d3d;
+ padding: 5px 4px;
+ border-top: 5px solid #303030;
+ width: 200px;
+ margin: 0px 0px;
+ overflow: hidden;
+ height: 38px;
+ font-size: 15px;
+ margin-top: -5px;
+}
+
+footer .task:hover {
+ background: #f0f0f0;
+ color: #3d3d3d;
+}
+
+footer .t-active {
+ background: #6060c0;
+ color: #ffffff;
+ box-shadow: none !important;
+ border-top: 5px solid rgb(100, 245, 100) !important;
+}
+
+footer .task img {
+ float: left;
+ height: 24px;
+ width: 24px;
+ margin-right: 4px;
+}
+
+
+footer .task-min {
+ font-weight: 900;
+}
+
+footer .task-min:after {
+ content: "";
+ display: block;
+ background: limegreen;
+ float: right;
+ margin-top: 5px;
+ width: 12px;
+ height: 12px;
+ border: 2px solid #404040;
+ border-radius: 3px;
+}
+
+#footer-noti {
+ position: absolute;
+ 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: absolute;
+ cursor: url(./cursor-2.png), pointer;
+ font-size: 22px;
+ padding: 6px 5px;
+}
+
+#tasks {
+ padding-left: 38px;
+}
+
+/* Notifications */
#notifications {
z-index: 9994;
display: none;
box-sizing: border-box;
position: fixed;
- right: 0px;
+ top: 0;
+ right: 0;
min-height: 100%;
max-height: 100%;
width: 340px;
- background: rgba(255, 255, 255, .7);
- box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, .4);
+ background: #f0f0f0;
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .4);
padding: 40px 8px 50px 8px;
- cursor: url(../cursor-1.png), default;
+ cursor: url(./cursor-1.png), default;
}
#notifications-show-history {
.notis {
position: relative;
overflow: hidden;
- cursor: url(../cursor-1.png), default;
+ cursor: url(./cursor-1.png), default;
padding: 4px;
border-radius: 5px;
margin: 10px 4px;
}
.notis .notis_close {
- cursor: url(../cursor-2.png), pointer;
+ cursor: url(./cursor-2.png), pointer;
float: right;
background: rgba(255, 100, 100, .8);
width: 16px;
}
-/* last notification */
+/* Last Notification */
#last-notification {
max-height: 200px;
bottom: 54px;
right: 12px;
border-radius: 4px;
- cursor: url(../cursor-1.png), default;
+ cursor: url(./cursor-1.png), default;
+ background: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, .5);
overflow: hidden;
}
display: inline-block;
float: right;
border-radius: 999px;
- cursor: url(../cursor-2.png), pointer;
+ cursor: url(./cursor-2.png), pointer;
opacity: .8;
}
#last-notification-buttons a {
color: dodgerblue;
- border: 1px solid transparent
+ border: 1px solid transparent;
+ transition: .2s all ease;
font-size: 14px;
padding: 2px 6px;
border-radius: 3px;
background: #ffffff;
}
+#last-notification-buttons a:active {
+ position: relative;
+ top: 2px;
+ background: #ffffff;
+}
+
#last-notification-app {
font-size: 12px;
color: #a0a0a0;
margin-right: 4px;
}
-/* sightre */
+/* Sightre */
#kit-sightre {
position: fixed;
font-size: 14px;
color: #909090;
}
+
+/* App Window */
+
+.window {
+ position: absolute;
+ box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .5);
+ border-radius: 4px;
+ background: transparent;
+ min-width: 200px;
+ padding: 0px;
+ cursor: url(./cursor-1.png), default;
+}
+
+.window:after {
+ visibility: hidden;
+ content: "_";
+ position: absolute;
+ height: 60px;
+}
+
+section .ui-draggable-dragging {
+ box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5), 0 0 0 8px rgba(30, 70, 255, .6);
+}
+
+.win-highlight {
+ box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5), 0 0 0 8px rgba(255, 30, 70, .6);
+}
+
+.windowactive {
+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .5);
+}
+
+.windowmaximize {
+ position: fixed;
+ border-radius: none;
+ overflow: hidden;
+}
+
+.windowmaximize:after {
+ height: 0px;
+}
+
+.wt {
+ display: block;
+ min-height: 24px;
+ color: #3d3d3d;
+ font-size: 17px;
+ padding: 3px 0;
+ padding-right: 100px;
+ border-radius: 4px 4px 0 0;
+ background: #d0d0d0;
+}
+
+.wt:before {
+ color: white;
+ text-shadow: 0px 1px 2px black;
+}
+
+.wt img {
+ width: 20px;
+ height: 20px;
+ float: left;
+ margin: 3px;
+}
+
+.windowactive>.wt {
+ background: #f0f0f0;
+}
+
+.wtmaximize {
+ display: none;
+}
+
+.windowactive span {
+ opacity: 1.0;
+}
+
+.wmzx {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ display: flex;
+ justify-content: flex-end;
+}
+
+.wm {
+ padding: 8px 8px;
+ opacity: .6;
+}
+
+.wm:hover {
+ background: dodgerblue;
+ color: #fff;
+}
+
+.wz {
+ padding: 8px 8px;
+ opacity: .6;
+}
+
+.wz:hover {
+ background: orange;
+ color: #fff;
+}
+
+.wx {
+ padding: 8px 10px;
+ opacity: .6;
+}
+
+.wx:hover {
+ background: #ff0000;
+ color: white;
+ border-radius: 0px 4px 0px 0px;
+}
+
+.winc {
+ box-sizing: border-box;
+ border-top: 1px solid #757575;
+ color: #3d3d3d;
+ background: #ffffff;
+ border-radius: 0px 0px 4px 4px;
+ padding: 5px;
+ overflow: hidden !important;
+ max-width: 100%;
+}
+
+/* Utils */
+
+.kit-selectable {
+ cursor: url(./cursor-3.png), text;
+}
+
+.kit-selectable *::selection,
+.kit-selectable::selection {
+ background: #1e90ff;
+ color: white;
+}
+
+.little {
+ font-size: 14px;
+}
+
+h3 {
+ font-size: 18px;
+ margin: 0px;
+ font-weight: normal;
+}
+
+/* Task Context */
+
+#task-ctx {
+ z-index: 9999;
+ display: none;
+ position: fixed;
+ bottom: 0px;
+ background: #ffffff;
+ width: 200px;
+ left: 74px;
+ box-sizing: border-box;
+ padding: 6px;
+ padding-bottom: 10px;
+ border: 2px solid white;
+ border-radius: 5px 5px 0px 0px;
+ border-bottom: none;
+ box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
+}
+
+#task-ctx-name {
+ font-size: 18px;
+}
+
+#task-ctx-ver {
+ font-size: 14px;
+ padding-bottom: 5px;
+ margin-bottom: 5px;
+ color: #909090;
+ border-bottom: 1px solid #c0c0c0;
+}
+
+#task-ctx a {
+ cursor: url(./cursor-1.png), default;
+ display: block;
+ border-bottom: 1px solid transparent;
+}
+
+#task-ctx a:hover {
+ color: dodgerblue;
+ border-bottom: 1px solid dodgerblue;
+}
+
+#task-ctx-img {
+ float: left;
+ height: 26px;
+ max-width: 30px;
+}
+
+/* Power Menu */
+
+#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.5);
+ text-align: left;
+}
+
+#kit-power a {
+ cursor: url(./cursor-2.png), pointer !important;
+ display: block;
+ font-size: 30px;
+ padding: 10px;
+ color: white;
+ text-shadow: 0 2px 5px #000000;
+}
+
+#kit-power a:hover {
+ text-decoration: underline;
+}
+
+#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: "ユーザーからログアウトしロック画面を表示します";
+}
+
+/* Context Menu */
+
+#kit-context {
+ cursor: url(./cursor-1.png), default;
+ display: none;
+ z-index: 9993;
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ background: #f0f0f0;
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
+ border-radius: 6px;
+ padding: 0px;
+ padding-bottom: 4px;
+}
+
+#kit-context input {
+ width: 180px;
+ margin: 5px;
+ padding: 2px 5px;
+ font-size: 15px;
+}
+
+#kit-context a {
+ display: block;
+ padding: 3px 6px;
+ font-size: 15px;
+}
+
+#kit-context a:hover {
+ background: #d0d0d0;
+}
+
+#kit-context-elem {
+ color: #a0a0a0;
+ padding: 0px 5px;
+}
+
+#kit-context-size {
+ color: #a0a0a0;
+ font-size: 12px;
+ padding: 0px 5px;
+ border-bottom: 1px solid #c0c0c0;
+}
+
+#kit-context-text,
+#kit-context-desktop,
+#kit-context-custom {
+ color: #a0a0a0;
+ font-size: 15px;
+ padding: 4px 5px;
+ border-top: 1px solid #c0c0c0;
+ border-bottom: 1px solid transparent;
+}
+
+/* Tasks */
+
+#kit-tasks {
+ display: none;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background: rgba(0, 0, 0, .8);
+ backdrop-filter: blur(5px);
+ 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;
+ color: #f0f0f0;
+ border: 2px solid #909090;
+ padding: 4px 8px;
+ border-radius: 5px;
+ min-width: 150px;
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .5);
+ margin: 12px 10px;
+ opacity: .8;
+}
+
+#kit-tasks .task:hover {
+ opacity: 1.0;
+ box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 1);
+ border: 2px solid #f0f0f0;
+}
+
+#kit-tasks .task:hover:after {
+ content: "クリックして終了";
+ display: block;
+ position: absolute;
+ color: #e0e0e0;
+ font-size: 12px;
+ padding: 5px 0;
+}
+
+#kit-tasks .task-min:before {
+ content: "";
+ display: block;
+ background: limegreen;
+ float: right;
+ margin-top: 5px;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+}
+
+#kit-tasks .task img {
+ float: left;
+ height: 24px;
+}
+
+/* Launcher */
+
+#launcher {
+ display: none;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background: rgba(0, 0, 0, .5);
+ color: white;
+}
+
+#launcher-header {
+ margin-top: 30px;
+ padding: 10px;
+ font-size: 24px;
+}
+
+#launcher-header .kit-button {
+ font-size: 16px;
+ margin-left: 10px;
+ float: right;
+}
+
+#launcher-apps {
+ padding: 0 10px;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.launcher-app {
+ border-radius: 5px;
+ padding: 4px;
+ margin: 4px;
+ text-shadow: 0px 0px 3px black;
+ width: 120px;
+ max-height: 95px;
+ overflow: hidden;
+ text-align: center;
+}
+
+.launcher-app:hover {
+ background: rgba(0, 0, 0, .5);
+ opacity: .8;
+ overflow: visible;
+}
+
+.launcher-app:active {
+ filter: brightness(0.6);
+}
+
+.launcher-app img {
+ display: block;
+ margin: 0 auto;
+ height: 70px;
+}
+
+/* Fusen */
+
+.kit-fusen {
+ background: rgb(255, 250, 220);
+ width: 220px;
+ padding: 4px;
+ margin: 8px;
+ border-radius: 6px;
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
+ position: absolute;
+ bottom: 20px;
+ height: 100px;
+ color: rgba(0, 0, 0, .75);
+}
+
+.kit-fusen-textarea {
+ scrollbar-color: light;
+ scrollbar-width: thin;
+ outline: none;
+ color: #3d3d3d;
+ cursor: url(./cursor-3.png), text;
+ margin-left: 10px;
+ font-family: 'Noto Sans JP', sans-serif;
+ font-size: 15px;
+ position: absolute;
+ background: transparent;
+ border: none;
+ resize: none;
+ width: 180px;
+ height: 98px;
+}
-
@font-face {
- font-family: "Noto";
- src: url("fonts/NotoSansMonoCJKjp-Regular.otf");
+ font-family: "Noto";
+ src: url("fonts/NotoSansMonoCJKjp-Regular.otf");
}
+
body {
margin: 0px;
overflow: hidden;
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;
- background-position: center;
-}
+
section {
- position: absolute;
- top : 30px;
- left: 0px;
- min-width: 100%;
+ top: 30px;
min-height: calc(100% - 70px);
- display: none;
- 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;
- font-weight: 100;
- font-size: 24px;
- color: white;
- text-align: center;
+#desktop-l {
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: left;
- text-shadow: none;
- font-weight: 400;
-}
-#lock-unl{
- display: block;
- cursor:url(../cursor-2.png), pointer;
- font-size: 16px;
- margin: 20px;
-}
-#lock-unl:hover{
- color: cyan;
-}
-#lock-unl > span{
- display: block;
- font-size: 32px;
-}
-#lock-username{
- margin: 10px;
- font-size: 40px;
-}
-#lock-user-icon{
- display: inline-block;
- background : white;
- width: 100px;
- height: 100px;
- 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: 3px 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: 100px;
- height: 50px;
- border-radius: 999px 999px 0px 0px;
-}
-#desktop-l > .textbox{
+
+#desktop-l>.textbox {
border: none;
padding: 10px;
}
-.fas, .fa{
- font-weight: 100;
- line-height: 100%;
-}
-.fa:before{
- font-weight: 700;
-}
-header{
- z-index: 9995;
- box-sizing: border-box;
- position: fixed;
- top: 0px;
- left: 0px;
- width: 100%;
- background: -moz-linear-gradient(45deg, rgba(204,255,216,1) 0%, rgba(212,246,255,1) 38%, rgba(255,219,238,1) 100%);
- 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)));
- background: -webkit-linear-gradient(45deg, rgba(204,255,216,1) 0%, rgba(212,246,255,1) 38%, rgba(255,219,238,1) 100%);
- background: -o-linear-gradient(45deg, rgba(204,255,216,1) 0%, rgba(212,246,255,1) 38%, rgba(255,219,238,1) 100%);
- background: -ms-linear-gradient(45deg, rgba(204,255,216,1) 0%, rgba(212,246,255,1) 38%, rgba(255,219,238,1) 100%);
- background: linear-gradient(45deg, rgba(204,255,216,1) 0% rgba(212,246,255,1) 38%, rgba(255,219,238,1) 100%);
- padding : 3px;
- color: #000000;
- box-shadow: 0px 0px 5px rgba(0,0,0,.3);
+
+header {
+ background: -moz-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
+ 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)));
+ background: -webkit-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
+ background: -o-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
+ background: -ms-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
+ background: linear-gradient(45deg, rgba(204, 255, 216, 1) 0% rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
opacity: .9;
}
-header #header-right{
- float: right;
-}
-header a{
- cursor: url(../cursor-2.png),pointer;
- padding : 3px 4px;
-}
-header a:hover{
- text-shadow: 0px 1px 3px dodgerblue;
-}
-#kit-milp{
- z-index: 9994;
- display: none;
- position: fixed;
- background: #ffffff;
- padding-top: 38px;
- padding-bottom: 8px;
- left: 100px;
- 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;
- font-weight: 700;
- padding: 0px 3px;
- margin-bottom: 4px;
-}
-#kit-milp a{
- padding: 3px 6px;
- display: block;
- cursor:url(../cursor-1.png), default;
- overflow: hidden;
-}
-#kit-milp a:hover{
- background: skyblue;
-}
-#kit-milp-launch:before{
- content: "アプリを起動する"
-}
-#kit-milp-search:before{
- content: "Webで検索する"
+
+.dropdown {
+ background: rgba(255, 255, 255, .9);
}
-#kit-milp-wikipedia:before{
- content: "Wikipediaで調べる"
+
+.ui-slider-horizontal {
+ background: linear-gradient(45deg, rgba(255, 135, 241, 1) 0%, rgba(117, 239, 255, 1) 50%, rgba(92, 242, 102, 1) 100%);
}
-.dropdown{
- display: none;
- z-index: 9996;
- position: fixed;
- top: 30px;
- right: 0;
- background: rgba(255,255,255,.9);
- box-shadow: 0 2px 8px 0 rgba(0,0,0,.3);
- border-radius: 0 0 5px 5px;
-}
-#dropdown-clock{
- right: 58px;
-}
-#dropdown-sound{
- right: 152px;
- padding: 6px;
-}
-#dropdown-sound-slider{
- margin: 10px;
- width: 180px;
-}
-.ui-slider-horizontal{
- border-radius: 999px;
- background: linear-gradient(45deg, rgba(255,135,241,1) 0%, rgba(117,239,255,1) 50%, rgba(92,242,102,1) 100%);
- border: 1px solid white !important;
- box-shadow: 0 1px 3px 0 rgba(0,0,0,.4);
-}
-.ui-slider-handle{
- outline: none;
- border-radius: 999px;
- border: 1px solid white !important;
- box-shadow: 0 1px 3px 0 rgba(0,0,0,.5);
- cursor: url(../cursor-1.png), auto !important;
-}
-.desktop-icons{
- display: flex;
- flex-wrap: wrap;
- padding: 4px;
-}
-.desktop-icon{
- border-radius: 5px;
- padding: 4px;
- margin: 4px;
+
+.desktop-icon {
text-shadow: 0px 1px 4px black;
- width: 100px;
- text-align: center;
- overflow: hidden;
- color: #fff;
+ transition: .2s all ease;
}
-.desktop-icon:hover{
- background: rgba(0,0,0,.5);
+
+.desktop-icon:hover {
+ background: rgba(0, 0, 0, .5);
opacity: .8;
- box-shadow: 0 0 3px 0 cyan;
-}
-.desktop-icon img{
- display: block;
- margin: 0 auto;
- height: 50px;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .5);
}
-.home-icon:before{
- line-height: 0px;
- display: block;
- font-size: 30px;
- height : 25px;
+
+footer {
+ background: -moz-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
+ 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)));
+ background: -webkit-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
+ background: -o-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
+ background: -ms-linear-gradient(top, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
+ background: linear-gradient(to bottom, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 1) 100%);
}
-.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: -moz-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
- 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)));
- background: -webkit-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
- background: -o-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
- background: -ms-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
- background: linear-gradient(to bottom, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
- width : 100%;
- min-height: 45px;
- position: fixed;
- left: 0px;
- bottom: -5px;
- box-sizing: border-box;
- box-shadow: 0px 0px 8px rgba(0,0,0,.4);
- border-top : 5px solid #ffffff;
- padding-left: 58px;
-}
-.footermaximize{
+
+.footermaximize {
transition: .2s all ease;
}
-.footermaximize-hidden{
- bottom: -39px!important;
-}
-footer #launch{
- cursor:url(../cursor-2.png), pointer;
- position: fixed;
- bottom: -2px;
- left: -2px;
- background: dodgerblue;
- border: 2px solid white;
- color: white;
- padding: 16px;
+
+.footermaximize-hidden {
+ bottom: -39px !important;
+}
+
+footer #launch {
border-radius: 0px 20px 0px 0px;
transition: .2s all ease;
- box-shadow: inset 0px 0px 5px 0 rgba(255,255,255,.8);
+ box-shadow: inset 0px 0px 5px 0 rgba(255, 255, 255, .8);
}
-footer #launch:hover{
+
+footer #launch:hover {
padding: 20px 16px;
}
-footer .task{
- cursor:url(../cursor-1.png), default;
- box-sizing: border-box;
- display: inline-block;
- background: #ffffff;
- padding: 5px 4px;
- border-top : 5px solid #303030;
- width: 200px;
- margin : 0px 0px;
+
+footer .task {
+ border-top: 5px solid #303030;
box-shadow: inset -200px 0px 0px 0px #e0e0e0, inset 200px 0px 0px 0px #e0e0e0;
transition: .2s all ease;
- overflow: hidden;
- height: 38px;
- font-size: 15px;
- margin-top: -5px;
}
-footer .task:nth-child(odd){
- border-top : 5px solid #606060;
+
+footer .task:nth-child(odd) {
+ border-top: 5px solid #606060;
box-shadow: inset -200px 0px 0px 0px #f0f0f0, inset 200px 0px 0px 0px #f0f0f0;
}
-footer .task:hover{
+
+footer .task:hover {
box-shadow: inset 0px 0px 0px 0px #ccc, inset 0px 0px 0px 0px #ccc;
- border-top : 5px solid dodgerblue;
+ border-top: 5px solid dodgerblue;
}
-footer .task:active{
+
+footer .task:active {
transition: 0s;
}
-footer .task img{
+
+footer .task img {
float: left;
- height : 24px;
- width : 24px;
+ height: 24px;
+ width: 24px;
margin-right: 4px;
}
-footer .task-min{
- font-weight: 900;
-}
-footer .task-min:after{
- content: "";
- display: inline-block;
- background: limegreen;
- float: right;
- margin-top: 5px;
- width: 12px;
- height: 12px;
- border: 2px solid #404040;
- border-radius: 3px;
-}
-footer .t-active{
+
+footer .t-active {
+ background: #ffffff;
color: dodgerblue;
- border-top : 5px solid rgb(100, 245, 100) !important;
-}
-#footer-noti{
- position: absolute;
- cursor:url(../cursor-2.png), pointer;
- padding: 6px;
- right : 4px;
- bottom : 5px;
-}
-#footer-noti:hover{
- text-shadow: 0px 1px 3px dodgerblue;
+ border-top: 5px solid rgb(100, 245, 100) !important;
}
-#footer-tasks{
- color: white;
- text-shadow: 0px 1px 3px black;
- position: absolute;
- cursor:url(../cursor-2.png), pointer;
- font-size: 22px;
- padding: 6px 5px;
-}
-#footer-tasks:hover{
+
+#footer-tasks:hover {
text-shadow: 0px 1px 3px dodgerblue;
}
-#notifications{
+#notifications {
+ box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, .4);
+ background-color: rgba(255, 255, 255, .9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
-#notifications-show-history{
+#notifications-show-history {
text-shadow: 0px 1px 3px #ffffff;
}
-#notifications .notis{
- box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3);
+#notifications .notis {
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .3);
}
-#notifications .notis:hover{
- box-shadow: 0px 1px 5px 0px rgba(0,0,0,.3);
+#notifications .notis:hover {
+ box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .3);
}
-#tasks{
- padding-left: 38px;
-}
-.window{
- position: absolute;
- box-shadow: 0px 2px 10px 0px rgba(0,0,0,.5);
- border-radius : 4px;
- background: transparent;
- min-width : 200px;
- padding : 0px;
- cursor:url(../cursor-1.png), default;
+.window {
+ box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, .5);
}
-.window:after{
- visibility: hidden;
- content: "_";
- position: absolute;
- height: 60px;
-}
-section .ui-draggable-dragging{
- box-shadow: 0px 2px 10px 0px rgba(0,0,0,.5), 0px 0px 0px 8px rgba(30,70,255,.6);
-}
-.win-highlight{
- box-shadow: 0px 2px 10px 0px rgba(0,0,0,.5), 0px 0px 0px 8px rgba(255,30,70,.6);
-}
-.windowactive{
- box-shadow: 0 2px 15px 0 rgba(0,0,0,.7);
+
+.windowactive {
animation: activeAnim 1s;
}
-.windowmaximize{
- position: fixed;
- border-radius: none;
- overflow: hidden;
-}
-.windowmaximize:after{
- height: 0px;
-}
-.wt{
- display: block;
- min-height: 24px;
- color: #000000;
- font-size: 17px;
- padding: 3px 0;
- padding-right: 100px;
- border-radius: 4px 4px 0 0;
- background : linear-gradient(#F2F2F2 0%,#D1D1D1 100%);
- background: linear-gradient(45deg, rgba(194,194,194,1) 0%, rgba(235,235,235,1) 50%, rgba(194,194,194,1) 100%);
-}
-.wt:before{
- color: white;
- text-shadow: 0px 1px 2px black;
-}
-.wt img{
- width: 20px;
- height: 20px;
- float: left;
- margin: 3px;
-}
-.windowactive > .wt{
- background: linear-gradient(45deg, rgba(255,201,248,1) 0%, rgba(186,239,255,1) 50%, rgba(150,255,157,1) 100%);
-}
-.wtmaximize{
- display: none;
-}
-.windowactive span{
- opacity: 1.0;
-}
-.wmzx{
- position: absolute;
- top: 0px;
- right: 0px;
- display: flex;
- justify-content: flex-end;
-}
-.wm{
- padding: 8px 8px;
- opacity: .6;
-}
-.wm:hover{
- background: dodgerblue;
- color: #fff;
-}
-.wz{
- padding: 8px 8px;
- opacity: .6;
-}
-.wz:hover{
- background: orange;
- color: #fff;
-}
-.wx{
- cursor:url(../cursor-1.png), default;
- padding: 8px 10px;
- float: right;
- opacity: .6;
-}
-.wx:hover{
- background: #ff0000;
- color: white;
- border-radius: 0px 4px 0px 0px;
-}
-.winc{
- box-sizing: border-box;
- border-top : 1px solid #757575;
- color: #000000;
- background: #ffffff;
- border-radius: 0px 0px 4px 4px;
- padding : 5px;
- overflow : hidden!important;
- max-width: 100%;
-}
-.kit-button {
- display: inline-block;
- /* [kitstrap] */
-}
-.kit-selectable{
- cursor:url(../cursor-3.png), text;
-}
-.kit-selectable *::selection, .kit-selectable::selection{
- background: dodgerblue;
- color: white;
-}
-.kit-toggle{
- padding: 10px;
- border-bottom: 1px solid #909090;
-}
-.kit-toggle:hover{
- background: #f0f0f0;
-}
-.kit-toggle input{
- position: absolute;
- margin-left: -9999px;
- visibility: hidden;
-}
-.kit-toggle input + label {
- float: right;
- display: inline-block;
- position: relative;
- cursor: url(../cursor-2.png), pointer;
- outline: none;
- user-select: none;
-}
-.kit-toggle input + label {
- padding: 1px;
- width: 60px;
- height: 30px;
- background-color: transparent;
-}
-.kit-toggle input + label:before,
-.kit-toggle input + label:after {
- display: block;
- position: absolute;
- top: 0px;
- left: 0px;
- bottom: 5px;
- content: "";
-}
-.kit-toggle input + label:before {
- right: 0px;
- background-color: #e0e0e0;
- border-radius: 60px;
- transition: background 0.4s;
-}
-.kit-toggle input + label:after {
- width: 26px;
- background-color: #fff;
- border-radius: 100%;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
- transition: margin 0.4s;
-}
-.kit-toggle input:checked + label:before {
- background-color: #8ce196;
-}
-.kit-toggle input:checked + label:after {
- margin-left: 36px;
-}
-#task-ctx{
- z-index: 9999;
- display: none;
- position: fixed;
- bottom: 0px;
- background: rgba(222,222,222,.9);
- width: 200px;
- left : 74px;
- box-sizing: border-box;
- padding : 6px;
- padding-bottom: 10px;
- border : 2px solid white;
- border-radius: 5px 5px 0px 0px;
- border-bottom: none;
- box-shadow: 0px 2px 8px 0px rgba(0,0,0,.2);
-}
-#task-ctx-name{
- font-size: 18px;
-}
-#task-ctx-ver{
- 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;
- border-bottom : 2px solid transparent;
+.wt {
+ background: linear-gradient(#F2F2F2 0%, #D1D1D1 100%);
+ background: linear-gradient(45deg, rgba(194, 194, 194, 1) 0%, rgba(235, 235, 235, 1) 50%, rgba(194, 194, 194, 1) 100%);
}
-#task-ctx a:hover{
- color: dodgerblue;
- border-bottom: 2px solid dodgerblue;
-}
-#task-ctx-img{
- float: left;
- height : 26px;
- max-width: 30px;
+
+.windowactive>.wt {
+ background: linear-gradient(45deg, rgba(255, 201, 248, 1) 0%, rgba(186, 239, 255, 1) 50%, rgba(150, 255, 157, 1) 100%);
}
-#milp{
- outline: none;
- width: 200px;
- font-family: 'Noto Sans JP', sans-serif;
- position: absolute;
- top:0px;
- border: none;
- font-size: 16px;
- padding: 1px 8px;
- color: #fff;
- background: #444;
- border-bottom: 4px solid yellow;
- margin: 0px 4px;
- font-weight: 100;
-}
-h3{
- font-size: 20px;
- margin: 0px;
- font-weight: normal;
+.winc {
+ color: #3d3d3d;
}
-.btn{
- /* [kitstrap] */
+
+#task-ctx {
+ background: rgba(255, 255, 255, .9);
+ backdrop-filter: blur(20px);
}
-.little{
+.little {
font-size: 14px;
}
-.textbox{
- /* [kitstrap] */
-}
-.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);
+#kit-power {
text-align: center;
+ background: rgba(0, 0, 0, 0.6);
}
-#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 {
+ transition: .2s all ease;
}
-#kit-power a:hover{
+
+#kit-power a:hover {
+ text-decoration: none;
transform: scale(1.1);
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: 9993;
- position: absolute;
- top: 100px;
- left: 100px;
- background: white;
- border: 1px solid #606060;
- box-shadow: 1px 1px 5px 0 rgba(0,0,0,.3);
+#kit-context {
+ background: rgba(255, 255, 255, .9);
+ backdrop-filter: blur(20px);
+ box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .3);
border-radius: 0px 6px 6px 6px;
- padding: 0px;
- padding-bottom: 6px;
-}
-#kit-context input{
- width: 180px;
- margin: 5px;
- padding: 2px 5px;
- font-size: 15px;
-}
-#kit-context a{
- display: block;
- padding: 1px 6px;
- font-size: 15px;
-}
-#kit-context a:hover{
- background: dodgerblue;
- color: white;
-}
-#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-context-text, #kit-context-desktop, #kit-context-custom{
- color: #a0a0a0;
- font-size: 15px;
- padding: 4px 5px;
- border-top: 1px solid #a0a0a0;
- 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,.8);
- 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: #ffffff;
- padding: 4px 8px;
- border: 1px solid #000000;
- border-radius: 5px;
- width: 150px;
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
- margin: 16px 10px;
- 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;
- 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 0px 3px black;
- width: 120px;
- text-align: center;
-}
-.launcher-app:hover{
- background: rgba(0,0,0,.5);
- opacity: .8;
-}
-.launcher-app img{
- display: block;
- margin: 0 auto;
- height: 70px;
}
-#last-notification{
- background: rgba(255,255,255,.9);
+#kit-context a:hover {
+ background: rgba(30, 144, 255, .8);
+ color: #ffffff;
}
-.kit-fusen{
- background: rgba(255,250,220,.9);
- width: 200px;
- padding: 4px;
- margin: 8px;
- border-radius: 6px;
- box-shadow:0 1px 4px 0 rgba(0,0,0,.5);
- position: absolute;
- bottom: 20px;
- height: 55px;
+#last-notification {
+ background: rgba(255, 255, 255, .9);
}
-.kit-fusen-textarea{
- cursor:url(../cursor-3.png), text;
- font-family: 'Noto Sans JP', sans-serif;
- position: absolute;
- width: 180px;
- background: transparent;
- border: none;
- resize: none;
+
+#last-notification:hover {
+ background: rgb(255, 255, 255);
}
-@keyframes activeAnim{
- from{
- box-shadow: 0 2px 15px 0 rgba(0,0,0,.7), 0 0 0 0 rgba(50,200,90,1.0);
- }
- to{
- box-shadow: 0 2px 15px 0 rgba(0,0,0,.7), 0 0 0px 25px rgba(50,200,90,0);
+@keyframes activeAnim {
+ from {
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .7), 0 0 0 0 rgba(50, 200, 90, 1.0);
}
-}
+ to {
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .7), 0 0 0px 25px rgba(50, 200, 90, 0);
+ }
+}
-
@font-face {
- font-family: "Noto";
- src: url("fonts/NotoSansMonoCJKjp-Regular.otf");
+ font-family: "Noto";
+ src: url("fonts/NotoSansMonoCJKjp-Regular.otf");
}
+
body {
margin: 0px;
font-size: 16px;
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);
- cursor: url(../cursor-1.png), auto;
+ transition: none;
}
-.selected-section{
- transform: scale(0.8);
- background: rgba(0,0,0,.5);
-}
-.selected-section:before{
- color: #ffffff;
- top : -40px;
- font-size: 20px;
- position: absolute;
- width: 100%;
- text-align: center;
- content:"Desktop"
+.selected-section {
+ box-shadow: none;
}
-#desktop-0 {
- display: block;
-}
-#desktop-l{
- padding: 20px 0;
- font-weight: 100;
- font-size: 24px;
- color: white;
- text-align: center;
- background: rgba(0,0,0,.5);
- box-sizing: border-box;
- top: 0px;
- height: 100%;
-}
-#lock-unl{
- display: block;
- cursor:url(../cursor-2.png), pointer;
- font-size: 16px;
- margin: 20px;
-}
-#lock-unl:hover{
- color: cyan;
-}
-#lock-unl span{
- display: block;
- font-size: 32px;
-}
-#lock-username{
- margin: 10px;
- font-size: 40px;
+.selected-section:before {
+ text-shadow: none;
}
-#lock-user-icon{
- display: inline-block;
- background : white;
- width: 100px;
- height: 100px;
- margin-top: 15px;
- border-radius: 999px;
+
+#lock-user-icon {
border: 3px solid #ffffff;
+ box-shadow: none;
+}
+
+#lock-user-icon:after {
+ display: none;
}
-#desktop-l .textbox{
+
+#desktop-l .textbox {
border: none;
padding: 10px;
}
-.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%;
+
+header {
background: #BEE5F7;
- font-size: 15px;
- padding : 1px;
- color: #000000;
- box-shadow: 0px 0px 5px rgba(0,0,0,.3);
-}
-header #header-right{
- float: right;
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
}
-header a{
- cursor: url(../cursor-2.png),pointer;
- padding : 3px 4px;
+
+header a {
+ cursor: url(../cursor-2.png), pointer;
+ padding: 3px 4px;
}
-header a:hover{
+
+header a:hover {
color: dodgerblue;
}
-#kit-milp{
- z-index: 9994;
- display: none;
- position: fixed;
- background: #ffffff;
- padding-top: 30px;
- padding-bottom: 4px;
- left: 94px;
- width: 206px;
- border: 1px solid #909090;
-}
-#kit-milp-text{
- font-size: 19px;
- font-weight: 700;
- padding: 0px 3px;
- margin-bottom: 4px;
-}
-#kit-milp a{
- font-size: 15px;
- padding: 1px 5px;
- display: block;
- cursor:url(../cursor-1.png), default;
- overflow: hidden;
-}
-#kit-milp a:hover{
- background: skyblue;
-}
-#kit-milp-launch:before{
- content: "アプリを起動する"
-}
-#kit-milp-search:before{
- content: "Webで検索する"
-}
-#kit-milp-wikipedia:before{
- content: "Wikipediaで調べる"
-}
-.dropdown{
- display: none;
- position: fixed;
- top: 23px;
- right: 0;
+
+.dropdown {
background: #ffffff;
- border: 1px solid gray;
+ box-shadow: none;
+ border-radius: 0;
}
-#dropdown-clock{
+
+#dropdown-clock {
right: 56px;
}
-#dropdown-sound{
+
+#dropdown-sound {
right: 140px;
padding: 6px;
}
-#dropdown-sound-slider{
+
+#dropdown-sound-slider {
margin: 10px;
width: 180px;
}
-.ui-slider-horizontal{
+
+.ui-slider-horizontal {
+ box-shadow: none;
border-radius: 0px;
background: #e0e0e0;
- border: 1px solid black !important;
}
-.ui-slider-handle{
- outline: none;
- border-radius: 0px;
- border: 1px solid black !important;
- cursor: url(../cursor-1.png), auto !important;
+
+.ui-slider-handle {
+ box-shadow: none;
+ border-radius: 2px;
+ border: 1px solid #3d3d3d !important;
}
-.desktop-icons{
+
+.desktop-icons {
display: flex;
flex-wrap: wrap;
padding: 4px;
}
-.desktop-icon{
- padding: 4px;
- margin: 4px;
- width: 100px;
- text-align: center;
- overflow: hidden;
- color: #fff;
+
+.desktop-icon {
+ border-radius: 0;
}
-.desktop-icon:hover{
+
+.desktop-icon:hover {
background: black;
}
-.desktop-icon img{
+
+.desktop-icon img {
display: block;
margin: 0 auto;
height: 50px;
}
-.home-icon:before{
+
+.home-icon:before {
line-height: 0px;
display: block;
font-size: 30px;
- height : 25px;
+ height: 25px;
}
-.home-icon{
+
+.home-icon {
border: 1px solid transparent;
font-size: 13px;
display: inline-block;
color: white;
- cursor:url(../cursor-1.png), default;
- margin : 10px 0px;
- padding : 3px 0px;
+ cursor: url(../cursor-1.png), default;
+ margin: 10px 0px;
+ padding: 3px 0px;
text-align: center;
width: 100px;
}
-.home-icon:hover{
+
+.home-icon:hover {
border: 1px solid #ffffff;
background: black;
}
-.home-fa{
+
+.home-fa {
margin-bottom: 5px;
display: block;
font-size: 30px;
}
-footer{
- z-index: 9998;
+
+footer {
background: #c0c0c0;
- width : 100%;
- min-height: 45px;
- position: fixed;
- left: 0px;
- bottom: -5px;
- box-sizing: border-box;
- border-top : 2px solid #ffffff;
- padding-left: 48px;
-}
-footer #launch{
- cursor:url(../cursor-2.png), pointer;
- position: fixed;
- bottom: -2px;
- left: -2px;
- background: dodgerblue;
- border: 2px solid white;
- color: white;
- padding: 11px;
}
-footer #launch:hover{
+
+footer #launch:hover {
background: #1741FF;
}
-footer .task{
- font-size: 15px;
- cursor:url(../cursor-1.png), default;
- box-sizing: border-box;
- display: inline-block;
- background: #ffffff;
- border: 1px solid #404040;
- padding: 3px;
- width: 175px;
- margin : 0px 4px;
- position: relative;
- top : 3px;
-}
-footer .task:hover{
+
+footer .task:hover {
background: #e0e0e0;
}
-footer .task img{
+
+footer .task img {
float: left;
- height : 24px;
- width : 24px;
+ height: 24px;
+ width: 24px;
margin-right: 4px;
}
-footer .t-active{
+
+footer .t-active {
background: #6060c0;
color: #ffffff;
+ box-shadow: none !important;
+ border-top: 5px solid rgb(100, 245, 100) !important;
}
-footer .t-active:hover{
+
+footer .t-active:hover {
background: #9797e9;
color: #ffffff;
}
-footer .task-min{
+
+footer .task-min {
font-weight: 900;
}
-footer .task-min:after{
+
+footer .task-min:after {
content: "";
display: inline-block;
background: limegreen;
float: right;
margin-top: 6px;
- width: 10px;
- height: 10px;
- border: 2px solid #404040;
-}
-#footer-noti{
- position: absolute;
- cursor:url(../cursor-2.png), pointer;
- padding: 6px;
- right : 4px;
- bottom : 5px;
+ width: 12px;
+ height: 12px;
+ border: none;
+ border-radius: 0;
}
-#footer-noti:hover{
+
+#footer-noti:hover {
color: dodgerblue;
+ text-shadow: none;
}
-#footer-tasks{
- color: #000000;
- position: absolute;
- cursor:url(../cursor-2.png), pointer;
- font-size: 22px;
- padding: 6px 0px;
+
+#footer-tasks {
+ color: #ffffff;
+ text-shadow: none;
+ font-size: 15px;
}
-#footer-tasks:hover{
+
+#footer-tasks:hover {
color: dodgerblue;
}
-#notifications{
+#notifications {
background: #f0f0f0;
box-shadow: none;
}
-#notifications .notis{
+#notifications .notis {
border: 1px solid #a0a0a0;
border-radius: 0;
-}
+}
-#notifications .notis_buttons a{
+#notifications .notis_buttons a {
border-radius: 0;
}
-#tasks{
+#tasks {
padding-left: 28px;
}
-.window{
- font-size: 15px;
- position: absolute;
- min-width : 200px;
- max-width: 100%;
- padding : 0px;
- cursor:url(../cursor-1.png), default;
+
+.window {
+ box-shadow: none;
background: #FFF7D4;
- border: 1px solid #404040;
+ border: 1px solid #909090;
transition: none;
+ border-radius: 0;
}
-.window:after{
- visibility: hidden;
- content: "_";
- position: absolute;
- height: 44px;
-}
-section .ui-draggable-dragging{
- box-shadow: 0px 2px 10px 0px rgba(0,0,0,.5), 0px 0px 0px 8px rgba(30,70,255,.6);
-}
-.win-highlight{
- background: white;
-}
-.windowactive{
- border: 1px solid black;
+
+.windowactive {
+ border: 1px solid #3d3d3d;
}
-.windowactive .wt{
+
+.windowactive .wt {
background: #c7d0ff;
}
-.wt{
- display: block;
- color: #000000;
- font-size: 16px;
- padding-top: 2px;
+
+.wt {
+ border-radius: 0;
}
-.wt:before{
+
+.wt:before {
color: white;
text-shadow: 0px 1px 2px black;
}
-.wt img{
+
+.wt img {
width: 18px;
height: 18px;
float: left;
margin: 3px;
}
-.wtmaximize{
+
+.wtmaximize {
display: none;
}
-.windowactive span{
+
+.windowactive span {
opacity: 1.0;
}
-.wmzx{
- position: absolute;
- top: 0px;
- right: 0px;
- font-size: 12px;
- display: flex;
- justify-content: flex-end;
-}
-.wm{
- padding: 8px 8px;
- opacity: .6;
-}
-.wm:hover{
- background: dodgerblue;
- color: #fff;
-}
-.wz{
- padding: 8px 8px;
- opacity: .6;
-}
-.wz:hover{
- background: orange;
- color: #fff;
-}
-.wx{
- cursor:url(../cursor-1.png), default;
- padding: 8px 10px;
- float: right;
- opacity: .6;
-}
-.wx:hover{
- background: #ff0000;
- color: white;
-}
-.winc{
- box-sizing: border-box;
- border-top : 1px solid #757575;
- color: #000000;
- background: #ffffff;
- padding : 5px;
- overflow : hidden;
+
+.wx:hover {
+ border-radius: 0;
}
-.kit-button, kit-button{
+
+.kit-button,
+kit-button {
display: inline-block;
- cursor:url(../cursor-1.png), default;
+ cursor: url(../cursor-1.png), default;
line-height: 200%;
background: dodgerblue;
color: #ffffff;
border-radius: 0;
transition: none;
}
-.kit-button:hover, kit-button:hover{
+
+.kit-button:hover,
+kit-button:hover {
box-shadow: none;
background: #1875d1;
}
-.kit-button:active{
+
+.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: absolute;
- bottom: 0px;
- background: rgb(222,222,222);
- width: 175px;
- left : 74px;
- box-sizing: border-box;
- padding : 6px;
- padding-bottom: 8px;
- margin-top: 24px;
- border : 2px solid white;
- font-size: 15px;
-}
-#task-ctx-name{
- font-size: 16px;
-}
-#task-ctx-ver{
- font-size: 12px;
- padding-bottom : 5px;
- margin-bottom: 5px;
- border-bottom: 1px solid gray;
-}
-#task-ctx a{
- cursor:url(../cursor-1.png), default;
- display: block;
- border-bottom : 2px solid transparent;
-}
-#task-ctx a:hover{
- color: dodgerblue;
- border-bottom: 2px solid dodgerblue;
-}
-#task-ctx-img{
- float: left;
- height : 26px;
- max-width: 30px;
-}
-#milp{
- outline: none;
- width: 200px;
- font-family: 'Noto Sans JP', sans-serif;
- position: absolute;
- top:0px;
- border: none;
- font-size: 15px;
- padding: 1px 4px;
- color: #fff;
- background: #444;
- margin: 0px 4px;
- font-weight: 100;
-}
-h3{
- font-size: 18px;
- margin: 0px;
- font-weight: normal;
+#task-ctx {
+ box-shadow: none;
+ border-radius: 0;
+ border-color: #909090;
}
-.btn, kit-btn{
- cursor:url(../cursor-2.png), pointer;
+
+.btn,
+kit-btn {
+ cursor: url(../cursor-2.png), pointer;
border: 1px solid gray;
margin: 4px 0px;
padding: 2px 4px;
border-radius: 0;
transition: none;
}
-.btn:hover{
+
+.btn:hover {
border: 1px solid black;
background: #e0e0e0;
box-shadow: none;
}
-.little{
- font-size: 13px;
-}
-.textbox{
- cursor:url(../cursor-3.png), text;
+
+.textbox {
+ cursor: url(../cursor-3.png), text;
outline: none;
border: 1px solid #000000;
font-size: 16px;
border-radius: 0;
box-shadow: none;
}
-.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: #000000;
- transition: none;
- text-align: center;
+
+#kit-power {
+ background: #202020;
}
-#kit-power a{
- cursor:url(../cursor-2.png), pointer!important;
- display: block;
- font-size: 20px;
- font-weight: 100;
- padding: 5px 0;
- color: white;
- transition: .1s all ease;
+
+#kit-power a {
+ text-shadow: none;
}
-#kit-power a:hover{
+
+#kit-power a:hover {
color: cyan;
}
-#kit-power a:after{
- display: block;
- font-size: 13px;
-}
-#kit-power-shutdown:after{
- content: "アプリケーションを全て終了してシステムを終了します";
-}
-#kit-power-reboot:after{
- content: "シャットダウンし、再びシステムを起動します";
-}
-#kit-power-suspend:after{
- content: "より高速な再起動をします(試験的な機能)";
-}
-#kit-power-lock:after{
- content: "ユーザーからログアウトしロック画面を表示します";
-}
-#kit-context{
- cursor:url(../cursor-1.png), default;
- display: none;
- z-index: 9994;
- position: absolute;
- top: 100px;
- left: 100px;
- background: white;
- border: 1px solid #606060;
- padding: 0px;
- padding-bottom: 3px;
-}
-#kit-context input{
- width: 180px;
- margin: 5px;
- padding: 2px 5px;
- font-size: 14px;
-}
-#kit-context a{
- display: block;
- padding: 1px 6px;
- font-size: 14px;
-}
-#kit-context a:hover{
- background: dodgerblue;
- color: white;
-}
-#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-context-text, #kit-context-desktop, #kit-context-custom{
- color: #a0a0a0;
- font-size: 15px;
- padding: 4px 5px;
- border-top: 1px solid #a0a0a0;
- border-bottom: 1px solid #a0a0a0;
+
+#kit-context {
+ border-radius: 0;
+ box-shadow: none;
+ border: 2px solid #909090;
}
-#kit-tasks{
- display: none;
- position: fixed;
- top: 0px;
- left: 0px;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
+#kit-tasks {
background: #000030;
- padding: 20px;
- padding-bottom: 120px;
- overflow: scroll;
}
-#kit-tasks:before{
+
+#kit-tasks:before {
content: "実行中のアプリケーション ( クリックで強制終了 )";
display: block;
color: #ffffff;
}
-#kit-tasks .task{
- cursor:url(../cursor-2.png), pointer;
- display: inline-block;
- background: #e0e0e0;
- padding: 4px 8px;
- border: 1px solid #000000;
- width: 150px;
- margin: 16px 10px;
-}
-#kit-tasks .task:hover{
- background: #ffffff;
-}
-#kit-tasks .task:hover:after{
- content: "クリックして終了";
- text-align: center;
- display: block;
- position: absolute;
- 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;
-}
-#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;
- background: rgba(0,0,0,.4);
- color: white;
-}
-#launcher-header{
- font-weight: 100;
- margin-top: 30px;
- padding: 10px;
- font-size: 20px;
+
+#kit-tasks .task {
+ border-radius: 0;
}
-#launcher-header .kit-button{
- font-size: 16px;
- float: right;
+
+#kit-tasks .task:hover {
+ background: #f0f0f0;
+ color: #3d3d3d;
}
-#launcher-apps{
- display: flex;
- flex-wrap: wrap;
+
+#launcher {
+ background: #3d3d3d;
}
-.launcher-app{
- padding: 4px;
- margin: 4px;
- width: 120px;
- text-align: center;
+
+.launcher-app {
+ text-shadow: none;
+ border-radius: 0;
}
-.launcher-app:hover{
+
+.launcher-app:hover {
background: black;
}
-.launcher-app img{
- display: block;
- margin: 0 auto;
- height: 70px;
-}
-#last-notification{
+
+#last-notification {
background: #f0f0f0;
border-radius: 0;
+ box-shadow: none;
+ border: 2px solid #909090;
}
-#last-notification-content{
- font-size: 14px;
+#last-notification-content {
+ font-size: 13px;
}
-#last-notification-buttons a{
+#last-notification-buttons a {
border-radius: 0;
}
-.kit-fusen{
- background: rgb(255,250,220);
- border: 1px solid #909090;
- width: 200px;
- padding: 4px;
- margin: 8px;
- position: absolute;
- bottom: 20px;
- height: 55px;
-}
-.kit-fusen-textarea{
- cursor:url(../cursor-3.png), text;
- font-family: 'Noto Sans JP', sans-serif;
- position: absolute;
- width: 180px;
- background: transparent;
- border: none;
- resize: none;
+.kit-fusen {
+ box-shadow: none;
+ border-radius: 0;
+ border: 2px solid #909090;
}
-.kit-toggle input+label:after{
+
+.kit-toggle input+label:after {
box-shadow: none;
border: 1px solid #909090;
transition: none;
}
+
.kit-toggle input+label:before {
transform: scale(.75);
- border-radius: 0;
- transition: none;
-}
\ No newline at end of file
+ border-radius: 0;
+ transition: none;
+}
-
@font-face {
- font-family: "Noto";
- src: url("fonts/NotoSansMonoCJKjp-Regular.otf");
+ font-family: "Noto";
+ src: url("fonts/NotoSansMonoCJKjp-Regular.otf");
}
+
body {
margin: 0px;
font-size: 16px;
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%;
+ top: 25px;
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;
+#desktop-l {
padding-top: 15%;
- 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{
+
+#desktop-l .window {
font-size: 16px;
color: white;
text-align: center;
text-shadow: none;
font-weight: 400;
}
-#lock-unl{
+
+#lock-unl {
display: block;
- cursor:url(../cursor-2.png), pointer;
+ cursor: url(../cursor-2.png), pointer;
font-size: 16px;
margin: 20px 0;
position: fixed;
bottom: 0px;
width: 100%;
}
-#lock-unl > span{
+
+#lock-unl>span {
display: block;
- font-size: 32px;
+ font-size: 32px;
margin: 4px;
}
-#lock-username{
+
+#lock-username {
margin: 10px;
font-size: 20px;
}
-#lock-user-icon{
+
+#lock-user-icon {
display: inline-block;
- background : white;
+ 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);
+ 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{
+
+#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);
+ 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{
+
+#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;
+ background: rgba(255, 255, 255, .7);
}
-header #header-right{
- float: right;
+
+header {
+ background: rgba(255, 255, 255, .9);
+ backdrop-filter: blur(20px);
+ padding: 2px 0;
}
-header a{
- cursor: url(../cursor-2.png),pointer;
- padding : 0px 4px;
+
+header a {
+ cursor: url(../cursor-2.png), pointer;
+ padding: 2px 4px;
}
-header a:hover{
+
+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で調べる"
-}
-.dropdown{
+
+.dropdown {
display: none;
position: fixed;
top: 25px;
right: 0;
- background: rgba(245,245,245,.95);
- box-shadow: 0 2px 8px 0 rgba(0,0,0,.3);
+ background: rgba(245, 245, 245, .95);
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
border-radius: 0 0 5px 5px;
}
-#dropdown-clock{
+
+#dropdown-clock {
right: 60px;
}
-#dropdown-sound{
+
+#dropdown-sound {
right: 146px;
padding: 6px;
}
-#dropdown-sound-slider{
+
+#dropdown-sound-slider {
margin: 10px;
width: 180px;
}
-.ui-slider-horizontal{
+
+.ui-slider-horizontal {
border-radius: 999px;
- background: linear-gradient(45deg, rgba(255,135,241,1) 0%, rgba(117,239,255,1) 50%, rgba(92,242,102,1) 100%);
+ background: linear-gradient(45deg, rgba(255, 135, 241, 1) 0%, rgba(117, 239, 255, 1) 50%, rgba(92, 242, 102, 1) 100%);
border: 1px solid white !important;
- box-shadow: 0 1px 3px 0 rgba(0,0,0,.4);
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
}
-.ui-slider-handle{
+
+.ui-slider-handle {
outline: none;
border-radius: 999px;
border: 1px solid white !important;
- box-shadow: 0 1px 3px 0 rgba(0,0,0,.5);
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .5);
cursor: url(../cursor-1.png), auto !important;
}
-.desktop-icons{
+
+.desktop-icons {
display: flex;
flex-wrap: wrap;
padding: 4px;
}
-.desktop-icon{
+
+.desktop-icon {
border-radius: 5px;
padding: 4px;
margin: 4px;
color: #fff;
border: 2px solid transparent;
}
-.desktop-icon:hover{
- background: rgba(0,0,0,.3);
- border: 2px solid rgba(200,200,200,.5);
+
+.desktop-icon:hover {
+ background: rgba(0, 0, 0, .3);
+ border: 2px solid rgba(200, 200, 200, .5);
}
-.desktop-icon img{
+
+.desktop-icon img {
display: block;
margin: 0 auto;
height: 50px;
}
-.home-icon:before{
+
+.home-icon:before {
line-height: 0px;
display: block;
font-size: 30px;
- height : 25px;
+ height: 25px;
}
-.home-icon{
+
+.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;
+ 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-icon:hover {
+ background: rgba(255, 255, 255, .5);
}
-.home-fa{
+
+.home-fa {
margin-bottom: 5px;
display: block;
font-size: 32px;
}
-footer{
- z-index: 9998;
- background: rgba(255,255,255,.5);
- width : 80%;
+
+footer {
+ 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: none;
+ backdrop-filter: blur(20px);
+ box-shadow: 0px 0px 8px rgba(0, 0, 0, .4);
border-radius: 10px 10px 0 0;
text-align: center;
+ position: fixed;
}
-footer #launch{
- color: white;
+
+footer #launch {
text-shadow: 0px 1px 3px black;
position: fixed;
left: 10px;
bottom: 10px;
- cursor: url(../cursor-2.png), pointer;
+ background: transparent;
+ border: none;
font-size: 22px;
padding: 6px 5px;
}
-footer .task{
- cursor:url(../cursor-1.png), default;
+
+footer .task {
+ cursor: url(../cursor-1.png), default;
+ background: transparent;
+ overflow: visible;
box-sizing: border-box;
display: inline-block;
padding: 5px 4px;
width: 70px;
transition: .2s all ease;
position: relative;
- top : -5px;
+ top: -5px;
text-align: center;
font-size: 0px;
color: transparent;
transition: .2s all ease;
+ border-top: none;
}
-footer .task:hover{
+
+footer .task:hover {
+ border: none;
+ background: transparent;
transform: scale(1.4);
position: relative;
top: -20px;
}
-footer .task:active{
+
+footer .task:active {
transition: 0s;
}
-footer .task img{
+
+footer .task img {
+ all: initial;
display: block;
- height : 50px;
+ height: 50px;
margin: 0 auto;
}
-footer .task-min{
- font-weight: 900;
-}
-footer .task-min:before{
+
+footer .task-min:after {
+ all: initial;
content: "";
display: inline-block;
background: #606060;
position: absolute;
- bottom: -5px;
+ bottom: -29px;
left: calc(50% - 6px);
margin: 0px;
- width: 9px;
- height: 9px;
+ width: 7px;
+ height: 7px;
border-radius: 99px;
}
-#footer-noti{
+
+footer .t-active {
+ border-top: none !important;
+}
+
+#footer-noti {
position: fixed;
color: #fff;
- font-weight: 100;
text-shadow: 0px 1px 4px black;
- cursor:url(../cursor-2.png), pointer;
+ cursor: url(../cursor-2.png), pointer;
padding: 6px;
- right : 4px;
- bottom : 5px;
+ right: 4px;
+ bottom: 5px;
}
-#footer-noti:hover{
+
+#footer-noti:hover {
text-shadow: 0px 1px 3px dodgerblue;
}
-#footer-tasks{
+
+#footer-tasks {
color: white;
text-shadow: 0px 1px 3px black;
position: fixed;
font-size: 22px;
padding: 6px 5px;
}
-#footer-tasks:hover{
+
+#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);
- backdrop-filter: blur(20px);
- box-shadow: 0px 0px 60px 0px rgba(0,0,0,.4);
+
+#notifications {
+ background: rgba(255, 255, 255, .7);
+ backdrop-filter: blur(25px);
+ box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, .4);
padding: 40px 8px 50px 8px;
}
-#notifications-show-history{
+
+#notifications-show-history {
display: block;
text-align: right;
color: white;
text-shadow: none;
text-decoration: none;
- background: rgba(0,0,0,.3);
+ background: rgba(0, 0, 0, .3);
position: absolute;
bottom: 90px;
- right: 20px;
+ right: 100px;
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 {
+ padding: 0;
+ background: rgba(255, 255, 255, .7);
+ font-size: 15px;
}
-#notifications .notis:hover{
- border: 1px solid #505050;
- box-shadow: 0px 1px 5px 0px rgba(0,0,0,.3);
+
+#notifications .notis:hover {
+ 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;
+
+#notifications .notis:hover .notis_close {
+ visibility: visible;
}
-.notis .notis_close{
- cursor:url(../cursor-2.png), pointer;
- float: right;
+
+#notifications .notis_app {
+ background: rgba(0, 0, 0, .15);
+ font-size: 14px;
+ color: #3d3d3d;
+ text-align: center;
+ padding: 4px;
+}
+
+.notis .notis_img {
+ margin: 5px;
+}
+
+.notis .notis_close {
+ visibility: hidden;
background: gray;
padding: 0;
width: 16px;
height: 16px;
- margin: 9px;
- border-radius: 99px;
+ margin: 3px;
+}
+
+.notis .notis_buttons {
+ padding: 0 5px;
}
-.notis_time{
+
+.notis .notis_time {
font-size: 13px;
color: #909090;
+ padding: 5px;
}
-.window{
+
+.window {
+ all: initial;
position: absolute;
- box-shadow: 0px 2px 20px 0px rgba(0,0,0,.3);
- border-radius : 4px;
- min-width : 200px;
- padding : 0px;
+ box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, .3);
+ border-radius: 4px;
+ min-width: 200px;
+ padding: 0px;
background: #f0f0f0;
- cursor:url(../cursor-1.png), default;
+ cursor: url(../cursor-1.png), default;
text-align: center;
}
-.window:after{
+
+.window:after {
visibility: hidden;
content: "_";
position: absolute;
height: 60px;
}
-.windowactive{
+
+.windowactive {
background-color: #f0f0f0;
- background-image : linear-gradient(#F5F5F5 0%,#d9d9d9 30px);
- box-shadow: 0px 8px 30px 0 rgba(0,0,0,.6);
+ background-image: linear-gradient(#F5F5F5 0%, #d9d9d9 30px);
+ box-shadow: 0px 8px 30px 0 rgba(0, 0, 0, .6);
}
-section .ui-draggable-dragging{
- box-shadow: 0px 2px 20px 0px rgba(0,0,0,.8), 0px 0px 0px 8px rgba(30,70,255,.6);
+
+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);
+
+.win-highlight {
+ box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, .8), 0px 0px 0px 8px rgba(255, 30, 70, .6);
}
-.windowactive .wt{
+
+.windowactive .wt {
color: #000000;
}
-.wt{
+
+.wt {
+ text-align: center;
color: #909090;
display: block;
font-size: 16px;
padding-top: 1px;
- border-radius : 4px 4px 0 0;
+ padding-right: 10px;
+ border-radius: 4px 4px 0 0;
}
-.wt img{
+
+.wt img {
+ clear: both;
+ float: initial;
position: relative;
- top: 2px;
- width: 18px;
- height: 18px;
+ top: 4px;
+ width: 20px;
+ height: 20px;
margin: 0px 2px;
}
-.wmzx{
+
+.wmzx {
position: absolute;
top: 0px;
- left: 0px;
+ left: 3px;
+ right: auto;
font-size: 12px;
display: flex;
- justify-content: flex-start;
+ justify-content: flex-start;
flex-direction: row-reverse;
}
-.wm{
+
+.wm {
+ padding: 0;
background: #b0b0b0;
border: 1px solid #909090;
font-size: 7px;
color: transparent;
- height: 12px;
- width: 12px;
+ height: 13px;
+ width: 13px;
border-radius: 99px;
- margin: 6px 4px;
+ margin: 7px 3px;
}
-.wm:hover{
- color: rgba(0,0,0,.9);
+
+.wm:hover {
+ color: rgba(0, 0, 0, .9);
}
-.windowactive .wm{
+
+.windowactive .wm {
background: #FFE72E;
border: 1px solid #D6AC2B;
}
-.wx{
+
+.wx {
+ padding: 0;
background: #b0b0b0;
border: 1px solid #909090;
font-size: 7px;
line-height: 12px;
color: transparent;
- height: 12px;
- width: 12px;
+ height: 13px;
+ width: 13px;
border-radius: 99px;
- margin: 6px 4px;
+ margin: 7px 3px;
}
-.wx:hover{
- color: rgba(0,0,0,.9);
+
+.wx:hover {
+ color: rgba(0, 0, 0, .9);
+ border-radius: 50%;
}
-.windowactive .wx{
+
+.windowactive .wx {
background: #F03E3E;
border: 1px solid #C23232;
}
-.wz{
+
+.wz {
+ padding: 0;
background: #b0b0b0;
border: 1px solid #909090;
font-size: 7px;
line-height: 12px;
color: transparent;
- height: 12px;
- width: 12px;
+ height: 13px;
+ width: 13px;
border-radius: 99px;
- margin: 6px 2px;
+ margin: 7px 3px;
}
-.wz:hover{
- color: rgba(0,0,0,.9);
+
+.wz:hover {
+ color: rgba(0, 0, 0, .9);
}
-.windowactive .wz{
+
+.windowactive .wz {
background: #38C93B;
border: 1px solid #23961D;
}
-.winc{
+
+.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, kit-button{
+
+.kit-button,
+kit-button {
display: inline-block;
- cursor:url(../cursor-1.png), default;
+ cursor: url(../cursor-1.png), default;
border-radius: 4px;
- background : linear-gradient(#18C5F5 10%,#0567F0 90%);
+ background: linear-gradient(#18C5F5 10%, #0567F0 90%);
border: 1px solid rgb(32, 94, 151);
color: #ffffff;
margin: 2px 2px;
line-height: normal;
transition: none;
}
-.kit-button:hover, kit-button:hover{
- box-shadow: inset 0 999px 0 0 rgba(0,0,0,.2)!important;
+
+.kit-button:hover,
+kit-button:hover {
+ box-shadow: inset 0 999px 0 0 rgba(0, 0, 0, .2) !important;
}
-.kit-button:active{
+
+.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;
-}
-.kit-toggle{
- padding: 10px;
- border-bottom: 1px solid #909090;
-}
-.kit-toggle:hover{
- background: #f0f0f0;
-}
-.kit-toggle input{
- position: absolute;
- margin-left: -9999px;
- visibility: hidden;
-}
-.kit-toggle input + label {
- float: right;
- display: inline-block;
- position: relative;
- cursor: url(../cursor-2.png), pointer;
- outline: none;
- user-select: none;
-}
-.kit-toggle input + label {
- padding: 1px;
- width: 60px;
- height: 30px;
- background-color: transparent;
-}
-.kit-toggle input + label:before,
-.kit-toggle input + label:after {
- display: block;
- position: absolute;
- top: 0px;
- left: 0px;
- bottom: 5px;
- content: "";
-}
-.kit-toggle input + label:before {
- right: 0px;
- background-color: #e0e0e0;
- border-radius: 60px;
- transition: background 0.4s;
-}
-.kit-toggle input + label:after {
- width: 26px;
- background-color: #fff;
- border-radius: 100%;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
- transition: margin 0.4s;
-}
-.kit-toggle input:checked + label:before {
- background-color: #8ce196;
-}
-.kit-toggle input:checked + label:after {
- margin-left: 36px;
-}
-#task-ctx{
+
+
+#task-ctx {
z-index: 9999;
display: none;
position: fixed;
bottom: 0px;
- background: rgba(255,255,255,.8);
+ background: rgba(255, 255, 255, .8);
backdrop-filter: blur(10px);
width: 200px;
- left : 74px;
+ left: 74px;
box-sizing: border-box;
- padding : 6px 0;
- border : 1px solid #a0a0a0;
+ 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);
+ box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .5);
}
-#task-ctx:after{
+
+#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{
+ backdrop-filter: blur(10px);
+ width: 0px;
+ height: 0px;
+ box-sizing: border-box;
+ position: absolute;
+ bottom: -30px;
+ left: 20px;
+ box-sizing: border-box;
+ border: 15px solid transparent;
+ border-top: 15px solid rgba(255, 255, 255, .8);
+}
+
+#task-ctx-name {
font-size: 18px;
}
-#task-ctx-ver{
+
+#task-ctx-ver {
padding-left: 6px;
font-size: 14px;
- padding-bottom : 5px;
+ padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid gray;
}
-#task-ctx a{
- cursor:url(../cursor-1.png), default;
+
+#task-ctx a {
+ cursor: url(../cursor-1.png), default;
display: block;
padding: 0 6px;
}
-#task-ctx a:hover{
+
+#task-ctx a:hover {
color: #fff;
background: #27E;
}
-#task-ctx a span{
+
+#task-ctx a span {
opacity: .7;
}
-#task-ctx-img{
+
+#task-ctx-img {
float: left;
- height : 26px;
+ 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;
+.btn {
+ cursor: url(../cursor-2.png), pointer;
border: 1px solid #a0a0a0;
margin: 4px 0px;
padding: 2px 4px;
transition: .2s all ease;
box-shadow: inset 0px 1px 0 0 #ffffff;
}
-.btn:hover{
+
+.btn:hover {
border: 1px solid black;
background: #e0e0e0;
}
-.little{
- font-size: 14px;
-}
-.textbox{
- cursor:url(../cursor-3.png), text;
+
+.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);
+ 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{
+
+.textbox:focus {
background: #fff;
- box-shadow: 0 0 0 3px rgba(0,70,200,.5);
-}
-.textbox::selection{
- background: #27E;
- color: white;
+ box-shadow: 0 0 0 3px rgba(0, 70, 200, .5);
}
-.task-name{
- font-family: 'Noto Sans JP', sans-serif;
-}
-.kit-hyperlink{
- color: dodgerblue;
- text-decoration: underline;
- cursor:url(../cursor-2.png), pointer;
+
+.textbox::selection {
+ background: #27E;
+ color: white;
}
-#kit-power{
+
+#kit-power {
display: none;
position: fixed;
top: 0px;
width: 100%;
height: 100%;
z-index: 10000;
- background: rgba(0,0,0,0.6);
+ background: rgba(0, 0, 0, 0.6);
text-align: center;
}
-#kit-power a{
- cursor:url(../cursor-2.png), pointer!important;
+
+#kit-power a {
+ cursor: url(../cursor-2.png), pointer !important;
display: block;
font-size: 30px;
font-weight: 100;
color: white;
transition: .1s all ease;
}
-#kit-power a:hover{
+
+#kit-power a:hover {
+ text-decoration: none;
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: rgba(255,255,255,.8);
+#kit-context {
+ background: rgba(255, 255, 255, .8);
backdrop-filter: blur(20px);
border: 1px solid #a0a0a0;
- box-shadow: 1px 1px 15px 0 rgba(0,0,0,.6);
+ 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{
+
+#kit-context a {
display: block;
- padding: 0px 6px;
+ padding: 1px 6px;
font-size: 15px;
}
-#kit-context a:hover{
+
+#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-context-text, #kit-context-desktop, #kit-context-custom{
- color: #a0a0a0;
- font-size: 15px;
- padding: 4px 5px;
- border-top: 1px solid #a0a0a0;
-}
-#kit-tasks{
+#kit-tasks {
display: none;
position: fixed;
top: 0px;
width: 100%;
height: 100%;
box-sizing: border-box;
- background: rgba(0,0,0,.9);
+ background: rgba(0, 0, 0, .9);
padding: 20px;
padding-bottom: 120px;
overflow: scroll;
}
-#kit-tasks:before{
+
+#kit-tasks:before {
content: "実行中のアプリケーション ( クリックで強制終了 )";
display: block;
color: #ffffff;
}
-#kit-tasks .task{
- cursor:url(../cursor-2.png), pointer;
+
+#kit-tasks .task {
+ cursor: url(../cursor-2.png), pointer;
display: inline-block;
background: transparent;
padding: 4px 8px;
color: #fff;
border-radius: 5px;
width: 150px;
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,.5);
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .5);
margin: 16px 10px;
transition: .2s all ease;
opacity: .8;
}
-#kit-tasks .task:hover{
+
+#kit-tasks .task:hover {
opacity: 1.0;
transform: scale(1.1);
- box-shadow: 0px 2px 6px 0px rgba(0,0,0,1);
+ box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 1);
}
-#kit-tasks .task:hover:after{
+
+#kit-tasks .task:hover:after {
content: "クリックして終了";
text-align: center;
display: block;
position: absolute;
- top : 35px;
+ top: 35px;
color: #e0e0e0;
width: 150px;
font-size: 12px;
}
-#kit-tasks .task-min:before{
+
+#kit-tasks .task-min:before {
content: "";
display: inline-block;
background: limegreen;
border: 2px solid #404040;
border-radius: 3px;
}
-#kit-tasks .task img{
+
+#kit-tasks .task img {
float: left;
height: 24px;
}
-#launcher{
+
+#launcher {
display: none;
position: fixed;
top: 0px;
height: 100%;
box-sizing: border-box;
padding: 20px;
- background: rgba(0,0,0,.4);
+ background: rgba(0, 0, 0, .4);
color: white;
}
-#launcher-header{
+
+#launcher-header {
font-weight: 100;
margin-top: 30px;
padding: 10px;
font-size: 24px;
}
-#launcher-header .kit-button{
+
+#launcher-header .kit-button {
font-size: 18px;
float: right;
}
-#launcher-apps{
+
+#launcher-apps {
display: flex;
- flex-wrap: wrap;
+ flex-wrap: wrap;
}
-.launcher-app{
+
+.launcher-app {
border-radius: 5px;
padding: 4px;
margin: 4px;
font-size: 14px;
text-align: center;
}
-.launcher-app:hover{
+
+.launcher-app:hover {
opacity: .5;
}
-.launcher-app img{
+
+.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);
+
+#last-notification {
+ background: rgba(255, 255, 255, .9);
backdrop-filter: blur(10px);
- 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;
+ bottom: 84px;
+ padding: 0;
}
-#last-notification-close{
+
+#last-notification-close {
background: red;
width: 15px;
height: 15px;
margin: 8px;
- display: inline-block;
+ display: block;
float: right;
border-radius: 999px;
- cursor:url(../cursor-2.png), pointer;
+ cursor: url(../cursor-2.png), pointer;
opacity: .6;
}
-#last-notification-title{
- font-weight: 700;
+
+#last-notification-app {
+ background: rgba(0, 0, 0, .15);
+ font-size: 14px;
+ color: #3d3d3d;
+ text-align: right;
padding: 4px;
- background: rgba(0,0,0,.1);
}
-#last-notification-content{
- font-size: 14px;
- padding: 0 4px;
+
+#last-notification-img {
+ margin: 6px;
}
-#last-notification-app{
- font-size: 14px;
- color: #a0a0a0;
- text-align: right;
- padding: 0 4px;
+
+#last-notification-content {
+ color: #909090;
}
-.kit-fusen{
- background: rgba(255,250,220,.9);
- width: 200px;
- padding: 4px;
- margin: 8px;
- border-radius: 6px;
- box-shadow:0 1px 4px 0 rgba(0,0,0,.5);
- position: absolute;
- bottom: 20px;
- height: 55px;
+
+.kit-fusen {
+ border-radius: 0;
+}
+
+.kit-fusen-textarea {
+ width: 190px;
}
-.kit-fusen-textarea{
- cursor:url(../cursor-3.png), text;
- font-family: 'Noto Sans JP', sans-serif;
- position: absolute;
- width: 180px;
- background: transparent;
- border: none;
- resize: none;
-}
\ No newline at end of file
OSDN Git Service
