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-09 23:25:30 +01:00
parent 2e1632a208
commit 536244c7a4
8 changed files with 167 additions and 173 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.

11
src/styles/_content.scss
View File

@ -100,14 +100,13 @@
.photo .overlay { .photo .overlay {
position: absolute; position: absolute;
width: 200px; width: 200px;
height: 60px; height: 200px;
margin: 142px 2px 0; 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%); 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 img[data-type^='nonretina'] + .overlay { .album img[data-type^='nonretina'] + .overlay {
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0.2);
} }
.photo .overlay { .photo .overlay {
@ -123,7 +122,7 @@
.photo .overlay h1 { .photo .overlay h1 {
min-height: 19px; min-height: 19px;
width: 185px; width: 185px;
margin: 13px 0 3px 15px; margin: 152px 0 3px 15px;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;

2
src/styles/_contextmenu.scss
View File

@ -10,7 +10,7 @@
border: 1px solid rgba(0, 0, 0, .5); border: 1px solid rgba(0, 0, 0, .5);
border-bottom: 1px solid rgba(0, 0, 0, .6); border-bottom: 1px solid rgba(0, 0, 0, .6);
border-radius: 5px; 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 ------------------------------------------------*/ /* Item ------------------------------------------------*/
tr { tr {

2
src/styles/_header.scss
View File

@ -50,7 +50,7 @@ header {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-align: center; 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; } &.editable { cursor: pointer; }
} }

1
src/styles/_imageview.scss
View File

@ -3,6 +3,7 @@
*/ */
#imageview { #imageview {
position: fixed; position: fixed;
display: none; display: none;
width: 100%; width: 100%;

6
src/styles/_infobox.scss
View File

@ -66,7 +66,7 @@
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-align: center; 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 { .header a {
@ -75,7 +75,7 @@
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
font-weight: bold; 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; opacity: .5;
cursor: pointer; cursor: pointer;
@ -99,7 +99,7 @@
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
} }
} }

238
src/styles/_message.scss
View File

@ -6,203 +6,203 @@
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0px; top: 0;
left: 0px; left: 0;
background-color: rgba(0,0,0,.85); background-color: rgba(0, 0, 0, .85);
z-index: 1000; z-index: 1000;
} }
.message { .message {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 500px; width: 500px;
margin-left: -250px; margin-left: -250px;
margin-top: -95px; margin-top: -95px;
background-color: #444;
background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45)); background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
border-radius: 5px; 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 */
animation-name: moveUp; animation-name: moveUp;
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);
}
/* Header ------------------------------------------------*/ /* Header ------------------------------------------------*/
.message h1 { h1 {
float: left; float: left;
width: 100%; width: 100%;
padding: 12px 0px; padding: 12px 0;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: bold; 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; text-align: center;
} }
.message .close {
.close {
position: absolute; position: absolute;
top: 0px; top: 0;
right: 0px; right: 0;
padding: 12px 14px 6px 7px; padding: 12px 14px 6px 7px;
color: #aaa; color: #aaa;
font-size: 20px; 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; cursor: pointer;
}
.message .close:hover { &:hover { color: #fff; }
color: #fff;
} }
/* Text ------------------------------------------------*/ /* Text ------------------------------------------------*/
.message p { p {
float: left; float: left;
width: 90%; width: 90%;
margin-top: 1px; margin-top: 1px;
padding: 12px 5% 15px 5%; padding: 12px 5% 15px 5%;
color: #eee; color: #eee;
font-size: 14px; 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; line-height: 20px;
}
.message p b { b {
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
} }
.message p a {
color: #eee; a {
text-decoration: none; color: #eee;
border-bottom: 1px dashed #888; text-decoration: none;
border-bottom: 1px dashed #888;
}
} }
/* Button ------------------------------------------------*/ /* Button ------------------------------------------------*/
.message .button { .button {
float: right; float: right;
margin: 15px 15px 15px 0px; margin: 15px 15px 15px 0;
padding: 7px 10px 8px 10px; padding: 7px 10px 8px 10px;
color: #ccc; color: #ccc;
font-size: 14px; font-size: 14px;
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, .3);
border-radius: 5px; border-radius: 5px;
border: 1px solid rgba(0,0,0,.4); 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; cursor: pointer;
}
.message .button:first-of-type { &:first-of-type { margin: 15px 5% 18px 0; }
margin: 15px 5% 18px 0px !important;
} &.active {
.message .button.active { color: #fff;
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;
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 { &:hover { background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57)); }
background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57));
} &:active,
.message .button:active, &.pressed { background-image: linear-gradient(to bottom, rgb(57, 57, 57), rgb(60, 60, 60)); }
.message .button.pressed {
background-color: #393939;
background-image: linear-gradient(to bottom, rgb(57, 57, 57), rgb(60, 60, 60));
} }
/* Sign in ------------------------------------------------*/ /* Input ------------------------------------------------*/
.sign_in { input.text {
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 {
float: left; float: left;
width: calc(100% - 10px); width: calc(100% - 10px);
padding: 17px 5px 9px 5px; padding: 17px 5px 9px 5px;
margin-top: 10px; margin-top: 10px;
background-color: transparent; background-color: transparent;
color: #fff; color: #fff;
text-shadow: 0px -1px 0px #222; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
border: none; 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-bottom: 1px solid #222;
border-radius: 0px; border-radius: 0px;
outline: none; outline: none;
} }
.message input.less {
margin-bottom: -10px; input.less { margin-bottom: -10px; }
}
.message input.more { input.more { margin-bottom: 30px; }
margin-bottom: 30px;
} .copylink { margin-bottom: 20px; }
.message .copylink {
margin-bottom: 20px;
}
/* Radio Buttons ------------------------------------------------*/ /* Radio Buttons ------------------------------------------------*/
.message .choice { .choice {
float: left; float: left;
margin: 12px 5%; margin: 12px 5%;
width: 90%; width: 90%;
color: #fff; color: #fff;
}
.message .choice input { input { float: left; }
h2 {
float: left; float: left;
} margin: 1px 0 0 8px;
.message .choice h2 {
float: left;
margin: 1px 0px 0px 8px;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
} }
.message .choice p {
p {
margin-top: 2px; margin-top: 2px;
padding: 0px 5% 0px 25px; padding: 0 5% 0 25px;
color: #aaa; color: #aaa;
font-size: 13px; font-size: 13px;
} }
.message .choice p input { p input {
width: 100%; width: 100%;
padding: 10px 1px 9px; padding: 10px 1px 9px;
margin-top: 10px; 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); }
}
}

80
src/styles/_upload.scss
View File

@ -5,16 +5,19 @@
#upload { #upload {
display: none; display: none;
} }
.upload_overlay { .upload_overlay {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0px; top: 0;
left: 0px; left: 0;
background-color: rgba(0,0,0,.85); background-color: rgba(0, 0, 0, .85);
z-index: 1000; z-index: 1000;
} }
.upload_message { .upload_message {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 450px; width: 450px;
@ -22,40 +25,39 @@
margin-top: -170px; margin-top: -170px;
background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45)); background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
border-radius: 5px; 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-name: moveUp;
animation-duration: .3s; animation-duration: .3s;
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
}
/* Header ------------------------------------------------*/ /* Header ------------------------------------------------*/
.upload_message h1 { h1 {
float: left; float: left;
width: 100%; width: 100%;
padding: 12px 0px; padding: 12px 0;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-shadow: 0px -1px 0px #222; text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
text-align: center; text-align: center;
} }
.upload_message .close {
.close {
display: none; display: none;
position: absolute; position: absolute;
top: 0px; top: 0;
right: 0px; right: 0;
padding: 11px 14px 6px 7px; padding: 11px 14px 6px 7px;
color: #aaa; color: #aaa;
font-size: 20px; font-size: 20px;
text-shadow: 0px -1px 0px #222; text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
cursor: pointer; cursor: pointer;
}
.upload_message .close:hover { &:hover { color: #fff; }
color: #fff;
} }
/* Rows ------------------------------------------------*/ /* Rows ------------------------------------------------*/
.upload_message .rows { .rows {
float: left; float: left;
margin: 3px 8px 8px 8px; margin: 3px 8px 8px 8px;
width: calc(100% - 16px); width: calc(100% - 16px);
@ -64,23 +66,20 @@
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
border-radius: 3px; 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 ------------------------------------------------*/ /* Row ------------------------------------------------*/
.upload_message .rows .row { .rows .row {
float: left; float: left;
display: inline-block; display: inline-block;
padding: 8px 0px; padding: 8px 0;
width: 100%; width: 100%;
background-color: rgba(255, 255, 255, .02); background-color: rgba(255, 255, 255, .02);
}
.upload_message .rows .row:nth-child(2n) { &:nth-child(2n) { background-color: rgba(255, 255, 255, 0); }
background-color: rgba(255, 255, 255, 0);
}
.upload_message .rows .row a.name { a.name {
float: left; float: left;
padding: 5px 10px; padding: 5px 10px;
width: calc(70% - 20px); width: calc(70% - 20px);
@ -90,42 +89,37 @@
overflow: hidden; overflow: hidden;
} }
.upload_message .rows .row a.status { a.status {
float: left; float: left;
padding: 5px 10px; padding: 5px 10px;
width: calc(30% - 20px); width: calc(30% - 20px);
color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .5);
font-size: 14px; font-size: 14px;
text-align: right; text-align: right;
}
.upload_message .rows .row a.status {
animation-name: pulse; animation-name: pulse;
animation-duration: 2s; animation-duration: 2s;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
animation-iteration-count: infinite; 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, p.notice {
.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 {
display: none; display: none;
float: left; float: left;
padding: 2px 10px 5px; padding: 2px 10px 5px;
width: calc(100% - 20px); width: calc(100% - 20px);
color: rgba(255,255,255,.5); color: rgba(255, 255, 255, .5);
font-size: 12px; font-size: 12px;
overflow: hidden; overflow: hidden;
line-height: 16px; line-height: 16px;
} }
}
}