twisterarmy
/
theme_nin
mirror of https://github.com/twisterarmy/theme_nin.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

login page

nin-v2
myleneb 9 years ago
parent
cf8be37eac
commit
ac9a9c6937
2 changed files with 96 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 90
      css/style.css
  2. 62
      sass/pages/_login.sass

90
css/style.css
Unescape View File

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
h1, h2, h3, .login .module p span, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
@ -281,7 +281,7 @@ h2 { @@ -281,7 +281,7 @@ h2 {
line-height: 1.1em;
}
h3 {
h3, .login .module p span {
font-size: 1.1em;
font-weight: 400;
line-height: 1.1em;
@ -322,10 +322,10 @@ samp { @@ -322,10 +322,10 @@ samp {
line-height: 10px;
}
h3 .isFollowing:before {
h3 .isFollowing:before, .login .module p span .isFollowing:before {
display: none !important;
}
h3 .isFollowing:after {
h3 .isFollowing:after, .login .module p span .isFollowing:after {
display: none !important;
}
@ -335,7 +335,7 @@ h3 .isFollowing:after { @@ -335,7 +335,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, .twister-user:after, .direct-messages-thread .post:after, .forEdition.profile-card:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .following .following-list li a: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, .twister-user:after, .direct-messages-thread .post:after, .forEdition.profile-card:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .following .following-list li a:after, .login .module: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;
@ -563,7 +563,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -563,7 +563,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
border-radius: 3px;
overflow: hidden;
}
.dashboard > .module h3 {
.dashboard > .module h3, .login .dashboard > .module p span {
float: left;
padding: 10px;
}
@ -721,7 +721,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -721,7 +721,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.modal-header h3, .prompt-wrapper .modal-header h3 {
.modal-header h3, .prompt-wrapper .modal-header h3, .modal-header .login .module p span, .login .module p .modal-header span {
padding-left: 20px;
line-height: 52px;
font-weight: 500;
@ -806,11 +806,11 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -806,11 +806,11 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
padding: 10px;
background: white;
}
.prompt-wrapper .modal-header h3 span {
.prompt-wrapper .modal-header h3 span, .prompt-wrapper .modal-header .login .module p span span, .login .module p .prompt-wrapper .modal-header span span {
padding-left: 5px;
color: white;
}
.prompt-wrapper .modal-header h3 span:hover {
.prompt-wrapper .modal-header h3 span:hover, .prompt-wrapper .modal-header .login .module p span span:hover, .login .module p .prompt-wrapper .modal-header span span:hover {
cursor: default;
}
@ -878,7 +878,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -878,7 +878,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
padding: 5px;
width: 100% !important;
}
.modal-wrapper.directMessages .modal-header h3 span {
.modal-wrapper.directMessages .modal-header h3 span, .modal-wrapper.directMessages .modal-header .login .module p span span, .login .module p .modal-wrapper.directMessages .modal-header span span {
display: inline-block !important;
padding-left: 5px;
color: white;
@ -1672,24 +1672,61 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -1672,24 +1672,61 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
display: none !important;
}
.login .header-bold {
.login 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;
}
.login h3, .login .module p span {
font-weight: 600;
margin-top: 2rem;
padding: 0 1.5rem;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.login h3:after, .login .module p span:after {
display: block;
width: 720px;
margin: 0px auto 12px auto;
content: "";
height: 1px;
width: 100%;
background: rgba(95, 129, 161, 0.5);
margin-top: 1rem;
}
.login .module {
background: white;
padding: 1rem;
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);
padding: 20px;
margin-bottom: 1px;
clear: none;
}
.login .module p {
margin-bottom: 5px;
}
.login .module p span {
margin-bottom: 20px;
display: block;
padding: 0;
}
.login .module input {
padding: 5px 10px;
background: #f3f3f3;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
font-size: 14px;
max-width: 100%;
}
.login .module input.new-username, .login .module input.username-import {
float: left;
margin-right: 10px;
}
.login .module input:focus, .login .module select:focus {
background: white;
@ -1707,22 +1744,9 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -1707,22 +1744,9 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
margin-left: 10px;
color: #45474d;
}
.login .module:nth-child(2) div,
.login .module:nth-child(3) div:nth-child(2),
.login .secret-key-import,
.login .username-import {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 16px;
}
.login .create-user,
.login .import-secret-key {
display: block;
margin-left: auto;
margin-right: 16px;
}
.login .with-nickname, .login .import-secret-key, .login .create-user {
margin-top: 10px;
.login .module .create-user {
clear: both;
margin: 20px 0;
}
/********** LOGIN AND NETWORK PAGES ****** */
@ -1803,7 +1827,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -1803,7 +1827,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
padding: 1rem 2rem;
color: white;
}
.network h3 {
.network h3, .network .login .module p span, .login .module p .network span {
font-weight: 600;
margin-top: 2rem;
padding: 0 1.5rem;
@ -1811,7 +1835,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -1811,7 +1835,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.network h3:after {
.network h3:after, .network .login .module p span:after, .login .module p .network span:after {
display: block;
content: "";
height: 1px;

62
sass/pages/_login.sass
Unescape View File

@ -1,17 +1,42 @@ @@ -1,17 +1,42 @@
.login
.header-bold
display: block
width: 720px
margin: 0px auto 12px auto
h2
font-weight: 400
+background-image(linear-gradient(to left , $color-green, #5E80A2) )
padding: 1rem 2rem
color: white
.module
background: white
padding: $space
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
.module
background: $bloc-light-color
+box-shadow(1px 2px 2px rgba(#111, 0.1))
@extend .clear-fix
padding: 20px
margin-bottom: 1px
clear: none
p
margin-bottom: 5px
span
@extend h3
margin-bottom: 20px
display: block
padding: 0
input
padding: 5px 10px
@ -19,6 +44,10 @@ @@ -19,6 +44,10 @@
border: solid 1px #dcdcdc
transition: box-shadow 0.3s, border 0.3s
font-size: 14px
max-width: 100%
&.new-username, &.username-import
float: left
margin-right: 10px
input:focus, select:focus
background: white
@ -36,20 +65,7 @@ @@ -36,20 +65,7 @@
margin-left: 10px
color: #45474d
.create-user
clear: both
margin: 20px 0
.module:nth-child(2) div,
.module:nth-child(3) div:nth-child(2),
.secret-key-import,
.username-import
margin-top: 20px
margin-bottom: 20px
margin-left: 16px
.create-user,
.import-secret-key
display: block
margin-left: auto
margin-right: 16px
.with-nickname, .import-secret-key, .create-user
margin-top: 10px
Write Preview
Loading…
Cancel
Save