SCSS rewrite
This commit is contained in:
Tobias Reich
parent
508e3a032c
commit
2e1632a208
BIN
dist/main.css
vendored
BIN
dist/main.css
vendored
Binary file not shown.
BIN
dist/main.js
vendored
BIN
dist/main.js
vendored
Binary file not shown.
BIN
dist/view.js
vendored
BIN
dist/view.js
vendored
Binary file not shown.
@ -52,10 +52,10 @@ build.album = (data) ->
|
||||
|
||||
if lychee.publicMode is false
|
||||
|
||||
if data.star is '1' then html += "<a class='badge red icon-star'></a>"
|
||||
if data.public is '1' then html += "<a class='badge red icon-share'></a>"
|
||||
if data.unsorted is '1' then html += "<a class='badge red icon-reorder'></a>"
|
||||
if data.recent is '1' then html += "<a class='badge red icon-time'></a>"
|
||||
if data.star is '1' then html += "<a class='badge icon-star'></a>"
|
||||
if data.public is '1' then html += "<a class='badge icon-share'></a>"
|
||||
if data.unsorted is '1' then html += "<a class='badge icon-reorder'></a>"
|
||||
if data.recent is '1' then html += "<a class='badge icon-time'></a>"
|
||||
|
||||
html += "</div>"
|
||||
|
||||
@ -87,8 +87,8 @@ build.photo = (data) ->
|
||||
|
||||
html += "</div>"
|
||||
|
||||
if data.star is '1' then html += "<a class='badge red 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 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 icon-share'></a>"
|
||||
|
||||
html += "</div>"
|
||||
|
||||
|
||||
@ -7,25 +7,29 @@
|
||||
animation-name: fadeIn;
|
||||
animation-duration: .3s;
|
||||
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 {
|
||||
animation-name: fadeOut;
|
||||
animation-duration: .3s;
|
||||
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 {
|
||||
animation-name: zoomIn;
|
||||
animation-duration: .2s;
|
||||
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 {
|
||||
animation-name: zoomOut;
|
||||
animation-duration: .2s;
|
||||
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 ------------------------------------------------*/
|
||||
@keyframes moveUp {
|
||||
|
||||
@ -2,9 +2,16 @@
|
||||
* @copyright 2014 by Tobias Reich
|
||||
*/
|
||||
|
||||
/* Gradient ------------------------------------------------*/
|
||||
#content::before {
|
||||
content: "";
|
||||
#content {
|
||||
position: absolute;
|
||||
padding: 50px 0px 33px 0px;
|
||||
width: 100%;
|
||||
min-height: calc(100% - 90px);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Adds a gradient to the top
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
@ -13,17 +20,10 @@
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
/* Modes ------------------------------------------------*/
|
||||
#content.view::before {
|
||||
// Removes the gradient when using the view
|
||||
&.view::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#content {
|
||||
position: absolute;
|
||||
padding: 50px 0px 33px 0px;
|
||||
width: 100%;
|
||||
min-height: calc(100% - 90px);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Photo ------------------------------------------------*/
|
||||
@ -32,10 +32,10 @@
|
||||
display: inline-block;
|
||||
width: 206px;
|
||||
height: 206px;
|
||||
margin: 30px 0px 0px 30px;
|
||||
margin: 30px 0 0 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.photo img {
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
@ -43,14 +43,17 @@
|
||||
border-radius: 2px;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
.photo:hover img,
|
||||
.photo.active img {
|
||||
box-shadow: 0px 0px 5px #005ecc;
|
||||
|
||||
&:hover img,
|
||||
&.active img {
|
||||
box-shadow: 0 0 5px #005ecc;
|
||||
}
|
||||
.photo:active {
|
||||
|
||||
&:active {
|
||||
transition-duration: .1s;
|
||||
transform: scale(.98);
|
||||
}
|
||||
}
|
||||
|
||||
/* Album ------------------------------------------------*/
|
||||
.album {
|
||||
@ -60,31 +63,36 @@
|
||||
height: 204px;
|
||||
margin: 30px 0px 0px 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.album img:first-child,
|
||||
.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 {
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: #222;
|
||||
border-radius: 2px;
|
||||
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 ------------------------------------------------*/
|
||||
@ -92,43 +100,50 @@
|
||||
.photo .overlay {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 2px;
|
||||
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);
|
||||
}
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.photo:hover .overlay,
|
||||
.photo.active .overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.album .overlay h1,
|
||||
.photo .overlay h1 {
|
||||
min-height: 19px;
|
||||
width: 185px;
|
||||
margin: 153px 0px 3px 15px;
|
||||
margin: 13px 0 3px 15px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.album .overlay a,
|
||||
.photo .overlay a {
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.album .overlay a {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.photo .overlay a {
|
||||
margin: 155px 0px 5px 15px;
|
||||
}
|
||||
.photo .overlay a span {
|
||||
margin: 0px 5px 0px 0px;
|
||||
margin: 155px 0 5px 15px;
|
||||
|
||||
span { margin: 0 5px 0 0; }
|
||||
}
|
||||
|
||||
/* Badges ------------------------------------------------*/
|
||||
@ -138,30 +153,18 @@
|
||||
margin-top: -1px;
|
||||
margin-left: 12px;
|
||||
padding: 12px 7px 3px 7px;
|
||||
box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
|
||||
border-radius: 0px 0px 3px 3px;
|
||||
background: linear-gradient(to bottom, #d64b4b 0%, #ab2c2c 100%);
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, .8);
|
||||
border-radius: 0 0 3px 3px;
|
||||
border: 1px solid #fff;
|
||||
border-top: none;
|
||||
color: #fff;
|
||||
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;
|
||||
}
|
||||
.album .badge.icon-star,
|
||||
.photo .badge.icon-star {
|
||||
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: "";
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin-top: -12px;
|
||||
margin-left: -26px;
|
||||
@ -170,32 +173,35 @@
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
|
||||
opacity: .4;
|
||||
}
|
||||
.album .badge.icon-star::after,
|
||||
.photo .badge.icon-star::after {
|
||||
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) {
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-left: 57px;
|
||||
}
|
||||
.album .badge.red,
|
||||
.photo .badge.red {
|
||||
background: linear-gradient(to bottom, #d64b4b 0%, #ab2c2c 100%);
|
||||
}
|
||||
.album .badge.blue,
|
||||
.photo .badge.blue {
|
||||
background: linear-gradient(to bottom, #347cd6 0%, #2945ab 100%);
|
||||
|
||||
.album .badge.icon-star,
|
||||
.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 ------------------------------------------------*/
|
||||
@ -204,20 +210,22 @@
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
opacity: 0;
|
||||
border-top: 1px solid #2E2E2E;
|
||||
box-shadow: 0px -1px 0px #151515;
|
||||
}
|
||||
.divider:first-child {
|
||||
margin-top: 0px;
|
||||
border-top: 1px solid rgba(255, 255, 255, .03);
|
||||
box-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
.divider h1 {
|
||||
|
||||
h1 {
|
||||
float: left;
|
||||
margin: 20px 0px 0px 30px;
|
||||
margin: 20px 0 0 30px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
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 ------------------------------------------------*/
|
||||
@ -233,11 +241,13 @@
|
||||
color: rgba(20, 20, 20, 1);
|
||||
text-shadow: 0px 1px 0px rgba(255, 255, 255, .05);
|
||||
text-align: center;
|
||||
}
|
||||
.no_content .icon {
|
||||
|
||||
.icon {
|
||||
font-size: 80px;
|
||||
}
|
||||
.no_content p {
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
/* Context ------------------------------------------------*/
|
||||
.context {
|
||||
|
||||
padding: 5px 0 6px;
|
||||
background: linear-gradient(to bottom, #444 0%, #2f2f2f 100%);
|
||||
border: 1px solid rgba(0, 0, 0, .5);
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
*/
|
||||
|
||||
header {
|
||||
|
||||
position: fixed;
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
@ -10,79 +11,86 @@ header {
|
||||
border-bottom: 1px solid #161616;
|
||||
z-index: 1;
|
||||
transition: transform .3s ease-out;
|
||||
}
|
||||
|
||||
/* Modes ------------------------------------------------*/
|
||||
header.hidden {
|
||||
&.hidden {
|
||||
transform: translateY(-60px);
|
||||
}
|
||||
header.loading {
|
||||
|
||||
&.loading {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
header.error {
|
||||
|
||||
&.error {
|
||||
transform: translateY(40px);
|
||||
}
|
||||
header.view.error {
|
||||
background-color: rgba(10,10,10,.99);
|
||||
}
|
||||
header.view {
|
||||
|
||||
&.view {
|
||||
background: none;
|
||||
border-bottom: none;
|
||||
|
||||
&.error {
|
||||
background-color: rgba(10, 10, 10, .99);
|
||||
}
|
||||
header.view .button,
|
||||
header.view #title,
|
||||
header.view .tools {
|
||||
|
||||
.button,
|
||||
#title,
|
||||
.tools {
|
||||
text-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Title ------------------------------------------------*/
|
||||
header #title {
|
||||
#title {
|
||||
position: absolute;
|
||||
margin: 0px 30%;
|
||||
margin: 0 30%;
|
||||
width: 40%;
|
||||
padding: 15px 0px;
|
||||
padding: 15px 0;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-shadow: 0px -1px 0px #222;
|
||||
}
|
||||
header #title.editable {
|
||||
cursor: pointer;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
|
||||
|
||||
&.editable { cursor: pointer; }
|
||||
}
|
||||
|
||||
/* Button ------------------------------------------------*/
|
||||
header .button {
|
||||
.button {
|
||||
color: #888;
|
||||
font-family: 'FontAwesome';
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
text-decoration: none !important;
|
||||
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;
|
||||
position: absolute;
|
||||
padding: 16px 10px 8px 18px;
|
||||
}
|
||||
header .button.right {
|
||||
|
||||
&.right {
|
||||
float: right;
|
||||
position: relative;
|
||||
padding: 16px 19px 13px 11px;
|
||||
}
|
||||
header .button:hover {
|
||||
color: #fff;
|
||||
}
|
||||
header #tools_albums,
|
||||
header #tools_album,
|
||||
header #tools_photo,
|
||||
header #button_signin {
|
||||
|
||||
#tools_albums,
|
||||
#tools_album,
|
||||
#tools_photo,
|
||||
#button_signin {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Button Divider ------------------------------------------------*/
|
||||
header .button_divider {
|
||||
.button_divider {
|
||||
float: right;
|
||||
position: relative;
|
||||
width: 14px;
|
||||
@ -90,30 +98,26 @@ header {
|
||||
}
|
||||
|
||||
/* Search ------------------------------------------------*/
|
||||
header #search {
|
||||
#search {
|
||||
float: right;
|
||||
width: 80px;
|
||||
margin: 12px 12px 0px 0px;
|
||||
margin: 12px 12px 0 0;
|
||||
padding: 5px 12px 6px 12px;
|
||||
background-color: #383838;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border: 1px solid #131313;
|
||||
box-shadow: 0px 1px 0px rgba(255,255,255,.1);
|
||||
border: 1px solid rgba(0, 0, 0, .6);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
|
||||
outline: none;
|
||||
border-radius: 50px;
|
||||
opacity: .6;
|
||||
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 {
|
||||
width: 140px;
|
||||
}
|
||||
header #search:focus ~ #clearSearch {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
header #clearSearch {
|
||||
#clearSearch {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 81px;
|
||||
@ -121,46 +125,43 @@ header {
|
||||
font-size: 20px;
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease-out;
|
||||
}
|
||||
|
||||
header #clearSearch:hover {
|
||||
opacity: 1;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Tools ------------------------------------------------*/
|
||||
header .tools:first-of-type {
|
||||
margin-right: 6px;
|
||||
}
|
||||
header .tools {
|
||||
.tools {
|
||||
float: right;
|
||||
padding: 14px 8px;
|
||||
color: #888;
|
||||
font-size: 21px;
|
||||
text-shadow: 0px -1px 0px #222;
|
||||
text-shadow: 0 -1px 0 #222;
|
||||
cursor: pointer;
|
||||
}
|
||||
header .tools:hover a {
|
||||
color: #fff;
|
||||
}
|
||||
header .tools .icon-star {
|
||||
color: #f0ef77;
|
||||
}
|
||||
header .tools .icon-share.active {
|
||||
color: #ff9737;
|
||||
|
||||
&:first-of-type { margin-right: 6px; }
|
||||
|
||||
&:hover a { color: #fff; }
|
||||
|
||||
.icon-star { color: #f0ef77; }
|
||||
|
||||
.icon-share.active { color: #ff9737; }
|
||||
}
|
||||
|
||||
/* Hosted with Lychee ------------------------------------------------*/
|
||||
header #hostedwith {
|
||||
#hostedwith {
|
||||
float: right;
|
||||
padding: 5px 10px;
|
||||
margin: 13px 9px;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
text-shadow: 0px -1px 0px #222;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
header #hostedwith:hover {
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -6,21 +6,17 @@
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(10, 10, 10, .98);
|
||||
transition: background-color .3s;
|
||||
}
|
||||
|
||||
/* Modes ------------------------------------------------*/
|
||||
#imageview.view {
|
||||
background-color: inherit;
|
||||
}
|
||||
#imageview.full {
|
||||
background-color: rgba(0,0,0,1);
|
||||
}
|
||||
&.view { background-color: inherit; }
|
||||
|
||||
&.full { background-color: rgba(0, 0, 0, 1); }
|
||||
|
||||
/* ImageView ------------------------------------------------*/
|
||||
#imageview #image {
|
||||
#image {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 30px;
|
||||
@ -29,56 +25,56 @@
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
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-duration: .3s;
|
||||
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
||||
}
|
||||
#imageview #image.small {
|
||||
animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
|
||||
|
||||
&.small {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
}
|
||||
#imageview #image.full {
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
|
||||
&.full {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Previous/Next Buttons ------------------------------------------------*/
|
||||
#imageview .arrow_wrapper {
|
||||
.arrow_wrapper {
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
height: calc(100% - 60px);
|
||||
top: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
#imageview .arrow_wrapper.previous {
|
||||
left: 0;
|
||||
}
|
||||
#imageview .arrow_wrapper.next {
|
||||
right: 0;
|
||||
}
|
||||
#imageview .arrow_wrapper a {
|
||||
|
||||
&.previous { left: 0; }
|
||||
|
||||
&.next { right: 0; }
|
||||
|
||||
a#previous { left: 20px; }
|
||||
|
||||
a#next { right: 20px; }
|
||||
|
||||
a {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
color: #fff;
|
||||
font-size: 50px;
|
||||
text-shadow: 0px 1px 2px #000;
|
||||
text-shadow: 0 1px 2px #000;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
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;
|
||||
|
||||
}
|
||||
@ -11,52 +11,54 @@
|
||||
left: 0px;
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
#infobox {
|
||||
|
||||
z-index: 4;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
background-color: rgba(20,20,20,0.98);
|
||||
box-shadow: -1px 0px 2px rgba(0,0,0,.8);
|
||||
background-color: rgba(20, 20, 20, .98);
|
||||
box-shadow: -1px 0 2px rgba(0, 0, 0, .8);
|
||||
display: none;
|
||||
transform: translateX(370px);
|
||||
transition: transform .3s cubic-bezier(0.51,.92,.24,1.15);
|
||||
}
|
||||
#infobox.active {
|
||||
transform: translateX(50px);
|
||||
}
|
||||
transition: transform .3s cubic-bezier(.51, .92, .24, 1.15);
|
||||
|
||||
&.active { transform: translateX(50px); }
|
||||
|
||||
/* Misc ------------------------------------------------*/
|
||||
#infobox .wrapper {
|
||||
.wrapper {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
#infobox .edit {
|
||||
|
||||
.edit {
|
||||
display: inline;
|
||||
margin-left: 3px;
|
||||
width: 20px;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#infobox .bumper {
|
||||
|
||||
.bumper {
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* Header ------------------------------------------------*/
|
||||
#infobox .header {
|
||||
.header {
|
||||
float: left;
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to bottom, #2A2A2A, #131313);
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
#infobox .header h1 {
|
||||
|
||||
.header h1 {
|
||||
position: absolute;
|
||||
margin: 15px 30% 15px calc(30% - 25px);
|
||||
width: 40%;
|
||||
@ -64,43 +66,50 @@
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
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;
|
||||
padding: 15px 65px 15px 15px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
#infobox .header a:hover {
|
||||
opacity: 1;
|
||||
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Seperator ------------------------------------------------*/
|
||||
#infobox .separator {
|
||||
.separator {
|
||||
float: left;
|
||||
width: 100%;
|
||||
border-top: 1px solid rgba(255,255,255,.04);
|
||||
box-shadow: 0px -1px 0px #000;
|
||||
border-top: 1px solid rgba(255, 255, 255, .02);
|
||||
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;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, .8);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
|
||||
/* Table ------------------------------------------------*/
|
||||
#infobox table {
|
||||
table {
|
||||
float: left;
|
||||
margin: 10px 0px 15px 20px;
|
||||
margin: 10px 0 15px 20px;
|
||||
}
|
||||
#infobox table tr td {
|
||||
|
||||
table tr td {
|
||||
padding: 5px 0px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
@ -109,52 +118,51 @@
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
#infobox table tr td:first-child {
|
||||
width: 110px;
|
||||
}
|
||||
#infobox table tr td:last-child {
|
||||
padding-right: 10px;
|
||||
|
||||
&:first-child { width: 110px; }
|
||||
|
||||
&:last-child { padding-right: 10px; }
|
||||
}
|
||||
|
||||
/* Tags ------------------------------------------------*/
|
||||
#infobox #tags {
|
||||
#tags {
|
||||
width: calc(100% - 40px);
|
||||
margin: 16px 20px 12px 20px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
}
|
||||
#infobox #tags .empty {
|
||||
|
||||
#tags .empty {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#infobox #tags .edit {
|
||||
#tags .edit {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#infobox #tags .empty .edit {
|
||||
#tags .empty .edit {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#infobox .tag {
|
||||
#tags .tag {
|
||||
float: left;
|
||||
padding: 4px 7px;
|
||||
margin: 0px 6px 8px 0px;
|
||||
margin: 0 6px 8px 0;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
border: 2px solid rgba(255, 255, 255, .3);
|
||||
border-radius: 100px;
|
||||
font-size: 12px;
|
||||
transition: border .3s;
|
||||
|
||||
&:hover { border: 2px solid #aaa; }
|
||||
}
|
||||
#infobox .tag:hover {
|
||||
border: 2px solid #aaa;
|
||||
}
|
||||
#infobox .tag span {
|
||||
|
||||
#tags .tag span {
|
||||
float: right;
|
||||
width: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px 0px -2px 0px;
|
||||
width: 0;
|
||||
padding: 0;
|
||||
margin: 0 0 -2px 0;
|
||||
color: red;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
@ -162,8 +170,11 @@
|
||||
transform: scale(0);
|
||||
transition: width .3s, margin .3s, transform .3s;
|
||||
}
|
||||
#infobox .tag:hover span {
|
||||
|
||||
#tags .tag:hover span {
|
||||
width: 10px;
|
||||
margin: 0px 0px -2px 6px;
|
||||
margin: 0 0 -2px 6px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
}
|
||||
@ -3,6 +3,7 @@
|
||||
*/
|
||||
|
||||
#loading {
|
||||
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
@ -14,30 +15,32 @@
|
||||
animation-duration: .3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
/* Modes ------------------------------------------------*/
|
||||
#loading.loading {
|
||||
&.loading {
|
||||
background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
|
||||
z-index: 2;
|
||||
}
|
||||
#loading.error {
|
||||
&.error {
|
||||
background-color: #2f0d0e;
|
||||
background-image: linear-gradient(to right, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Content ------------------------------------------------*/
|
||||
#loading h1 {
|
||||
h1 {
|
||||
margin: 13px 13px 0px 13px;
|
||||
color: #ddd;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0px 1px 0px #000;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
#loading h1 span {
|
||||
|
||||
span {
|
||||
margin-left: 10px;
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -2,12 +2,20 @@
|
||||
* @copyright 2014 by Tobias Reich
|
||||
*/
|
||||
|
||||
@import "reset";
|
||||
@import 'reset';
|
||||
|
||||
* {
|
||||
-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;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #222;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
@ -16,37 +24,33 @@ body {
|
||||
-moz-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
body.view {
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
@import "animations";
|
||||
@import "content";
|
||||
@import "contextmenu";
|
||||
@import "font";
|
||||
@import "header";
|
||||
@import "imageview";
|
||||
@import "infobox";
|
||||
@import "loading";
|
||||
@import "message";
|
||||
@import "misc";
|
||||
@import "multiselect";
|
||||
@import "upload";
|
||||
@import "mediaquery";
|
||||
@import 'animations';
|
||||
@import 'content';
|
||||
@import 'contextmenu';
|
||||
@import 'font';
|
||||
@import 'header';
|
||||
@import 'imageview';
|
||||
@import 'infobox';
|
||||
@import 'loading';
|
||||
@import 'message';
|
||||
@import 'multiselect';
|
||||
@import 'upload';
|
||||
@import 'mediaquery';
|
||||
Loading…
Reference in New Issue
Block a user