Guilded Light Mode by myferonguilded

/* ==UserStyle==
@name       Guilded Light Mode
@version    20240419.05.15
@namespace  ?
==/UserStyle== */

/* ==UserStyle==
@name         Guilded White
@version      10282023
@namespace    userstyles.world/user/myferonguilded
@description  A light mode for Guilded.gg
@author       MyferIsADev
@license      No License
My GitHub: https://github.com/myferr/
==/UserStyle== */

@-moz-document domain("guilded.gg") {
/* ==Information==
@name         Guilded Light Mode
@version      1.0.0
@description  A light mode for Guilded.gg
@author       MyferIsADev
@license      MIT License
My GitHub: https://github.com/myferr/
==/== */

:root {
    --primary-color: white;
    --secondary-color: white;
    --primary-bg: white;
    --secondary-bg: white;
    --tertiary-bg: white;
    --text-color: 0, 0, 0;
    --white-text-color: white;
    --color-five: 207, 207, 207;
}

#app .ChatChannelInput-container {
    background-color: white;
}

#app .ChannelWrapper-container,
#app .MyTeamsPage-container,
#app .PlayerLfgPortal-container,
#app .UserProfileV3-container,
#app .TournamentsPortalPage-container,
#app .CollapsibleItemHeader-container {
    background-color: var(--primary-bg);
}

#app .PageSidebarWrapper-container,
#app .TeamPageNavV3-nav-sections,
#app .ScreenHeader-container,
#app .WebAppV2-sidebar,
#app .TeamPageNavV3-header,
#app .ChatChannelList-container,
#app .NavV4SectionSidebar-container,
#app .OptionsMenuPageWrapper-container,
#app .ModalV2-container {
    background-color: var(--secondary-bg);
}

#app .GroupSelector-container,
#app .ChatChannelInput-editor,
#app .WindowsTitleBar-container,
#app .Navbar-container,
#app .ChatV2MessageReplyTooltip-content-wrapper,
#app .QuickActionBar-container,
#app .TransientMenu-container-style-default,
#app .ProfileHoverCardV2Overlay-container,
#app .UserProfilePostPanel-container,
#app .DraftInputWithTitleV2-title-wrapper,
#app .OpenGraphEmbed-content,
#app .CodeContainerRenderer-container,
#app .CodeLineRenderer,
#app .TeamThreadPostPanelDisplay-container,
#app .TeamThreadPostEditor-container,
#app .OptionsMenu-container-desktop .OptionsMenu-options-control,
#app .DefaultReadonlyEditableForm-container,
#app .UserSettingsServerSubscriptionsUpsell-container,
#app .ServerSubscriptionBar-container,
#app .PersistentUpsell-container-flavor-settings,
#app .SocialLinkPanel-header,
#app .ReactionPicker-content,
#app .ChannelActivityDisplay-container,
#app .ChannelActivityDisplay-group-header,
#app .ChatChannelInputInlineReplyStatusBar-container {
    background-color: var(--tertiary-bg);
}

#app .InlineAddItemControl-add-icon,
#app .CalloutBadge-container,
#app .VerticalSelectionIndicator-container,
#app .SwitchInput-container-on .SwitchInput-slide {
    background-color: var(--primary-color);
    fill: white;
}

#app .LinkRenderer,
#app .LinkRenderer:hover,
#app .LinkRenderer:visited,
#app .LinkRenderer:active,
#app .LinkRenderer:focus,
#app .GuildedText-container-color-gilded1 {
    color: var(--primary-color);
}

#app .SidebarInfoItem-container {
    background: none;
}

#app .Navbar-container,
#app .GroupSelector-container,
#app .ChatChannelInput-editor,
#app .WindowsTitleBar-container,
#app .GroupSelector-container,
#app .WebAppV2-sidebar,
#app .PageSidebarWrapper-container,
#app .ScreenHeader-container,
#app .QuickActionBar-container,
#app .ChatChannelList-container,
#app .OpenGraphEmbed-content {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#app .GroupSelector-container,
#app .ScreenHeader-container {
    z-index: 5;
}

#app .ProfileHoverCardV2Overlay-action-menu,
#app .ReactionPickerFooter-container,
#app .ReactionPickerNavbar-container,
#app .ReactionPicker-search-bar,
#app .TeamChannelItemContents-container-selected,
#app .ChannelActivityDisplay-item {
    background-color: rgba(255, 255, 255, 0.05);
}

#app .ChatV2Message-container-mentioned {
    background-color: transparent;
    border-left: var(--primary-color);
    border-radius: var(--primary-border-radius);
}

#app .ChatV2Message-container-mentioned::Before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: 0.3;
    pointer-events: none;
    z-index: -100;
}

#app .QuickActionBar-container {
    border: none;
}

#app .ChatV2Message-container:hover {
    background: none;
}

#app .ChatV2Message-container:hover::Before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--primary-color);
    opacity: 0.1;
    pointer-events: none;
    z-index: -100;
}

#app .OpenGraphEmbed-content {
    border: none;
    border-left: var(--primary-color);
    border-radius: 0 var(--secondary-border-radius) var(--secondary-border-radius) 0;
}

#app .TeamNavHeaderRowButton-container,
#app .FormConfirmButtonV2-container {
    border: none;
    background: var(--primary-color);
    border-radius: var(--primary-border-radius);
}

#app .TeamNavHeaderRowButton-container:hover,
#app .FormConfirmButtonV2-container:hover {
    background-color: var(--secondary-color);
}

#app .TeamNavHeaderRowButton-container .FormConfirmButtonV2-button-content,
#app .FormConfirmButtonV2-container .FormConfirmButtonV2-button-content {
    color: white;
}

#app .RangeSlider-container-type-gilded .RangeSlider-selected-rail {
    background: var(--primary-color);
}

#app .HotkeyRecorder-container {
    border: none;
    background-color: var(--tertiary-bg);
}

#app .FormConfirmButtonV2-container-hollow {
    border: none;
    background-color: var(--primary-color);
    border-radius: var(--primary-border-radius);
}

#app .UserProfilePostPanel-container {
    border-radius: var(--secondary-border-radius);
    border-top-color: var(--primary-color);
}

#app .DraftInputWithTitleV2-title-wrapper {
    border-radius: var(--secondary-border-radius);
}

#app .UserGameSummaryCard-container {
    border-radius: var(--secondary-border-radius);
    background-color: var(--tertiary-bg);
    overflow: hidden;
}

#app .UserGameSummaryCard-container * {
    border: none;
}

#app .MyTeamsPage-grid .CardWrapper-container {
    background-color: var(--secondary-bg);
    border-radius: var(--secondary-border-radius);
}

#app .MyTeamsPage-grid .CardWrapper-container:after {
    content: none;
}

#app .MyTeamsPage-grid .CardWrapper-container image {
    border-radius: var(--secondary-border-radius) !important;
    mask: none !important;
    overflow: hidden;
}

#app .TeamChannelItemContents-container-selected {
    background-color: var(--primary-color);
}

#app .ParagraphRenderer,
#app .TeamNavSectionsList-header,
#app .OptionsMenu-container-desktop,
#app .Form-header {
    color: rgb(var(--text-color));
}

#app .GuildedText-container-type-subtext3,
#app .TeamNavSectionItem-name {
    color: rgba(var(--text-color), 0.8);
}

#app .ChatV2MessageTimestamp-container {
    color: rgba(var(--text-color), 0.5);
}

#app .ChannelIcon-icon-primary {
    fill: rgb(var(--text-color));
}

#app .GuildedText-container-type-heading3 {
    color: rgba(var(--text-color));
}

#app .LinkRenderer-read-only {
    color: rgba(var(--text-color));
}

#app .icon-plus {
    color: rgba(var(--text-color));
}

#app .SearchBarInput-container {
    background-color: var(--secondary-color);
}

#app .TeamNavHeaderRowButton-text {
    color: rgba(var(--text-color));
}

#app .OverviewWidgetItem-text {
    color: rgba(var(--text-color));
}

#app .TeamMemberRolePill-name {
    color: rgba(var(--text-color));
}

#app .ContextMenuItem-label {
    color: rgba(var(--text-color));
}

#app .UserInfoSummaryItem-summary-content {
    color: rgba(var(--text-color));
}

#app .UserName-container {
    color: rgba(var(--text-color));
}

#app .OpenGraphEmbedContent-description {
    color: rgba(var(--text-color));
}

#app .ChannelListHeader-amount {
    color: rgba(var(--text-color));
}

#app .TeamWidgetProfileRank-rank-name {
    color: rgba(var(--text-color));
}

#app .title {
    color: rgba(var(--text-color));
}

#app .UserStatusMessageOption-preset-message-content {
    color: rgba(var(--text-color));
}

#app .GuildedSelect-default-label {
    color: rgba(var(--text-color));
}

#app .ModalHeaderV2-container {
    background-color: var(--tertiary-bg);
}

#app .ModalHeaderV2-header {
    color: rgba(var(--text-color));
}

#app .TeamPageContent-container {
    background-color: var(--tertiary-bg);
}

#app .TeamOverviewRoot-description {
    color: rgba(var(--text-color));
}

#app .ScreenHeader-name {
    color: rgba(var(--text-color));
    background-color: #e1e1e1;
}

#app .ChatChannelListItemInfo-name {
    color: rgba(var(--text-color));
}

#app .ChatChannelListItem-container-selected {
    background-color: var(--color-five);
}

#app .IconAndLabel-label {
    color: rgba(var(--text-color));
}

#app .TeamPageContentSidebarGames-see-all-games {
    color: rgba(var(--text-color));
}

#app .TextInputWithLabel-floating-label {
    color: rgba(var(--text-color));
}

#app .TextInputWithLabel-input-element {
    color: rgba(var(--text-color));
}

#app .DesktopOptionsControlItemTemplate-label-text {
    color: rgba(var(--text-color));
}

#app .PostDisplayV2-container {
    background-color: var(--secondary-color);
}

#app .TeamOverviewSectionHeader-title {
    color: rgba(var(--text-color));
}

#app .TeamOverviewContentSection-card {
    background-color: var(--primary-color);
}

#app .TeamPostRow-container-desktop {
    background-color: var(--primary-color);
}

#app .UserBadge-name {
    color: rgba(var(--white-text-color));
}

#app .GuildedText-container-weight-bold {
    color: rgba(var(--text-color));
}

#app .Form-description {
    color: rgba(var(--text-color));
}

#app .CheckboxV2-description {
    color: rgba(var(--text-color));
}

#app .FormFieldLabel-container {
    color: rgba(var(--text-color));
}

#app .ToggleFieldWrapper-label {
    color: rgba(var(--text-color));
}

#app .Select-placeholder {
    color: rgba(var(--text-color));
}

#app .Select-menu-outer {
    background-color: var(--primary-...