favicon & css img

zerobin/static/css/style.css

@@ -185,14 +185,31 @@ input.hide-upload {
 
 /* Paste Page */
 
+h1 {
+  font-size: 2em;
+}
+
+.reader-mode-title {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
 .paste-options-res {
   text-align: center;
   margin-bottom: 10px;
   opacity: 0.9 !important;
 }
 
-.paste-options-res .btn-group{
+.reader-mode-tools {
+  display: none !important;
+}
+
+.paste-options-res .btn-group {
   float: none;
+  border: 0px;
+}
+.paste-options-res span {
+  border: 0px;
 }
 
 .paste-options,
@@ -207,7 +224,7 @@ margin-left: 8px;
 }
 
 .paste-options span {
-  background-color: #375A7F;
+  background-color: #3c4a59;
   color: #f9fafc;
   width: 70px;
 }
@@ -229,16 +246,16 @@ margin-left: 8px;
   width: 100%;
   text-align: center;
   background-color: #333333;
-  margin-bottom: 8px;
+}
+
+.paste-wrapper img {
+  max-width: 100%;
 }
 
 .pre-wrapper {
   margin: 8px 0 8px 0;
 }
 
-.paste-wrapper img {
-  width: 94%;
-}
 
 #paste-content.linenums {
   padding-left: 0;
@@ -273,6 +290,9 @@ pre.prettyprint {
   padding: 5px;
   word-break: break-word;
   margin-bottom: 0px;
+  /* background-repeat: no-repeat;
+  background-position: 0 calc(100% + 6px);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 330'%3E%3Cpath fill='%23273036' fill-opacity='0.1' d='M0,128L40,154.7C80,181,160,235,240,266.7C320,299,400,309,480,304C560,299,640,277,720,240C800,203,880,149,960,160C1040,171,1120,245,1200,261.3C1280,277,1360,235,1400,213.3L1440,192L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"); */
 }
 
 /* Specify class=linenums on a pre to get line numbering */
@@ -289,6 +309,16 @@ pre {
 
 /* Common css */
 
+
+.caret {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 8px solid #f9fafc;
+  width: 1px;
+  margin: 8px 0px 0px 4px;
+  display: inline-block;
+}
+
 .form-control,
 .form-control:focus,
 .form-control:disabled,
@@ -455,7 +485,7 @@ canvas {
 
 .topnav a.active {
   background-color: #4CAF50;
-  color: white;
+  color: #f9fafc;
 }
 
 .topnav .icon {
@@ -474,12 +504,12 @@ nav ul li {
 }
 
 nav ul li a {
-  color: white;
+  color: #f9fafc;
   background: #333333;
   padding: 2px 10px 0 10px;
   text-decoration: none;
   height: 30px;
-  display: block;
+  display: inline-block;
 }
 
 nav ul li a:hover {
@@ -518,9 +548,12 @@ nav ul li a:hover {
   background: transparent;
   padding: 10px;
   display: block;
+  display: inline-table;
+  width: -webkit-fill-available;
 }
 
-.submenu li a:hover {
+.submenu li a:hover,
+.submenu li.active {
   background: gray;
 }
 
@@ -564,8 +597,12 @@ nav ul li a:hover {
   .reader-mode .reader-book {
     display: block;
   }
-}
 
+  .paste-wrapper img {
+    width: 94%;
+    max-width: 50%;
+  }
+}
 
 /* reader mode */
 

zerobin/views/base.tpl

@@ -61,7 +61,8 @@
             </a>
           </li>
           <li class="submenu"><a href="#" @click.prevent="openPreviousPastesMenu = !openPreviousPastesMenu">Previous
-              pastes v</a>
+              pastes <span class="caret"></span></a>
+
             <ul class="previous-pastes" id="topmenu" v-if="openPreviousPastesMenu">
               <li class="item" v-if="previousPastes.length === 0">
                 <a href="#">No paste yet</a>
@@ -85,7 +86,7 @@
     <div class="container-md" id="wrap-content">
 
       %if defined('paste') and paste.title:
-      <h3>{{ paste.title }}</h3>
+      <h1 :class="{ 'reader-mode-title': readerMode}">{{ paste.title }}</h1>
       %end
 
 
@@ -97,7 +98,6 @@
           @click.once.prevent="msg.action.callback($event)">{% msg.action.message %}</a>
       </p>
 
-
       <div id='main'>{{!base}}</div>
     </div>
 

zerobin/views/paste.tpl

@@ -21,7 +21,7 @@
 <div class="well paste-form">
   <form action="/" method="get" accept-charset="utf-8">
 
-    <div class="d-flex justify-content-between">
+    <div :class="{'d-flex': true, 'justify-content-between': true , 'reader-mode-tools': readerMode}" >
 
       <div class="btn-group" role="group">
         <button v-if="support.clipboard && currentPaste.type === 'text'" @click.prevent="copyToClipboard()"
@@ -57,6 +57,13 @@
           {{ paste.content }}
         </code>
     </pre>
+
+    <div>
+      <div id="readable-paste-content" v-if="readerMode">
+        {% currentPaste.content %}
+      </div>
+    </div>
+
     <div class="paste-options-res">
       <div class="btn-group">
         <span class="input-group-text">Tip it with<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 18v-1.511h-.5v1.511h-1v-1.511h-2.484l.25-1.489h.539c.442 0 .695-.425.695-.854v-4.444c0-.416-.242-.702-.683-.702h-.817v-1.5h2.5v-1.5h1v1.5h.5v-1.5h1v1.526c2.158.073 3.012.891 3.257 1.812.29 1.09-.429 2.005-1.046 2.228.75.192 1.789.746 1.789 2.026 0 1.742-1.344 2.908-4 2.908v1.5h-1zm-.5-5.503v2.503c1.984 0 3.344-.188 3.344-1.258 0-1.148-1.469-1.245-3.344-1.245zm0-.997c1.105 0 2.789-.078 2.789-1.25 0-1-1.039-1.25-2.789-1.25v2.5z" fill="#eee"/></svg></span>
@@ -68,11 +75,6 @@
       </div>
     </div>
 
-    <div>
-      <div id="readable-paste-content" v-if="readerMode">
-        {% currentPaste.content %}
-      </div>
-    </div>
 
     <div class="d-flex justify-content-between down">
       <div v-if="currentPaste.ownerKey">
@@ -101,7 +103,7 @@
 
       <div>
         <div class="file-upload">
-          <button type="button" class="btn btn-danger" @click.prevent="handleCancelClone()">Cancel clone</button>
+          <button type="button" class="btn btn-info" @click.prevent="handleCancelClone()">Cancel clone</button>
         </div>
       </div>
 
@@ -130,22 +132,30 @@
     <div>
       <textarea rows="10" style="width:100%;" class=" form-control" @keydown.ctrl.enter="encryptAndSendPaste()"
         id="content" name="content"></textarea>
-      <p>
-        <input type="text" class="paste-excerpt" name="paste-excerpt"
-          placeholder="Optional paste title. This part is NOT encrypted: anything you type here will be visible by anyone"
-          v-model="newPaste.title" maxlength="60">
-      </p>
-      <p>
+
+      <div class="paste-options">
+        <h6>Paste Options (these options are optionals)</h6>
+
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text">Title</span>
+          </div>
+          <input type="text" class="form-control paste-excerpt" name="paste-excerpt"
+            placeholder="Optional paste title. This part is NOT encrypted: anything you type here will be visible by anyone"
+            v-model="newPaste.title" maxlength="60">
+        </div>
 
         <div class="input-group mb-3">
           <div class="input-group-prepend">
             <span class="input-group-text" id="basic-addon1">BTC tip</span>
           </div>
           <input type="text" class="form-control paste-btc-tip-address" name="paste-btc-tip-address"
-            placeholder="Put a BTC address to ask for a tip" v-model="newPaste.btcTipAddress" maxlength="50">
+            placeholder="Put a BTC address to ask for a tip. Leave it empty to let us use our."
+            v-model="newPaste.btcTipAddress" maxlength="50">
         </div>
 
-      </p>
+      </div>
+
     </div>
 
     <div class="d-flex justify-content-between" v-if="displayBottomToolBar">>
@@ -153,7 +163,7 @@
       <div>
         <label class="col-form-label">&nbsp;</label>
         <div class="file-upload">
-          <button type="button" class="btn btn-danger" @click.prevent="handleCancelClone()">Cancel clone</button>
+          <button type="button" class="btn btn-info" @click.prevent="handleCancelClone()">Cancel clone</button>
         </div>
       </div>