hyapp-h5/activity/tasks/style.css

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --app-scale: 1;
    --task-width: 100%;
    --task-bg: #130a2b;
    --task-white: #ffffff;
    --task-muted: rgba(255, 255, 255, 0.62);
    --task-line: rgba(255, 255, 255, 0.16);
    --task-purple: rgba(217, 0, 255, 0.32);
    --task-gold: #ffd155;
    --task-gold-border: #fff09b;
    --task-red-shadow: #be1e21;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    background: var(--task-bg);
    color: var(--task-white);
    font-family:
        'Source Han Sans SC', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

button {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    outline: none;
}

.app-viewport {
    position: relative;
    width: var(--task-width);
    min-height: 100vh;
    margin: 0;
}

.task-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    padding: 44px 0 36px;
    background: var(--task-bg);
}

.task-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(19, 10, 43, 0.08), rgba(19, 10, 43, 0.12)),
        url('./assets/task-bg.png') center top / 100% 100% no-repeat;
}

.task-nav {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 44px;
}

.task-nav h1 {
    position: absolute;
    left: 50%;
    top: 13px;
    width: 180px;
    margin: 0 0 0 -90px;
    color: var(--task-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    text-transform: capitalize;
}

.back-button {
    position: absolute;
    left: 16px;
    top: 10px;
    width: 24px;
    height: 24px;
}

.back-button span {
    position: absolute;
    left: 7px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-left: 2px solid var(--task-white);
    border-bottom: 2px solid var(--task-white);
    transform: rotate(45deg);
}

.task-section {
    position: relative;
    z-index: 1;
    margin-top: 16px;
}

.task-section-exclusive {
    margin-top: 18px;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 20px;
    padding: 0 16px;
}

.section-head h2 {
    margin: 0;
    color: var(--task-white);
    font-size: 16px;
    font-weight: 800;
    line-height: 16px;
    text-transform: capitalize;
    text-shadow:
        0 2px 0 var(--task-red-shadow),
        0 0 4px rgba(244, 203, 255, 0.55);
}

.section-head p {
    margin: 2px 0 0;
    color: var(--task-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    text-align: right;
    white-space: nowrap;
}

.task-list {
    margin-top: 12px;
}

.task-row {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 52px;
    column-gap: 9px;
    align-items: center;
    min-height: 65px;
    padding: 0 16px;
}

.task-row::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        var(--task-line) 50%,
        rgba(255, 255, 255, 0)
    );
}

.task-row:last-child::after {
    opacity: 0.55;
}

.task-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--task-purple);
}

.task-icon img,
.task-icon svg {
    display: block;
    width: 29px;
    height: 29px;
}

.task-icon.is-image {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

.task-icon.is-image img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
}

.task-main {
    min-width: 0;
    padding-top: 1px;
}

.task-title {
    display: block;
    max-width: 205px;
    overflow: hidden;
    color: var(--task-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-progress {
    display: block;
    margin-top: 2px;
    color: var(--task-muted);
    font-size: 10px;
    font-weight: 400;
    line-height: 10px;
}

.task-reward {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 7px;
    color: var(--task-gold);
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
}

.task-reward img {
    width: 12px;
    height: 12px;
}

.task-action {
    position: relative;
    width: 52px;
    height: 20px;
    border: 1px solid var(--task-gold-border);
    background:
        linear-gradient(
            175deg,
            rgba(70, 42, 120, 0.72) 0%,
            rgba(59, 36, 100, 0) 72%
        ),
        #130828;
    color: var(--task-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
}

.task-action.is-claimable {
    border-color: rgba(255, 240, 155, 0.95);
    background:
        linear-gradient(
            90deg,
            rgba(129, 53, 159, 0.15),
            rgba(255, 0, 199, 0.62)
        ),
        url('./assets/button-glow.png') center / 98px 28px no-repeat,
        #130828;
}

.task-action.is-claimed,
.task-action:disabled {
    cursor: default;
}

.task-action.is-claimed {
    border-color: rgba(255, 255, 255, 0.72);
    background:
        linear-gradient(175deg, rgba(70, 42, 120, 0.4), rgba(59, 36, 100, 0)),
        #3a3348;
    color: rgba(255, 255, 255, 0.86);
}

.task-action.is-loading {
    color: rgba(255, 255, 255, 0.72);
}

.task-state {
    position: relative;
    z-index: 1;
    margin: 64px 24px 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(19, 8, 40, 0.62);
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    line-height: 18px;
    text-align: center;
}

.task-list .task-state {
    margin: 4px 16px 0;
}

@media (max-width: 374px) {
    .app-viewport {
        margin-left: 0;
        margin-right: 0;
    }
}