diff --git a/core/client/assets/sass/layouts/users.scss b/core/client/assets/sass/layouts/users.scss index 47a12b988b..850cdf71e2 100644 --- a/core/client/assets/sass/layouts/users.scss +++ b/core/client/assets/sass/layouts/users.scss @@ -35,9 +35,12 @@ display: inline-block; float: right; - label { margin: 0} + label { + margin: 0; + } - &:hover .user-search-input, .user-search-input:focus { + &:hover .user-search-input, + .user-search-input:focus { width: 260px; padding: 0 10px; } @@ -187,14 +190,24 @@ fieldset { padding: 0 40px; } + + textarea { + min-width: 240px; + } } fieldset.user-details-top { - margin-bottom: 0; - padding: 10px 0 0 0; - p { - color: #fff; + @media (max-width: 500px) { + margin-bottom: 10px; + } + + @media (min-width: 501px) { + margin-bottom: 0; + padding: 10px 0 0 0; + p { + color: #fff; + } } } @@ -213,6 +226,10 @@ background: #fff; z-index: 2; + @media (max-width: 500px) { + margin-left: -10px; + } + .img { display: block; width: 110px; @@ -241,8 +258,10 @@ @include transition(opacity 0.3s ease); } - #user-name { - border-color: #fff; + @media (min-width: 501px) { + #user-name { + border-color: #fff; + } } .user-details-bottom { diff --git a/core/client/docs/dist/css/ghost-ui.min.css b/core/client/docs/dist/css/ghost-ui.min.css index d4819546b3..d43bcc4e5a 100644 --- a/core/client/docs/dist/css/ghost-ui.min.css +++ b/core/client/docs/dist/css/ghost-ui.min.css @@ -15,4 +15,4 @@ nav ul{list-style:none;margin:0;padding:0;border-top:#edece4 1px solid}nav li a{ .error-description{margin:0;padding:0;font-weight:300;font-size:1.9em;color:#979797;border:none}@media (max-width: 630px){.error-description{font-size:1.4em}} .error-stack{margin:1em auto;padding:2em;max-width:800px;background-color:rgba(255,255,255,0.3)}.error-stack-list{list-style-type:none;padding:0;margin:0}.error-stack-list li{display:block}.error-stack-list li::before{color:#BBB;content:"\21AA";display:inline-block;font-size:1.2em;margin-right:0.5em}.error-stack-function{font-weight:bold}.settings .wrapper{background:#fff;box-shadow:rgba(0,0,0,0.05) 0 1px 5px;position:relative;width:100%;height:100%;margin:0;padding:0}@media (max-width: 800px){.settings .wrapper{overflow-x:hidden}}.settings .title{text-transform:uppercase;font-weight:normal;font-size:1.6em;line-height:0.8em;margin:0 0 18px 0;padding:0;border:none}.settings-sidebar{width:20%;position:absolute;top:0;left:0;bottom:0;z-index:700;background:#fff;box-shadow:#edece4 1px 0 0}@media (max-width: 800px){.settings-sidebar{width:100%;box-shadow:none}}.settings-sidebar>header{position:relative;z-index:400;height:17px;padding:30px 15px 47px 40px;margin-bottom:0;border-bottom:none;box-shadow:#edece4 0 -1px 0 inset, #edece4 1px 0 0;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(25%, #fff), color-stop(100%, rgba(255,255,255,0.9)));background:-webkit-linear-gradient(top, #fff 0%, #fff 25%, rgba(255,255,255,0.9) 100%);background:linear-gradient(to bottom, #fff 0%, #fff 25%, rgba(255,255,255,0.9) 100%)}@media (max-width: 1000px){.settings-sidebar>header{padding-left:15px}} .settings-menu{position:absolute;top:0;left:0;bottom:0;right:-1px;overflow:auto}@media (max-width: 800px){.settings-menu{right:0}}.settings-menu:before{display:block;content:"";height:77px}.settings-menu ul{border-top:none}@media (max-width: 800px){.settings-menu ul{border-bottom:#edece4 1px solid}}.settings-menu li{margin-right:1px;border-top:#fff 1px solid}@media (max-width: 800px){.settings-menu li{margin-right:0;border-top:#edece4 1px solid}}.settings-menu li a{padding:15px 15px 15px 40px;border-bottom:none}@media (max-width: 1000px){.settings-menu li a{padding-left:15px}}@media (max-width: 800px){.settings-menu li a:after{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e01d";float:right;margin-top:5px}.settings-menu li a:hover{text-decoration:none}}.settings-menu li:first-child{border-top:none}.settings-menu li:first-child.active{border-top:none}@media (min-width: 1001px){.settings-menu li.active{margin-right:0;position:relative;z-index:300;border-top:#edece4 1px solid;box-shadow:#fff 1px 0 0, #edece4 0 1px 0;-webkit-transition:all 0.15s ease-out 0s;-moz-transition:all 0.15s ease-out 0s;transition:all 0.15s ease-out 0s}.settings-menu li.active a{color:#242628;font-weight:bold;background:#fff}}.settings-menu li a:before{margin-right:20px}@media (max-width: 1000px){.settings-menu li a:before{margin-right:15px}}.settings-menu .general a:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e006"}.settings-menu .general a:hover{text-decoration:none}.settings-menu .publishing a:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e02d"}.settings-menu .publishing a:hover{text-decoration:none}.settings-menu .services a:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e020"}.settings-menu .services a:hover{text-decoration:none}.settings-menu .users a:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e002"}.settings-menu .users a:hover{text-decoration:none}.settings-menu .appearance a:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e021"}.settings-menu .appearance a:hover{text-decoration:none}.settings-menu .apps a:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e00b"}.settings-menu .apps a:hover{text-decoration:none}.settings-menu .code a:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e03e"}.settings-menu .code a:hover{text-decoration:none}.settings-content{padding:0;position:absolute;top:0;right:0;left:20%;bottom:0;background:#fff;display:none}@media (max-width: 800px){.settings-content{display:none;width:100%;left:100%;right:-100%;margin-left:15px}}.settings-content img{max-width:100%}.settings-content.active{display:block}.settings-content>header{position:relative;z-index:200;height:17px;padding:30px 220px 46px 40px;border-bottom:#edece4 1px solid;margin-bottom:40px;text-transform:none;font-weight:normal;line-height:inherit;color:inherit;background:-moz-linear-gradient(top, #fff 0%, #fff 25%, rgba(255,255,255,0.9) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(25%, #fff), color-stop(100%, rgba(255,255,255,0.9)));background:-webkit-linear-gradient(top, #fff 0%, #fff 25%, rgba(255,255,255,0.9) 100%);background:-o-linear-gradient(top, #fff 0%, #fff 25%, rgba(255,255,255,0.9) 100%);background:-ms-linear-gradient(top, #fff 0%, #fff 25%, rgba(255,255,255,0.9) 100%);background:linear-gradient(to bottom, #fff 0%, #fff 25%, rgba(255,255,255,0.9) 100%)}@media (max-width: 1000px){.settings-content>header{padding-left:15px}}@media (max-width: 800px){.settings-content>header{padding-left:115px}}@media (max-height: 600px){.settings-content>header{height:auto;padding:5px;position:absolute;top:0;right:0;border:none;background:transparent}.settings-content>header .title{display:none}}@media (max-width: 650px){.settings-content>header{padding-left:15px}.settings-content>header .button-back{position:fixed;top:5px;left:14px;min-height:0;height:30px}.settings-content>header .button-back:before{left:-9px;border-width:15px 9px 15px 0}}.settings-content .page-actions{position:absolute;top:20px;right:40px;z-index:700;font-size:1em}@media (max-width: 1000px){.settings-content .page-actions{right:15px}}@media (max-width: 650px){.settings-content .page-actions{position:fixed;top:5px;right:4px}.settings-content .page-actions button{min-height:0;height:30px;padding:0.5em 1.37em}}.settings-content .page-actions .button-add{position:relative;padding-left:50px}.settings-content .page-actions .button-add:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e032";font-size:1.4em;color:rgba(255,255,255,0.6);position:absolute;top:0;padding:9px 8px 0 0;left:9px;bottom:0;width:20px;border-right:#8ba644 1px solid}.settings-content .page-actions .button-add:hover{text-decoration:none}.settings-content .content{position:absolute;top:0;right:0;left:0;bottom:0;padding:40px;overflow:auto;-webkit-overflow-scrolling:touch}.settings-content .content:before{display:block;content:"";height:77px}@media (max-height: 600px){.settings-content .content:before{display:none}}.settings-content .content.no-padding{padding:0}@media (max-width: 1000px){.settings-content .content{padding-left:15px}}@media (max-width: 550px){.settings-content .content{padding:0 15px 40px}}.settings-content .description-container,.settings-content .bio-container{max-width:510px}.settings-content .word-count{margin-right:30px;float:right;font-weight:bold;color:#9e9d95}.header-injection,.footer-injection{margin-top:3.2em}.ghost-setup{color:#7d878a;background:#242628}@media (max-width: 550px){.ghost-setup{background:#18191b}}.ghost-setup main{top:15px}@media (max-width: 550px){.ghost-setup main{top:0}}.ghost-setup input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px #e2edf2 inset !important}.ghost-setup h1{margin:0;font-weight:200;font-size:26px;color:#e2edf2}@media (max-width: 550px){.ghost-setup h1{font-size:20px}}.ghost-setup h2{margin:10px 0 0 0;padding:0;border:none;font-weight:200;font-size:16px;color:#7d878a}@media (max-width: 550px){.ghost-setup h2{font-size:14px}} -.setup-box{display:table;max-width:500px;height:90%;margin:0 auto;padding:0}.setup-form{max-width:530px;padding:40px;color:#a5acae;background:#18191b}@media (max-width: 400px){.setup-form{padding:15px}}.setup-form header{margin-bottom:45px}@media (max-width: 550px){.setup-form header{margin-bottom:35px}}.setup-form footer{margin:40px 0 5px 0}@media (max-width: 550px){.setup-form footer{margin-top:35px}}.setup-form label{width:90px;color:#e2edf2;font-weight:300}@media (max-width: 550px){.setup-form label{width:100%}}.setup-form .form-group{padding-left:110px}@media (max-width: 550px){.setup-form .form-group{padding-left:0}}.setup-form input{width:300px;padding:7px;border:none;color:#fff;background:#3c4043;-webkit-transition:background ease 0.25s;-moz-transition:background ease 0.25s;transition:background ease 0.25s}@media (max-width: 550px){.setup-form input{width:100%}}.setup-form input:focus{border:none;background:#484c50}.setup-form p{font-size:12px;line-height:1.4em;color:#7d878a}.setup-form .button-add{width:100%;padding:0.9em 1.8em;font-size:13px}.settings .user-group-header{margin-bottom:0px;padding-bottom:20px;border:0 none;border-bottom:1px solid #d9d6c5}.settings .user-group-header h3{display:inline-block;margin:0;color:#c0bfb6;font-weight:normal;font-size:1.1em;line-height:1em}.settings .user-search{display:inline-block;float:right}.settings .user-search label{margin:0}.settings .user-search:hover .user-search-input,.settings .user-search .user-search-input:focus{width:260px;padding:0 10px}.settings .user-search .user-search-input{width:0px;padding:0;border:none;border-bottom:#f1f0ea 1px solid;-webkit-transition:width 0.2s ease-in-out;-moz-transition:width 0.2s ease-in-out;transition:width 0.2s ease-in-out;box-shadow:none}.settings .user-search .search-icon:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e007";font-size:1em;color:#c0bfb6}.settings .user-search .search-icon:hover{text-decoration:none}.settings .users{padding:0px;margin-top:0px;list-style:none}.settings .user{display:block;width:100%;padding:20px;border:0 none;border-top:1px solid #e2edf2}.settings .user:first-child{border:none}.settings .user .user-image{display:inline-block;width:40px;height:40px;margin-right:17px;vertical-align:middle;background-color:#edece4;border-radius:20px}.settings .user .user-image.invite{padding-top:8px;text-align:center}.settings .user .user-image.invite:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e012";font-size:1em;color:#aaa9a2}.settings .user .user-image.invite:hover{text-decoration:none}.settings .user .user-image img{width:40px;height:40px;border-radius:20px}.settings .user .user-meta{display:inline-block;vertical-align:middle}.settings .user .user-name{margin:0;margin-top:0.4em;font-weight:400;font-size:1.2em;line-height:1em}.settings .user .user-last-seen{line-height:1em}.settings .user-role{padding:2px 8px;float:right;font-size:0.8em;color:#fff;text-transform:uppercase}.settings .user-role.admin{background-color:#DE523A}.settings .user-role.editor{background-color:#4A8CBD}.settings .user-profile-header{position:relative}.settings .user-profile-header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background-color:transparent;background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,0.3));background-image:linear-gradient(transparent,rgba(0,0,0,0.3))}.settings .cover-image{display:block;line-height:0;width:100%;height:auto;min-height:180px}.settings .edit-cover-image{position:absolute;right:40px;bottom:38px;background:rgba(0,0,0,0.3);border-radius:0;color:rgba(255,255,255,0.8);z-index:2;border-radius:2px;-webkit-transition:color 0.3s ease,background 0.3s ease;-moz-transition:color 0.3s ease,background 0.3s ease;transition:color 0.3s ease,background 0.3s ease}@media (max-width: 1000px){.settings .edit-cover-image{right:15px}}.settings .edit-cover-image:hover{color:#fff;background:rgba(0,0,0,0.5)}.settings .user-profile{position:relative;top:-100px;z-index:1}.settings .user-profile fieldset{padding:0 40px}.settings fieldset.user-details-top{margin-bottom:0;padding:10px 0 0 0}.settings fieldset.user-details-top p{color:#fff}.settings .user-image{display:block;position:relative;width:120px;height:120px;float:left;margin-left:40px;margin-right:20px;text-align:center;border-radius:100%;overflow:hidden;border:5px solid #fff;background:#fff;z-index:2}.settings .user-image .img{display:block;width:110px;height:110px;background-size:cover;background-position:center center;border-radius:100%}.settings .user-image:hover .edit-user-image{opacity:1}.settings .edit-user-image{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:100%;background:rgba(0,0,0,0.5);opacity:0;color:#fff;line-height:105px;text-transform:uppercase;text-decoration:none;-webkit-transition:opacity 0.3s ease;-moz-transition:opacity 0.3s ease;transition:opacity 0.3s ease}.settings #user-name{border-color:#fff}.settings .user-details-bottom{padding:0 40px;margin:-30px 0 0 0} +.setup-box{display:table;max-width:500px;height:90%;margin:0 auto;padding:0}.setup-form{max-width:530px;padding:40px;color:#a5acae;background:#18191b}@media (max-width: 400px){.setup-form{padding:15px}}.setup-form header{margin-bottom:45px}@media (max-width: 550px){.setup-form header{margin-bottom:35px}}.setup-form footer{margin:40px 0 5px 0}@media (max-width: 550px){.setup-form footer{margin-top:35px}}.setup-form label{width:90px;color:#e2edf2;font-weight:300}@media (max-width: 550px){.setup-form label{width:100%}}.setup-form .form-group{padding-left:110px}@media (max-width: 550px){.setup-form .form-group{padding-left:0}}.setup-form input{width:300px;padding:7px;border:none;color:#fff;background:#3c4043;-webkit-transition:background ease 0.25s;-moz-transition:background ease 0.25s;transition:background ease 0.25s}@media (max-width: 550px){.setup-form input{width:100%}}.setup-form input:focus{border:none;background:#484c50}.setup-form p{font-size:12px;line-height:1.4em;color:#7d878a}.setup-form .button-add{width:100%;padding:0.9em 1.8em;font-size:13px}.settings .user-group-header{margin-bottom:0px;padding-bottom:20px;border:0 none;border-bottom:1px solid #d9d6c5}.settings .user-group-header h3{display:inline-block;margin:0;color:#c0bfb6;font-weight:normal;font-size:1.1em;line-height:1em}.settings .user-search{display:inline-block;float:right}.settings .user-search label{margin:0}.settings .user-search:hover .user-search-input,.settings .user-search .user-search-input:focus{width:260px;padding:0 10px}.settings .user-search .user-search-input{width:0px;padding:0;border:none;border-bottom:#f1f0ea 1px solid;-webkit-transition:width 0.2s ease-in-out;-moz-transition:width 0.2s ease-in-out;transition:width 0.2s ease-in-out;box-shadow:none}.settings .user-search .search-icon:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e007";font-size:1em;color:#c0bfb6}.settings .user-search .search-icon:hover{text-decoration:none}.settings .users{padding:0px;margin-top:0px;list-style:none}.settings .user{display:block;width:100%;padding:20px;border:0 none;border-top:1px solid #e2edf2}.settings .user:first-child{border:none}.settings .user .user-image{display:inline-block;width:40px;height:40px;margin-right:17px;vertical-align:middle;background-color:#edece4;border-radius:20px}.settings .user .user-image.invite{padding-top:8px;text-align:center}.settings .user .user-image.invite:before{font-family:"Icons";font-weight:normal;font-style:normal;vertical-align:-7%;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;content:"\e012";font-size:1em;color:#aaa9a2}.settings .user .user-image.invite:hover{text-decoration:none}.settings .user .user-image img{width:40px;height:40px;border-radius:20px}.settings .user .user-meta{display:inline-block;vertical-align:middle}.settings .user .user-name{margin:0;margin-top:0.4em;font-weight:400;font-size:1.2em;line-height:1em}.settings .user .user-last-seen{line-height:1em}.settings .user-role{padding:2px 8px;float:right;font-size:0.8em;color:#fff;text-transform:uppercase}.settings .user-role.admin{background-color:#DE523A}.settings .user-role.editor{background-color:#4A8CBD}.settings .user-profile-header{position:relative}.settings .user-profile-header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background-color:transparent;background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,0.3));background-image:linear-gradient(transparent,rgba(0,0,0,0.3))}.settings .cover-image{display:block;line-height:0;width:100%;height:auto;min-height:180px}.settings .edit-cover-image{position:absolute;right:40px;bottom:38px;background:rgba(0,0,0,0.3);border-radius:0;color:rgba(255,255,255,0.8);z-index:2;border-radius:2px;-webkit-transition:color 0.3s ease,background 0.3s ease;-moz-transition:color 0.3s ease,background 0.3s ease;transition:color 0.3s ease,background 0.3s ease}@media (max-width: 1000px){.settings .edit-cover-image{right:15px}}.settings .edit-cover-image:hover{color:#fff;background:rgba(0,0,0,0.5)}.settings .user-profile{position:relative;top:-100px;z-index:1}.settings .user-profile fieldset{padding:0 40px}.settings .user-profile textarea{min-width:240px}@media (max-width: 500px){.settings fieldset.user-details-top{margin-bottom:10px}}@media (min-width: 501px){.settings fieldset.user-details-top{margin-bottom:0;padding:10px 0 0 0}.settings fieldset.user-details-top p{color:#fff}}.settings .user-image{display:block;position:relative;width:120px;height:120px;float:left;margin-left:40px;margin-right:20px;text-align:center;border-radius:100%;overflow:hidden;border:5px solid #fff;background:#fff;z-index:2}@media (max-width: 500px){.settings .user-image{margin-left:-10px}}.settings .user-image .img{display:block;width:110px;height:110px;background-size:cover;background-position:center center;border-radius:100%}.settings .user-image:hover .edit-user-image{opacity:1}.settings .edit-user-image{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:100%;background:rgba(0,0,0,0.5);opacity:0;color:#fff;line-height:105px;text-transform:uppercase;text-decoration:none;-webkit-transition:opacity 0.3s ease;-moz-transition:opacity 0.3s ease;transition:opacity 0.3s ease}@media (min-width: 501px){.settings #user-name{border-color:#fff}}.settings .user-details-bottom{padding:0 40px;margin:-30px 0 0 0}