mirror of
https://github.com/seejohnrun/haste-server.git
synced 2024-11-22 20:51:21 +00:00
make haste-server responsive, new layout
This commit is contained in:
Colin
parent
5d2965ffc5
commit
2dccac7be7
2 changed files with 128 additions and 113 deletions
|
|
@ -1,7 +1,8 @@
|
||||||
body {
|
body {
|
||||||
background: #002B36;
|
background: #263238;
|
||||||
padding: 20px 50px;
|
padding: 0 0 80px;
|
||||||
margin: 0px;
|
margin: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* textarea */
|
/* textarea */
|
||||||
|
|
@ -21,10 +22,14 @@ textarea {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logo a:hover svg path {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
/* the line numbers */
|
/* the line numbers */
|
||||||
|
|
||||||
#linenos {
|
#linenos {
|
||||||
color: #7d7d7d;
|
color: #7d7d7d;
|
||||||
z-index: -1000;
|
z-index: -1000;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
|
|
@ -45,7 +50,11 @@ textarea {
|
||||||
border: 0px;
|
border: 0px;
|
||||||
outline: none;
|
outline: none;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
overflow: inherit;
|
overflow: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#box.hljs {
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#box code {
|
#box code {
|
||||||
|
|
@ -57,119 +66,98 @@ textarea {
|
||||||
|
|
||||||
#key {
|
#key {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
bottom: 0px;
|
||||||
|
left: 0;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
z-index: +1000; /* watch out */
|
z-index: +1000; /* watch out */
|
||||||
}
|
}
|
||||||
|
|
||||||
#box1 {
|
button {
|
||||||
padding: 5px;
|
font-size: 14px;
|
||||||
text-align: center;
|
color: #929EA4;
|
||||||
background: #00222b;
|
background: transparent;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
padding: 4px 10px;
|
||||||
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
#box2 {
|
button.enabled {
|
||||||
background: #08323c;
|
color: #FFF;
|
||||||
font-size: 0px;
|
|
||||||
padding: 0px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#box1 a.logo, #box1 a.logo:visited {
|
|
||||||
display: inline-block;
|
|
||||||
background: url(logo.png);
|
|
||||||
width: 126px;
|
|
||||||
height: 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#box1 a.logo:hover {
|
|
||||||
background-position: 0 bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
#box2 .function {
|
|
||||||
background: url(function-icons.png);
|
|
||||||
width: 32px;
|
|
||||||
height: 37px;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#box2 .link embed {
|
|
||||||
vertical-align: bottom; /* fix for zeroClipboard style */
|
|
||||||
}
|
|
||||||
|
|
||||||
#box2 .function.enabled:hover {
|
|
||||||
cursor: hand;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pointer {
|
.button-wrap .label {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: -36px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -46px;
|
||||||
|
text-align: center;
|
||||||
|
background: #15191b;
|
||||||
|
color: #fff;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 76px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-wrap .label.label--small {
|
||||||
|
margin-left: -30px;
|
||||||
|
width: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-wrap:hover .label {
|
||||||
display: block;
|
display: block;
|
||||||
height: 5px;
|
|
||||||
width: 10px;
|
|
||||||
background: url(hover-dropdown-tip.png);
|
|
||||||
bottom: 0px;
|
|
||||||
position: absolute;
|
|
||||||
margin: auto;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#box3, #messages li {
|
.menu {
|
||||||
background: #173e48;
|
position: fixed;
|
||||||
font-family: Helvetica, sans-serif;
|
bottom: 0;
|
||||||
font-size: 12px;
|
left: 0;
|
||||||
line-height: 14px;
|
right: 0;
|
||||||
padding: 10px 15px;
|
background: #263238;
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#box3 .label, #messages li {
|
.menu-actions {
|
||||||
color: #fff;
|
display: flex;
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#box3 .shortcut {
|
|
||||||
color: #c4dce3;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
#box2 .function.save { background-position: -5px top; }
|
|
||||||
#box2 .function.enabled.save { background-position: -5px center; }
|
|
||||||
#box2 .function.enabled.save:hover { background-position: -5px bottom; }
|
|
||||||
|
|
||||||
#box2 .function.new { background-position: -42px top; }
|
|
||||||
#box2 .function.enabled.new { background-position: -42px center; }
|
|
||||||
#box2 .function.enabled.new:hover { background-position: -42px bottom; }
|
|
||||||
|
|
||||||
#box2 .function.duplicate { background-position: -79px top; }
|
|
||||||
#box2 .function.enabled.duplicate { background-position: -79px center; }
|
|
||||||
#box2 .function.enabled.duplicate:hover { background-position: -79px bottom; }
|
|
||||||
|
|
||||||
#box2 .function.raw { background-position: -116px top; }
|
|
||||||
#box2 .function.enabled.raw { background-position: -116px center; }
|
|
||||||
#box2 .function.enabled.raw:hover { background-position: -116px bottom; }
|
|
||||||
|
|
||||||
#box2 .function.twitter { background-position: -153px top; }
|
|
||||||
#box2 .function.enabled.twitter { background-position: -153px center; }
|
|
||||||
#box2 .function.enabled.twitter:hover { background-position: -153px bottom; }
|
|
||||||
#box2 .button-picture{ border-width: 0; font-size: inherit; }
|
|
||||||
|
|
||||||
#messages {
|
#messages {
|
||||||
position:fixed;
|
position: fixed;
|
||||||
top:0px;
|
top: 0px;
|
||||||
right:138px;
|
right: 138px;
|
||||||
margin:0;
|
margin: 0;
|
||||||
padding:0;
|
padding: 0;
|
||||||
width:400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#messages li {
|
#messages li {
|
||||||
background:rgba(23,62,72,0.8);
|
background: rgba(23,62,72,0.8);
|
||||||
margin:0 auto;
|
margin: 0 auto;
|
||||||
list-style:none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#messages li.error {
|
#messages li.error {
|
||||||
background:rgba(102,8,0,0.8);
|
background: rgba(102,8,0,0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.logo, .label {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
padding: 24px 12px !important;
|
||||||
|
}
|
||||||
|
.menu-actions {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.menu-actions button {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
.menu-actions .button-wrap {
|
||||||
|
flex: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
|
|
||||||
<title>hastebin</title>
|
<title>hastebin</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<link rel="stylesheet" type="text/css" href="solarized_dark.css"/>
|
<link rel="stylesheet" type="text/css" href="solarized_dark.css"/>
|
||||||
<link rel="stylesheet" type="text/css" href="application.css"/>
|
<link rel="stylesheet" type="text/css" href="application.css"/>
|
||||||
|
|
||||||
|
|
@ -41,27 +42,53 @@
|
||||||
<body>
|
<body>
|
||||||
<ul id="messages"></ul>
|
<ul id="messages"></ul>
|
||||||
|
|
||||||
<div id="key">
|
<div id="key" class="menu" style="display: flex; padding: 16px;">
|
||||||
<div id="pointer" style="display:none;"></div>
|
<div class="logo" style="flex: auto; display: flex; align-items: center;">
|
||||||
<div id="box1">
|
<div class="button-wrap" style="position: relative;">
|
||||||
<a href="/about.md" class="logo"></a>
|
<span class="label label--small">About</span>
|
||||||
|
<a href="/about.md" style="display: flex">
|
||||||
|
<svg width="75" height="15" viewBox="0 0 75 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4.11643 8.40057C4.12283 7.28196 4.7876 6.61719 5.77837 6.61719C6.78192 6.61719 7.36359 7.26278 7.3572 8.35582V14H10.4829V7.74219C10.4893 5.51776 9.13419 4.05398 7.06956 4.05398C5.59939 4.05398 4.56388 4.77628 4.12283 5.98438H4.01416V0.909091H0.990723V14H4.11643V8.40057Z" fill="#73848C"/>
|
||||||
|
<path d="M15.2018 14.1662C16.5697 14.1662 17.5158 13.6357 18.0527 12.6321H18.1294V14H21.0697V7.3267C21.0697 5.24929 19.2224 4.05398 16.7231 4.05398C14.0832 4.05398 12.5875 5.38352 12.3382 7.1733L15.221 7.27557C15.3552 6.64915 15.873 6.26562 16.6976 6.26562C17.4646 6.26562 17.9504 6.63636 17.9504 7.29474V7.3267C17.9504 7.92756 17.2984 8.0554 15.6237 8.20241C13.6358 8.36861 11.9739 9.10369 11.9739 11.277C11.9739 13.2202 13.3226 14.1662 15.2018 14.1662ZM16.167 12.1207C15.4447 12.1207 14.9334 11.7756 14.9334 11.1236C14.9334 10.4908 15.432 10.1072 16.3204 9.97301C16.9021 9.88991 17.618 9.76207 17.9696 9.5767V10.5099C17.9696 11.4687 17.1642 12.1207 16.167 12.1207Z" fill="#73848C"/>
|
||||||
|
<path d="M31.5527 7.17969C31.3865 5.23651 29.7949 4.05398 27.1358 4.05398C24.4767 4.05398 22.7828 5.21094 22.7956 7.17969C22.7828 8.68821 23.748 9.6598 25.7104 10.0241L27.4234 10.3501C28.2352 10.5099 28.606 10.7656 28.6187 11.2003C28.606 11.6925 28.0562 12.0185 27.2572 12.0185C26.3687 12.0185 25.7679 11.6349 25.6337 10.919L22.5463 10.9957C22.77 12.9389 24.4383 14.1854 27.2445 14.1854C29.8716 14.1854 31.7828 12.875 31.7956 10.8551C31.7828 9.42329 30.8368 8.57315 28.8808 8.19602L26.9888 7.83807C26.1578 7.67188 25.8893 7.37784 25.8957 7.00071C25.8893 6.50213 26.471 6.19531 27.1933 6.19531C28.0179 6.19531 28.5932 6.63636 28.6827 7.25639L31.5527 7.17969Z" fill="#73848C"/>
|
||||||
|
<path d="M38.8764 4.18182H37.1058V1.82955H33.9801V4.18182H32.6825V6.48295H33.9801V11.2578C33.9609 13.2457 35.2521 14.2429 37.4573 14.1406C38.2116 14.1023 38.7549 13.9489 39.0554 13.8594L38.5823 11.603C38.4481 11.6349 38.1349 11.6989 37.8984 11.6989C37.3934 11.6989 37.1058 11.4943 37.1058 10.9126V6.48295H38.8764V4.18182Z" fill="#73848C"/>
|
||||||
|
<path d="M44.9552 14.1854C47.5312 14.1854 49.2251 12.9389 49.583 11.0085L46.713 10.9254C46.4701 11.5774 45.8309 11.929 45.0127 11.929C43.811 11.929 43.0696 11.13 43.0696 9.92827V9.84517H49.615V9.06534C49.615 5.83097 47.6463 4.05398 44.8593 4.05398C41.8934 4.05398 39.9886 6.08665 39.9886 9.12926C39.9886 12.2741 41.8679 14.1854 44.9552 14.1854ZM43.0696 8.02983C43.1143 7.05185 43.8877 6.31037 44.9232 6.31037C45.9524 6.31037 46.6938 7.02628 46.7066 8.02983H43.0696Z" fill="#73848C"/>
|
||||||
|
<path d="M51.8059 14H53.2633V12.4915H53.4422C53.7746 13.0284 54.4138 14.2045 56.3059 14.2045C58.7604 14.2045 60.4735 12.2358 60.4735 9.11648C60.4735 6.02273 58.7604 4.05398 56.2803 4.05398C54.3627 4.05398 53.7746 5.23011 53.4422 5.74148H53.3144V0.909091H51.8059V14ZM53.2888 9.09091C53.2888 6.89205 54.2604 5.40909 56.1013 5.40909C58.019 5.40909 58.965 7.01989 58.965 9.09091C58.965 11.1875 57.9934 12.8494 56.1013 12.8494C54.286 12.8494 53.2888 11.3153 53.2888 9.09091Z" fill="#73848C"/>
|
||||||
|
<path d="M62.781 14H64.2896V4.18182H62.781V14ZM63.5481 2.54545C64.1361 2.54545 64.6219 2.08523 64.6219 1.52273C64.6219 0.960227 64.1361 0.5 63.5481 0.5C62.96 0.5 62.4742 0.960227 62.4742 1.52273C62.4742 2.08523 62.96 2.54545 63.5481 2.54545Z" fill="#73848C"/>
|
||||||
|
<path d="M68.561 8.09375C68.561 6.38068 69.6221 5.40909 71.0667 5.40909C72.4666 5.40909 73.3167 6.32315 73.3167 7.86364V14H74.8252V7.76136C74.8252 5.25568 73.4893 4.05398 71.5014 4.05398C70.0184 4.05398 69.098 4.71875 68.6377 5.71591H68.5099V4.18182H67.0525V14H68.561V8.09375Z" fill="#73848C"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="box2">
|
<div id="box2" class="menu-actions">
|
||||||
<button class="save function button-picture">Save</button>
|
<div class="button-wrap" style="position: relative;">
|
||||||
<button class="new function button-picture">New</button>
|
<span class="label label--small">ctrl + s</span>
|
||||||
<button class="duplicate function button-picture">Duplicate & Edit</button>
|
<button class="save button-picture function">Save</button>
|
||||||
<button class="raw function button-picture">Just Text</button>
|
</div>
|
||||||
<button class="twitter function button-picture">Twitter</button>
|
<div class="button-wrap" style="position: relative;">
|
||||||
</div>
|
<span class="label label--small">ctrl + n</span>
|
||||||
<div id="box3" style="display:none;">
|
<button class="new button-picture function">New</button>
|
||||||
<div class="label"></div>
|
</div>
|
||||||
<div class="shortcut"></div>
|
<div class="button-wrap" style="position: relative;">
|
||||||
|
<span class="label label--small">ctrl + d</span>
|
||||||
|
<button class="duplicate button-picture function">Duplicate & Edit</button>
|
||||||
|
</div>
|
||||||
|
<div class="button-wrap" style="position: relative;">
|
||||||
|
<span class="label">ctrl + shift + r</span>
|
||||||
|
<button class="raw button-picture function">Raw Text</button>
|
||||||
|
</div>
|
||||||
|
<div class="button-wrap" style="position: relative;">
|
||||||
|
<span class="label">ctrl + shift + r</span>
|
||||||
|
<button class="twitter button-picture function">Tweet It</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="linenos"></div>
|
<div style="padding: 20px 20px 20px 50px; overflow: auto;">
|
||||||
<pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre>
|
<div id="linenos"></div>
|
||||||
<textarea spellcheck="false" style="display:none;"></textarea>
|
<pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre>
|
||||||
|
<textarea spellcheck="false" style="display:none;"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue