suzzy-frontend/suzzy-v0-standalone/_todo/_styles/ui-account.css

/* Collections */
div.collection-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

div.collection-item {
    width: 100%;
    height: fit-content;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--background-layer-4);
    border: 2px solid var(--background-layer-1);
    box-sizing: border-box;
    padding: 16px;
    gap: 8px;
}

div.text-box {
    background-color: var(--background-layer-5);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 8px;
}

div.collection-message {
    width: 100%;
    padding: 32px;
    text-align: center;
    box-sizing: border-box;
}

div.collection-message img,
div.collection-message i {
    fill: var(--background-layer-0);
    height: 48px;
    width: 48px;
}


/* Page: Devices */
div.item-device {
    display: flex;
    align-items: center;
}

div.device-icon {
    min-height: 72px;
    min-width: 72px;
    padding: 8px;
    border-radius: 100%;
    box-sizing: border-box;
    background-color: var(--background-layer-4);
    border: 2px solid var(--background-layer-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

div.device-icon img {
    fill: var(--background-layer-0);
    height: 40px;
    width: 40px;
}

div.device-info {
    flex-basis: 100%;
}

div.info-alongside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
    gap: 8px;
}

button.device-action {
    fill: var(--background-layer-1);
    height: 24px;
    width: 24px;
    background-color: transparent;
    cursor: pointer;
    border: none;
    transition: var(--transition-time) ease-in-out fill;
}

button.device-action:hover,
button.device-action:focus-visible {
    fill: var(--text-error-1);
}

/* Page: Connections */
div.application-header {
    display: flex;
    align-items: self-start;
    justify-content: space-between;
    gap: 8px;
}

img.application-icon {
    border-radius: 100%;
    box-sizing: border-box;
    border: 4px solid var(--background-layer-1);
    background-color: var(--background-layer-4);
    min-height: 64px;
    max-height: 64px;
    min-width: 64px;
    max-width: 64px;
    opacity: 0;
    background-size: contain;
    transition: var(--transition-time) ease-in-out opacity;
}

div.application-info {
    flex-basis: 100%;
    overflow: hidden;
}

div.application-extended {
    display: grid;
    gap: 8px;
    transition: var(--transition-time) ease-in-out all;
    height: -8px;
}

div.scopes-wrapper {
    display: grid;
}

div.scope {
    display: flex;
    gap: 4px;
    align-items: center;
}

div.dot-green {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #42f495;
}

/* Page: Profile */
div.profile-wrapper {
    display: flex;
}

div.profile-options,
div.profile-container {
    flex-basis: 50%;
    box-sizing: border-box;
    padding: 4px;
}

div.profile-options {
    display: grid;
    gap: 8px;
}

div.widget-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start
}

div.widget-color {
    display: grid;
    place-items: center;
}

input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
}

input.color-preview {
    cursor: pointer;
    border-radius: 8px;
    background-color: white;
    height: 48px;
    width: 96px;
    border: 2px solid var(--background-layer-2);
    transition: var(--transition-time) ease-in-out all;
}

div.profile-container {
    min-width: 350px;
    height: fit-content;
    background-color: var(--accent-background);
    border: 4px solid var(--accent-border);
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
    margin: 16px;
    padding: 0;
}

#profile-banner {
    width: 100%;
    height: 128px;
    border-bottom: 4px solid var(--accent-border);
    background-color: var(--accent-banner);
    background-position: center;
    background-size: cover;
}

div.profile-header {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 8px 8px 0 8px;
}

#profile-avatar {
    width: 96px;
    height: 96px;
    margin-top: -60px;
    border-radius: 100%;
    border: 4px solid var(--accent-border);
    background-color: var(--accent-banner);
    object-fit: cover;
}

#profile-badges {
    height: fit-content;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 8px;
    gap: 4px;
}

#profile-badges:empty {
    display: none;
}

#profile-badges img {
    height: 20px;
    width: 20px;
}

div.profile-about {
    background-color: rgba(0, 0, 0, 0.4);
    margin: 8px;
    padding: 8px;
    border-radius: 8px;
    box-sizing: border-box;
}

div.profile-about p,
div.profile-about pre {
    transition: var(--transition-time) ease-in-out color;
    max-height: 300px;
    overflow: hidden;
    text-wrap: balance;
}

div.profile-dark p,
div.profile-dark pre {
    color: var(--text-layer-2);
}

#profile-displayname {
    font-size: large;
}

#profile-username {
    font-size: small;
    opacity: 0.80;
}

#profile-divider {
    background-color: var(--accent-border);
    opacity: 0.5;
}

/* Page: Applications */
div.application-options {
    display: grid;
    gap: 8px;
}

div.options-hidden {
    height: 0;
    overflow: hidden;
}

div.input-redirect {
    display: flex;
    gap: 8px;
}

div.input-redirect button {
    min-width: fit-content;
    height: 100%;
}

div#container-redirects {
    display: grid;
    gap: 8px;
}

/* Mobile Styling */
@media (max-width: 1024px) {
    div.main-content {
        border-right: none;
    }
}

@media (max-width: 640px) {

    div.main-content {
        border: none;
        background-color: transparent;
    }

    div.main-wrapper {
        display: block;
    }

    div.main-wrapper div.divider-line {
        display: block !important;
    }

    a.navigation-link {
        font-size: large;
    }

    div.main-aside {
        width: 100%;
        max-width: 100%;
    }

    div.main-content {
        width: 100%;
        height: fit-content;
        min-height: 100vh;
        max-width: 100%;
    }

    div.collection-item {
        background-color: var(--background-layer-4);
        border: 2px solid var(--background-layer-3);
    }

    div.device-icon {
        background-color: var(--background-layer-4);
        border: 2px solid var(--background-layer-1);
    }

    /* Page: Connections */
    div.application-header {
        display: block;
    }

    div.application-header button {
        margin: 8px 0;
        width: 100%;
    }

    div.text-box {
        background-color: var(--background-layer-3);
    }

    /* Page: Devices */
    button.device-action {
        height: 40px;
        width: 40px;
    }

    div.info-alongside {
        text-wrap: balance;
    }

    /* Page: Profile */
    div.profile-wrapper {
        display: block;
    }

    div.profile-container {
        min-width: 0px;
        margin: 32px 0 0 0;
    }

}