CSS: Use alternative hack to check if input has content

Signed-off-by: Till Kottmann <me@deletescape.ch>

app/resources/static/app.scss

@@ -486,7 +486,7 @@ $input-width: 20rem;
   }
 
   input:focus,
-  input:valid,
+  input:not(:placeholder-shown),
   input:disabled {
     & + .placeholder {
       top: -($input-top / 2);
@@ -496,7 +496,7 @@ $input-width: 20rem;
   }
 
   input:focus,
-  input:valid {
+  input:not(:placeholder-shown) {
     & + .placeholder {
       color: $highlight-color;
     }

app/resources/templates/config.peb

@@ -16,7 +16,8 @@
             {% for item in config %}
                 <div class="md-input">
                     <label>
-                        <input name="{{ item.type }}_{{ item.key }}" required value="{{ item.value }}" type="{{ item.type }}">
+                        <input name="{{ item.type }}_{{ item.key }}" placeholder=" " value="{{ item.value }}"
+                               type="{{ item.type }}">
                         <span class="placeholder">{{ item.key }}</span>
                     </label>
                 </div>
@@ -26,7 +27,8 @@
     </div>
 </div>
 <div id="footer" class="unselectable">
-    <div id="copyright">&copy; {{ year }} <a href="https://deletescape.ch" target="_blank" rel="noopener">deletescape</a>
+    <div id="copyright">&copy; {{ year }} <a href="https://deletescape.ch" target="_blank"
+                                             rel="noopener">deletescape</a>
     </div>
 </div>
 {% endblock %}

app/resources/templates/index.peb

@@ -15,7 +15,7 @@
     {% if document is null or document.editing %}
         <div class="md-input">
             <label>
-                <input name="slug" required tabindex="1" value="{{ editKey }}"
+                <input name="slug" placeholder=" " tabindex="1" value="{{ editKey }}"
                        {% if editKey is not null %}disabled{% endif %}>
                 <span class="placeholder">Custom URL</span>
             </label>
@@ -31,7 +31,8 @@
         <button class="edit action {% if document is not null and document.editable and not document.editing %} enabled {% endif %}"
                 tabindex="3"><img src="/static/icons/edit.svg" alt="Edit"></button>
         <button class="new action enabled" tabindex="3"><img src="/static/icons/create.svg" alt="New"></button>
-        <button class="raw action {% if document is not null and not document.editing %} enabled {% endif %}" tabindex="3"><img
+        <button class="raw action {% if document is not null and not document.editing %} enabled {% endif %}"
+                tabindex="3"><img
                 src="/static/icons/raw.svg"
                 alt="Just Text"></button>
         <button class="profile action enabled" tabindex="3"><img src="/static/icons/user.svg" alt="View profile">
@@ -49,7 +50,8 @@
     {% else %}&gt;{% endif %}
     </div>
     {% if document is not null and not document.editing %}
-        <pre id="box" tabindex="1" {% if document.showLines and document.lines !=-1 %}class="haslines" {% endif %}>{% if document.rendered %}{{ document.content | raw }}{% else %}{{ document.content }}{% endif %}</pre>
+        <pre id="box" tabindex="1"
+             {% if document.showLines and document.lines !=-1 %}class="haslines" {% endif %}>{% if document.rendered %}{{ document.content | raw }}{% else %}{{ document.content }}{% endif %}</pre>
     {% else %}
         <textarea spellcheck="false" placeholder="Paste, save, share! (Pasting just a URL will shorten it!)"
                   tabindex="1">{{ initialValue }}</textarea>

app/resources/templates/user/api_new.peb

@@ -15,7 +15,7 @@
             <h1>{{ formTitle }}</h1>
             <div class="md-input">
                 <label>
-                    <input name="name" required>
+                    <input name="name" placeholder=" " required>
                     <span class="placeholder">Name</span>
                 </label>
             </div>

app/resources/templates/user/changepass.peb

@@ -15,13 +15,13 @@
             <h1>Change password</h1>
             <div class="md-input">
                 <label>
-                    <input name="current" required type="password">
+                    <input name="current" placeholder=" " required type="password">
                     <span class="placeholder">Current password</span>
                 </label>
             </div>
             <div class="md-input">
                 <label>
-                    <input name="password" required type="password">
+                    <input name="password" placeholder=" " required type="password">
                     <span class="placeholder">New password</span>
                 </label>
             </div>

app/resources/templates/user/login.peb

@@ -15,13 +15,13 @@
             <h1>{{ formTitle }}</h1>
             <div class="md-input">
                 <label>
-                    <input name="username" required>
+                    <input name="username" placeholder=" " required>
                     <span class="placeholder">Username</span>
                 </label>
             </div>
             <div class="md-input">
                 <label>
-                    <input name="password" required type="password">
+                    <input name="password" placeholder=" " required type="password">
                     <span class="placeholder">Password</span>
                 </label>
             </div>