Finally placed the window

Could be a bit better, but I suck at CSS
This commit is contained in:
unsettledgames 2021-02-17 12:57:32 +01:00
parent 598bf20d46
commit 9c2677ea6e
2 changed files with 80 additions and 66 deletions

View File

@ -1610,10 +1610,9 @@ div#pb-options {
#sp-quickstart {
position:relative;
width: 80%;
width: 70%;
margin-top:-20px;
margin-left:10%;
left:0px;
margin-left:20px
}
#sp-quickstart-title {
@ -1654,47 +1653,56 @@ div#pb-options {
}
}
#sp-mode-palette {
text-align: center;
position: absolute;
width:70%;
bottom:40px;
font-size:18px;
font-weight: bold;
#sp-newpixel {
display: inline-block;
width:35%;
height:64vh;
padding:20px;
position:relative;
background-color:$basecolor;
top:-47px;
div.button-menu {
border:3px solid $basetextweak;
border-radius:5px;
position:relative;
display:inline-block;
padding: 0 0 0 0;
text-align:left;
-ms-transform: translateY(38%);
transform: translateY(38%);
div {
border:none;
padding:none;
margin:none;
background-color:transparent;
width:100px;
float:left;
text-align: center;
height:30px;
cursor:pointer;
p {
-ms-transform: translateY(-50%);
transform: translateY(-50%);
#sp-mode-palette {
text-align: center;
position: relative;
float:bottom;
font-size:18px;
font-weight: bold;
div.button-menu {
border:3px solid $basetextweak;
border-radius:5px;
position:relative;
display:inline-block;
padding: 0 0 0 0;
text-align:left;
-ms-transform: translateY(38%);
transform: translateY(38%);
div {
border:none;
padding:none;
margin:none;
background-color:transparent;
width:100px;
float:left;
text-align: center;
height:30px;
cursor:pointer;
p {
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.bm-right {
border-left:3px solid $basetextweak;
}
.sp-interface-selected {
background-color: $basetextweak;
}
}
.bm-right {
border-left:3px solid $basetextweak;
}
.sp-interface-selected {
background-color: $basetextweak;
}
}
}

View File

@ -331,38 +331,44 @@
</div>
</div>
<div id="sp-quickstart-title">
Quickstart
<div id = "sp-quickstart-container">
<div id="sp-quickstart-title">
Quickstart
</div>
<div id="sp-quickstart">
<div class="sp-template"><p>Load</p></div>
<div class="sp-template"><p><span>New</span> Gameboy</p></div>
<div class="sp-template"><p><span>New</span> C64</p></div>
<div class="sp-template"><p><span>New</span> Pico8</p></div>
<div class="sp-template"><p><span>New</span> 32x32</p></div>
<div class="sp-template"><p><span>New</span> 64x64</p></div>
<div class="sp-template"><p><span>New</span> 128x128</p></div>
<div class="sp-template"><p><span>New</span> 256x256</p></div>
</div>
</div>
<div id="sp-mode-palette">
<span>Interface mode:
<div id="sp-newpixel">
<h1>New Custom Pixel</h1>
<!-- Editor mode-->
<h2>Editor mode</h2>
<div id="sp-mode-palette">
<div class="button-menu">
<div class="bm-left"><p>Basic</p></div>
<div class="sp-interface-selected bm-right"><p>Advanced</p></div>
</div>
</span>
</div>
<span>Palette:
<button id="palette-button" class="dropdown-button">Choose a palette...</button>
<div id="palette-menu" class="dropdown-menu">
<button id="no-palette-button">Empty Palette</button>
<button id="load-palette-button">Load palette...</button>
</div>
</span>
</div>
<h2>Size</h2>
<input id="size-width" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
<h2>Palette</h2>
<button id="palette-button" class="dropdown-button">Choose a palette...</button>
<div id="palette-menu" class="dropdown-menu"><button id="no-palette-button">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
<div id="sp-quickstart">
<div class="sp-template"><p>Load</p></div>
<div class="sp-template"><p><span>New</span> custom</p></div>
<div class="sp-template" onclick="newPixel()"><p><span>New</span> Gameboy</p></div>
<div class="sp-template"><p><span>New</span> C64</p></div>
<div class="sp-template"><p><span>New</span> Pico8</p></div>
<div class="sp-template"><p><span>New</span> 32x32</p></div>
<div class="sp-template"><p><span>New</span> 64x64</p></div>
<div class="sp-template"><p><span>New</span> 128x128</p></div>
<div class="sp-template"><p><span>New</span> 256x256</p></div>
<div class="sp-template"><p><span>New</span> 512x512</p></div>
<div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
<div>
<button id="create-button" class="default">Create</button>
</div>
</div>
</div>
</div>