mirror of
https://github.com/twisterarmy/theme_nin.git
synced 2025-02-04 11:04:19 +00:00
update to fit profile-edit.html to #/account modal conversion
This commit is contained in:
Simon Grim
parent
f398a0c84a
commit
79ccb80409
161
css/style.css
161
css/style.css
@ -2,7 +2,7 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp, .forEdition.profile-card .secret-key-container .secret-key,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, .profile-bio, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
@ -318,7 +318,7 @@ textarea, input {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
samp, .forEdition.profile-card .secret-key-container .secret-key {
|
||||
samp {
|
||||
background: #3E3C42;
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
@ -356,7 +356,7 @@ h3 .isFollowing:after {
|
||||
box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
|
||||
}
|
||||
|
||||
.clear-fix:after, .userMenu > ul:after, .wrapper:after, .dashboard > .module:after, .dashboard > .module ol:after, .modal-wrapper.following-modal a:after, .modal-wrapper .modal-content:after, .modal-header:after, .prompt-wrapper .modal-header:after, .mini-profile .post-area .modal-header:after, .twister-user:after, .direct-messages-thread .post:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .forEdition.profile-card:after, .forEdition.profile-card .profile-card-main:after, .network.singleBlock:after, .network.singleBlock .module:after, .options .tab-content:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after {
|
||||
.clear-fix:after, .userMenu > ul:after, .wrapper:after, .dashboard > .module:after, .dashboard > .module ol:after, .modal-wrapper.following-modal a:after, .modal-wrapper .modal-content:after, .modal-header:after, .prompt-wrapper .modal-header:after, .mini-profile .post-area .modal-header:after, .twister-user:after, .direct-messages-thread .post:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .network.singleBlock:after, .network.singleBlock .module:after, .options .tab-content:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
@ -1452,6 +1452,60 @@ button.light:hover, a.button.light:hover {
|
||||
border-color: #687b40;
|
||||
}
|
||||
|
||||
/********* ACCOUNT MODAL ******** */
|
||||
.account-modal .module {
|
||||
margin: 4px;
|
||||
}
|
||||
.account-modal .module > div {
|
||||
margin: 4px 0;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
.account-modal input, .account-modal textarea {
|
||||
display: block;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
width: 320px;
|
||||
margin: 12px 16px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.account-modal textarea {
|
||||
width: 320px;
|
||||
max-width: 320px;
|
||||
min-width: 320px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.account-modal input:focus, .account-modal textarea:focus {
|
||||
border-bottom: solid 1px #A1B775;
|
||||
}
|
||||
.account-modal .alias {
|
||||
margin: 0px 16px;
|
||||
}
|
||||
.account-modal .avatar {
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
margin: 12px 16px;
|
||||
}
|
||||
.account-modal .avatar img {
|
||||
width: 64px;
|
||||
height: auto;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.account-modal .c-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
.account-modal .toggle-secret-key {
|
||||
float: left;
|
||||
}
|
||||
.account-modal .secret-key-container {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.account-modal .secret-key {
|
||||
background-color: #A1B775;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/****** LOGIN TO ACCOUNT MODAL ***** */
|
||||
.login-modal .module {
|
||||
margin: 4px;
|
||||
@ -1575,10 +1629,6 @@ button.light:hover, a.button.light:hover {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.profile-card-photo.forEdition {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
text-align: left;
|
||||
font-size: 0.9rem;
|
||||
@ -2200,103 +2250,6 @@ button.light:hover, a.button.light:hover {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.forEdition.profile-card {
|
||||
padding: 0;
|
||||
background: none;
|
||||
background: #FDFCFA;
|
||||
-moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
|
||||
-webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
|
||||
box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
|
||||
}
|
||||
.forEdition.profile-card .profile-card-main {
|
||||
padding: 20px;
|
||||
margin: 0 0 1px 0;
|
||||
}
|
||||
.forEdition.profile-card .profile-card-main input {
|
||||
display: block;
|
||||
margin: 0 0 10px 100px;
|
||||
width: 600px;
|
||||
background: #F3F2F0;
|
||||
border: 1px solid #FDFCFA;
|
||||
padding: 6px 4px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.forEdition.profile-card .profile-card-main input:hover, .forEdition.profile-card .profile-card-main input:focus {
|
||||
background: white;
|
||||
border-color: #000;
|
||||
}
|
||||
.forEdition.profile-card img {
|
||||
width: 70px;
|
||||
float: left;
|
||||
}
|
||||
.forEdition.profile-card h2 {
|
||||
font-weight: 400;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ExYjc3NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVlODBhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
|
||||
background-size: 100%;
|
||||
background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #a1b775), color-stop(100%, #5e80a2));
|
||||
background-image: -moz-linear-gradient(right, #a1b775, #5e80a2);
|
||||
background-image: -webkit-linear-gradient(right, #a1b775, #5e80a2);
|
||||
background-image: linear-gradient(to left, #a1b775, #5e80a2);
|
||||
padding: 1rem 2rem;
|
||||
color: white;
|
||||
}
|
||||
.forEdition.profile-card h3 {
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
padding: 0 1.5rem;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.forEdition.profile-card h3:after {
|
||||
display: block;
|
||||
content: "";
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: rgba(95, 129, 161, 0.5);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.forEdition.profile-card button {
|
||||
float: right;
|
||||
margin: 10px;
|
||||
}
|
||||
.forEdition.profile-card button.last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.forEdition.profile-card button.submit-changes {
|
||||
background: #A1B775;
|
||||
border-color: #96ae64;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
.forEdition.profile-card button.submit-changes:hover {
|
||||
border-color: #687b40;
|
||||
}
|
||||
.forEdition.profile-card button.toggle-priv-key {
|
||||
background: #64676C;
|
||||
border-color: #585a5f;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
.forEdition.profile-card button.toggle-priv-key:hover {
|
||||
border-color: #3f4144;
|
||||
}
|
||||
.forEdition.profile-card .secret-key-container {
|
||||
text-align: left !important;
|
||||
font-size: 1rem !important;
|
||||
clear: both;
|
||||
padding: 10px;
|
||||
}
|
||||
.forEdition.profile-card .secret-key-container .label {
|
||||
clear: both;
|
||||
display: block;
|
||||
float: left;
|
||||
font-weight: 700;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/********** LOGIN AND NETWORK PAGES ****** */
|
||||
.network.singleBlock ul {
|
||||
line-height: 2rem;
|
||||
|
||||
@ -89,8 +89,8 @@ function reOrganizeTemplates() { // for nin's templating
|
||||
$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
|
||||
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
|
||||
|
||||
///// page profile
|
||||
$('.forEdition .profile-card-main h2').detach().insertBefore($('.profile-card-main'));
|
||||
twister.tmpl.accountMC.find('.alias')
|
||||
.insertBefore(twister.tmpl.accountMC.find('.avatar'));
|
||||
|
||||
//loader
|
||||
newLoader()
|
||||
|
||||
43
sass/layout/_account.sass
Normal file
43
sass/layout/_account.sass
Normal file
@ -0,0 +1,43 @@
|
||||
/********* ACCOUNT MODAL *********/
|
||||
|
||||
.account-modal
|
||||
.module
|
||||
margin: 4px
|
||||
> div
|
||||
margin: 4px 0
|
||||
padding: 4px 12px
|
||||
input, textarea
|
||||
display: block
|
||||
border: 1px solid rgba(0, 0, 0, .1)
|
||||
width: 320px
|
||||
margin: 12px 16px
|
||||
padding: 2px 4px
|
||||
textarea
|
||||
width: 320px
|
||||
max-width: 320px
|
||||
min-width: 320px
|
||||
min-height: 28px
|
||||
input:focus, textarea:focus
|
||||
border-bottom: solid 1px $main-color-color
|
||||
.alias
|
||||
margin: 0px 16px
|
||||
.avatar
|
||||
cursor: pointer
|
||||
width: 64px
|
||||
height: 64px
|
||||
overflow: hidden
|
||||
margin: 12px 16px
|
||||
img
|
||||
width: 64px
|
||||
height: auto
|
||||
border: 1px solid rgba(0, 0, 0, .1)
|
||||
.c-buttons
|
||||
text-align: right
|
||||
.toggle-secret-key
|
||||
float: left
|
||||
.secret-key-container
|
||||
text-align: center
|
||||
font-size: 12px
|
||||
.secret-key
|
||||
background-color: $color-green
|
||||
font-weight: bold
|
||||
@ -89,8 +89,6 @@ $modal-postboard-post-height: 100%
|
||||
margin: 0 10px 10px 0
|
||||
display: block
|
||||
float: left
|
||||
.profile-card-photo.forEdition
|
||||
float: none
|
||||
|
||||
.profile-bio
|
||||
@extend i
|
||||
|
||||
@ -1,79 +0,0 @@
|
||||
// PAGE PROFILE
|
||||
|
||||
.forEdition.profile-card
|
||||
|
||||
padding: 0
|
||||
background: none
|
||||
background: $bloc-light-color
|
||||
+box-shadow(1px 2px 2px rgba(#111, 0.1))
|
||||
|
||||
@extend .clear-fix
|
||||
.profile-card-main
|
||||
|
||||
@extend .clear-fix
|
||||
|
||||
padding: 20px
|
||||
margin: 0 0 1px 0
|
||||
|
||||
input
|
||||
display: block
|
||||
margin: 0 0 10px 100px
|
||||
width: 600px
|
||||
|
||||
background: $bloc-background-color
|
||||
border: 1px solid $bloc-light-color
|
||||
padding: 6px 4px
|
||||
margin-bottom: 4px
|
||||
font-size: 1rem
|
||||
font-weight: 400
|
||||
&:hover, &:focus
|
||||
background: white
|
||||
border-color: $main-color-light
|
||||
|
||||
img
|
||||
width: 70px
|
||||
float: left
|
||||
h2
|
||||
font-weight: 400
|
||||
+background-image(linear-gradient(to left , $color-green, #5E80A2) )
|
||||
padding: 1rem 2rem
|
||||
color: white
|
||||
|
||||
|
||||
h3
|
||||
font-weight: 600
|
||||
margin-top: 2*$space
|
||||
padding: 0 1.5rem
|
||||
+box-sizing(content-box)
|
||||
&:after
|
||||
display: block
|
||||
content: ''
|
||||
height: 1px
|
||||
width: 100%
|
||||
background: rgba(#5F81A1,.5)
|
||||
margin-top: $space
|
||||
|
||||
button
|
||||
float: right
|
||||
margin: 10px
|
||||
&.last-child
|
||||
margin-right: 0
|
||||
&.submit-changes
|
||||
@include button-color-basic
|
||||
&.toggle-priv-key
|
||||
@include button-color-basic(2)
|
||||
.secret-key-container
|
||||
text-align: left !important
|
||||
font-size: 1rem!important
|
||||
clear: both
|
||||
padding: 10px
|
||||
|
||||
|
||||
.label
|
||||
clear: both
|
||||
display: block
|
||||
float: left
|
||||
font-weight: 700
|
||||
margin-right: 20px
|
||||
.secret-key
|
||||
@extend samp
|
||||
@ -14,6 +14,7 @@
|
||||
@import 'layout/_menu'
|
||||
@import 'layout/_wrapper'
|
||||
@import 'layout/_modal'
|
||||
@import 'layout/_account'
|
||||
@import 'layout/_login'
|
||||
@import 'layout/_profile'
|
||||
@import 'layout/_postboard'
|
||||
@ -21,7 +22,6 @@
|
||||
|
||||
// pages
|
||||
|
||||
@import 'pages/_profile'
|
||||
@import 'pages/_network'
|
||||
|
||||
@import 'layout/_tabs'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user