sundowndev
/
betaflight-configurator
mirror of https://github.com/sundowndev/betaflight-configurator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #30 from wanderzell/GUI-rework-skaman82 

Landing page style rework
10.3.x-maintenance
Albert Kravcov 2015-11-10 10:05:05 +01:00
parent da4899bed5 3641903e5c
commit 780913b705
3 changed files with 273 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
main.css
View File

@ -130,10 +130,10 @@ input[type="number"]::-webkit-inner-spin-button {
.headerbar {
height:110px;
width:100%;
float: left;
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
}
#logo {
position: relative;
float: left;
@ -907,8 +907,8 @@ dialog {
for testing: */
padding: 20px;
position: relative;
float: left;
width: calc(100% - 40px);
/*float: left;
width:calc(100% - 40px);*/
}
.content_toolbar {
@ -1385,7 +1385,7 @@ dialog {
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
.content_wrapper {
padding: 15px;
width: calc(100% - 30px);
/*width:calc(100% - 30px);*/
}
.tab_title {
font-size: 16px;

281
tabs/landing.css
View File

@ -1,41 +1,40 @@
.tab-landing {
margin: 0px;
padding: 0px;
background-color: #436c2c;
}
/* general layout */
.tab-landing {
margin: 0px;
padding: 0px;
width: 100%;
position: absolute;
}
.tab-landing .content_wrapper {
padding: 0;
box-sizing: content-box;
}
.tab-landing .content_top {
float: left;
width: 100%;
background-color: #59aa29;
height: 240px;
height: 35%;
height: 190px;
height: 150px;
background: #59aa29;
padding: 20px;
}
.tab-landing .content_mid {
float: left;
width: 100%;
background-color:#eaeaea;
overflow: hidden;
}
.tab-landing .content_foot {
float: left;
width: 100%;
clear: both;
padding: 20px;
}
/* hero block */
.tab-landing .logowrapper {
float: both;
margin-left:auto;
margin-right:auto;
width: 450px;
width:800px;
color:white;
margin-top:25px;
font-size:14px;
@ -52,40 +51,117 @@
font-family: 'open_sanslight', Arial;
}
.tab-landing .content_wrapper {
margin: 0px;
padding: 0px;
width: calc(100% - 0px);
height: 100%;
/* sponsors blocks */
.sponsors .title {
text-transform:uppercase;
font-size:10px;
}
.tab-landing .left {
width: 60%;
position: relative;
.sponsors {
margin-left:auto;
margin-right:auto;
text-align:center;
color: silver;
}
.tab-landing .right {
float: left;
margin-left: 10px;
width: calc(40% - 10px);
position: relative;
.sponsors ul {
margin-top:10px;
}
.contributing li {
list-style-type: disc;
list-style-position: initial;
margin-left: 20px;
.sponsors li {
display: inline-block;
margin-right:10px;
}
.sponsors li a {
border-radius:3px;
padding:2px;
padding-left:4px;
padding-right:4px;
font-size:13px;
line-height:10px;
font-weight:normal;
font-family: 'open_sanslight', Arial;
border: 1px solid white;
}
.sponsors li a:hover {
border-color: #eaeaea;
}
.text1, .text2, .text3 {
margin-top:15px;
margin-bottom:15px;
font-weight:normal;
font-family: 'open_sansregular', Arial;
font-size:12px;
}
/* text columns */
.tab-landing .content_mid .column .wrap {
padding: 20px;
}
.tab-landing .content_mid h2,
.tab-landing .content_mid h3 {
margin-bottom: 10px;
}
.tab-landing .content_mid h3 {
font-size: 12px;
}
.tab-landing .content_mid .text1 {
width:37%;
}
.tab-landing .content_mid .text2 {
width:37%;
}
.tab-landing .content_mid .text2 ul {
margin-top: 10px;
}
.tab-landing .content_mid .text2 li {
padding: 5px 0;
border-top: 1px dashed silver;
}
.tab-landing .content_mid .text3 {
width:26%;
}
.tab-landing .content_mid .text3 .wrap {
border: 1px solid silver;
border-radius: 5px;
background: white;
margin-right: 20px;
margin-top: 5px;
}
.tab-landing .content_mid .text3 .donate {
margin-top: 10px;
}
/* changelog block */
#changelog_bt {
height: 84px;
width:30px;
background-color: black;
background-color:green;
margin-left:-30px;
margin-top:30px;
position: absolute;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
position:fixed;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
#changelog_button {
@ -96,37 +172,40 @@
transform:rotate(270deg);
transform-origin: left top 0;
margin-left:6px;
margin-top: 74px;
margin-top:90px;
text-align: center;
}
.changelog_wrapper {
right:0px;
width: 30px;
width:400px;
height:100%;
position: fixed;
position:absolute;
}
.changelog {
height: calc(100% - 0px);
height:100%;
right:0px;
width:0px;
background-color: #363736;
position:absolute;
color: #ccc;
overflow-y: scroll;
background-color:white;
border-left: 3px solid green;
}
.changelog .title {
line-height: 20px;
text-align:left;
padding-left: 10px;
padding-left:20px;
font-weight: bold;
color: #56AC1D;
text-transform:uppercase;
margin-top: 10px;
}
.changelog .changewrapper {
height: calc(100% - 40px);
padding: 10px;
height: 100%;
padding: 20px;
overflow-y: hidden;
overflow-x: hidden;
-webkit-user-select: text;
@ -145,111 +224,21 @@
.changelog .changewrapper ul {
margin-bottom:10px;
line-height: 15px;
line-height:17px;
}
.changelog .changewrapper ul span {
font-weight: bold;
color: #fff;
}
.changelog .changewrapper li {
font-weight: normal;
margin-left: 0px;
border-top: 1px solid #656565;
padding-top: 4px;
padding-bottom: 4px;
border-top:1px solid #eee;
padding-top:5px;
padding-bottom:5px;
}
.changelog .changewrapper p {
margin-bottom: 5px;
}
.text2 ul {
margin-bottom: 0px;
line-height: 15px;
}
.text2 li {
font-weight: normal;
margin-left: 0px;
border-top: 1px solid #ccc;
padding-top: 4px;
padding-bottom: 4px !important;
}
.sponsors .title {
text-transform: uppercase;
font-size: 10px;
}
.sponsors {
float: both;
margin-left: auto;
margin-right: auto;
width: 825px;
text-align: center;
color: rgba(255, 255, 255, 0.50);
margin-top: 2%;
}
.sponsors ul {
margin-top: 10px;
float: left;
}
.sponsors li {
float: left;
margin-right: 10px;
display: block;
}
.sponsors li a {
border-radius: 3px;
padding: 2px;
padding-left: 4px;
padding-right: 4px;
font-size: 13px;
line-height: 10px;
color: white;
font-weight: normal;
font-family: 'open_sanslight', Arial;
}
.sponsors li a:hover {
background-color: rgba(255, 255, 255, 0.30);
color: #fff;
}
.text1, .text2, .text3 {
margin-top: 15px;
margin-bottom: 15px;
font-weight: normal;
font-family: 'open_sansregular', Arial;
font-size: 12px;
}
.text3 {
font-size: 11px;
}
.mid_head {
font-size: 13px;
line-height: 10px;
color: #000;
font-weight: bold;
margin-bottom: 10px;
line-height: 16px;
}
.donate {
float: left;
margin-top: 15px;
width: 100%;
text-align: center;
margin-bottom: -5px;
}
.text1 a:hover, .text2 a:hover, .text3 a:hover {
color: #59aa29;
margin-bottom: 20px;
}

75
tabs/landing.html
View File

@ -1,38 +1,51 @@
<div class="tab-landing">
<div class="content_wrapper">
<div class="changelog_wrapper">
<div class="changelog configurator">
<div id="changelog_bt"><a id="changelog_button" href="#">Changelog</a></div>
<div class="title" i18n="defaultChangelogHead"></div>
<div class="changewrapper">
<!-- changelog content will be loaded here -->
</div>
</div>
</div>
<div class="content_top">
<div class="logowrapper" align="center">
<span>Welcome to</span><br> <img src="../images/cf_logo_white.svg" />
<span>Welcome to</span><br>
<img src="../images/cf_logo_white.svg"/>
<div class="" i18n="defaultWelcomeIntro" align="center"></div>
</div>
</div>
<div class="content_mid">
<div class="cf_column third_left text1" style="width: 41%">
<div class="spacer_left" style="width: calc(100% - 30px); padding-left: 20; padding-right: 10px;">
<div class="mid_head">Hardware</div>
<!--div class="texts">
<h2 class="mid_head">Hardware</h2>
<div i18n="defaultWelcomeText"></div>
<h2 i18n="defaultContributingHead" class="mid_head"></h2>
<div i18n="defaultContributingText"></div>
<h2 i18n="defaultDonateHead" class="mid_head"></h2>
<div i18n="defaultDonateText"></div>
<div class="donate">
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSQKVT6UYKGL6" target="_blank" title="Donate"><img src="./images/btn-donate.png" alt="Paypal" height="30" /></a></li>
</div>
</div-->
<div class="column third_left text1">
<div class="wrap">
<h2>Hardware</h2>
<div i18n="defaultWelcomeText"></div>
</div>
</div>
<div class="cf_column third_center text2" style="width: 37%;">
<div class="spacer">
<div i18n="defaultContributingHead" class="mid_head"></div>
<div class="column third_center text2">
<div class="wrap">
<h2 i18n="defaultContributingHead"></h2>
<div i18n="defaultContributingText"></div>
</div>
</div>
<div class="cf_column third_right text3" style="width: calc(22% - 15px); margin-right: 15px;">
<div class="spacer_right" style="padding-left: 15px; width: calc(100% - 25px);">
<div class="gui_box grey" style="min-height: 200px; border: #59aa29 1px solid;">
<div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
<div i18n="defaultDonateHead" class="mid_head"></div>
<div class="column third_right text3">
<div class="wrap">
<h3 i18n="defaultDonateHead"></h3>
<div i18n="defaultDonateText"></div>
<div class="donate">
<a
href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSQKVT6UYKGL6"
target="_blank" title="Donate"><img src="./images/btn-donate.png" alt="Paypal"
height="30" /></a>
</li>
</div>
</div>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSQKVT6UYKGL6" target="_blank" title="Donate"><img src="./images/btn-donate.png" alt="Paypal" height="30" /></a></li>
</div>
</div>
</div>
@ -42,30 +55,16 @@
<div class="title" i18n="defaultSponsorsHead"></div>
<ul>
<li><a href="http://www.massiverc.com" title="www.massiverc.com" target="_blank">MassiveRC</a></li>
<li><a href="http://www.armattanquads.com" title="www.armattanquads.com" target="_blank">Armattan
Quads</a></li>
<li><a href="http://www.bcmultirotors.com" title="www.bcmultirotors.com" target="_blank">Bungeecow
Multirotors</a></li>
<li><a href="http://www.immersionrc.com" title="www.immersionrc.com" target="_blank">Immersion
RC</a></li>
<li><a href="http://www.armattanquads.com" title="www.armattanquads.com" target="_blank">Armattan Quads</a></li>
<li><a href="http://www.bcmultirotors.com" title="www.bcmultirotors.com" target="_blank">Bungeecow Multirotors</a></li>
<li><a href="http://www.immersionrc.com" title="www.immersionrc.com" target="_blank">Immersion RC</a></li>
<li><a href="http://www.radioc.co.uk" title="www.radioc.co.uk" target="_blank">RadioC</a></li>
<li><a href="http://www.multiwiicopter.com" title="www.multiwiicopter.com" target="_blank">MultiiWiiCopter</a></li>
<li><a href="http://www.overskyrc.com" title="www.overskyrc.com" target="_blank">OverSkyRC</a></li>
<li><a href="http://multirotormania.com" title="multirotormania.com" target="_blank">Multi
Rotor Mania</a></li>
<li><a href="http://multirotormania.com" title="multirotormania.com" target="_blank">Multi Rotor Mania</a></li>
</ul>
</div>
</div>
<div class="changelog_wrapper">
<div class="changelog configurator">
<div id="changelog_bt">
<a id="changelog_button" href="#">Changelog</a>
</div>
<div class="title" i18n="defaultChangelogHead"></div>
<div class="changewrapper">
<!-- changelog content will be loaded here -->
</div>
</div>
</div>
</div>
</div>