element-web/res/css/structures/_HomePage.pcss
Michael Telatynski 220e93596a
Switch from svg masks to svg rendering in more places (#31652)
* Replace icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused icon

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace more icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Swap for outline icons in spotlight & update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch emoji picker to use emoji for header icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update football emoji

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in ExtensionsCard

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in BaseCard

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in EmojiPicker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in Spotlight

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak emoji and fix disabled state

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in HomePage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in DecoratedRoomAvatar

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in SpaceRoomView

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in DialPadBackspaceButton

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in NewRoomIntro

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in SpaceCreateMenu

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in InlineTermsAgreement

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in PollCreateDialog

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in ServerPicker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Revert size change

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-08 11:20:55 +00:00

84 lines
1.9 KiB
Plaintext

/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd
Copyright 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_HomePage {
max-width: 960px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.mx_HomePage_default {
text-align: center;
display: flex;
.mx_HomePage_default_wrapper {
margin: auto;
}
img {
height: 48px;
}
h1 {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-32px;
line-height: 1.375;
margin-bottom: 4px;
}
h2 {
margin-top: 4px;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-25px;
color: $muted-fg-color;
}
.mx_MiniAvatarUploader {
margin: 0 auto;
}
.mx_HomePage_default_buttons {
display: flex;
margin: 60px auto 0;
width: fit-content;
.mx_AccessibleButton {
padding: 73px 8px 15px; /* top: 20px top padding + 40px icon + 13px margin */
width: 160px;
min-height: 132px;
margin: 20px;
position: relative;
display: inline-block;
border-radius: 8px;
vertical-align: top;
word-break: break-word;
box-sizing: border-box;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-20px;
color: #fff; /* on all themes */
background-color: $accent;
svg {
top: 20px;
left: 60px; /* (160px-40px)/2 */
width: 40px;
height: 40px;
position: absolute;
color: #fff; /* on all themes */
}
}
}
}