light-sepia.css

/***************************************************************
****************************************************************
****************************************************************
************************ LIGHT - SEPIA *************************
****************************************************************
****************************************************************
***************************************************************/

.light-theme,
html[data-theme=light] {
  --ls-search-background-color: #f1ece5;
  --ls-primary-background-color: #f5f1ef;
  --ls-secondary-background-color: #e8e3db;
  --ls-tertiary-background-color: #e7e1d7;
  --ls-quaternary-background-color: #e1dbd0;
  --ls-block-properties-background-color: var(--ls-secondary-background-color);
  --ls-block-bullet-border-color: #dedede;
  --ls-block-bullet-color: rgba(67, 63, 56, 0.25);
  --ls-guideline-color: rgba(46, 27, 5, 0.08);
  --ls-primary-text-color: #433F38;
  --ls-title-text-color: var(--ls-primary-text-color);
  --ls-link-text-color: #72866c;
  --ls-link-text-hover-color: #949e91;
  --ls-link-ref-text-color: #9f5d5d;
  --ls-link-ref-text-hover-color: #743d3d;
  --ls-tag-text-color: var(--ls-link-ref-text-color);
  --ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color);
  --ls-page-checkbox-color: #b0c3ad;
  --ls-page-checkbox-border-color: var(--ls-page-checkbox-color);
  --ls-page-blockquote-border-color: #7d9bb1;
  --ls-block-highlight-color: #d4d1cd;
  --ls-icon-color: #c1bdb7;
  --color-level-1: var(--ls-secondary-background-color);
  --color-level-2: var(--ls-tertiary-background-color);
}


/***************************************************************
***************************** TOP ******************************
***************************************************************/


/* gradient on top for aesthetics */
html.is-electron .cp__header {
  background-color: transparent;
}

.light-theme .cp__sidebar-main-content:before {
  background: linear-gradient(to bottom, rgba(241, 236, 229, .7) 0%, rgba(241, 236, 229, 0) 100%);
}

.light-theme .cp__sidebar-main-content:after {
  background: linear-gradient(to top, rgba(241, 236, 229, .7) 0%, rgba(241, 236, 229, 0) 100%);
}


/* < > buttons */

.light-theme a[title="Go Back"],
.light-theme a[title="Go Forward"] {
  background: rgba(241, 236, 229, 1);
}

.light-theme a[title="Go Back"]:hover,
.light-theme a[title="Go Forward"]:hover {
  background: #fff;
}


/* search-field */

.light-theme #search_field {
  background: linear-gradient(to right, rgba(241, 236, 229, 1) 0%, rgba(241, 236, 229, .7) 200px, rgba(241, 236, 229, 0) 100%);
  transition: background .3s;
}

.light-theme #search_field:focus {
  box-shadow: 0px 0px 20px 0px rgba(252, 250, 246, .8);
}


/***************************************************************
************************** MAIN AREA ***************************
***************************************************************/


/* title menu ... */

.light-theme [title="More options"] svg {
  color: #bd7467;
}


/* text mark/highlight */

.light-theme mark {
  background: #a8b9b1;
}


/* page reference */

.light-theme .page-reference {
  background: rgba(232, 227, 219, .6);
}

.light-theme .page-reference:hover {
  background: #e8e3db;
}

.light-theme .references-blocks .page-reference {
  background: none;
}

.light-theme .references-blocks .page-reference:hover {
  background: #d5d3c9;
}

.light-theme .page-reference .text-gray-500 {
  opacity: 1;
  color: #cac4ae;
}


/* block reference */

.light-theme .block-ref {
  background: rgba(142, 40, 40, .5);
  color: #fff;
  border-bottom-color: rgba(64, 31, 31, .5);
}

.light-theme .block-ref a {
  color: #fff;
}


/* checkbox */

.light-theme .form-checkbox {
  background-color: var(--ls-page-checkbox-color);
}

.light-theme .marker-switch {
  color: #6b6760;
  background: #e0ded7;
}

.light-theme .marker-switch:hover {
  background: #dad1c1;
}


/***************************************************************
************************ RIGHT SIDEBAR *************************
***************************************************************/

.light-theme .cp__right-sidebar.is-open {
  background: rgba(128, 122, 92, 0.05);
}


/***************************************************************
**************************** MISC ******************************
***************************************************************/


/* dotted bg */

.light-theme #app-container {
  background-image: radial-gradient(#cec7bf 5%, #f1ece5 5%) !important;
  background-position: 0 0;
  background-size: 25px 25px;
}

.light-theme textarea {
  caret-color: #cc515c;
}

.light-theme .ls-block.selected {
  border-bottom-color: #c7c2bc;
}

.light-theme ::selection {
  background: #cedbcc;
}

.cp__sidebar-main-layout {
  background-color: transparent;
}