middle-east-night.css

/* 
  Middle East - Night
  Typora RTL theme
  design: isapanah.com
  date: 2019
  version: 1.1.0
*/

@import url("./middle-east/code-dracula.css");

/*
  Vazir provided by Rastikerdar
  Downloaded from `https://github.com/rastikerdar/vazir-font`
*/
@font-face {
  font-family: "Vazir";
  font-style: normal;
  font-weight: normal;
  src: local("Vazir Regular"), url("./middle-east/Vazir.woff") format("woff");
}

@font-face {
  font-family: "Vazir-Bold";
  font-style: normal;
  font-weight: bold;
  src: local("Vazir Bold"), url("./middle-east/Vazir-Bold.woff") format("woff");
}

/*
	Cousine provided by Steve Matteson from Google Fonts
	Downloaded from `https://fonts.google.com/specimen/Cousine`
*/
@font-face {
  font-family: "Cousine";
  font-style: normal;
  font-weight: normal;
  src: local("Cousine Regular"), url("./middle-east/Cousine-Regular.woff") format("woff");
}

/** ROOT VARIABLES **/

:root {
  --bg-color: #1e2022; /* change background */
  --text-color: #dddddd; /* change text color */
  --md-char-color: #5b5b5b; /* change color of meta characetrs like `*` in markdown */
  --meta-content-color: #757575; /* change color of meta contents like image text or link address in markdown */
  --link-color: #6bcafb; /* change color of hyperlinks */

  --primary-color: #428bca; /* primary color */
  --primary-btn-border-color: #285e8e; /* primary color for buttons */
  --primary-btn-text-color: #fff; /* primary text color for buttons */
  --accent-color: #3c3c3c; /* background accent color */

  --window-border: 1px solid #16161a; /* border for sidebar, etc*/

  --active-file-bg-color: #16161a; /* background color if list item in file tree or file list*/
  --active-file-text-color: inherit; /* text color for selected file */
  --active-file-border-color: #777; /* border color for selected file */
  --active-search-item-bg-color: #212121; /* background color for active search item */

  --side-bar-bg-color: #2b2b2b; /* change background of sidebar*/
  --item-hover-bg-color: var(--bg-color); /* background of control items when hover, like menu in sidebar*/
  --item-hover-text-color: white; /* text color upon hovering over menu items */
  --search-hit-bg-color: #428bca40;
  --search-select-text-color: var(--text-color); /* Text color for selected searched text */
  --search-select-bg-color: #428bca90; /* Background color for selected searched text */
  --rawblock-edit-panel-bd: var(--accent-color); /* Background color for inline HTML "edit panel" blocks */
  --monospace: "Cousine"; /* monospace font for codes, fences */

  --megamenu-bg-color: var(--side-bar-bg-color); /* background color for unibody megamenu */
  --megamenu-sidebar-bg-color: var(--bg-color); /* background color for megamenu sidebar */
  --megamenu-sidebar-hover-bg-color: #161819; /* background color for hovering megamenu sidebar items */
  --megamenu-sidebar-active-bg-color: #101010; /* background color for active megamenu sidebar items */
  --megamenu-button-border-color: #9292928f; /* background color for megamenu buttons */
  --megamenu-item-hover-bg-color: var(--bg-color); /* background color for hovering megamenu items */
  --megamenu-item-hover-text-color: white; /* text color for hovering megamenu items */
}

/** TAGS **/

html,
body {
  font-family: "Vazir", "Lato", sans-serif;
}

body {
  font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6, p, a, del, mark, #write p, #write a, #write del, #write mark, #write ul, #write li, #write ol,
#write table, #write tr, #write td, table, tr, td {
  direction: rtl;
}

.outline-item{
  direction: rtl;
}
.outline-h2, .outline-h3, .outline-h4,
 .outline-h5, .outline-h6 {
  margin-right: 10px !important;
}

#md-notification, #md-notification *{
  direction: ltr;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Vazir-Bold";
}

h1 {
  font-size: 1.8rem;
  margin: 1rem 0;
}

h2 {
  font-size: 1.4rem;
  margin: 0.7rem 0;
}

h3 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

h4 {
  font-size: 1.1rem;
  margin: 0.2rem 0;
}

h5 {
  font-size: 1rem;
  margin: 0;
}

h6 {
  font-size: 1rem;
  margin: 0;
}

p {
  margin: 0.5rem 0;
}

a {
  color: var(--link-color);
}

del {
  color: var(--md-char-color);
}

mark {
  padding: 2px 1px;
  background: #fee405;
}

/* Writing area -> line height */
#write {
	line-height: 1.6;
}

/* Custom list-style */
#write ol,
#write ul {
  padding-left: 2rem;
  margin: 0.5rem 0;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#write ul {
  list-style-type: disc;
}

#write ol > li,
#write ul > li {
  color: var(--primary-color);
  padding-left: 0.25em;
}

#write ol li > *,
#write ul li > * {
  color: var(--text-color);
}

#write .md-task-list-item {
  transition: all 0.3s;
}

#write .md-task-list-item > input {
  -webkit-appearance: initial;
  display: block;
  position: absolute;
  border: 1px solid var(--md-char-color);
  border-radius: 0.25rem;
  margin-top: 0.1rem;
  margin-right: -1.8rem;
  height: 1.2rem;
  width: 1.2rem;
  transition: background 0.4s;
  right: 0;
}

#write .md-task-list-item > input:focus {
  outline: none;
  box-shadow: none;
}

#write .md-task-list-item > input:hover {
  background: var(--accent-color);
}

#write .md-task-list-item.task-list-done > p {
  color: var(--md-char-color);
  text-decoration: line-through;
}

#write .md-task-list-item > input[checked]::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  height: 60%;
  width: 2px;
  transform: rotate(40deg);
  background: var(--text-color);
}

#write .md-task-list-item > input[checked]::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 25%;
  height: 30%;
  width: 2px;
  transform: rotate(-40deg);
  background: var(--text-color);
}

blockquote {
  margin: 1rem 0rem 1rem 0;
  font-family: "Vazir-Bold";
}

blockquote p::before {
  content: "";
  position: absolute;
  right: -2rem;
  height: 100%;
  width: 0.25rem;
  background: var(--primary-color);
}

blockquote p:not(:last-child):before {
  height: calc(100% + 1rem);
}

code,
.md-fences,
tt {
  font-family: "Cousine", monospace;
  font-size: 1rem;
}

code {
  border: 1px solid var(--accent-color);
  border-radius: 0.25rem;
  padding: 0 0.125rem;
}

/* Code auto-suggest list menu */
#fences-auto-suggest .active {
  background: var(--accent-color);
}

hr {
  border-color: var(--md-char-color);
}

/* YAML */
pre.md-meta-block {
  background-color: transparent;
  border-bottom: 1px solid var(--md-char-color);
  padding-bottom: 1rem;
  opacity: 0.8;
}

/* Tables */
table {
  border: 1px solid var(--md-char-color);
  margin: 1rem 0;
}

thead {
  background: #4d4d4d;
}

table tr:nth-child(2n) {
  background: var(--accent-color);
}

td,
th {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--md-char-color);
}

/* Table toolbar */
.md-table-edit {
  border-top: 1px solid var(--meta-content-color);
  margin-top: -29px !important;
  padding: 3px 0;
}

/* Table drag areas */
.typora-table-drag-area::after {
  content: "";
  position: absolute;
  border: 2px solid var(--text-color);
  opacity: 0;
  transition: opacity 0.4s;
}

#typora-table-row-tracker .typora-table-drag-area::after {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 100%;
}

#typora-table-col-tracker .typora-table-drag-area::after {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 0;
}

#typora-table-row-tracker .typora-table-drag-area:hover::after,
#typora-table-col-tracker .typora-table-drag-area:hover::after {
  opacity: 1;
}

/* Table of contents */
.md-toc-tooltip {
  z-index: 10;
}

span.md-toc-item {
  font-size: 1.1rem;
  color: var(--primary-btn-border-color);
}

span.md-toc-h1 {
  font-family: "Vazir-Bold";
  font-size: 1.3rem;
}

span.md-toc-h2 {
  font-size: 1.2rem;
}

/* Footnote */
sup.md-footnote {
  font-family: "Vazir-Bold";
  font-size: 0.8rem;
  padding: 0 4px;
}

.footnotes, .footnotes-area {
  direction: rtl;
}

span.md-def-split {
  min-width: 1ch;
}

.md-def-name::before,
.md-def-name::after {
  color: var(--meta-content-color);
}

.md-def-footnote .md-def-name:before, .md-def-name:before {
  content: ']: '
}

.md-def-name:after {
  content: '[^ ';
}
/* Writing area */
#write {
  width: 90%;
  max-width: 700px;
}

/* Fill whole width of container */
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6,
#write p,
#write pre {
  width: auto;
}

/* Header prefix symbol */
/* Disable default header symbol */
#write h3.md-focus::before,
#write h4.md-focus::before,
#write h5.md-focus::before,
#write h6.md-focus::before {
  border: none;
  border-radius: 0;
  left: auto;
  float: none;
  padding: 0;
  vertical-align: baseline;
  line-height: 20px;
}

#write h1::before,
#write h2::before,
#write h3::before,
#write h4::before,
#write h5::before,
#write h6::before {
  position: absolute;
  top: 0;
  right: calc(100% + 10px);
  color: var(--md-char-color);
  font-size: 1rem;
  font-weight: bold;
  font-variant: "small-caps";
}

#write h1::before {
  content: "H1";
  top: 0.7rem;
}

#write h2::before {
  content: "H2";
  top: 0.37rem;
}

#write h3::before {
  content: "H3";
  top: 0.15rem;
}

#write h4::before {
  content: "H4";
}

#write h5::before {
  content: "H5";
}

#write h6::before {
  content: "H6";
}

/* Image meta text */
#write .md-image > .md-meta {
  color: var(--meta-content-color);
}

/* Inline styles */
.md-rawblock-tooltip {
  top: -1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
}

/* Search results */
.md-search-hit {
  background: var(--search-hit-bg-color);
  border-radius: 0.125em;
}

.md-search-select {
  background: var(--search-select-bg-color);
  border: 1px solid var(--megamenu-button-border-color);
  padding: 0 1px;
}

/* Focus mode */
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) *,
.on-focus-mode pre.md-end-block:not(.md-focus):not(.md-focus-container) {
  color: var(--md-char-color) !important;
}

.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) img,
.on-focus-mode
  blockquote
  .md-end-block:not(.md-focus):not(.md-focus-container)::before,
.on-focus-mode li:not(.md-focus-container)::before {
  opacity: 0.5;
}

.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) mark {
  background: var(--accent-color);
}

/* UI Sidebar */
#typora-sidebar {
  border-right: 1px solid #19191c;
}

.sidebar-tabs {
  font-family: "Vazir-Bold";
  border-bottom: 1px solid black;
}

.file-list-item-file-name {
  font-family: "Vazir-Bold";
  font-size: 1.2rem;
}

input.file-list-item-file-name, input.file-tree-rename-input {
  background: var(--side-bar-bg-color);
}

#file-library-search .file-list-item-file-name {
  font-size: 1.1rem;
}

#file-library-search .ty-search-item.active {
  background: var(--active-search-item-bg-color);
}

#file-library-search-input {
  background: var(--side-bar-bg-color);
}

.file-list-item-summary,
.ty-search-item-line {
  font-family: "Vazir", "Lato", sans-serif;
}

.ty-file-search-match-text,
.ty-outline-hit {
  font-weight: bold;
  background: transparent;
}

#outline-content {
  line-height: 1.4em;
}

#outline-content .outline-h1 > .outline-item {
  font-family: "Vazir-Bold";
}

.file-library-node,
.file-library-node .file-node-background {
  transition: background 0.4s;
}

.file-tree-node.file-library-file-node:not(.active):hover .file-node-background,
.file-list-item.file-library-node:not(.active):hover {
  background: var(--item-hover-bg-color);
}

.file-tree-node.file-library-file-node.active .file-node-background,
.file-list-item.file-library-file-node.active {
  border-left: 5px solid var(--primary-color);
}

/* Remove blinking animation when updating filename */
.blink-area {
  animation: none;
}

#ty-sidebar-footer {
  border-top: 1px solid black;
}

.sidebar-footer-item {
  transition: background 0.3s;
}

.outline-title-wrapper,
.outline-item-wrapper.outline-h1 > .outline-item {
  font-family: "Vazir-Bold";
  font-weight: bold;
}

/* Windows-specific */
/* Context and dropdown menus */
ul.dropdown-menu li.active a,
ul.dropdown-menu li.has-extra-menu.active a,
ul.dropdown-menu li.has-btn-submenu a.menu-style-btn.active,
#footer-word-count-info .ty-footer-word-count-all tr:hover,
#ty-spell-check-dict-missing-menu li:hover,
.ty-spell-check-panel-item.ty-active,
.ty-spell-check-panel-item:hover {
  background: var(--text-color) !important;
  color: var(--bg-color) !important;
}

/* Windows Unibody */
footer.ty-footer {
  border-top: 0;
}

.footer-item:hover {
  background: var(--text-color) !important;
  color: var(--bg-color) !important;
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px var(--primary-color);
}

/* Windows Unibody megamenu */
.megamenu-opened header {
  background-image: none;
}

#top-titlebar, #top-titlebar * {
  color: inherit;
}

#megamenu-content {
  padding-top: 28px;
  background: var(--megamenu-bg-color);
  color: var(--text-color);
}

.megamenu-menu-panel:not(:first-of-type) {
  margin-top: 48px;
}

#megamenu-content .long-btn {
  border-color: var(--megamenu-button-border-color);
  transition: all 0.4s;
}

#megamenu-content .long-btn:hover {
  border-color: var(--primary-color);
  background: var(--megamenu-item-hover-bg-color);
  color: var(--megamenu-item-hover-text-color) !important;
}

#recent-file-panel-action-btn {
  background: inherit;
  border-color: var(--megamenu-button-border-color);
  transition: all 0.4s;
}

#recent-file-panel-action-btn:hover {
  border-color: var(--primary-color);
  background: var(--megamenu-item-hover-bg-color);
  color: var(--megamenu-item-hover-text-color);
}

#recent-document-table {
  border: 1px solid var(--accent-color);
}

#recent-file-panel tbody tr:nth-child(2n-1) {
  background-color: inherit;
}

#recent-file-panel tbody tr:hover {
  background-color: var(--megamenu-item-hover-bg-color) !important;
}

#recent-file-panel tbody tr:hover td:nth-child(1) {
  color: var(--megamenu-item-hover-text-color);
}

/* Windows Unibody sidebar */
#megamenu-menu-sidebar {
  background: var(--megamenu-sidebar-bg-color);
  color: var(--text-color);
}

.megamenu-menu-header, .megamenu-menu-list li:not(.saved) a {
  transition: all 0.4s;
}

.megamenu-menu-header {
  border-bottom: var(--window-border);
}

.megamenu-menu-header:hover, .megamenu-menu-list li:not(.saved) a:not(.active):hover {
  background: var(--megamenu-sidebar-hover-bg-color);
}

.megamenu-menu-list li a.active {
  background: var(--megamenu-sidebar-active-bg-color) !important;
}

#m-saved {
  background: inherit;
  color: inherit;
}

#megamenu-menu-list {
  margin: 0;
}

.theme-preview-div {
  transition: all 0.4s;
}

.theme-preview-div:hover {
  border: 4px solid var(--primary-btn-border-color);
}

.theme-preview-div.active, .theme-preview-div.active:hover {
  border: 4px solid var(--primary-color);
}

.theme-preview-div.active i {
  color: var(--primary-color);
}

/* Source Code */
.cm-s-typora-default .cm-s-inner.CodeMirror-line {
  border: 0 !important;
}

.typora-sourceview-on #toggle-sourceview-btn {
  background: unset;
}

/* Print/PDF */
@media print {
  #write ol > li,
  #write ul > li {
    color: var(--text-color);
  }
  #write h1::before, #write h2::before, #write h3::before,
  #write h4::before, #write h5::before, #write h6::before {
    display: none;
  }
}