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-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: $timingBounce;
} }
.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: $timingBounce;
} }
.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: $timing;
} }
.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: $timing;
} }
/* moveUp ------------------------------------------------*/ /* moveUp ------------------------------------------------*/
@ -115,7 +115,7 @@
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: 0.3; opacity: .3;
} }
100% { 100% {
opacity: 1; opacity: 1;

28
src/styles/_content.scss
View File

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

22
src/styles/_contextmenu.scss
View File

@ -7,21 +7,21 @@
padding: 5px 0 6px; padding: 5px 0 6px;
background: linear-gradient(to bottom, #333, #252525); background: linear-gradient(to bottom, #333, #252525);
border: 1px solid rgba(0, 0, 0, .7); border: 1px solid black(.7);
border-bottom: 1px solid rgba(0, 0, 0, .8); border-bottom: 1px solid black(.8);
border-radius: 5px; 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 ------------------------------------------------*/ /* Item ------------------------------------------------*/
tr { tr {
margin-bottom: 2px; margin-bottom: 2px;
color: #eee; color: #eee;
font-size: 14px; font-size: 14px;
text-shadow: 0 -1px 0px rgba(0, 0, 0, .1); text-shadow: 0 -1px 0px black(.1);
&.separator { &.separator {
background-color: rgba(0, 0, 0, .2); background: black(.2);
border-bottom: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid white(.06);
} }
} }
@ -32,12 +32,12 @@
border-radius: 0; border-radius: 0;
transition: none; 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 { tr td .albumCover {
border-radius: 2px; border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,.5); box-shadow: 0 0 0 1px black(.5);
position: absolute; position: absolute;
} }
@ -51,10 +51,10 @@
width: 100%; width: 100%;
margin: -2px 0 -1px -2px; margin: -2px 0 -1px -2px;
padding: 5px 7px 6px 7px; padding: 5px 7px 6px 7px;
background-color: #333; background: #333;
color: #fff; color: #fff;
border: 1px solid rgba(0, 0, 0, .4); border: 1px solid black(.4);
box-shadow: 0px 1px 0px rgba(255, 255, 255, .05); box-shadow: 0px 1px 0px white(.05);
outline: none; outline: none;
border-radius: 3px; 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-size: 16px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); text-shadow: 0 -1px 0 black(.2);
z-index: 1; z-index: 1;
.iconic { .iconic {
display: none; display: none;
margin: 0 0 0 10px; margin: 0 0 0 10px;
width: 10px; width: 10px;
fill: rgba(255, 255, 255, .5); fill: white(.5);
filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) ); filter: drop-shadow(0 -1px 0 black(.2));
transition: fill .2s ease; transition: fill .2s ease-out;
} }
&:hover .iconic { fill: rgba(255, 255, 255, 1); } &:hover .iconic { fill: white(1); }
&.editable { cursor: pointer; } &.editable { cursor: pointer; }
@ -83,12 +83,12 @@ header {
&--right { float: right; } &--right { float: right; }
.iconic { .iconic {
fill: rgba(255, 255, 255, .5); fill: white(.5);
filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) ); filter: drop-shadow(0 -1px 0 black(.2));
transition: fill .2s ease; transition: fill .2s ease-out;
} }
&:hover .iconic { fill: rgba(255, 255, 255, 1); } &:hover .iconic { fill: white(1); }
&--star.active .iconic { fill: #f0ef77; } &--star.active .iconic { fill: #f0ef77; }
@ -118,7 +118,7 @@ header {
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 ease-out, width .2s ease-out;
&:focus { width: 140px; } &:focus { width: 140px; }
@ -149,12 +149,12 @@ header {
margin: 13px 9px; margin: 13px 9px;
color: #888; color: #888;
font-size: 13px; font-size: 13px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); text-shadow: 0 -1px 0 black(.2);
border-radius: 100px; border-radius: 100px;
display: none; display: none;
cursor: pointer; 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 ------------------------------------------------*/ /* Modes ------------------------------------------------*/
&.view { background-color: inherit; } &.view { background-color: inherit; }
&.full { background-color: rgba(0, 0, 0, 1); } &.full { background-color: black(1); }
/* ImageView ------------------------------------------------*/ /* ImageView ------------------------------------------------*/
#image { #image {
@ -26,10 +26,10 @@
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(.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-name: zoomIn;
animation-duration: .3s; animation-duration: .3s;
animation-timing-function: cubic-bezier(.51, .92, .24, 1.15); animation-timing-function: $timingBounce;
&.small { &.small {
top: 50%; top: 50%;
@ -68,7 +68,7 @@
// The background-image will be styled dynamically via JS // 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-image: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('');
background-size: 100% 100%; background-size: 100% 100%;
border: 1px solid rgba(255, 255, 255, .8); border: 1px solid white(.8);
cursor: pointer; cursor: pointer;
opacity: .6; opacity: .6;
z-index: 2; z-index: 2;
@ -91,8 +91,8 @@
a:hover { opacity: 1; } a:hover { opacity: 1; }
.iconic { .iconic {
fill: rgba(255, 255, 255, .8); fill: white(.8);
filter: drop-shadow( 0 1px 0 rgba(0, 0, 0, .4) ); filter: drop-shadow(0 1px 0 black(.4));
} }
} }

22
src/styles/_infobox.scss
View File

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

6
src/styles/_loading.scss
View File

@ -9,7 +9,7 @@
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 black(.3);
display: none; display: none;
animation-name: moveBackground; animation-name: moveBackground;
animation-duration: .3s; animation-duration: .3s;
@ -29,11 +29,11 @@
/* Content ------------------------------------------------*/ /* Content ------------------------------------------------*/
h1 { h1 {
margin: 13px 13px 0px 13px; margin: 13px 13px 0 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: 0 1px 0 black(1);
text-transform: capitalize; text-transform: capitalize;
span { span {

20
src/styles/_mediaquery.scss
View File

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

36
src/styles/_message.scss
View File

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

22
src/styles/_upload.scss
View File

@ -12,7 +12,7 @@
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
background-color: rgba(0, 0, 0, .85); background-color: black(.85);
z-index: 1000; z-index: 1000;
} }
@ -25,10 +25,10 @@
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: 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-name: moveUp;
animation-duration: .3s; animation-duration: .3s;
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); animation-timing-function: $timingBounce;
/* Header ------------------------------------------------*/ /* Header ------------------------------------------------*/
h1 { h1 {
@ -38,7 +38,7 @@
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: 0px -1px 0px black(.3);
text-align: center; text-align: center;
} }
@ -50,7 +50,7 @@
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 rgba(0, 0, 0, .3); text-shadow: 0px -1px 0px black(.3);
cursor: pointer; cursor: pointer;
&:hover { color: #fff; } &:hover { color: #fff; }
@ -62,11 +62,11 @@
margin: 3px 8px 8px 8px; margin: 3px 8px 8px 8px;
width: calc(100% - 16px); width: calc(100% - 16px);
height: 300px; height: 300px;
background-color: rgba(0, 0, 0, .5); background-color: black(.5);
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 0 3px rgba(0, 0, 0, .8); box-shadow: inset 0 0 3px black(.8);
} }
/* Row ------------------------------------------------*/ /* Row ------------------------------------------------*/
@ -75,9 +75,9 @@
display: inline-block; display: inline-block;
padding: 8px 0; padding: 8px 0;
width: 100%; 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 { a.name {
float: left; float: left;
@ -93,7 +93,7 @@
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: white(.5);
font-size: 14px; font-size: 14px;
text-align: right; text-align: right;
@ -115,7 +115,7 @@
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: white(.5);
font-size: 12px; font-size: 12px;
overflow: hidden; overflow: hidden;
line-height: 16px; line-height: 16px;

1
src/styles/main.scss
View File

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