diff --git a/ghost/admin/app/styles/layouts/apps.css b/ghost/admin/app/styles/layouts/apps.css index aa00f8dfaf..923d193073 100644 --- a/ghost/admin/app/styles/layouts/apps.css +++ b/ghost/admin/app/styles/layouts/apps.css @@ -61,6 +61,13 @@ transition: background 0.3s ease; } +@media (max-width: 500px) { + .apps-card-app { + min-height: 75px; + height: auto; + } +} + .apps-grid-cell:first-child .apps-card-app { border-top: none; } @@ -70,6 +77,12 @@ align-items: center; } +@media (max-width: 500px) { + .apps-card-left { + flex-basis: 70%; + } +} + .apps-card-right { display: flex; align-items: center; @@ -118,6 +131,7 @@ } @media (max-width: 500px) { .apps-card-meta { + flex-basis: 70%; padding-right: 20px; } } @@ -133,6 +147,7 @@ } @media (max-width: 500px) { .apps-card-app-title { + white-space: normal; font-size: 1.5rem; } } diff --git a/ghost/admin/app/styles/layouts/editor.css b/ghost/admin/app/styles/layouts/editor.css index 9b0f187f32..388ab245b4 100644 --- a/ghost/admin/app/styles/layouts/editor.css +++ b/ghost/admin/app/styles/layouts/editor.css @@ -380,6 +380,13 @@ padding: 10vw 4vw; } +@media (max-width: 500px) { + .gh-markdown-editor-pane, + .gh-markdown-editor-preview { + padding: 15vw 4vw; + } +} + .gh-markdown-editor-side-by-side .gh-markdown-editor-pane, .gh-markdown-editor-side-by-side .gh-markdown-editor-preview { padding: 4vw; diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index ebf2f3d832..a9c85da9f2 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -252,6 +252,12 @@ body > .ember-view:not(.default-liquid-destination) { color: color(var(--midgrey) l(+5%)); } +@media (max-width: 500px) { + .gh-nav-foot-sitelink { + height: 56px; + } +} + .gh-nav-foot-sitelink svg { width: 13px; margin-left: 5px; @@ -482,6 +488,21 @@ body > .ember-view:not(.default-liquid-destination) { font-size: 1.2rem; } + .gh-mobile-nav-bar a.active { + background: color(var(--blue) lightness(+10%)); + color: #fff; + } + + .gh-mobile-nav-bar a.active svg { + fill: #fff; + } + + .gh-mobile-nav-bar a.active.gh-nav-main-users g, + .gh-mobile-nav-bar a.active.gh-nav-main-users path { + fill: transparent; + stroke: white; + } + .gh-mobile-nav-bar svg, .gh-mobile-nav-bar svg g { width: 15px; @@ -549,6 +570,15 @@ body > .ember-view:not(.default-liquid-destination) { min-height: 35px; } +@media (max-width: 500px) { + .gh-canvas-title { + display: block; + } + .gh-canvas-title svg { + margin: 0 5px; + } +} + .gh-canvas-title a { color: var(--darkgrey); } diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css index 491d814c37..144742b78b 100644 --- a/ghost/admin/app/styles/layouts/settings.css +++ b/ghost/admin/app/styles/layouts/settings.css @@ -64,6 +64,12 @@ max-width: 250px; } +@media (max-width: 500px) { + .gh-setting-action-largeimg img { + max-width: 190px; + } +} + .gh-setting-action-smallimg img:hover, .gh-setting-action-largeimg img:hover { cursor: pointer; @@ -294,8 +300,16 @@ line-height: inherit; } -@media (max-width: 400px) { +@media (max-width: 500px) { + #importfile { + flex-direction: column; + } + #importfile input { + width: 150px; + } + #startupload { + margin-left: 0; margin-top: 5px; } } @@ -356,6 +370,15 @@ border-top: var(--lightgrey) 1px solid; } +@media (max-width: 500px) { + .gh-themes-container .apps-configured { + justify-content: flex-end; + } + .gh-themes-container .apps-card-meta { + flex-basis: auto; + } +} + .gh-themes-uploadbtn { margin-top: 25px; } diff --git a/ghost/admin/app/styles/layouts/users.css b/ghost/admin/app/styles/layouts/users.css index 2c8d3514e8..81fe1ece38 100644 --- a/ghost/admin/app/styles/layouts/users.css +++ b/ghost/admin/app/styles/layouts/users.css @@ -9,6 +9,31 @@ text-transform: none; } +@media (max-width: 500px) { + .gh-invited-users .apps-card-meta { + max-width: 165px; + } + + .gh-invited-users .apps-card-app-title { + width: 200px; + } + + .gh-invited-users .apps-card-app-desc { + max-height: none; + display: block; + } + + .gh-invited-users .apps-configured { + flex-direction: column; + align-items: flex-end; + } + + .gh-invited-users .apps-configured a { + margin-bottom: 7px + } +} + + .user-list-item-icon { flex-shrink: 0; display: flex; @@ -128,12 +153,28 @@ width: 60%; } +@media (max-width: 500px) { + .invite-new-user .form-group:nth-of-type(1) { + float: none; + width: 100%; + } +} + .invite-new-user .form-group:nth-of-type(2) { float: left; margin-left: 10px; width: 35%; } +@media (max-width: 500px) { + .invite-new-user .form-group:nth-of-type(2) { + float: none; + margin-top: 10px; + margin-left: 0; + width: 100%; + } +} + .invite-new-user .form-group input { width: 100%; }