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 {
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;

2
src/styles/_contextmenu.scss
View File

@ -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 {

2
src/styles/_header.scss
View File

@ -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; }
}

1
src/styles/_imageview.scss
View File

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

6
src/styles/_infobox.scss
View File

@ -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);
}
}

238
src/styles/_message.scss
View File

@ -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;
}
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); }
}
}

80
src/styles/_upload.scss
View File

@ -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;
}
}
}
}