diff options
| author | jules <jules@okfoc.us> | 2014-02-02 00:03:04 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2014-02-02 00:03:04 -0500 |
| commit | 29fea9f5478168457d276bcaea5bed5cba32ce31 (patch) | |
| tree | 0f6907f788819d628a1168e315b65e423b011f41 /shader-combo.html | |
| parent | 1964a628d995a8a54bcd486441f6782d38be5920 (diff) | |
move everything around
Diffstat (limited to 'shader-combo.html')
| -rw-r--r-- | shader-combo.html | 32 |
1 files changed, 19 insertions, 13 deletions
diff --git a/shader-combo.html b/shader-combo.html index 2ef8ed1..bd9f1c0 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -3,7 +3,7 @@ <head> <title>Shaderblaster</title> <style type="text/css"> -body { background: #f8f8f8; font-size: 14px; } +body { background: #fbfbfb; font-size: 14px; } div { float: left; padding: 10px;} form { display: inline-block; } a { color: #00f; } @@ -18,13 +18,14 @@ a { color: #00f; } #uploaded-url { display: none; width: 400px; } #uploaded-url + br { display: none; } -#header { clear: right; width:100%; padding: 0; font-size: 12px; } -#shader-gallery,#gallery-images { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; border-bottom: 1px solid #ccc; } +#header { clear: right; width:100%; padding: 0; font-size: 12px; position: fixed;bottom:0;background: rgba(255,255,255,0.9); } +.gallery { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; border-bottom: 1px solid #ccc; } +.gallery::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } +.gallery::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); } #shader-gallery img,#shader-gallery canvas,#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; clear: right; } .shader { width: 100px; } .shader span { display: block } -#help { float: right; } .dragging { cursor: -webkit-grabbing !important; } .ui-sortable-helper { cursor: -webkit-grabbing !important; } @@ -52,21 +53,26 @@ a { color: #00f; } #render,#save,#upload,#save-shader { font-weight: bold; } #save[disabled],#upload[disabled] { font-weight: normal; } -#logo { position: fixed; bottom: 10px; right: 10px; font-size: 38px; font-weight: bold; font-style: italic; margin-top: 0px; margin: 0 5px; color: #000; } +#logo { display: inline; position: relative; top: 2px; font-size: 18px; font-family: georgia; font-weight: bold; font-style: italic; margin: 0px; color: #333; } +#corner { position: fixed; top: -5px; right: 0px; } + </style> </head> <body> -<h1 id="logo">shaderblaster</h1> +<div id="corner"> + <h1 id="logo">shaderblaster</h1> + <button id="show-help">help</button> + <button id="show-about">about</button> + <select id="examples"> + <option>examples</option> + </select> +</div> <div id="header"> - <button id="help">help</button> <button class="toggle-off">x</button> - <button id="new-shader"><b>new shader</b></button> <!-- - <select id="examples"> - <option>examples</option> - </select> + <button id="new-shader"><b>new shader</b></button> --> <!-- <input type="text" id="shader-id" disabled><button id="fetch-info" disabled>info</button> @@ -87,7 +93,7 @@ a { color: #00f; } <select id="pick-user"> <option>fetching users..</option> </select> - <div id="shader-gallery"></div> + <div id="shader-gallery" class="gallery"></div> </span> <span id="gallery-form" class="form"> <button id="gallery-random">asdf random</button> @@ -95,7 +101,7 @@ a { color: #00f; } <input type="text" id="dumpfm-search-query" value="duck bill"> <button id="gallery-search">search dump</button> </form> - <div id="gallery-images"></div> + <div id="gallery-images" class="gallery"></div> </span> </div> |