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-25 18:36:43 +08:00
parent 084c7faf84
commit f06c934586
20 changed files with 850 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/joe.archive.css Normal file
View File

@@ -0,0 +1 @@
.joe_archive{border-radius:8px;padding:0 15px;background:var(--background);box-shadow:var(--box-shadow)}.joe_archive__title{display:flex;align-items:center;height:45px;line-height:45px;color:var(--main);border-bottom:1px solid var(--classC)}.joe_archive__title-icon{width:20px;height:20px;min-width:20px;min-height:20px;margin-right:5px}.joe_archive__title-title{display:flex;align-items:center}.joe_archive__title-title .muted{color:var(--theme);margin:0 5px}.joe_archive__empty{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:50px 0;color:var(--routine)}.joe_archive__empty-icon{margin-bottom:30px;fill:var(--routine)}

41
assets/css/joe.archive.scss Normal file
View File

@@ -0,0 +1,41 @@
.joe_archive {
border-radius: 8px;
padding: 0 15px;
background: var(--background);
box-shadow: var(--box-shadow);
&__title {
display: flex;
align-items: center;
height: 45px;
line-height: 45px;
color: var(--main);
border-bottom: 1px solid var(--classC);
&-icon {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
margin-right: 5px;
}
&-title {
display: flex;
align-items: center;
.muted {
color: var(--theme);
margin: 0 5px;
}
}
}
&__empty {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 50px 0;
color: var(--routine);
&-icon {
margin-bottom: 30px;
fill: var(--routine);
}
}
}

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

File diff suppressed because one or more lines are too long

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

@@ -3,6 +3,12 @@ html[data-night='night'] {
background: #202122;
z-index: -500;
}
.joe_header__above-logo img {
display: none;
}
.joe_header__above-logo svg {
display: block;
}
}
.joe_dropdown {
@@ -72,6 +78,9 @@ html[data-night='night'] {
max-height: 50px;
object-fit: cover;
}
svg {
display: none;
}
&::after {
content: '';
position: absolute;
@@ -200,9 +209,78 @@ html[data-night='night'] {
transition: transform 0.35s;
transform: translate3d(100%, -50%, 0) rotateY(180deg);
}
.result {
position: absolute;
top: 60px;
left: 0;
right: 0;
background: var(--background);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
border-radius: 4px;
visibility: hidden;
opacity: 0;
transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
transform: translate3d(0, 15px, 0);
&.active {
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
.item {
height: 40px;
line-height: 40px;
border-bottom: 1px solid var(--classD);
display: flex;
align-items: center;
overflow: hidden;
padding: 0 8px;
transition: background 0.35s;
&:last-child {
border-bottom: none;
}
&:nth-child(1) .sort {
background: #fe2d46;
}
&:nth-child(2) .sort {
background: #f60;
}
&:nth-child(3) .sort {
background: #faa90e;
}
&:hover {
background: var(--classD);
}
.sort {
color: #fff;
background: #7f7f8c;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 50%;
text-align: center;
margin-right: 8px;
font-weight: 500;
}
.text {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--routine);
font-size: 12px;
}
.views {
color: var(--seat);
font-size: 12px;
margin-left: 3px;
}
}
}
}
}
&__below {
position: relative;
border-top: 1px solid var(--classC);
height: 45px;
&-class {
@@ -247,6 +325,15 @@ html[data-night='night'] {
}
}
}
&-progress {
position: absolute;
left: 0;
bottom: -3px;
height: 3px;
border-radius: 1.5px;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
transition: width 0.35s;
}
}
}
@@ -1425,6 +1512,50 @@ html[data-night='night'] {
}
}
}
&__friends{
display: flex;
flex-wrap: wrap;
margin: 0 -7.5px;
&-item {
width: 25%;
padding: 7.5px;
.contain {
display: block;
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 15px;
color: #fff;
word-break: break-all;
.title {
position: relative;
&::after{
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
.avatar {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
}
}
}
}
}
}
.joe_footer {
@@ -1445,6 +1576,48 @@ html[data-night='night'] {
}
}
.joe_pagination {
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 15px;
li {
margin-left: 5px;
&.active a {
background: var(--theme);
color: #fff;
font-weight: 500;
}
a {
display: flex;
align-items: center;
height: 32px;
color: var(--main);
padding: 0 15px;
background: var(--background);
border-radius: 2px;
transition: background 0.35s, color 0.35s;
user-select: none;
&:hover {
background: var(--theme);
color: #fff;
.icon {
fill: #fff;
}
}
.icon {
width: 12px;
height: 12px;
fill: var(--routine);
transition: fill 0.35s;
&-next {
transform: rotate(180deg);
}
}
}
}
}
.joe_action {
position: fixed;
bottom: 90px;
@@ -1491,12 +1664,91 @@ html[data-night='night'] {
}
}
.profile-color-modes-illu-frame {
opacity: 0;
}
.profile-color-modes-illu-red {
stroke: #da3633;
}
.profile-color-modes-illu-orange {
stroke: #f0883e;
}
.profile-color-modes-illu-purple {
stroke: #8957e5;
}
.profile-color-modes-illu-green {
stroke: #3fb950;
}
.profile-color-modes-illu-blue {
stroke: #388bfd;
}
.profile-color-modes-illu-group {
animation: profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;
}
.profile-color-modes-illu-frame {
animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;
}
.profile-color-modes-illu-frame:first-child {
opacity: 1;
animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
}
.profile-color-modes-illu-frame:nth-child(8) {
animation: profile-color-modes-illu-anim-frame-show 0s forwards;
}
.profile-color-modes-illu-red {
animation-delay: 0.4s;
animation-duration: 0.1s;
}
.profile-color-modes-illu-orange {
animation-delay: 0.5s;
animation-duration: 0.1s;
}
.profile-color-modes-illu-purple {
animation-delay: 0.6s;
animation-duration: 0.1s;
}
.profile-color-modes-illu-blue {
animation-delay: 0.7s;
animation-duration: 0.1s;
}
.profile-color-modes-illu-green {
animation-delay: 0.8s;
animation-duration: 0.2s;
animation-timing-function: cubic-bezier(0.47, 2.92, 0.84, -1.5);
}
.profile-color-modes-illu-frame:first-child {
animation-delay: 1.8s;
}
.profile-color-modes-illu-frame:nth-child(2) {
animation-delay: 1.8s, 2.58s;
}
.profile-color-modes-illu-frame:nth-child(3) {
animation-delay: 2.58s, 2.66s;
}
.profile-color-modes-illu-frame:nth-child(4) {
animation-delay: 2.66s, 2.78s;
}
.profile-color-modes-illu-frame:nth-child(5) {
animation-delay: 2.78s, 2.84s;
}
.profile-color-modes-illu-frame:nth-child(6) {
animation-delay: 2.84s, 3.44s;
}
.profile-color-modes-illu-frame:nth-child(7) {
animation-delay: 3.44s, 3.56s;
}
.profile-color-modes-illu-frame:nth-child(8) {
animation-delay: 3.56s;
}
.profile-color-modes-illu-frame:nth-child(9),
.profile-color-modes-illu-frame:nth-child(10) {
animation: none;
}
@keyframes box_shadow {
0% {
box-shadow: 0 0 0 0 #f56c6c;
}
}
@keyframes progress {
0% {
background-position: 0 0;
@@ -1505,7 +1757,6 @@ html[data-night='night'] {
background-position: 30px 0;
}
}
@keyframes list_thumbnail_loading {
0% {
transform: scale(0.85);
@@ -1530,3 +1781,26 @@ html[data-night='night'] {
width: 80%;
}
}
@keyframes profile-color-modes-illu-anim {
0% {
stroke: #666;
}
}
@keyframes profile-color-modes-illu-anim-frame-show {
0% {
opacity: 0;
animation-timing-function: ease-out;
}
to {
opacity: 1;
}
}
@keyframes profile-color-modes-illu-anim-frame-hide {
0% {
opacity: 1;
animation-timing-function: ease-in;
}
to {
opacity: 0;
}
}

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

@@ -1 +1 @@
*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{border-radius:4px;background:var(--seat)}::-webkit-scrollbar-track{background:transparent}body{font-size:14px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none}input[type='text']{-webkit-appearance:none;border-radius:0;font-size:13px;font-weight:500}textarea{resize:none;-webkit-appearance:none}li{list-style:none}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:500}img{border:0;vertical-align:middle}img[src=''],img:not([src]){border:0;opacity:0}svg,canvas{vertical-align:middle}button{cursor:pointer;-webkit-appearance:none;font-size:13px}table{border-collapse:collapse;border-spacing:0}.joe_main{min-width:0;flex:1;padding:15px 0}.joe_container{display:flex;width:100%;margin:0 auto;padding:0 15px}@media (min-width: 576px){.joe_container{max-width:540px}}@media (min-width: 768px){.joe_container{max-width:720px}}@media (min-width: 992px){.joe_container{max-width:960px}}@media (min-width: 1200px){.joe_container{max-width:1140px}}@media (min-width: 1400px){.joe_container{max-width:1320px}}html{--background: #fff;--theme: #f24e4e;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22)}html[data-night='night']{--background: #303133;--box-shadow: none}
*{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-radius:4px;background:var(--seat)}::-webkit-scrollbar-track{background:transparent}body{font-size:14px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none}input[type='text']{-webkit-appearance:none;border-radius:0;font-size:13px;font-weight:500}textarea{resize:none;-webkit-appearance:none}li{list-style:none}a{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:500}img{border:0;vertical-align:middle}img[src=''],img:not([src]){border:0;opacity:0}svg,canvas{vertical-align:middle}button{cursor:pointer;-webkit-appearance:none;font-size:13px}table{border-collapse:collapse;border-spacing:0}.joe_main{min-width:0;flex:1;padding:15px 0}.joe_container{display:flex;width:100%;margin:0 auto;padding:0 15px}@media (min-width: 576px){.joe_container{max-width:540px}}@media (min-width: 768px){.joe_container{max-width:720px}}@media (min-width: 992px){.joe_container{max-width:960px}}@media (min-width: 1200px){.joe_container{max-width:1140px}}@media (min-width: 1400px){.joe_container{max-width:1320px}}html{--background: #fff;--theme: #f24e4e;--main: #303133;--routine: #606266;--minor: #909399;--seat: #c0c4cc;--classA: #dcdfe6;--classB: #e4e7ed;--classC: #ebeef5;--classD: #f2f6fc;--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);--box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22)}html[data-night='night']{--background: #303133;--box-shadow: none}

1
assets/css/joe.normalize.scss
View File

@@ -8,6 +8,7 @@
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {