Skip to content

Instantly share code, notes, and snippets.

@werrpy
Last active October 4, 2018 05:47
Show Gist options
  • Save werrpy/5749130053677b8e14c293aa6bca5a95 to your computer and use it in GitHub Desktop.
Save werrpy/5749130053677b8e14c293aa6bca5a95 to your computer and use it in GitHub Desktop.
/* 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;
}
@werrpy
Copy link
Author

werrpy commented Oct 4, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment