Skip to content
Browse files

[css] cleaned, optimized and unified desktop css and added mobile css…

… with media query to it
  • Loading branch information...
1 parent d7ddd2b commit efb2916f95505adb9d0703a7691d6a16de29b92c Ida Swarczewskaja committed
Showing with 102 additions and 72 deletions.
  1. +102 −72 resources/style.css
View
174 resources/style.css
@@ -1,13 +1,28 @@
/**
* @author Ida Swarczewskaja (CSS & design)
*/
-html {background: #600B00 url('/resources/opado-bg-tile.jpg') repeat 0 0;}
+html {
+ background: #600B00 fixed url('/resources/opado-bg-tile.jpg') repeat top left;
+}
body {
- background: url('/resources/opado-bg-gradient-tile.jpg') repeat-x top left;
+ background:transparent fixed url('/resources/opado-bg-gradient-tile.jpg') repeat-x top left;
color: #6C6B66;
+ min-height:480px;
+}
+.topbar {
+ background:transparent url('/resources/opado-bg-gradient-tile.jpg') repeat-x 0 40%;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+ box-shadow:0 1px 5px rgba(0,0,0,0.15) inset, 0 1px 1px rgba(255,255,255,0.1);
+ -moz-box-shadow:0 1px 5px rgba(0,0,0,0.15) inset, 0 1px 1px rgba(255,255,255,0.1);
+ -webkit-box-shadow:0 1px 5px rgba(0,0,0,0.15) inset, 0 1px 1px rgba(255,255,255,0.1);
+ height:50px;
}
-.topbar {background: url('/resources/opado-bg-gradient-tile.jpg') repeat-x top left;}
-.hero-unit {position:relative; top:60px; }
+.hero-unit {
+ position:relative;
+ top:60px;
+ margin-bottom:0;
+ padding:5px 0;
+ background:transparent;}
/* Links */
a {color:#600B00;text-decoration:none;}
@@ -15,7 +30,7 @@ a:hover {color:#480800;}
a img {border: none;}
/* Buttons */
-.btn, button[type="submit"] {
+.btn {
background-color: #600B00;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#803C33), to(#600B00));
background-image: -webkit-linear-gradient(#803C33,#600B00);
@@ -27,73 +42,42 @@ a img {border: none;}
border-color:#600B00;
border-bottom: 1px solid #480800;
}
-.btn, button[type="submit"], .topbar a.btn {
+.btn, .topbar a.btn {
color:#FFE;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
-.btn:hover, button[type="submit"]:hover, .topbar a.btn:hover {color:#DDC;}
-.btn.large, button[type="submit"] {width:150px;}
+.btn:hover, .topbar a.btn:hover {color:#DDC;}
+.btn.large {width:180px;}
.btn > .icon {margin-left:-3px;}
-/* Add class .btn to loginbox submit button and remove this style */
-button[type="submit"] {
- font-size: 15px;
- line-height: normal;
- padding: 9px 14px 9px;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- border-radius: 6px;
- cursor: pointer;
- display: inline-block;
- -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
- -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
- -webkit-transition: 0.1s linear all;
- -moz-transition: 0.1s linear all;
- -ms-transition: 0.1s linear all;
- -o-transition: 0.1s linear all;
- transition: 0.1s linear all;
- border-image: initial;
-}
-
/* Main structure */
/* Topbar */
-.topbar {height:60px;}
-.topbar a.btn{margin-top:15px;}
+.topbar a.btn{margin-top:12px;}
.topbar .brand {
background: url('/resources/opado-logo.png') no-repeat 20px 0;
height: 22px;
width:134px;
- margin-top: 10px;
+ margin-top:4px;
}
/* Container */
-.container {
- width:480px;
-}
-#todoapp {padding-top:60px;}
-
-/* Top content box */
-.hero-unit {
- margin-bottom:0;
- padding:0 0 10px 0;
- background:transparent;
-}
+.container {width:480px;}
+#todoapp {padding-top:65px;}
/* Main content box */
.content {
background: url('/resources/paper-bg-tile.jpg') repeat 0 0;
border-top:1px solid white;
position:relative;
- padding: 10px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px 5px 5px 5px;
+ padding: 0 10px 10px 10px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0 1px 3px #EDECE3 inset, 0 3px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px #EDECE3 inset, 0 3px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px #EDECE3 inset, 0 3px 5px rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
-.content form, .content h1 {margin-left:10px;}
+.content h1 {margin-top:10px;}
/* Inputs */
input {
@@ -107,18 +91,26 @@ input {
border-bottom: 1px solid white;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2)
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+input, ul#todo_list input[type="checkbox"] {
+ background: #EFEFDF;
+ border: 1px solid #BBB;
+ border-bottom: 1px solid white;
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
input#new_todo {
width:466px;
- background-color:rgba(0,0,0,0.2);
+ background:transparent url('/resources/opado-bg-gradient-tile.jpg') repeat-x 0 60%;
border: 1px solid #600B00;
color:#BBA;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset,rgba(255,255,255,0.1) 0 1px 3px;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset,rgba(255,255,255,0.1) 0 1px 3px;
+ -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset,rgba(255,255,255,0.1) 0 1px 3px;
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset,rgba(255,255,255,0.1) 0 1px 3px;
margin-bottom:5px;
}
#login_box input {
@@ -130,21 +122,22 @@ input#new_todo {
/* Todo list */
ul#todo_list {
border-bottom:1px dashed #F7F7F5;
- margin-left:0;
+ margin:0 0 10px 0;
padding:0;
}
ul#todo_list li {
border-bottom: 1px dashed #4D4D4D;
border-top: 1px dashed #F7F7F5;
margin:0;
- padding:15px 5px;
+ padding:10px 2px 12px 2px;
}
ul#todo_list li:first-child {border-top:none;}
ul#todo_list input[type="checkbox"]{
float:left;
- margin:6px 0;
+ margin:4px 0;
position:relative;
+ display:inline-block;
}
ul#todo_list .icon.icon-remove {
float:right;
@@ -154,16 +147,11 @@ ul#todo_list .icon.icon-remove {
}
ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
-.todo_content {padding-left:20px;font-size:20px; line-height:24px;color:#6C6B66;}
+.todo_content {padding:0 20px;font-size:18px; line-height:22px;color:#6C6B66;}
-/* This is for edit input */
-#todo_list .editing .display,
-#todo_list .edit {
- display: none;
-}
-#todo_list .editing .edit {
- display: block;
-}
+/* Edit input */
+#todo_list .editing .display, #todo_list .edit {display: none;}
+#todo_list .editing .edit {display: block;}
/* Bottom */
.well {
@@ -179,21 +167,63 @@ ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.05);
}
#todo_stats .todo_count {margin:5px 0;}
-#todo_stats .todo_count .number {font-weight:bold;}
+.bold {font-weight:bold;}
/* Footer */
.footer {
width: 480px;
position:relative;
- margin: 8px auto;
+ margin: 0 auto;
+ padding:5px 0;
text-align:center;
font-size:11px;
+ line-height:16px;
}
.footer span {margin: 0 5px;}
.footer img {margin:3px 0 0 2px;}
.footer span, .footer a, .footer img {vertical-align:top;}
-.footer a {color:#EED;}
+.footer a {color:#ddc;}
+.footer, .help-block {color:#aa9;}
+
+/** Mobile Portrait: width 320px **/
+
+@media only screen and (max-width: 480px) {
+ body {min-height:auto;}
+ .container, .container-fluid, .footer { width: 300px; }
+
+ /* Columns */
+ .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10,
+ .span11, .span12, .span12, .span13, .span14, .span15, .span16, .span17, .span18,
+ .span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds { width: 300px; }
+
+ /* Offsets */
+ .row > .offset1, .row > .offset2, .row > .offset3, .row > .offset4, .row > .offset5,
+ .row > .offset6, .row > .offset7, .row > .offset8, .row > .offset9, .row > .offset10,
+ .row > .offset11, .row > .offset12, .row > .offset-one-third, .row > .offset-two-thirds { margin-left: 0; }
-/* Help block */
-/*.help-block {margin-left:10px;}*/
-.help-block, .footer {color:#ccb;}
+ /* Inputs width */
+ input.xlarge, #login_box input {width:265px;}
+ .btn.large {width:277px;font-size:18px;}
+ input#new_todo{width:285px;}
+ ul#todo_list input[type="checkbox"]{font-size:16px;}
+
+ /* Todo list */
+ ul#todo_list .icon.icon-remove {display:inline-block;}
+ ul#todo_list input[type="checkbox"]{margin-right:6px;}
+ .well .btn {padding:5px 8px 6px 8px;}
+}
+
+/** Mobile Landscape: width 480px **/
+
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+ body {min-height:auto;}
+ .container, .container-fluid, .footer { width: 460px;}
+
+ /* Columns */
+ .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10,
+ .span11, .span12, .span12, .span13, .span14, .span15, .span16, .span17, .span18,
+ .span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds{ width: 460px; }
+
+ /* Inputs width */
+ input#new_todo{width:445px;}
+}

0 comments on commit efb2916

Please sign in to comment.
Something went wrong with that request. Please try again.