Skip to content

Commit 5b7513c

Browse files
skillnullskillnull
committed
feat: theme
1 parent 82487b1 commit 5b7513c

9 files changed

Lines changed: 375 additions & 223 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010
1111
```html
1212
使用 UMD 格式
13-
<script src="https://www.unpkg.com/@skillnull/device-js@2.1.5/dist/device.js"></script>
13+
<script src="https://www.unpkg.com/@skillnull/device-js@2.1.6/dist/device.js"></script>
1414
# or
15-
<script src="https://cdn.jsdelivr.net/npm/@skillnull/device-js@2.1.5/dist/device.js"></script>
15+
<script src="https://cdn.jsdelivr.net/npm/@skillnull/device-js@2.1.6/dist/device.js"></script>
1616

1717

1818
使用 ES 格式
19-
<script src="https://www.unpkg.com/@skillnull/device-js@2.1.5/dist/device.es.js" type="module"></script>
19+
<script src="https://www.unpkg.com/@skillnull/device-js@2.1.6/dist/device.es.js" type="module"></script>
2020
# or
21-
<script src="https://cdn.jsdelivr.net/npm/@skillnull/device-js@2.1.5/dist/device.es.js" type="module"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/@skillnull/device-js@2.1.6/dist/device.es.js" type="module"></script>
2222
```
2323

2424
> #### 安装

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@skillnull/device-js",
3-
"version": "2.1.5",
3+
"version": "2.1.6",
44
"description": "Get device information by javascript.",
55
"main": "dist/device",
66
"author": "skillnull",

‎src/css/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "./scrollbar.css";
2+
@import "./loading.css";
3+
@import "./theme_light.css";
4+
@import "./theme_dark.css";

‎src/css/loading.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.ball-pulse {
2+
transform: scale(1);
3+
}
4+
5+
.ball-pulse > div:nth-child(1) {
6+
-webkit-animation: ball-pulse-scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
7+
animation: ball-pulse-scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
8+
}
9+
10+
.ball-pulse > div:nth-child(2) {
11+
-webkit-animation: ball-pulse-scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
12+
animation: ball-pulse-scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
13+
}
14+
15+
.ball-pulse > div:nth-child(3) {
16+
-webkit-animation: ball-pulse-scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
17+
animation: ball-pulse-scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
18+
}
19+
20+
.ball-pulse > div {
21+
background-color: #0FB560;
22+
width: 15px;
23+
height: 15px;
24+
border-radius: 100%;
25+
margin: 2px;
26+
-webkit-animation-fill-mode: both;
27+
animation-fill-mode: both;
28+
display: inline-block;
29+
}
30+
31+
@keyframes ball-pulse-scale {
32+
0% {
33+
-webkit-transform: scale(1);
34+
transform: scale(1);
35+
opacity: 1;
36+
}
37+
45% {
38+
-webkit-transform: scale(0.1);
39+
transform: scale(0.1);
40+
opacity: 0.7;
41+
}
42+
80% {
43+
-webkit-transform: scale(1);
44+
transform: scale(1);
45+
opacity: 1;
46+
}
47+
}

‎src/css/scrollbar.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
::-webkit-scrollbar {
2+
width: 2px !important;
3+
height: 2px !important;
4+
}
5+
6+
::-webkit-scrollbar-corner {
7+
display: none !important;
8+
}
9+
10+
::-webkit-scrollbar-button {
11+
display: none !important;
12+
}
13+
14+
@media (prefers-color-scheme: dark) {
15+
::-webkit-scrollbar-track {
16+
background-color: #000000 !important;
17+
border-radius: 2px !important;
18+
}
19+
20+
::-webkit-scrollbar-track-piece {
21+
background-color: #000000 !important;
22+
border-radius: 2px !important;
23+
}
24+
25+
::-webkit-scrollbar-thumb {
26+
background: #3d8dbc61 !important;
27+
border-radius: 2px !important;
28+
}
29+
30+
::-webkit-scrollbar-thumb:hover {
31+
background: #3d8dbc61 !important;
32+
width: 2px !important;
33+
}
34+
}
35+
36+
@media (prefers-color-scheme: light) {
37+
::-webkit-scrollbar-track {
38+
background-color: white !important;
39+
border-radius: 2px !important;
40+
}
41+
42+
::-webkit-scrollbar-track-piece {
43+
background-color: white !important;
44+
border-radius: 2px !important;
45+
}
46+
47+
::-webkit-scrollbar-thumb {
48+
background: black !important;
49+
border-radius: 2px !important;
50+
}
51+
52+
::-webkit-scrollbar-thumb:hover {
53+
background: black !important;
54+
width: 2px !important;
55+
}
56+
}

‎src/css/theme_dark.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
@media (prefers-color-scheme: dark) {
2+
html, body {
3+
font-weight: 300;
4+
margin: 0;
5+
padding: 0;
6+
background: #141414;
7+
color: #CFD3DC;
8+
}
9+
10+
.title {
11+
text-align: center;
12+
color: white;
13+
margin: 0;
14+
width: calc(100% - 20px);
15+
padding: 10px 10px 20px 10px;
16+
position: fixed;
17+
top: 0;
18+
left: 0;
19+
overflow: hidden;
20+
backdrop-filter: saturate(50%) blur(4px);
21+
background-image: radial-gradient(transparent 1px, #141414 1px);
22+
background-size: 4px 4px;
23+
border-bottom: 1px solid #333;
24+
}
25+
26+
.title > .brand {
27+
height: 80px;
28+
width: auto;
29+
filter: invert(100%) sepia(100%) saturate(10%) hue-rotate(221deg) brightness(100%) contrast(50%);
30+
}
31+
32+
.title > .tips {
33+
font-size: 18px;
34+
color: #c6c6c6;
35+
}
36+
37+
.title > .fork {
38+
width: 40px;
39+
height: 40px;
40+
background-image: url("https://skillnull.com/wp-content/themes/basepress/assets/images/icon/github.png");
41+
background-repeat: no-repeat;
42+
background-size: calc(100% - 5px) calc(100% - 5px);
43+
position: absolute;
44+
right: 0;
45+
top: 0;
46+
background-position: right 5px top 5px;
47+
cursor: pointer;
48+
filter: invert(100%) sepia(100%) saturate(10%) hue-rotate(221deg) brightness(100%) contrast(50%);
49+
}
50+
51+
.title > .fork > .text {
52+
font-size: 12px;
53+
position: absolute;
54+
left: -50%;
55+
top: 40%;
56+
transform: rotate(45deg) translateY(-50%);
57+
background: white;
58+
width: 180%;
59+
color: black;
60+
text-shadow: 0px 0px 1px #000000;
61+
}
62+
63+
.content {
64+
margin-bottom: 20px;
65+
}
66+
67+
.keyTipBox {
68+
word-break: break-all;
69+
}
70+
71+
.keyTipBox > ul > li > .comment {
72+
color: #3d8dbc;
73+
}
74+
75+
.getInfoBox {
76+
display: flex;
77+
flex: 1;
78+
justify-content: flex-start;
79+
align-items: center;
80+
margin: 25px;
81+
}
82+
83+
.getInfoBox textarea {
84+
display: flex;
85+
flex: 4;
86+
height: 35px;
87+
outline: none;
88+
border-radius: 3px;
89+
padding: 5px;
90+
box-shadow: 0 0 0 1px #3d8dbc61 inset;
91+
background: transparent;
92+
border: none;
93+
color: #3d8dbc;
94+
font-family: auto;
95+
}
96+
97+
.getInfoBox button {
98+
margin: 0 10px;
99+
width: 60px;
100+
text-align: center;
101+
justify-content: center;
102+
align-items: center;
103+
height: 45px;
104+
border-radius: 3px;
105+
outline: none;
106+
border: 1px solid #3d8dbc61;
107+
font-size: 14px;
108+
cursor: pointer;
109+
background-color: transparent;
110+
color: #3d8dbc;
111+
font-weight: 400;
112+
}
113+
114+
.getInfoBox button:hover {
115+
border-color: #3d8dbc;
116+
}
117+
118+
#info_box {
119+
word-break: break-all;
120+
}
121+
122+
textarea::placeholder {
123+
padding: 8px;
124+
font-weight: 300;
125+
color: #3d8dbc61;
126+
}
127+
}

‎src/css/theme_light.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
@media (prefers-color-scheme: light) {
2+
html, body {
3+
font-weight: 300;
4+
margin: 0;
5+
padding: 0;
6+
background: white;
7+
color: #000000;
8+
}
9+
10+
.title {
11+
text-align: center;
12+
color: white;
13+
margin: 0;
14+
width: calc(100% - 20px);
15+
padding: 10px 10px 20px 10px;
16+
position: fixed;
17+
top: 0;
18+
left: 0;
19+
overflow: hidden;
20+
backdrop-filter: saturate(50%) blur(4px);
21+
background-image: radial-gradient(transparent 1px, #ffffff 1px);
22+
background-size: 4px 4px;
23+
border-bottom: 1px solid #f7f7f7;
24+
}
25+
26+
.title > .brand {
27+
height: 80px;
28+
width: auto;
29+
}
30+
31+
.title > .tips {
32+
font-size: 18px;
33+
color: #212121;
34+
}
35+
36+
.title > .fork {
37+
width: 40px;
38+
height: 40px;
39+
background-image: url("https://skillnull.com/wp-content/themes/basepress/assets/images/icon/github.png");
40+
background-repeat: no-repeat;
41+
background-size: calc(100% - 5px) calc(100% - 5px);
42+
position: absolute;
43+
right: 0;
44+
top: 0;
45+
background-position: right 5px top 5px;
46+
cursor: pointer;
47+
}
48+
49+
.title > .fork > .text {
50+
font-size: 12px;
51+
position: absolute;
52+
left: -50%;
53+
top: 40%;
54+
transform: rotate(45deg) translateY(-50%);
55+
background: #000000bf;
56+
width: 180%;
57+
color: white;
58+
text-shadow: 0px 0px 1px #ffffff;
59+
}
60+
61+
.content {
62+
margin-bottom: 20px;
63+
}
64+
65+
.keyTipBox {
66+
word-break: break-all;
67+
}
68+
69+
.keyTipBox > ul > li > .comment {
70+
color: #3d8dbc;
71+
}
72+
73+
.getInfoBox {
74+
display: flex;
75+
flex: 1;
76+
justify-content: flex-start;
77+
align-items: center;
78+
margin: 25px;
79+
}
80+
81+
.getInfoBox textarea {
82+
display: flex;
83+
flex: 4;
84+
height: 35px;
85+
outline: none;
86+
border-radius: 3px;
87+
padding: 5px;
88+
box-shadow: 0 0 0 1px #3d8dbc61 inset;
89+
background: transparent;
90+
border: none;
91+
color: #3d8dbc;
92+
font-family: auto;
93+
}
94+
95+
.getInfoBox button {
96+
margin: 0 10px;
97+
width: 60px;
98+
text-align: center;
99+
justify-content: center;
100+
align-items: center;
101+
height: 45px;
102+
border-radius: 3px;
103+
outline: none;
104+
border: 1px solid #3d8dbc61;
105+
font-size: 14px;
106+
cursor: pointer;
107+
background-color: transparent;
108+
color: #3d8dbc;
109+
font-weight: 400;
110+
}
111+
112+
.getInfoBox button:hover {
113+
border-color: #3d8dbc;
114+
}
115+
116+
#info_box {
117+
word-break: break-all;
118+
}
119+
120+
textarea::placeholder {
121+
padding: 8px;
122+
font-weight: 300;
123+
color: #01121d;
124+
}
125+
}

0 commit comments

Comments
 (0)