element-web/res/css/superhero/custom.css

334 lines
9.8 KiB
CSS

.sh_RoomTokenGatedRoom,
.mx_InviteDialog_tile_nameStack_name {
align-items: center;
display: flex;
}
.sh_RoomTokenGatedRoomIcon,
.sh_VerifiedIcon {
width: 16px;
height: 16px;
margin-right: 4px;
}
h2 .sh_RoomTokenGatedRoomIcon,
h2 .sh_VerifiedIcon {
width: 26px;
height: 26px;
}
.sh_VerifiedIcon {
margin-right: 4px;
margin-left: 4px;
}
.mx_UserInfo_profile .sh_VerifiedIcon {
width: 18px;
height: 18px;
margin-top: 3px;
}
.mx_QuickSettingsButton.sh_SuperheroDexButton::before {
-webkit-mask-image: url("../../themes/superhero/img/icons/diamond.svg");
mask-image: url("../../themes/superhero/img/icons/diamond.svg");
}
/* START - Update @user chat message highlighting */
.mx_EventTile.mx_EventTile_highlight,
.mx_EventTile.mx_EventTile_highlight .markdown-body,
.mx_EventTile.mx_EventTile_highlight .mx_EventTile_edited {
color: var(--cpd-color-orange-1000) !important;
/* font-weight: bold; */
}
/* START - Custom Side Panel styling */
.mx_SpacePanel {
--activeBackground-color: var(--cpd-color-alpha-gray-500) !important;
background-image: linear-gradient(-75deg, #cc3ae6, #6147ff);
}
.mx_SpacePanel .mx_UserMenu_name {
color: white !important;
margin-left: 14px !important;
}
.mx_SpaceButton_home .mx_SpaceButton_icon {
background: white !important;
outline: 1px solid white;
}
.mx_SpacePanel .mx_SpaceButton_avatarWrapper .mx_BaseAvatar {
border: 0px solid white;
outline: 2px solid white;
/* border-radius: 9px; */
}
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active .mx_BaseAvatar {
border: 0px solid white;
outline: 1px solid white;
}
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
background: white !important;
outline: 1px rgb(36, 36, 36) solid !important;
border: 3px rgb(36, 36, 36) solid !important;
}
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
background-color: var(--cpd-color-text-action-accent) !important;
}
.mx_NotificationBadge_visible {
background-color: black !important;
font-weight: 700 !important;
}
.mx_SpacePanel .mx_SpaceButton_active .mx_SpaceButton_avatarWrapper .mx_BaseAvatar {
border: 0px solid white;
}
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name {
color: white !important;
margin-left: 14px !important;
}
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
padding-right: 20px !important;
}
.mx_SpacePanel.collapsed .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
padding-right: 0px !important;
}
.mx_SpacePanel .mx_AccessibleButton.mx_SpacePanel_toggleCollapse {
background-color: rgb(36, 36, 36) !important;
}
.mx_AccessibleButton.mx_LegacyRoomHeader_button.mx_AccessibleButton_disabled {
display: none;
}
.cpd-theme-dark .mx_SpacePanel .mx_AccessibleButton.mx_SpacePanel_toggleCollapse {
background-color: white !important;
}
.mx_SpacePanel .mx_QuickSettingsButton {
color: white !important;
}
.mx_SpacePanel .mx_QuickSettingsButton::before {
background-color: white !important;
}
.mx_SpacePanel .mx_QuickSettingsButton:not(.expanded):hover {
background-color: rgba(255, 255, 255, 0.3) !important;
}
.mx_ToastContainer {
top: 3px !important;
left: 72px !important;
}
.mx_Toast_toast {
background: var(--cpd-color-theme-bg) !important;
width: 260px;
}
/* END - Custom Side Panel styling */
.cpd-theme-light {
--cpd-color-text-primary: black !important;
/* --cpd-color-text-secondary: black!important; */
}
.mx_LegacyRoomHeader_button:hover {
background: rgba(0, 0, 0, 0.06) !important;
}
/* START - Custom Room Info Panel styling */
.mx_BaseCard {
background-color: rgba(0, 0, 0, 0.025) !important;
}
.mx_BaseCard ._item_zxa40_17 {
background: transparent !important;
}
.cpd-theme-dark .mx_BaseCard {
background-color: rgba(0, 0, 0, 0.13) !important;
}
/* END - Custom Room Info Panel styling */
.cpd-theme-dark .mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user {
background-color: rgba(0, 0, 0, 0.74) !important;
}
.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer {
background-color: rgba(38, 40, 45, 0.9) !important;
}
.cpd-theme-dark {
--cpd-color-text-primary: white !important;
--cpd-color-text-secondary: var(--cpd-color-gray-1200) !important;
}
.cpd-theme-dark .mx_SpacePanel {
/* --activeBackground-color: var(--cpd-color-alpha-gray-500)!important; */
/* background-image: linear-gradient(25deg, #700483, #110177)!important; */
background: linear-gradient(25deg, rgba(204, 58, 230, 0.2) 0%, rgba(97, 71, 255, 0.2) 100%), #313338;
}
.cpd-theme-dark .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon::before {
background-color: #393559 !important;
}
.cpd-theme-dark .mx_NotificationBadge_visible {
background-color: white !important;
}
.cpd-theme-dark .mx_NotificationBadge_visible .mx_NotificationBadge_count {
color: black !important;
}
/* CPD Light Theme Overwrite */
.cpd-theme-light.cpd-theme-light {
--cpd-color-text-action-accent: #6147ff !important;
--cpd-color-alpha-gray-500: hsla(212, 87%, 15%, 0.2);
--cpd-color-pink-1200: #a80298 !important;
--cpd-color-fuchsia-1200: #8201aa !important;
--cpd-color-purple-1200: #5f01ed !important;
--cpd-color-blue-1200: #0530cd !important;
--cpd-color-cyan-1200: #02b5c5 !important;
--cpd-color-green-1200: #009e3d !important;
--cpd-color-green-900: #02a769 !important;
--cpd-color-lime-1200: #00b300 !important;
--cpd-color-yellow-1200: #c09000 !important;
--cpd-color-orange-1200: #d4570f !important;
--cpd-color-orange-1000: #ac3300;
--cpd-color-red-1100: #a4041d !important;
--cpd-color-gray-1200: #3c4045;
--cpd-color-theme-bg: #ffffff;
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
}
/* CPD Dark Theme Overwrite */
.cpd-theme-dark.cpd-theme-dark {
--cpd-color-text-action-accent: #6147ff !important;
--cpd-color-theme-bg: #313338 !important;
--cpd-color-text-link-external: rgb(141, 149, 255) !important;
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
--cpd-color-bg-subtle-primary: rgba(0, 0, 0, 0.075) !important;
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
--cpd-color-alpha-gray-500: hsla(214, 41%, 97%, 0.15);
--cpd-color-pink-1200: #c81fb7 !important;
--cpd-color-pink-300: #544352 !important;
--cpd-color-fuchsia-1200: #d538ee !important;
--cpd-color-fuchsia-300: #52424f !important;
--cpd-color-purple-1200: #9a30fd !important;
--cpd-color-purple-300: #443f4c !important;
--cpd-color-blue-1200: #006aff !important;
--cpd-color-blue-300: #414852 !important;
--cpd-color-cyan-1200: #08eaff !important;
--cpd-color-cyan-300: #374445 !important;
--cpd-color-green-1200: #00ff80 !important;
--cpd-color-green-900: #00ff80 !important;
--cpd-color-green-400: #3f4d46 !important;
--cpd-color-green-300: #3f4d46 !important;
--cpd-color-lime-1200: #48ff00 !important;
--cpd-color-lime-300: #414d3c !important;
--cpd-color-yellow-1200: #ffe100 !important;
--cpd-color-yellow-300: #514e3e !important;
--cpd-color-orange-1200: #ff7700 !important;
--cpd-color-orange-1000: #eb7a12;
--cpd-color-orange-300: #574c42 !important;
--cpd-color-red-1200: #ff2600 !important;
--cpd-color-red-300: #51423f !important;
--cpd-color-gray-1200: #bdc3cc;
}
.mx_HomePage_title {
font-size: 38px;
font-weight: 700;
line-height: 45px;
letter-spacing: 0em;
text-align: left;
color: #1b1d22;
margin-bottom: 24px;
align-items: center;
display: flex;
align-items: center;
}
@media (max-width: 1250px) {
.mx_HomePage_title {
flex-direction: column;
}
}
.cpd-theme-dark .mx_HomePage_title {
color: #ffffff;
}
.mx_HomePage_title svg {
height: 44px;
width: 173.99px;
margin-right: 8px;
}
.mx_HomePage_default_wrapper .chat_screen_shot {
max-width: 70%;
}
.mx_HomePage_default_buttons_title {
font-size: 30px;
}
.cpd-theme-dark .mx_HomePage_default_buttons_title {
color: rgba(255, 255, 255, 0.7);
}
.cpd-theme-dark .mx_HomePage_default_buttons_title span {
color: rgba(255, 255, 255, 1);
}
.mx_HomePage_default .mx_HomePage_default_buttons {
margin: 10px auto 0 !important;
}
.cpd-theme-dark .mx_HomePage_default .mx_HomePage_default_buttons.browsers .mx_HomePage_button_custom {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_custom {
width: auto !important;
min-height: auto !important;
padding: 16px 30px !important;
align-items: center;
display: flex;
flex-direction: column;
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_custom svg {
width: 50px !important;
height: 50px !important;
display: block !important;
margin-bottom: 4px;
}
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_custom::before {
display: none !important;
}
.mx_RoomGeneralContextMenu_iconSignOut::before {
-webkit-mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
}
.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut::before {
-webkit-mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
}
.mx_IconizedContextMenu .mx_IconizedContextMenu_option_red .mx_IconizedContextMenu_icon::before {
-webkit-mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
mask-image: url("../../themes/superhero/img/icons/leave.svg") !important;
}