diff --git a/static/application.css b/static/application.css
index 8bd3131..7e2711d 100644
--- a/static/application.css
+++ b/static/application.css
@@ -1,7 +1,8 @@
body {
- background: #002B36;
- padding: 20px 50px;
- margin: 0px;
+ background: #263238;
+ padding: 0 0 80px;
+ margin: 0;
+ font-family: sans-serif;
}
/* textarea */
@@ -21,10 +22,14 @@ textarea {
margin-bottom: 0;
}
+.logo a:hover svg path {
+ fill: #fff;
+}
+
/* the line numbers */
#linenos {
- color: #7d7d7d;
+ color: #7d7d7d;
z-index: -1000;
position: absolute;
top: 20px;
@@ -45,7 +50,11 @@ textarea {
border: 0px;
outline: none;
font-size: 13px;
- overflow: inherit;
+ overflow: inherit;
+}
+
+#box.hljs {
+ background: transparent;
}
#box code {
@@ -57,119 +66,98 @@ textarea {
#key {
position: fixed;
- top: 0px;
+ bottom: 0px;
+ left: 0;
right: 0px;
z-index: +1000; /* watch out */
}
-#box1 {
- padding: 5px;
- text-align: center;
- background: #00222b;
+button {
+ font-size: 14px;
+ color: #929EA4;
+ background: transparent;
+ outline: none;
+ border: none;
+ padding: 4px 10px;
+ cursor: not-allowed;
}
-#box2 {
- background: #08323c;
- 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;
+button.enabled {
+ color: #FFF;
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;
- height: 5px;
- width: 10px;
- background: url(hover-dropdown-tip.png);
- bottom: 0px;
- position: absolute;
- margin: auto;
- left: 0px;
- right: 0px;
}
-#box3, #messages li {
- background: #173e48;
- font-family: Helvetica, sans-serif;
- font-size: 12px;
- line-height: 14px;
- padding: 10px 15px;
- user-select: none;
+.menu {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: #263238;
}
-#box3 .label, #messages li {
- color: #fff;
- font-weight: bold;
+.menu-actions {
+ display: flex;
}
-#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 {
- position:fixed;
- top:0px;
- right:138px;
- margin:0;
- padding:0;
- width:400px;
+ position: fixed;
+ top: 0px;
+ right: 138px;
+ margin: 0;
+ padding: 0;
+ width: 400px;
}
#messages li {
- background:rgba(23,62,72,0.8);
- margin:0 auto;
- list-style:none;
+ background: rgba(23,62,72,0.8);
+ margin: 0 auto;
+ list-style: none;
}
#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;
+ }
+}
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index 34adb3d..55b3e91 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,6 +4,7 @@
hastebin
+
@@ -41,27 +42,53 @@
-