Skip to content

Commit

Permalink
Super-sexy theme support
Browse files Browse the repository at this point in the history 
Split every single specified color in style.css to \theme\themename.css.

Settings will read all CSS files in \theme\ and display them for
selection, which is then relayed to the relevant pages.  Basically,
people can make custom themes if they really want, and hopefully even
submit them.
  • Loading branch information
@d8ahazard
d8ahazard committed Dec 1, 2016
1 parent 0d6fb6b commit 8054088
Show file tree
Hide file tree
Showing 8 changed files with 440 additions and 168 deletions.
58 changes: 2 additions & 56 deletions css/login.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
body {
background: #222222;
background-size: cover;
font-family: "PT Sans", sans-serif;
}
Expand All @@ -12,59 +11,15 @@ body {
margin: 10% auto;
text-align: center;
font-size: 24px;
color: #ffffff;
display: none;
}

@media screen and (max-width:800px) {

.login-block {
width: 80%;
height: 40%;
transition: top 1s linear;
background: #3f3f3f;
border-radius: 5px;
border-top: 5px solid #FF0000;
position: absolute;
top: -400px;
margin: 0 auto;
left: 0;
right: 0;
}

.login-block h1 {
text-align: center;
color: #fff;
font-size: 30px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 20px;
}

.login-block input {
width: 90%;
height: 100px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #8A8A8A;
margin-bottom: 20px;
font-size: 20px;
padding: 0 50px 0 50px;
outline: none;
}

}



.login-block {
width: 90%;
max-width: 320px;
transition: top 1s linear;
padding: 20px;
background: #3f3f3f;
border-radius: 5px;
border-top: 5px solid #FF0000;
position: absolute;
top: -400px;
margin: 0 auto;
Expand All @@ -73,7 +28,6 @@ body {
}
.login-block h1 {
text-align: center;
color: #fff;
font-size: 18px;
text-transform: uppercase;
margin-top: 0;
Expand All @@ -84,7 +38,6 @@ body {
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #8A8A8A;
margin-bottom: 20px;
font-size: 20px;
padding: 0 50px 0 50px;
Expand All @@ -110,26 +63,19 @@ input {
background: #fff url('../images/ui-icon-password.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input:active, .login-block input:focus {
border: 1px solid #ff656c;
}

.login-block button {
width: 100%;
height: 40px;
background: #ff656c;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
outline: none;
cursor: pointer;
}
.login-block button:hover {
background: #ff7b81;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
Expand Down
108 changes: 7 additions & 101 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ p {
iframe {
width: 100%;
height: 926px;
background-color: #000;
border: 0;
padding: 0;
margin: 0;
Expand Down Expand Up @@ -74,7 +73,6 @@ Main components

.modal-title {
font-size: 18px;
color: #f1f3f2;
}
.cd-tabs-bar.drawer, .cd-tabs-bar.drawer .cd-tab, .cd-tabs-bar.drawer .navbtn {
max-height: 7px;
Expand Down Expand Up @@ -138,30 +136,17 @@ Main components
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
color: #818181;


}

#reload, .cd-tabs-navigation li {
cursor: pointer;
}

.cd-tabs-navigation a:hover, #reload:hover, #settings:hover {
color: #f1f3f2; /* Hover text colour */
background-color: rgba(233, 230, 202, 0.3);
}

.cd-tabs-navigation a.selected:not(#reload) {
background-color: #3f3f3f !important; /* Selected tab colour */
color: #f1f3f2; /* Selected text colour */
}

@media only screen and (min-width: 0px) {
.cd-tabs-navigation {
/* tabbed on top of devices */
width: 100%;
background-color: #222222; /* Main nav colour */
box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
width: 100%;
}

.cd-tabs-navigation a:not(#reload) {
Expand All @@ -173,10 +158,6 @@ Main components
padding: 0 2em 0 2em;
}

.cd-tabs-navigation a.selected:not(#reload) {
box-shadow: inset 0 5px 0 #36363b; /* Selected tab marker colour */
}

.cd-tabs-navigation a::before {
top: 50%;
margin-top: -10px;
Expand Down Expand Up @@ -205,7 +186,6 @@ Main components
.cd-tabs-content li p {
font-size: 1.6rem;
line-height: 1.2;
color: #8493bf;
margin-bottom: 2em;
}

Expand All @@ -224,8 +204,6 @@ Main components
}

.main-nav, .drop-nav {
background: #222222;
box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
z-index: 100002;
}

Expand All @@ -234,10 +212,7 @@ Main components
margin-top: 0px;
}

.main-nav > li:hover {
color: #f1f3f2;

}


.main-nav > li {
float: left;
Expand Down Expand Up @@ -266,18 +241,12 @@ Main components
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
color: #818181;
}

.dd {
position: relative;
}

.dd a:hover {
color: #f1f3f2;
background-color: rgba(233, 230, 202, 0.3);
}

.dd:after {
content: "";
font-size: .5em;
Expand All @@ -287,27 +256,11 @@ Main components
right: 12%;
}

.dd-active {
/* Used by main.js to set color of parent element of hovered item */
color: #f1f3f2;
}

.or-active {
background-color: rgba(233, 230, 202, 0.3);
}

.or-active > span {
color: #ffffff; /* Hover text colour */

}

.drop-nav {
position: absolute;
display: none;
width: 150px;
-webkit-box-shadow: -9px 10px 13px -2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -9px 10px 13px -2px rgba(0, 0, 0, 0.3);
box-shadow: -9px 10px 13px -2px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width:800px) {
Expand All @@ -318,9 +271,6 @@ Main components
}
}

.drop-nav li {
border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.dd:hover > .drop-nav:not .hide-nav {
display: block;
Expand All @@ -335,13 +285,7 @@ Main components
display: block;
}

.drop-nav > li:hover, .drop-nav > li:hover a {
color: #f1f3f2;
background-color: rgba(233, 230, 202, 0.3);
-webkit-box-shadow: inset 0px 0px 13px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0px 13px 5px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 13px 5px rgba(0, 0, 0, 0.3);
}


body ul {
margin-bottom: 0px;
Expand Down Expand Up @@ -379,7 +323,7 @@ body ul {
/*Settings*/

input[type='text']:not .userinput {
max-width: 300px;
max-width: 300px;
width: 90%;
height: 25px;
-webkit-border-radius: 5px 5px 5px 5px;
Expand All @@ -397,9 +341,7 @@ input[type='color'] {
padding: 2px;
}

input[type='text'], select {
color: #000;
}


select {
margin-left: 10px;
Expand All @@ -409,23 +351,8 @@ input.ui-button {
padding: .2em .5em;
}

input[type="text"][disabled] {
color: #696969;
}

input[disabled]:hover {
background-color: #8b0000;
color: #fff;
}

input[type='button'] {
font-size: 16px;
color: #FFF;
background: #8b0000;
}

input[type='button']:hover {
background: #003147;
}

.checkbox, .radio {
Expand All @@ -449,14 +376,6 @@ input[type='button']:hover {
max-width: 550px;
}

.modal-body {
background: #222222;
}

.modal-header, .modal-footer {
background: #3f3f3f;
}

.upgradeBody {
font-size: 1.6rem;
}
Expand Down Expand Up @@ -484,12 +403,6 @@ input[type='button']:hover {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
background: #f5f6f7;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 5px 5px 5px 1px #000;
box-shadow: 5px 5px 5px 1px #000;
color: #000;
text-align: center;
cursor: move;
}
Expand Down Expand Up @@ -551,8 +464,6 @@ input[type='button']:hover {
}

#updateContainer {
background-color: #222222;
color: #f1f3f2;
display: none;
font-size: 14px;
right: 20px;
Expand All @@ -578,21 +489,16 @@ input[type='button']:hover {
font-size: 28px;
font-weight: bold;
line-height: 1;
color: #f1f3f2;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=50);
opacity: .5;
}
.close:hover,
.close:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=100);
opacity: 1;
}

form input {
background-color: #fff;
color: #000;
}

Loading

0 comments on commit 8054088

Please sign in to comment.