dracula-theme.css

dracula-theme.css

/* Casual stab at modifying the Bookstack main theme using the Dracula color scheme. Download and use at your own risk. */
/* https://github.com/domainzero/bookstack-dark-theme */
/* optional */
/* uppercase titles */
.page-content h1{text-transform:uppercase}
h1.break-text{text-transform:uppercase}


/* Dracula stuff */
/* background */
:focus{outline-style:none!important}
html {background-color: #282b36;}
body {font-family: "Roboto", sans-serif!important;background-color: #282b36; color:#f8f8f2}
html.shaded {background-color: #282a36;}
.flex.sidebar+.flex.content{background-color: #282a36;}
.flex.sidebar {background-color: #282a36;}
body.shaded {background-color: #282a36;}
.toolbar-container {background-color:#282a36}
.search-box input{background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.3)}
hr{background-color:rgba(0,0,0,.2)}
.faded-small, .primary-background-light {background-color: #282a36;}
.floating-toolbox{background-color:#282a36}
.editor-toolbar{background-color:#282a36;border-bottom:1px solid rgba(0,0,0,.2);}
.title-input.page-title .input{background-color:#282a36;}
#markdown-editor .markdown-editor-wrap {background-color: #282a36;}
.card{  background: transparent;box-shadow:none}
.comment-box {background-color: #333644;}
.suggestion-box {background-color: #5e606a;}
.suggestion-box li.active {background-color: #9b9ca3;}
[notification] {background-color: #1d1f26;}

/* text */
.text-page {color: #8be9fd;}
.text-book {color: #50fa7b;}
.text-chapter {color: #ffb86c;}
.text-primary, p.primary, p .primary, span.primary:hover, .text-primary:hover, .text-button, .text-button:hover, .text-button:focus {color: #f8f8f2;}
h1, h2, h3, h4, h5, h6 {color: #f8f8f2;}
h1 {font-weight: 900}
h2, h3, h4, h5, h6 {font-weight: 700}
.faded a, .faded button, .faded span, .faded span>div {color: #f8f8f2;}
.entity-list .page.draft .text-page {color: #bd93f9;}
.card .entity-list-item:not(.no-hover):hover {background-color: #44475a !important;}
.card .entity-list-item:not(.no-hover):hover .text-muted {color: white !important;}
.entity-list-item:not(.no-hover):hover, .icon-list-item:not(.no-hover):hover {background-color: #44475a;color:#f8f8f2 !important;}
.setting-list-label {color: #999;}
.tag-item .tag-value {background-color: rgba(255, 255, 255, 0.1);}
.tag-item a {color: #f8f8f2;}
.text-small {color: #777 !important;}
[notification="success"] svg {fill: #0f7d15 !important;}
.entity-list-item:focus, .icon-list-item:focus {background-color:#44475a;}

/* border changes */
header {border-bottom: 0;}
#header{background-color:transparent!important}
.flex.sidebar+.flex.content {border-left: 0;}
.card h3{ border-bottom:0}
.fake-input, .input-base, input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=text], input[type=url], select, textarea{border: 1px solid #44475a;color: #f8f8f2;background-color: rgba(0,0,0,.2);}
.activity-list-item {border-bottom:1px solid rgba(0,0,0,.2)}
.floating-toolbox{border:0}
#markdown-editor .markdown-editor-wrap{border: 1px solid rgba(0,0,0,.2);}

/* scrollbar
*********************************/
.scrollbar{margin-left: 30px;float: left;height: 300px;width: 65px;background: #F5F5F5;overflow-y: scroll;margin-bottom: 25px;}
.force-overflow{min-height: 450px;}
#wrapper{text-align: center;width: 500px;margin: auto;}
#style-2::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;}
#style-2::-webkit-scrollbar{width: 12px;background-color: #F5F5F5;}
#style-2::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #D62929;}

/* sidebar
******************************
pages */
.book-tree .sidebar-page-list .page {color: #8be9fd!important;}
/* chapters */
.book-tree .sidebar-page-list .chapter {color: #ffb86c!important;}
/* books */
.book-tree .sidebar-page-list .book {color: #50fa7b!important;}

.input-base.invalid, .input-base.neg, .invalid.fake-input, .neg.fake-input, input.invalid[type=date], input.invalid[type=email], input.invalid[type=number], input.invalid[type=password], input.invalid[type=search], input.invalid[type=text], input.invalid[type=url], input.neg[type=date], input.neg[type=email], input.neg[type=number], input.neg[type=password], input.neg[type=search], input.neg[type=text], input.neg[type=url], select.invalid, select.neg, textarea.invalid, textarea.neg {border: 1px solid #ff5555;}
.text-neg, p .neg, p.neg, span.neg {color: #ff5555;}

.dropdown-container ul {background-color: #282a36;box-shadow: 0 0 2px 0 rgba(0,0,0,.1);border-radius: 1px;border: 1px solid #44475a;color: #f8f8f2;}
.dropdown-container ul a, .dropdown-container ul button {color:#f8f8f2}
.text-primary, p.primary, p .primary, span.primary:hover, .text-primary:hover, a, a:hover, a:focus, .text-button, .text-button:hover, .text-button:focus {color: #f8f8f2!important;fill:#f8f8f2!important;}
.dropdown-container ul a:hover {background-color: #44475a;}
.outline>input:active, .outline>input:focus {border-bottom: 2px solid #8be9fd;}
.card.drag-card>div .outline input {background-color: #282a36;color:#f8f8f2}
.card.drag-card .handle {background-color:#282a36;}
.card.drag-card {border: 1px solid #44475a;}
.card.drag-card .drag-card-action:hover, .card.drag-card .handle:hover {background-color: #44475a;}

pre {background-color: #44475a;border: 1px solid #ddd;}
pre:after {width: 0px;border-right:0}

.sortable-page-list li {border: 1px solid #6272a4;}
.sortable-page-list, .sortable-page-list ul {background-color: #282b36;}
.well {background-color: #282a36;border:0;}
.button.outline.page {border-color: #8be9fd;color: #8be9fd;}
.button.outline.book {border-color: #50fa7b;color: #50fa7b;}

.featured-image-container {background: none}
.floating-toolbox .tabs {border-right: 1px solid #44475a;}
.scroll-box {border: 1px solid #44475a;}
.scroll-box .scroll-box-item {border-bottom: 1px solid #44475a;}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #282a36;}
::-webkit-scrollbar-thumb {background: #44475a;}
::-webkit-scrollbar-thumb:hover {background: #50fa7b;}
.floating-toolbox .tabs svg {fill: rgba(248, 248, 242, 1);}

.entity-selector .entity-list > div {background-color:#282a36;}
.entity-selector .entity-list {color:#f8f8f2;background-color: #282a36}

/* WSIWYG editor fixes */
#tinymce {background-color: #282a36!important;}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {background-color: #282a36!important;}
.mce-menubtn button {color: #f8f8f2!important;}
.mce-ico {color:#f8f8f2!important;}
.mce-grid-border a:hover, .mce-grid-border a.mce-active {border-color: #8be9fd;background: #bdd6f2;}
.mce-menu-item.mce-selected .mce-text, .mce-menu-item.mce-selected .mce-ico {color: #f8f8f2!important;}
.mce-widget, .mce-textbox {color: #ffffff!important;}
.mce-label {text-shadow: none!important;}
.popup-body {background-color: #282a36!important;}
th {background-color: #44475a}
.pos .svg-icon {fill:#282a36}

ul > li > a {color: #8be9fd!important}
.page-content > div > a {color: #8be9fd!important}

/* pdf print fixes */
@page{margin:0cm!important;size: A4}
@media print {html, body {width: 210mm;height: 297mm;}

/* one offs */
.entity-list {background-color:#282a36 !important;}
.svg-icon {fill:#f8f8f2!important;}
.breadcrumb-listing .breadcrumb-listing-toggle:hover {fill: #f8f8f2;border-color: transparent;}
.icon-list.text-primary {fill:#f8f8f2!important}
#export-menu {color:#f8f8f2!important;}
.book-tree .sidebar-page-list .entity-list-item.selected {background-color:#44475a;}
/* other changes */
.code-base, code, span.code {border: 1px solid #6272a4;border-radius: 0px;}
.button.pos, input[type=button].pos, input[type=submit].pos {background-color: #50fa7b;color: #282a36;text-transform: uppercase;border: 1px solid #52a256;vertical-align: top;}
table.table tr:hover {background-color: #44475a;}
table.table tr {border-bottom: 1px solid rgba(0,0,0,.2);}
blockquote{border-left: 4px solid #8be9fd;background-color: #282a36!important;}
.entity-selector .entity-list-item {background-color:#282a36;}
.entity-selector {border:0}

/* PUT THIS IN YOUR "Custom HTML Head Settings"! 
 * Unless you don't want the Roboto font - then remove the next line.
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
.title-input.page-title input[type=text]{background:#44475a}
.floating-toolbox div[toolbox-tab-content]{background-color:#282a36}
html.dark-mode .card.drag-card{background-color:#44475a}
html.dark-mode .card.drag-card .handle{background-color:#44475a}
.card.drag-card .outline input{background-color:#282a36;color:#f8f8f2}
#header{background-color:#282a36!important}
html.dark-mode .fake-input,html.dark-mode .input-base,html.dark-mode input[type=color],html.dark-mode input[type=date],html.dark-mode input[type=email],html.dark-mode input[type=number],html.dark-mode input[type=password],html.dark-mode input[type=search],html.dark-mode input[type=text],html.dark-mode input[type=url],html.dark-mode select,html.dark-mode textarea{color:#f8f8f2;background-color:#44475a}
html.dark-mode{background-color:#282a36}
html.dark-mode .card{background-color:transparent}
html.dark-mode body{color:#6272a4;background-color:transparent}
.markdown-editor-display{background-color:#282a36!important}
html.markdown-editor-display.dark-mode body{background-color:#282a36}
.logo-text{color:var(--color-primary)!important}
html.dark-mode code{background-color:#44475a}
html.dark-mode pre{background-color:#44475a}
.title-input.page-title input[type=text]{background:#44475a}
html.dark-mode .editor-toolbar{background-color:#282a36}
html.dark-mode .primary-background-light{background:#282a36}
*/