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

Improve visibility of font size chooser (#6988)

Browse source 
* Improve visibility of font size chooser

* Move slider dot sizes into variables

* Use a standard font size instead of percentage in Slider

* Use shorthand for padding in FontScalingPanel

* Change Slider text pos to px to be consistent when font changes

* Cleaner dot size for Slider selection
This commit is contained in:
Andy Balaam 2021-10-20 13:41:27 +01:00 • committed by GitHub
parent 8b6d5d59c7
commit 96bd052ecf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

3
res/css/_common.scss
View file

@ -27,6 +27,9 @@ $EventTile_e2e_state_indicator_width: 4px;
$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
$slider-dot-size: 1em;
$slider-selection-dot-size: 2.4em;
:root {
font-size: 10px;

17
res/css/views/elements/_Slider.scss
View file

@ -54,22 +54,31 @@ limitations under the License.
.mx_Slider_selectionDot {
position: absolute;
width: 1.1em;
height: 1.1em;
width: $slider-selection-dot-size;
height: $slider-selection-dot-size;
background-color: $slider-selection-color;
border-radius: 50%;
box-shadow: 0 0 6px lightgrey;
z-index: 10;
}
.mx_Slider_selectionText {
color: $muted-fg-color;
font-size: $font-14px;
position: relative;
text-align: center;
top: 30px;
width: 100%;
}
.mx_Slider_selection > hr {
margin: 0;
border: 0.2em solid $slider-selection-color;
}
.mx_Slider_dot {
height: 1em;
width: 1em;
height: $slider-dot-size;
width: $slider-dot-size;
border-radius: 50%;
background-color: $slider-background-color;
z-index: 0;

2
res/css/views/settings/_FontScalingPanel.scss
View file

@ -34,7 +34,7 @@ limitations under the License.
display: flex;
flex-direction: row;
align-items: center;
padding: 15px;
padding: 15px 15px 35px;
background: rgba($appearance-tab-border-color, 0.2);
border-radius: 10px;
font-size: 10px;