-
@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
