Redo the UI. Light Theme.
This commit is contained in:
		| @@ -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 | 
| @@ -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> | 			<a href="/about.md" class="logo"></a> | ||||||
| 			<div id="box1"> | 			<div> | ||||||
| 				<a href="/about.md" class="logo"></a> | 				<div id="pointer" style="display:none;"></div> | ||||||
| 			</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 & Edit</button> | 					<button class="raw function button-picture">Just Text</button> | ||||||
| 				<button class="raw function button-picture">Just Text</button> | 				</div> | ||||||
| 				<button class="twitter function button-picture">Twitter</button> | 				<div id="box3" style="display:none;"> | ||||||
| 			</div> | 					<div class="label"></div> | ||||||
| 			<div id="box3" style="display:none;"> | 					<div class="shortcut"></div> | ||||||
| 				<div class="label"></div> | 				</div> | ||||||
| 				<div class="shortcut"></div> | 				<ul id="messages"></ul> | ||||||
| 			</div> | 			</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> | ||||||
|   | |||||||
							
								
								
									
										
											BIN
										
									
								
								static/logo.png
									
									
									
									
									
								
							
							
						
						
									
										
											BIN
										
									
								
								static/logo.png
									
									
									
									
									
								
							
										
											Binary file not shown.
										
									
								
							| Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 5.0 KiB | 
		Reference in New Issue
	
	Block a user