Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Here is some layout changes. #35

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Here is some layout changes. #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c741dd7
Added dark minimal theme. Also changed reddit button embed.
Apr 4, 2013
7506824
Works better with gutter ads
Apr 4, 2013
fbe7a5c
Id works better than url.
Apr 4, 2013
9a369ed
proper resize
Apr 4, 2013
9ff49ba
Added light theme
Apr 4, 2013
810d621
Better focus in light theme
Apr 4, 2013
43d8ef5
minor changes
Apr 4, 2013
8bd8ca9
Nicer next prev buttons, better transition effects.
Apr 4, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
52 changes: 39 additions & 13 deletions css/layout.css
View file
Open in desktop
Expand Up @@ -37,7 +37,7 @@ body {
}

#video-display {
border-radius: 15px;
border-radius: 0px;
-moz-border-radius: 15px;
width: 670px;
min-height: 590px;
Expand Down Expand Up @@ -102,10 +102,10 @@ body {
#video-list img {
min-width: 60px;
height: 60px;
margin: 0 2px;
margin: 0 5px;
vertical-align: middle;
border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 3px;
-moz-border-radius: 3px;
cursor: hand;
cursor: pointer;
}
Expand All @@ -125,7 +125,6 @@ body {
margin-bottom: 2px;
cursor: hand;
cursor: pointer;
border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}

Expand All @@ -140,9 +139,10 @@ body {

#channel-name {
width: 85%;
border-radius: 7px;
border-radius: 3px;
padding: 3px;
text-align: center;
border: none;
}

#header {
Expand All @@ -153,10 +153,20 @@ body {
font-size: small;
}

select{
border: none;
padding: 0;
margin: 2px 0 0 0;
height: 15px;
font-size: 10px;
vertical-align: top;
text-align: center;
}

#options {
font-size: x-small;
position: absolute;
bottom: 0;
bottom: 0px;
right: 15px;
}

Expand All @@ -172,10 +182,11 @@ body {
#css li {
display: inline;
list-style: none;
vertical-align: super;
}

form label {
vertical-align: top;
vertical-align: super;
}

#footer {
Expand All @@ -190,7 +201,6 @@ form label {
margin-top: 15px;
margin-left: 100px;
padding: 10px;
border-radius: 10px;
text-align: center;
}

Expand Down Expand Up @@ -233,14 +243,24 @@ form label {
.nav-button {
display: none;
text-align: center;
margin-bottom: 0.5em;
padding: 6px 16px;
border-radius: 10px;
padding: 0px 2px 7px 2px;
border-radius: 2px;
-moz-border-radius: 10px;
width: 85px;
transition: box-shadow 0.2s, color 0.2s;
-moz-transition: box-shadow 0.2s, color 0.2s;
-webkit-transition: box-shadow 0.2s, color 0.2s;
-o-transition: box-shadow 0.2s, color 0.2s;
}

* {
transition: color 0.5s, background-color 0.2s;
-moz-transition: color 0.5s, background-color 0.2s;
-webkit-transition: color 0.5s, background-color 0.2s;
-o-transition: color 0.5s, background-color 0.2s;
}

a.nav-button:hover {
padding: 5px 15px;
border: 1px solid gray;
text-decoration: none;
}
Expand Down Expand Up @@ -273,6 +293,11 @@ a.nav-button:hover {
float: right;
}

li a {
vertical-align: sub;
}


a {
color: inherit;
cursor: hand;
Expand All @@ -286,3 +311,4 @@ a:link, a:visited, a:active {
a:hover {
text-decoration: underline;
}

100 changes: 75 additions & 25 deletions css/theme_dark.css
View file
Open in desktop
Expand Up @@ -40,11 +40,17 @@ body {
background-color: black;
}

select{
background-color: #000;
color: gray;
}


#video-display {
-moz-box-shadow: 5px 5px 5px darkblue;
-webkit-box-shadow: 5px 5px 5px darkblue;
box-shadow: 5px 5px 5px darkblue;
background-color: #575757;
-webkit-box-shadow: 0px 0px 6px white;
box-shadow: 0px 0px 6px white;
background-color: #1B1B1B;
}

#video-source {
Expand All @@ -60,27 +66,28 @@ body {
}

#video-list {
border: 2px solid #333333;
background-color: black;
border: none;
background-color: #1b1b1b;
}

#video-list img {
border: 4px solid #333333;
border: none;
}

#video-list .focus {
border: 6px solid #5f99cf;
border: 2px solid white;
box-shadow: 0px 0px 6px white;
}

#channel-list li, #promo-channel li {
color: black;
color: rgb(109, 109, 109);
font-weight: bold;
background: rgba(255,255,255 -.2);
background: rgba(0, 0, 0, 0.75);
}

#channel-list li:hover, #promo-channel li:hover {
background-color: #e0e0e0;
background-color: rgba(256,256,256,0.2);
background-color: #1B1B1B !important;
color: white;
}

Expand Down Expand Up @@ -108,43 +115,86 @@ body {
}

#channel-list .chan-selected, #promo-channel .chan-selected, .chan-selected li:hover {
color: darkblue;
-moz-box-shadow: 5px 5px 5px darkblue;
-webkit-box-shadow: 5px 5px 5px darkblue;
box-shadow: 5px 5px 5px darkblue;
background-color: #575757 !important;
color: rgb(204, 204, 204);
-moz-box-shadow: 0px 0px 6px white;
-webkit-box-shadow: 0px 0px 6px white;
box-shadow: 0px 0px 6px white;
background-color: #1B1B1B !important;
}

#channel-name {
background: #444;
background: #181818;
border-color: #555;
color: gray;
}

#channel-add {
background-color: #444;
background-color: #181818;
color: gray;
border-color: #666;
border: none;
}

#fill-nav {
background-color: white;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #1b1b1b;
}::-webkit-scrollbar-button{
height: 2px;
}::-webkit-scrollbar-corner{
background-color: #1b1b1b;
}::-webkit-scrollbar-track{
visibility: hidden;
background-color: #1b1b1b;
}::-webkit-scrollbar-track-piece{
background: #1b1b1b;
}::-webkit-scrollbar-thumb{
border-radius: 9px;
background: #000;
}::-webkit-scrollbar-thumb:hover{
border-radius: 9px;
background: #fff;
}::-webkit-scrollbar-thumb:window-inactive{
background-color: 1b1b1b;
}

input[type="checkbox"] {
margin: 3px 3px 3px 4px;
background-color: black;
background-image: none;
}

*{
transition: color 0.5s;
-moz-transition: color 0.5s;
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
}

.nav-button {
-moz-box-shadow: 1px 1px 1px black, inset 1px 1px 1px gray;
-webkit-box-shadow: 1px 1px 1px black, inset 1px 1px 1px gray;
box-shadow: 1px 1px 1px black, inset 1px 1px 1px gray;
text-shadow: 0px 1px 1px hsla(0,0%,100%,.7);
-moz-box-shadow: 1px 1px 1px black, inset 1px 1px 1px black;
-webkit-box-shadow: 1px 1px 1px black, inset 1px 1px 1px black;
box-shadow: 1px 1px 1px black, inset 1px 1px 1px black;
text-shadow: none;
color: black;
background-color: #575757;
background-color: #1F1F1F;
border: none;
text-decoration: none;
}

a.nav-button:hover {
border: 1px solid gray;
color: darkblue;
border: none;
color: white;
box-shadow: 0px 0px 6px white;
}

.loading {
background-image: url('../img/loading_dark.gif');
}