better actions for navigation entries

2 files changed, 137 insertions, 13 deletions

diff --git a/css/navigation.css b/css/navigation.css
index 21eb44f64..a7ddc359c 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -196,19 +196,6 @@
     text-transform: none;
 }
 
-.unread-counter {
-    padding: 8px 6px 8px 5px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
-    font-size: 9pt;
-    display: none;
-}
-
-
-.unread .unread-counter {
-    display: block;
-}
 .starred .unread-counter {
     font-weight: normal !important;
 }
diff --git a/css/oc8.css b/css/oc8.css
new file mode 100644
index 000000000..27b75dbef
--- /dev/null
+++ b/css/oc8.css
@@ -0,0 +1,137 @@
+/**
+ * App navigation utils, buttons and counters for drop down menu
+ */
+.app-navigation-entry-utils {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 105;
+}
+
+    .app-navigation-entry-utils ul {
+        float: right;
+        display: block !important;
+    }
+
+
+    .app-navigation-entry-utils li {
+        float: left;
+        width: 44px !important;
+        height: 44px;
+        line-height: 44px;
+        display: none;
+    }
+
+    .active > .app-navigation-entry-utils li {
+        display: inline-block;
+    }
+
+    .app-navigation-entry-utils button {
+        height: 38px;
+        width: 38px;
+        line-height: 38px;
+        float: left;
+    }
+
+    .app-navigation-entry-utils-menu-button {
+        border: 0;
+        opacity: .7;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: url('../img/actions/more.svg');
+    }
+
+    .app-navigation-entry-utils-menu-button:hover,
+    .app-navigation-entry-utils-menu-button:focus {
+        background-color: transparent;
+        opacity: 1;
+    }
+
+    .app-navigation-entry-utils-counter {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: right;
+        font-size: 9pt;
+        width: 38px;
+        line-height: 44px;
+        padding: 0 10px;
+    }
+
+.app-navigation-entry-utils ul,
+.app-navigation-entry-options ul {
+    list-style-type: none;
+}
+
+.app-navigation-entry-options {
+    display: none;
+    position: absolute;
+    background-color: #eee;
+    color: #333;
+    border-radius: 3px;
+    z-index: 110;
+    margin: -5px 10px;
+    right: 0;
+    border: 1px solid #bbb;
+    -webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+    -moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+    -ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+    -o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+    filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+}
+
+/* miraculous border arrow stuff */
+.app-navigation-entry-options:after, .app-navigation-entry-options:before {
+    bottom: 100%;
+    right: 5px; /* change this to adjust the arrow position */
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.app-navigation-entry-options:after {
+    border-color: rgba(238, 238, 238, 0);
+    border-bottom-color: #eee;
+    border-width: 10px;
+    margin-left: -10px;
+}
+.app-navigation-entry-options:before {
+    border-color: rgba(187, 187, 187, 0);
+    border-bottom-color: #bbb;
+    border-width: 11px;
+    margin-left: -11px;
+}
+
+.app-navigation-entry-options.app-navigation-entry-options-open {
+    display: block;
+}
+
+/* list of options for an entry */
+.app-navigation-entry-options ul {
+    display: block !important;
+}
+
+.app-navigation-entry-options li {
+    float: left;
+    width: 38px !important;
+}
+
+.app-navigation-entry-options li button {
+    float: right;
+    width: 36px !important;
+    height: 36px;
+    line-height: 36px;
+    border: 0;
+    opacity: .7;
+    background-color: transparent;
+}
+
+.app-navigation-entry-options li button:hover,
+.app-navigation-entry-options li button:focus {
+    opacity: 1;
+    background-color: transparent;
+}
\ No newline at end of file