mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 07:09:48 +03:00
036cf865d0
no issue The submit button was not reachable on mobile devices. This commit adds responsive styles for the majority of mobile devices.
170 lines
3.0 KiB
CSS
170 lines
3.0 KiB
CSS
.fullscreen-explore-container {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 10000;
|
|
height: 100vh;
|
|
background: linear-gradient(180deg, var(--white) 0%, #E1E1E1 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.explore-close {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.explore-close a {
|
|
color: var(--middarkgrey);
|
|
}
|
|
|
|
.explore-close a svg {
|
|
stroke: var(--middarkgrey);
|
|
width: 18px;
|
|
height: auto;
|
|
}
|
|
|
|
.explore-close a svg path {
|
|
stroke-width: 1px;
|
|
}
|
|
|
|
.explore-close a:hover svg {
|
|
stroke: var(--darkgrey);
|
|
}
|
|
|
|
.explore-content {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
min-height: 100%;
|
|
padding: 8vmin 2vmin 4vmin;
|
|
}
|
|
|
|
.explore-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.explore-header h1 {
|
|
margin: 1.6rem 0 0;
|
|
font-size: 3.6rem;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
letter-spacing: -.03em;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.explore-api {
|
|
margin-bottom: 50px;
|
|
color: rgba(0, 0, 0, 0.52);
|
|
font-size: 2.3rem;
|
|
font-weight: 400;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.explore-permissions {
|
|
background: var(--white);
|
|
padding: 3rem 3.5rem;
|
|
max-width: 457px;
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.explore-permissions svg path {
|
|
stroke: #86C600;
|
|
}
|
|
|
|
.explore-permissions > div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.explore-permissions p {
|
|
color: rgba(0, 0, 0, 0.66);
|
|
margin: 0;
|
|
font-size: 1.9rem;
|
|
font-weight: 400;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.32;
|
|
}
|
|
|
|
.explore-permissions div:not(:last-of-type) {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.explore-permissions > div span {
|
|
padding-right: 18px;
|
|
}
|
|
|
|
.explore button {
|
|
margin-top: 4vmin;
|
|
max-width: 457px;
|
|
width: 100%;
|
|
height: 50px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.explore button span {
|
|
font-size: 1.7rem;
|
|
font-weight: 500;
|
|
color: var(--white);
|
|
}
|
|
|
|
.explore button svg {
|
|
fill: var(--white);
|
|
margin-left: 0.1em;
|
|
height: 14px;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.explore-content {
|
|
padding: 2vmin;
|
|
}
|
|
.explore-header {
|
|
margin-top: 10vmin;
|
|
}
|
|
.explore-header svg {
|
|
width: 7rem;
|
|
}
|
|
.explore-header h1 {
|
|
font-size: 2.8rem;
|
|
}
|
|
.explore-api {
|
|
font-size: 1.8rem;
|
|
}
|
|
.explore-permissions {
|
|
padding: 2rem 2.5rem;
|
|
}
|
|
.explore-permissions p {
|
|
font-size: 1.6rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.explore-header h1 {
|
|
font-size: 2.4rem;
|
|
}
|
|
.explore-api {
|
|
font-size: 1.6rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
.explore-permissions div:not(:last-of-type) {
|
|
margin-bottom: 2rem;
|
|
}
|
|
.explore-permissions > div span {
|
|
padding-right: 12px;
|
|
}
|
|
.explore-permissions > div span svg {
|
|
width: 1.8rem;
|
|
}
|
|
}
|