Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Creating a more consistent layout

  • Loading branch information...
commit f74ae4be6611597e74f34cd543c95f14b691e85c 1 parent aef8e1d
@soyjavi soyjavi authored
View
311 src/stylesheets/css/Lungo.layout.css
@@ -1,270 +1,41 @@
-/**
- * Stylesheet
- *
- * @namespace LUNGO
- * @class Layout
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-/* @group <section> */
-body {
- height: 100%;
-}
-section {
- position: absolute;
- position: fixed;
- width: 100%;
- height: inherit;
- z-index: 0;
- -webkit-backface-visibility: hidden;
- -webkit-transform: translate3d(100%, 0, 0);
- -moz-transform: translate3d(100%, 0, 0);
- -ms-transform: translate3d(100%, 0, 0);
- -o-transform: translate3d(100%, 0, 0);
- transform: translate3d(100%, 0, 0);
- -webkit-transition: -webkit-transform 0.3s ease-in-out;
-}
-section:first-child {
- z-index: 1;
- -webkit-transform: translate3d(0%, 0, 0);
- -moz-transform: translate3d(0%, 0, 0);
- -ms-transform: translate3d(0%, 0, 0);
- -o-transform: translate3d(0%, 0, 0);
- transform: translate3d(0%, 0, 0);
-}
-section.hide {
- z-index: 0;
- -webkit-transform: translate3d(-100%, 0, 0);
- -moz-transform: translate3d(-100%, 0, 0);
- -ms-transform: translate3d(-100%, 0, 0);
- -o-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
-}
-section.show {
- z-index: 1;
- -webkit-transform: translate3d(0%, 0, 0);
- -moz-transform: translate3d(0%, 0, 0);
- -ms-transform: translate3d(0%, 0, 0);
- -o-transform: translate3d(0%, 0, 0);
- transform: translate3d(0%, 0, 0);
-}
-section.static.hide {
- -webkit-transform: translate3d(0%, 0, 0);
- -moz-transform: translate3d(0%, 0, 0);
- -ms-transform: translate3d(0%, 0, 0);
- -o-transform: translate3d(0%, 0, 0);
- transform: translate3d(0%, 0, 0);
-}
-section.popup {
- -webkit-transform: translate3d(0, 100%, 0);
- -moz-transform: translate3d(0, 100%, 0);
- -ms-transform: translate3d(0, 100%, 0);
- -o-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
-}
-section.popup.show {
- -webkit-transform: translate3d(0, 0%, 0);
- -moz-transform: translate3d(0, 0%, 0);
- -ms-transform: translate3d(0, 0%, 0);
- -o-transform: translate3d(0, 0%, 0);
- transform: translate3d(0, 0%, 0);
-}
-section.popup.hide {
- -webkit-transform: translate3d(0, -100%, 0);
- -moz-transform: translate3d(0, -100%, 0);
- -ms-transform: translate3d(0, -100%, 0);
- -o-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
-}
-/* @end */
-/* @group <header> & <footer> */
-header, footer {
- position: absolute;
- left: 0px;
- width: 100%;
- height: 40px;
- display: block;
- z-index: 2;
- line-height: 40px;
-}
-header {
- top: 0px;
-}
-footer {
- bottom: 0px;
-}
-header .title, footer .title {
- float: left;
- margin: 0 8px;
- font-size: 1.3em;
-}
-header .title {
- position: absolute;
- left: 0px;
- width: 100%;
- margin: 0px auto;
- text-align: center;
- z-index: -1;
-}
-section header a.button, section footer a.button {
- margin: 4px 3px auto;
-}
-section header a.button.icon, section footer a.button.icon {
- width: 17px;
- font-size: 1.5em;
- font-weight: normal;
-}
-/* @end */
-/* @group <nav> */
-nav {
- height: inherit;
- text-align: center;
- font-weight: normal;
-}
-nav a {
- display: inline-block;
- padding: 0 6px;
- height: inherit;
- float: left;
- font-size: 2.0em;
-}
-nav a abbr {
- position: relative;
- bottom: 3px;
- margin-left: 2px;
- display: none;
- font-size: 0.5em;
- font-weight: bold;
-}
-nav a.current abbr {
- display: inline;
-}
-nav a.current {
- -webkit-transition: all 0.3s ease-in-out;
- -moz-transition: all 0.3s ease-in-out;
- -ms-transition: all 0.3s ease-in-out;
- -o-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
-}
-/* @end */
-/* @group <aside> */
-aside {
- position: absolute;
- top: 0px;
- bottom: 0px;
- height: auto;
- width: 0px;
-}
-aside.show {
- width: 256px;
-}
-header ~ aside {
- padding-top: 40px;
-}
-footer ~ aside {
- padding-bottom: 40px;
-}
-aside ~ article {
- -webkit-transition: left 0.3s ease-in-out;
- left: 0px;
-}
-aside a {
- display: block;
- width: 244px;
- height: 40px;
- padding: 0 6px;
- font-size: 1.1em;
- font-weight: bold;
- line-height: 40px;
-}
-aside a .icon {
- width: 28px;
- height: 28px;
- float: left;
- margin: 8px 6px 0 0;
- font-size: 1.9em;
- line-height: 1.0em;
- text-align: center;
-}
-@media handheld, only screen and (min-width: 768px) {
- [data-target="aside"] {
- display: none !important;
- }
- aside {
- width: 256px;
- }
- aside ~ article {
- left: 256px;
- }
-}
-/* @end */
-/* @group <article> */
-article {
- position: absolute;
- width: 100%;
- height: auto;
- top: 0px;
- bottom: 0px;
- display: block;
- z-index: 0;
- opacity: 0;
-}
-header ~ article {
- top: 40px;
-}
-footer ~ article {
- bottom: 40px;
-}
-article.current {
- z-index: 1;
- opacity: 1;
-}
-article.aside {
- left: 256px !important;
-}
-article.indented {
- background-color: #e2e2e2;
-}
-.indented ul, .indented form {
- margin: 10px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
- border: 1px solid #c5c5c5;
- box-shadow: 0px 0px 8px #ccc;
-}
-.indented li:first-child {
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
-}
-.indented li:last-child {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
-}
-.list .contrasted {
- background-color: #f4f4f4 !important;
- box-shadow: inset 0px 1px 0px #fff;
-}
-.list .toolbar a {
- box-shadow: 1px 0px 0px #d9d9d9 ;
-}
-.list .toolbar a:last-child {
- box-shadow: none;
-}
-.list .toolbar a.current {
- color: #419ad9;
-}
-/* @end */
-.toolbar {
- height: 48px;
- line-height: 44px;
- display: block;
-}
-.toolbar a {
- float: left;
- padding: 0;
- font-size: 2.0em;
-}
+body{height:100%;}
+section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-transition:-webkit-transform 0.3s ease-in-out;}
+section:first-child{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section.hide{z-index:0;-webkit-transform:translate3d(-100%, 0, 0);-moz-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0);-o-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
+section.show{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section.static.hide{-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section.popup{-webkit-transform:translate3d(0, 100%, 0);-moz-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);-o-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);}
+section.popup.show{-webkit-transform:translate3d(0, 0%, 0);-moz-transform:translate3d(0, 0%, 0);-ms-transform:translate3d(0, 0%, 0);-o-transform:translate3d(0, 0%, 0);transform:translate3d(0, 0%, 0);}
+section.popup.hide{-webkit-transform:translate3d(0, -100%, 0);-moz-transform:translate3d(0, -100%, 0);-ms-transform:translate3d(0, -100%, 0);-o-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);}
+header,footer{position:absolute;left:0px;width:100%;height:40px;display:block;z-index:2;line-height:40px;}
+header{top:0px;}
+footer{bottom:0px;}
+header .title,footer .title{float:left;margin:0 8px;font-size:1.3em;}
+header .title{position:absolute;left:0px;width:100%;margin:0px auto;text-align:center;z-index:-1;}
+section header a.button,section footer a.button{margin:4px 3px auto;}
+section header a.button.icon,section footer a.button.icon{width:17px;font-size:1.5em;font-weight:normal;}
+aside{position:absolute;top:0px;bottom:0px;height:auto;width:0px;}
+aside.show{width:256px;}
+header~aside{padding-top:40px;}
+footer~aside{padding-bottom:40px;}
+aside~article{-webkit-transition:left 0.3s ease-in-out;left:0px;}
+aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:1.1em;font-weight:bold;line-height:40px;}
+aside .icon{width:28px;height:28px;float:left;margin:8px 6px 0 0;font-size:1.9em;line-height:1.0em;text-align:center;}
+aside .anchor{font-weight:bold;padding:6px 10px;}
+@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{width:256px;} aside~article{width:auto !important;left:256px;right:0px !important;}}article{position:absolute;width:inherit;height:inherit;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
+header~article{top:40px;}
+footer~article{bottom:40px;}
+article.current{z-index:1;opacity:1;}
+article.aside{left:256px !important;}
+article.indented>*:only-child{padding:10px;width:auto;}
+article .title{font-size:15px;margin:0 4px 4px;}
+article .title .icon{margin-right:4px;}
+nav{height:inherit;text-align:center;font-weight:normal;}
+nav a{display:inline-block;padding:0 6px;height:inherit;float:left;font-size:2.0em;line-height:38px;}
+nav a abbr{position:relative;bottom:3px;margin-left:2px;display:none;font-size:0.5em;font-weight:bold;}
+nav a.current abbr{display:inline;}
+nav a.current{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
+.toolbar{height:48px;display:block;}
+.toolbar a{float:left;padding:0;font-size:2.2em;}
+.toolbar .icon{display:block;line-height:52px;}
+.toolbar .bubble{position:relative;top:-60px;left:12px;padding:1px 4px;display:inline;font-size:0.45em;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
View
116 src/stylesheets/css/Lungo.theme.default.css
@@ -12,7 +12,7 @@
background: #000;
}
article {
- background: #fff;
+ background-color: #e2e2e2;
}
/* @group <header> & <footer> */
header {
@@ -37,17 +37,22 @@ footer {
/* @group <nav> */
nav a {
color: rgba(0, 0, 0, 0.5);
- text-shadow: rgba(255, 255, 255, 0.35) 0 1px 1px;
-}
-header:not(.toolbar) nav a, footer:not(.toolbar) nav a {
- line-height: 38px;
}
nav a.current {
color: #fff;
text-shadow: 0px 1px 0px #000 !important;
}
+.toolbar {
+ box-shadow: inset 0px 1px #1c1c1c;
+}
.toolbar a.current {
- background: rgba(255, 255, 255, 0.15);
+ background: #1c1c1c;
+ color: #fff;
+ box-shadow: inset 0px 0px 8px #101010;
+ text-shadow: 0px 1px 4px #000;
+}
+.toolbar .bubble {
+ text-shadow: none;
}
/* @end */
/* @group <aside> */
@@ -67,83 +72,66 @@ aside a.current {
aside a .icon {
opacity: 0.5;
}
+aside .anchor {
+ background: #151515;
+ color: #666;
+}
/* @end */
/* @group .list */
-.list {
- background: #e2e2e2;
- color: #787878;
+.list, .list li:not(.toolbar) a {
+ color: #333;
}
-.list li:not(.info) {
+.list li {
background: #fff;
border-bottom: 1px inset #e6e6e6;
- color: #333;
}
.list li:last-child {
border-bottom: none;
}
-.list li.toolbar {
- border-bottom-color: rgba(0, 0, 0, 0.2);
-}
-.list li:not(.toolbar) a {
- color: #787878;
- text-shadow: #fff 0px 1px 1px;
- -webkit-tap-highlight-color: #242525;
+.list .darker {
+ background-color: #2c2c2d;
+ color: #fff;
+ text-shadow: 0px 1px 0px #000;
}
-.list strong {
- color: #333;
+.list li.darker a {
+ color: #fff !important;
}
-.list .bubble {
- border: 1px solid rgba(0, 0, 0, 0.15);
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
- background: #ccc;
- color: #fff;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+.list .dark {
+ background-color: #f4f4f4;
+ box-shadow: inset 0px 1px 0px #fff;
+ text-shadow: 0px 1px 0px #fff;
}
-.list .button {
- color: #fff;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+.list small, .list .onright {
+ color: #999;
}
-.list .arrow:before {
- color: #a9a9a9;
+.list .tip {
+ color: #7a7a7a;
}
-/* @group .anchor */
-.list li.anchor {
+.list .anchor {
background: #f4f4f4;
color: #222;
}
-/* @end */
-/* @group .anchor */
-.list li.search {
- border: none;
- -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.25);
+.list .toolbar {
+ border-bottom-color: rgba(0, 0, 0, 0.2);
}
-/* @end */
-/* @group .info */
-.list li.info {
- border: none;
- -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.25);
- background: #cbcbcb;
+.list .bubble {
+ color: #fff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+ box-shadow: inset 0px 0px 1px #000;
}
-.list .info strong {
- color: #333;
+.list .arrow:before {
+ color: #a9a9a9;
}
-.list .info.contrast strong {
- color: #fff;
+.list .toolbar a {
+ box-shadow: 1px 0px 0px #d9d9d9;
}
-/* @end */
-/* @end */
-.list .contrast {
- background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
- text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
- color: #fff;
+.list .toolbar a:last-child {
+ box-shadow: none;
}
-.list .highlight {
- background: #499dc4 -webkit-gradient(linear, left top, left bottom, color-stop(0, #499dc4), color-stop(1, #0e8eb6)) !important;
+.list .toolbar a.current {
+ background: transparent;
+ color: #333;
+ text-shadow: none !important;
}
/* @end */
/* @group widgets */
@@ -183,4 +171,10 @@ input:focus, textarea:focus, select:focus {
background-clip: padding-box;
}
/* @end */
+/* @end */
+/* @group Article */
+article .title {
+ color: #797979;
+ text-shadow: 0px 1px 0px #fff;
+}
/* @end */
View
13 src/stylesheets/css/Lungo.widgets.colour.css
@@ -24,3 +24,16 @@ a.twitter,.twitter:not(span){background-color:#35cdff;}
a.twitter:active{background-color:#2bafda;}
a.facebook,.facebook:not(span){background-color:#3b5998;}
a.facebook:active{background-color:#2c4579;}
+li.grey{box-shadow:inset 3px 0px 0px #ccc;}
+li.red{box-shadow:inset 3px 0px 0px #e33100;}
+li.lightgreen{box-shadow:inset 3px 0px 0px #91bd09;}
+li.green{box-shadow:inset 3px 0px 0px #009600;}
+li.blue{box-shadow:inset 3px 0px 0px #237fd7;}
+li.arcticblue{box-shadow:inset 3px 0px 0px #2daebf;}
+li.orange{box-shadow:inset 3px 0px 0px #ff5c00;}
+li.purple{box-shadow:inset 3px 0px 0px #7b658d;}
+li.magenta{box-shadow:inset 3px 0px 0px #a9014b;}
+li.pink{box-shadow:inset 3px 0px 0px #ff007f;}
+li.yellow{box-shadow:inset 3px 0px 0px #ffb515;}
+li.twitter{box-shadow:inset 3px 0px 0px #35cdff;}
+li.facebook{box-shadow:inset 3px 0px 0px #3b5998;}
View
9 src/stylesheets/css/Lungo.widgets.form.css
@@ -1,12 +1,13 @@
-.form,form{position:relative;margin:8px;font-size:1.15em;font-weight:bold;}
-input:not([type=checkbox]),textarea,select{display:inline-block;padding:6px 6px 5px;width:95%;margin-bottom:8px;outline:none;-webkit-appearance:none;font-size:1.0em;font-weight:bold;line-height:1.25em;}
-input[type=search]{width:100%;z-index:1;margin:0px;}
+.form,form{font-size:0.95em;}
+label:not(.checkbox){display:block;margin-bottom:2px;}
+input:not([type=checkbox]),textarea,select{display:inline-block;padding:5px;width:95%;margin-bottom:2px;outline:none;-webkit-appearance:none;font-size:1.0em;font-weight:bold;line-height:1.25em;}
+input[type=search]{width:100%;}
input[type=search]:before{content:"hola";}
select{width:100%;}
label.select{position:relative;display:inline-block;width:100%;}
.select:after{padding:0 7px;position:absolute;top:0;right:0;bottom:0;height:30px;content:"";pointer-events:none;font-size:60%;line-height:32px;}
.no-pointer-events .select:after{content:none;}
-input[type="checkbox"],input[type="radio"]{width:74px;float:left;z-index:1;}
+input[type="checkbox"],input[type="radio"]{width:74px;float:left;z-index:2;}
input[type="checkbox"]+span::after,input[type="radio"]+span::after{content:"off";}
input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{content:"on";}
.iphone-toggle-buttons{-moz-user-select:none;-webkit-user-select:none;user-select:none;}
View
170 src/stylesheets/less/Lungo.layout.less
@@ -104,39 +104,6 @@ section header a.button.icon, section footer a.button.icon {
}
/* @end */
-/* @group <nav> */
-nav {
- height: inherit;
- text-align: center;
- font-weight: normal;
-}
-
-nav a {
- display: inline-block;
- padding: 0 6px;
- height: inherit;
- float: left;
- font-size: 2.0em;
-}
-
-nav a abbr {
- position: relative;
- bottom: 3px;
- margin-left: 2px;
- display: none;
- font-size: 0.5em;
- font-weight: bold;
-}
-
-nav a.current abbr {
- display: inline;
-}
-
-nav a.current {
- .transition(all 0.3s ease-in-out);
-}
-/* @end */
-
/* @group <aside> */
aside {
position: absolute;
@@ -173,7 +140,7 @@ aside a{
line-height: 40px;
}
- aside a .icon {
+ aside .icon {
width: 28px;
height: 28px;
float: left;
@@ -183,6 +150,11 @@ aside a{
line-height: 1.0em;
text-align: center;
}
+
+ aside .anchor {
+ font-weight: bold;
+ padding: 6px 10px;
+ }
@media handheld, only screen and (min-width: 768px) {
[data-target="aside"] {
@@ -194,7 +166,9 @@ aside a{
}
aside ~ article{
+ width: auto !important;
left: 256px;
+ right: 0px !important;
}
}
/* @end */
@@ -202,8 +176,8 @@ aside a{
/* @group <article> */
article {
position: absolute;
- width: 100%;
- height: auto;
+ width: inherit;
+ height: inherit;
top: 0px;
bottom: 0px;
display: block;
@@ -211,71 +185,95 @@ article {
opacity: 0;
}
- header ~ article {
- top: 40px;
- }
+ header ~ article { top: 40px; }
- footer ~ article {
- bottom: 40px;
- }
+ footer ~ article { bottom: 40px; }
article.current {
z-index: 1;
opacity: 1;
}
- article.aside {
- left: 256px !important;
+ article.aside { left: 256px !important; }
+
+ article.indented > *:only-child{
+ padding: 10px;
+ width: auto;
}
- article.indented {
- background-color: #e2e2e2;
+ article .title {
+ font-size: 15px;
+ margin: 0 4px 4px;
}
- .indented ul, .indented form {
- margin: 10px;
- .border-radius(4px);
- border: 1px solid #c5c5c5;
- box-shadow: 0px 0px 8px #ccc;
- }
-
- .indented li:first-child {
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
- }
-
- .indented li:last-child {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- }
-
- .list .contrasted {
- background-color: #f4f4f4 !important;
- box-shadow: inset 0px 1px 0px #fff;
- }
-
- .list .toolbar a {
- box-shadow: 1px 0px 0px #d9d9d9 ;
- }
- .list .toolbar a:last-child {
- box-shadow: none;
- }
-
- .list .toolbar a.current {
- color: #419ad9;
- }
+ article .title .icon { margin-right: 4px; }
+
/* @end */
+/* @group <nav> */
+nav {
+ height: inherit;
+ text-align: center;
+ font-weight: normal;
+}
+
+nav a {
+ display: inline-block;
+ padding: 0 6px;
+ height: inherit;
+ float: left;
+ font-size: 2.0em;
+ line-height: 38px;
+}
+
+nav .icon {
+
+}
+
+nav a abbr {
+ position: relative;
+ bottom: 3px;
+ margin-left: 2px;
+ display: none;
+ font-size: 0.5em;
+ font-weight: bold;
+}
+
+nav a.current abbr {
+ display: inline;
+}
+
+nav a.current {
+ .transition(all 0.3s ease-in-out);
+}
+
+.toolbar {
+ height: 48px;
+ display: block;
+}
-.toolbar{
- height:48px;
- line-height:44px;
- display:block;
+.toolbar a {
+ float: left;
+ padding: 0;
+ font-size: 2.2em;
}
-.toolbar a{
- float:left;
- padding:0;
- font-size:2.0em;
+.toolbar .icon {
+ display: block;
+
+ line-height: 52px;
+}
+.toolbar .bubble {
+ position: relative;
+ top: -60px;
+ left: 12px;
+ padding: 1px 4px;
+ display: inline;
+
+ font-size: 0.45em;
+
+ .border-radius(12px);
}
+
+/* @end */
View
177 src/stylesheets/less/Lungo.theme.default.less
@@ -11,12 +11,12 @@
/* @group layout */
.app {
- font-size:13px;
+ font-size: 13px;
background: #000;
}
article {
- background: #fff;
+ background-color: #e2e2e2;
}
/* @group <header> & <footer> */
@@ -35,6 +35,8 @@ footer {
-webkit-box-shadow: inset 0px 1px rgba(0,0,0,0.5);
}
+
+
.title {
color: #fff;
text-shadow: rgba(0,0,0,0.5) 0 -1px 0px;
@@ -44,11 +46,7 @@ footer {
/* @group <nav> */
nav a {
color: rgba(0,0,0,0.5);
- text-shadow: rgba(255,255,255,0.35) 0 1px 1px;
-}
-
-header:not(.toolbar) nav a, footer:not(.toolbar) nav a {
- line-height: 38px;
+ //text-shadow: rgba(255,255,255,0.35) 0 1px 1px;
}
nav a.current {
@@ -56,8 +54,25 @@ nav a.current {
text-shadow: 0px 1px 0px #000 !important;
}
+.toolbar {
+ //background: #f00;
+ box-shadow: inset 0px 1px #1c1c1c;
+}
+
+.toolbar a {
+ //line-height: 44px;
+}
+
.toolbar a.current{
- background: rgba(255,255,255,0.15);
+ background: #1c1c1c;
+ color: #fff;
+
+ box-shadow: inset 0px 0px 8px #101010;
+ text-shadow: 0px 1px 4px #000;
+}
+
+.toolbar .bubble {
+ text-shadow: none;
}
/* @end */
@@ -83,99 +98,75 @@ aside a .icon {
opacity: 0.5;
}
+aside .anchor {
+ background: #151515;
+ color: #666;
+}
+
/* @end */
/* @group .list */
-.list {
- background: #e2e2e2;
- color: #787878;
-}
-
-.list li:not(.info) {
- background: #fff;
- border-bottom: 1px inset #e6e6e6;
+.list, .list li:not(.toolbar) a {
color: #333;
}
-
-.list li:last-child {
- border-bottom: none;
-}
+ .list li {
+ background: #fff;
+ border-bottom: 1px inset #e6e6e6;
+ }
-.list li.toolbar {
- border-bottom-color: rgba(0,0,0,0.2);
-}
-
-.list li:not(.toolbar) a {
- color: #787878;
- text-shadow: #fff 0px 1px 1px;
- -webkit-tap-highlight-color: #242525;
-}
-
-.list strong {
- color: #333;
-}
+ .list li:last-child { border-bottom: none; }
-.list .bubble {
- border: 1px solid rgba(0,0,0,0.15);
- .border-radius(2px);
- background: #ccc;
+ .list .darker {
+ background-color: #2c2c2d;
+ color: #fff;
+ text-shadow: 0px 1px 0px #000;
+ }
- color: #fff;
- text-shadow: 0 -1px 0 rgba(0,0,0,.3);
-}
-
-.list .button {
- color: #fff;
- text-shadow: 0 -1px 0 rgba(0,0,0,.3);
-}
-
-.list .arrow:before {
- color: #a9a9a9;
-}
-
-/* @group .anchor */
-.list li.anchor {
- background: #f4f4f4;
- color: #222;
-}
-/* @end */
-
-/* @group .anchor */
-.list li.search {
- border: none;
- -webkit-box-shadow:
- inset 0px 1px 0px rgba(255,255,255,0.1),
- inset 0px -1px 0px rgba(0,0,0,0.25);
+ .list li.darker a{ color: #fff !important; }
+
+ .list .dark {
+ background-color: #f4f4f4;
+ box-shadow: inset 0px 1px 0px #fff;
+ text-shadow: 0px 1px 0px #fff;
}
-/* @end */
-/* @group .info */
-.list li.info {
- border: none;
- -webkit-box-shadow:
- inset 0px 1px 0px rgba(255,255,255,0.1),
- inset 0px -1px 0px rgba(0,0,0,0.25);
- background: #cbcbcb;
-}
+ .list small, .list .onright {
+ color: #999;
+ }
-.list .info strong{
- color: #333;
-}
+ .list .tip {
+ color: #7a7a7a;
+ }
+
+ .list .anchor {
+ background: #f4f4f4;
+ color: #222;
+ }
+
+ .list .toolbar {
+ border-bottom-color: rgba(0,0,0,0.2);
+ }
-.list .info.contrast strong {
- color: #fff;
-}
-/* @end */
-/* @end */
-.list .contrast {
- background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
- text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
- color: #fff;
-}
+ .list .bubble {
+ color: #fff;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.3);
+ box-shadow: inset 0px 0px 1px #000;
+ }
+
+ .list .arrow:before {
+ color: #a9a9a9;
+ }
+
+ .list .toolbar a { box-shadow: 1px 0px 0px #d9d9d9; }
+
+ .list .toolbar a:last-child { box-shadow: none; }
+
+ .list .toolbar a.current {
+ background: transparent;
+ color: #333;
+ text-shadow: none !important;
+ }
-.list .highlight {
- background: #499dc4 -webkit-gradient(linear, left top, left bottom, color-stop(0, #499dc4), color-stop(1, #0e8eb6)) !important;
-}
/* @end */
/* @group widgets */
@@ -207,4 +198,14 @@ input:focus, textarea:focus, select:focus {
.border-radius(0 2px 2px 0);
}
/* @end */
+/* @end */
+
+/* @group Article */
+
+article .title {
+ color: #797979;
+ text-shadow: 0px 1px 0px #fff;
+}
+
+
/* @end */
Please sign in to comment.
Something went wrong with that request. Please try again.