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

Style adjustments

Browse Source 
- black() and white() functions
- Added vars
This commit is contained in:
Tobias Reich 2015-01-04 20:27:07 +01:00
parent 3465c96180
commit 03e7113bb9
13 changed files with 123 additions and 101 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.

10
src/styles/_animations.scss
View File

@ -7,28 +7,28 @@
animation-name: fadeIn;
animation-duration: .3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
animation-timing-function: $timingBounce;
}
.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: $timingBounce;
}
.contentZoomIn {
animation-name: zoomIn;
animation-duration: .2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1);
animation-timing-function: $timing;
}
.contentZoomOut {
animation-name: zoomOut;
animation-duration: .2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1);
animation-timing-function: $timing;
}
/* moveUp ------------------------------------------------*/
@ -115,7 +115,7 @@
opacity: 1;
}
50% {
opacity: 0.3;
opacity: .3;
}
100% {
opacity: 1;

28
src/styles/_content.scss
View File

@ -14,7 +14,7 @@
position: absolute;
width: 100%;
height: 1px;
border-top: 1px solid rgba(255, 255, 255, .02);
border-top: 1px solid white(.02);
}
}
@ -33,14 +33,14 @@
width: 200px;
height: 200px;
background-color: #222;
box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
border: 1px solid rgba(255, 255, 255, .5);
box-shadow: 0 2px 5px black(.5);
border: 1px solid white(.5);
transition: opacity .3s ease-out, transform .3s ease-out, border-color .3s ease-out;
}
&:hover img,
&.active img {
border-color: #2293EC;
border-color: $colorBlue;
}
}
@ -72,7 +72,7 @@
position: absolute;
margin: 0 1px;
width: 200px;
background: rgba(0, 0, 0, .6);
background: black(.6);
bottom: 1px;
}
@ -117,14 +117,14 @@
position: absolute;
margin: -1px 0 0 12px;
padding: 12px 7px 3px 7px;
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
background: #d02a32;
box-shadow: 0 0 2px black(.6);
background: $colorRed;
border-radius: 0 0 5px 5px;
border: 1px solid #fff;
border-top: none;
color: #fff;
font-size: 24px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
text-shadow: 0 1px 0 black(.4);
opacity: .9;
&:nth-child(2n) { margin-left: 57px; }
@ -132,7 +132,7 @@
.iconic {
fill: #fff;
width: 21px;
filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .1) );
filter: drop-shadow( 0 -1px 0 black(.1) );
}
}
@ -143,8 +143,8 @@
padding: 10px 0 0;
width: 100%;
opacity: 0;
border-top: 1px solid rgba(255, 255, 255, .02);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .2);
border-top: 1px solid white(.02);
box-shadow: 0 -1px 0 0 black(.2);
&:first-child {
margin-top: 10px;
@ -155,10 +155,10 @@
h1 {
float: left;
margin: 0 0 0 30px;
color: rgba(255, 255, 255, .6);
color: white(.6);
font-size: 14px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
text-shadow: 0 -1px 0 black(.1);
}
}
@ -173,7 +173,7 @@
margin-left: -90px;
padding-top: 20px;
color: rgba(15, 15, 15, 1);
text-shadow: 0 1px 0 rgba(255, 255, 255, .01);
text-shadow: 0 1px 0 white(.01);
text-align: center;
.icon { font-size: 80px; }

22
src/styles/_contextmenu.scss
View File

@ -7,21 +7,21 @@
padding: 5px 0 6px;
background: linear-gradient(to bottom, #333, #252525);
border: 1px solid rgba(0, 0, 0, .7);
border-bottom: 1px solid rgba(0, 0, 0, .8);
border: 1px solid black(.7);
border-bottom: 1px solid black(.8);
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05);
/* Item ------------------------------------------------*/
tr {
margin-bottom: 2px;
color: #eee;
font-size: 14px;
text-shadow: 0 -1px 0px rgba(0, 0, 0, .1);
text-shadow: 0 -1px 0px black(.1);
&.separator {
background-color: rgba(0, 0, 0, .2);
border-bottom: 1px solid rgba(255, 255, 255, .06);
background: black(.2);
border-bottom: 1px solid white(.06);
}
}
@ -32,12 +32,12 @@
border-radius: 0;
transition: none;
&:hover { background: linear-gradient(to bottom, #2293EC, darken(#2293EC, 5%)); }
&:hover { background: linear-gradient(to bottom, $colorBlue, darken($colorBlue, 5%)); }
}
tr td .albumCover {
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,.5);
box-shadow: 0 0 0 1px black(.5);
position: absolute;
}
@ -51,10 +51,10 @@
width: 100%;
margin: -2px 0 -1px -2px;
padding: 5px 7px 6px 7px;
background-color: #333;
background: #333;
color: #fff;
border: 1px solid rgba(0, 0, 0, .4);
box-shadow: 0px 1px 0px rgba(255, 255, 255, .05);
border: 1px solid black(.4);
box-shadow: 0px 1px 0px white(.05);
outline: none;
border-radius: 3px;
}

21
src/styles/_etc.scss Normal file
View File

@ -0,0 +1,21 @@
/**
* @copyright 2014 by Tobias Reich
*/
/* Functions ------------------------------------------------*/
@function black($opacity) {
@return rgba(0, 0, 0, $opacity);
}
@function white($opacity) {
@return rgba(255, 255, 255, $opacity);
}
/* Vars ------------------------------------------------*/
// Colors
$colorBlue: #2293EC;
$colorRed: #d02a32;
// Animations
$timing: cubic-bezier(.51, .92, .24, 1);
$timingBounce: cubic-bezier(.51, .92, .24, 1.15);

24
src/styles/_header.scss
View File

@ -42,19 +42,19 @@ header {
font-size: 16px;
font-weight: bold;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
text-shadow: 0 -1px 0 black(.2);
z-index: 1;
.iconic {
display: none;
margin: 0 0 0 10px;
width: 10px;
fill: rgba(255, 255, 255, .5);
filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
transition: fill .2s ease;
fill: white(.5);
filter: drop-shadow(0 -1px 0 black(.2));
transition: fill .2s ease-out;
}
&:hover .iconic { fill: rgba(255, 255, 255, 1); }
&:hover .iconic { fill: white(1); }
&.editable { cursor: pointer; }
@ -83,12 +83,12 @@ header {
&--right { float: right; }
.iconic {
fill: rgba(255, 255, 255, .5);
filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
transition: fill .2s ease;
fill: white(.5);
filter: drop-shadow(0 -1px 0 black(.2));
transition: fill .2s ease-out;
}
&:hover .iconic { fill: rgba(255, 255, 255, 1); }
&:hover .iconic { fill: white(1); }
&--star.active .iconic { fill: #f0ef77; }
@ -118,7 +118,7 @@ header {
outline: none;
border-radius: 50px;
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 ease-out, width .2s ease-out;
&:focus { width: 140px; }
@ -149,12 +149,12 @@ header {
margin: 13px 9px;
color: #888;
font-size: 13px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
text-shadow: 0 -1px 0 black(.2);
border-radius: 100px;
display: none;
cursor: pointer;
&:hover { background-color: rgba(0, 0, 0, .3); }
&:hover { background-color: black(.3); }
}
}

12
src/styles/_imageview.scss
View File

@ -14,7 +14,7 @@
/* Modes ------------------------------------------------*/
&.view { background-color: inherit; }
&.full { background-color: rgba(0, 0, 0, 1); }
&.full { background-color: black(1); }
/* ImageView ------------------------------------------------*/
#image {
@ -26,10 +26,10 @@
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(.51, .92, .24, 1.15);
transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
animation-name: zoomIn;
animation-duration: .3s;
animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
animation-timing-function: $timingBounce;
&.small {
top: 50%;
@ -68,7 +68,7 @@
// The background-image will be styled dynamically via JS
// background-image: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('');
background-size: 100% 100%;
border: 1px solid rgba(255, 255, 255, .8);
border: 1px solid white(.8);
cursor: pointer;
opacity: .6;
z-index: 2;
@ -91,8 +91,8 @@
a:hover { opacity: 1; }
.iconic {
fill: rgba(255, 255, 255, .8);
filter: drop-shadow( 0 1px 0 rgba(0, 0, 0, .4) );
fill: white(.8);
filter: drop-shadow(0 1px 0 black(.4));
}
}

22
src/styles/_infobox.scss
View File

@ -9,7 +9,7 @@
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .8);
background-color: black(.8);
}
#infobox {
@ -20,9 +20,9 @@
width: 350px;
height: 100%;
background-color: rgba(30, 30, 30, .98);
box-shadow: -1px 0 2px rgba(0, 0, 0, .7);
box-shadow: -1px 0 2px black(.7);
transform: translateX(0);
transition: transform .3s cubic-bezier(.51, .92, .24, 1.15);
transition: transform .3s $timingBounce;
&.active { transform: translateX(-92%); }
@ -66,7 +66,7 @@
font-size: 16px;
font-weight: bold;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
text-shadow: 0 -1px 0 black(.2);
}
.header .close {
@ -77,8 +77,8 @@
.iconic {
fill: #888;
filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
transition: fill .2s ease;
filter: drop-shadow(0 -1px 0 black(.2));
transition: fill .2s ease-out;
}
&:hover .iconic { fill: #fff; }
@ -90,12 +90,12 @@
float: left;
padding: 12px 0 8px;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, .02);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .2);
border-top: 1px solid white(.02);
box-shadow: 0 -1px 0 0 black(.2);
h1 {
margin: 0 0 0 20px;
color: rgba(255, 255, 255, .6);
color: white(.6);
font-size: 14px;
font-weight: bold;
}
@ -147,12 +147,12 @@
float: left;
padding: 6px 10px;
margin: 0 6px 8px 0;
background-color: rgba(0, 0, 0, .5);
background-color: black(.5);
border-radius: 100px;
font-size: 12px;
transition: background-color .3s;
&:hover { background-color: rgba(0, 0, 0, .3); }
&:hover { background-color: black(.3); }
}
#tags .tag span {

6
src/styles/_loading.scss
View File

@ -9,7 +9,7 @@
height: 3px;
background-size: 100px 3px;
background-repeat: repeat-x;
border-bottom: 1px solid rgba(0, 0, 0, .3);
border-bottom: 1px solid black(.3);
display: none;
animation-name: moveBackground;
animation-duration: .3s;
@ -29,11 +29,11 @@
/* Content ------------------------------------------------*/
h1 {
margin: 13px 13px 0px 13px;
margin: 13px 13px 0 13px;
color: #ddd;
font-size: 14px;
font-weight: bold;
text-shadow: 0px 1px 0px #000;
text-shadow: 0 1px 0 black(1);
text-transform: capitalize;
span {

20
src/styles/_mediaquery.scss
View File

@ -5,11 +5,11 @@
@media only screen and (max-width: 900px) {
#title {
margin: 0px 20% !important;
margin: 0 20% !important;
width: 40% !important;
}
#title.view {
margin: 0px 20% !important;
margin: 0 20% !important;
width: 60% !important;
}
#title span {
@ -25,19 +25,19 @@
#title.view {
display: block !important;
width: 70% !important;
margin: 0px 20% 0px 10% !important;
margin: 0 20% 0 10% !important;
}
#button_move {
display: none !important;
}
.center {
top: 0px !important;
left: 0px !important;
top: 0 !important;
left: 0 !important;
}
.album, .photo {
margin: 40px 0px 0px 50px !important;
margin: 40px 0 0 50px !important;
}
#imageview .arrow_wrapper {
@ -48,16 +48,16 @@
position: fixed !important;
width: 100% !important;
height: 100% !important;
margin: 1px 0px 0px 0px !important;
border-radius: 0px !important;
margin: 1px 0 0 0 !important;
border-radius: 0 !important;
/* Animation */
animation: moveUp .3s !important;
}
.upload_message {
margin-top: 0px !important;
margin-left: 0px !important;
margin-top: 0 !important;
margin-left: 0 !important;
width: 100% !important;
}

36
src/styles/_message.scss
View File

@ -8,7 +8,7 @@
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .85);
background-color: black(.85);
z-index: 1000;
}
@ -21,12 +21,12 @@
margin-top: -95px;
background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
border-radius: 5px;
box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
box-shadow: 0 0 5px black(1), inset 0 1px 0 white(.08);
/* Animation */
animation-name: moveUp;
animation-duration: .3s;
animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
animation-timing-function: $timingBounce;
/* Header ------------------------------------------------*/
h1 {
@ -36,7 +36,7 @@
color: #fff;
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
text-shadow: 0 -1px 0 black(.3);
text-align: center;
}
@ -47,10 +47,10 @@
padding: 12px 14px 6px 7px;
color: #aaa;
font-size: 20px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
text-shadow: 0 -1px 0 black(.3);
cursor: pointer;
&:hover { color: #fff; }
&:hover { color: white(1); }
}
/* Text ------------------------------------------------*/
@ -61,12 +61,12 @@
padding: 12px 5% 15px 5%;
color: #eee;
font-size: 14px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
text-shadow: 0 -1px 0 black(.3);
line-height: 20px;
b {
font-weight: bold;
color: #fff;
color: white(1);
}
a {
@ -85,17 +85,17 @@
font-size: 14px;
font-weight: bold;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
text-shadow: 0 -1px 0 black(.3);
border-radius: 5px;
border: 1px solid rgba(0,0,0,.4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .05);
border: 1px solid black(.4);
box-shadow: inset 0 1px 0 white(.08), 0 1px 0 white(.05);
cursor: pointer;
&: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;
box-shadow: inset 0 1px 0 white(.08), 0 1px 0 white(.1), 0 0 4px #005ecc;
}
&:hover { background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57)); }
@ -112,9 +112,9 @@
margin-top: 10px;
background-color: transparent;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
text-shadow: 0 -1px 0 black(.3);
border: none;
box-shadow: 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: 0 1px 0 white(.1);
border-bottom: 1px solid #222;
border-radius: 0px;
outline: none;
@ -141,7 +141,7 @@
color: #fff;
font-size: 14px;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
text-shadow: 0 -1px 0 black(.3);
}
p {
@ -164,7 +164,7 @@
margin-top: 23px;
margin-left: 5%;
color: #888;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
text-shadow: 0 -1px 0 black(.3);
span { display: none; }
@ -182,7 +182,7 @@
padding: 5px 0;
color: #eee;
font-size: 14px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
text-shadow: 0 -1px 0 black(.3);
line-height: 20px;
/* Input ------------------------------------------------*/
@ -196,7 +196,7 @@
text-shadow: 0 -1px 0 #222;
border: none;
border-bottom: 1px solid #222;
box-shadow: 0 1px 0 rgba(255,255,255,.1);
box-shadow: 0 1px 0 white(.1);
border-radius: 0;
outline: none;

22
src/styles/_upload.scss
View File

@ -12,7 +12,7 @@
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .85);
background-color: black(.85);
z-index: 1000;
}
@ -25,10 +25,10 @@
margin-top: -170px;
background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
border-radius: 5px;
box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
box-shadow: 0 0 5px #000, inset 0 1px 0 white(.08);
animation-name: moveUp;
animation-duration: .3s;
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
animation-timing-function: $timingBounce;
/* Header ------------------------------------------------*/
h1 {
@ -38,7 +38,7 @@
color: #fff;
font-size: 16px;
font-weight: bold;
text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
text-shadow: 0px -1px 0px black(.3);
text-align: center;
}
@ -50,7 +50,7 @@
padding: 11px 14px 6px 7px;
color: #aaa;
font-size: 20px;
text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
text-shadow: 0px -1px 0px black(.3);
cursor: pointer;
&:hover { color: #fff; }
@ -62,11 +62,11 @@
margin: 3px 8px 8px 8px;
width: calc(100% - 16px);
height: 300px;
background-color: rgba(0, 0, 0, .5);
background-color: black(.5);
overflow: hidden;
overflow-y: scroll;
border-radius: 3px;
box-shadow: inset 0 0 3px rgba(0, 0, 0, .8);
box-shadow: inset 0 0 3px black(.8);
}
/* Row ------------------------------------------------*/
@ -75,9 +75,9 @@
display: inline-block;
padding: 8px 0;
width: 100%;
background-color: rgba(255, 255, 255, .02);
background-color: white(.02);
&:nth-child(2n) { background-color: rgba(255, 255, 255, 0); }
&:nth-child(2n) { background-color: white(0); }
a.name {
float: left;
@ -93,7 +93,7 @@
float: left;
padding: 5px 10px;
width: calc(30% - 20px);
color: rgba(255, 255, 255, .5);
color: white(.5);
font-size: 14px;
text-align: right;
@ -115,7 +115,7 @@
float: left;
padding: 2px 10px 5px;
width: calc(100% - 20px);
color: rgba(255, 255, 255, .5);
color: white(.5);
font-size: 12px;
overflow: hidden;
line-height: 16px;

1
src/styles/main.scss
View File

@ -2,6 +2,7 @@
* @copyright 2014 by Tobias Reich
*/
@import 'etc';
@import 'reset';
* {