Commit ff385656 authored by Big Bad Waffle's avatar Big Bad Waffle

small style changes and made mainMenu much prettier

parent f76798dd
......@@ -111,7 +111,9 @@ body {
.btn {
cursor: pointer;
padding-top: 10px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: lighten(@black, 10%);
......
......@@ -127,7 +127,7 @@
.btn {
background-color: @blueC;
color: @white;
padding: 10px;
padding: 0px 10px;
height: 40px;
&:hover {
......
......@@ -88,7 +88,6 @@
float: left;
height: 100%;
color: @white;
padding-top: 5px;
cursor: pointer;
background-color: @purpleB;
......
......@@ -19,10 +19,11 @@ define([
) {
return {
tpl: template,
centered: true,
modal: true,
hasClose: true,
postRender: function () {
this.onEvent('onCloseOptions', this.show.bind(this));
this.onEvent('onShowMainMenu', this.show.bind(this));
......@@ -30,7 +31,6 @@ define([
this.el.find('.btnOptions').on('click', this.openOptions.bind(this));
this.el.find('.btnCharSelect').on('click', this.charSelect.bind(this));
this.el.find('.btnLogOut').on('click', this.logOut.bind(this));
this.el.find('.btnContinue').on('click', this.toggle.bind(this));
this.el.find('.btnPatreon').on('click', this.patreon.bind(this));
this.onEvent('onResize', this.onResize.bind(this));
......
......@@ -2,36 +2,76 @@
.uiMainMenu {
display: none;
width: 400px;
background-color: @blackC;
border: 5px solid @blackB;
text-align: center;
padding: 0px 16px;
.btn {
color: @white;
> .heading {
color: @blueA;
width: 100%;
height: 32px;
background-color: @blueC;
margin: 16px 0px;
padding-top: 8px;
cursor: pointer;
&.btnNames {
display: none;
}
height: 36px;
background-color: @blackB;
position: relative;
&:hover {
background-color: @blueD;
.heading-text {
padding-top: 8px;
margin: auto;
}
}
.btnIssue {
background-color: @redC;
.options {
display: flex;
flex-direction: column;
padding: 10px;
.btn {
color: @white;
width: 100%;
height: 35px;
background-color: @blueC;
cursor: pointer;
padding: 0px 20px;
+ .btn {
margin-top: 10px;
}
&.btnNames {
display: none;
}
&:hover {
background-color: @blueD;
}
&.btn-red {
background-color: @redC;
&:hover {
background-color: @redD;
}
}
&.btn-orange {
background-color: @orangeC;
&:hover {
background-color: @orangeD;
}
}
}
.btnIssue {
background-color: @redC;
&:hover {
background-color: @redD;
}
&:hover {
background-color: @redD;
}
}
......
<div class="uiMainMenu hasBorderShadow">
<div class="btn btnContinue">Continue</div>
<div class="btn btnOptions">Options</div>
<div class="btn btnCharSelect">Character Select</div>
<div class="btn btnLogOut">Log Out</div>
<div class="btn btnPatreon">Pledge on Patreon</div>
<div class="heading">
<div class="heading-text">menu</div>
</div>
<div class="options">
<div class="btn btnOptions">Options</div>
<div class="btn btnCharSelect">Character Select</div>
<div class="btn btnLogOut">Log Out</div>
<div class="btn btnPatreon">Pledge on Patreon</div>
</div>
</div>
......@@ -212,8 +212,6 @@ define([
onAfterShow: function () {
this.onResize();
events.emit('onShowOverlay', this.el);
this.build();
},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment