@eviljs/reactx/theme-view-v1/theme-view.css

Awesome React UI Widgets

.ThemeView-t2eb {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: var(--ThemeView-padding, var(--std-gutter4));
}

.grid-1c73 {
    gap: var(--std-gutter10);
}

.ThemeView-t2eb label {
    display: inline-block;
    cursor: default;
}
.ThemeView-t2eb label.std-flex {
    display: flex;
}

.color-t75a,
.contrast-td08,
.duration-t347,
.gutter-t1d3,
.gutter-t1d3 *,
.icon-e43c,
.icon-e43c label,
.picker-t8c2,
.radius-75ca,
.shadow-t9a2,
.text-8fa3 {
    transition: all var(--std-duration3);
}
.color-t75a:hover,
.duration-t347:hover,
.gutter-t1d3:hover,
.icon-e43c:hover,
.picker-t8c2:hover,
.radius-75ca:hover,
.shadow-t9a2:hover,
.text-8fa3:hover {
    z-index: 1;
    transform: scale(1.2);
}

.duration-t347,
.radius-75ca,
.shadow-t9a2 {
    background-color: var(--std-color-bg1);
}

.picker-t8c2 {
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;
    overflow: hidden;
    clip-path: circle(1rem);
    cursor: pointer;
}

.color-t75a {
    width: var(--std-icon-size5);
    height: var(--std-icon-size5);
    margin: 0 var(--std-gutter3);
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: var(--std-shadow-soft);
    transition: all var(--std-duration3);
}
.color-t75a:hover {
    box-shadow: var(--std-shadow4);
}

.contrast-td08 {
    flex: 1 1 0;
    border: var(--std-gutter1) solid transparent;
    padding: var(--std-gutter3);
    border-radius: var(--std-radius3);
    overflow: hidden;
    box-shadow: var(--std-shadow1);
}
.contrast-td08:hover {
    border-color: currentColor;
}

.buttons-45cb .std-button {
    margin: 0 var(--std-gutter3);
}

.gutter-t1d3 {
    transform-origin: top left;
}
.gutter-t1d3:hover {
    font-weight: var(--std-text-weight2);
    color: var(--std-color-primary-accent);
}
.gutter-t1d3 > i {
    border-bottom: 1rem solid var(--std-color-bg4)
}
.gutter-t1d3:hover > i {
    border-color: var(--std-color-primary-bg2);
}

.radius-75ca {
    margin: 0 var(--std-gutter3);
    padding: var(--std-gutter4);
    border: 4px solid transparent;
    background-color: var(--std-color-bg4);
}
.radius-75ca:hover {
    color: var(--std-color-primary-accent);
    background-color: var(--std-color-bg1);
    border-color: currentColor;
}

.icon-e43c {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 var(--std-gutter4);
}
.icon-e43c:hover label {
    color: var(--std-color-primary-accent);
}

.duration-t347 {
    width: 80px;
    line-height: 80px;
    text-align: center;
    margin: 0 var(--std-gutter4);
    box-shadow: var(--std-shadow4);
}
.duration-t347:hover {
    border-radius: 50%;
}

.shadow-t9a2 {
    width: 60px;
    line-height: 60px;
    margin: var(--std-gutter3) var(--std-gutter4);
    border-radius: 50%;
    text-align: center;
}