imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace $timeline-image-border-radius with a CSS custom property (#10792)

Browse source 
* Use CSS custom property: --timeline-image-border-radius

Remove the same variable from _MImageBody.pcss

* Rename the property

The property is neither limited to a timeline nor image, but applied to M.*?Body components as well, such as MLocationBody and MVideoBody.
This commit is contained in:
Suguru Hirahara 2023-05-09 21:06:19 +00:00 • committed by GitHub
parent c4f59d4d56
commit dc8ea8dc27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 7 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.pcss
View file

@ -27,7 +27,6 @@ $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
$selected-message-border-width: 4px; $selected-message-border-width: 4px;
$timeline-image-border-radius: 8px;
:root { :root {
font-size: 10px; font-size: 10px;
@ -37,6 +36,7 @@ $timeline-image-border-radius: 8px;
--transition-standard: 0.3s; --transition-standard: 0.3s;
--buttons-dialog-gap-row: $spacing-8; --buttons-dialog-gap-row: $spacing-8;
--buttons-dialog-gap-column: $spacing-8; --buttons-dialog-gap-column: $spacing-8;
--MBody-border-radius: 8px;
} }
@media only percy { @media only percy {

2
res/css/components/views/messages/_MBeaconBody.pcss
View file

@ -20,7 +20,7 @@ limitations under the License.
max-width: 325px; max-width: 325px;
width: 100%; width: 100%;
border-radius: $timeline-image-border-radius; border-radius: var(--MBody-border-radius);
overflow: hidden; overflow: hidden;
} }

6
res/css/views/messages/_MImageBody.pcss
View file

@ -15,14 +15,12 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$timeline-image-border-radius: 8px;
.mx_MImageBody_banner { .mx_MImageBody_banner {
position: absolute; position: absolute;
bottom: $spacing-4; bottom: $spacing-4;
left: $spacing-4; left: $spacing-4;
padding: $spacing-4; padding: $spacing-4;
border-radius: $timeline-image-border-radius; border-radius: var(--MBody-border-radius);
font-size: $font-15px; font-size: $font-15px;
user-select: none; /* prevent banner text from being selected */ user-select: none; /* prevent banner text from being selected */
pointer-events: none; /* let the cursor go through to the media underneath */ pointer-events: none; /* let the cursor go through to the media underneath */
@ -55,7 +53,7 @@ $timeline-image-border-radius: 8px;
} }
.mx_MImageBody_thumbnail_container { .mx_MImageBody_thumbnail_container {
border-radius: $timeline-image-border-radius; border-radius: var(--MBody-border-radius);
/* Necessary for the border radius to apply correctly to the placeholder */ /* Necessary for the border radius to apply correctly to the placeholder */
overflow: hidden; overflow: hidden;

2
res/css/views/messages/_MLocationBody.pcss
View file

@ -23,7 +23,7 @@ limitations under the License.
height: 300px; height: 300px;
z-index: 0; /* keeps the entire map under the message action bar */ z-index: 0; /* keeps the entire map under the message action bar */
border-radius: $timeline-image-border-radius; border-radius: var(--MBody-border-radius);
cursor: pointer; cursor: pointer;
} }
} }

2
res/css/views/messages/_MVideoBody.pcss
View file

@ -18,7 +18,7 @@ span.mx_MVideoBody {
overflow: hidden; overflow: hidden;
.mx_MVideoBody_container { .mx_MVideoBody_container {
border-radius: $timeline-image-border-radius; border-radius: var(--MBody-border-radius);
overflow: hidden; overflow: hidden;
video { video {

2
res/css/views/rooms/_EventBubbleTile.pcss
View file

@ -290,7 +290,7 @@ limitations under the License.
/* we put the timestamps for media (other than stickers) atop the media */ /* we put the timestamps for media (other than stickers) atop the media */
&.mx_EventTile_image { &.mx_EventTile_image {
.mx_MessageTimestamp { .mx_MessageTimestamp {
border-radius: $timeline-image-border-radius; border-radius: var(--MBody-border-radius);
/* Hardcoded colours because it's the same on all themes */ /* Hardcoded colours because it's the same on all themes */
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
color: #ffffff; color: #ffffff;