mirror of
https://github.com/chev2/scripts-styles.git
synced 2025-10-30 08:11:41 +00:00
Add UserStyle: Thunderstore Dark-Blue
This commit is contained in:
parent
e09cbdafcf
commit
a8430aaa05
GPG key ID:
BE0CFBD5DCBB2511
2 changed files with 336 additions and 0 deletions
BIN
previews/thunderstore-dark-blue.png
Normal file
BIN
previews/thunderstore-dark-blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 606 KiB |
336
styles/thunderstore-dark-blue.user.css
Normal file
336
styles/thunderstore-dark-blue.user.css
Normal file
|
|
@ -0,0 +1,336 @@
|
||||||
|
/* ==UserStyle==
|
||||||
|
@name Thunderstore Dark-Blue
|
||||||
|
@author Chev <riskyrains@proton.me> (https://github.com/chev2)
|
||||||
|
@version 1.0.0
|
||||||
|
@description Dark-blue theme for Thunderstore, a modding platform for Unity games.
|
||||||
|
@namespace github.com/chev2
|
||||||
|
@license Apache-2.0
|
||||||
|
|
||||||
|
@homepageURL https://github.com/chev2/scripts-styles
|
||||||
|
@supportURL https://github.com/chev2/scripts-styles/issues
|
||||||
|
@updateURL https://raw.githubusercontent.com/chev2/scripts-styles/main/styles/thunderstore-dark-blue.user.css
|
||||||
|
|
||||||
|
@preprocessor stylus
|
||||||
|
|
||||||
|
@var checkbox float-nav-bar "Floating navigation bar" 1
|
||||||
|
@var checkbox hide-game-bg "Hide game background" 0
|
||||||
|
@var checkbox tint-game-bg "Tint game background" 1
|
||||||
|
@var range game-bg-blur "Game background blur" [6, 0, 32, 1, "px"]
|
||||||
|
@var checkbox hide-app-banner "Hide Thunderstore App Banner" 0
|
||||||
|
==/UserStyle== */
|
||||||
|
|
||||||
|
@-moz-document domain("thunderstore.io") {
|
||||||
|
:root {
|
||||||
|
--primary: hsl(216, 28%, 11%);
|
||||||
|
--light: hsl(216, 28%, 15%);
|
||||||
|
--lighter: hsl(216, 28%, 23%);
|
||||||
|
--lightest: hsl(216, 28%, 29%);
|
||||||
|
|
||||||
|
--btn-success-color: hsl(216, 28%, 23%);
|
||||||
|
--btn-success-color-hover: hsl(216, 28%, 26%);
|
||||||
|
--btn-success-color-active: hsl(216, 28%, 32%);
|
||||||
|
--btn-outline-success-color: hsl(216, 28%, 45%);
|
||||||
|
|
||||||
|
--dropdown-search-input-color: hsl(216, 28%, 36%);
|
||||||
|
|
||||||
|
--checkbox-switch-active-color: hsl(216, 28%, 38%);
|
||||||
|
|
||||||
|
--input-box-color: hsl(216, 28%, 23%);
|
||||||
|
|
||||||
|
--dropdown-color: hsl(216, 28%, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The body background usually isn't seen--typically only for games with no set custom background */
|
||||||
|
body {
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make elements use global vars for theming */
|
||||||
|
.bg-primary {
|
||||||
|
background-color: var(--primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-light {
|
||||||
|
background-color: var(--light) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer background color */
|
||||||
|
.footer {
|
||||||
|
background-color: hsl(216, 28%, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Customization for game background */
|
||||||
|
if hide-game-bg {
|
||||||
|
/* Main background color */
|
||||||
|
.background .tint {
|
||||||
|
background-color: hsl(216, 28%, 7%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.background {
|
||||||
|
filter: s("blur(%s)", game-bg-blur);
|
||||||
|
}
|
||||||
|
|
||||||
|
if tint-game-bg {
|
||||||
|
unless hide-game-bg {
|
||||||
|
.background {
|
||||||
|
filter: s("saturate(0) sepia(1) saturate(1) hue-rotate(180deg) brightness(1.2) blur(%s)", game-bg-blur);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if float-nav-bar {
|
||||||
|
primary-header-height = 40px
|
||||||
|
secondary-header-height = 30px
|
||||||
|
|
||||||
|
/* Fixed nav bars */
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right :0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.navbar.py-2 {
|
||||||
|
height: primary-header-height;
|
||||||
|
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.navbar.py-1 {
|
||||||
|
margin-top: primary-header-height;
|
||||||
|
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Offset main content by navbar */
|
||||||
|
.main {
|
||||||
|
padding-top: s("calc(%s + %s + 20px)", primary-header-height, secondary-header-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix dropdown menu overflow */
|
||||||
|
.dropdown-menu {
|
||||||
|
overflow-y: scroll;
|
||||||
|
max-height: s("calc(100vh - %s - 8px)", primary-header-height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* If the user wants to hide the 'Get the Thunderstore App' banner */
|
||||||
|
if hide-app-banner {
|
||||||
|
#get-app-alert {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix top margin for content container */
|
||||||
|
div.container > .mt-4, div.container > .mt-4 > .row > h3 {
|
||||||
|
margin-top: 0px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mod grid */
|
||||||
|
/* Add corner rounding */
|
||||||
|
.package-list > div > div:first-child, .package-list > div > div:first-child img {
|
||||||
|
border-radius: 8px 8px 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-list > div > div:last-child {
|
||||||
|
border-radius: 0px 0px 8px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pin > div {
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mod grid entry badges */
|
||||||
|
.badge-secondary {
|
||||||
|
background-color: var(--lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Drop-down menu */
|
||||||
|
.dropdown-menu {
|
||||||
|
background-color: var(--dropdown-color);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.communities-dropdown .section:not(:first-child) {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search drop-down */
|
||||||
|
.ss-main {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ss-content {
|
||||||
|
border: 1px solid var(--lightest);
|
||||||
|
background-color: var(--lightest);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ss-content .ss-search input {
|
||||||
|
border: 1px solid var(--dropdown-search-input-color);
|
||||||
|
background-color: var(--dropdown-search-input-color);
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
caret-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ss-content .ss-list .ss-option.ss-disabled {
|
||||||
|
background-color: var(--lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search drop-down multi-add icon */
|
||||||
|
.ss-main .ss-multi-selected .ss-add .ss-plus, .ss-main .ss-multi-selected .ss-add .ss-plus::after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input boxes */
|
||||||
|
.form-control {
|
||||||
|
background: var(--input-box-color);
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
caret-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control:focus {
|
||||||
|
background: var(--input-box-color);
|
||||||
|
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ss-main .ss-multi-selected {
|
||||||
|
background-color: var(--input-box-color);
|
||||||
|
border-color: var(--input-box-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slimselect-lg .ss-multi-selected .ss-disabled .ss-disabled, .slimselect-lg .ss-multi-selected .ss-values .ss-disabled, .slimselect-lg .ss-single-selected .ss-disabled .ss-disabled, .slimselect-lg .ss-single-selected .ss-values .ss-disabled {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Details page */
|
||||||
|
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .card-header, .breadcrumb {
|
||||||
|
background-color: var(--lighter);
|
||||||
|
border-color: var(--lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs {
|
||||||
|
border-bottom: 1px solid var(--lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item {
|
||||||
|
background-color: var(--light);
|
||||||
|
border-color: var(--light);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
.table td, .table th {
|
||||||
|
border-top: 1px solid var(--lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button colors */
|
||||||
|
.btn-success {
|
||||||
|
border-color: var(--btn-success-color);
|
||||||
|
background-color: var(--btn-success-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success:hover {
|
||||||
|
border-color: var(--btn-success-color-hover);
|
||||||
|
background-color: var(--btn-success-color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
border-color: var(--btn-success-color);
|
||||||
|
background-color: var(--btn-success-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
border-color: var(--btn-success-color-hover);
|
||||||
|
background-color: var(--btn-success-color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
|
||||||
|
border-color: var(--btn-success-color-active);
|
||||||
|
background-color: var(--btn-success-color-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Outlined buttons */
|
||||||
|
.btn-outline-success {
|
||||||
|
border-color: var(--btn-outline-success-color);
|
||||||
|
color: var(--btn-outline-success-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-success:hover {
|
||||||
|
border-color: var(--btn-outline-success-color);
|
||||||
|
background-color: var(--btn-outline-success-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Checkboxes/switches */
|
||||||
|
.custom-control-label::before {
|
||||||
|
background-color: var(--lighter);
|
||||||
|
border: 1px solid var(--lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control-input:checked ~ .custom-control-label::before {
|
||||||
|
background-color: var(--checkbox-switch-active-color);
|
||||||
|
border-color: var(--checkbox-switch-active-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Link colors */
|
||||||
|
a, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .markdown-body a {
|
||||||
|
color: hsl(221, 100%, 85%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: hsl(221, 100%, 75%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Paginator */
|
||||||
|
.page-link {
|
||||||
|
background-color: var(--lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-link:hover {
|
||||||
|
background-color: var(--lightest);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item.disabled .page-link {
|
||||||
|
background-color: var(--light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
padding-left: auto;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-document domain("blog.thunderstore.io") {
|
||||||
|
/* WARNING: With a lack of unique classnames/ids to work with, combined with use of inline styles, this gets really hacky! */
|
||||||
|
body > div > main > div > div, body > div > main > div > div > section.bg-cover {
|
||||||
|
background-color: var(--light) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > div > main > div > div > div:last-child > div > div > div > div > div:last-child > div a {
|
||||||
|
background-color: var(--lighter) !important;
|
||||||
|
border-color: var(--lighter) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust existing theme colors */
|
||||||
|
.bg-wt-background {
|
||||||
|
background-color: var(--lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-wt-tertiary {
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust links in blog posts */
|
||||||
|
a.link[style] {
|
||||||
|
color: hsl(221, 100%, 85%) !important;
|
||||||
|
text-decoration: underline currentcolor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.link:hover[style] {
|
||||||
|
color: hsl(221, 100%, 75%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue