Alex/flox
1
0
Fork 0
mirror of https://github.com/devfake/flox.git synced 2024-11-15 06:32:34 +01:00
Code Issues Releases Wiki Activity

add light theme

Browse Source
This commit is contained in:
devfake 2015-07-28 12:07:38 +02:00
parent 3eacccc16e
commit 241ca81c90
7 changed files with 52 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -28,12 +28,16 @@ The rating based on an 5-Point system.
##### Client / Public ##### Client / Public
* Open the `public/assets/js/config.js` file and modify them. The `uri` is needed for the react-router. If your app lives in the root folder, change it to `/`. The rest should be clear. * Open the `/public/assets/js/config.js` file and modify them. The `uri` is needed for the react-router. If your app lives in the root folder, change it to `/`. The rest should be clear.
**Only for development:** **Only for development:**
* Run `npm install` in your `client` folder. * Run `npm install` in your `client` folder.
* Run `gulp watch` or `gulp watch --production` and make your work. * Run `gulp watch` or `gulp watch --production` and make your work.
### Misc
There is a light theme option: Add `light-theme` class to `body` in `/client/views/app.blade.php`.
### Todo ### Todo
* Fix load icon jerk. * Fix load icon jerk.
@ -42,6 +46,5 @@ The rating based on an 5-Point system.
* Detail page for items (rather than direct to youtube). * Detail page for items (rather than direct to youtube).
* Easy installer. * Easy installer.
* Rewrite Server API. * Rewrite Server API.
* Light Theme.
* Modify and add own categorys. * Modify and add own categorys.
* For series and animes a list of episodes. * For series and animes a list of episodes.

4
client/assets/sass/_base.scss
View File

@ -24,6 +24,10 @@ body {
overflow: hidden; overflow: hidden;
} }
.light-theme {
background: #fff;
}
::-moz-selection { ::-moz-selection {
background: rgba(#474747, .99); background: rgba(#474747, .99);
color: #fff; color: #fff;

25
client/assets/sass/_content.scss
View File

@ -14,6 +14,10 @@
&:nth-child(2) { &:nth-child(2) {
background: #242424; background: #242424;
.light-theme & {
background: #e9e9e9;
}
} }
} }
@ -21,6 +25,10 @@
font-size: 22px; font-size: 22px;
color: #555; color: #555;
.light-theme & {
color: $dark;
}
&:hover, &:hover,
&:hover { &:hover {
background: $main; background: $main;
@ -37,6 +45,10 @@
margin: 0 0 0 20px; margin: 0 0 0 20px;
opacity: .8; opacity: .8;
.light-theme & {
opacity: 1;
}
&:active { &:active {
opacity: .6; opacity: .6;
} }
@ -125,9 +137,14 @@
position: relative; position: relative;
top: 0; top: 0;
opacity: 1; opacity: 1;
box-shadow: 0 10px 12px 5px rgba(0,0,0,.4);
transition: top .4s ease-in-out 0s, opacity .4s ease-in-out 0s; transition: top .4s ease-in-out 0s, opacity .4s ease-in-out 0s;
.light-theme & {
box-shadow: 0 10px 12px 0 rgba(0,0,0,.3);
}
.loading & { .loading & {
top: -5px; top: -5px;
opacity: 0; opacity: 0;
@ -162,6 +179,10 @@
clear: both; clear: both;
color: #555; color: #555;
font-size: 15px; font-size: 15px;
.light-theme & {
color: #909090;
}
} }
.item-title { .item-title {
@ -175,6 +196,10 @@
white-space: nowrap; white-space: nowrap;
max-width: 100%; max-width: 100%;
.light-theme & {
color: $dark;
}
&:hover, &:hover,
&:active { &:active {
background: $main; background: $main;

12
client/assets/sass/_footer.scss
View File

@ -10,6 +10,10 @@
a:active { a:active {
opacity: .5; opacity: .5;
} }
.light-theme & {
background: #cdcdcd;
}
} }
.attribution { .attribution {
@ -20,8 +24,16 @@
.icon-tmdb { .icon-tmdb {
float: left; float: left;
margin: 3px 10px 0 0; margin: 3px 10px 0 0;
.light-theme & {
opacity: .6;
}
} }
.icon-github { .icon-github {
float: right; float: right;
.light-theme & {
opacity: .6;
}
} }

4
client/assets/sass/_modal.scss
View File

@ -9,6 +9,10 @@
opacity: 1; opacity: 1;
transition: opacity .1s ease-in-out 0s; transition: opacity .1s ease-in-out 0s;
.light-theme & {
background: rgba(#fff,.98);
}
.modal-active & { .modal-active & {
overflow-y: scroll; overflow-y: scroll;
} }

2
client/views/app.blade.php
View File

@ -9,7 +9,7 @@
<link href="{{ url('assets/css/app.css') }}" rel="stylesheet"> <link href="{{ url('assets/css/app.css') }}" rel="stylesheet">
</head> </head>
<body> <body class="light-theme">
<div class="flox"></div> <div class="flox"></div>

2
public/assets/css/app.css
View File

File diff suppressed because one or more lines are too long