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
* 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:**
* Run `npm install` in your `client` folder.
* 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
* 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).
* Easy installer.
* Rewrite Server API.
* Light Theme.
* Modify and add own categorys.
* For series and animes a list of episodes.

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

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

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

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

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

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

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

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

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

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

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

File diff suppressed because one or more lines are too long