零件:Globalsearch.css

/*通用gs样式*/

#globalSearcher {
    --gs-box-bg: #F0F0F0;
    --gs-form-bg: #FFF;
    --gs-form-text: #666;
    --gs-form-border: 1px solid #999;
    --gs-form-height: 28px;
    --gs-form-color: #444;
    --gs-paginator-sep: 1px solid #ccc;
    --gs-paginator-bg: #FFF;
    --gs-paginator-text: #666;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

#globalSearcher.dark {
    --gs-box-bg: #1a1a1a;
    --gs-form-bg: #000;
    --gs-form-text: #d5d5d5;
    --gs-form-border: 1px solid #333;
    --gs-form-height: 28px;
    --gs-form-color: #ddd;
    --gs-paginator-sep: 1px solid #444;
    --gs-paginator-bg: #333;
    --gs-paginator-text: #AAA;
}
.dark input,.dark textarea, .dark select, .dark option {
    color: var(--gs-form-text);
}
#globalSearcher .gs-formcontainer,
#globalSearcher .gs-infocontainer,
#globalSearcher .gs-resultcontainer,
#globalSearcher .gs-paginator {
    background: var(--gs-box-bg);
    padding: 12px 12px;
    border-radius: 4px;
    color: var(--gs-form-color);
}

#globalSearcher #gs-form {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
}

#globalSearcher #gs-form .gs-formgroup {
    display: flex;
    flex-direction: column;
    padding: 4px;
    border-radius: 4px;
}

#globalSearcher #gs-form .gs-formgroup .gs-formgroup-title {
    height: 1.5em;
}

#globalSearcher #gs-form .gs-formgroup .gs-formgroup-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#globalSearcher #gs-form .gs-formgroup .radio-group,
#globalSearcher #gs-form .gs-formgroup .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#globalSearcher #gs-form .gs-formgroup .radio-group label,
#globalSearcher #gs-form .gs-formgroup .checkbox-group label {
    font-weight: normal;
}

#globalSearcher #gs-form input[type=text] {
    height: var(--gs-form-height);
    color: var(--gs-form-text);
    background: var(--gs-form-bg);
    border: var(--gs-form-border);
    border-radius: 4px;
}

#globalSearcher #gs-form select {
    height: var(--gs-form-height);
    color: var(--gs-form-text);
    background: var(--gs-form-bg);
    border: var(--gs-form-border);
    border-radius: 4px;
}

#globalSearcher #gs-form .gs-submit {
    border-radius: 4px;
    padding-left: 24px;
    padding-right: 24px;
    flex: 1;
    flex-basis: 100%;
}

#globalSearcher .gs-paginator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#globalSearcher .gs-paginator>button {
    color: var(--gs-paginator-text);
    background: var(--gs-paginator-bg);
}

#globalSearcher .gs-paginator>button.active {
    color: unset;
}

#globalSearcher .gs-paginator>button:not(.gs-paginator-last) {
    border-right: var(--gs-paginator-sep);
}

#globalSearcher .gs-paginator .gs-paginator-first {
    border-radius: 4px 0 0 4px;
}

#globalSearcher .gs-paginator .gs-paginator-last {
    border-radius: 0 4px 4px 0;
}

#globalSearcher .gs-paginator .gs-paginator-info {
    padding: 0 12px;
}