479 lines
12 KiB
Stylus
479 lines
12 KiB
Stylus
body[data-type="link"]
|
|
#page
|
|
.page-title
|
|
display: none
|
|
#flink-banners
|
|
display: flex;
|
|
width: 100%;
|
|
height: 76%;
|
|
background: var(--anzhiyu-card-bg);
|
|
padding: 1.5rem;
|
|
border: var(--style-border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: var(--anzhiyu-shadow-border);
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
transition: 0.3s;
|
|
will-change: transform;
|
|
animation: slide-in 0.6s 0.2s backwards;
|
|
.flink .banners-title
|
|
top: 1.5rem;
|
|
.banner-top-box
|
|
display: flex
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.banner-button-group
|
|
position: absolute;
|
|
right: 2rem;
|
|
top: 2.5rem;
|
|
display: flex;
|
|
+maxWidth768()
|
|
display: none
|
|
.banner-button
|
|
color: var(--anzhiyu-card-bg);
|
|
&.secondary
|
|
color: var(--anzhiyu-fontcolor);
|
|
&:hover
|
|
background: var(--anzhiyu-theme);
|
|
color: var(--anzhiyu-white);
|
|
i
|
|
margin-right: 8px;
|
|
font-size: 1rem;
|
|
#skills-tags-group-all
|
|
.img-alt
|
|
display: none
|
|
.tags-group-wrapper
|
|
animation: rowup 120s linear infinite;
|
|
.tags-group-icon
|
|
border-radius: 50%;
|
|
img
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
|
|
.flink-desc
|
|
margin: .2rem 0 .5rem
|
|
|
|
#article-container
|
|
.anzhiyu-flink-list
|
|
overflow: auto
|
|
margin: -6px
|
|
text-align: center
|
|
.img-alt
|
|
display: none
|
|
&.cf-friends-lost-contact
|
|
.flink-list-item
|
|
height 60px
|
|
&:hover
|
|
.cf-friends-link img
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0.5rem;
|
|
min-width: 0px;
|
|
min-height: 0px;
|
|
.cf-friends-link img
|
|
width: 30px;
|
|
height: 30px;
|
|
min-width: 30px;
|
|
min-height: 30px;
|
|
|
|
.flink-list-item
|
|
margin: 6px 6px;
|
|
transition: 0.3s;
|
|
border-radius: 12px;
|
|
transition-timing-function: ease-in-out;
|
|
position: relative;
|
|
width: calc(20% - 12px);
|
|
border: var(--style-border);
|
|
box-shadow: var(--anzhiyu-shadow-border);
|
|
background: var(--anzhiyu-card-bg);
|
|
display: flex;
|
|
float: left;
|
|
overflow: hidden;
|
|
height: 90px;
|
|
line-height: 17px;
|
|
transform: translateZ(0px);
|
|
.cf-friends-link
|
|
display: flex;
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: center;
|
|
color: var(--anzhiyu-fontcolor);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
padding: 0 4px;
|
|
border-radius: 4px 4px 0 0;
|
|
img
|
|
border-radius: 32px;
|
|
margin: 15px 20px 15px 15px;
|
|
transition: 0.3s;
|
|
background: var(--anzhiyu-background);
|
|
min-width: 60px;
|
|
min-height: 60px;
|
|
width: 60px;
|
|
height: 60px;
|
|
float: left;
|
|
object-fit: cover;
|
|
|
|
|
|
+maxWidth1200()
|
|
width: calc(50% - 15px) !important
|
|
|
|
+maxWidth600()
|
|
width: calc(100% - 15px) !important
|
|
|
|
|
|
&:hover:before,
|
|
&:focus:before,
|
|
&:active:before
|
|
transform: scale(1)
|
|
|
|
.flink-item-info
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: calc(100% - 90px);
|
|
height: fit-content;
|
|
|
|
.flink-item-name
|
|
@extend .limit-one-line
|
|
text-align: left;
|
|
line-height: 20px;
|
|
color: var(--anzhiyu-fontcolor);
|
|
display: block;
|
|
padding: 0px 10px 0px 0px;
|
|
font-weight: 700;
|
|
font-size: 19px;
|
|
max-width: calc(100% - 12px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
.flink-item-desc
|
|
@extend .limit-one-line
|
|
white-space: normal;
|
|
padding: 5px 10px 16px 0;
|
|
color: var(--anzhiyu-fontcolor);
|
|
text-align: left;
|
|
font-size: 0.93em;
|
|
height: 40px;
|
|
text-overflow: ellipsis;
|
|
opacity: 0.7;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
&:hover
|
|
transform: scale(1);
|
|
background: var(--anzhiyu-theme);
|
|
border: var(--style-border-hover);
|
|
box-shadow: var(--anzhiyu-shadow-main);
|
|
.site-card-tag
|
|
left: -70px;
|
|
a
|
|
img
|
|
transition: 0.6s;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0.5rem;
|
|
min-width: 0px;
|
|
min-height: 0px;
|
|
.flink-item-info
|
|
min-width: calc(100% - 20px);
|
|
.flink-item-name
|
|
color: var(--anzhiyu-white);
|
|
.flink-item-desc
|
|
overflow: hidden;
|
|
width: 100%;
|
|
color: var(--anzhiyu-white);
|
|
|
|
.flink-name
|
|
margin-bottom: 5px
|
|
font-weight: bold
|
|
font-size: 1.5em
|
|
|
|
#article-container img
|
|
margin-bottom: 0.5rem;
|
|
object-fit: cover;
|
|
max-height: 900px;
|
|
.flexcard-flink-list
|
|
overflow hidden
|
|
.flink-list-card
|
|
.wrapper img
|
|
transition: transform .5s ease-out !important;
|
|
&:hover
|
|
border-color: var(--anzhiyu-main)!important;
|
|
background-color: var(--anzhiyu-main)!important;
|
|
box-shadow: var(--anzhiyu-shadow-theme)!important;
|
|
|
|
& > a
|
|
width: calc(100% / 5 - 0.5rem);
|
|
height 150px
|
|
position relative
|
|
display block
|
|
margin: 0.5rem 0.25rem;
|
|
float left
|
|
overflow hidden
|
|
padding: 0;
|
|
border-radius: 8px;
|
|
transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s
|
|
box-shadow none
|
|
border: var(--style-border)!important;
|
|
&:hover
|
|
.info
|
|
transform translateY(-100%)
|
|
.wrapper
|
|
img
|
|
transform scale(1.2)
|
|
&::before
|
|
position: fixed
|
|
width:inherit
|
|
margin:auto
|
|
left:0
|
|
right:0
|
|
top:10%
|
|
border-radius: 10px
|
|
text-align: center
|
|
z-index: 100
|
|
content: attr(data-title)
|
|
font-size: 20px
|
|
color: #fff
|
|
padding: 10px
|
|
background-color: rgba($theme-color,0.8)
|
|
|
|
.cover
|
|
width 100%
|
|
transition transform .5s ease-out
|
|
.wrapper
|
|
position relative
|
|
.fadeIn
|
|
animation coverIn .8s ease-out forwards
|
|
img
|
|
height 150px
|
|
pointer-events none
|
|
.info
|
|
display flex
|
|
flex-direction column
|
|
justify-content center
|
|
align-items center
|
|
width 100%
|
|
height 100%
|
|
overflow hidden
|
|
border-radius 3px
|
|
background-color hsla(0, 0%, 100%, .7)
|
|
transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s
|
|
img
|
|
position relative
|
|
top 45px
|
|
width 80px
|
|
height 80px
|
|
border-radius 50% !important
|
|
box-shadow 0 0 10px rgba(0, 0, 0, .3)
|
|
z-index 1
|
|
text-align center
|
|
pointer-events none
|
|
span
|
|
padding 20px 10% 60px 10%
|
|
font-size 16px
|
|
width 100%
|
|
text-align center
|
|
box-shadow 0 0 10px rgba(0, 0, 0, .3)
|
|
background-color hsla(0, 0%, 100%, .7)
|
|
color var(--font-color)
|
|
white-space nowrap
|
|
overflow hidden
|
|
text-overflow ellipsis
|
|
.flexcard-flink-list>a .info,
|
|
.flexcard-flink-list>a .wrapper .cover
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
|
|
@media screen and (max-width:1024px)
|
|
.flexcard-flink-list
|
|
& > a
|
|
width calc(33.33333% - 15px)
|
|
|
|
@media screen and (max-width:600px)
|
|
.flexcard-flink-list
|
|
& > a
|
|
width calc(50% - 15px)
|
|
|
|
[data-theme=dark]
|
|
.flexcard-flink-list a .info,
|
|
.flexcard-flink-list a .info span
|
|
background-color rgba(0, 0, 0, .6)
|
|
.flexcard-flink-list
|
|
& > a
|
|
&:hover
|
|
&:before
|
|
background-color: rgba(#121212,0.8);
|
|
.justified-gallery > div > img,
|
|
.justified-gallery > figure > img,
|
|
.justified-gallery > a > a > img,
|
|
.justified-gallery > div > a > img,
|
|
.justified-gallery > figure > a > img,
|
|
.justified-gallery > a > svg,
|
|
.justified-gallery > div > svg,
|
|
.justified-gallery > figure > svg,
|
|
.justified-gallery > a > a > svg,
|
|
.justified-gallery > div > a > svg,
|
|
.justified-gallery > figure > a > svg
|
|
position static!important
|
|
|
|
.site-card-tag
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 4px 8px;
|
|
background-color: var(--anzhiyu-theme);
|
|
box-shadow: var(--anzhiyu-shadow-blue);
|
|
color: var(--anzhiyu-white);
|
|
z-index: 1;
|
|
border-radius: 11px 0 12px 0;
|
|
transition: 0.3s;
|
|
font-size: 12px;
|
|
&.speed
|
|
background: var(--anzhiyu-green);
|
|
box-shadow: var(--anzhiyu-shadow-green);
|
|
&.vip
|
|
background: linear-gradient(38deg, rgba(229, 176, 133, 1) 0%, rgba(212, 143, 22, 1) 100%);
|
|
overflow: hidden;
|
|
box-shadow: var(--anzhiyu-shadow-yellow);
|
|
i.light
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100px;
|
|
height: 50px;
|
|
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))
|
|
animation: light_tag 4s both infinite;
|
|
will-change: transform;
|
|
|
|
@keyframes light_tag
|
|
0%
|
|
transform: skewx(0) translateX(-150px);
|
|
99%
|
|
transform: skewx(-25deg) translateX(50px);
|
|
#article-container
|
|
.telescopic-site-card-group
|
|
padding: 20px 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
-webkit-box-pack: start;
|
|
justify-content: flex-start;
|
|
margin: -8px;
|
|
-webkit-box-align: stretch;
|
|
align-items: stretch;
|
|
.site-card
|
|
border: var(--style-border);
|
|
border-radius: 12px;
|
|
transition: 0.3s;
|
|
transition-timing-function: ease-in-out;
|
|
overflow: hidden;
|
|
height: 200px;
|
|
position: relative;
|
|
width: calc(100% / 7 - 16px);
|
|
background: var(--anzhiyu-card-bg);
|
|
box-shadow: var(--anzhiyu-shadow-border);
|
|
.img-alt
|
|
display: none
|
|
+maxWidth1200()
|
|
width: calc(20% - 16px) !important;
|
|
+maxWidth900()
|
|
width: calc(25% - 16px) !important;
|
|
+maxWidth768()
|
|
width: calc(33.3333% - 16px) !important;
|
|
+maxWidth600()
|
|
width: calc(50% - 16px) !important;
|
|
&:hover
|
|
border: var(--style-border-hover);
|
|
box-shadow: var(--anzhiyu-shadow-main);
|
|
.info
|
|
background: var(--anzhiyu-theme);
|
|
height: 120px;
|
|
.site-card-text
|
|
.title
|
|
color: var(--anzhiyu-white);
|
|
.desc
|
|
transition: 0.3s;
|
|
color: var(--anzhiyu-white);
|
|
width: 100%;
|
|
+minWidth768()
|
|
.desc
|
|
-webkit-line-clamp: 4;
|
|
|
|
.site-card-tag
|
|
left: -50px;
|
|
.img
|
|
height: 80px;
|
|
img
|
|
transform: scale(1.1);
|
|
filter: brightness(0.3);
|
|
.info
|
|
display: flex;
|
|
border: none;
|
|
padding: 0.7rem;
|
|
width: 100%;
|
|
height: 90px;
|
|
margin: 0;
|
|
border-radius: 0 0 12px 12px;
|
|
.site-card-text
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
.title
|
|
color: var(--anzhiyu-fontcolor);
|
|
text-align: left;
|
|
font-weight: 600;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 1;
|
|
transition: all 0.3s ease 0s;
|
|
.desc
|
|
font-size: 0.9rem;
|
|
color: var(--anzhiyu-fontcolor);
|
|
opacity: 0.7;
|
|
transition: 0.3s;
|
|
text-align: left;
|
|
overflow-wrap: break-word;
|
|
line-height: 1.2;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
.img-alt
|
|
display: none;
|
|
img
|
|
border-radius: 32px;
|
|
transition: 0.3s !important;
|
|
margin: 2px 8px 0 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
background: var(--anzhiyu-secondbg);
|
|
.img
|
|
-webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0));
|
|
border-radius: 0;
|
|
height: 120px;
|
|
width: 100%;
|
|
display: flex;
|
|
border: none;
|
|
padding: 0 !important;
|
|
transition: all 0.3s ease 0s;
|
|
img
|
|
border-radius: 0;
|
|
transform: scale(1.03);
|
|
transition: 0.3s;
|
|
margin: 0;
|
|
max-width: 100%;
|
|
|