OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #6372 from SimonBrandner/feature/bigger-image-view-buttons 

Make the Image View buttons easier to hit
pull/21833/head
Germain 2021-07-14 08:55:08 +01:00 committed by GitHub
parent de4a29cd3c 6a285bed5a
commit 2a66269383
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
res/css/views/elements/_ImageView.scss
View File

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
$button-size: 32px;
$icon-size: 22px;
$button-gap: 24px;
.mx_ImageView { .mx_ImageView {
display: flex; display: flex;
width: 100%; width: 100%;
@ -66,16 +70,17 @@ limitations under the License.
pointer-events: initial; pointer-events: initial;
display: flex; display: flex;
align-items: center; align-items: center;
gap: calc($button-gap - ($button-size - $icon-size));
} }
.mx_ImageView_button { .mx_ImageView_button {
margin-left: 24px; padding: calc(($button-size - $icon-size) / 2);
display: block; display: block;
&::before { &::before {
content: ''; content: '';
height: 22px; height: $icon-size;
width: 22px; width: $icon-size;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
@ -109,11 +114,12 @@ limitations under the License.
} }
.mx_ImageView_button_close { .mx_ImageView_button_close {
padding: calc($button-size - $button-size);
border-radius: 100%; border-radius: 100%;
background: #21262c; // same on all themes background: #21262c; // same on all themes
&::before { &::before {
width: 32px; width: $button-size;
height: 32px; height: $button-size;
mask-image: url('$(res)/img/image-view/close.svg'); mask-image: url('$(res)/img/image-view/close.svg');
mask-size: 40%; mask-size: 40%;
} }