Permalink
Browse files

new minimal theme

  • Loading branch information...
1 parent b12761d commit 07518d9b0625ea29d3693bf60e17aa4908f5aab5 @maxogden committed Dec 14, 2012
View
@@ -1,12 +1,6 @@
-/* glue: 0.2.8 hash: 6bd2df9f9d */
+/* glue: 0.2.8 hash: 882b7af5ba */
.sprite-toggle-on,
.sprite-toggle-off,
-.sprite-map-on,
-.sprite-map-off,
-.sprite-map:active,
-.sprite-list-on,
-.sprite-list-off,
-.sprite-list:active,
.sprite-icon-where-on,
.sprite-icon-where-off,
.sprite-icon-when-on,
@@ -19,46 +13,48 @@
.sprite-button-primary-leftcap,
.sprite-button-main-repeatx,
.sprite-icon-refresh,
-.sprite-icon-refresh-white,
+.sprite-list-on,
+.sprite-list-off,
.sprite-icon-edit,
+.sprite-refresh-on,
+.sprite-refresh-off,
+.sprite-gear-on,
+.sprite-gear-off,
.sprite-icon-check,
+.sprite-map-on,
+.sprite-map-off,
.sprite-icon-question,
.sprite-triangle-orange,
.sprite-triangle-grey{background-image:url('sprite.png');background-repeat:no-repeat}
.sprite-toggle-on{background-position:-2px -2px;width:50px;height:23px;}
.sprite-toggle-off{background-position:-2px -29px;width:50px;height:23px;}
-.sprite-map-on{background-position:-2px -56px;width:44px;height:40px;}
-.sprite-map-off{background-position:-2px -100px;width:44px;height:40px;}
-.sprite-map:active{background-position:-2px -144px;width:44px;height:40px;}
-.sprite-list-on{background-position:-2px -188px;width:44px;height:40px;}
-.sprite-list-off{background-position:-2px -232px;width:44px;height:40px;}
-.sprite-list:active{background-position:-2px -276px;width:44px;height:40px;}
-.sprite-icon-where-on{background-position:-2px -320px;width:40px;height:40px;}
-.sprite-icon-where-off{background-position:-2px -364px;width:40px;height:40px;}
-.sprite-icon-when-on{background-position:-2px -408px;width:40px;height:40px;}
-.sprite-icon-when-off{background-position:-2px -452px;width:40px;height:40px;}
-.sprite-button-secondary-rightcap{background-position:-2px -496px;width:4px;height:40px;}
-.sprite-button-secondary-repeatx{background-position:-2px -540px;width:10px;height:40px;}
-.sprite-button-secondary-nipple{background-position:-2px -584px;width:10px;height:40px;}
-.sprite-button-secondary-leftcap{background-position:-2px -628px;width:4px;height:40px;}
-.sprite-button-primary-rightcap{background-position:-2px -672px;width:4px;height:40px;}
-.sprite-button-primary-leftcap{background-position:-2px -716px;width:4px;height:40px;}
-.sprite-button-main-repeatx{background-position:-2px -760px;width:10px;height:40px;}
-.sprite-icon-refresh{background-position:-2px -804px;width:21px;height:25px;}
-.sprite-icon-refresh-white{background-position:-2px -833px;width:24px;height:23px;}
-.sprite-icon-edit{background-position:-2px -860px;width:21px;height:20px;}
-.sprite-icon-check{background-position:-2px -884px;width:19px;height:16px;}
-.sprite-icon-question{background-position:-2px -904px;width:16px;height:16px;}
-.sprite-triangle-orange{background-position:-2px -924px;width:10px;height:11px;}
-.sprite-triangle-grey{background-position:-2px -939px;width:10px;height:11px;}
+.sprite-icon-where-on{background-position:-2px -56px;width:40px;height:40px;}
+.sprite-icon-where-off{background-position:-2px -100px;width:40px;height:40px;}
+.sprite-icon-when-on{background-position:-2px -144px;width:40px;height:40px;}
+.sprite-icon-when-off{background-position:-2px -188px;width:40px;height:40px;}
+.sprite-button-secondary-rightcap{background-position:-2px -232px;width:4px;height:40px;}
+.sprite-button-secondary-repeatx{background-position:-2px -276px;width:10px;height:40px;}
+.sprite-button-secondary-nipple{background-position:-2px -320px;width:10px;height:40px;}
+.sprite-button-secondary-leftcap{background-position:-2px -364px;width:4px;height:40px;}
+.sprite-button-primary-rightcap{background-position:-2px -408px;width:4px;height:40px;}
+.sprite-button-primary-leftcap{background-position:-2px -452px;width:4px;height:40px;}
+.sprite-button-main-repeatx{background-position:-2px -496px;width:10px;height:40px;}
+.sprite-icon-refresh{background-position:-2px -540px;width:21px;height:25px;}
+.sprite-list-on{background-position:-2px -569px;width:24px;height:15px;}
+.sprite-list-off{background-position:-2px -588px;width:24px;height:15px;}
+.sprite-icon-edit{background-position:-2px -607px;width:21px;height:20px;}
+.sprite-refresh-on{background-position:-2px -631px;width:18px;height:20px;}
+.sprite-refresh-off{background-position:-2px -655px;width:18px;height:20px;}
+.sprite-gear-on{background-position:-2px -679px;width:20px;height:20px;}
+.sprite-gear-off{background-position:-2px -703px;width:20px;height:20px;}
+.sprite-icon-check{background-position:-2px -727px;width:19px;height:16px;}
+.sprite-map-on{background-position:-2px -747px;width:13px;height:18px;}
+.sprite-map-off{background-position:-2px -769px;width:13px;height:18px;}
+.sprite-icon-question{background-position:-2px -791px;width:16px;height:16px;}
+.sprite-triangle-orange{background-position:-2px -811px;width:10px;height:11px;}
+.sprite-triangle-grey{background-position:-2px -826px;width:10px;height:11px;}
@media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min--moz-device-pixel-ratio: 2.0), only screen and (-o-min-device-pixel-ratio: 200/100), only screen and (min-device-pixel-ratio: 2.0) {.sprite-toggle-on,
.sprite-toggle-off,
-.sprite-map-on,
-.sprite-map-off,
-.sprite-map:active,
-.sprite-list-on,
-.sprite-list-off,
-.sprite-list:active,
.sprite-icon-where-on,
.sprite-icon-where-off,
.sprite-icon-when-on,
@@ -71,9 +67,16 @@
.sprite-button-primary-leftcap,
.sprite-button-main-repeatx,
.sprite-icon-refresh,
-.sprite-icon-refresh-white,
+.sprite-list-on,
+.sprite-list-off,
.sprite-icon-edit,
+.sprite-refresh-on,
+.sprite-refresh-off,
+.sprite-gear-on,
+.sprite-gear-off,
.sprite-icon-check,
+.sprite-map-on,
+.sprite-map-off,
.sprite-icon-question,
.sprite-triangle-orange,
-.sprite-triangle-grey{background-image:url('sprite@2x.png');-webkit-background-size: 54px 951px;-moz-background-size: 54px 951px;background-size: 54px 951px;}}
+.sprite-triangle-grey{background-image:url('sprite@2x.png');-webkit-background-size: 54px 839px;-moz-background-size: 54px 839px;background-size: 54px 839px;}}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -55,7 +55,7 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
.vk-container input::-webkit-input-placeholder { opacity: .8; }
.vk-container a { text-decoration: none; outline: 0; line-height: inherit; }
.vk-container a:active .highlight { background: #fafafa; }
-.vk-container { height: 100%; }.ui-content .navBarContainer { width: 100%; height: 100%; }.topNav { position: absolute; top: 0; right: 0; left: 0; z-index: 666; height: 49px; border-bottom: 1px solid #6d8f75; background-color: #e4e4e4; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#96c7a2), to(#87b492)); background: -moz-linear-gradient(top, #96c7a2, #87b492); border-top-right-radius: 5px; border-top-left-radius: 5px;
+.vk-container { height: 100%; }.ui-content .navBarContainer { width: 100%; height: 100%; }.topNav { position: absolute; top: 0; right: 0; left: 0; z-index: 666; height: 44px; border-bottom: 1px solid #bcbcbc; background-color: #E1E1E1; border-top-right-radius: 5px; border-top-left-radius: 5px;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
@@ -66,10 +66,11 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
display: box;
}
+.topNav .buttons { height: 32px; }
.topNav .left.buttons .actionButton { float: left; }
.topNav .right.buttons .actionButton { display: inline-block; }
.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
-.bottomNav { height: 55px; z-index: 666; position: fixed; bottom: 0px; left: 0px; right: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #515151;
+.bottomNav { height: 45px; z-index: 666; position: fixed; bottom: 0px; left: 0px; right: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #E1E1E1; border-top: 1px solid #bcbcbc;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
@@ -82,14 +83,16 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
.bottomNav .active.bottomButton { color: #111111; border-radius: 3px; background-color: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F;}
.bottomNav .iconButton { width: 38px; height: 38px; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F; }
.bottomNav .iconButton:active { background-color: #C7DECC; }
+.right.buttons .actionButton { margin-right: 25px; }
+
.bottomNav .refreshButton .sprite.spinning { background: url('images/transparent-loader.gif') no-repeat 4px 4px; background-size: initial; }
.nav-button.following { font-size: 13.5px; font-weight: bold; border-bottom-left-radius: 5px; }
.nav-button.settings { border-bottom-right-radius: 5px; }
.whitePlaceholder { height: 54px; width: 100%; background: white;}
.bottomNav .left.buttons { -webkit-box-flex: 2; -moz-box-flex: 2; display: -webkit-box; display: -moz-box; }
.bottomNav .left.buttons a { -webkit-box-flex: 1; -moz-box-flex: 1; }
.bottomNav.hidden { height: 0px !important; }
-.nav-button { font-size: 13.5px; background: #e5e5e5; color: #959595; float: left; line-height: 47px; height: 49px; text-align: center; }
+.nav-button { font-size: 13.5px; background: #e5e5e5; color: #959595; float: left; line-height: 42px; height: 44px; text-align: center; }
.nav-button.round { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e6e6e6)); background: -moz-linear-gradient(top, #fefefe, #e6e6e6); position: relative; font-size: 13.58px; text-shadow: 0 1px 0 white; color: #363636; line-height: 39px; height: 39px; border-radius: 3px; box-shadow: 0px 0px 1px rgba(0,0,0,1); z-index: 1;
display: -webkit-box;
-webkit-box-pack: center;
@@ -119,19 +122,18 @@ html, body { margin: 0; font: 14px/1.6 "Helvetica Neue", Helvetica, arial, sans-
}
.left.buttons { margin-left: 5px; }
.left.buttons .actionButton { margin-left: 3px; }
-.right.buttons .actionButton { margin-right: 3px; }
.right.buttons { margin-right: 2px; display: -moz-box; -moz-box-orient: vertical; display: -webkit-box; display: box; -webkit-box-orient: vertical; box-orient: vertical; }
.right.buttons { -moz-box-align: end; -webkit-box-align: end; box-align: end; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: end; -webkit-box-pack: end; box-pack: end; }
.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
.navButton { display: block; text-align: center; }
-.bottomButton { line-height: 38px; height: 38px; border-radius: 5px; padding: 0px; color: #c4c4c4; font-size: 13.58px; }
+.bottomButton { border-radius: 5px; padding: 0px; color: #8E8E8E; font-size: 10px; text-transform: uppercase; font-weight: bold; }
.bottomButton:active { color: white; }
/* browser compat notes: */
-/* for .ui-content .items there needs to be a bottom: 55px; set for all browsers except android 2.x */
-/* for android 2.x you need padding-bottom: 55px; if you set bottom: it breaks rendering */
+/* for .ui-content .items there needs to be a bottom: 45px; set for all browsers except android 2.x */
+/* for android 2.x you need padding-bottom: 45px; if you set bottom: it breaks rendering */
/* even if you un-set it in js after it renders */
/* due to these constraints these values are set by JS instead of here */
-.ui-content .items { z-index:2 !important; background: #e1e1e1; font-family: Open Sans; border-top: 1px solid #cccccc; position: absolute; top: 50px; bottom: 55px; left: 0; right: 0; -webkit-overflow-scrolling: touch; overflow-x: auto; }
+.ui-content .items { z-index:2 !important; background: #e1e1e1; font-family: Open Sans; border-top: 1px solid #cccccc; position: absolute; top: 45px; bottom: 45px; left: 0; right: 0; -webkit-overflow-scrolling: touch; overflow-x: auto; }
/* extend scroll area to bottom if the bottomnav is hidden */
.hidden .items { bottom: 0px !important; }
View
@@ -3294,9 +3294,9 @@ List.prototype.makeCrossBrowserCompatible = function() {
// see list.css for explanation of this one
if (navigator.userAgent.match(/Android 2/i)) {
this.el.css('overflow', 'scroll')
- scroller.css({'padding-bottom': '55px', 'overflow': 'scroll'})
+ scroller.css({'padding-bottom': '45px', 'overflow': 'scroll'})
} else {
- scroller.parents().first().css({'bottom': '55px'})
+ scroller.parents().first().css({'bottom': '45px'})
}
if (navigator.userAgent.match(/iPhone OS 4/i)) {
View
@@ -26,13 +26,11 @@
var nav = vk.navBar('.nav', 'topNav')
- var button = vk.actionButton({href: "#/submit!", id: "start", text: "Save"})
- nav.add(button, "right")
-
- var button2 = vk.actionButton({"data-view": "list", href: "#/list", id: "list-button", text: "", className: "sprite-list-off"})
- nav.add(button2, "left")
- var button3 = vk.actionButton({"data-view": "map", href: "#/map", id: "map-button", text: "", className: "sprite-map-off"})
- nav.add(button3, "left")
+ var refreshButton = vk.actionButton({href: "#/refresh!", linkClass: "refreshButton iconButton", text: "", className: "sprite-refresh-on sprite"})
+ nav.add(refreshButton, 'right')
+
+ var refreshButton2 = vk.actionButton({href: "#/refresh!", linkClass: "refreshButton iconButton", text: "", className: "sprite-gear-on sprite"})
+ nav.add(refreshButton2, 'right')
var list = vk.list('.items')
list.add("hello this is a test of many many many many many many many many many many many many rows of data".split(' ').map(function(word) {
@@ -47,12 +45,10 @@
var unreadButton = vk.navButton({href: "#/unread", id: "unread-button", text: "Unread"})
footer.add(unreadButton, 'left')
- var refreshButton = vk.actionButton({href: "#/refresh!", linkClass: "refreshButton iconButton", text: "", className: "sprite-icon-refresh-white sprite"})
- footer.add(refreshButton, 'right')
-
- var refreshButton2 = vk.actionButton({href: "#/refresh!", linkClass: "refreshButton iconButton", text: "", className: "sprite-icon-refresh-white sprite"})
- footer.add(refreshButton2, 'right')
-
+ var button2 = vk.actionButton({"data-view": "list", href: "#/list", id: "list-button", text: "", className: "sprite-list-off"})
+ footer.add(button2, "right")
+ var button3 = vk.actionButton({"data-view": "map", href: "#/map", id: "map-button", text: "", className: "sprite-map-off"})
+ footer.add(button3, "right")
</script>
</body>
@@ -1,4 +1,4 @@
-.nav-button { font-size: 13.5px; background: #e5e5e5; color: #959595; float: left; line-height: 47px; height: 49px; text-align: center; }
+.nav-button { font-size: 13.5px; background: #e5e5e5; color: #959595; float: left; line-height: 42px; height: 44px; text-align: center; }
.nav-button.round { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e6e6e6)); background: -moz-linear-gradient(top, #fefefe, #e6e6e6); position: relative; font-size: 13.58px; text-shadow: 0 1px 0 white; color: #363636; line-height: 39px; height: 39px; border-radius: 3px; box-shadow: 0px 0px 1px rgba(0,0,0,1); z-index: 1;
display: -webkit-box;
-webkit-box-pack: center;
@@ -28,7 +28,6 @@
}
.left.buttons { margin-left: 5px; }
.left.buttons .actionButton { margin-left: 3px; }
-.right.buttons .actionButton { margin-right: 3px; }
.right.buttons { margin-right: 2px; display: -moz-box; -moz-box-orient: vertical; display: -webkit-box; display: box; -webkit-box-orient: vertical; box-orient: vertical; }
.right.buttons { -moz-box-align: end; -webkit-box-align: end; box-align: end; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: end; -webkit-box-pack: end; box-pack: end; }
.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
@@ -1,5 +1,5 @@
.nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
-.bottomNav { height: 55px; z-index: 666; position: fixed; bottom: 0px; left: 0px; right: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #515151;
+.bottomNav { height: 45px; z-index: 666; position: fixed; bottom: 0px; left: 0px; right: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #E1E1E1; border-top: 1px solid #bcbcbc;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
@@ -12,6 +12,8 @@
.bottomNav .active.bottomButton { color: #111111; border-radius: 3px; background-color: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F;}
.bottomNav .iconButton { width: 38px; height: 38px; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F; }
.bottomNav .iconButton:active { background-color: #C7DECC; }
+.right.buttons .actionButton { margin-right: 25px; }
+
.bottomNav .refreshButton .sprite.spinning { background: url('images/transparent-loader.gif') no-repeat 4px 4px; background-size: initial; }
.nav-button.following { font-size: 13.5px; font-weight: bold; border-bottom-left-radius: 5px; }
.nav-button.settings { border-bottom-right-radius: 5px; }
@@ -1,9 +1,9 @@
/* browser compat notes: */
-/* for .ui-content .items there needs to be a bottom: 55px; set for all browsers except android 2.x */
-/* for android 2.x you need padding-bottom: 55px; if you set bottom: it breaks rendering */
+/* for .ui-content .items there needs to be a bottom: 45px; set for all browsers except android 2.x */
+/* for android 2.x you need padding-bottom: 45px; if you set bottom: it breaks rendering */
/* even if you un-set it in js after it renders */
/* due to these constraints these values are set by JS instead of here */
-.ui-content .items { z-index:2 !important; background: #e1e1e1; font-family: Open Sans; border-top: 1px solid #cccccc; position: absolute; top: 50px; bottom: 55px; left: 0; right: 0; -webkit-overflow-scrolling: touch; overflow-x: auto; }
+.ui-content .items { z-index:2 !important; background: #e1e1e1; font-family: Open Sans; border-top: 1px solid #cccccc; position: absolute; top: 45px; bottom: 45px; left: 0; right: 0; -webkit-overflow-scrolling: touch; overflow-x: auto; }
/* extend scroll area to bottom if the bottomnav is hidden */
.hidden .items { bottom: 0px !important; }
@@ -57,9 +57,9 @@ List.prototype.makeCrossBrowserCompatible = function() {
// see list.css for explanation of this one
if (navigator.userAgent.match(/Android 2/i)) {
this.el.css('overflow', 'scroll')
- scroller.css({'padding-bottom': '55px', 'overflow': 'scroll'})
+ scroller.css({'padding-bottom': '45px', 'overflow': 'scroll'})
} else {
- scroller.parents().first().css({'bottom': '55px'})
+ scroller.parents().first().css({'bottom': '45px'})
}
if (navigator.userAgent.match(/iPhone OS 4/i)) {
@@ -1,3 +1,3 @@
.navButton { display: block; text-align: center; }
-.bottomButton { line-height: 38px; height: 38px; border-radius: 5px; padding: 0px; color: #c4c4c4; font-size: 13.58px; }
+.bottomButton { border-radius: 5px; padding: 0px; color: #8E8E8E; font-size: 10px; text-transform: uppercase; font-weight: bold; }
.bottomButton:active { color: white; }
@@ -1,4 +1,4 @@
-.topNav { position: absolute; top: 0; right: 0; left: 0; z-index: 666; height: 49px; border-bottom: 1px solid #6d8f75; background-color: #e4e4e4; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#96c7a2), to(#87b492)); background: -moz-linear-gradient(top, #96c7a2, #87b492); border-top-right-radius: 5px; border-top-left-radius: 5px;
+.topNav { position: absolute; top: 0; right: 0; left: 0; z-index: 666; height: 44px; border-bottom: 1px solid #bcbcbc; background-color: #E1E1E1; border-top-right-radius: 5px; border-top-left-radius: 5px;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
@@ -9,5 +9,6 @@
display: box;
}
+.topNav .buttons { height: 32px; }
.topNav .left.buttons .actionButton { float: left; }
.topNav .right.buttons .actionButton { display: inline-block; }
Oops, something went wrong.

0 comments on commit 07518d9

Please sign in to comment.