joshuapekera
1/5/2013 - 5:08 AM
I revamp of workless' responsive file
I revamp of workless' responsive file
#logo {
display:none;
}
.topbar {
height:50px;
}
.topbar ul li a {
padding:15px 5px;
}
.subbar {
margin-top:25px;
}
.sections_bar {
margin-top:0;
}
#content-body {
top:0;
}
/*
nav#primary .chzn-container {
margin-top:10px;
width:90px!important;
}
*/
nav#primary ul.primary-nav {
display:none;
}
nav#primary .chzn-container {
display:inherit;
}
input[type="text"],input[type="password"],input[type="password"], {
width:200px;
}
textarea,.cke_skin_kama .cke_wrapper {
width:230px;
}
select {
/* width:245px; */
width:auto;
max-width: 100%;
min-width: 100px;
}
/*
#filters form > ul > li .chzn-container {
width: 225px!important;
float: left;
}
#filters form input[type="text"] {
width: 140px;
height: 12px;
float: left;
}
.chzn-drop {
width: 223px!important;
float: left;
}
.chzn-search input {
width: 180px!important;
}
*/
.one_full {
width:100%;
margin-bottom:20px;
*zoom:1;
}
.one_full:before,.one_full:after {
display:table;
line-height:0;
content:"";
}
.one_full:after {
clear:both;
}
.one_full > [class*="item"] {
display:block;
float:left;
width:100%;
/* min-height: 100px; */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.one_full [class*="item"]:first-child {
margin-left:0;
}
.one_full .one_half:last-child {
float: right;
}
.wrapper {
position:relative;
}
.wrapper:before,
.wrapper:after {
display: table;
line-height: 0;
content: "";
}
.wrapper:after {
clear: both;
}
/* Login Screen */
#container.login-screen {
width:100%;
}
body#login-body {
background:#333 url(../../img/nav-grain.png) repeat;
}
#login-logo {
background-image:url(../../img/login-logo.png);
background-repeat:no-repeat;
display:inline-block;
height:40px;
width:126px;
margin:10px 0;
}
.login-screen #content {
margin:10px 10px 70px!important;
}
.login-screen section.item {
}
.login-screen section#content {
width:auto;
text-align:center;
}
.login-screen #content-body {
width:100%;
margin:0 auto;
}
.login-screen #content-body .input {
width:auto;
text-align:center;
padding-left:0;
}
.login-screen #content-body form li {
padding:0;
margin:0;
line-height:40px;
vertical-align:middle;
display:inline-block;
text-align:center;
border-bottom:none;
}
.login-screen #content-body form li label {
width:30%;
text-align:right;
}
.login-screen #content-body form li input[type="text"],.login-screen #content-body form li input[type="password"] {
position:relative;
min-width:210px;
width:228px;
padding:8px 5px;
margin: 10px 0;
font-size:13px;
font-weight:400;
line-height:20px;
background:#222;
border:1px solid #222;
-webkit-box-shadow:inset 0 0 2px 0 #111,0 1px 1px 0 rgba(255,255,255,.05);
-moz-box-shadow:inset 0 0 2px 0 #111,0 1px 1px 0 rgba(255,255,255,.05);
-ms-box-shadow:inset 0 0 2px 0 #111,0 1px 1px 0 rgba(255,255,255,.05);
-o-box-shadow:inset 0 0 2px 0 #111,0 1px 1px 0 rgba(255,255,255,.05);
box-shadow:inset 0 0 2px 0 #111,0 1px 1px 0 rgba(255,255,255,.05);
vertical-align:baseline;
outline:none;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
-webkit-transition:200ms linear all;
-moz-transition:200ms linear all;
-o-transition:200ms linear all;
transition:200ms linear all;
-webkit-font-smoothing:subpixel-antialiased;
}
.login-screen #content-body form li input[type="text"]:-webkit-autofill,.login-screen #content-body form li input[type="password"]:-webkit-autofill {
background-color:#111!important;
color:#FAA537!important;
}
.login-screen #content-body form li input[type="text"]::-webkit-input-placeholder,.login-screen #content-body form li input[type="password"]::-webkit-input-placeholder {
color:#777;
}
.login-screen #content-body form li input[type="text"]:-moz-placeholder,.login-screen #content-body form li input[type="password"]:-moz-placeholder {
color:#777;
}
.login-screen #content-body form li input[type="text"]:-ms-input-placeholder,.login-screen #content-body form li input[type="password"]:-ms-input-placeholder {
color:#777;
}
.login-screen #content-body form li input[type="text"]:focus,.login-screen #content-body form li input[type="password"]:focus {
background:#111;
-webkit-box-shadow:inset 0 0 2px 0 #111,0 1px 1px 0 rgba(255,255,255,.08);
-moz-box-shadow:inset 0 0 2px 0 #111,0 1px 1px 0 rgba(255,255,255,.08);
-ms-box-shadow:inset 0 0 2px 0 #111,0 1px 1px 0 rgba(255,255,255,.08);
-o-box-shadow:inset 0 0 2px 0 #111,0 1px 1px 0 rgba(255,255,255,.08);
box-shadow:inset 0 0 2px 0 #111,0 1px 1px 0 rgba(255,255,255,.08);
}
.login-screen #content-body form li label#login-remember {
position:relative;
text-align:center;
line-height:20px;
color:#fff;
}
.login-screen #content-body form li label#login-remember input {
margin-right:10px;
position:relative;
top:0;
}
#login-buttons {
vertical-align:middle;
margin:10px auto;
text-align:center;
min-width:210px;
width:240px;
}
button#login-submit {
height:40px;
width:100%;
cursor:pointer;
display:inline-block;
padding:5px 10px;
text-shadow:0 1px 0px #424242;
color:white;
font-size:13px;
line-height:18px;
border:1px solid #222;
background-color:#222;
background-repeat:repeat-x;
background-image:url('../../img/nav-grain.png'),-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5f6569),color-stop(100%,#45494c));
background-image:url('../../img/nav-grain.png'),-webkit-linear-gradient(top,#5f6569,#45494c);
background-image:url('../../img/nav-grain.png'),-moz-linear-gradient(top,#5f6569,#45494c);
background-image:url('../../img/nav-grain.png'),-ms-linear-gradient(top,#5f6569,#45494c);
background-image:url('../../img/nav-grain.png'),-o-linear-gradient(top,#5f6569,#45494c);
background-image:url('../../img/nav-grain.png'),linear-gradient(top,#5f6569,#45494c);
-webkit-border-radius:6px;
-moz-border-radius:6px;
-ms-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:inset 0 1px 1px 0 rgba(255,255,255,0.40), 0 1px 0px 0 rgba(255,255,255,0.1);
-moz-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.2), 0 1px 0px 0 rgba(255,255,255,0.1);
-ms-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.2), 0 1px 0px 0 rgba(255,255,255,0.1);
-o-box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.2), 0 1px 0px 0 rgba(255,255,255,0.1);
box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.2), 0 1px 0px 0 rgba(255,255,255,0.1);
-webkit-transition:0ms linear all;
-moz-transition:0ms linear all;
-ms-transition:0ms linear all;
-o-transition:0ms linear all;
transition:0ms linear all;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:transparent;
}
button#login-submit:hover {
background-image:url('../../img/nav-grain.png'),-webkit-gradient(linear,left top,left bottom,color-stop(0%,#35383b),color-stop(100%,#474B4E));
background-image:url('../../img/nav-grain.png'),-webkit-linear-gradient(top,#35383b,#474B4E);
background-image:url('../../img/nav-grain.png'),-moz-linear-gradient(top,#35383b,#474B4E);
background-image:url('../../img/nav-grain.png'),-ms-linear-gradient(top,#35383b,#474B4E);
background-image:url('../../img/nav-grain.png'),-o-linear-gradient(top,#35383b,#474B4E);
background-image:url('../../img/nav-grain.png'),linear-gradient(top,#35383b,#474B4E);
background-position: 0 0;
-webkit-box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.8), 0 1px 0px 0 rgba(255,255,255,0.1);
-moz-box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.8), 0 1px 0px 0 rgba(255,255,255,0.1);
-ms-box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.8), 0 1px 0px 0 rgba(255,255,255,0.1);
-o-box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.8), 0 1px 0px 0 rgba(255,255,255,0.1);
box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.8), 0 1px 0px 0 rgba(255,255,255,0.1);
}
#login-footer {
background:#333 url('../../img/nav-grain.png') repeat;
border-top:none;
text-align:center;
color:#777;
font-size:12px;
text-shadow:none;
margin-top:-75px;
}
#login-footer span#version {
display:inline-block;
color:#222;
text-shadow:0 1px 0 #444;
padding-top:4px;
}
/* !PRIMARY Landscape phone to portrait tablet
----------------------------------------*/
@media (max-width: 767px) {
/* Styles */
/* !Basic Page Styles
------------------------------------ */
}
/* !Mobile Devices Landscape Specific
----------------------------------------*/
@media (min-width: 480px) and (max-width: 767px) {
/* Styles */
}
/* !PRIMARY Landscape phones and down
---------------------------------------------------------------------*/
@media (max-width: 480px) {
/* Styles */
}
/* !PRIMARY Portrait tablet to landscape and desktop
------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 979px) {
/* Styles */
}
/* !iPads (portrait and landscape)
---------------------------------------------------------------------------------------*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* !iPads (landscape)
------------------------ */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* !iPads (portrait)
----------------------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* !Slightly Wide Desktop Display
------------------------------------*/
@media (min-width: 980px) {
/* Styles */
}
/* !Large Desktop Displays
----------------------------------------*/
@media (min-width: 1200px) {
/* Styles */
}
/* !Retina Displays (Tip: Best used only for image replacement)
------------------------------------------------------------------ */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 21),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Styles */
body {
background:#e9e9e9 url('../../img/bg_grain@2x.png') repeat;
background-size:200px 200px;
}
.topbar {
background-image:url('../../img/nav-grain@2x.png'),-webkit-gradient(linear,left top,left bottom,color-stop(0%,#555),color-stop(100%,#333));
background-image:url('../../img/nav-grain@2x.png'),-webkit-linear-gradient(top,#555,#333);
background-image:url('../../img/nav-grain@2x.png'),-moz-linear-gradient(top,#555,#333);
background-image:url('../../img/nav-grain@2x.png'),-ms-linear-gradient(top,#555,#333);
background-image:url('../../img/nav-grain@2x.png'),-o-linear-gradient(top,#555,#333);
background-image:url('../../img/nav-grain@2x.png'),linear-gradient(top,#555,#333);
background-size: 113px 50px;
}
#pyro-logo {
background: url('../../img/logo@2x.png') no-repeat;
background-size: 18px 28px;
}
body#login-body {
background:#333 url('../../img/nav-grain@2x.png') repeat;
background-size:113px 113px;
}
#login-logo {
background-image:url('../../img/login-logo@2x.png');
background-size:126px 40px;
}
button#login-submit {
background-image:url('../../img/nav-grain@2x.png'),-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5f6569),color-stop(100%,#45494c));
background-image:url('../../img/nav-grain@2x.png'),-webkit-linear-gradient(top,#5f6569,#45494c);
background-image:url('../../img/nav-grain@2x.png'),-moz-linear-gradient(top,#5f6569,#45494c);
background-image:url('../../img/nav-grain@2x.png'),-ms-linear-gradient(top,#5f6569,#45494c);
background-image:url('../../img/nav-grain@2x.png'),-o-linear-gradient(top,#5f6569,#45494c);
background-image:url('../../img/nav-grain@2x.png'),linear-gradient(top,#5f6569,#45494c);
background-size: 113px 113px;
}
}
/* !iPad Retina Displays (Tip: Best used only for image replacement)
------------------------------------------------------------------ */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 21),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx)
and (max-device-width: 1024px) {
/* Styles */
}
/* !iPhone Retina Displays (Tip: Best used only for image replacement)
------------------------------------------------------------------ */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 21),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx)
and (max-device-width: 480px) {
/* Styles */
}
/* !Animated
------------------------------------------------------------------ */
#login-logo {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#login-un {
-webkit-animation-duration: .25s;
-moz-animation-duration: .25s;
-o-animation-duration: .25s;
animation-duration: .25s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#login-pw {
-webkit-animation-duration: .25s;
-moz-animation-duration: .25s;
-o-animation-duration: .25s;
animation-duration: .25s;
-webkit-animation-delay: 2.25s;
-moz-animation-delay: 2.25s;
-o-animation-delay: 2.25s;
animation-delay: 2.25s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#login-save {
-webkit-animation-duration: .25s;
-moz-animation-duration: .25s;
-o-animation-duration: .25s;
animation-duration: .25s;
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
animation-delay: 2.5s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#login-action {
-webkit-animation-duration: .25s;
-moz-animation-duration: .25s;
-o-animation-duration: .25s;
animation-duration: .25s;
-webkit-animation-delay: 2.75s;
-moz-animation-delay: 2.75s;
-o-animation-delay: 2.75s;
animation-delay: 2.75s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#login-credits {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
}