1
This commit is contained in:
375
src/index.css
375
src/index.css
@@ -790,6 +790,22 @@ body {
|
||||
filter: brightness(0.98);
|
||||
}
|
||||
|
||||
.platform-public-work-card {
|
||||
background: var(--platform-subpanel-fill);
|
||||
}
|
||||
|
||||
.platform-public-work-card__cover {
|
||||
background: color-mix(in srgb, var(--platform-panel-fill-soft) 86%, #000 14%);
|
||||
}
|
||||
|
||||
.platform-public-work-card__body {
|
||||
background: color-mix(in srgb, var(--platform-subpanel-fill) 92%, #000 8%);
|
||||
}
|
||||
|
||||
.platform-public-work-card__likes {
|
||||
min-width: 3.2rem;
|
||||
}
|
||||
|
||||
.platform-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1243,6 +1259,66 @@ body {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.platform-mobile-home-stage {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.platform-mobile-home-stage .platform-desktop-search {
|
||||
border-radius: 9999px;
|
||||
padding: 0.64rem 0.9rem;
|
||||
}
|
||||
|
||||
.platform-mobile-home-channelbar {
|
||||
margin-right: -0.25rem;
|
||||
padding-left: 0.08rem;
|
||||
}
|
||||
|
||||
.platform-mobile-home-channel {
|
||||
position: relative;
|
||||
min-height: 2rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--platform-text-soft);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.platform-mobile-home-channel--active {
|
||||
color: var(--platform-text-strong);
|
||||
}
|
||||
|
||||
.platform-mobile-home-channel--active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0.1rem;
|
||||
height: 0.16rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--platform-warm-text);
|
||||
}
|
||||
|
||||
.platform-mobile-home-feed {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.platform-public-work-card {
|
||||
width: 100%;
|
||||
border-radius: 0.9rem;
|
||||
background: color-mix(in srgb, var(--platform-subpanel-fill) 82%, #050506 18%);
|
||||
}
|
||||
|
||||
.platform-public-work-card__cover {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.platform-public-work-card__body {
|
||||
min-height: 5.4rem;
|
||||
padding: 0.68rem 0.76rem 0.72rem;
|
||||
background: color-mix(in srgb, var(--platform-subpanel-fill) 78%, #050506 22%);
|
||||
}
|
||||
|
||||
.platform-mobile-hero-secondary {
|
||||
display: none;
|
||||
}
|
||||
@@ -2959,6 +3035,305 @@ button {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.platform-work-detail {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #151515;
|
||||
color: #f7f7f7;
|
||||
}
|
||||
|
||||
.platform-work-detail__topbar {
|
||||
display: grid;
|
||||
grid-template-columns: 3rem minmax(0, 1fr) 3rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: calc(env(safe-area-inset-top, 0px) + 0.7rem) 1rem 0.75rem;
|
||||
background: #020202;
|
||||
}
|
||||
|
||||
.platform-work-detail__title {
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.platform-work-detail__icon-button {
|
||||
display: inline-flex;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
.platform-work-detail__icon-button:disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.platform-work-detail__scroll {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__cover {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: clamp(17rem, 54vh, 28rem);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: #0c0c0c;
|
||||
}
|
||||
|
||||
.platform-work-detail__cover-blur {
|
||||
position: absolute;
|
||||
inset: -1rem;
|
||||
height: calc(100% + 2rem);
|
||||
width: calc(100% + 2rem);
|
||||
object-fit: cover;
|
||||
opacity: 0.55;
|
||||
filter: blur(24px);
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.platform-work-detail__cover::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background:
|
||||
linear-gradient(180deg, rgb(0 0 0 / 5%), rgb(0 0 0 / 42%)),
|
||||
radial-gradient(circle at center, transparent 0 34%, rgb(0 0 0 / 36%) 100%);
|
||||
}
|
||||
|
||||
.platform-work-detail__cover-image {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-height: min(72vw, 24rem);
|
||||
width: min(58vw, 22rem);
|
||||
max-width: 82%;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 1.6rem 4rem rgb(0 0 0 / 38%);
|
||||
}
|
||||
|
||||
.platform-work-detail__cover-fallback {
|
||||
aspect-ratio: 3 / 4;
|
||||
width: min(54vw, 20rem);
|
||||
border-radius: 0.8rem;
|
||||
background:
|
||||
linear-gradient(135deg, rgb(20 184 166 / 55%), rgb(250 204 21 / 34%)),
|
||||
#202020;
|
||||
}
|
||||
|
||||
.platform-work-detail__summary {
|
||||
border-bottom: 0.5rem solid #070707;
|
||||
background: #181818;
|
||||
padding: 1.4rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__meta-row {
|
||||
display: grid;
|
||||
grid-template-columns: 4.35rem minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__app-icon {
|
||||
display: flex;
|
||||
aspect-ratio: 1;
|
||||
width: 4.35rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
background: #2b2b2b;
|
||||
color: #e7e7e7;
|
||||
font-size: 1.45rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.platform-work-detail__name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: clamp(1.15rem, 5vw, 1.75rem);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.platform-work-detail__author {
|
||||
margin-top: 0.45rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: rgb(255 255 255 / 55%);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__remix {
|
||||
display: inline-flex;
|
||||
min-width: 5.2rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
background: #12bfb1;
|
||||
color: #041918;
|
||||
padding: 0.6rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.platform-work-detail__remix:disabled,
|
||||
.platform-work-detail__start:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
.platform-work-detail__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
margin-top: 1.35rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__stat {
|
||||
min-width: 0;
|
||||
border-left: 1px solid rgb(255 255 255 / 10%);
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__stat:first-child {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.platform-work-detail__stat-label {
|
||||
color: rgb(255 255 255 / 52%);
|
||||
font-size: clamp(0.68rem, 2.8vw, 0.82rem);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.platform-work-detail__stat-value {
|
||||
margin-top: 0.35rem;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: rgb(255 255 255 / 82%);
|
||||
font-size: clamp(1rem, 4.2vw, 1.35rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.platform-work-detail__body {
|
||||
background: #181818;
|
||||
padding: 1.4rem 1rem 7rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__chip,
|
||||
.platform-work-detail__code {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
border: 1px solid rgb(255 255 255 / 18%);
|
||||
border-radius: 0.7rem;
|
||||
background: transparent;
|
||||
color: rgb(255 255 255 / 82%);
|
||||
padding: 0.42rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.platform-work-detail__copy {
|
||||
margin: 0;
|
||||
color: rgb(255 255 255 / 88%);
|
||||
font-size: clamp(1rem, 4vw, 1.2rem);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.platform-work-detail__code {
|
||||
margin-top: 1.3rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__error,
|
||||
.platform-work-detail__toast {
|
||||
margin-top: 1rem;
|
||||
border-radius: 0.85rem;
|
||||
padding: 0.8rem 0.9rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__error {
|
||||
border: 1px solid rgb(248 113 113 / 38%);
|
||||
background: rgb(127 29 29 / 38%);
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
.platform-work-detail__toast {
|
||||
border: 1px solid rgb(45 212 191 / 26%);
|
||||
background: rgb(15 118 110 / 26%);
|
||||
color: #ccfbf1;
|
||||
}
|
||||
|
||||
.platform-work-detail__bottom {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
display: grid;
|
||||
padding: 0.9rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
|
||||
background: linear-gradient(180deg, rgb(24 24 24 / 12%), #181818 32%);
|
||||
}
|
||||
|
||||
.platform-work-detail__start {
|
||||
display: inline-flex;
|
||||
min-height: 3.4rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.55rem;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: #10bdb1;
|
||||
color: #f7fffe;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 1.2rem 2.5rem rgb(16 189 177 / 24%);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.platform-work-detail {
|
||||
border-radius: 1.2rem;
|
||||
}
|
||||
|
||||
.platform-work-detail__summary,
|
||||
.platform-work-detail__body,
|
||||
.platform-work-detail__bottom {
|
||||
padding-left: max(2rem, calc((100% - 58rem) / 2));
|
||||
padding-right: max(2rem, calc((100% - 58rem) / 2));
|
||||
}
|
||||
|
||||
.platform-work-detail__topbar {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user