diff options
author | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-08-26 18:51:06 +0200 |
---|---|---|
committer | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-08-26 18:51:06 +0200 |
commit | 6711caea1c5fc341131cd530aecbcc2560ce436d (patch) | |
tree | a023faee2d56c874a3f289194e5379e22560d2a6 /css | |
parent | 82cad29394e8db1b3d2615adefd42dd0f9bf2958 (diff) |
better actions for navigation entries
Diffstat (limited to 'css')
-rw-r--r-- | css/navigation.css | 13 | ||||
-rw-r--r-- | css/oc8.css | 137 |
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 |