Fantasy Parchment en

Installations 91 Likes 26

Replace the plain background with a fantasy-inspired parchment. The header bar and all containers are updated as well, with recent updates also applying the theme to tables, entity grids, and the footer. Text colors are tweaked a little bit to appear more clearly on the new backgrounds. For an additional fantasy feel, try it with Jay's Calligraphic Headings theme or my Stone Buttons or Marble Buttons theme!

Credits

Parchment background image by Phil. Available at https://www.myfreetextures.com/vintage-paper-texture-with-design/.

Latest version 1.6.8 View content

Released 2 months ago

Minor fixes to entity grid backgrounds

Plugin CSS for 1.6.8


:root {
    --body-text: #3f4548;
    --link-text: #296282;
    --text-help: #3f4548;
    --half-fade: rgba( 255, 255, 255, 0.5 );
    --bg-gradient: linear-gradient(rgba(0,0,0,0), rgba(255,255,255,0.5));
    --bg-parchment: url("https://raw.githubusercontent.com/scanime/kanka/main/css/fantasy%20parchment/parchment4.jpg");
}
/** Parchment backgrounds **/
#app { background-image: var(--bg-parchment); background-position: right center; background-repeat: no-repeat; background-attachment: fixed; }
article.bg-box:has(.entity-content), div.bg-box.post:not(:has(.entity-content.hidden)), .bg-box:has( > .grid.grid-cols-2 > span > a ), .bg-box:is(#character-appearance, #character-personality) { border: 1px solid rgba(0,0,0,0.33);box-shadow: 0 0 5px #000;background-image: var(--bg-parchment); }
.bg-box.post > .entity-content, .bg-box.box-entity-entry > .entity-content, .bg-box:is(#character-appearance, #character-personality) .entity-content { background: var(--half-fade) }
.bg-box > .grid.grid-cols-2:has( > span > a ) { background: var(--half-fade); margin: -16px; padding: 16px;}
.bg-box.box-entity-attributes { background-color: unset; }


.content-wrapper { background-image: var(--bg-parchment); background-position: right center; background-repeat: no-repeat; background-attachment: fixed; }
.entity-submenu .bg-box { background-image: var(--bg-parchment); }
.entity-submenu div > ul.entity-menu {border: 1px solid rgba(0,0,0,0.33);box-shadow: 0 0 5px #000; background: var(--half-fade) }
div.box-body {background-color: rgba(255,255,255,0.5);}
article.bg-box > div.box-header { background-image: linear-gradient(rgba(0,0,0,0), rgba(255,255,255,0.5)); border-bottom: 0; }
#app > div > section.content > div.box { background-image: var(--bg-parchment); background-position: top center; box-shadow: 0 0 5px #000; }
div.box.no-border.datagrid-filters > div { background-image: var(--bg-gradient); border-bottom: 0; }
.box .box-footer { background-image: var(--bg-gradient); }
.pinned-entity.preview { background-image: none; }
.panel .panel-body .preview:before { background: none; }

/** Timelime **/
.timeline>li>.timeline-item .timeline-item-head, .timeline-era-head { padding: 8px; background-color: rgba(0,0,0,0);background-image: var(--bg-gradient);border-bottom: 0;}
.timeline>li>.timeline-item .timeline-item-body, .timeline-era-body { padding: 8px; background-color: rgba(255,255,255,0.5); }
.timeline>li>.timeline-item .bg-box { background: none; padding: 0; gap: 0; margin-bottom: 0; }
.timeline>li>.timeline-item { background-image: var(--bg-parchment); background-position: top center; box-shadow: 0 0 5px #000; border: 1px solid rgba(0,0,0,0.33); margin-bottom: 1.25rem; padding-bottom: 0; }
ul.timeline > li > div.timeline-item > div.box { background-image: var(--bg-parchment); margin-bottom: 0; }
ul.timeline > li > div.timeline-item > div.box > div.box-header { background-image: linear-gradient(rgba(0,0,0,0), rgba(255,255,255,0.5));
    border-bottom: 0; }
body.kanka-entity-timeline .entity-story-block > .bg-box { padding: 0; gap: 0; border: 1px solid rgba(0,0,0,0.33); box-shadow: 0 0 5px #000; background-image: var(--bg-parchment); }
.timeline-era.gap-2 { padding: 0; gap: 0; }

/** Navbar & Search **/
header#header.bg-navbar { padding-bottom: 10px; background-image: var(--bg-parchment); background-position: top center; }
header#header.bg-navbar > nav {height: 4.5rem;background-image: url("https://raw.githubusercontent.com/scanime/kanka/main/css/fantasy%20parchment/tear4.png");background-size: auto 101%;align-items:  flex-start;padding-top: 0.25rem;}
aside.search-drawer { margin-top: 4rem; background-image: var(--bg-parchment); background-position: top right; box-shadow: 0 0 5px black; }
aside.search-drawer > .bg-lookup { background-color: rgba(255,255,255,0.5); }

/** Edit entry **/
.nav-tabs-custom { background-color: unset!important; }
.nav-tabs-custom .nav-tabs>li.active { }
.nav-tabs-custom .nav-tabs>li { border-top: none; background-image: var(--bg-parchment); 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(--bg-parchment); }
.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(--bg-parchment); }
.nav-tabs>li>a { box-shadow: 3px 2px 2px rgba(0,0,0,0.5); color: hsl(var(--bc)); border-left: 1px solid rgba(0,0,0,0.25); border-top: 1px solid rgba(0,0,0,0.25);  }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { background-image: var(--bg-parchment); --tw-bg-opacity: 0; box-shadow: 3px 2px 2px rgba(0,0,0,0.5); }

#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(--bg-parchment); background-position: top center; box-shadow: 0 0 5px #000; }
form#map-marker-form > .nav-tabs-custom, form#map-marker-form .nav-tabs-custom .tab-content { background: var(--bg-parchment); }
form#map-marker-form > .nav-tabs-custom>.nav-tabs { background-color: rgba( 255, 255, 255, 0.5 ); }

div.widget:is(.widget-preview, .widget-random, .widget-recent, .widget-calendar) > .bg-box { background-image: var(--bg-parchment); background-position: top center; box-shadow: 0 0 5px #000; border: 1px solid rgba(0,0,0,0.33); }
div.widget:is(.widget-preview, .widget-random, .widget-calendar) > .bg-box > .widget-header { background-color: var(--half-fade); }
div.widget.widget-calendar > .bg-box > .widget-header + div.p-4 { background-color: var(--half-fade); }
div.widget:is(.widget-preview, .widget-random) > .bg-box > .widget-body { padding: 0; background-color: var(--half-fade); }
div.widget.widget-recent > div > h4.text-lg, div.widget.widget-recent .widget-recent-list { background-color: var(--half-fade); }
div.widget:is(.widget-preview, .widget-random) > .bg-box > .widget-body > div > .entity-content, .widget-advanced-members { padding: 1rem; }
.dashboard-widgets a.preview-switch { background-size: contain; background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/fantasy%20parchment/tear-small.png); }
.dashboard-widgets .gradient-to-base-100 { display: none; background: none; }

.nav>li>a:active, .nav>li>a:focus, .nav>li>a:hover { background: rgba(255,255,255,0.25); }

/** Lighten hover **/
#app > div > section.content > div.row > div.col-md-3 > div > div.box-body > ul > li > a:hover, .table-hover>tbody>tr:hover { background-color: rgba(255,255,255,0.25); }

/** add little glow to some links **/
.content-wrapper a:not(.btn):not(.sidebar-toggle):not(.dropdown-toggle):not(.mention):not(.btn2) { text-shadow: 0 0 3px rgba(255,255,255,0.75), 0 0 5px rgba(255,255,255,0.75); font-variant: small-caps; font-weight: 600; }
.entity-header-text a:not(.btn):not(.btn2) { text-shadow: none!important; }
.entity-tags > a { text-shadow: unset!important; }
.entity-submenu > .box-body > ul.nav > li > a > span.label[data-original-title="Boosted campaign feature"] { text-shadow: none; } /* no glowing boosted icon */

.sidebar-section-box { box-shadow: 0 0 10px #000; background-image: var(--bg-parchment); }
.sidebar-section-box .sidebar-section-title { padding: 5px; }
.sidebar-section-box .sidebar-section-title, .sidebar-section-box .sidebar-elements { background-color: var(--half-fade); }
.sidebar-section-box .sidebar-elements { margin: 0; padding: 0 5px; }

table.table {background-image: var(--bg-parchment);border: 1px solid rgba( 0,0,0,0.25 );}
table.table:not( .table-striped ) tbody {background-color: rgba(255,255,255,0.5);}
table.table-striped>tbody>tr:nth-of-type(odd) {background-color:  var(--half-fade); }
table.table-striped>tbody>tr:nth-of-type(even) {background-color: rgba(255,255,255,0.25); }
table.table.bg-box.mb-2 { margin-bottom: 0; padding-bottom: 0.5rem; }
table.table thead {background-color: rgba(255,255,255,0.25); }

/** Entity Grid **/
.entities-grid > div.entity, .entities-grid > div.stack > div.entity { background: var(--bg-parchment); box-shadow: 0 0 5px black; }
.entities-grid div.entity.block.entity-stack > .bg-box { background: var(--half-fade); }
.entities-grid > .stack > .entity.entity-stack > .block.bg-box { background-color: transparent; }
.entities-grid > div.entity > a.block.text-center, .entities-grid > div.stack > div.entity > a.block.truncate.text-center { background: var(--half-fade); }
.entities-grid div.entity.block:hover { box-shadow: 2px 2px 7px black; }
.entities-grid > a.entity:first-of-type { background: var(--bg-parchment); box-shadow: 0 0 5px black; }
.entities-grid > a.entity:first-of-type:hover { box-shadow: 2px 2px 7px black; }
.entities-grid > a.entity:first-of-type > div.bg-box.block { background: var(--half-fade); }

/** Footer **/
.main-footer {  background: var(--half-fade); }

/** Tooltips **/
.tippy-box { background: var(--bg-parchment); border: 1px solid rgba(0,0,0,0.33); box-shadow: 2px 2px 5px #000; }
.tippy-content { background: var(--half-fade); }
.tippy-box[data-placement^=top]>.tippy-arrow:before { border-top-color: black; }
.tippy-box[data-placement^=bottom]>.tippy-arrow:before { border-bottom-color: black; }

/** Entity profiles **/
body.entity-profile div.bg-box:is( .box-entity-profile, .character-appearances, .character-personalities ) { column-gap: 0; row-gap: 0; padding: 0; background-image: var(--bg-parchment); border: 1px solid rgba(0, 0, 0, 0.33); box-shadow: 0 0 5px #000; }
body.entity-profile div.bg-box:is( .box-entity-profile, .character-appearances, .character-personalities ) > * { background: var(--half-fade); padding: 16px; }