Equicord/src/components/PluginSettings/styles.css
KrystalSkull 40b645a66a
feat(Settings): update join buttons (#79)
* update join buttons

* revert line change, make colors variables

* Add windows transparency warning, renamed css file
2024-10-26 12:23:20 -04:00

238 lines
5.1 KiB
CSS

/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2022 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
.vc-plugins-grid {
margin-top: 16px;
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.vc-plugins-info-button {
height: 24px;
width: 24px;
padding: 0;
background: transparent;
margin-right: 8px;
}
.vc-plugins-settings-button:hover {
color: var(--interactive-hover);
}
.vc-plugins-filter-controls {
display: grid;
height: 40px;
gap: 10px;
grid-template-columns: 1fr 150px;
}
.vc-plugins-badge {
padding: 0 6px;
font-family: var(--font-display);
font-weight: 500;
border-radius: 8px;
height: 16px;
font-size: 12px;
line-height: 16px;
color: var(--white-500);
text-align: center;
}
.vc-plugins-dep-name {
margin: 0 auto;
}
.vc-plugins-info-card {
padding: 1em;
height: fit-content;
display: flex;
flex-direction: column;
background-color: var(--background-secondary-alt) !important;
transition: 0.1s ease-out;
transition-property: box-shadow, transform, background, opacity;
}
.vc-plugins-info-card div {
line-height: 32px;
}
.vc-plugins-restart-card {
padding: 1em;
background: var(--info-warning-background);
border: 1px solid var(--info-warning-foreground);
color: var(--info-warning-text);
}
.vc-plugins-restart-card button {
margin-top: 0.5em;
background: var(--info-warning-foreground) !important;
}
.vc-plugins-info-button svg:not(:hover, :focus) {
color: var(--text-muted);
}
.vc-plugin-stats {
background-color: var(--background-secondary-alt);
border-radius: 8px;
padding: 12px;
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
transition: 0.1s ease-out;
transition-property: box-shadow, transform, background, opacity;
}
.vc-plugins-info-card:hover,
.vc-plugin-stats:hover {
background-color: var(--background-tertiary) !important;
transform: translateY(-1px);
box-shadow: var(--elevation-high);
}
.vc-plugin-stats-card-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.vc-plugin-stats-card-section {
text-align: center;
flex: 1;
}
.vc-plugin-stats-card-divider {
border-left: 1px solid #ccc;
height: 100%;
margin: 0 10px;
}
/* Shared styles for warning modal and disable all modal */
.vc-text-selectable {
user-select: none;
}
.vc-warning-info {
gap: 15px;
display: flex;
flex-direction: column;
user-select: none;
}
.vc-warning-info img {
width: 70%;
height: auto;
display: block;
margin: auto auto 10px;
}
.vc-warning-info strong {
font-weight: bold;
}
.text-danger {
color: var(--text-danger);
font-size: 1.2rem;
font-weight: bold;
}
.text-normal {
color: var(--text-normal);
font-size: 1.2rem;
}
.text-normal.margin-bottom {
margin-bottom: 10px;
}
.button-danger-background {
background-color: var(--background-color) !important;
border-style: solid;
border-width: .1rem;
border-color: var(--button-outline-danger-border) !important;
border-radius: 5px;
}
.button-danger-background.top-margin {
margin-top: 10px;
}
.button-danger-background:hover {
background-color: var(--button-outline-danger-background-hover) !important;
border-style: solid;
border-width: .1rem;
border-color: var(--button-outline-danger-border) !important;
}
.button-danger-background-no-margin {
background-color: var(--button-danger-background) !important;
color: var(--header-primary);
}
.button-danger-background-no-margin:hover {
background-color: var(--button-danger-background-hover) !important;
filter: saturate(75%);
}
.vc-modal-close-button {
margin-left: auto !important;
}
.modal-footer {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
.modal-footer .button-container {
display: flex !important;
justify-content: space-between;
align-items: center;
width: 100%;
}
.button-group {
display: flex !important;
gap: 10px;
align-items: center;
justify-content: end !important;
}
/* Specific to disable all modal */
.warning-text {
color: var(--text-danger);
font-size: 1.2rem;
}
.warning-text span {
font-weight: bold;
text-decoration: underline;
}
.disable-all-button {
color: var(--header-primary);
width: 150px;
margin-left: auto;
margin-right: 4.5px !important;
}