Skip to content

Instantly share code, notes, and snippets.

@inxomnyaa
Last active May 20, 2020 03:37
Show Gist options
  • Save inxomnyaa/ed07c6bd4285614d2c5654c9dce76bf2 to your computer and use it in GitHub Desktop.
Save inxomnyaa/ed07c6bd4285614d2c5654c9dce76bf2 to your computer and use it in GitHub Desktop.
Poggit dark userstyle - Load it via custom css extension i.e. https://github.com/openstyles/stylus
/* ==UserStyle==
@name Poggit Dark
@version 1.0.6
@description Dark theme for Poggit, a GitHub application for managing PocketMine-family plugins, and website for sharing plugins
@namespace XenialDan
@author XenialDan
@homepageURL https://gist.github.com/thebigsmileXD/ed07c6bd4285614d2c5654c9dce76bf2
@supportURL https://gist.github.com/thebigsmileXD/ed07c6bd4285614d2c5654c9dce76bf2
@updateURL https://raw.githubusercontent.com/StylishThemes/StackOverflow-Dark/master/stackoverflow-dark.user.css
==/UserStyle== */
* {
border-radius: initial !important;
}
body {
background-color: #222222;
color: white;
}
.projects-header {
background-color: #333a42;
text-align: center;
padding: 5px 0px;
}
.action {
background-color: #21b9ff;
padding: 1px 5px 2px;
line-height: inherit;
margin: 0px 3px;
margin-top: 2px;
}
.action:hover {
background-color: #4183c4;
}
.btn {
background-color: #21b9ff;
border: none;
}
.btn:hover {
background-color: #4183c4;
}
.projects-latest-builds {
margin: initial;
background-color: #25272a;
}
.projects-wrapper {
margin: 2px;
}
a {
color: #21b9ff;
}
a:hover {
text-decoration: underline;
}
:not(sup) .hover-title {
color: white;
}
img.gh-logo {
border-radius: 100% !important;
border: 1.5px solid white;
width: 19px;
background: white;
}
.projects-header h3 > img {
width: 20px;
vertical-align: baseline;
}
select,
input[type="text"] {
color: #c0c0c0;
border: none;
vertical-align: middle;
background-color: #25272a;
}
input[type="text"] {
padding: 6px 8px;
}
select::-ms-expand {
display: none;
}
/*select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}*/
select,
.inline-select {
margin: 0px;
padding: 3px 20px 2px 8px;
margin-top: 2px;
}
#ci-project-info-table td,
#ci-project-info-table th {
border: 2px solid #333a42;
}
#ci-project-info-table tr:nth-child(2n) {
background-color: #343434;
}
#ci-project-history-table td,
#ci-project-history-table th {
border: 2px solid #333a42;
}
#ci-project-history-table tr:nth-child(2n+1) {
background-color: #343434;
}
code,
pre code {
padding: .2rem .4rem !important;
color: ghostwhite;
background-color: #343434;
border-radius: .25rem !important;
}
.brief-info {
background-color: #25272a;
margin: 0px;
}
.repo-toggle {
background-color: #333a42;
padding: initial;
}
.repo-toggle > h5 {
text-align: center;
line-height: 1.7;
margin-bottom: initial;
}
.repo-toggle > nobr {
text-align: center;
padding: 0px 10px 10px 10px;
}
.paginate-pagination ul > li > a.page {
background: #25272a;
border: none;
color: white;
}
.paginate-pagination ul > li > a.page.active {
background-color: #4183c4;
}
.paginate-pagination ul > li > a.page:not(.active):hover {
background-color: #333;
}
.plugin-entry {
background-color: #25272a;
border: none;
}
.plugin-index .plugin-entry .plugin-entry-block.plugin-icon {
background-color: #333a42;
}
.ui-widget-content {
background: #333a42;
color: inherit;
}
.remark {
color: inherit;
}
.alert-warning {
background-color: #fcf8e3;
border-color: #faf2cc;
color: #8a6d3b;
}
.ui-tabs {
padding: 0px;
}
.ui-widget.ui-widget-content {
border: none;
}
.ui-widget-header {
background: #25272a;
border: none;
}
.ui-tabs .ui-tabs-nav {
padding: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0px;
padding-bottom: 0px;
}
.ui-tabs .ui-tabs-nav li {
margin-left: 0px;
margin-right: 0px;
border: none;
background-color: #25272a;
}
.ui-tabs .ui-tabs-nav li:hover {
background-color: #333;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
color: white;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
border: none;
background-color: #4183c4 !important;
}
.account-tab {
overflow: auto;
}
.ui-widget-content a {
color: #21b9ff;
}
.submotto {
color: white;
font-weight: bold;
}
.wrapper-header {
background-color: #25272a !important;
margin-left: 10px !important;
}
.plugin-info {
background-color: #25272a;
}
.plugin-info-description {
background-color: #333a42;
}
.plugin-info-wrapper {
background-color: #333a42;
}
.plugin-info-shields {
background-color: #333a42;
}
.plugin-info-changelog {
background-color: #333a42;
}
hr {
border: 1px solid #323840;
}
.review-outer-wrapper {
background-color: #323941;
margin: 5px 0px;
padding: 10px 10px 0 10px;
}
.review-panel {
border: none;
}
.review-panel::before {
content: "Reviews";
font-size: 1rem;
margin-bottom: .5rem;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
.review-replies {
padding: 5px 0px 5px 15px;
}
.resptable-col {
display: initial;
padding-right: initial;
margin-right: 20px;
}
.multisearch {
margin-right: 20px;
}
.toggle-wrapper {
background-color: #25272a;
}
.toggle-light .toggle-blob {
background: #4183c4;
border: 1px solid #0275c7;
}
.toggle-light .toggle-off,
.toggle-light .toggle-select .toggle-on {
background: #f76150;
color: initial;
}
.toggle-light .toggle-on,
.toggle-light .toggle-select .toggle-inner .active {
background: #8ddb8d;
color: initial;
}
.toggle-light .toggle-slide {
box-shadow: initial;
}
* {
border-radius: initial !important;
}
body {
background-color: #222222;
color: white;
}
.projects-header {
background-color: #333a42;
text-align: center;
padding: 5px 0px;
}
.action {
background-color: #21b9ff;
padding: 1px 5px 2px;
line-height: inherit;
margin: 0px 3px;
margin-top: 2px;
}
.action:hover {
background-color: #4183c4;
}
.btn {
background-color: #21b9ff;
border: none;
}
.btn:hover {
background-color: #4183c4;
}
.projects-latest-builds {
margin: initial;
background-color: #25272a;
}
.projects-wrapper {
margin: 2px;
}
a {
color: #21b9ff;
}
a:hover {
text-decoration: underline;
}
:not(sup) .hover-title {
color: white;
}
img.gh-logo {
border-radius: 100% !important;
border: 1.5px solid white;
width: 19px;
background: white;
}
.projects-header h3 > img {
width: 20px;
vertical-align: baseline;
}
select,
input[type="text"] {
color: #c0c0c0;
border: none;
vertical-align: middle;
background-color: #25272a;
}
input[type="text"] {
padding: 6px 8px;
}
select::-ms-expand {
display: none;
}
/*select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}*/
select,
.inline-select {
margin: 0px;
padding: 3px 20px 2px 8px;
margin-top: 2px;
}
#ci-project-info-table td,
#ci-project-info-table th {
border: 2px solid #333a42;
}
#ci-project-info-table tr:nth-child(2n) {
background-color: #343434;
}
#ci-project-history-table td,
#ci-project-history-table th {
border: 2px solid #333a42;
}
#ci-project-history-table tr:nth-child(2n+1) {
background-color: #343434;
}
code,
pre code {
padding: .2rem .4rem !important;
color: ghostwhite;
background-color: #343434;
border-radius: .25rem !important;
}
.brief-info {
background-color: #25272a;
margin: 0px;
}
.repo-toggle {
background-color: #333a42;
padding: initial;
}
.repo-toggle > h5 {
text-align: center;
line-height: 1.7;
margin-bottom: initial;
}
.repo-toggle > nobr {
text-align: center;
padding: 0px 10px 10px 10px;
}
.paginate-pagination ul > li > a.page {
background: #25272a;
border: none;
color: white;
}
.paginate-pagination ul > li > a.page.active {
background-color: #4183c4;
}
.paginate-pagination ul > li > a.page:not(.active):hover {
background-color: #333;
}
.plugin-entry {
background-color: #25272a;
border: none;
}
.plugin-index .plugin-entry .plugin-entry-block.plugin-icon {
background-color: #333a42;
}
.ui-widget-content {
background: #333a42;
color: inherit;
}
.remark {
color: inherit;
}
.alert-warning {
background-color: #fcf8e3;
border-color: #faf2cc;
color: #8a6d3b;
}
.ui-tabs {
padding: 0px;
}
.ui-widget.ui-widget-content {
border: none;
}
.ui-widget-header {
background: #25272a;
border: none;
}
.ui-tabs .ui-tabs-nav {
padding: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0px;
padding-bottom: 0px;
}
.ui-tabs .ui-tabs-nav li {
margin-left: 0px;
margin-right: 0px;
border: none;
background-color: #25272a;
}
.ui-tabs .ui-tabs-nav li:hover {
background-color: #333;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
color: white;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
border: none;
background-color: #4183c4 !important;
}
.account-tab {
overflow: auto;
}
.ui-widget-content a {
color: #21b9ff;
}
.submotto {
color: white;
font-weight: bold;
}
.wrapper-header {
background-color: #25272a !important;
margin-left: 10px !important;
}
.plugin-info {
background-color: #25272a;
}
.plugin-info-description {
background-color: #333a42;
}
.plugin-info-wrapper {
background-color: #333a42;
}
.plugin-info-shields {
background-color: #333a42;
}
.plugin-info-changelog {
background-color: #333a42;
}
hr {
border: 1px solid #323840;
}
.review-outer-wrapper {
background-color: #323941;
margin: 5px 0px;
padding: 10px 10px 0 10px;
}
.review-panel {
border: none;
}
.review-panel::before {
content: "Reviews";
font-size: 1rem;
margin-bottom: .5rem;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
.review-replies {
padding: 5px 0px 5px 15px;
}
.resptable-col {
display: initial;
padding-right: initial;
margin-right: 20px;
}
.multisearch {
margin-right: 20px;
}
.toggle-wrapper {
background-color: #25272a;
}
.toggle-light .toggle-blob {
background: #4183c4;
border: 1px solid #0275c7;
}
.toggle-light .toggle-off,
.toggle-light .toggle-select .toggle-on {
background: #f76150;
color: initial;
}
.toggle-light .toggle-on,
.toggle-light .toggle-select .toggle-inner .active {
background: #8ddb8d;
color: initial;
}
.toggle-light .toggle-slide {
box-shadow: initial;
}
/* Now, let's darken the scrollbar */
::-webkit-scrollbar {
width: 14px;
height: 3px;
}
::-webkit-scrollbar-button {
background-color: #38383D;
}
/*Unreported webkit bug: arrows missing https://stackoverflow.com/questions/47576815/how-to-add-arrows-with-webkit-scrollbar-button */
::-webkit-scrollbar-track {
background-color: #38383D;
}
::-webkit-scrollbar-track-piece {
background-color: #000;
}
::-webkit-scrollbar-thumb {
height: 50px;
background-color: #737373;
border-radius: 0px;
}
::-webkit-scrollbar-corner {
background-color: #646464;
}
::-webkit-resizer {
background-color: #666;
}
/* Firefox wants some special cake -.- */
* {
scrollbar-color: #737373 #38383D;
scrollbar-color: dark;
}
@jasonw4331
Copy link

Please add this for dark dropdown menues

.release-filter-select {
    background-color: #292b2c !important;
}

@inxomnyaa
Copy link
Author

@jasonwynn10 those filter apply a custom color tag on the element (for reasons unknown), that's why i haven't added it before, i wanted to keep this poggit "feature"

@inxomnyaa
Copy link
Author

Turned the "Add Repo" interface dark now!
grafik

@inxomnyaa
Copy link
Author

Reuploaded it to userstyles.org: https://userstyles.org/styles/174770/poggit-dark-oc

@jasonw4331
Copy link

Add this for a dark scrollbar

::-webkit-scrollbar { width: 14px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #646464;}
::-webkit-scrollbar-track-piece { background-color: #000;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 0px;}
::-webkit-scrollbar-corner { background-color: #646464;}
::-webkit-resizer { background-color: #666;}

@inxomnyaa
Copy link
Author

@jasonwynn10 done, also added firefox support. Due to a webkit bug, that appears not to be written down anywhere, the scrollbar arrow buttons are gone though. (see https://stackoverflow.com/questions/47576815/how-to-add-arrows-with-webkit-scrollbar-button)

@inxomnyaa
Copy link
Author

Moved to https://github.com/thebigsmileXD/poggit-dark-css ! With updated meta to check for updates. Please reinstall this style

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