/IodineGBA

Rewritten CSS #38

Merged
merged 2 commits into from Sep 20, 2016
Commits
Jump to file or symbol
Failed to load files and symbols.
+145 −129
Diff settings

Always

Just for now

Next

Rewritten CSS

  • Loading branch information...
@Daniel-Griffiths
Daniel-Griffiths committed Aug 23, 2016
commit 77999c4df3b5a104f83f47959320510c8a678bc4
View
72 index.html
@@ -67,48 +67,42 @@
<link rel="stylesheet" href="user_css/main.css">
</head>
<body>
- <div id="container">
+ <div class="container" id="container">
<div id="menu" class="paused">
- <ul id="menu_top">
+ <ul class="menu" id="menu_top">
<li>
- <span>File</span>
+ File
<ul>
- <li class="nowrap"><span>BIOS: </span> <input type="file" id="bios_load" class="files"></li>
- <li class="nowrap"><span>Game: </span> <input type="file" id="rom_load" class="files"></li>
+ <li><span>BIOS: </span> <input type="file" id="bios_load" class="files"></li>
+ <li><span>Game: </span> <input type="file" id="rom_load" class="files"></li>
</ul>
</li>
- <li id="play" class="show">
- <span>Play</span>
- </li>
- <li id="pause" class="hide">
- <span>Pause</span>
- </li>
- <li id="restart">
- <span>Restart</span>
- </li>
+ <li id="play" class="show">Play</li>
+ <li id="pause" class="hide">Pause</li>
+ <li id="restart">Restart</li>
<li>
- <span>Settings</span>
+ Settings
<ul>
- <li class="nowrap">
- <input type="checkbox" id="skip_boot"><span>Skip Boot Intro</span>
+ <li>
+ <input type="checkbox" id="skip_boot"> Skip Boot Intro
</li>
- <li class="nowrap">
- <input type="checkbox" id="toggleSmoothScaling" checked="checked"><span>Smooth Scaling</span>
+ <li>
+ <input type="checkbox" id="toggleSmoothScaling" checked="checked"> Smooth Scaling
</li>
- <li class="nowrap">
- <input type="checkbox" id="toggleDynamicSpeed"><span>Dynamic Speed</span>
+ <li>
+ <input type="checkbox" id="toggleDynamicSpeed"> Dynamic Speed
</li>
- <li class="nowrap">
- <input type="checkbox" id="offthread-cpu" checked="checked"><span>CPU off-thread</span>
+ <li>
+ <input type="checkbox" id="offthread-cpu" checked="checked"> CPU off-thread
</li>
- <li class="nowrap">
- <input type="checkbox" id="offthread-gpu" checked="checked"><span>GPU off-thread</span>
+ <li>
+ <input type="checkbox" id="offthread-gpu" checked="checked"> GPU off-thread
</li>
- <li class="nowrap">
- <input type="checkbox" id="sound"><span>Sound</span>
+ <li>
+ <input type="checkbox" id="sound"> Sound
</li>
<li>
- <span>GBA Bindings</span>
+ GBA Bindings
<ul>
<li id="key_a">
<span>A</span>
@@ -143,7 +137,7 @@
</ul>
</li>
<li>
- <span>Emulator Bindings</span>
+ Emulator Bindings
<ul>
<li id="key_volumeup">
<span>Volume Up</span>
@@ -168,33 +162,31 @@
</ul>
</li>
<li>
- <span>Volume</span>
+ Volume
<ul>
<li>
<input type="range" id="volume">
</li>
</ul>
</li>
<li id="saves_menu">
- <span>Saves</span>
+ Saves
<ul id="saves_menu_container">
- <li class="nowrap">
+ <li>
<span>Import:</span><input type="file" id="import" class="files">
</li>
- <li class="nowrap" id="existing_saves">
+ <li id="existing_saves">
<span>Existing Saves</span>
<ul id="existing_saves_list">
</ul>
</li>
- <li class="nowrap">
+ <li>
<a href="./" id="export" target="_new">Export All Saves</a>
</li>
</ul>
</li>
- <li id="fullscreen">
- <span>Fullscreen</span>
- </li>
+ <li id="fullscreen">Fullscreen</li>
<li>
<span id="speed">Speed</span>
<ul>
@@ -211,10 +203,10 @@
</li>
</ul>
</div>
- <div id="main">
- <canvas id="emulator_target" width="240" height="160"></canvas>
+ <div class="main" id="main">
+ <canvas class="canvas" id="emulator_target" width="240" height="160"></canvas>
</div>
- <span id="tempMessage"></span>
+ <span class="message" id="tempMessage"></span>
</div>
</body>
</html>
View
202 user_css/main.css
@@ -1,34 +1,68 @@
+/*
+|-----------------------------------------
+| Core CSS
+|-----------------------------------------
+ */
+
+*, *:before, *:after{
+ box-sizing: border-box;
+}
+
html, body {
+ font-family: Arial, sans-serif;
+ height: 100%;
+ width:100%;
margin: 0;
padding: 0;
+ background: #000;
overflow: hidden;
}
-div#container {
+
+/* reset all list items */
+ul{
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
width: 100%;
height: 100%;
}
-div#main {
- position:absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- background-color: rgb(0, 0, 0);
-}
-div#main canvas {
+
+.main {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-grow: 1;
+}
+
+/*
+|-----------------------------------------
+| Canvas
+|-----------------------------------------
+|
+| Classes are automatically overwritten
+| by the filter styles, therefore only
+| attributes and id's can be used.
+|
+ */
+
+canvas {
margin: auto;
display: block;
padding: 0px;
- background-color: rgb(248, 248, 248);
-}
-canvas {
cursor: none;
}
+
canvas.textureSmooth {
image-rendering: auto;
image-rendering: optimizeQuality;
-ms-interpolation-mode: bicubic;
}
+
canvas.texturePixelated {
image-rendering: -webkit-optimize-contrast;
image-rendering: -o-crisp-edges;
@@ -37,92 +71,82 @@ canvas.texturePixelated {
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
-span#tempMessage {
- color: red;
+
+/*
+|-----------------------------------------
+| Messages
+|-----------------------------------------
+ */
+
+.message {
+ background: #6cc27d;
+ padding: 1em 2em;
+ text-align: center;
+ color: #fff;
bottom: 0px;
- position: absolute;
- right: 0px;
+ position: fixed;
+ left: 0px;
display: none;
- font-size: 40pt;
font-weight: bold;
- text-align: right;
vertical-align: bottom;
font-family: monospace;
-}
-div#menu {
- position: absolute;
z-index: 1;
- width: 100%;
- height: 0px;
}
-div#menu ul {
- list-style:none;
- position:relative;
- float:left;
- margin:0;
- padding:0;
+
+/*
+|-----------------------------------------
+| Main Menu
+|-----------------------------------------
+ */
+
+/* top level menu */
+.menu {
+ position: fixed;
+ display: flex;
+ flex-wrap: wrap;
width: 100%;
- background-color: rgb(255, 255, 255);
- z-index: 2;
-}
-div#menu ul span, div#menu ul a {
- color: rgb(50, 50, 50);
- text-decoration: none;
- font-weight: 700;
- font-size: 12px;
- line-height: 32px;
- padding: 0 15px;
- font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
-}
-div#menu ul ul a, div#menu ul ul span {
- line-height: 120%;
- padding: 10px 15px;
-}
-div#menu ul li {
- position: relative;
- float: left;
- margin: 0;
- padding: 0;
-}
-div#menu ul li:hover {
- background-color: rgb(240, 240, 240) !important;
-}
-div#menu ul li:hover > ul {
- display: block;
-}
-li.hide {
- display: none !important;
-}
-div#menu ul ul {
- display: none;
- position: absolute;
- top: 100%;
- left: 0;
- background: rbg(255, 255, 255);
- padding: 0;
-}
-div#menu ul ul li {
- float: none;
- display: table-row;
- z-index: 3;
- background-color: rgb(255, 255, 255);
-}
-div#menu ul ul ul {
- top: 0;
- left: 100%;
-}
-input {
- max-width: 150px;
-}
-div#menu.paused > ul, div#menu.playing > ul:hover {
- opacity: 1;
-}
-div#menu.playing > ul {
+ background: #fff;
+ border-bottom: 1px solid rgba(0,0,0,.1);
+ transition: .3s ease;
+}
+
+/* auto hide menu while playing */
+.playing .menu{opacity: 0;}
+.playing .menu:hover{opacity: 0.9;}
+
+/* sub level menu */
+.menu ul{
+ visibility: hidden;
opacity: 0;
+ position: absolute;
+ top:100%;
+ left:0;
+ background: whitesmoke;
+ box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
+ transition: .3s ease;
+ z-index: 1;
}
-div#menu input+span {
- padding-left: 30px;
+
+/* bottom level nav */
+.menu ul ul{
+ top:0;
+ left: 100%;
}
-.nowrap {
+
+.menu li{
white-space: nowrap;
+ position: relative;
+ padding: .7em 1em;
+ cursor:pointer;
+}
+
+.menu li:hover{
+ background: rgba(0,0,0,.1);
+}
+
+/* show sub nav on hover */
+.menu li:hover > ul{
+ visibility: visible;
+ opacity: 1;
}
+