Last active
October 4, 2018 05:47
-
-
Save werrpy/5749130053677b8e14c293aa6bca5a95 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 2014 material design colors from https://material.io/design/color/the-color-system.html#tools-for-picking-colors */ | |
/* | |
Green | |
50 #E8F5E9 | |
100 #C8E6C9 | |
200 #A5D6A7 | |
300 #81C784 | |
400 #66BB6A | |
500 #4CAF50 | |
600 #43A047 | |
700 #388E3C | |
800 #2E7D32 | |
900 #1B5E20 | |
A100 #B9F6CA | |
A200 #69F0AE | |
A400 #00E676 | |
A700 #00C853 | |
Red | |
50 #FFEBEE | |
100 #FFCDD2 | |
200 #EF9A9A | |
300 #E57373 | |
400 #EF5350 | |
500 #F44336 | |
600 #E53935 | |
700 #D32F2F | |
800 #C62828 | |
900 #B71C1C | |
A100 #FF8A80 | |
A200 #FF5252 | |
A400 #FF1744 | |
A700 #D50000 | |
*/ | |
:root { | |
--color-light-blue: #81C784; | |
--color-light-green: #81C784; | |
--color-light-magenta: #81C784; | |
--color-light-purple: #81C784; | |
--color-light-red: #E57373; | |
--color-400: #66BB6A; | |
--color-blue: #F44336; | |
--color-green: #4CAF50; | |
--color-yellow: #4CAF50; | |
--color-magenta: #43A047; | |
--color-red: #2E7D32; | |
--color-dark-green: #2E7D32; | |
--color-A400: #00E676; | |
--color-purple: #00C853; | |
--color-dark-blue: #181818; | |
--color-dark-red: #181818; | |
--movie-overlay: radial-gradient(circle at 20% 50%, rgba(0, 0, 0, 1) 5.46%, rgba(46, 125, 50, 0.46)); | |
--background-pipe: url("https://www.themoviedb.org/assets/1/v4/account_pipes/green-79a9507a08a7e5a9b8c643a69026fe46191c45972cb45b944ab4b5f8a9110b03.svg"); | |
--gradient-background: radial-gradient(at 30% top, #074034 0%, #081c24 70%); | |
} | |
body { | |
background-color: var(--color-dark-blue); | |
} | |
.btn-primary, .label-primary { | |
background-color: var(--color-purple); | |
background-image: none; | |
} | |
.btn-info, .label-info { | |
background-color: var(--color-magenta); | |
background-image: none; | |
} | |
.btn-success { | |
background-color: var(--color-green); | |
background-image: none; | |
} | |
.btn-warning { | |
background-color: var(--color-yellow); | |
background-image: none; | |
} | |
.btn-danger { | |
background-color: var(--color-blue); | |
background-image: none; | |
} | |
.btn:active, .btn:hover, .btn:focus, | |
.btn:active:hover, .btn:active:focus, .btn:active:hover:focus { | |
background-color: var(--color-light-purple) !important; | |
background-image: none; | |
} | |
.btn-danger:hover { | |
background-color: var(--color-light-red) !important; | |
background-image: none; | |
} | |
#hoeapp-wrapper, #main-content, .inner-content { | |
background-color: var(--color-dark-blue); | |
} | |
.hoe-right-header[hoe-color-type="header-bg5"] { | |
background: #1f1f1f; | |
} | |
#hoeapp-container[hoe-color-type="lpanel-bg5"].hoe-minimized-lpanel #hoe-left-panel { | |
background: #1f1f1f; | |
} | |
.ratio-bar { | |
background-color: #2b2b2b; | |
margin-bottom: 0; | |
border-bottom: 1em solid black; | |
} | |
.ratio-bar .badge-user { | |
background-color: #373737; | |
} | |
.nav-tabs > #active { | |
background-color: var(--color-dark-green); | |
} | |
.btn-primary :hover { | |
background-color: var(--color-light-purple); | |
} | |
/* dark header menus */ | |
.hoe-right-header .hoe-rheader-submenu > .dropdown-menu > li { | |
border-bottom: none; | |
} | |
.hoe-right-header .hoe-rheader-submenu > .dropdown-menu > li > a, | |
.hoe-right-header .hoe-rheader-submenu > .dropdown-menu > li > a > .fa { | |
color: #fff; | |
} | |
.hoe-left-header, | |
#hoeapp-container[hoe-color-type="lpanel-bg5"] #hoe-left-panel, | |
#hoeapp-container[hoe-color-type="lpanel-bg5"] #hoe-left-panel .panel-list > li > a, | |
.hoe-right-header .hoe-rheader-submenu > .dropdown-menu > li > a { | |
background: #1f1f1f; | |
} | |
.hoe-right-header .hoe-rheader-submenu > .dropdown-menu > li > a:focus, | |
.hoe-right-header .hoe-rheader-submenu > .dropdown-menu > li > a:hover, | |
#hoeapp-container[hoe-color-type="lpanel-bg5"] #hoe-left-panel .panel-list > li > a:hover { | |
background: #151515; | |
} | |
#hoeapp-container[hoe-color-type="lpanel-bg5"] #hoe-left-panel .panel-list > li > a { | |
border-top: 1px solid #151515; | |
} | |
#main-content { | |
background: url("https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/335590/9a9adbcf4ff7698ba5ce5d6c122a2b6564971816.jpg"); | |
background-position: center; | |
background-size: 125%; | |
} | |
.text-green { | |
color: #3fb618; | |
} | |
i.torrent-icon, .carousel-control > .glyphicon { | |
color: var(--color-blue); | |
} | |
.col-md-10 { | |
background-color:#2b2b2b; | |
margin-top: 15px; | |
padding-top: 10px; | |
} | |
.panel-chat > .panel-body > #frame > .content { | |
background-color: var(--color-dark-blue); | |
} | |
#l-footer { | |
background-color:#1f1f1f; | |
} | |
.notify .point { | |
background-color: var(--color-A400); | |
} | |
.notify .heartbit { | |
border: 4px solid var(--color-A200); | |
} | |
.message-sent .message-headers, | |
.message-unread .message-headers, | |
.message-sent .message-body, | |
.message-unread .message-body { | |
background-color: #404040; | |
} | |
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, | |
.topic-info { | |
color: #fff; | |
} | |
.progress-bar { | |
background-color: var(--color-magenta); | |
border-bottom: 4px solid var(--color-red) !important; | |
} | |
select, select option { | |
background-color: #454545 !important; | |
} | |
.form-control { | |
background-color: rgba(255, 255, 255, 0.16); | |
color: #fff; | |
border: 2px solid rgba(0, 0, 0, 0.56); | |
} | |
.form-control:focus { | |
box-shadow: 0 0 5px var(--color-light-blue); | |
border: 1px solid var(--color-light-blue); | |
} | |
.form-control > option { | |
background-color: #616161; | |
} | |
.decoda-code, .decoda-quote { | |
border: 1px solid var(--color-light-blue); | |
} | |
.decoda-quote { | |
margin: 0 15px 15px 15px; | |
} | |
.movie-overlay { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background-image: var(--movie-overlay); | |
} | |
.text-info, | |
.disk-good { | |
color: var(--color-400); | |
} | |
.badge-extra { | |
border: 1px solid rgba(66, 70, 92, 0.61); | |
border-radius: 0px; | |
} | |
.text-purple, | |
.text-orange, | |
.text-danger, | |
.text-success, | |
.text-pink, | |
.fa-coins { | |
color: var(--color-400); | |
} | |
.alert-danger, .panel-danger, .panel-danger > .panel-heading, | |
.alert-success, .panel-success, .panel-success > .panel-heading, | |
.alert-primary, .panel-primary, .panel-primary > .panel-heading, | |
.alert-warning, .panel-warning, .panel-warning > .panel-heading, | |
.alert-default, .panel-default, .panel-default > .panel-heading, | |
.alert-info, .btn-info, .panel-info, .panel-info > .panel-heading { | |
background-color: var(--color-magenta) !important; | |
} | |
.alert { | |
color: #424242; | |
} | |
.alert > h2, | |
.alert > h2 > strong, | |
.panel > .panel-heading > h2, | |
.panel > .panel-heading > h4, | |
.panel > .panel-heading > div > h2, | |
.panel > .panel-heading > div > h4, | |
.movie-title > a { | |
color: #000; | |
} | |
.panel-chat > .panel-heading > h4 { | |
color: #fff; | |
} | |
.panel-collapse > .panel-heading { | |
background-color: #1b1b1b !important; | |
} | |
.badge-user { | |
border-radius: 0px; | |
} | |
.container.box { | |
background: #1f1f1f; | |
box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.20); | |
} | |
.list-inline { | |
color: inherit; | |
} | |
.gradient.silver, | |
.gradient.pink, | |
.gradient.purple, | |
.gradient.green, | |
.gradient.teal, | |
.gradient.light_blue, | |
.gradient.blue, | |
.gradient.orange, | |
.gradient.yellow, | |
.gradient.red { | |
background-image: var(--gradient-background); | |
} | |
div.header.silver div.inner_content, | |
div.header.pink div.inner_content, | |
div.header.purple div.inner_content, | |
div.header.green div.inner_content, | |
div.header.teal div.inner_content, | |
div.header.light_blue div.inner_content, | |
div.header.blue div.inner_content, | |
div.header.orange div.inner_content, | |
div.header.yellow div.inner_content, | |
div.header.red div.inner_content, | |
#l-footer { | |
background-image: var(--background-pipe) !important; | |
} | |
/* tree */ | |
.banner > .fa-rocket:before, | |
.banner > .fa-headphones:before { | |
content: "\f1bb"; | |
} | |
/* history table restores */ | |
.table > tbody > tr > td.text-green { | |
color: #3fb618 !important; | |
} | |
.table > tbody > tr > td.text-red { | |
color: var(--color-light-red) !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://cdn.rawgit.com/werrpy/5749130053677b8e14c293aa6bca5a95/raw/3dea1e40dcb567df45a1b09c12fd16593e721cb7/xmas.css
uses Valve's xmas lights background