arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

SCSS rewrite

Browse Source
This commit is contained in:
Tobias Reich 2014-11-08 11:30:25 +01:00
parent 508e3a032c
commit 2e1632a208
13 changed files with 397 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

BIN
dist/view.js vendored
View File

Binary file not shown.

12
src/scripts/build.coffee
View File

@ -52,10 +52,10 @@ build.album = (data) ->
if lychee.publicMode is false if lychee.publicMode is false
if data.star is '1' then html += "<a class='badge red icon-star'></a>" if data.star is '1' then html += "<a class='badge icon-star'></a>"
if data.public is '1' then html += "<a class='badge red icon-share'></a>" if data.public is '1' then html += "<a class='badge icon-share'></a>"
if data.unsorted is '1' then html += "<a class='badge red icon-reorder'></a>" if data.unsorted is '1' then html += "<a class='badge icon-reorder'></a>"
if data.recent is '1' then html += "<a class='badge red icon-time'></a>" if data.recent is '1' then html += "<a class='badge icon-time'></a>"
html += "</div>" html += "</div>"
@ -87,8 +87,8 @@ build.photo = (data) ->
html += "</div>" html += "</div>"
if data.star is '1' then html += "<a class='badge red icon-star'></a>" if data.star is '1' then html += "<a class='badge icon-star'></a>"
if lychee.publicMode is false and data.public is '1' and album.json.public isnt '1' then html += "<a class='badge red icon-share'></a>" if lychee.publicMode is false and data.public is '1' and album.json.public isnt '1' then html += "<a class='badge icon-share'></a>"
html += "</div>" html += "</div>"

12
src/styles/_animations.scss
View File

@ -7,25 +7,29 @@
animation-name: fadeIn; animation-name: fadeIn;
animation-duration: .3s; animation-duration: .3s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); } animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
}
.fadeOut { .fadeOut {
animation-name: fadeOut; animation-name: fadeOut;
animation-duration: .3s; animation-duration: .3s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); } animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
}
.contentZoomIn { .contentZoomIn {
animation-name: zoomIn; animation-name: zoomIn;
animation-duration: .2s; animation-duration: .2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1); } animation-timing-function: cubic-bezier(0.51,.92,.24,1);
}
.contentZoomOut { .contentZoomOut {
animation-name: zoomOut; animation-name: zoomOut;
animation-duration: .2s; animation-duration: .2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1); } animation-timing-function: cubic-bezier(0.51,.92,.24,1);
}
/* moveUp ------------------------------------------------*/ /* moveUp ------------------------------------------------*/
@keyframes moveUp { @keyframes moveUp {

218
src/styles/_content.scss
View File

@ -2,28 +2,28 @@
* @copyright 2014 by Tobias Reich * @copyright 2014 by Tobias Reich
*/ */
/* Gradient ------------------------------------------------*/
#content::before {
content: "";
position: absolute;
left: 0px;
width: 100%;
height: 20px;
background: linear-gradient(to bottom, #262626, #222);
border-top: 1px solid #333;
}
/* Modes ------------------------------------------------*/
#content.view::before {
display: none;
}
#content { #content {
position: absolute; position: absolute;
padding: 50px 0px 33px 0px; padding: 50px 0px 33px 0px;
width: 100%; width: 100%;
min-height: calc(100% - 90px); min-height: calc(100% - 90px);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
// Adds a gradient to the top
&::before {
content: '';
position: absolute;
left: 0px;
width: 100%;
height: 20px;
background: linear-gradient(to bottom, #262626, #222);
border-top: 1px solid #333;
}
// Removes the gradient when using the view
&.view::before {
display: none;
}
} }
/* Photo ------------------------------------------------*/ /* Photo ------------------------------------------------*/
@ -32,10 +32,10 @@
display: inline-block; display: inline-block;
width: 206px; width: 206px;
height: 206px; height: 206px;
margin: 30px 0px 0px 30px; margin: 30px 0 0 30px;
cursor: pointer; cursor: pointer;
}
.photo img { img {
position: absolute; position: absolute;
width: 200px; width: 200px;
height: 200px; height: 200px;
@ -43,14 +43,17 @@
border-radius: 2px; border-radius: 2px;
border: 2px solid #ccc; border: 2px solid #ccc;
} }
.photo:hover img,
.photo.active img { &:hover img,
box-shadow: 0px 0px 5px #005ecc; &.active img {
box-shadow: 0 0 5px #005ecc;
} }
.photo:active {
&:active {
transition-duration: .1s; transition-duration: .1s;
transform: scale(.98); transform: scale(.98);
} }
}
/* Album ------------------------------------------------*/ /* Album ------------------------------------------------*/
.album { .album {
@ -60,31 +63,36 @@
height: 204px; height: 204px;
margin: 30px 0px 0px 30px; margin: 30px 0px 0px 30px;
cursor: pointer; cursor: pointer;
}
.album img:first-child, img {
.album img:nth-child(2) {
transform: rotate(0deg) translateY(0px) translateX(0px);
opacity: 0;
}
.album:hover img:first-child {
transform: rotate(-2deg) translateY(10px) translateX(-12px);
opacity: 1;
}
.album:hover img:nth-child(2) {
transform: rotate(5deg) translateY(-8px) translateX(12px);
opacity: 1;
}
.album img {
position: absolute; position: absolute;
width: 200px; width: 200px;
height: 200px; height: 200px;
background-color: #222; background-color: #222;
border-radius: 2px; border-radius: 2px;
border: 2px solid #ccc; border: 2px solid #ccc;
&:first-child,
&:nth-child(2) {
transform: rotate(0) translateY(0) translateX(0);
opacity: 0;
}
}
&:hover img:first-child {
transform: rotate(-2deg) translateY(10px) translateX(-12px);
opacity: 1;
}
&:hover img:nth-child(2) {
transform: rotate(5deg) translateY(-8px) translateX(12px);
opacity: 1;
}
&:hover img,
&.active img {
box-shadow: 0 0 5px #005ecc;
} }
.album:hover img,
.album.active img {
box-shadow: 0px 0px 5px #005ecc;
} }
/* Album/Photo Overlay ------------------------------------------------*/ /* Album/Photo Overlay ------------------------------------------------*/
@ -92,43 +100,50 @@
.photo .overlay { .photo .overlay {
position: absolute; position: absolute;
width: 200px; width: 200px;
height: 200px; height: 60px;
margin: 2px; 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);
} }
.album .overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.85) 100%); .album img[data-type^='nonretina'] + .overlay {
background: rgba(0, 0, 0, 0);
} }
.photo .overlay { .photo .overlay {
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%);
opacity: 0; opacity: 0;
} }
.photo:hover .overlay, .photo:hover .overlay,
.photo.active .overlay { .photo.active .overlay {
opacity: 1; opacity: 1;
} }
.album .overlay h1, .album .overlay h1,
.photo .overlay h1 { .photo .overlay h1 {
min-height: 19px; min-height: 19px;
width: 185px; width: 185px;
margin: 153px 0px 3px 15px; margin: 13px 0 3px 15px;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
} }
.album .overlay a, .album .overlay a,
.photo .overlay a { .photo .overlay a {
font-size: 11px; font-size: 11px;
color: #aaa; color: #aaa;
} }
.album .overlay a { .album .overlay a {
margin-left: 15px; margin-left: 15px;
} }
.photo .overlay a { .photo .overlay a {
margin: 155px 0px 5px 15px; margin: 155px 0 5px 15px;
}
.photo .overlay a span { span { margin: 0 5px 0 0; }
margin: 0px 5px 0px 0px;
} }
/* Badges ------------------------------------------------*/ /* Badges ------------------------------------------------*/
@ -138,30 +153,18 @@
margin-top: -1px; margin-top: -1px;
margin-left: 12px; margin-left: 12px;
padding: 12px 7px 3px 7px; padding: 12px 7px 3px 7px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, .8); background: linear-gradient(to bottom, #d64b4b 0%, #ab2c2c 100%);
border-radius: 0px 0px 3px 3px; box-shadow: 0 0 3px rgba(0, 0, 0, .8);
border-radius: 0 0 3px 3px;
border: 1px solid #fff; border: 1px solid #fff;
border-top: none; border-top: none;
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
text-shadow: 0px 1px 0px rgba(0, 0, 0, .4); text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
opacity: .9; opacity: .9;
}
.album .badge.icon-star, &::after {
.photo .badge.icon-star { content: '';
padding: 12px 8px 3px 8px;
}
.album .badge.icon-share,
.photo .badge.icon-share {
padding: 12px 6px 3px 8px;
}
.album .badge.icon-time,
.photo .badge.icon-time {
padding: 12px 8px 3px 9px;
}
.album .badge::after,
.photo .badge::after {
content: "";
position: absolute; position: absolute;
margin-top: -12px; margin-top: -12px;
margin-left: -26px; margin-left: -26px;
@ -170,32 +173,35 @@
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
opacity: .4; opacity: .4;
} }
.album .badge.icon-star::after,
.photo .badge.icon-star::after { &:nth-child(2n) {
margin-left: -29px;
}
.album .badge.icon-share::after,
.photo .badge.icon-share::after {
margin-left: -31px;
}
.album .badge.icon-time::after,
.photo .badge.icon-time::after {
margin-left: -29px;
}
.album .badge.icon-reorder::after {
margin-left: -30px;
}
.album .badge:nth-child(2n),
.photo .badge:nth-child(2n) {
margin-left: 57px; margin-left: 57px;
} }
.album .badge.red,
.photo .badge.red {
background: linear-gradient(to bottom, #d64b4b 0%, #ab2c2c 100%);
} }
.album .badge.blue,
.photo .badge.blue { .album .badge.icon-star,
background: linear-gradient(to bottom, #347cd6 0%, #2945ab 100%); .photo .badge.icon-star {
padding: 12px 8px 3px 8px;
&::after { margin-left: -29px; }
}
.album .badge.icon-share,
.photo .badge.icon-share {
padding: 12px 6px 3px 8px;
&::after { margin-left: -31px; }
}
.album .badge.icon-time,
.photo .badge.icon-time {
padding: 12px 8px 3px 9px;
::after { margin-left: -29px; }
}
.album .badge.icon-reorder::after {
margin-left: -30px;
} }
/* Divider ------------------------------------------------*/ /* Divider ------------------------------------------------*/
@ -204,20 +210,22 @@
width: 100%; width: 100%;
margin-top: 50px; margin-top: 50px;
opacity: 0; opacity: 0;
border-top: 1px solid #2E2E2E; border-top: 1px solid rgba(255, 255, 255, .03);
box-shadow: 0px -1px 0px #151515; box-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}
.divider:first-child { &:first-child {
margin-top: 0px; margin-top: 0;
border-top: none; border-top: none;
} }
.divider h1 {
h1 {
float: left; float: left;
margin: 20px 0px 0px 30px; margin: 20px 0 0 30px;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
text-shadow: 0px -1px 0px rgba(0, 0, 0, .8); text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}
} }
/* No Content ------------------------------------------------*/ /* No Content ------------------------------------------------*/
@ -233,11 +241,13 @@
color: rgba(20, 20, 20, 1); color: rgba(20, 20, 20, 1);
text-shadow: 0px 1px 0px rgba(255, 255, 255, .05); text-shadow: 0px 1px 0px rgba(255, 255, 255, .05);
text-align: center; text-align: center;
}
.no_content .icon { .icon {
font-size: 80px; font-size: 80px;
} }
.no_content p {
p {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
}

1
src/styles/_contextmenu.scss
View File

@ -4,6 +4,7 @@
/* Context ------------------------------------------------*/ /* Context ------------------------------------------------*/
.context { .context {
padding: 5px 0 6px; padding: 5px 0 6px;
background: linear-gradient(to bottom, #444 0%, #2f2f2f 100%); background: linear-gradient(to bottom, #444 0%, #2f2f2f 100%);
border: 1px solid rgba(0, 0, 0, .5); border: 1px solid rgba(0, 0, 0, .5);

127
src/styles/_header.scss
View File

@ -3,6 +3,7 @@
*/ */
header { header {
position: fixed; position: fixed;
height: 49px; height: 49px;
width: 100%; width: 100%;
@ -10,79 +11,86 @@ header {
border-bottom: 1px solid #161616; border-bottom: 1px solid #161616;
z-index: 1; z-index: 1;
transition: transform .3s ease-out; transition: transform .3s ease-out;
}
/* Modes ------------------------------------------------*/ /* Modes ------------------------------------------------*/
header.hidden { &.hidden {
transform: translateY(-60px); transform: translateY(-60px);
} }
header.loading {
&.loading {
transform: translateY(2px); transform: translateY(2px);
} }
header.error {
&.error {
transform: translateY(40px); transform: translateY(40px);
} }
header.view.error {
background-color: rgba(10,10,10,.99); &.view {
}
header.view {
background: none; background: none;
border-bottom: none; border-bottom: none;
&.error {
background-color: rgba(10, 10, 10, .99);
} }
header.view .button,
header.view #title, .button,
header.view .tools { #title,
.tools {
text-shadow: none !important; text-shadow: none !important;
} }
}
/* Title ------------------------------------------------*/ /* Title ------------------------------------------------*/
header #title { #title {
position: absolute; position: absolute;
margin: 0px 30%; margin: 0 30%;
width: 40%; width: 40%;
padding: 15px 0px; padding: 15px 0;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
text-shadow: 0px -1px 0px #222; text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}
header #title.editable { &.editable { cursor: pointer; }
cursor: pointer;
} }
/* Button ------------------------------------------------*/ /* Button ------------------------------------------------*/
header .button { .button {
color: #888; color: #888;
font-family: 'FontAwesome'; font-family: 'FontAwesome';
font-size: 21px; font-size: 21px;
font-weight: bold; font-weight: bold;
text-decoration: none !important; text-decoration: none !important;
cursor: pointer; cursor: pointer;
text-shadow: 0px -1px 0px #222; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
&:hover {
color: #fff;
} }
header .button.left {
&.left {
float: left; float: left;
position: absolute; position: absolute;
padding: 16px 10px 8px 18px; padding: 16px 10px 8px 18px;
} }
header .button.right {
&.right {
float: right; float: right;
position: relative; position: relative;
padding: 16px 19px 13px 11px; padding: 16px 19px 13px 11px;
} }
header .button:hover {
color: #fff;
} }
header #tools_albums,
header #tools_album, #tools_albums,
header #tools_photo, #tools_album,
header #button_signin { #tools_photo,
#button_signin {
display: none; display: none;
} }
/* Button Divider ------------------------------------------------*/ /* Button Divider ------------------------------------------------*/
header .button_divider { .button_divider {
float: right; float: right;
position: relative; position: relative;
width: 14px; width: 14px;
@ -90,30 +98,26 @@ header {
} }
/* Search ------------------------------------------------*/ /* Search ------------------------------------------------*/
header #search { #search {
float: right; float: right;
width: 80px; width: 80px;
margin: 12px 12px 0px 0px; margin: 12px 12px 0 0;
padding: 5px 12px 6px 12px; padding: 5px 12px 6px 12px;
background-color: #383838; background-color: #383838;
color: #fff; color: #fff;
border: none; border: 1px solid rgba(0, 0, 0, .6);
border: 1px solid #131313; box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
box-shadow: 0px 1px 0px rgba(255,255,255,.1);
outline: none; outline: none;
border-radius: 50px; border-radius: 50px;
opacity: .6; opacity: .6;
transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, width .2s ease-out; transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, width .2s ease-out;
&:focus { width: 140px; }
&:focus ~ #clearSearch { opacity: 1; }
} }
header #search:focus { #clearSearch {
width: 140px;
}
header #search:focus ~ #clearSearch {
opacity: 1;
}
header #clearSearch {
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 81px; right: 81px;
@ -121,46 +125,43 @@ header {
font-size: 20px; font-size: 20px;
opacity: 0; opacity: 0;
transition: opacity .2s ease-out; transition: opacity .2s ease-out;
}
header #clearSearch:hover { &:hover { opacity: 1; }
opacity: 1;
} }
/* Tools ------------------------------------------------*/ /* Tools ------------------------------------------------*/
header .tools:first-of-type { .tools {
margin-right: 6px;
}
header .tools {
float: right; float: right;
padding: 14px 8px; padding: 14px 8px;
color: #888; color: #888;
font-size: 21px; font-size: 21px;
text-shadow: 0px -1px 0px #222; text-shadow: 0 -1px 0 #222;
cursor: pointer; cursor: pointer;
}
header .tools:hover a { &:first-of-type { margin-right: 6px; }
color: #fff;
} &:hover a { color: #fff; }
header .tools .icon-star {
color: #f0ef77; .icon-star { color: #f0ef77; }
}
header .tools .icon-share.active { .icon-share.active { color: #ff9737; }
color: #ff9737;
} }
/* Hosted with Lychee ------------------------------------------------*/ /* Hosted with Lychee ------------------------------------------------*/
header #hostedwith { #hostedwith {
float: right; float: right;
padding: 5px 10px; padding: 5px 10px;
margin: 13px 9px; margin: 13px 9px;
color: #888; color: #888;
font-size: 13px; font-size: 13px;
text-shadow: 0px -1px 0px #222; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
display: none; display: none;
cursor: pointer; cursor: pointer;
}
header #hostedwith:hover { &:hover {
background-color: rgba(0, 0, 0, .2); background-color: rgba(0, 0, 0, .2);
border-radius: 100px; border-radius: 100px;
} }
}
}

70
src/styles/_imageview.scss
View File

@ -6,21 +6,17 @@
position: fixed; position: fixed;
display: none; display: none;
width: 100%; width: 100%;
min-height: 100%; height: 100%;
background-color: rgba(10,10,10,.98); background-color: rgba(10, 10, 10, .98);
transition: background-color .3s; transition: background-color .3s;
}
/* Modes ------------------------------------------------*/ /* Modes ------------------------------------------------*/
#imageview.view { &.view { background-color: inherit; }
background-color: inherit;
} &.full { background-color: rgba(0, 0, 0, 1); }
#imageview.full {
background-color: rgba(0,0,0,1);
}
/* ImageView ------------------------------------------------*/ /* ImageView ------------------------------------------------*/
#imageview #image { #image {
position: absolute; position: absolute;
top: 60px; top: 60px;
right: 30px; right: 30px;
@ -29,56 +25,56 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
background-size: contain; background-size: contain;
transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s cubic-bezier(0.51,.92,.24,1.15); transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s cubic-bezier(.51, .92, .24, 1.15);
animation-name: zoomIn; animation-name: zoomIn;
animation-duration: .3s; animation-duration: .3s;
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
}
#imageview #image.small { &.small {
top: 50%; top: 50%;
right: auto; right: auto;
bottom: auto; bottom: auto;
left: 50%; left: 50%;
} }
#imageview #image.full {
top: 0px; &.full {
right: 0px; top: 0;
bottom: 0px; right: 0;
left: 0px; bottom: 0;
left: 0;
}
} }
/* Previous/Next Buttons ------------------------------------------------*/ /* Previous/Next Buttons ------------------------------------------------*/
#imageview .arrow_wrapper { .arrow_wrapper {
position: fixed; position: fixed;
width: 20%; width: 20%;
height: calc(100% - 60px); height: calc(100% - 60px);
top: 60px; top: 60px;
z-index: 1; z-index: 1;
}
#imageview .arrow_wrapper.previous { &.previous { left: 0; }
left: 0;
} &.next { right: 0; }
#imageview .arrow_wrapper.next {
right: 0; a#previous { left: 20px; }
}
#imageview .arrow_wrapper a { a#next { right: 20px; }
a {
position: fixed; position: fixed;
top: 50%; top: 50%;
margin-top: -10px; margin-top: -10px;
color: #fff; color: #fff;
font-size: 50px; font-size: 50px;
text-shadow: 0px 1px 2px #000; text-shadow: 0 1px 2px #000;
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
z-index: 2; z-index: 2;
transition: opacity .2s; transition: opacity .2s;
} }
#imageview .arrow_wrapper:hover a {
opacity: .2; &:hover a { opacity: .2; }
}
#imageview .arrow_wrapper a#previous {
left: 20px;
}
#imageview .arrow_wrapper a#next {
right: 20px;
} }
}

115
src/styles/_infobox.scss
View File

@ -9,54 +9,56 @@
height: 100%; height: 100%;
top: 0px; top: 0px;
left: 0px; left: 0px;
background-color: rgba(0,0,0,.8); background-color: rgba(0, 0, 0, .8);
} }
#infobox { #infobox {
z-index: 4; z-index: 4;
position: fixed; position: fixed;
right: 0px; right: 0px;
width: 350px; width: 350px;
height: 100%; height: 100%;
background-color: rgba(20,20,20,0.98); background-color: rgba(20, 20, 20, .98);
box-shadow: -1px 0px 2px rgba(0,0,0,.8); box-shadow: -1px 0 2px rgba(0, 0, 0, .8);
display: none; display: none;
transform: translateX(370px); transform: translateX(370px);
transition: transform .3s cubic-bezier(0.51,.92,.24,1.15); transition: transform .3s cubic-bezier(.51, .92, .24, 1.15);
}
#infobox.active { &.active { transform: translateX(50px); }
transform: translateX(50px);
}
/* Misc ------------------------------------------------*/ /* Misc ------------------------------------------------*/
#infobox .wrapper { .wrapper {
float: left; float: left;
height: 100%; height: 100%;
width: 300px; width: 300px;
overflow: scroll; overflow: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
#infobox .edit {
.edit {
display: inline; display: inline;
margin-left: 3px; margin-left: 3px;
width: 20px; width: 20px;
height: 5px; height: 5px;
cursor: pointer; cursor: pointer;
} }
#infobox .bumper {
.bumper {
float: left; float: left;
width: 100%; width: 100%;
height: 50px; height: 50px;
} }
/* Header ------------------------------------------------*/ /* Header ------------------------------------------------*/
#infobox .header { .header {
float: left; float: left;
height: 49px; height: 49px;
width: 100%; width: 100%;
background-image: linear-gradient(to bottom, #2A2A2A, #131313); background-image: linear-gradient(to bottom, #2A2A2A, #131313);
border-bottom: 1px solid #000;
} }
#infobox .header h1 {
.header h1 {
position: absolute; position: absolute;
margin: 15px 30% 15px calc(30% - 25px); margin: 15px 30% 15px calc(30% - 25px);
width: 40%; width: 40%;
@ -64,43 +66,50 @@
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
text-shadow: 0px -1px 0px rgba(0, 0, 0, .8); text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
} }
#infobox .header a {
.header a {
float: right; float: right;
padding: 15px 65px 15px 15px; padding: 15px 65px 15px 15px;
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
text-shadow: 0px -1px 0px rgba(0, 0, 0, .8); text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
opacity: .5; opacity: .5;
cursor: pointer; cursor: pointer;
}
#infobox .header a:hover { &:hover { opacity: 1; }
opacity: 1;
} }
/* Seperator ------------------------------------------------*/ /* Seperator ------------------------------------------------*/
#infobox .separator { .separator {
float: left; float: left;
width: 100%; width: 100%;
border-top: 1px solid rgba(255,255,255,.04); border-top: 1px solid rgba(255, 255, 255, .02);
box-shadow: 0px -1px 0px #000; box-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
&:first-child {
border: none;
box-shadow: none;
} }
#infobox .separator h1 {
margin: 20px 0px 5px 20px; h1 {
margin: 20px 0 5px 20px;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
text-shadow: 0px -1px 0px rgba(0, 0, 0, .8); text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}
} }
/* Table ------------------------------------------------*/ /* Table ------------------------------------------------*/
#infobox table { table {
float: left; float: left;
margin: 10px 0px 15px 20px; margin: 10px 0 15px 20px;
} }
#infobox table tr td {
table tr td {
padding: 5px 0px; padding: 5px 0px;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
@ -109,52 +118,51 @@
-webkit-user-select: text; -webkit-user-select: text;
-moz-user-select: text; -moz-user-select: text;
user-select: text; user-select: text;
}
#infobox table tr td:first-child { &:first-child { width: 110px; }
width: 110px;
} &:last-child { padding-right: 10px; }
#infobox table tr td:last-child {
padding-right: 10px;
} }
/* Tags ------------------------------------------------*/ /* Tags ------------------------------------------------*/
#infobox #tags { #tags {
width: calc(100% - 40px); width: calc(100% - 40px);
margin: 16px 20px 12px 20px; margin: 16px 20px 12px 20px;
color: #fff; color: #fff;
display: inline-block; display: inline-block;
} }
#infobox #tags .empty {
#tags .empty {
font-size: 14px; font-size: 14px;
margin-bottom: 8px; margin-bottom: 8px;
} }
#infobox #tags .edit { #tags .edit {
display: inline-block; display: inline-block;
} }
#infobox #tags .empty .edit { #tags .empty .edit {
display: inline; display: inline;
} }
#infobox .tag { #tags .tag {
float: left; float: left;
padding: 4px 7px; padding: 4px 7px;
margin: 0px 6px 8px 0px; margin: 0 6px 8px 0;
background-color: rgba(0,0,0,.5); background-color: rgba(0, 0, 0, .5);
border: 2px solid rgba(255,255,255,.3); border: 2px solid rgba(255, 255, 255, .3);
border-radius: 100px; border-radius: 100px;
font-size: 12px; font-size: 12px;
transition: border .3s; transition: border .3s;
&:hover { border: 2px solid #aaa; }
} }
#infobox .tag:hover {
border: 2px solid #aaa; #tags .tag span {
}
#infobox .tag span {
float: right; float: right;
width: 0px; width: 0;
padding: 0px; padding: 0;
margin: 0px 0px -2px 0px; margin: 0 0 -2px 0;
color: red; color: red;
font-size: 11px; font-size: 11px;
cursor: pointer; cursor: pointer;
@ -162,8 +170,11 @@
transform: scale(0); transform: scale(0);
transition: width .3s, margin .3s, transform .3s; transition: width .3s, margin .3s, transform .3s;
} }
#infobox .tag:hover span {
#tags .tag:hover span {
width: 10px; width: 10px;
margin: 0px 0px -2px 6px; margin: 0 0 -2px 6px;
transform: scale(1); transform: scale(1);
} }
}

17
src/styles/_loading.scss
View File

@ -3,41 +3,44 @@
*/ */
#loading { #loading {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 3px; height: 3px;
background-size: 100px 3px; background-size: 100px 3px;
background-repeat: repeat-x; background-repeat: repeat-x;
border-bottom: 1px solid rgba(0,0,0,.3); border-bottom: 1px solid rgba(0, 0, 0, .3);
display: none; display: none;
animation-name: moveBackground; animation-name: moveBackground;
animation-duration: .3s; animation-duration: .3s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: linear; animation-timing-function: linear;
}
/* Modes ------------------------------------------------*/ /* Modes ------------------------------------------------*/
#loading.loading { &.loading {
background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%); background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
z-index: 2; z-index: 2;
} }
#loading.error { &.error {
background-color: #2f0d0e; background-color: #2f0d0e;
background-image: linear-gradient(to right, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%); background-image: linear-gradient(to right, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
z-index: 1; z-index: 1;
} }
/* Content ------------------------------------------------*/ /* Content ------------------------------------------------*/
#loading h1 { h1 {
margin: 13px 13px 0px 13px; margin: 13px 13px 0px 13px;
color: #ddd; color: #ddd;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
text-shadow: 0px 1px 0px #000; text-shadow: 0px 1px 0px #000;
text-transform: capitalize; text-transform: capitalize;
}
#loading h1 span { span {
margin-left: 10px; margin-left: 10px;
font-weight: normal; font-weight: normal;
text-transform: none; text-transform: none;
} }
}
}

36
src/styles/_misc.scss
View File

@ -1,36 +0,0 @@
/**
* @copyright 2014 by Tobias Reich
*/
html,
body {
min-height: 100%;
}
body {
background-color: #222;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
}
body.view {
background-color: #0f0f0f;
}
.center {
position: absolute;
left: 50%;
top:50%;
}
* {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: color .3s, opacity .3s ease-out, transform .3s ease-out, box-shadow .3s;
}
input {
-webkit-user-select: text !important;
-moz-user-select: text !important;
user-select: text !important;
}

74
src/styles/main.scss
View File

@ -2,51 +2,55 @@
* @copyright 2014 by Tobias Reich * @copyright 2014 by Tobias Reich
*/ */
@import "reset"; @import 'reset';
html,
body {
min-height: 100%;
}
body {
background-color: #222;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
}
body.view {
background-color: #0f0f0f;
}
.center {
position: absolute;
left: 50%;
top:50%;
}
* { * {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
transition: color .3s, opacity .3s ease-out, transform .3s ease-out, box-shadow .3s; transition: color .3s, opacity .3s ease-out, transform .3s ease-out, box-shadow .3s;
} }
html,
body {
min-height: 100%;
}
body {
background-color: #222;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
&.view {
background-color: #0f0f0f;
}
}
.center {
position: absolute;
left: 50%;
top:50%;
}
input { input {
-webkit-user-select: text !important; -webkit-user-select: text !important;
-moz-user-select: text !important; -moz-user-select: text !important;
user-select: text !important; user-select: text !important;
} }
@import "animations"; @import 'animations';
@import "content"; @import 'content';
@import "contextmenu"; @import 'contextmenu';
@import "font"; @import 'font';
@import "header"; @import 'header';
@import "imageview"; @import 'imageview';
@import "infobox"; @import 'infobox';
@import "loading"; @import 'loading';
@import "message"; @import 'message';
@import "misc"; @import 'multiselect';
@import "multiselect"; @import 'upload';
@import "upload"; @import 'mediaquery';
@import "mediaquery";