diff --git a/dist/main.css b/dist/main.css index 5f37c01..76b6cfd 100644 Binary files a/dist/main.css and b/dist/main.css differ diff --git a/src/styles/_content.scss b/src/styles/_content.scss index ec263bf..f6c3c16 100644 --- a/src/styles/_content.scss +++ b/src/styles/_content.scss @@ -100,14 +100,13 @@ .photo .overlay { position: absolute; width: 200px; - height: 60px; - margin: 142px 2px 0; - //background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%); - background: rgba(0, 0, 0, .6); + height: 200px; + margin: 2px; + background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%); } .album img[data-type^='nonretina'] + .overlay { - background: rgba(0, 0, 0, 0); + background: rgba(0, 0, 0, 0.2); } .photo .overlay { @@ -123,7 +122,7 @@ .photo .overlay h1 { min-height: 19px; width: 185px; - margin: 13px 0 3px 15px; + margin: 152px 0 3px 15px; color: #fff; font-size: 16px; font-weight: bold; diff --git a/src/styles/_contextmenu.scss b/src/styles/_contextmenu.scss index b65534c..42bac2a 100644 --- a/src/styles/_contextmenu.scss +++ b/src/styles/_contextmenu.scss @@ -10,7 +10,7 @@ border: 1px solid rgba(0, 0, 0, .5); border-bottom: 1px solid rgba(0, 0, 0, .6); border-radius: 5px; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 0px rgba(255, 255, 255, .08); + box-shadow: 0 1px 4px rgba(0, 0, 0, .15), inset 0px 1px 0px rgba(255, 255, 255, .08); /* Item ------------------------------------------------*/ tr { diff --git a/src/styles/_header.scss b/src/styles/_header.scss index 8d64c43..344e375 100644 --- a/src/styles/_header.scss +++ b/src/styles/_header.scss @@ -50,7 +50,7 @@ header { font-size: 16px; font-weight: bold; text-align: center; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); &.editable { cursor: pointer; } } diff --git a/src/styles/_imageview.scss b/src/styles/_imageview.scss index 5115ad6..d30962c 100644 --- a/src/styles/_imageview.scss +++ b/src/styles/_imageview.scss @@ -3,6 +3,7 @@ */ #imageview { + position: fixed; display: none; width: 100%; diff --git a/src/styles/_infobox.scss b/src/styles/_infobox.scss index 92cd479..96cc7aa 100644 --- a/src/styles/_infobox.scss +++ b/src/styles/_infobox.scss @@ -66,7 +66,7 @@ font-size: 16px; font-weight: bold; text-align: center; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); } .header a { @@ -75,7 +75,7 @@ color: #fff; font-size: 20px; font-weight: bold; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); opacity: .5; cursor: pointer; @@ -99,7 +99,7 @@ color: #fff; font-size: 14px; font-weight: bold; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); } } diff --git a/src/styles/_message.scss b/src/styles/_message.scss index 5c263c3..c49a874 100644 --- a/src/styles/_message.scss +++ b/src/styles/_message.scss @@ -6,203 +6,203 @@ position: fixed; width: 100%; height: 100%; - top: 0px; - left: 0px; - background-color: rgba(0,0,0,.85); + top: 0; + left: 0; + background-color: rgba(0, 0, 0, .85); z-index: 1000; } + .message { + position: absolute; display: inline-block; width: 500px; margin-left: -250px; margin-top: -95px; - background-color: #444; background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45)); border-radius: 5px; - box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.08); + box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08); /* Animation */ animation-name: moveUp; animation-duration: .3s; - animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); -} + animation-timing-function: cubic-bezier(.51, .92, .24, 1.15); /* Header ------------------------------------------------*/ - .message h1 { + h1 { float: left; width: 100%; - padding: 12px 0px; + padding: 12px 0; color: #fff; font-size: 16px; font-weight: bold; - text-shadow: 0px -1px 0px rgba(0, 0, 0, .3); + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); text-align: center; } - .message .close { + + .close { position: absolute; - top: 0px; - right: 0px; + top: 0; + right: 0; padding: 12px 14px 6px 7px; color: #aaa; font-size: 20px; - text-shadow: 0px -1px 0px rgba(0, 0, 0, .3); + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); cursor: pointer; - } - .message .close:hover { - color: #fff; + + &:hover { color: #fff; } } /* Text ------------------------------------------------*/ - .message p { + p { float: left; width: 90%; margin-top: 1px; padding: 12px 5% 15px 5%; color: #eee; font-size: 14px; - text-shadow: 0px -1px 0px rgba(0, 0, 0, .3); + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); line-height: 20px; - } - .message p b { - font-weight: bold; - color: #fff; - } - .message p a { - color: #eee; - text-decoration: none; - border-bottom: 1px dashed #888; + + b { + font-weight: bold; + color: #fff; + } + + a { + color: #eee; + text-decoration: none; + border-bottom: 1px dashed #888; + } } /* Button ------------------------------------------------*/ - .message .button { + .button { float: right; - margin: 15px 15px 15px 0px; + margin: 15px 15px 15px 0; padding: 7px 10px 8px 10px; color: #ccc; font-size: 14px; font-weight: bold; text-align: center; - text-shadow: 0px -1px 0px #222; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); border-radius: 5px; border: 1px solid rgba(0,0,0,.4); - box-shadow: inset 0px 1px 0px rgba(255,255,255,.08), 0px 1px 0px rgba(255,255,255,.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .05); cursor: pointer; - } - .message .button:first-of-type { - margin: 15px 5% 18px 0px !important; - } - .message .button.active { - color: #fff; - box-shadow: inset 0px 1px 0px rgba(255,255,255,.08), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 4px #005ecc; - } - .message .button:hover { - background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57)); - } - .message .button:active, - .message .button.pressed { - background-color: #393939; - background-image: linear-gradient(to bottom, rgb(57, 57, 57), rgb(60, 60, 60)); + + &:first-of-type { margin: 15px 5% 18px 0; } + + &.active { + color: #fff; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .1), 0 0 4px #005ecc; + } + + &:hover { background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57)); } + + &:active, + &.pressed { background-image: linear-gradient(to bottom, rgb(57, 57, 57), rgb(60, 60, 60)); } } - /* Sign in ------------------------------------------------*/ - .sign_in { - float: left; - width: 100%; - margin-top: 1px; - padding: 5px 0px; - color: #eee; - font-size: 14px; - text-shadow: 0px -1px 0px #222; - line-height: 20px; - } - .sign_in input { - float: left; - width: 88%; - padding: 7px 1% 9px 1%; - margin: 0px 5%; - background-color: transparent; - color: #fff; - text-shadow: 0px -1px 0px #222; - border: none; - border-bottom: 1px solid #222; - box-shadow: 0px 1px 0px rgba(255,255,255,.1); - border-radius: 0px; - outline: none; - } - .sign_in input:first-of-type { - margin-bottom: 10px; - } - .sign_in input.error:focus { - box-shadow: 0px 1px 0px rgba(204, 0, 7, 0.6); - } - .message #version { - display: inline-block; - margin-top: 23px; - margin-left: 5%; - color: #888; - text-shadow: 0px -1px 0px #111; - } - .message #version span { - display: none; - } - .message #version span a { - color: #888; - } - - /* Input Misc ------------------------------------------------*/ - .message input.text { + /* Input ------------------------------------------------*/ + input.text { float: left; width: calc(100% - 10px); padding: 17px 5px 9px 5px; margin-top: 10px; background-color: transparent; color: #fff; - text-shadow: 0px -1px 0px #222; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); border: none; - box-shadow: 0px 1px 0px rgba(255,255,255,.1); + box-shadow: 0 1px 0 rgba(255, 255, 255, .1); border-bottom: 1px solid #222; border-radius: 0px; outline: none; } - .message input.less { - margin-bottom: -10px; - } - .message input.more { - margin-bottom: 30px; - } - .message .copylink { - margin-bottom: 20px; - } + + input.less { margin-bottom: -10px; } + + input.more { margin-bottom: 30px; } + + .copylink { margin-bottom: 20px; } /* Radio Buttons ------------------------------------------------*/ - .message .choice { + .choice { float: left; margin: 12px 5%; width: 90%; color: #fff; - } - .message .choice input { + input { float: left; } + + h2 { float: left; - } - .message .choice h2 { - float: left; - margin: 1px 0px 0px 8px; + margin: 1px 0 0 8px; color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); } - .message .choice p { + + p { margin-top: 2px; - padding: 0px 5% 0px 25px; + padding: 0 5% 0 25px; color: #aaa; font-size: 13px; } - .message .choice p input { - width: 100%; - padding: 10px 1px 9px; - margin-top: 10px; - } \ No newline at end of file + p input { + width: 100%; + padding: 10px 1px 9px; + margin-top: 10px; + } + } + + /* Version ------------------------------------------------*/ + #version { + display: inline-block; + margin-top: 23px; + margin-left: 5%; + color: #888; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); + + span { display: none; } + + span a { color: #888; } + } + +} + +/* Sign in ------------------------------------------------*/ +.sign_in { + + float: left; + width: 100%; + margin-top: 1px; + padding: 5px 0; + color: #eee; + font-size: 14px; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); + line-height: 20px; + + /* Input ------------------------------------------------*/ + input { + float: left; + width: 88%; + padding: 7px 1% 9px 1%; + margin: 0 5%; + background-color: transparent; + color: #fff; + text-shadow: 0 -1px 0 #222; + border: none; + border-bottom: 1px solid #222; + box-shadow: 0 1px 0 rgba(255,255,255,.1); + border-radius: 0; + outline: none; + + &:first-of-type { margin-bottom: 10px; } + + &.error:focus { box-shadow: 0 1px 0 rgba(204, 0, 7, .6); } + } + +} \ No newline at end of file diff --git a/src/styles/_upload.scss b/src/styles/_upload.scss index fc2549c..d98e350 100644 --- a/src/styles/_upload.scss +++ b/src/styles/_upload.scss @@ -5,16 +5,19 @@ #upload { display: none; } + .upload_overlay { position: fixed; width: 100%; height: 100%; - top: 0px; - left: 0px; - background-color: rgba(0,0,0,.85); + top: 0; + left: 0; + background-color: rgba(0, 0, 0, .85); z-index: 1000; } + .upload_message { + position: absolute; display: inline-block; width: 450px; @@ -22,40 +25,39 @@ margin-top: -170px; background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45)); border-radius: 5px; - box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.08), inset 1px 0px 0px rgba(255,255,255,.03), inset -1px 0px 0px rgba(255,255,255,.03); + box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08); animation-name: moveUp; animation-duration: .3s; animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); -} /* Header ------------------------------------------------*/ - .upload_message h1 { + h1 { float: left; width: 100%; - padding: 12px 0px; + padding: 12px 0; color: #fff; font-size: 16px; font-weight: bold; - text-shadow: 0px -1px 0px #222; + text-shadow: 0px -1px 0px rgba(0, 0, 0, .3); text-align: center; } - .upload_message .close { + + .close { display: none; position: absolute; - top: 0px; - right: 0px; + top: 0; + right: 0; padding: 11px 14px 6px 7px; color: #aaa; font-size: 20px; - text-shadow: 0px -1px 0px #222; + text-shadow: 0px -1px 0px rgba(0, 0, 0, .3); cursor: pointer; - } - .upload_message .close:hover { - color: #fff; + + &:hover { color: #fff; } } /* Rows ------------------------------------------------*/ - .upload_message .rows { + .rows { float: left; margin: 3px 8px 8px 8px; width: calc(100% - 16px); @@ -64,23 +66,20 @@ overflow: hidden; overflow-y: scroll; border-radius: 3px; - box-shadow: inset 0px 0px 3px rgba(0, 0, 0, .8); + box-shadow: inset 0 0 3px rgba(0, 0, 0, .8); } /* Row ------------------------------------------------*/ - .upload_message .rows .row { + .rows .row { float: left; display: inline-block; - padding: 8px 0px; + padding: 8px 0; width: 100%; background-color: rgba(255, 255, 255, .02); - } - .upload_message .rows .row:nth-child(2n) { - background-color: rgba(255, 255, 255, 0); - } + &:nth-child(2n) { background-color: rgba(255, 255, 255, 0); } - .upload_message .rows .row a.name { + a.name { float: left; padding: 5px 10px; width: calc(70% - 20px); @@ -90,42 +89,37 @@ overflow: hidden; } - .upload_message .rows .row a.status { + a.status { float: left; padding: 5px 10px; width: calc(30% - 20px); color: rgba(255, 255, 255, .5); font-size: 14px; text-align: right; - } - .upload_message .rows .row a.status { animation-name: pulse; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; + + &.error, + &.success { animation: none; } + + &.error { color: rgb(213, 24, 24); } + + &.success { color: rgb(42, 213, 0); } } - .upload_message .rows .row a.status.error, - .upload_message .rows .row a.status.success { - animation: none; - } - - .upload_message .rows .row a.status.error { - color: rgb(213, 24, 24); - } - - .upload_message .rows .row a.status.success { - color: rgb(42, 213, 0); - } - - .upload_message .rows .row p.notice { + p.notice { display: none; float: left; padding: 2px 10px 5px; width: calc(100% - 20px); - color: rgba(255,255,255,.5); + color: rgba(255, 255, 255, .5); font-size: 12px; overflow: hidden; line-height: 16px; - } \ No newline at end of file + } + } + +} \ No newline at end of file