mirror of
https://codeberg.org/rimu/pyfedi
synced 2025-01-23 19:36:56 -08:00
Improve voting buttons for mobile
This commit is contained in:
parent
8c9f91467b
commit
e0a45759e8
2 changed files with 18 additions and 4 deletions
|
@ -920,6 +920,8 @@ fieldset legend {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||||
|
min-width: 44px;
|
||||||
|
min-height: 44px;
|
||||||
}
|
}
|
||||||
.voting_buttons_new .upvote_button.digits_4, .voting_buttons_new .downvote_button.digits_4 {
|
.voting_buttons_new .upvote_button.digits_4, .voting_buttons_new .downvote_button.digits_4 {
|
||||||
width: 68px;
|
width: 68px;
|
||||||
|
@ -987,7 +989,7 @@ fieldset legend {
|
||||||
.voting_buttons {
|
.voting_buttons {
|
||||||
float: right;
|
float: right;
|
||||||
display: block;
|
display: block;
|
||||||
width: 55px;
|
min-width: 54px;
|
||||||
padding: 0 0 5px 5px;
|
padding: 0 0 5px 5px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -1002,9 +1004,13 @@ fieldset legend {
|
||||||
}
|
}
|
||||||
.voting_buttons .upvote_button, .voting_buttons .downvote_button {
|
.voting_buttons .upvote_button, .voting_buttons .downvote_button {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 3px;
|
padding: 0 3px;
|
||||||
|
min-height: 44px;
|
||||||
|
min-width: 44px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
.voting_buttons .upvote_button.digits_4, .voting_buttons .downvote_button.digits_4 {
|
.voting_buttons .upvote_button.digits_4, .voting_buttons .downvote_button.digits_4 {
|
||||||
width: 68px;
|
width: 68px;
|
||||||
|
|
|
@ -5,6 +5,8 @@ nav, etc which are used site-wide */
|
||||||
@import "scss/typography";
|
@import "scss/typography";
|
||||||
@import "scss/controls";
|
@import "scss/controls";
|
||||||
|
|
||||||
|
$min-touch-target: 44px;
|
||||||
|
|
||||||
html {
|
html {
|
||||||
@include breakpoint(phablet) {
|
@include breakpoint(phablet) {
|
||||||
scroll-padding-top: 80px;
|
scroll-padding-top: 80px;
|
||||||
|
@ -553,6 +555,8 @@ html {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
|
color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
|
||||||
|
min-width: $min-touch-target;
|
||||||
|
min-height: $min-touch-target;
|
||||||
|
|
||||||
&.digits_4 {
|
&.digits_4 {
|
||||||
width: 68px;
|
width: 68px;
|
||||||
|
@ -625,7 +629,7 @@ html {
|
||||||
.voting_buttons {
|
.voting_buttons {
|
||||||
float: right;
|
float: right;
|
||||||
display: block;
|
display: block;
|
||||||
width: 55px;
|
min-width: $min-touch-target + 10;
|
||||||
padding: 0 0 5px 5px;
|
padding: 0 0 5px 5px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -640,9 +644,13 @@ html {
|
||||||
|
|
||||||
.upvote_button, .downvote_button {
|
.upvote_button, .downvote_button {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 3px;
|
padding: 0 3px;
|
||||||
|
min-height: $min-touch-target;
|
||||||
|
min-width: $min-touch-target;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
&.digits_4 {
|
&.digits_4 {
|
||||||
width: 68px;
|
width: 68px;
|
||||||
|
|
Loading…
Add table
Reference in a new issue