mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-15 03:01:37 -05:00
Cleanup layout Sass
Continues on from #4441 - Reformats the layout Sass files (comments, white space) - DRY up small chunks of CSS to make it more comprehensible
This commit is contained in:
Paul Adam Davis
parent
1e4a3cb204
commit
21991758aa
12 changed files with 643 additions and 529 deletions
|
|
@ -1,13 +1,43 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// About Ghost
|
||||
// --------------------------------------------------
|
||||
// Slug: /ghost/settings/about
|
||||
//
|
||||
// Styles for the About Ghost page, detailing environment & top
|
||||
// contributors.
|
||||
//
|
||||
// * Wrapper
|
||||
// * Logo & Version
|
||||
// * Environment & Get Involved
|
||||
// * Contributors
|
||||
// * Credits & Copyright
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-about {
|
||||
|
||||
h1 {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Logo & Version
|
||||
// --------------------------------------------------
|
||||
|
||||
.about-ghost-intro {
|
||||
@media (max-width: 550px) {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: -6px;
|
||||
margin-bottom: -21px;
|
||||
font-feature-settings: normal;
|
||||
}
|
||||
|
||||
.ghost_logo {
|
||||
position: relative;
|
||||
|
|
@ -22,50 +52,34 @@
|
|||
};
|
||||
}
|
||||
|
||||
.version {
|
||||
font-weight: 300;
|
||||
font-size: 1.8rem;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: -9px;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
h1 + p {
|
||||
margin-top: 1px;
|
||||
color: $midgrey;
|
||||
}
|
||||
}//.about-ghost-intro
|
||||
|
||||
// Special case to hide the desktop page header, because
|
||||
// in this instance the Ghost logo replaces it.
|
||||
@media (min-width: 901px) {
|
||||
.settings-view-about .settings-view-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// App Details
|
||||
// Environment & Get Involved
|
||||
// --------------------------------------------------
|
||||
|
||||
// Special case to hide the desktop page header, because
|
||||
// in this instance the Ghost logo replaces it.
|
||||
.settings-view-about {
|
||||
@media (min-width: 901px) {
|
||||
.settings-view-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-ghost-intro {
|
||||
h1 {
|
||||
margin-top: -6px;
|
||||
margin-bottom: -21px;
|
||||
font-feature-settings: normal;
|
||||
|
||||
.version {
|
||||
font-weight: 300;
|
||||
font-size: 1.8rem;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: -9px;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.about-environment-help {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
|
@ -77,6 +91,7 @@
|
|||
margin: 2px 0 0 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
dt, dd {
|
||||
width: auto;
|
||||
float: left;
|
||||
|
|
@ -84,9 +99,11 @@
|
|||
margin: 0;
|
||||
font-feature-settings: normal;
|
||||
}
|
||||
|
||||
dt {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.about-environment-detail {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
@ -106,7 +123,6 @@
|
|||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
min-height: 32px;
|
||||
|
||||
background: #A1ADB3;
|
||||
color: #fff;
|
||||
|
||||
|
|
@ -117,19 +133,19 @@
|
|||
&:nth-child(1) {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} // .about-help
|
||||
}//.about-help
|
||||
|
||||
@media (min-width: 501px) {
|
||||
.about-environment-help {
|
||||
max-width: 430px;
|
||||
}
|
||||
|
||||
.about-environment {
|
||||
float: left;
|
||||
width: calc(100% - 190px);
|
||||
}
|
||||
|
||||
.about-help {
|
||||
float: right;
|
||||
width: 170px;
|
||||
|
|
@ -152,6 +168,7 @@
|
|||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 601px) {
|
||||
margin-right: 9px;
|
||||
|
|
@ -162,13 +179,6 @@
|
|||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
&:before {
|
||||
opacity: 0;
|
||||
content: attr(title);
|
||||
|
|
@ -184,6 +194,7 @@
|
|||
font-size: 1rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
content: '';
|
||||
|
|
@ -194,6 +205,7 @@
|
|||
transition: opacity 0.15s ease-in-out;
|
||||
@include triangle(8px, $darkgrey, "down");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before,
|
||||
&:after {
|
||||
|
|
@ -201,11 +213,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} // li
|
||||
|
||||
} // .top-contributors
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}//a
|
||||
}//li
|
||||
}//.top-contributors
|
||||
|
||||
|
||||
//
|
||||
|
|
@ -245,6 +260,7 @@
|
|||
&:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
|
@ -252,5 +268,4 @@
|
|||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
} // .about-copyright
|
||||
}//.about-copyright
|
||||
|
|
@ -1,10 +1,19 @@
|
|||
// ------------------------------------------------------------
|
||||
// Authentication
|
||||
// Slug: /ghost/[signin/signup/forgotten/reset]
|
||||
//
|
||||
// Auth
|
||||
// Styles for the authentication pages
|
||||
//
|
||||
// * Auth colours & wrappers
|
||||
// * Sign In
|
||||
// * Signup & Reset
|
||||
// * Forgot Password
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Auth colours & wrappers
|
||||
// --------------------------------------------------
|
||||
// Slug: /ghost/signin/
|
||||
// --------------------------------------------------
|
||||
// Covers styles for all auth screens, login, signup
|
||||
// forgot password, and so on.
|
||||
|
||||
.ghost-login,
|
||||
.ghost-signup,
|
||||
|
|
@ -28,27 +37,28 @@
|
|||
margin: 0;
|
||||
position: relative;
|
||||
transition: background ease 0.25s;
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
background: lighten($darkgrey, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
// Changes the default Webkit yellow autofill colour to grey
|
||||
input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px $lightgrey inset !important;
|
||||
}
|
||||
|
||||
}
|
||||
}//.ghost-login, .ghost-signup, .ghost-forgotten, .ghost-reset
|
||||
|
||||
.login-box,
|
||||
.signup-box,
|
||||
.forgotten-box,
|
||||
.reset-box {
|
||||
display: table;
|
||||
max-width: 530px;
|
||||
height: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
display: table;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
max-width: 264px;
|
||||
|
|
@ -59,6 +69,7 @@
|
|||
|
||||
//
|
||||
// Sign In
|
||||
// Slug: /ghost/signin/
|
||||
// --------------------------------------------------
|
||||
|
||||
.login-form {
|
||||
|
|
@ -82,6 +93,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.email-wrap {
|
||||
margin-right: 3px;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.email,
|
||||
.password {
|
||||
display: inline-block;
|
||||
|
|
@ -91,19 +110,6 @@
|
|||
|
||||
@media (max-width: 630px) {
|
||||
width: 264px;
|
||||
}
|
||||
} // .email, .password
|
||||
|
||||
.email-wrap {
|
||||
margin-right: 3px;
|
||||
@media (max-width: 630px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
} // .email-wrap
|
||||
|
||||
@media (max-width: 630px) {
|
||||
.email,
|
||||
.password {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -119,19 +125,15 @@
|
|||
|
||||
button {
|
||||
width: 85px;
|
||||
height: 36px;
|
||||
margin:0 0 0 10px;
|
||||
padding: 0.5em 1.37em;
|
||||
min-height: 30px;
|
||||
min-width: 80px;
|
||||
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
|
||||
height: 37px;
|
||||
margin-left: 10px;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
} // button
|
||||
}
|
||||
|
||||
.meta {
|
||||
clear: both;
|
||||
|
|
@ -146,13 +148,14 @@
|
|||
color: lighten($midgrey, 5%);
|
||||
text-decoration: none;
|
||||
}
|
||||
} // a
|
||||
|
||||
} // .login-form
|
||||
}
|
||||
}//.login-form
|
||||
|
||||
|
||||
//
|
||||
// Signup / Reset
|
||||
// Signup & Reset
|
||||
// Slug: /ghost/signup
|
||||
// Slug: /ghost/reset/t0k3n
|
||||
// --------------------------------------------------
|
||||
|
||||
.signup-form,
|
||||
|
|
@ -166,8 +169,7 @@
|
|||
width: 264px;
|
||||
}
|
||||
|
||||
div { // Yes. Really.
|
||||
// TODO: Same here as above
|
||||
.password-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 1em 0;
|
||||
background: lighten($darkgrey, 10%);
|
||||
|
|
@ -187,28 +189,28 @@
|
|||
.name-wrap {
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.name {
|
||||
border-radius: 2px;
|
||||
}
|
||||
.name {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.email-wrap {
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.email {
|
||||
border-radius: 2px;
|
||||
}
|
||||
.email {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.password-wrap {
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.password {
|
||||
border-radius: 2px;
|
||||
}
|
||||
.password {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -220,12 +222,12 @@
|
|||
min-width: 80px;
|
||||
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
|
||||
}
|
||||
|
||||
} // .signup-form, .reset-form
|
||||
}//.signup-form, .reset-form
|
||||
|
||||
|
||||
//
|
||||
// Forgot Password
|
||||
// Slug: /ghost/forgotten
|
||||
// --------------------------------------------------
|
||||
|
||||
.forgotten-form {
|
||||
|
|
@ -240,21 +242,15 @@
|
|||
float: left;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
} // .email-wrap
|
||||
}
|
||||
|
||||
.email {
|
||||
padding: 8px 10px;
|
||||
border-radius: 2px;
|
||||
} // .email
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin: 0 0 1em 0;
|
||||
padding: 0.5em 1.37em;
|
||||
min-height: 30px;
|
||||
min-width: 80px;
|
||||
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
|
||||
} // button
|
||||
|
||||
} // .forgotten-form
|
||||
height: 37px;
|
||||
}
|
||||
}//.forgotten-form
|
||||
|
|
@ -1,7 +1,21 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Content Management
|
||||
// --------------------------------------------------
|
||||
// Slug: /ghost/
|
||||
//
|
||||
// Styles for the content management page, which is where
|
||||
// the posts are listed.
|
||||
//
|
||||
// * Container
|
||||
// * Show/Hide on mobile
|
||||
// * Content List
|
||||
// * Preview
|
||||
// * No Posts
|
||||
// * Keyboard Focus Animations
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Container
|
||||
// --------------------------------------------------
|
||||
|
||||
.content-view-container {
|
||||
|
|
@ -14,11 +28,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Show/hide content list & preview on mobile
|
||||
|
||||
//
|
||||
// Show/Hide on mobile
|
||||
// --------------------------------------------------
|
||||
|
||||
.content-list {
|
||||
&.show-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.show-content {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -28,11 +47,17 @@
|
|||
&.show-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.show-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Content List
|
||||
// --------------------------------------------------
|
||||
|
||||
.content-list {
|
||||
width: 33%;
|
||||
padding: 15px;
|
||||
|
|
@ -53,6 +78,7 @@
|
|||
.content-filter {
|
||||
position: relative;
|
||||
z-index: 300;
|
||||
|
||||
> a {
|
||||
padding: 5px;
|
||||
margin-left: -5px;
|
||||
|
|
@ -63,21 +89,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.keyboard-focused {
|
||||
// This has to be a pseudo element to sit over the top of everything else in the content list
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 500;
|
||||
pointer-events: none;
|
||||
animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
@include icon($i-add);
|
||||
position: absolute;
|
||||
|
|
@ -94,9 +105,9 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: 40px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
|
|
@ -110,6 +121,7 @@
|
|||
float: right;
|
||||
text-align: right;
|
||||
margin-left: 15px;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
float: none;
|
||||
}
|
||||
|
|
@ -119,8 +131,13 @@
|
|||
font-size: 1.3rem;
|
||||
font-weight: 300;
|
||||
|
||||
.draft { color: $red; }
|
||||
.scheduled { color: $orange; }
|
||||
.draft {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.scheduled {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
.featured .status {
|
||||
|
|
@ -143,16 +160,9 @@
|
|||
border-bottom: $lightbrown 1px solid;
|
||||
|
||||
a {
|
||||
|
||||
display: block;
|
||||
padding: 20px 20px;
|
||||
color: rgba(0,0,0,0.5);
|
||||
@media (max-width: 400px) {
|
||||
padding: 15px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
@include icon-after($i-chevron) {
|
||||
position: absolute;
|
||||
|
|
@ -160,24 +170,29 @@
|
|||
margin-top: -6px;
|
||||
right: 15px;
|
||||
}
|
||||
@media (min-width: 901px) {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
} // a
|
||||
@media (max-width: 400px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
} // li
|
||||
@media (max-width: 900px) {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}//a
|
||||
}//li
|
||||
|
||||
li.active {
|
||||
@media (min-width: 901px) {
|
||||
// only apply active styles on larger devices
|
||||
|
||||
border-bottom: lighten($midgrey, 40%) 1px solid;
|
||||
background: lighten($lightbrown, 5%);
|
||||
box-shadow:
|
||||
|
|
@ -190,11 +205,9 @@
|
|||
color: $darkgrey;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
}
|
||||
} // li.active
|
||||
|
||||
} // .content-list
|
||||
}//li.active
|
||||
}//.content-list
|
||||
|
||||
|
||||
//
|
||||
|
|
@ -218,16 +231,13 @@
|
|||
overflow: visible;
|
||||
}
|
||||
|
||||
&.keyboard-focused {
|
||||
animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
|
||||
}
|
||||
|
||||
.unfeatured {
|
||||
@include icon($i-unfeatured, 14px);
|
||||
vertical-align: -6%;
|
||||
margin: 0 7px 0 -5px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.featured {
|
||||
@include icon($i-featured, 14px);
|
||||
vertical-align: -6%;
|
||||
|
|
@ -259,7 +269,7 @@
|
|||
max-width: 700px;
|
||||
margin:0 auto;
|
||||
}
|
||||
} // .content-preview-content
|
||||
}
|
||||
|
||||
.post-controls {
|
||||
float:right;
|
||||
|
|
@ -281,10 +291,11 @@
|
|||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
} // .content-preview
|
||||
}//.content-preview
|
||||
|
||||
.post-preview-header {
|
||||
.page-title, .btn-back {
|
||||
.page-title,
|
||||
.btn-back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -319,7 +330,6 @@
|
|||
right: 4px;
|
||||
}
|
||||
|
||||
|
||||
.post-edit {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
|
|
@ -327,20 +337,26 @@
|
|||
|
||||
.featured, .unfeatured, small {
|
||||
display: none;
|
||||
} // @media (max-width: 900px)
|
||||
}
|
||||
}//@media (max-width: 900px)
|
||||
}//@media (max-width: 900px)
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.unfeatured, .featured {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.post-published-by {
|
||||
float: left;
|
||||
margin-top: 7px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
} // .post-preview-header
|
||||
}//.post-preview-header
|
||||
|
||||
|
||||
//
|
||||
// No Posts
|
||||
// --------------------------------------------------
|
||||
|
||||
.no-posts-box {
|
||||
position: relative;
|
||||
|
|
@ -349,6 +365,7 @@
|
|||
padding: 0px;
|
||||
display: table;
|
||||
z-index: 600;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
position: fixed;
|
||||
top: 45%;
|
||||
|
|
@ -359,6 +376,7 @@
|
|||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
@ -370,6 +388,30 @@
|
|||
font-weight: 200;
|
||||
font-size: 2em;
|
||||
}
|
||||
} // ,no-posts
|
||||
}//.no-posts
|
||||
}//.no-posts-box
|
||||
|
||||
} // .no-posts-box
|
||||
|
||||
//
|
||||
// Keyboard Focus Animations
|
||||
// --------------------------------------------------
|
||||
|
||||
// The inset shadow to show which area has keyboard focus
|
||||
.content-list.keyboard-focused {
|
||||
// This has to be a pseudo element to sit over the top of everything else in the content list
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 500;
|
||||
pointer-events: none;
|
||||
animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.content-preview.keyboard-focused {
|
||||
animation: keyboard-focus-style-fade-out 1.5s 1 forwards;
|
||||
}
|
||||
|
|
@ -1,6 +1,20 @@
|
|||
// ------------------------------------------------------------
|
||||
// Default Styles
|
||||
//
|
||||
// Styles for containers and elements used throughout Ghost
|
||||
//
|
||||
// * Global Container
|
||||
// * Main Layout
|
||||
// * Content Panel
|
||||
// * The header bar
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Global Container
|
||||
// --------------------------------------------------
|
||||
// Absolutely everything goes in here. It helps
|
||||
// reliably position other elements,
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
|
|
@ -11,11 +25,12 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Main Layout
|
||||
// --------------------------------------------------
|
||||
|
||||
// The <main> content wrapper
|
||||
|
||||
.viewport {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -30,17 +45,20 @@
|
|||
transition: transform 0.4s cubic-bezier($settings-menu-bezier);
|
||||
}
|
||||
|
||||
// This selector ends up being `body.settings-menu-expanded .viewport`
|
||||
// Compiles to `body.settings-menu-expanded .viewport`
|
||||
body.global-nav-expanded & {
|
||||
transform: translate3d(260px, 0px, 0px);
|
||||
}
|
||||
|
||||
// This selector ends up being `body.settings-menu-expanded .viewport`
|
||||
// Compiles to `body.settings-menu-expanded .viewport`
|
||||
body.settings-menu-expanded & {
|
||||
@media (max-width: 350px) {
|
||||
transform: translate3d(-100%, 0px, 0px);
|
||||
}
|
||||
|
||||
@media (min-width: 351px) {
|
||||
transform: translate3d(-350px, 0px, 0px);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -51,15 +69,39 @@
|
|||
width: 1px;
|
||||
background: #EDECE4;
|
||||
}
|
||||
transform: translate3d(-350px, 0px, 0px);
|
||||
}
|
||||
}
|
||||
}//.viewport
|
||||
|
||||
|
||||
//
|
||||
// Content Panel
|
||||
// --------------------------------------------------
|
||||
// We can't use position:fixed on .page-header because it would
|
||||
// break the mobile menu. So we create an overflow-auto content
|
||||
// area which scrolls just underneath the header, making it look
|
||||
// like the header is position:fixed.
|
||||
|
||||
.page-content {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
top: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// The header bar - visible below 900px
|
||||
// The header bar
|
||||
// --------------------------------------------------
|
||||
// Visible below 900px, as the nav isn't covering this.
|
||||
|
||||
.page-header {
|
||||
position: relative;
|
||||
|
|
@ -113,28 +155,4 @@
|
|||
width: 44px;
|
||||
height: 44px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// The panel which wraps the main content area
|
||||
// --------------------------------------------------
|
||||
// We can't use position:fixed on .page-header because it would
|
||||
// break the mobile menu. So we create an overflow-auto content
|
||||
// area which scrolls just underneath the header, making it look
|
||||
// like the header is position:fixed.
|
||||
|
||||
.page-content {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
top: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,25 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Editor
|
||||
// --------------------------------------------------
|
||||
// Slug: /ghost/editor/
|
||||
//
|
||||
// Styles for the Editor
|
||||
//
|
||||
// * Post Title
|
||||
// * Container & Floating Headers
|
||||
// * Editor
|
||||
// * Markdown Help Icon
|
||||
// * Post Preview
|
||||
// * Zen Mode
|
||||
// * Publish Bar
|
||||
// * Post Settings Menu meta Data
|
||||
// * Markdown Help Modal
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Post Title
|
||||
// --------------------------------------------------
|
||||
|
||||
// The main post title
|
||||
.entry-container .entry-title {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
|
|
@ -25,7 +40,12 @@
|
|||
outline: 0;
|
||||
}
|
||||
}
|
||||
} // .entry-title
|
||||
}//.entry-title
|
||||
|
||||
|
||||
//
|
||||
// Container & Floating Headers
|
||||
// --------------------------------------------------
|
||||
|
||||
.editor {
|
||||
|
||||
|
|
@ -41,8 +61,13 @@
|
|||
}
|
||||
|
||||
// The two content panel wrappers, positioned left/right
|
||||
.entry-markdown { left: 0; }
|
||||
.entry-preview { right: 0; border-left: $lightbrown 1px solid; }
|
||||
.entry-markdown {
|
||||
left: 0;
|
||||
}
|
||||
.entry-preview {
|
||||
right: 0;
|
||||
border-left: $lightbrown 1px solid;
|
||||
}
|
||||
|
||||
// The visual styles for both panels
|
||||
.entry-markdown,
|
||||
|
|
@ -55,8 +80,16 @@
|
|||
border-top: $lightbrown 1px solid;
|
||||
background: #fff;
|
||||
|
||||
// Convert all content areas to small boxes
|
||||
// Hide markdown icon + wordcount when we hit mobile
|
||||
@media (max-width: 400px) {
|
||||
.markdown-help,
|
||||
.entry-word-count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
// Convert all content areas to small boxes
|
||||
top: 100px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -64,13 +97,23 @@
|
|||
border: none;
|
||||
z-index: 100;
|
||||
min-height: 380px;
|
||||
.markdown, .entry-preview-content {
|
||||
|
||||
.markdown,
|
||||
.entry-preview-content {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Correctly colour the markdown icon when inactive and hovered
|
||||
&:not(.active) .markdown-help:hover:before {
|
||||
color: #fff;
|
||||
}
|
||||
}//@media (max-width: 1000px)
|
||||
|
||||
.floatingheader {
|
||||
a {
|
||||
color: $brown;
|
||||
}
|
||||
|
||||
// Turn headers into tabs which act as links
|
||||
// both headers set to grey/inactive colour
|
||||
|
|
@ -90,27 +133,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $brown;
|
||||
}
|
||||
|
||||
.entry-word-count {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
&:not(.active) {
|
||||
.markdown-help {
|
||||
&:hover:before {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.floatingheader
|
||||
|
||||
// Give the tab with the .active class the highest z-index
|
||||
&.active {
|
||||
|
|
@ -133,24 +161,23 @@
|
|||
color: $brown;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
|
||||
a {
|
||||
color: $brown;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.entry-markdown, .entry-preview
|
||||
|
||||
// Hide markdown icon + wordcount when we hit mobile
|
||||
@media (max-width: 400px) {
|
||||
.markdown-help,
|
||||
.entry-word-count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} // .entry-markdown, .entry-preview
|
||||
|
||||
//
|
||||
// Editor
|
||||
// --------------------------------------------------
|
||||
|
||||
.editor {
|
||||
.entry-markdown-content {
|
||||
|
||||
textarea {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
|
@ -166,25 +193,27 @@
|
|||
left: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding: 10px;
|
||||
}
|
||||
@media (min-width: 601px) and (max-width: 1000px) {
|
||||
padding: 15px;
|
||||
}
|
||||
@media (min-width: 1001px) {
|
||||
top: 40px;
|
||||
}
|
||||
@media (max-height: 560px) {
|
||||
height: calc(100% - 5px);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
} // .entry-markdown-content
|
||||
@media (max-width: 600px) {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 601px) and (max-width: 1000px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 1001px) {
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
@media (max-height: 560px) {
|
||||
height: calc(100% - 5px);
|
||||
}
|
||||
}//textarea
|
||||
}//.entry-markdown-content
|
||||
|
||||
.CodeMirror {
|
||||
height: auto;
|
||||
|
|
@ -220,6 +249,7 @@
|
|||
@media (max-width: 1000px) {padding-top: 25px;}
|
||||
@media (max-width: 400px) {padding: 15px 0;}
|
||||
}
|
||||
|
||||
.CodeMirror pre {
|
||||
padding: 0 40px; /* Horizontal padding of content */
|
||||
@media (max-width: 400px) {padding: 0 15px;}
|
||||
|
|
@ -275,39 +305,39 @@
|
|||
user-select: none;
|
||||
cursor: default;
|
||||
|
||||
// Tweak padding for smaller screens
|
||||
@media (max-width: 1000px) {
|
||||
padding-top: 20px;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Special case, when scrolling, add shadows to content headers.
|
||||
.scrolling {
|
||||
|
||||
.floatingheader {
|
||||
@media (max-width: 1000px) {
|
||||
@media (max-width: 1000px) {
|
||||
.scrolling{
|
||||
.floatingheader {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@media (max-width: 1000px) {
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.CodeMirror-scroll,
|
||||
.entry-preview-content {
|
||||
@media (max-width: 1000px) {
|
||||
|
||||
.CodeMirror-scroll,
|
||||
.entry-preview-content {
|
||||
box-shadow: 0 5px 5px rgba(0,0,0,0.05) inset;
|
||||
}
|
||||
}
|
||||
} // .scrolling
|
||||
}
|
||||
}//.editor
|
||||
|
||||
} // .editor
|
||||
|
||||
//
|
||||
// Markdown Help Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
.markdown-help {
|
||||
position: relative;
|
||||
|
|
@ -344,10 +374,12 @@
|
|||
text-decoration: none;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
.img-placeholder {
|
||||
border: 5px dashed $grey;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
height: 30px;
|
||||
|
|
@ -358,18 +390,19 @@
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&.image-edit {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Placeholder objects for <script> & <iframe>
|
||||
|
|
@ -391,9 +424,11 @@
|
|||
|
||||
body.zen {
|
||||
background: lighten($lightbrown, 3%);
|
||||
|
||||
.usermenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.global-nav,
|
||||
.page-header,
|
||||
#publish-bar {
|
||||
|
|
@ -413,8 +448,7 @@ body.zen {
|
|||
bottom: 0;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
}
|
||||
}//body.zen
|
||||
|
||||
|
||||
//
|
||||
|
|
@ -456,8 +490,7 @@ body.zen {
|
|||
border-top: rgba(255,255,255,0.3) 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}//#publish-bar
|
||||
|
||||
.extended-tags { // When the tag bar is exapanded
|
||||
position: static;
|
||||
|
|
@ -468,6 +501,7 @@ body.zen {
|
|||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
width: 281px;
|
||||
}
|
||||
|
|
@ -488,10 +522,9 @@ body.zen {
|
|||
.right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}//.extended-tags
|
||||
|
||||
#entry-tags {
|
||||
|
||||
input[type="text"].tag-input {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
|
@ -499,7 +532,6 @@ body.zen {
|
|||
font-weight: 300;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
padding: 9px;
|
||||
|
|
@ -523,26 +555,26 @@ body.zen {
|
|||
background: lighten($grey, 15%);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset, #000 0 1px 3px;
|
||||
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//#entry-tags
|
||||
|
||||
.suggestions {
|
||||
|
||||
top: auto;
|
||||
bottom: calc(100% + 15px);
|
||||
|
||||
li.selected {
|
||||
&, a {
|
||||
&,
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
mark {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -553,7 +585,6 @@ body.zen {
|
|||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#entry-actions {
|
||||
|
|
@ -563,6 +594,7 @@ body.zen {
|
|||
align-items: center;
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
bottom: 49px;
|
||||
|
|
@ -591,7 +623,7 @@ body.zen {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//#entry-actions
|
||||
|
||||
#entry-actions-menu {
|
||||
position: absolute;
|
||||
|
|
@ -601,6 +633,7 @@ body.zen {
|
|||
|
||||
.tags-wrapper {
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
|
|
@ -612,6 +645,7 @@ body.zen {
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -621,10 +655,12 @@ body.zen {
|
|||
color: #7D878A;
|
||||
transition: color 0.15s linear;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: #fff;
|
||||
}
|
||||
}//.tag-label
|
||||
}
|
||||
|
||||
#entry-tags.focused {
|
||||
.tag-label:before {
|
||||
color: #fff;
|
||||
|
|
@ -636,10 +672,8 @@ body.zen {
|
|||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: space-between;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -666,8 +700,7 @@ body.zen {
|
|||
padding-bottom: 9px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
}//.publish-bar-2
|
||||
}
|
||||
|
||||
.publish-bar-tags-input {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -694,22 +727,20 @@ body.zen {
|
|||
&.active {
|
||||
color: $darkgrey;
|
||||
}
|
||||
} // .post-settings
|
||||
}//.post-settings
|
||||
|
||||
.post-settings-menu {
|
||||
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
} // .post-settings-menu
|
||||
}//.post-settings-menu
|
||||
|
||||
|
||||
//
|
||||
// Post Settings Menu eta Data
|
||||
// Post Settings Menu meta Data
|
||||
// --------------------------------------------------
|
||||
|
||||
// These styles are copied from Google.com
|
||||
|
|
|
|||
|
|
@ -1,9 +1,18 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Error Pages
|
||||
// --------------------------------------------------
|
||||
// Slug: /ghost/404
|
||||
// --------------------------------------------------
|
||||
//
|
||||
// Covers styles for all error screens, eg. 404, 500
|
||||
//
|
||||
// * Wrappers
|
||||
// * Image & error info
|
||||
// * Stack Trace
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Wrappers
|
||||
// --------------------------------------------------
|
||||
|
||||
.error-content {
|
||||
max-width: 530px;
|
||||
|
|
@ -23,6 +32,11 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Image & error info
|
||||
// --------------------------------------------------
|
||||
|
||||
.error-image {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
|
@ -72,6 +86,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Stack Trace
|
||||
// --------------------------------------------------
|
||||
|
||||
.error-stack {
|
||||
margin: 1em auto;
|
||||
padding: 2em;
|
||||
|
|
@ -88,7 +107,7 @@
|
|||
.error-stack-list li {
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
&:before {
|
||||
color: #BBB;
|
||||
content: "\21AA";
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,21 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Settings
|
||||
// --------------------------------------------------
|
||||
// Slug: /ghost/settings/
|
||||
// --------------------------------------------------
|
||||
// Slug: /ghost/settings/[many]
|
||||
//
|
||||
// Styles for the content management page, which is where
|
||||
// the posts are listed.
|
||||
//
|
||||
// * Navigation
|
||||
// * Content
|
||||
// * Headers
|
||||
// * Custom Permalinks
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
// Navigation
|
||||
// --------------------------------------------------
|
||||
|
||||
// Settings navigation
|
||||
.settings-nav {
|
||||
width: 25%;
|
||||
position: absolute;
|
||||
|
|
@ -19,11 +25,9 @@
|
|||
z-index: 700;
|
||||
background: #fff;
|
||||
box-shadow: $lightbrown 1px 0 0;
|
||||
@media (max-width: 900px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -32,12 +36,15 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
@media (max-width: 900px) { border-bottom: #edece4 1px solid; }
|
||||
@media (max-width: 900px) {
|
||||
border-bottom: #edece4 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
border-top: #fff 1px solid;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
margin-right: 0;
|
||||
border-top: #edece4 1px solid;
|
||||
|
|
@ -49,7 +56,6 @@
|
|||
top: 50%;
|
||||
left: 30px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
transition: color 0.1s;
|
||||
color: $brown;
|
||||
|
||||
|
|
@ -57,6 +63,7 @@
|
|||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
|
@ -86,21 +93,15 @@
|
|||
// Make space for icons
|
||||
&:before {
|
||||
margin-right: 20px;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//a
|
||||
|
||||
&.active {
|
||||
@media (min-width: 900px) {
|
||||
// only apply active styles on larger devices
|
||||
|
||||
// The icon
|
||||
&:before {
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
margin-right: 0;
|
||||
position: relative;
|
||||
z-index: 300;
|
||||
|
|
@ -108,28 +109,28 @@
|
|||
box-shadow: #fff 1px 0 0, #edece4 0 1px 0;
|
||||
transition: all 0.15s ease-out 0s;
|
||||
|
||||
// The icon
|
||||
&:before {
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $darkgrey;
|
||||
font-weight: bold;
|
||||
background: #fff;
|
||||
|
||||
&:focus {
|
||||
background: $lightbrown;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
} // .active
|
||||
}//.active
|
||||
|
||||
&:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
&:first-of-type.active {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
} // li
|
||||
|
||||
} // .settings-nav
|
||||
}//li
|
||||
}//.settings-nav
|
||||
|
||||
// Special cases for nav items
|
||||
.settings-nav-labs .icon-labs:before {
|
||||
|
|
@ -140,10 +141,9 @@
|
|||
//
|
||||
// Content
|
||||
// --------------------------------------------------
|
||||
|
||||
// The main content panel on the right
|
||||
.settings-content {
|
||||
|
||||
.settings-content {
|
||||
@media (max-width: 900px) {
|
||||
&.fade-in {
|
||||
animation: none;
|
||||
|
|
@ -156,7 +156,6 @@
|
|||
right: 0;
|
||||
left: 25%;
|
||||
bottom: 0;
|
||||
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
|
@ -170,10 +169,6 @@
|
|||
.content {
|
||||
padding: 40px;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
|
@ -184,22 +179,29 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
} // .content
|
||||
}//.content
|
||||
|
||||
.word-count {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
} // .settings-content
|
||||
}//.settings-content
|
||||
|
||||
|
||||
//
|
||||
// Headers
|
||||
// --------------------------------------------------
|
||||
// This is the header for /ghost/settings/view/
|
||||
// It's black and fixed position at the top of the screen
|
||||
.settings-view-header {
|
||||
// On mobile, it's black and fixed position at the top of the screen
|
||||
|
||||
.settings-view-header,
|
||||
.settings-subview-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -229,120 +231,60 @@
|
|||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
|
||||
}
|
||||
|
||||
// Desktop
|
||||
// On larger viewports, make it look like a simple heading
|
||||
@media (min-width: 900px) {
|
||||
position: static;
|
||||
height: auto;
|
||||
padding: 30px 40px;
|
||||
text-align: left;
|
||||
line-height: 1.15em;
|
||||
background: none;
|
||||
|
||||
.btn {
|
||||
vertical-align: middle;
|
||||
line-height: 1.428571429;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
font-size: 2.6rem;
|
||||
line-height: 1.3;
|
||||
overflow: visible;
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
position: static;
|
||||
float: right;
|
||||
}
|
||||
}//@media (min-width: 900px)
|
||||
}//.settings-view-header, .settings-subview-header
|
||||
|
||||
|
||||
.settings-view-header {
|
||||
@media (min-width: 900px) {
|
||||
text-align: left;
|
||||
|
||||
.btn-back {
|
||||
display: none;
|
||||
vertical-align: middle;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn {
|
||||
vertical-align: middle;
|
||||
line-height: 1.428571429;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
font-size: 2.6rem;
|
||||
line-height: 1.3;
|
||||
overflow: visible;
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
position: static;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// This is the header for /ghost/settings/view/subview/
|
||||
// It's black and fixed position at the top of the screen
|
||||
.settings-subview-header {
|
||||
@include clearfix;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3000;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #242628;
|
||||
|
||||
.btn-back {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn {
|
||||
vertical-align: top;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
|
||||
}
|
||||
|
||||
// Desktop
|
||||
// On larger viewports, make it look like a simple heading
|
||||
@media (min-width: 900px) {
|
||||
position: static;
|
||||
height: auto;
|
||||
padding: 30px 40px;
|
||||
line-height: 1.15em;
|
||||
background: none;
|
||||
|
||||
.btn-back {
|
||||
position: static;
|
||||
float:left;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn {
|
||||
vertical-align: middle;
|
||||
line-height: 1.428571429;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
font-size: 2.6rem;
|
||||
line-height: 1.3;
|
||||
overflow: visible;
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
position: static;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Custom Permalinks
|
||||
// --------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,14 +1,24 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Setup
|
||||
// --------------------------------------------------
|
||||
//
|
||||
// Styles for the Tag Management screen
|
||||
// Slug: /ghost/setup/
|
||||
//
|
||||
// * Page
|
||||
// * Wrapper
|
||||
// * Form
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Page
|
||||
// --------------------------------------------------
|
||||
// These styles cover /ghost/setup/ which is the first
|
||||
// screen that appears on a new Ghost install
|
||||
// Applied to the <body> element
|
||||
|
||||
.ghost-setup {
|
||||
color: $midgrey;
|
||||
background: $darkgrey;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
background: darken($darkgrey, 5%);
|
||||
}
|
||||
|
|
@ -17,13 +27,19 @@
|
|||
padding-top: 15px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The wrapper to center the form in all ways
|
||||
|
||||
//
|
||||
// Wrapper
|
||||
// --------------------------------------------------
|
||||
// Centered in the middle of the screen
|
||||
|
||||
.setup-box {
|
||||
display: table;
|
||||
max-width: 500px;
|
||||
|
|
@ -32,24 +48,30 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
// The form itself with the dark background
|
||||
|
||||
//
|
||||
// Form
|
||||
// --------------------------------------------------
|
||||
|
||||
.setup-form {
|
||||
max-width: 530px;
|
||||
padding: 40px;
|
||||
color: lighten($midgrey, 15%);
|
||||
background: darken($darkgrey, 5%);
|
||||
border-radius: 2px;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 551px) {
|
||||
background: darken($darkgrey, 5%);
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
label {
|
||||
// width: 90px;
|
||||
color: $lightgrey;
|
||||
font-weight: 300;
|
||||
|
||||
|
|
@ -59,7 +81,6 @@
|
|||
}
|
||||
|
||||
.form-group input {
|
||||
// width: 300px;
|
||||
padding: 7px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
|
|
@ -84,6 +105,10 @@
|
|||
letter-spacing: 0;
|
||||
color: $lightgrey;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -97,7 +122,10 @@
|
|||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
color: $midgrey;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 14px;
|
||||
|
|
@ -119,4 +147,4 @@
|
|||
padding: 0.9em 1.8em;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}//.setup-form
|
||||
|
|
@ -1,10 +1,18 @@
|
|||
//
|
||||
// ------------------------------------------------------------
|
||||
// Tag Management
|
||||
// --------------------------------------------------
|
||||
// Slug: /ghost/settings/tags
|
||||
//
|
||||
// Styles for the Tag Management screen
|
||||
// Slug: /ghost/settings/tags/
|
||||
//
|
||||
// * Tags search
|
||||
// * Tag Item
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Tags search
|
||||
// --------------------------------------------------
|
||||
|
||||
// Tags search
|
||||
.tags-search {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
@ -16,12 +24,13 @@
|
|||
padding-right: 10px;
|
||||
transition: padding 0.3s ease-in-out;
|
||||
|
||||
.icon-search:before {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-search-input {
|
||||
|
|
@ -40,16 +49,11 @@
|
|||
}
|
||||
|
||||
&.opened {
|
||||
|
||||
.tags-search-input {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.btn {
|
||||
padding-left: 120px;
|
||||
}
|
||||
|
||||
.tags-search-input {
|
||||
width: 110px;
|
||||
}
|
||||
|
|
@ -59,13 +63,24 @@
|
|||
.btn {
|
||||
padding-left: 140px;
|
||||
}
|
||||
|
||||
.tags-search-input {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-search-input {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}//&.opened
|
||||
}//.tags-search
|
||||
|
||||
|
||||
//
|
||||
// Tag Item
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-tag {
|
||||
position: relative;
|
||||
padding: 0 45px 0 0;
|
||||
|
|
@ -94,6 +109,7 @@
|
|||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.label-alt {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -117,32 +133,4 @@
|
|||
font-size: 16px;
|
||||
color: $midbrown;
|
||||
}
|
||||
}//.settings-tag
|
||||
|
||||
// Tags with a parent get the arrow, and slightly different padding/margin
|
||||
// .settings-tag .settings-tag {
|
||||
// margin-left: 36px;
|
||||
// padding-bottom: 0;
|
||||
// border-bottom: 0;
|
||||
// margin-right: -35px;
|
||||
|
||||
// &:before,
|
||||
// &:after {
|
||||
// content: '';
|
||||
// background: $lightbrown;
|
||||
// position: absolute;
|
||||
// }
|
||||
|
||||
// &:before {
|
||||
// width: 1px;
|
||||
// height: 16px;
|
||||
// top: 16px;
|
||||
// left: -34px;
|
||||
// }
|
||||
// &:after {
|
||||
// width: 16px;
|
||||
// height: 1px;
|
||||
// top: 32px;
|
||||
// left: -34px;
|
||||
// }
|
||||
// }//.settings-tag .settings-tag
|
||||
}//.settings-tag
|
||||
|
|
@ -1,7 +1,38 @@
|
|||
// ------------------------------------------------------------
|
||||
// User
|
||||
//
|
||||
// Users
|
||||
// Styles for the Edit User page
|
||||
// Slug: /ghost/settings/users/:username/
|
||||
//
|
||||
// * User Actions
|
||||
// * Content Wrapper
|
||||
// * Cover Image
|
||||
// * Edit User Details
|
||||
// * User Image (Avatar)
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// User Actions
|
||||
// --------------------------------------------------
|
||||
// Slug: /ghost/settings/users/username/
|
||||
|
||||
.user-actions-cog {
|
||||
padding: 9px 11px;
|
||||
}
|
||||
|
||||
.user-actions-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: calc(100% + 17px);
|
||||
|
||||
&.fade-out {
|
||||
animation-duration: 0.01s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Content Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
.content.settings-user {
|
||||
|
|
@ -12,9 +43,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.user-actions-cog {
|
||||
padding: 9px 11px;
|
||||
}
|
||||
|
||||
//
|
||||
// Cover Image
|
||||
// --------------------------------------------------
|
||||
|
||||
.user-cover {
|
||||
position: relative;
|
||||
|
|
@ -37,7 +69,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
height: 110px;
|
||||
background: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.18) );
|
||||
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.18));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,6 +85,7 @@
|
|||
border-width: 0;
|
||||
border-radius: $border-radius;
|
||||
transition: color 0.3s ease, background 0.3s ease;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
right: 15px;
|
||||
}
|
||||
|
|
@ -63,62 +96,49 @@
|
|||
}
|
||||
}
|
||||
|
||||
.user-image + .form-group {
|
||||
|
||||
//
|
||||
// Edit User Details
|
||||
// --------------------------------------------------
|
||||
|
||||
.first-form-group {
|
||||
max-width: 500px;
|
||||
@media (min-width: 651px) and (max-width: 1000px) {
|
||||
width: calc(100% - 201px);
|
||||
}
|
||||
|
||||
@media (min-width: 651px) {
|
||||
min-width: 285px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 651px) and (max-width: 1000px) {
|
||||
width: calc(100% - 201px);
|
||||
}
|
||||
|
||||
@media (min-width: 1001px) {
|
||||
width: calc(100% - 181px);
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@media (min-width: 651px) {
|
||||
padding-left: 143px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
@media (max-width: 650px) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-details-top {
|
||||
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 650px) {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media (min-width: 651px) {
|
||||
margin-top: -91px;
|
||||
}
|
||||
|
||||
@media (min-width: 651px) {
|
||||
margin-top: -91px;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
label[for="user-name"] {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
|
@ -129,12 +149,50 @@
|
|||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
}//.user-details-top
|
||||
|
||||
.user-profile {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@media (min-width: 651px) {
|
||||
padding-left: 143px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
@media (max-width: 650px) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// User Image (Avatar)
|
||||
// --------------------------------------------------
|
||||
|
||||
.user-image {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
margin-left: -6px;
|
||||
margin-right: 20px;
|
||||
padding: 3px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
|
||||
@media (min-width: 651px) {
|
||||
top: -19px;
|
||||
|
|
@ -146,18 +204,6 @@
|
|||
left: 21px;
|
||||
}
|
||||
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
float: left;
|
||||
margin-left: -6px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
padding: 3px;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 120px;
|
||||
|
|
@ -172,7 +218,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.user-image
|
||||
|
||||
.edit-user-image {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -196,17 +196,6 @@ a.user-list-item {
|
|||
}//.role-label
|
||||
|
||||
|
||||
//
|
||||
// User Actions
|
||||
// --------------------------------------------------
|
||||
|
||||
.user-actions-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: calc(100% + 17px);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Invite User Modal
|
||||
// --------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<button type="button" {{action "openModal" "upload" user "image"}} class="edit-user-image js-modal-image">Edit Picture</button>
|
||||
</figure>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group first-form-group">
|
||||
<label for="user-name">Full Name</label>
|
||||
{{input value=user.name id="user-name" class="user-name" placeholder="Full Name" autocorrect="off"}}
|
||||
<p>Use your real name so people can recognise you</p>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue