New element hidden style

Show the status by using the same icon we use to show
if a page is not published and increase the contrast of
the element header while keeping the visual difference.

app/assets/stylesheets/alchemy/elements.scss

@@ -136,26 +136,14 @@ alchemy-tinymce {
   &.hidden {
     display: block;
     border-style: dashed;
-    opacity: 0.5;
     transition: opacity $transition-duration;
 
     > .element-header {
       background-color: transparent;
-      background-image: linear-gradient(
-        45deg,
-        $light-gray 25%,
-        $medium-gray 25%,
-        $medium-gray 50%,
-        $light-gray 50%,
-        $light-gray 75%,
-        $medium-gray 75%,
-        $medium-gray 100%
-      );
-      background-size: 28.28px 28.28px;
-    }
 
-    &:hover {
-      opacity: 1;
+      .element-hidden-icon {
+        display: inline;
+      }
     }
   }
 
@@ -402,6 +390,10 @@ alchemy-tinymce {
   }
 }
 
+.element-hidden-icon {
+  display: none;
+}
+
 .element-toolbar {
   display: flex;
   width: 100%;

app/views/alchemy/admin/elements/_header.html.erb

@@ -14,6 +14,10 @@
       <%= sanitize(element.preview_text.presence || '&nbsp;') %>
     </span>
   </span>
+  <span class="element-hidden-icon">
+    <%= render_icon("cloud-off", size: "1x") %>
+    <%= Alchemy.t(:element_hidden) %>
+  </span>
   <%= button_tag({
     title: Alchemy.t(element.folded? ? :show_element_content : :hide_element_content),
     class: "element-toggle"

config/locales/alchemy.en.yml

@@ -424,6 +424,7 @@ en:
     edit_tag: "Edit tag"
     edit_selected_pictures: "Edit selected pictures"
     element_editor_not_found: "Error within this Element"
+    element_hidden: "Hidden"
     element_of_type: "Element"
     element_saved: "Saved element."
     enter_external_link: "Please enter the URL you want to link with"