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;
z-index: -1000;
position: absolute;
top: 20px;
/* top: 20px; */
left: 0px;
width: 30px; /* 30 to get 20 away from box */
font-size: 13px;
@ -54,12 +54,12 @@ textarea {
/* key */
#key {
position: fixed;
top: 0px;
right: 0px;
z-index: +1000; /* watch out */
display: flex;
justify-content: space-between;
width: 100%;
position: sticky;
flex-wrap: row;
}
#box1 {
padding: 5px;
text-align: center;
@ -67,19 +67,22 @@ textarea {
}
#box2 {
display: flex;
justify-content: right;
background: #fcfcfc;
font-size: 0px;
padding: 0px 5px;
}
#box1 a.logo, #box1 a.logo:visited {
a.logo, a.logo:visited {
display: inline-block;
background: url(logo.png);
width: 126px;
min-width: 126px;
height: 42px;
}
#box1 a.logo:hover {
a.logo:hover {
background-position: 0 bottom;
}
@ -113,6 +116,8 @@ textarea {
}
#box3, #messages li {
position: absolute;
right: 100px;
background: #fcfcfc;
font-family: Helvetica, sans-serif;
font-size: 12px;
@ -120,11 +125,16 @@ textarea {
padding: 10px 15px;
}
#box3 .label, #messages li {
color: #fff;
#box3 .label {
color: #000;
font-weight: bold;
}
#messages li {
color: #FFF;
right: 50px;
}
#box3 .shortcut {
color: #c4dce3;
font-weight: normal;
@ -152,12 +162,8 @@ textarea {
#box2 .button-picture{ border-width: 0; font-size: inherit; }
#messages {
position:fixed;
top:0px;
right:138px;
margin:0;
padding:0;
width:400px;
}
#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>
<head>
<title>hastebin</title>
<title>Webionite hastebin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="tomorrow.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/>
@ -39,30 +38,27 @@
</head>
<body>
<ul id="messages"></ul>
<div id="key">
<div id="pointer" style="display:none;"></div>
<div id="box1">
<a href="/about.md" class="logo"></a>
</div>
<div>
<div id="pointer" style="display:none;"></div>
<div id="box2">
<button class="save function button-picture">Save</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="twitter function button-picture">Twitter</button>
</div>
<div id="box3" style="display:none;">
<div class="label"></div>
<div class="shortcut"></div>
</div>
<ul id="messages"></ul>
</div>
</div>
<div id="linenos"></div>
<pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre>
<textarea spellcheck="false" style="display:none;"></textarea>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB