Update develop
This commit is contained in:
+66
-73
@@ -319,7 +319,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
}
|
||||
|
||||
.mx_Dialog_titleImage {
|
||||
vertical-align: middle;
|
||||
vertical-align: sub;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: -2px;
|
||||
@@ -588,27 +588,16 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
|
||||
// A context menu that largely fits the | [icon] [label] | format.
|
||||
.mx_IconizedContextMenu {
|
||||
// Put 20px of padding around the whole menu. We do this instead of a
|
||||
// simple `padding: 20px` rule so the horizontal rules added by the
|
||||
// optionLists is rendered correctly (full width).
|
||||
> * {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
min-width: 146px;
|
||||
|
||||
.mx_IconizedContextMenu_optionList {
|
||||
& > * {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
// the notFirst class is for cases where the optionList might be under a header of sorts.
|
||||
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
|
||||
margin-top: 12px;
|
||||
|
||||
// This is a bit of a hack when we could just use a simple border-top property,
|
||||
// however we have a (kinda) good reason for doing it this way: we need opacity.
|
||||
// To get the right color, we need an opacity modifier which means we have to work
|
||||
@@ -631,72 +620,76 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
// round the top corners of the top button for the hover effect to be bounded
|
||||
&:first-child .mx_AccessibleButton:first-child {
|
||||
border-radius: 4px 4px 0 0; // radius matches .mx_ContextualMenu
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 12px 0 0;
|
||||
// round the bottom corners of the bottom button for the hover effect to be bounded
|
||||
&:last-child .mx_AccessibleButton:last-child {
|
||||
border-radius: 0 0 4px 4px; // radius matches .mx_ContextualMenu
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
text-decoration: none;
|
||||
color: $primary-fg-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
.mx_AccessibleButton {
|
||||
// pad the inside of the button so that the hover background is padded too
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-decoration: none;
|
||||
color: $primary-fg-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
// Create a flexbox to more easily define the list items
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// Create a flexbox to more easily define the list items
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img, .mx_IconizedContextMenu_icon { // icons
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
max-width: 16px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $menu-selected-color;
|
||||
}
|
||||
|
||||
span:last-child { // labels
|
||||
padding-left: 14px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
img, .mx_IconizedContextMenu_icon { // icons
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
span.mx_IconizedContextMenu_label { // labels
|
||||
padding-left: 14px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
// Ellipsize any text overflow
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_IconizedContextMenu_compact {
|
||||
> * {
|
||||
padding-left: 11px;
|
||||
padding-right: 16px;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 13px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_optionList {
|
||||
&:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
|
||||
margin-top: 10px;
|
||||
|
||||
li:first-child {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.mx_IconizedContextMenu_optionList > * {
|
||||
padding: 8px 16px 8px 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin ProgressBarColour $colour {
|
||||
color: $colour;
|
||||
&::-moz-progress-bar {
|
||||
background-color: $colour;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
background-color: $colour;
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin ProgressBarBorderRadius $radius {
|
||||
border-radius: $radius;
|
||||
&::-moz-progress-bar {
|
||||
border-radius: $radius;
|
||||
}
|
||||
&::-webkit-progress-bar,
|
||||
&::-webkit-progress-value {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,6 +49,7 @@
|
||||
@import "./views/auth/_ServerTypeSelector.scss";
|
||||
@import "./views/auth/_Welcome.scss";
|
||||
@import "./views/avatars/_BaseAvatar.scss";
|
||||
@import "./views/avatars/_DecoratedRoomAvatar.scss";
|
||||
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
|
||||
@import "./views/context_menus/_MessageContextMenu.scss";
|
||||
@import "./views/context_menus/_RoomTileContextMenu.scss";
|
||||
|
||||
@@ -71,7 +71,8 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
|
||||
|
||||
.mx_LeftPanel2_breadcrumbsContainer {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,6 +86,8 @@ limitations under the License.
|
||||
|
||||
.mx_UserMenu_contextMenu_redRow {
|
||||
.mx_AccessibleButton {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
color: $warning-color !important; // !important to override styles from context menu
|
||||
}
|
||||
|
||||
@@ -95,6 +97,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_UserMenu_contextMenu_header {
|
||||
padding: 20px;
|
||||
|
||||
// Create a flexbox to organize the header a bit easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -18,16 +18,6 @@ $PassphraseStrengthHigh: $accent-color;
|
||||
$PassphraseStrengthMedium: $username-variant5-color;
|
||||
$PassphraseStrengthLow: $notice-primary-color;
|
||||
|
||||
@define-mixin ProgressBarColour $colour {
|
||||
color: $colour;
|
||||
&::-moz-progress-bar {
|
||||
background-color: $colour;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
background-color: $colour;
|
||||
}
|
||||
}
|
||||
|
||||
progress.mx_PassphraseField_progress {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
@@ -36,15 +26,7 @@ progress.mx_PassphraseField_progress {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
|
||||
border-radius: 2px;
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 2px;
|
||||
}
|
||||
&::-webkit-progress-bar,
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@mixin ProgressBarBorderRadius "2px";
|
||||
@mixin ProgressBarColour $PassphraseStrengthLow;
|
||||
&[value="2"], &[value="3"] {
|
||||
@mixin ProgressBarColour $PassphraseStrengthMedium;
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
|
||||
.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
|
||||
position: relative;
|
||||
|
||||
.mx_RoomTileIcon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mx_NotificationBadge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
@@ -15,20 +15,79 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_AccessSecretStorageDialog_titleWithIcon::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_secureBackupTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_securePhraseTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_keyStatus {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_passPhraseInput,
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyInput {
|
||||
.mx_AccessSecretStorageDialog_passPhraseInput {
|
||||
width: 300px;
|
||||
border: 1px solid $accent-color;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
|
||||
color: $input-valid-border-color;
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
background-color: $input-valid-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
|
||||
color: $input-invalid-border-color;
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
background-color: $input-invalid-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -48,6 +48,29 @@ limitations under the License.
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_titleWithIcon::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_secureBackupTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_securePhraseTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_primaryContainer {
|
||||
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
|
||||
padding-top: 20px;
|
||||
@@ -59,6 +82,36 @@ limitations under the License.
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
|
||||
margin-bottom: 16px;
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_optionTitle {
|
||||
color: $dialog-title-fg-color;
|
||||
font-weight: 600;
|
||||
font-size: $font-18px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_optionIcon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
background-color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_passPhraseContainer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -73,33 +126,42 @@ limitations under the License.
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyHeader {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyContainer {
|
||||
display: flex;
|
||||
width: 380px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKey {
|
||||
width: 262px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: $info-plinth-fg-color;
|
||||
background-color: $info-plinth-bg-color;
|
||||
margin-right: 12px;
|
||||
border-radius: 6px;
|
||||
word-spacing: 1em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
|
||||
flex: 1;
|
||||
width: 160px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_continueSpinner {
|
||||
margin-top: 33px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mx_CreateSecretStorageDialog_continueSpinner img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
@@ -14,12 +14,26 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_ProgressBar {
|
||||
height: 5px;
|
||||
border: 1px solid $progressbar-color;
|
||||
}
|
||||
progress.mx_ProgressBar {
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
|
||||
.mx_ProgressBar_fill {
|
||||
height: 100%;
|
||||
background-color: $progressbar-color;
|
||||
@mixin ProgressBarBorderRadius "10px";
|
||||
@mixin ProgressBarColour $accent-color;
|
||||
::-webkit-progress-value {
|
||||
transition: width 1s;
|
||||
}
|
||||
::-moz-progress-bar {
|
||||
transition: padding-bottom 1s;
|
||||
padding-bottom: var(--value);
|
||||
transform-origin: 0 0;
|
||||
transform: rotate(-90deg) translateX(-15px);
|
||||
padding-left: 15px;
|
||||
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,13 +25,14 @@ limitations under the License.
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
flex-grow: 1;
|
||||
|
||||
> span {
|
||||
> .mx_RadioButton_content {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
@@ -105,3 +106,12 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton_outlined {
|
||||
border: 1px solid $input-darker-bg-color;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_RadioButton_checked {
|
||||
border-color: $accent-color;
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@ limitations under the License.
|
||||
border-radius: 4px;
|
||||
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
|
||||
background-color: $menu-bg-color;
|
||||
z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
|
||||
z-index: 6000; // Higher than context menu so tooltips can be used everywhere
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
line-height: $font-14px;
|
||||
|
||||
@@ -51,3 +51,18 @@ limitations under the License.
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs2_Tooltip {
|
||||
margin-left: -42px;
|
||||
margin-top: -42px;
|
||||
|
||||
&.mx_Tooltip {
|
||||
background-color: $tagpanel-bg-color;
|
||||
color: $accent-fg-color;
|
||||
border: 0;
|
||||
|
||||
.mx_Tooltip_chevron {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,7 +102,7 @@ limitations under the License.
|
||||
|
||||
// Apply the width and margin to the badge so the container doesn't occupy dead space
|
||||
.mx_NotificationBadge {
|
||||
width: 16px;
|
||||
// Do not set a width so the badges get properly sized
|
||||
margin-left: 8px; // same as menu+aux buttons
|
||||
}
|
||||
}
|
||||
@@ -288,6 +288,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_hasMenuOpen,
|
||||
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within,
|
||||
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
visibility: visible;
|
||||
@@ -399,3 +400,7 @@ limitations under the License.
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_addRoomTooltip {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
@@ -23,27 +23,23 @@ limitations under the License.
|
||||
|
||||
// The tile is also a flexbox row itself
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.mx_RoomTile2_selected, &:hover, &.mx_RoomTile2_hasMenuOpen {
|
||||
&.mx_RoomTile2_selected,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.mx_RoomTile2_hasMenuOpen {
|
||||
background-color: $roomtile2-selected-bg-color;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_avatarContainer {
|
||||
.mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomTileIcon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile2_nameContainer {
|
||||
flex-grow: 1;
|
||||
max-width: calc(100% - 58px); // 32px avatar, 18px badge area, 8px margin on avatar
|
||||
min-width: 0; // allow flex to shrink it
|
||||
margin-right: 8px; // spacing to buttons/badges
|
||||
|
||||
// Create a new column layout flexbox for the name parts
|
||||
display: flex;
|
||||
@@ -81,31 +77,44 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
width: 18px;
|
||||
height: 32px;
|
||||
|
||||
// Create another flexbox row because it's super easy to position the badge at
|
||||
// the end this way.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.mx_RoomTile2_menuButton {
|
||||
margin-left: 4px; // spacing between buttons
|
||||
}
|
||||
|
||||
// The menu button is hidden by default
|
||||
// TODO: [Notifications] Use mx_RoomTile2_notificationsButton, similar to the following approach:
|
||||
// https://github.com/matrix-org/matrix-react-sdk/blob/2180a56074f3698fc0241c309a72ba6cad802d1c/res/css/views/rooms/_RoomSublist2.scss#L48-L76
|
||||
// You'll need to do the same down below on the &:hover selector for the tile.
|
||||
// See https://github.com/vector-im/riot-web/issues/13961.
|
||||
// ... also remove this 5 line TODO comment.
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
height: 16px;
|
||||
// don't set width so that it takes no space when there is no badge to show
|
||||
margin: auto 0; // vertically align
|
||||
position: relative; // fixes badge alignment in some scenarios
|
||||
|
||||
// Create a flexbox to make aligning dot badges easier
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 2px; // centering
|
||||
}
|
||||
|
||||
.mx_NotificationBadge_dot {
|
||||
// make the smaller dot occupy the same width for centering
|
||||
margin-left: 5px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// The context menu buttons are hidden by default
|
||||
.mx_RoomTile2_menuButton,
|
||||
.mx_RoomTile2_notificationsButton {
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
width: 20px;
|
||||
min-width: 20px; // yay flex
|
||||
height: 20px;
|
||||
margin: auto 0;
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
&::before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@@ -117,25 +126,29 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
// If the room has an overriden notification setting then we always show the notifications menu button
|
||||
.mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_menuButton::before {
|
||||
top: 8px;
|
||||
left: -1px; // this is off-center to align it with the badges
|
||||
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
|
||||
}
|
||||
|
||||
&:not(.mx_RoomTile2_minimized) {
|
||||
&:hover, &.mx_RoomTile2_hasMenuOpen {
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.mx_RoomTile2_hasMenuOpen {
|
||||
// Hide the badge container on hover because it'll be a menu button
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_notificationsButton,
|
||||
.mx_RoomTile2_menuButton {
|
||||
width: 18px;
|
||||
height: 32px;
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -145,19 +158,29 @@ limitations under the License.
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomTile2_avatarContainer {
|
||||
.mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We use these both in context menus and the room tiles
|
||||
.mx_RoomTile2_iconBell::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconBellDot::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell-notification.custom.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconBellCrossed::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell-crossed.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconBellMentions::before {
|
||||
mask-image: url('$(res)/img/feather-customised/bell-mentions.custom.svg');
|
||||
}
|
||||
.mx_RoomTile2_iconCheck::before {
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
}
|
||||
|
||||
.mx_RoomTile2_contextMenu {
|
||||
.mx_RoomTile2_contextMenu_redRow {
|
||||
.mx_AccessibleButton {
|
||||
@@ -169,6 +192,16 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile2_contextMenu_activeRow {
|
||||
&.mx_AccessibleButton, .mx_AccessibleButton {
|
||||
color: $accent-color !important; // !important to override styles from context menu
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu_icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
|
||||
@@ -193,6 +193,10 @@ limitations under the License.
|
||||
.mx_EventTile_content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
|
||||
border-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RadioButton {
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.31422 2.4647C8.07372 2.6004 7.98877 2.90537 8.12448 3.14587C8.26018 3.38637 8.56515 3.47132 8.80565 3.33562L8.31422 2.4647ZM18.9999 9.00016L18.4999 8.9999V9.00016H18.9999ZM18.4999 13.0002C18.4999 13.2763 18.7238 13.5002 18.9999 13.5002C19.2761 13.5002 19.4999 13.2763 19.4999 13.0002H18.4999ZM17 17.5004C17.2761 17.5004 17.5 17.2765 17.5 17.0004C17.5 16.7242 17.2761 16.5004 17 16.5004V17.5004ZM2 16.5004C1.72386 16.5004 1.5 16.7242 1.5 17.0004C1.5 17.2765 1.72386 17.5004 2 17.5004V16.5004ZM5 9.00036H5.5L5.5 8.99973L5 9.00036ZM6.22429 6.00974C6.35096 5.76436 6.25474 5.46276 6.00937 5.33608C5.764 5.2094 5.46239 5.30562 5.33571 5.551L6.22429 6.00974ZM14.1625 21.2509C14.301 21.012 14.2197 20.7061 13.9808 20.5675C13.742 20.4289 13.436 20.5103 13.2975 20.7491L14.1625 21.2509ZM10.7025 20.7491C10.5639 20.5103 10.2579 20.4289 10.0191 20.5675C9.78021 20.7061 9.6989 21.012 9.83746 21.2509L10.7025 20.7491ZM8.80565 3.33562C10.8187 2.19975 13.2834 2.21831 15.2791 3.38436L15.7836 2.52094C13.4809 1.17549 10.6369 1.15408 8.31422 2.4647L8.80565 3.33562ZM15.2791 3.38436C17.2748 4.55042 18.5011 6.68854 18.4999 8.9999L19.4999 9.00041C19.5013 6.33346 18.0863 3.86639 15.7836 2.52094L15.2791 3.38436ZM18.4999 9.00016V13.0002H19.4999V9.00016H18.4999ZM17 16.5004H2V17.5004H17V16.5004ZM2 17.5004C3.933 17.5004 5.5 15.9334 5.5 14.0004H4.5C4.5 15.3811 3.38071 16.5004 2 16.5004V17.5004ZM5.5 14.0004V9.00036H4.5V14.0004H5.5ZM5.5 8.99973C5.49869 7.95947 5.74707 6.93408 6.22429 6.00974L5.33571 5.551C4.78509 6.61755 4.49849 7.80069 4.5 9.00099L5.5 8.99973ZM13.2975 20.7491C13.0291 21.2117 12.5348 21.4965 12 21.4965V22.4965C12.8913 22.4965 13.7152 22.0219 14.1625 21.2509L13.2975 20.7491ZM12 21.4965C11.4652 21.4965 10.9708 21.2117 10.7025 20.7491L9.83746 21.2509C10.2847 22.0219 11.1086 22.4965 12 22.4965V21.4965Z" fill="#2E2F32"/>
|
||||
<path d="M1 1L23 23" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.62998 3.57476C7.55241 1.6636 9.6476 0.644608 11.692 1.13263C13.7342 1.62012 15.1666 3.47754 15.1667 5.60305V5.60308V6.01222C15.1667 6.95553 14.4163 7.73965 13.4668 7.73965C12.9349 7.73965 12.4655 7.49363 12.1555 7.11141C11.7768 7.49925 11.2519 7.74098 10.6668 7.74098C9.49647 7.74098 8.56689 6.77368 8.56689 5.60441C8.56689 4.43514 9.49647 3.46784 10.6668 3.46784C11.8348 3.46784 12.7629 4.43111 12.7668 5.59709L12.7668 5.60308V6.01222C12.7668 6.4247 13.0908 6.73965 13.4668 6.73965C13.8428 6.73965 14.1667 6.4247 14.1667 6.01222V5.60311V5.60308C14.1666 3.92595 13.0379 2.48201 11.4598 2.1053C9.8839 1.72911 8.25387 2.51086 7.53057 4.00944C6.80579 5.5111 7.19017 7.3233 8.44894 8.38151C9.70415 9.43672 11.5011 9.46808 12.7905 8.45807C13.0079 8.28778 13.3221 8.32596 13.4924 8.54335C13.6627 8.76074 13.6245 9.07501 13.4071 9.24529C11.745 10.5473 9.42229 10.5062 7.80545 9.14696C6.19216 7.79072 5.70903 5.48285 6.62998 3.57476ZM10.6668 4.46784C10.07 4.46784 9.56689 4.96597 9.56689 5.60441C9.56689 6.24285 10.07 6.74098 10.6668 6.74098C11.2637 6.74098 11.7668 6.24285 11.7668 5.60441C11.7668 4.96597 11.2637 4.46784 10.6668 4.46784ZM5.48951 2.14C5.61741 2.38474 5.5227 2.68682 5.27796 2.81472C3.92878 3.51981 3 4.95881 3 6.62506V10.0347C3 10.6137 2.8091 11.1505 2.48631 11.5805H13.8333C14.1095 11.5805 14.3333 11.8043 14.3333 12.0805C14.3333 12.3566 14.1095 12.5805 13.8333 12.5805H0.5C0.223858 12.5805 0 12.3566 0 12.0805C0 11.8043 0.223858 11.5805 0.5 11.5805C1.31782 11.5805 2 10.8991 2 10.0347V6.62506C2 4.58053 3.14094 2.80322 4.81479 1.92845C5.05953 1.80055 5.36161 1.89527 5.48951 2.14ZM5.76678 14.3741C6.00698 14.2379 6.31214 14.3222 6.44836 14.5624C6.59999 14.8298 6.8752 14.9886 7.16676 14.9886C7.45832 14.9886 7.73354 14.8298 7.88516 14.5624C8.02139 14.3222 8.32654 14.2379 8.56674 14.3741C8.80695 14.5104 8.89124 14.8155 8.75502 15.0557C8.42959 15.6296 7.82596 15.9886 7.16676 15.9886C6.50756 15.9886 5.90393 15.6296 5.5785 15.0557C5.44228 14.8155 5.52657 14.5104 5.76678 14.3741Z" fill="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.73 21C13.3722 21.6168 12.7131 21.9965 12 21.9965C11.287 21.9965 10.6278 21.6168 10.27 21" stroke="#2E2F32" stroke-linecap="round"/>
|
||||
<path d="M11.9999 2.00024C8.13388 2.00024 4.99988 5.13425 4.99988 9.00024V14.0002C4.99988 15.6571 3.65673 17.0002 1.99988 17.0002H21.9999C20.343 17.0002 18.9999 15.6571 18.9999 14.0002V12.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="18.75" cy="5.25" r="4.75" stroke="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 563 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22 17.5C22.2761 17.5 22.5 17.2761 22.5 17C22.5 16.7239 22.2761 16.5 22 16.5V17.5ZM2 16.5C1.72386 16.5 1.5 16.7239 1.5 17C1.5 17.2761 1.72386 17.5 2 17.5V16.5ZM5 9H4.5H5ZM19 9H19.5H19ZM14.1625 21.2509C14.3011 21.012 14.2197 20.7061 13.9809 20.5675C13.742 20.4289 13.4361 20.5103 13.2975 20.7491L14.1625 21.2509ZM10.7025 20.7491C10.5639 20.5103 10.258 20.4289 10.0191 20.5675C9.78025 20.7061 9.69894 21.012 9.8375 21.2509L10.7025 20.7491ZM22 16.5H2V17.5H22V16.5ZM2 17.5C3.933 17.5 5.5 15.933 5.5 14H4.5C4.5 15.3807 3.38071 16.5 2 16.5V17.5ZM5.5 14V9H4.5V14H5.5ZM5.5 9C5.5 5.41015 8.41015 2.5 12 2.5V1.5C7.85786 1.5 4.5 4.85786 4.5 9H5.5ZM12 2.5C15.5899 2.5 18.5 5.41015 18.5 9H19.5C19.5 4.85786 16.1421 1.5 12 1.5V2.5ZM18.5 9V14H19.5V9H18.5ZM18.5 14C18.5 15.933 20.067 17.5 22 17.5V16.5C20.6193 16.5 19.5 15.3807 19.5 14H18.5ZM13.2975 20.7491C13.0292 21.2117 12.5348 21.4965 12 21.4965V22.4965C12.8913 22.4965 13.7153 22.0219 14.1625 21.2509L13.2975 20.7491ZM12 21.4965C11.4652 21.4965 10.9708 21.2117 10.7025 20.7491L9.8375 21.2509C10.2847 22.0219 11.1087 22.4965 12 22.4965V21.4965Z" fill="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,11 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="2" width="22" height="21">
|
||||
<rect x="1" y="2" width="21.5" height="5" fill="white"/>
|
||||
<rect x="1" y="17.7" width="21.5" height="5" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path d="M3.16626 12.4014C3.16626 7.64675 6.99526 3.81775 11.75 3.81775C13.0964 3.81775 14.4429 4.15437 15.6631 4.74345H14.9899C14.5691 4.74345 14.2325 5.08006 14.2325 5.50083C14.2325 5.9216 14.5691 6.25822 14.9899 6.25822H17.3041C17.809 6.25822 18.1877 5.83745 18.1877 5.3746V3.06037C18.1877 2.6396 17.8511 2.30298 17.4303 2.30298C17.0096 2.30298 16.673 2.6396 16.673 3.06037V3.60737C16.6309 3.56529 16.5888 3.5653 16.5467 3.52322C15.074 2.72376 13.433 2.30298 11.75 2.30298C6.1958 2.30298 1.65149 6.84729 1.65149 12.4014C1.65149 14.0845 2.07226 15.7676 2.87172 17.2403C2.99795 17.4928 3.25041 17.619 3.54495 17.619C3.67118 17.619 3.79741 17.5769 3.92364 17.5348C4.30233 17.3245 4.42857 16.8616 4.21819 16.525C3.50288 15.2627 3.16626 13.8321 3.16626 12.4014Z" fill="#2E2F32"/>
|
||||
<path d="M20.6281 7.56263C20.4177 7.18394 19.9548 7.05771 19.6182 7.2681C19.2395 7.47848 19.1133 7.94133 19.3237 8.27794C19.9969 9.54025 20.3756 10.9288 20.3756 12.4015C20.3756 17.1562 16.5045 20.9852 11.7919 20.9852C10.4454 20.9852 9.09897 20.6486 7.87874 20.0595H8.55198C8.97275 20.0595 9.30937 19.7229 9.30937 19.3021C9.30937 18.8813 8.97275 18.5447 8.55198 18.5447H6.23774C5.73282 18.5447 5.35413 18.9655 5.35413 19.4283V21.7426C5.35413 22.1633 5.69075 22.4999 6.11152 22.4999C6.53229 22.4999 6.8689 22.1633 6.8689 21.7426V21.1956C6.91098 21.2376 6.95306 21.2376 6.99514 21.2797C8.42575 22.0792 10.0667 22.4999 11.7498 22.4999C17.304 22.4999 21.8483 17.9556 21.8483 12.4015C21.8483 10.7184 21.4275 9.03532 20.6281 7.56263Z" fill="#2E2F32"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 9C1.89543 9 1 9.89543 1 11V14C1 15.1046 1.89543 16 3 16H21C22.1046 16 23 15.1046 23 14V11C23 9.89543 22.1046 9 21 9H3ZM5.25 10.5C4.83579 10.5 4.5 10.8358 4.5 11.25C4.5 11.6642 4.83579 12 5.25 12H7.75C8.16421 12 8.5 11.6642 8.5 11.25C8.5 10.8358 8.16421 10.5 7.75 10.5H5.25ZM9.5 11.25C9.5 10.8358 9.83579 10.5 10.25 10.5H10.75C11.1642 10.5 11.5 10.8358 11.5 11.25C11.5 11.6642 11.1642 12 10.75 12H10.25C9.83579 12 9.5 11.6642 9.5 11.25ZM13.25 10.5C12.8358 10.5 12.5 10.8358 12.5 11.25C12.5 11.6642 12.8358 12 13.25 12H15.75C16.1642 12 16.5 11.6642 16.5 11.25C16.5 10.8358 16.1642 10.5 15.75 10.5H13.25ZM17.5 11.25C17.5 10.8358 17.8358 10.5 18.25 10.5H18.75C19.1642 10.5 19.5 10.8358 19.5 11.25C19.5 11.6642 19.1642 12 18.75 12H18.25C17.8358 12 17.5 11.6642 17.5 11.25ZM5.25 13C4.83579 13 4.5 13.3358 4.5 13.75C4.5 14.1642 4.83579 14.5 5.25 14.5H5.75C6.16421 14.5 6.5 14.1642 6.5 13.75C6.5 13.3358 6.16421 13 5.75 13H5.25ZM7.5 13.75C7.5 13.3358 7.83579 13 8.25 13H10.75C11.1642 13 11.5 13.3358 11.5 13.75C11.5 14.1642 11.1642 14.5 10.75 14.5H8.25C7.83579 14.5 7.5 14.1642 7.5 13.75ZM13.25 13C12.8358 13 12.5 13.3358 12.5 13.75C12.5 14.1642 12.8358 14.5 13.25 14.5H13.75C14.1642 14.5 14.5 14.1642 14.5 13.75C14.5 13.3358 14.1642 13 13.75 13H13.25Z" fill="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,11 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="2" width="22" height="21">
|
||||
<rect x="1" y="2" width="21.5" height="5" fill="white"/>
|
||||
<rect x="1" y="17.7" width="21.5" height="5" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path d="M3.16626 12.4014C3.16626 7.64675 6.99526 3.81775 11.75 3.81775C13.0964 3.81775 14.4429 4.15437 15.6631 4.74345H14.9899C14.5691 4.74345 14.2325 5.08006 14.2325 5.50083C14.2325 5.9216 14.5691 6.25822 14.9899 6.25822H17.3041C17.809 6.25822 18.1877 5.83745 18.1877 5.3746V3.06037C18.1877 2.6396 17.8511 2.30298 17.4303 2.30298C17.0096 2.30298 16.673 2.6396 16.673 3.06037V3.60737C16.6309 3.56529 16.5888 3.5653 16.5467 3.52322C15.074 2.72376 13.433 2.30298 11.75 2.30298C6.1958 2.30298 1.65149 6.84729 1.65149 12.4014C1.65149 14.0845 2.07226 15.7676 2.87172 17.2403C2.99795 17.4928 3.25041 17.619 3.54495 17.619C3.67118 17.619 3.79741 17.5769 3.92364 17.5348C4.30233 17.3245 4.42857 16.8616 4.21819 16.525C3.50288 15.2627 3.16626 13.8321 3.16626 12.4014Z" fill="#2E2F32"/>
|
||||
<path d="M20.6281 7.56263C20.4177 7.18394 19.9548 7.05771 19.6182 7.2681C19.2395 7.47848 19.1133 7.94133 19.3237 8.27794C19.9969 9.54025 20.3756 10.9288 20.3756 12.4015C20.3756 17.1562 16.5045 20.9852 11.7919 20.9852C10.4454 20.9852 9.09897 20.6486 7.87874 20.0595H8.55198C8.97275 20.0595 9.30937 19.7229 9.30937 19.3021C9.30937 18.8813 8.97275 18.5447 8.55198 18.5447H6.23774C5.73282 18.5447 5.35413 18.9655 5.35413 19.4283V21.7426C5.35413 22.1633 5.69075 22.4999 6.11152 22.4999C6.53229 22.4999 6.8689 22.1633 6.8689 21.7426V21.1956C6.91098 21.2376 6.95306 21.2376 6.99514 21.2797C8.42575 22.0792 10.0667 22.4999 11.7498 22.4999C17.304 22.4999 21.8483 17.9556 21.8483 12.4015C21.8483 10.7184 21.4275 9.03532 20.6281 7.56263Z" fill="#2E2F32"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 11C1 9.89543 1.89543 9 3 9H21C22.1046 9 23 9.89543 23 11V14C23 15.1046 22.1046 16 21 16H3C1.89543 16 1 15.1046 1 14V11ZM6 12.5C6 13.3284 5.32843 14 4.5 14C3.67157 14 3 13.3284 3 12.5C3 11.6716 3.67157 11 4.5 11C5.32843 11 6 11.6716 6 12.5ZM9.5 14C10.3284 14 11 13.3284 11 12.5C11 11.6716 10.3284 11 9.5 11C8.67157 11 8 11.6716 8 12.5C8 13.3284 8.67157 14 9.5 14ZM16 12.5C16 13.3284 15.3284 14 14.5 14C13.6716 14 13 13.3284 13 12.5C13 11.6716 13.6716 11 14.5 11C15.3284 11 16 11.6716 16 12.5ZM19.5 14C20.3284 14 21 13.3284 21 12.5C21 11.6716 20.3284 11 19.5 11C18.6716 11 18 11.6716 18 12.5C18 13.3284 18.6716 14 19.5 14Z" fill="#2E2F32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
Reference in New Issue
Block a user