mirror/typecho-joe
2
0
Fork 0
mirror of https://dl.bcrjl.com/ghg/HaoOuBa/Joe.git synced 2026-02-17 13:10:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
杜恒
2021-01-19 18:45:14 +08:00
parent ed3b56c2be
commit 0e1e747838
5 changed files with 123 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/joe.global.css
View File

@@ -1 +1 @@
.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;cursor:pointer;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(../img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)}

85
assets/css/joe.global.scss
View File

@@ -28,5 +28,90 @@
transform: translateY(-50%);
}
}
&-nav {
display: flex;
align-items: center;
.item {
position: relative;
height: 60px;
line-height: 60px;
font-size: 15px;
padding: 0 8px;
margin-right: 15px;
transition: color 0.35s;
white-space: nowrap;
cursor: pointer;
color: var(--main);
&:last-child {
margin-right: 0;
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
transition: opacity 0.5s, transform 0.5s;
border-radius: 6px 6px 0 0;
opacity: 0;
transform: scaleX(0.25);
background: var(--theme);
}
&.active,
&:hover {
color: var(--theme);
&::after {
opacity: 1;
transform: scaleX(1);
}
}
}
}
&-search {
position: relative;
margin-left: auto;
display: flex;
align-items: center;
.input {
background: var(--classC);
width: 170px;
height: 34px;
border: 1px solid transparent;
padding: 0 18px;
color: var(--routine);
transition: background 0.35s, border-color 0.35s, padding-right 0.35s;
border-radius: 17px 0 0 17px;
&:focus {
background: var(--background);
border-color: var(--theme);
padding-right: 28px;
~ .icon {
transform: translate3d(0, -50%, 0) rotateY(180deg);
}
}
}
.submit {
position: relative;
z-index: 1;
height: 34px;
border: none;
background: var(--theme);
color: #fff;
border-radius: 0 17px 17px 0;
padding: 0 10px;
}
.icon {
position: absolute;
top: 50%;
left: 142px;
width: 28px;
height: 38px;
background: url(../img/search.png);
background-size: 100% 100%;
transition: transform 0.35s;
transform: translate3d(100%, -50%, 0) rotateY(180deg);
}
}
}
}