Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

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

Merged
merged 4 commits into from
May 9, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f683e69
Use CSS custom property: --timeline-image-border-radius
luixxiul Apr 8, 2023
d58ba73
Rename the property
luixxiul May 4, 2023
b3afd95
Merge branch 'develop' into MBody-border-radius
luixxiul May 5, 2023
c0ee771
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
luixxiul May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion res/css/_common.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */

$selected-message-border-width: 4px;

$timeline-image-border-radius: 8px;
:root {
font-size: 10px;

Expand All @@ -37,6 +36,7 @@ $timeline-image-border-radius: 8px;
--transition-standard: 0.3s;
--buttons-dialog-gap-row: $spacing-8;
--buttons-dialog-gap-column: $spacing-8;
--MBody-border-radius: 8px;
}

@media only percy {
Expand Down
2 changes: 1 addition & 1 deletion res/css/components/views/messages/_MBeaconBody.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ limitations under the License.
max-width: 325px;
width: 100%;

border-radius: $timeline-image-border-radius;
border-radius: var(--MBody-border-radius);
overflow: hidden;
}

Expand Down
6 changes: 2 additions & 4 deletions res/css/views/messages/_MImageBody.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

$timeline-image-border-radius: 8px;

.mx_MImageBody_banner {
position: absolute;
bottom: $spacing-4;
left: $spacing-4;
padding: $spacing-4;
border-radius: $timeline-image-border-radius;
border-radius: var(--MBody-border-radius);
font-size: $font-15px;
user-select: none; /* prevent banner text from being selected */
pointer-events: none; /* let the cursor go through to the media underneath */
Expand Down Expand Up @@ -55,7 +53,7 @@ $timeline-image-border-radius: 8px;
}

.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 */
overflow: hidden;
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/messages/_MLocationBody.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ limitations under the License.
height: 300px;
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;
}
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/messages/_MVideoBody.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ span.mx_MVideoBody {
overflow: hidden;

.mx_MVideoBody_container {
border-radius: $timeline-image-border-radius;
border-radius: var(--MBody-border-radius);
overflow: hidden;

video {
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/rooms/_EventBubbleTile.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ limitations under the License.
/* we put the timestamps for media (other than stickers) atop the media */
&.mx_EventTile_image {
.mx_MessageTimestamp {
border-radius: $timeline-image-border-radius;
border-radius: var(--MBody-border-radius);
/* Hardcoded colours because it's the same on all themes */
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
Expand Down