diff --git a/dist/main.css b/dist/main.css index a792a6a..118f6b4 100644 Binary files a/dist/main.css and b/dist/main.css differ diff --git a/dist/main.js b/dist/main.js index bd43b85..7f95959 100644 Binary files a/dist/main.js and b/dist/main.js differ diff --git a/index.html b/index.html index 9c2e656..0473d73 100644 --- a/index.html +++ b/index.html @@ -29,39 +29,72 @@
+ + + -
- - + -
- - + -
- -
+ - -
diff --git a/src/images/iconic.svg b/src/images/iconic.svg new file mode 100755 index 0000000..19b6fcf --- /dev/null +++ b/src/images/iconic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/scripts/view.js b/src/scripts/view.js index 1dd6a1a..efac1e1 100644 --- a/src/scripts/view.js +++ b/src/scripts/view.js @@ -447,14 +447,14 @@ view.photo = { star: function() { - $('#button_star a').removeClass('icon-star-empty icon-star'); if (photo.json.star==1) { // Starred - $('#button_star a').addClass('icon-star'); - $('#button_star').attr('title', 'Unstar Photo'); + $('#button_star') + .addClass('active') + .attr('title', 'Unstar Photo'); } else { // Unstarred - $('#button_star a').addClass('icon-star-empty'); + $('#button_star').removeClass('active'); $('#button_star').attr('title', 'Star Photo'); } @@ -464,13 +464,15 @@ view.photo = { if (photo.json.public==1||photo.json.public==2) { // Photo public - $('#button_share a').addClass('active'); - $('#button_share').attr('title', 'Share Photo'); + $('#button_share') + .addClass('active') + .attr('title', 'Share Photo'); if (photo.json.init) $('#infobox .attr_visibility').html('Public'); } else { // Photo private - $('#button_share a').removeClass('active'); - $('#button_share').attr('title', 'Make Public'); + $('#button_share') + .removeClass('active') + .attr('title', 'Make Public'); if (photo.json.init) $('#infobox .attr_visibility').html('Private'); } diff --git a/src/styles/_header.scss b/src/styles/_header.scss index 344e375..cf89584 100644 --- a/src/styles/_header.scss +++ b/src/styles/_header.scss @@ -55,38 +55,41 @@ header { &.editable { cursor: pointer; } } - /* Button ------------------------------------------------*/ - .button { - color: #888; - font-family: 'FontAwesome'; - font-size: 21px; - font-weight: bold; - text-decoration: none !important; - cursor: pointer; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); - - &:hover { - color: #fff; - } - - &.left { - float: left; - position: absolute; - padding: 16px 10px 8px 18px; - } - - &.right { - float: right; - position: relative; - padding: 16px 19px 13px 11px; - } + /* Toolbars ------------------------------------------------*/ + .toolbar { + display: none; + position: absolute; + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 0 10px; } - #tools_albums, - #tools_album, - #tools_photo, - #button_signin { - display: none; + /* Button ------------------------------------------------*/ + .button { + display: inline-block; + padding: 16px 8px 12px; + width: 15px; + cursor: pointer; + + &.left { float: left; } + + &.right { float: right; } + + .iconic { + fill: #888; + filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) ); + transition: fill .2s ease; + } + + &:hover .iconic { fill: #fff; } + + &--star.active .iconic { fill: #f0ef77; } + + &--eye.active .iconic { fill: #ff9737; } + + &#button_signin { display: none; } + } /* Button Divider ------------------------------------------------*/ @@ -129,24 +132,6 @@ header { &:hover { opacity: 1; } } - /* Tools ------------------------------------------------*/ - .tools { - float: right; - padding: 14px 8px; - color: #888; - font-size: 21px; - text-shadow: 0 -1px 0 #222; - cursor: pointer; - - &:first-of-type { margin-right: 6px; } - - &:hover a { color: #fff; } - - .icon-star { color: #f0ef77; } - - .icon-share.active { color: #ff9737; } - } - /* Hosted with Lychee ------------------------------------------------*/ #hostedwith { float: right; diff --git a/src/styles/main.scss b/src/styles/main.scss index 319ffe8..0d0914e 100755 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -42,6 +42,11 @@ input { user-select: text !important; } +.iconic { + width: 100%; + height: 100%; +} + @import 'animations'; @import 'content'; @import 'contextmenu';