diff options
Diffstat (limited to 'web-ui/app/scss')
-rw-r--r-- | web-ui/app/scss/_mixins.scss | 2 | ||||
-rw-r--r-- | web-ui/app/scss/_read.scss | 2 | ||||
-rw-r--r-- | web-ui/app/scss/styles.scss | 185 |
3 files changed, 114 insertions, 75 deletions
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index 18871995..2d1f8f23 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -104,7 +104,7 @@ background: transparent; border: 1px solid #DDD; line-height: 0; - padding: 1px 2px; + padding: 3px 2px 2px 2px; @include border-radius(2px); &:hover { opacity: 1; diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss index 332a76fc..bd30552c 100644 --- a/web-ui/app/scss/_read.scss +++ b/web-ui/app/scss/_read.scss @@ -6,8 +6,6 @@ display: flex; flex-wrap: nowrap; - position: fixed; - width: 57%; top: 0; z-index: 10; background-color: white; diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index e5556f2f..9846d326 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -116,7 +116,7 @@ margin: -3px 0 0 0; li { background-color: #DDD; - color: black; + color: black; display: inline-block; height: auto; font-weight: 400; @@ -173,13 +173,10 @@ font-size: 0.7em; margin-left: 5px; font-weight: 700; + position: relative; @include border-radius(100px); } -article { - padding-left: 50px !important; -} - section { display: inline-block; vertical-align: top; @@ -253,9 +250,8 @@ section { background-color: $secondary; color: white; nav { - padding-bottom: 25px; border-right: 1px solid lighten($secondary, 10%); - ul#default-tag-list, #custom-tag-list, #logout { + ul#default-tag-list, #custom-tag-list { li { transition: background-color 150ms ease-out; padding: 2px 10px; @@ -273,15 +269,33 @@ section { } ul#default-tag-list { + .unread-count, .total-count { + font-size: 0.7em; + padding: 0px 5px 0; + top: 1px; + left: 0; + border: 1px solid #FFF; + position: absolute; + opacity: 0.95; + } + .total-count { + background: #999; + } + span.tag-label { + padding-left: 2px; + } li { - padding: 5px 10px; + padding: 5px 10px 5px 16px; position: relative; @include searching(4px, 19px, #333, 0.7em); &:before { + font-size: 1.5em; font-family: "FontAwesome"; - margin-right: 10px; + margin-right: 13px; font-weight: normal; + position: relative; + top: 2px; } &:nth-child(1) { &:before { @@ -312,28 +326,41 @@ section { } ul#custom-tag-list { - padding-bottom: 30px; li { + white-space: nowrap; + overflow: hidden; font-size: 0.8em; - padding: 5px 20px; + padding: 5px 10px 5px 15px; + + span.tag-label { + padding: 5px 20px 5px 38px; + } } } - ul#logout { - a { - color: #000000; - } + ul#logout { li { - color: #000000; - background-color: $action_buttons; + color: $action_buttons; + background-color: $secondary; padding: 5px 10px; position: relative; @include searching(4px, 19px, #333, 0.7em); - &:before { - font-family: "FontAwesome"; - margin-right: 10px; - font-weight: normal; + &:hover { + background-color: $action_buttons; + color: $secondary; + } + + div { + padding-left: 7px; + &:before { + font-size: 1.5em; + font-family: "FontAwesome"; + margin-right: 13px; + font-weight: normal; + position: relative; + top: 2px; + } } } } @@ -463,6 +490,31 @@ button { } } +.fake-left-off-canvas-toggle { + color: white; + + &:hover, &:focus { + color: white; + } + + padding: 9px 0px 8px 19px; + display: block; + left: 0; + background: $secondary; + top: 0; + position: relative; + &.logout { + color: $action_buttons; + } +} + +.left-off-canvas-logo { + img { + padding: 9px 6px 6px 6px; + width: 163px; + } +} + .collapsed-nav { width: 50px; position: absolute; @@ -470,31 +522,6 @@ button { height: 100vh; background: $secondary; - .left-off-canvas-logo { - text-align: center; - padding: 8px; - display: block; - - img { - padding-top: 1px; - } - } - - .left-off-canvas-toggle { - color: white; - text-align: center; - display: block; - left: 0; - padding: 9px; - background: $secondary; - top: 0; - z-index: 10000; - position: relative; - &.logout { - color: $action_buttons; - } - } - ul.shortcuts { li { position: relative; @@ -572,51 +599,56 @@ button { bottom: 0; position: absolute; overflow-y: auto; - z-index: 1001; - transition: transform 500ms ease 0s; - -webkit-overflow-scrolling: touch; - -ms-transform: translate(-100%, 0); - -webkit-transform: translate3d(-100%, 0, 0); - -moz-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - -o-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); } + .left-off-canvas-menu * { --webkit-backface-visibility: hidden; } + -webkit-backface-visibility: hidden; +} .off-canvas-wrap { -webkit-backface-visibility: hidden; position: relative; width: 100%; -overflow: hidden; } + overflow: hidden; +} + .off-canvas-wrap.move-right, .off-canvas-wrap.move-left { min-height: 100%; --webkit-overflow-scrolling: touch; } + -webkit-overflow-scrolling: touch; +} .inner-wrap { -webkit-backface-visibility: hidden; position: relative; width: 100%; +} + +.inner-wrap:before, .inner-wrap:after { + content: " "; + display: table; +} + +.inner-wrap:after { + clear: both; +} + +.off-canvas-wrap.content { -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; -ms-transition: -ms-transform 500ms ease; -o-transition: -o-transform 500ms ease; -transition: transform 500ms ease; } -.inner-wrap:before, .inner-wrap:after { - content: " "; -display: table; } -.inner-wrap:after { -clear: both; } - -.move-right > .inner-wrap { - -ms-transform: translate(13.88889rem, 0); - -webkit-transform: translate3d(13.88889rem, 0, 0); - -moz-transform: translate3d(13.88889rem, 0, 0); - -ms-transform: translate3d(13.88889rem, 0, 0); - -o-transform: translate3d(13.88889rem, 0, 0); -transform: translate3d(13.88889rem, 0, 0); } + transition: transform 500ms ease; + + &.move-right { + -webkit-transform: translate3d(10rem, 0, 0); + -moz-transform: translate3d(10rem, 0, 0); + -ms-transform: translate3d(10rem, 0, 0); + -o-transform: translate3d(10rem, 0, 0); + transform: translate3d(10rem, 0, 0); + } +} + .move-right .exit-off-canvas { -webkit-backface-visibility: hidden; transition: background 300ms ease; @@ -634,6 +666,15 @@ transform: translate3d(13.88889rem, 0, 0); } .move-right .exit-off-canvas:hover { background: rgba(255, 255, 255, 0.05); } } +.off-canvas-wrap.move-right.menu { + position: absolute; +} + +.off-canvas-wrap.content { + left: 50px; + padding-right: 50px; +} + .offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu { -ms-transform: none; -webkit-transform: none; |