mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Finally placed the window
Could be a bit better, but I suck at CSS
This commit is contained in:
unsettledgames
parent
598bf20d46
commit
9c2677ea6e
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user