-
Notifications
You must be signed in to change notification settings - Fork 100
/
style.css
122 lines (110 loc) · 5.92 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/*
作者:D.Young
主页：https://blog.5iux.cn/
github：https://github.com/5iux/5iux.github.io
日期：2020-09-24
版权所有，请勿删除
*/
body{ font-size: 14px; background: #f4f8fb; overflow-x:hidden; }
a{text-decoration: none;}
a:hover{text-decoration: none;}
svg.icon { width: 14px; height: 14px; margin: 0 5px 0 8px; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}
/*menu*/
.navbar-light .navbar-nav .nav-link{ color: #fff; }
.navbar-light .navbar-nav .active .nav-link{ color: #fff; }
.navbar-light .navbar-nav .nav-link:hover{ color: #fff; }
/* --- search --- */
#search{width:100%;margin:0; padding: 0 0 10px; position: relative; z-index: 2000; border-radius: 5px;}
#search form{position:relative}
#search-text{width:100%;height:50px; line-height: 50px; text-indent: 10px; font-size:16px;border-radius:5px;background-color:#fff; border:none; box-shadow: 0 0.5rem 0.625rem #d4d4d44d;transition: 0.3s all linear;}
#search-text:focus{background: #fff; box-shadow: 0 0px 24px 0 rgba(50, 50, 50, 0.08); border-color: #fff; }
#search button{position:absolute;top:0;right:0;background:none;border:0; border-radius:20px;width:60px;height:36px;margin:7px 0 0;line-height:36px;border-radius:3px; outline: none;}
#search button:hover{cursor:pointer}
#search button i{color:#ddd;font-size:18px}
.search-group{display:none;padding-left:75px}
.s-current .search-type{padding-left:0;display:block}
.s-current{display:block}
#search-list{position:relative}
.s-type{position:absolute;top:0;left:0;z-index:13;width:75px}
.s-type:hover{height:auto}
.s-type>span{display:block;height:31px;width:75px}
.s-type-list{display:none;position:absolute;top:31px;padding:9pt 0;width:70px;background:#fff;border-radius:5px;box-shadow:0 9px 20px rgba(0,0,0,.16)}
.s-type-list:before{position:absolute;top:-1pc;left:20px;content:'';display:block;width:0;height:0;border:10px solid transparent;border-bottom-color:#fff}
.s-type-list label{display:block;font-size:15px;text-align:center;font-weight:normal;margin-bottom:0;padding:2px 0;cursor:pointer;transition:.3s}
.s-type-list label:hover{background:rgba(136,136,136,.1)}
.s-type-list .tile-lg{color:#fff;width:3pc;height:3pc;font-size:1.25rem;line-height:3rem;border-radius:.3rem;display:block;margin:auto}
.s-type:hover .s-type-list{display:block}
.type-text{position:absolute;left:0;width:75px;padding-left:9pt;font-size:1pc;line-height:31px}
/*.type-text:after{content:"\f105";font-family:FontAwesome;margin:0 0 0 15px}*/
.search-type{white-space:nowrap;margin:0}.search-type label{margin:0}
.search-type li{display:inline-block; background: rgb(255 255 255 / 0.4); border-radius: 3px 3px 0 0;}
.search-type li label{display:inline-block;padding:0 11px;font-size:14px;line-height:31px;border-radius:3px 3px 0 0;cursor:pointer}
.search-type input:checked+label,.search-type input:hover+label{background-color:#fff;}
#search-text::-webkit-input-placeholder {color: #bbb;}
#word{ position: absolute; list-style: none; top:55px; left: 0px; width: 100%; background: rgba(259,259,259,0.9); border-radius: 5px; z-index:20000; padding: 15px 10px; box-shadow: 0 0 10px #aaa; }
#word li{ height:35px; padding: 0 5px; text-indent: 30px; background: url(sou.svg) no-repeat 5px; background-size: 20px; line-height: 35px; cursor: pointer; font-size: 16px; border-radius: 5px;}
#word li:hover{ background-color: #ddd;}
.set-check{margin-top:3px;font-size:9pt}.set-check label{margin-left:3px}
.set-check input,.set-check label{opacity:0;transition:all .3s ease}
.search-type li{list-style:none;display:inline-block}
.mylist{list-style: none; padding:10px 20px; position: relative; z-index: 1000; margin: 20px 0; border-radius: 15px; background: #fff; box-shadow: 0 0.5rem 0.625rem #d4d4d44d}
.mylist li.col-3{ width: 100px; transition: 0.3s all linear; font-size: 14px; overflow: hidden; padding:10px 0; border-radius: 10px;}
.mylist li.col-3 svg{ display: block; width: 45px; height: 45px; padding: 8px; background: #fff;border: 1px solid #eee; border-radius:10px; margin: 0 auto; }
.mylist li.col-3:hover{ background: #eee; }
.mylist li.col-3 span{ width: 100%; display: block; height: 26px; line-height: 26px; text-align:center; font-size: 13px; }
.mylist li a { color: #555; display: block;}
.mylist li.title{width: 100%; min-width: auto; margin: 0; height: 35px; font-size: 16px; line-height: 33px; padding: 0 20px 0 10px; border-bottom: 1px solid #eee; margin-bottom: 10px;}
.banner-video {
position: absolute;
width: 100%;
overflow: hidden;
left: 0; top:0;
max-height: 750px;
}
.banner-video video{width:2048px; float:left; }
.banner-video img{width:1920px; float:left; }
.bottom-cover{ width: 100%; height: 50%; position: absolute; bottom:0px; z-index: 10; }
@media screen and (min-width:1200px){
.mylist li.col-3{ min-width: 132px;}
}
@media screen and (min-width:992px) and (max-width:1200px){
.mylist li.col-3{ min-width: 110px;}
}
@media screen and (max-width: 992px){
#he-plugin-simple{ display: none !important; }
.banner-video video{width:1200px; }
.banner-video img{width:1200px; }
div#navbarsExample05 { background: rgba(0, 0, 0, 0.8); padding: 10px 30px; border-radius: 20px;}
}
@media screen and (max-width:767px){
.banner-video video{width:960px; }
.banner-video img{width:960px; }
.s-type-list label{padding:5px 0}
.search-type{overflow:hidden}
.search-list{height:30px;overflow-y:hidden;overflow-x:scroll;white-space:nowrap}
.mylist{ border-radius: 8px;}
.mylist li.col-3{ margin: 5px 0 5px;}
.mylist li.col-3 svg{ width: 30px; height: 30px; padding: 5px;border-radius: 5px;}
.mylist li.col-3 span{ font-size: 12px; }
}
@media screen and (max-width:560px){
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background: #eee;
border-radius: 0px;
}
::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #ccc;
}
::-webkit-scrollbar-corner {
background: #ddd;
}