Redo the UI. Light Theme.

This commit is contained in:
Ceda EI 2020-07-16 17:25:37 +05:30
parent 7bd0fcc621
commit 24ed412f50
4 changed files with 36 additions and 34 deletions

View File

@ -25,7 +25,7 @@ textarea {
color: #7d7d7d; color: #7d7d7d;
z-index: -1000; z-index: -1000;
position: absolute; position: absolute;
top: 20px; /* top: 20px; */
left: 0px; left: 0px;
width: 30px; /* 30 to get 20 away from box */ width: 30px; /* 30 to get 20 away from box */
font-size: 13px; font-size: 13px;
@ -54,12 +54,12 @@ textarea {
/* key */ /* key */
#key { #key {
position: fixed; display: flex;
top: 0px; justify-content: space-between;
right: 0px; width: 100%;
z-index: +1000; /* watch out */ position: sticky;
flex-wrap: row;
} }
#box1 { #box1 {
padding: 5px; padding: 5px;
text-align: center; text-align: center;
@ -67,19 +67,22 @@ textarea {
} }
#box2 { #box2 {
display: flex;
justify-content: right;
background: #fcfcfc; background: #fcfcfc;
font-size: 0px; font-size: 0px;
padding: 0px 5px; padding: 0px 5px;
} }
#box1 a.logo, #box1 a.logo:visited { a.logo, a.logo:visited {
display: inline-block; display: inline-block;
background: url(logo.png); background: url(logo.png);
width: 126px; width: 126px;
min-width: 126px;
height: 42px; height: 42px;
} }
#box1 a.logo:hover { a.logo:hover {
background-position: 0 bottom; background-position: 0 bottom;
} }
@ -113,6 +116,8 @@ textarea {
} }
#box3, #messages li { #box3, #messages li {
position: absolute;
right: 100px;
background: #fcfcfc; background: #fcfcfc;
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -120,11 +125,16 @@ textarea {
padding: 10px 15px; padding: 10px 15px;
} }
#box3 .label, #messages li { #box3 .label {
color: #fff; color: #000;
font-weight: bold; font-weight: bold;
} }
#messages li {
color: #FFF;
right: 50px;
}
#box3 .shortcut { #box3 .shortcut {
color: #c4dce3; color: #c4dce3;
font-weight: normal; font-weight: normal;
@ -152,12 +162,8 @@ textarea {
#box2 .button-picture{ border-width: 0; font-size: inherit; } #box2 .button-picture{ border-width: 0; font-size: inherit; }
#messages { #messages {
position:fixed;
top:0px;
right:138px;
margin:0; margin:0;
padding:0; padding:0;
width:400px;
} }
#messages li { #messages li {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,8 +1,7 @@
<html> <html>
<head> <head>
<title>Webionite hastebin</title>
<title>hastebin</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="tomorrow.css"/> <link rel="stylesheet" type="text/css" href="tomorrow.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/> <link rel="stylesheet" type="text/css" href="application.css"/>
@ -39,30 +38,27 @@
</head> </head>
<body> <body>
<ul id="messages"></ul>
<div id="key"> <div id="key">
<div id="pointer" style="display:none;"></div>
<div id="box1">
<a href="/about.md" class="logo"></a> <a href="/about.md" class="logo"></a>
</div> <div>
<div id="pointer" style="display:none;"></div>
<div id="box2"> <div id="box2">
<button class="save function button-picture">Save</button> <button class="save function button-picture">Save</button>
<button class="new function button-picture">New</button> <button class="new function button-picture">New</button>
<button class="duplicate function button-picture">Duplicate & Edit</button> <button class="duplicate function button-picture">Duplicate &amp; Edit</button>
<button class="raw function button-picture">Just Text</button> <button class="raw function button-picture">Just Text</button>
<button class="twitter function button-picture">Twitter</button>
</div> </div>
<div id="box3" style="display:none;"> <div id="box3" style="display:none;">
<div class="label"></div> <div class="label"></div>
<div class="shortcut"></div> <div class="shortcut"></div>
</div> </div>
<ul id="messages"></ul>
</div>
</div> </div>
<div id="linenos"></div> <div id="linenos"></div>
<pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre> <pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre>
<textarea spellcheck="false" style="display:none;"></textarea> <textarea spellcheck="false" style="display:none;"></textarea>
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB