vmario/doodle3d-connect
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-connect.git synced 2024-12-26 10:33:48 +01:00
Code Issues Releases Wiki Activity

Style tweaks

Browse Source
This commit is contained in:
peteruithoven 2014-05-13 15:47:31 +02:00
parent c64e1b9041
commit 6c28b093dc
2 changed files with 85 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
less/styles.less
View File

@ -30,6 +30,81 @@ body.ui-mobile-viewport {
} }
} }
.ui-page .ui-header {
background-color: #93CAF4;
border-color: #fff;
border-width: 2px 0px 2px 0;
.ui-title {
color: #fff;
text-shadow: 0px 1px 0px #999;
}
.ui-btn-left.ui-btn-icon-notext {
background-color: rgba(0, 0, 0, 0.3);
border-width: 0;
top: 0.45em;
left: 0.45em;
}
}
.ui-content .ui-listview {
> li.ui-first-child .ui-btn {
border-top-width: 0;
}
}
/* Active button */
.ui-page-theme-a .ui-btn.ui-btn-active,
html .ui-bar-a .ui-btn.ui-btn-active,
html .ui-body-a .ui-btn.ui-btn-active,
html body .ui-group-theme-a .ui-btn.ui-btn-active,
html head + body .ui-btn.ui-btn-a.ui-btn-active,
/* Active checkbox icon */
.ui-page-theme-a .ui-checkbox-on:after,
html .ui-bar-a .ui-checkbox-on:after,
html .ui-body-a .ui-checkbox-on:after,
html body .ui-group-theme-a .ui-checkbox-on:after,
.ui-btn.ui-checkbox-on.ui-btn-a:after,
/* Active flipswitch background */
.ui-page-theme-a .ui-flipswitch-active,
html .ui-bar-a .ui-flipswitch-active,
html .ui-body-a .ui-flipswitch-active,
html body .ui-group-theme-a .ui-flipswitch-active,
html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,
/* Active slider track */
.ui-page-theme-a .ui-slider-track .ui-btn-active,
html .ui-bar-a .ui-slider-track .ui-btn-active,
html .ui-body-a .ui-slider-track .ui-btn-active,
html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
html body div.ui-slider-track.ui-body-a .ui-btn-active {
background-color: #93CAF4 /*{a-active-background-color}*/;
border-color: #93CAF4 /*{a-active-border}*/;
color: #ffffff /*{a-active-color}*/;
text-shadow: 0 /*{a-active-shadow-x}*/ 1px /*{a-active-shadow-y}*/ 0 /*{a-active-shadow-radius}*/ #005599 /*{a-active-shadow-color}*/;
}
/* Active radio button icon */
.ui-page-theme-a .ui-radio-on:after,
html .ui-bar-a .ui-radio-on:after,
html .ui-body-a .ui-radio-on:after,
html body .ui-group-theme-a .ui-radio-on:after,
.ui-btn.ui-radio-on.ui-btn-a:after {
border-color: #93CAF4 /*{a-active-background-color}*/;
}
/* Focus */
.ui-page-theme-a .ui-btn:focus,
html .ui-bar-a .ui-btn:focus,
html .ui-body-a .ui-btn:focus,
html body .ui-group-theme-a .ui-btn:focus,
html head + body .ui-btn.ui-btn-a:focus,
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-a .ui-focus,
html .ui-bar-a .ui-focus,
html .ui-body-a .ui-focus,
html body .ui-group-theme-a .ui-focus,
html head + body .ui-btn-a.ui-focus,
html head + body .ui-body-a.ui-focus {
box-shadow: 0 0 12px #93CAF4 /*{a-active-background-color}*/;
}
#action { #action {
margin: 0 -1em; margin: 0 -1em;
padding: 1em; padding: 1em;

20
www/index.html
View File

@ -46,7 +46,7 @@
<div data-role="page" id="box"> <div data-role="page" id="box">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a> <a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header"> <div data-role="header">
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1></h1> <h1></h1>
</div><!-- /header --> </div><!-- /header -->
<div role="main" class="ui-content"> <div role="main" class="ui-content">
@ -64,7 +64,7 @@
<div data-role="page" id="find"> <div data-role="page" id="find">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a> <a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header"> <div data-role="header">
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Find WiFi-Box</h1> <h1>Find WiFi-Box</h1>
</div><!-- /header --> </div><!-- /header -->
<div role="main" class="ui-content"> <div role="main" class="ui-content">
@ -87,7 +87,7 @@
<div data-role="page" id="help_connect_ap"> <div data-role="page" id="help_connect_ap">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a> <a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header"> <div data-role="header">
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Connecting</h1> <h1>Connecting</h1>
</div><!-- /header --> </div><!-- /header -->
<div role="main" class="ui-content"> <div role="main" class="ui-content">
@ -106,7 +106,7 @@
<div data-role="page" id="help_connect_cable"> <div data-role="page" id="help_connect_cable">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a> <a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header"> <div data-role="header">
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Cable connect</h1> <h1>Cable connect</h1>
</div><!-- /header --> </div><!-- /header -->
<div role="main" class="ui-content"> <div role="main" class="ui-content">
@ -118,7 +118,7 @@
<div data-role="page" id="join_network"> <div data-role="page" id="join_network">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a> <a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header"> <div data-role="header">
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Join network</h1> <h1>Join network</h1>
</div><!-- /header --> </div><!-- /header -->
<div role="main" class="ui-content"> <div role="main" class="ui-content">
@ -136,7 +136,7 @@
<div data-role="page" id="join_secured_network"> <div data-role="page" id="join_secured_network">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a> <a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header"> <div data-role="header">
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Connect</h1> <h1>Connect</h1>
</div><!-- /header --> </div><!-- /header -->
<div role="main" class="ui-content"> <div role="main" class="ui-content">
@ -154,7 +154,7 @@
<div data-role="page" id="join_other_network"> <div data-role="page" id="join_other_network">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a> <a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header"> <div data-role="header">
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Connect</h1> <h1>Connect</h1>
</div><!-- /header --> </div><!-- /header -->
<div role="main" class="ui-content"> <div role="main" class="ui-content">
@ -169,7 +169,7 @@
<div data-role="page" id="connecting_to_network"> <div data-role="page" id="connecting_to_network">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a> <a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header"> <div data-role="header">
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Connecting...</h1> <h1>Connecting...</h1>
</div><!-- /header --> </div><!-- /header -->
<div role="main" class="ui-content"> <div role="main" class="ui-content">
@ -183,7 +183,7 @@
<div data-role="page" id="update"> <div data-role="page" id="update">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a> <a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header"> <div data-role="header">
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Update</h1> <h1>Update</h1>
</div><!-- /header --> </div><!-- /header -->
<div role="main" class="ui-content"> <div role="main" class="ui-content">
@ -194,7 +194,7 @@
<div data-role="page" id="yourapp"> <div data-role="page" id="yourapp">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a> <a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header"> <div data-role="header">
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Your app here?</h1> <h1>Your app here?</h1>
</div><!-- /header --> </div><!-- /header -->
<div role="main" class="ui-content"> <div role="main" class="ui-content">