linkding/bookmarks/styles/base.scss
Daniel Henning 353ba433f0
Prevent zoom-in after focusing an input on small viewports on iOS devices (#440)
* base.scss: Prevent zoom-in on focusing inputs on small viewports

Adding a media query which sets the font-size for `.form-input` inputs
to 1rem. This aims to prevent the zoom-in on small viewports on iOS
devics which automatically zoom-in a website if the font-size in a
focused input is smaller than 16px.

* Update bookmarks/styles/base.scss

---------

Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@googlemail.com>
2023-05-18 09:24:55 +02:00

113 lines
1.9 KiB
SCSS

body {
margin: 20px 10px;
@media (min-width: $size-sm) {
// High horizontal padding accounts for checkboxes that show up in bulk edit mode
margin: 20px 24px;
}
}
header {
margin-bottom: 40px;
}
header .toasts {
margin-bottom: 20px;
.toast {
margin-bottom: 0.4rem;
}
.toast a.btn-clear:visited {
color: currentColor;
}
}
.navbar {
.navbar-brand {
display: flex;
align-items: center;
.logo {
width: 28px;
height: 28px;
}
h1 {
text-transform: uppercase;
display: inline-block;
margin: 0 0 0 8px;
}
}
.dropdown-toggle {
}
}
/* Overrides */
// Reduce heading sizes
h1 {
font-size: inherit;
}
h2 {
font-size: .85rem;
color: $gray-color-dark;
}
// Fix up visited styles
a:visited {
color: $link-color;
}
a:visited:hover {
color: $link-color-dark;
}
.btn-link:visited:not(.btn-primary) {
color: $link-color;
}
.btn-link:visited:not(.btn-primary):hover {
color: $link-color-dark;
}
// Increase spacing between columns
.container > .columns > .column:not(:first-child) {
padding-left: 2rem;
}
// Remove left padding from first pagination link
.pagination .page-item:first-child a {
padding-left: 0;
}
// Override border color for tab block
.tab-block {
border-bottom: solid 1px $border-color;
}
// Form auto-complete menu
.form-autocomplete .menu {
.menu-item.selected > a, .menu-item > a:hover {
background: $secondary-color;
color: $primary-color;
}
.group-item, .group-item:hover {
color: $gray-color;
text-transform: uppercase;
background: none;
font-size: 0.6rem;
font-weight: bold;
}
}
// Increase input font size on small viewports to prevent zooming on focus the input
// on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max
// viewport size
@media screen and (max-width: 430px) {
.form-input {
font-size: 16px;
}
}