Wild West Theme en

Installations 0 Likes 2

Full

Is yer posse lookin' for gold or fame? Maybe what they need is a rootin' tootin' Wild West theme in the campaign! It's got everythin' you need 'cept a cold drink from the saloon!

And if yer a Marshall in a Deadlands game, then the Savage Worlds character sheet looks mighty purdy with this theme, too.

Latest version 1.0 View content

Released 2 years ago

Initial version.

Plugin CSS for 1.0


@import url('https://fonts.googleapis.com/css2?family=Arbutus&family=Rye&display=swap');

:root {
    --body-text: #1d1d1d;
    --link-text: slategray;
    --text-help: #3f4548;
    --main-navbar-text: white;
    --timeline-item-background: #F8E2C1;
    --poster-bg: url(https://raw.githubusercontent.com/scanime/kanka/main/css/western/wanted-poster.jpg); /* A wanter poster is when you thought you type wanted poster and somehow didn't */
    --button-bg: url(https://raw.githubusercontent.com/scanime/kanka/main/css/western/wood-button.png);
    --nail-img: url(https://raw.githubusercontent.com/scanime/kanka/main/css/western/nail2.png);
}

h1, h2, h3, h4 { font-family: 'Arbutus', cursive; }

.btn-default, .btn-primary, .btn-warning, .btn-danger, .btn-success {
    background-color: unset;
    text-shadow: -1px 1px rgb(0 0 0 / 100%), 1px -1px rgb(0 0 0 / 50%);
    background-image: var(--button-bg);
    background-size: cover;
    color: white;
    box-sizing: border-box;
}
.btn-default {
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 50%), inset 2px 0 0 rgb(0 0 0 / 50%), inset 0 2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%)!important;
}
.btn-default:hover, .btn-default:active {
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 50%), inset 2px 0 0 rgb(0 0 0 / 50%), inset 0 2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%)!important;
    text-shadow: 1px -1px rgb(0 0 0 / 100%), -1px 1px rgb(0 0 0 / 50%);
}

.btn-warning {
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 50%), inset 2px 0 0 rgb(0 0 0 / 50%), inset 0 2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%), inset 0 0 0 3px rgba(224, 142, 11, 0.8)!important;
    border-color: rgba(224,142,11,0.5);
}
.btn-warning:hover, .btn-warning:active {
    box-shadow: inset 0 2px 0 rgb(0 0 0 / 50%), inset -2px 0 0 rgb(0 0 0 / 50%), inset 0 -2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%), inset 0 0 0 3px rgba(224, 142, 11, 1)!important;
    text-shadow: 1px -1px rgb(0 0 0 / 100%), -1px 1px rgb(0 0 0 / 50%);
    border-color: rgba(224,142,11,0.8);
}

.btn-danger {
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 50%), inset 2px 0 0 rgb(0 0 0 / 50%), inset 0 2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%), inset 0 0 0 3px rgba(170,74,36, 0.8)!important;
    border-color: rgba(170,74,36,0.5);
}
.btn-danger:hover, .btn-danger:active {
    box-shadow: inset 0 2px 0 rgb(0 0 0 / 50%), inset -2px 0 0 rgb(0 0 0 / 50%), inset 0 -2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%), inset 0 0 0 3px rgba(170,74,36, 1)!important;
    text-shadow: 1px -1px rgb(0 0 0 / 100%), -1px 1px rgb(0 0 0 / 50%);
    border-color: rgba(170,74,36,0.8);
}

.btn-success {
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 50%), inset 2px 0 0 rgb(0 0 0 / 50%), inset 0 2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%), inset 0 0 0 3px rgba(42,178,123, 0.8)!important;
    border-color: rgba(42,178,123,0.5);
}
.btn-success:hover, .btn-success:active {
    box-shadow: inset 0 2px 0 rgb(0 0 0 / 50%), inset -2px 0 0 rgb(0 0 0 / 50%), inset 0 -2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%), inset 0 0 0 3px rgba(42,178,123, 1)!important;
    text-shadow: 1px -1px rgb(0 0 0 / 100%), -1px 1px rgb(0 0 0 / 50%);
    border-color: rgba(42,178,123,0.8);
}

.btn-primary {
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 50%), inset 2px 0 0 rgb(0 0 0 / 50%), inset 0 2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%), inset 0 0 0 3px rgba(54,127,169, 0.8)!important;
    border-color: rgba(54,127,169,0.5);
}
.btn-primary:hover, .btn-primary:active {
    box-shadow: inset 0 2px 0 rgb(0 0 0 / 50%), inset -2px 0 0 rgb(0 0 0 / 50%), inset 0 -2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%), inset 0 0 0 3px rgba(54,127,169, 1)!important;
    text-shadow: 1px -1px rgb(0 0 0 / 100%), -1px 1px rgb(0 0 0 / 50%);
    border-color: rgba(54,127,169,0.8);
}

.entity-name, .entity-name-icons { font-family: 'Rye'; text-shadow: 4px 4px 2px #2c2e38, 1px 1px 1px #000, -1px -1px 1px #fff; color: slategray; letter-spacing: 0.05em; }
.breadcrumb>li { font-family: 'Arbutus'; letter-spacing: 0.1em; text-shadow: 0 0 3px #fff, 0 0 5px #fff; font-variant: small-caps; }
.entity-tags a { text-shadow: none!important; font-family: 'Arbutus'; letter-spacing: 0.1em; }

/** Edit entry **/
.nav-tabs-custom>.nav-tabs>li.active { }
.nav-tabs-custom>.nav-tabs>li { border-top: none; background-image: var(--poster-bg); background-position: top center; }
.nav-tabs-custom>.nav-tabs>li>a { background-image: linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2),rgba(0,0,0,0.5)), var(--poster-bg); }
.nav-tabs-custom>.nav-tabs>li>a:hover { background-image: linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2),rgba(0,0,0,0.5)), var(--poster-bg); }
.nav-tabs-custom>.nav-tabs>li.active>a { background-image: var(--poster-bg); }
.tab-content > .tab-pane.active {background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 10%, rgba(255,255,255,0.35) 90%, rgba(255,255,255,0) 100%); margin-left: -10px; padding-left: 10px; margin-right:-10px; padding-right:10px;}
#entity-form section.content > div.nav-tabs-custom > ul { background: none; }
#entity-form section.content > div.nav-tabs-custom > div.tab-content { background-image: var(--poster-bg); box-shadow: 0 0 5px #000; background-size: cover; background-repeat: no-repeat;  }
form#map-marker-form > .nav-tabs-custom, form#map-marker-form .nav-tabs-custom .tab-content { background: var(--poster-bg); }
form#map-marker-form > .nav-tabs-custom>.nav-tabs { background-color: rgba( 255, 255, 255, 0.5 ); }

/** timelines **/
.timeline>li>.timeline-item { background-image: var(--poster-bg); background-position: bottom center; background-size: cover; }

div.entity-submenu .box, div.box-solid {
    border: 1px solid rgba(0,0,0,0.33);
    box-shadow: 0 0 5px #000;
    background-image: var(--poster-bg);
    background-repeat: no-repeat;
    background-size: cover;
}

#app, .content-wrapper {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/western/wood.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.main-header { background: none; }
.sidebar-mini.sidebar-collapse .main-sidebar .main-header { background: inherit; }

.content-wrapper a:not(.btn):not(.sidebar-toggle):not(.dropdown-toggle):not(.mention) {
    font-family: 'Arbutus';
    letter-spacing: 0.1em;
    text-shadow: 0 0 3px #fff, 0 0 5px #fff;
    font-variant: small-caps;
}

.box-header>.box-tools > a { color: #444; }
.box-header>.box-tools > a:hover { color: #444; text-shadow: 0 0 3px #fff, 0 0 5px #fff; background: unset!important; }

div.entity-submenu .box, div.box-solid {border: none;box-shadow: 0 0 5px #000, 4px 4px 8px #000;}
.entity-header.with-entity-banner .entity-name-header > h1.entity-name { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.entity-header.with-entity-banner .entity-header-text .entity-header-sub, .entity-header.with-entity-banner .entity-name-header .entity-name-icons { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000!important; }
.entity-header .entity-breadcrumb > li > a { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000!important; }
.entity-breadcrumb li:last-child { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.box-header.with-border { border: none; }
.box-body, .box-header { background: rgba(255,255,255,0.35)!important; }
.box .nav-stacked>li { border-color: var(--body-text); }
.nav-stacked > li > a { border-right: solid 3px transparent; }
.nav-stacked > li.active > a:not(.icon)::before { font-family: RPGAwesome; -webkit-font-smoothing: antialiased; speak: none; content: ""; }
.nav>li>a:active, .nav-stacked>li.active>a, .nav>li>a:focus, .nav>li>a:hover { border-left-color: black!important; border-right: solid 3px black; background: linear-gradient(90deg, rgba(108,67,44,0.75) 0%, rgba(108,67,44,0) 10%, rgba(108,67,44,0) 90%, rgba(108,67,44,0.75) 100%); }

.entity-modification-history .help-block { color: white; }

.sidebar-section-box {
    background-image: var(--poster-bg);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 10px 10px 5px -5px rgb(0 0 0 / 51%);
    background-position: top center;
    padding: 5px;
}

/** Dashboard entity preview **/
.panel-default > .panel-heading { border-bottom-color: rgba(0,0,0,0.5); }
.pinned-entity.preview { background-image: none; }
.panel .panel-body .preview:before { background: none; }
.panel.panel-default.widget-preview { background-image: var(--poster-bg); background-position: top center; box-shadow: 0 0 5px #000; border: 1px solid rgba(0,0,0,0.33); }
.widget .panel-heading { background-image: linear-gradient(rgba(0,0,0,0), rgba(255,255,255,0.35));}
.widget .panel-body { background: rgba(255,255,255,0.35); }
.widget .panel-heading h3.panel-title > a { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000!important; }

/** Navbar & Search **/
.navbar-static-top { padding-bottom: 10px; background-image: url("https://raw.githubusercontent.com/scanime/kanka/main/css/western/woodbeam.png"); background-size: auto 100%; }
.main-header { background: none; }
.sidebar-mini.sidebar-collapse .main-sidebar .main-header { background: inherit; }
.main-header .navbar { background-color: unset!important; }
.main-header .navbar .nav>li>a:hover, .main-header .navbar .sidebar-toggle:active, .main-header .navbar .sidebar-toggle:focus, .main-header .navbar .sidebar-toggle:hover { background-color: unset!important; text-shadow: 0 0 3px #fff, 0 0 5px #fff; }
.main-header .navbar .nav .open>a { background-color: inherit; }
.main-header .navbar .nav .open>a > img {box-shadow: 2px 2px 5px #fff, -2px -2px 5px #fff, -2px 2px 5px #fff, 2px -2px 5px #fff; }
.main-header .navbar .sidebar-toggle:hover, .main-header .navbar .nav>li>a:hover, .main-header .navbar .nav>li>a:active { color: white; }
#live-search { border: 1px solid rgba(0,0,0,0.35)!important; color: black; }
div#live-search_listbox { box-shadow: 10px 10px 5px -5px rgb(0 0 0 / 51%); background-image: var(--poster-bg); background-attachment: fixed; background-position: bottom left; }
div#live-search_listbox > div.tt-dataset-entityList > a.list-group-item { background-color: rgba(255,255,255,0.5)!important; }
#live-search::placeholder, #live-search:-ms-input-placeholder, #live-search::-ms-input-placeholder { color: whitesmoke; opacity: 1; }
li.dropdown.notifications-menu > a, .navbar > a.sidebar-toggle { color: rgba(0,0,0,0.85)!important; text-shadow: 2px 2px 3px rgb(255 255 255 / 50%); }

.table-striped>tbody>tr:nth-of-type(odd) {background-color: rgba(255,255,255,0.5); }
.table-striped>tbody>tr:nth-of-type(even) {background-color: rgba(255,255,255,0.25); }
.table-hover tbody tr:hover { background: linear-gradient(90deg, rgba(108,67,44,0.75) 0%, rgba(108,67,44,0) 10%, rgba(108,67,44,0) 90%, rgba(108,67,44,0.75) 100%); }

/* Cool nail */
.box-header>.box-tools, .box-header>h3.box-title { padding-top: 30px; }
.entity-note .box-header.with-border { display: inherit; }
.box-header::before { background-image:var(--nail-img); display: block; content: ""; height: 30px; margin-bottom: -30px; background-repeat:no-repeat; background-size:contain; margin-left:50%; margin-top: -30px; }

/* Cowboy hats instead of rocket ships? And no glow */
.fa-rocket:before { content: "\f8c1"; }
.entity-submenu > .box-body > ul.nav > li > a > span.label[data-original-title="Boosted campaign feature"] { text-shadow: none; } /* no glowing boosted icon */