guify/src/components/internal/toast-area.css

A simple GUI for inspecting and changing JS variables

@import "../variables.css";

.guify-toast-notification {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    /* height: 20px; */
    padding: 8px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;

    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
}

.guify-toast-area .guify-toast-notification:nth-child(odd) {
    color: var(--color-text-primary);
    background-color:var(--color-panel-background);
}

.guify-toast-area .guify-toast-notification:nth-child(even) {
    color: var(--color-text-primary);
    background-color: var(--color-menu-bar-background);
}

.guify-toast-close-button {
    color: var(--color-text-primary);
    background: transparent;
    position: absolute;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    border: none;
    cursor: pointer;
    top: 0;
    bottom: 0;
    right: 8px;
}