Jony/assets/css/joe.live.scss

281 lines
11 KiB
SCSS
Raw Normal View History

2021-01-29 10:54:33 +00:00
.joe_live {
2021-02-03 06:24:58 +00:00
&__contain {
2021-01-29 10:54:33 +00:00
position: relative;
background: var(--background);
border-radius: var(--radius-wrap);
box-shadow: var(--box-shadow);
padding: 60px 15px 15px;
&-title {
2021-02-02 10:25:32 +00:00
display: flex;
align-items: center;
2021-01-29 10:54:33 +00:00
position: absolute;
top: 15px;
left: -10px;
background: var(--theme);
color: #fff;
font-weight: 500;
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
height: 30px;
line-height: 30px;
2021-02-03 06:24:58 +00:00
padding: 0 12px;
2021-01-29 10:54:33 +00:00
border-radius: 2px 2px 2px 0;
user-select: none;
2021-02-03 06:24:58 +00:00
&::after {
2021-01-29 10:54:33 +00:00
content: '';
position: absolute;
2021-02-02 10:25:32 +00:00
bottom: -10px;
left: -10px;
2021-01-29 10:54:33 +00:00
border-style: solid;
border-width: 10px;
border-color: var(--theme) transparent transparent;
2021-02-02 10:25:32 +00:00
transform: rotate(90deg);
2021-01-29 10:54:33 +00:00
}
}
2021-02-03 06:24:58 +00:00
}
&__type {
margin-bottom: 15px;
&-title {
padding-right: 8px;
.icon {
width: 15px;
height: 15px;
fill: #fff;
margin-left: 5px;
cursor: pointer;
}
}
2021-01-29 10:54:33 +00:00
&-list {
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
border-top: 1px solid var(--classC);
padding-top: 15px;
.item {
user-select: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background: var(--classD);
height: 28px;
line-height: 28px;
border-radius: 14px;
cursor: pointer;
color: var(--routine);
font-size: 12px;
padding: 0 15px;
text-align: center;
transition: color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;
&.active {
transform: translateY(-2px);
color: #fff;
background: var(--theme);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
}
.error {
text-align: center;
color: var(--routine);
user-select: none;
}
}
}
2021-02-02 10:25:32 +00:00
&__list {
display: grid;
2021-02-07 03:32:41 +00:00
grid-template-columns: repeat(3, 1fr);
2021-02-02 10:25:32 +00:00
gap: 15px;
&-item {
display: block;
width: 100%;
overflow: hidden;
2021-02-05 10:27:44 +00:00
border-radius: var(--radius-wrap);
2021-02-02 10:25:32 +00:00
.thumb {
position: relative;
width: 100%;
height: 140px;
.screenshot {
width: 100%;
height: 100%;
object-fit: cover;
}
.recommendTagName {
position: absolute;
top: 8px;
2021-02-03 03:15:55 +00:00
right: 8px;
2021-02-02 10:25:32 +00:00
background: #f90;
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 2px;
font-style: normal;
z-index: 4;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
transition: background 0.3s ease-out;
z-index: 2;
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
opacity: 0;
background: url(../img/play.png) no-repeat;
transform: scale(2);
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
z-index: 3;
}
&:hover {
&::before {
background: rgba(0, 0, 0, 0.5);
}
&::after {
opacity: 0.8;
transform: scale(1);
}
}
}
.description {
2021-02-03 03:15:55 +00:00
position: relative;
2021-02-02 10:25:32 +00:00
background: var(--background);
2021-02-03 03:15:55 +00:00
padding: 15px 10px 10px;
.avatar {
position: absolute;
top: -20px;
left: 0;
z-index: 9;
.icon {
height: 35px;
fill: var(--background);
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 25px;
height: 25px;
object-fit: cover;
border-radius: 50%;
}
}
.nick {
position: relative;
color: var(--minor);
font-size: 12px;
padding-left: 13px;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&::before {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
content: '';
border: 2px solid #0056ff;
height: 4px;
width: 4px;
border-radius: 50%;
}
}
2021-02-02 10:25:32 +00:00
.introduction {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--main);
2021-02-03 03:15:55 +00:00
border-bottom: 1px solid var(--classD);
padding-bottom: 8px;
margin-bottom: 8px;
2021-02-02 10:25:32 +00:00
}
.meta {
display: flex;
align-items: center;
2021-02-03 03:15:55 +00:00
font-size: 12px;
color: var(--minor);
.icon {
width: 13px;
height: 13px;
margin-right: 3px;
2021-02-02 10:25:32 +00:00
}
2021-02-03 03:15:55 +00:00
.name {
color: #f90;
margin-left: auto;
2021-02-02 10:25:32 +00:00
}
}
}
}
&:empty {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 180px;
&::after {
content: '';
display: block;
width: 70px;
height: 70px;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
2021-02-03 06:24:58 +00:00
&__pagination {
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 15px;
&-item {
user-select: none;
cursor: pointer;
margin-left: 5px;
height: 32px;
line-height: 32px;
padding: 0 15px;
background: var(--background);
color: var(--main);
border-radius: 2px;
transition: background 0.35s, color 0.35s;
svg {
fill: var(--routine);
transition: fill 0.35s;
}
.next {
transform: rotate(180deg);
}
&.active,
&:hover {
color: #fff;
background: var(--theme);
svg {
fill: #fff;
}
}
}
}
&__play {
&-player {
width: 100%;
height: 580px;
background: #000;
}
}
2021-01-29 10:54:33 +00:00
}