add solarized theme used by paste.armbian.com

2026-01-06 12:30:55 -08:00 · 2025-03-03 13:35:56 +03:00
parent 1b9e956042
commit 1d8c71b461
3 changed files with 155 additions and 77 deletions
--- a/static/application.css
+++ b/static/application.css
@@ -1,30 +1,16 @@
 body {
-    background: #000;
+    background: #002B36;
    padding: 20px 50px;
-    margin: 0;
-    font-family: 'Fira Code', monospace;
-}
-
-body pre.hljs {
-    color: #c9d1d9;
-    background: #000;
-}
-
-body pre.hljs code {
-    font-family: 'Fira Code', monospace;
-}
-
-body pre.hljs code b {
-    font-weight: 800;
+    margin: 0px;
 }

 /* textarea */

 textarea {
    background: transparent;
-    border: 0;
+    border: 0px;
    color: #fff;
-    padding: 0;
+    padding: 0px;
    width: 100%;
    height: 100%;
    font-family: monospace;
@@ -42,9 +28,11 @@ textarea {
    z-index: -1000;
    position: absolute;
    top: 20px;
-    left: 0;
-    width: 30px; /* 30 to get 20 away from box */
-    font-size: 100%;
+    left: 0px;
+    width: 30px;
+    /* 30 to get 20 away from box */
+    font-size: 13px;
+    font-family: monospace;
    text-align: right;
    user-select: none;
 }
@@ -52,27 +40,29 @@ textarea {
 /* code box when locked */

 #box {
-    padding: 0;
-    margin: 0;
+    padding: 0px;
+    margin: 0px;
    width: 100%;
-    border: 0;
+    border: 0px;
    outline: none;
-    font-size: 100%;
+    font-size: 13px;
    overflow: inherit;
 }

 #box code {
-    padding: 0;
-    background: transparent !important; /* don't hide hastebox */
+    padding: 0px;
+    background: transparent !important;
+    /* don't hide hastebox */
 }

 /* key */

 #key {
    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: +1000; /* watch out */
+    top: 0px;
+    right: 0px;
+    z-index: +1000;
+    /* watch out */
 }

 #box1 {
@@ -83,11 +73,12 @@ textarea {

 #box2 {
    background: #08323c;
-    font-size: 0;
-    padding: 0 5px;
+    font-size: 0px;
+    padding: 0px 5px;
 }

-#box1 a.logo, #box1 a.logo:visited {
+#box1 a.logo,
+#box1 a.logo:visited {
    display: inline-block;
    background: url(logo.png);
    width: 126px;
@@ -107,11 +98,12 @@ textarea {
 }

 #box2 .link embed {
-    vertical-align: bottom; /* fix for zeroClipboard style */
+    vertical-align: bottom;
+    /* fix for zeroClipboard style */
 }

 #box2 .function.enabled:hover {
-    /* cursor: hand; */
+    cursor: hand;
    cursor: pointer;
 }

@@ -120,14 +112,15 @@ textarea {
    height: 5px;
    width: 10px;
    background: url(hover-dropdown-tip.png);
-    bottom: 0;
+    bottom: 0px;
    position: absolute;
    margin: auto;
-    left: 0;
-    right: 0;
+    left: 0px;
+    right: 0px;
 }

-#box3, #messages li {
+#box3,
+#messages li {
    background: #173e48;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
@@ -136,7 +129,8 @@ textarea {
    user-select: none;
 }

-#box3 .label, #messages li {
+#box3 .label,
+#messages li {
    color: #fff;
    font-weight: bold;
 }
@@ -213,7 +207,7 @@ textarea {

 #messages {
    position: fixed;
-    top: 0;
+    top: 0px;
    right: 138px;
    margin: 0;
    padding: 0;
@@ -228,5 +222,4 @@ textarea {

 #messages li.error {
    background: rgba(102, 8, 0, 0.8);
-}
-
+}
--- a/static/index.html
+++ b/static/index.html
@@ -3,7 +3,7 @@
 <head>

    <title>hastebin</title>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -11,21 +11,22 @@


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css"
-          integrity="sha512-rO+olRTkcf304DQBxSWxln8JXCzTHlKnIdnMUwYvQa9/Jd4cQaNkItIUj6Z4nvW1dqK0SKXLbn9h4KwZTNtAyw=="
-          crossorigin="anonymous" referrerpolicy="no-referrer"/>
-    <link rel="stylesheet" type="text/css" href="application.css?v=0.0.8"/>
+        integrity="sha512-rO+olRTkcf304DQBxSWxln8JXCzTHlKnIdnMUwYvQa9/Jd4cQaNkItIUj6Z4nvW1dqK0SKXLbn9h4KwZTNtAyw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" type="text/css" href="solarized_dark.css" />
+    <link rel="stylesheet" type="text/css" href="application.css?v=0.0.9" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
-            integrity="sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        integrity="sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"
-            integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA=="
-            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script type="text/javascript" src="ansi-to-html.js?v=0.0.8"></script>
    <script type="text/javascript" src="application.js?v=0.0.8"></script>

-    <meta name="robots" content="noindex,nofollow"/>
+    <meta name="robots" content="noindex,nofollow" />

    <script type="text/javascript">
        var app = null;
@@ -51,40 +52,40 @@
        }, 1000);
        // Construct app and load initial path
        $(function () {
-            app = new haste('hastebin', {twitter: false});
-            handlePop({target: window});
+            app = new haste('hastebin', { twitter: false });
+            handlePop({ target: window });
        });
    </script>

 </head>

 <body>
-<ul id="messages"></ul>
+    <ul id="messages"></ul>

-<div id="key">
-    <div id="pointer" style="display:none;"></div>
-    <div id="box1">
-        <!--suppress HtmlUnknownTarget -->
-        <a href="/about.md" class="logo"></a>
+    <div id="key">
+        <div id="pointer" style="display:none;"></div>
+        <div id="box1">
+            <!--suppress HtmlUnknownTarget -->
+            <a href="/about.md" class="logo"></a>
+        </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="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>
    </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="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>
-</div>

-<div id="linenos"></div>
-<pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre>
-<!--suppress HtmlFormInputWithoutLabel -->
-<textarea spellcheck="false" style="display:none;"></textarea>
+    <div id="linenos"></div>
+    <pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre>
+    <!--suppress HtmlFormInputWithoutLabel -->
+    <textarea spellcheck="false" style="display:none;"></textarea>

 </body>

-</html>
+</html>
--- a/static/solarized_dark.css
+++ b/static/solarized_dark.css
@@ -0,0 +1,84 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
+
+*/
+
+.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    background: #002b36;
+    color: #839496;
+}
+
+.hljs-comment,
+.hljs-quote {
+    color: #586e75;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+    color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+    color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+    color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+    color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+    color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-built_in,
+.hljs-deletion {
+    color: #dc322f;
+}
+
+.hljs-formula {
+    background: #073642;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-strong {
+    font-weight: bold;
+}