revised roam dracula theme
cagataytuylu - Roam Research Dracula by cagataytuylu
Details
Authorcagataytuylu
LicenseNo License
Categoryroam theme
Created
Updated
Size55 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name cagataytuylu - Roam Research Dracula
@version 20211123.13.47
@namespace userstyles.world/user/cagataytuylu
@description revised roam dracula theme
@author cagataytuylu
@license No License
==/UserStyle== */
@-moz-document url-prefix("https://roamresearch.com/#/app") {
@import url('https://abhayprasanna.github.io/better-dark-age.css');
@import url('https://fonts.googleapis.com/css?family=Commissioner|Crimson+Text|Fira+Code|Bitter|Work+Sans');
@media (prefers-color-scheme: light) {
:root {
/* FONTS */
--global-font : 'Work Sans', sans-serif;
--secondary-font : 'Fira Code', monospace;
--header-font : 'Bitter', serif;
/* WIDTH FIXES - default 568px,1032px - increase to increase WIDTH */
--reduce-padding-right : 3400px;
--reduce-padding-left : 3400px;
/* COLORS - One light*/
--page-links : #283593;
--attributes-color : #986801;
--external-links : #50A14E;
--links-hover : #E4564A;
--hashtags : #A626A4;
--body-text : #292D31;
--italics-color : #E4564A;
--bold-color : #0184BC;
--highlight-text-color : #292D31;
--highlighter : #FFFF80;
--background : #FAFAFA;
--sidebar-background : #EAEAEB;
--sidebar-text : #292D31;
--page-heading : #283593;
--daily-heading : #283593;
--heading1 : #292D31;
--heading2 : #292D31;
--heading3 : #292D31;
--bullets : #3F51B5;
--closed-bullets : #3F51B577;
--references : #3F51B5;
--block-reference-text : #0184BC;
--namespaces : #E4564A;
--all-pages-mentions : #0184BC;
--cursor : #292D31;
--icons : #3F51B5;
--icons-hover : #E4564A;
--filter-icon : #50A14E;
/* FONT SIZES */
--page-head-font-size : 2.2em;
/* DROPDOWN MENU */
--dropdown-menu-background: #EAEAEB;
--dropdown-menu-highlight : #FAFAFA;
--dropdown-menu-text : #292D31;
--dropdown-newpage : #0184BC;
/* SEARCH BAR */
--search-bar-background : #F7F8FA;
--search-bar-text : #292D31;
/* KANBAN CARD COLORS */
--kanban-main-background : #FAFAFA;
--kanban-column-background: #EAEAEB;
--kanban-card-background : #FAFAFA;
--kanban-text-hover : #E4564A;
}
}
@media (prefers-color-scheme: dark) {
:root {
/* FONTS */
--global-font : 'Work Sans', sans-serif;
--secondary-font : 'Fira Code', monospace;
--header-font : 'Bitter', serif;
/* WIDTH FIXES - default 568px,1032px - increase to increase WIDTH */
--reduce-padding-right : 3400px;
--reduce-padding-left : 3400px;
/* COLORS (HT: Jack Laing for [[Dracula Pro]] color theme) */
--page-links : #9580FF;
--attributes-color : #FFFF80;
--external-links : #8AFF80;
--links-hover : #92FFFF;
--hashtags : #FE7FBF;
--body-text : #F2F2F2;
--italics-color : #92FFFF;
--bold-color : #FF9580;
--highlight-text-color : #1B1A23;
--highlighter : #FFFF80;
--background : #1B1A23;
--sidebar-background : #2B2640;
--sidebar-text : #F2F2F2;
--page-heading : #9580FF;
--daily-heading : #9580FF;
--heading1 : #F2F2F2;
--heading2 : #F2F2F2;
--heading3 : #F2F2F2;
--bullets : #7C6EAD;
--closed-bullets : #7C6EAD77;
--references : #7C6EAD;
--block-reference-text : #FF9580;
--namespaces : #92FFFF;
--all-pages-mentions : #FF9580;
--cursor : #F2F2F2;
--icons : #7C6EAD;
--icons-hover : #92FFFF;
--filter-icon : #8AFF80;
/* FONT SIZES */
--page-head-font-size : 2.2em;
/* DROPDOWN MENU */
--dropdown-menu-background: #2B2640;
--dropdown-menu-highlight : #1B1A23;
--dropdown-menu-text : #F2F2F2;
--dropdown-newpage : #FF9580;
/* SEARCH BAR */
--search-bar-background : #1B1A23;
--search-bar-text : #F2F2F2;
/* KANBAN CARD COLORS */
--kanban-main-background : #1B1A23;
--kanban-column-background: #2A2C37;
--kanban-card-background : #1B1A23;
--kanban-text-hover : #81FFEA;
}
}
}
@-moz-document url-prefix("https://roamresearch.com/#/app") {
/* Rainbow indentation */
/*
Feel free to adjust the color variables!
This one has 18 colors deep (3 cycles of 3 rainbow flavored palettes).
This loops 3 times so it goes 54 levels deep!
To add more levels just target
.rm-level-n > div for every nth level
*/
@import url('https://abhayprasanna.github.io/rainbow-indent-core.css');
:root {
--box-shadow-values: 25px 0px 20px -30px; /* Set to "none" to remove shadow */
--indent1: #5F388BAD;
--indent2: #4A57BAAD;
--indent3: #48864DAD;
--indent4: #A7A15AAD;
--indent5: #AD7E48AD;
--indent6: #A5494FAD;
--indent7: #634071AD;
--indent8: #303472AD;
--indent9: #395C45AD;
--indent10: #7C7948AD;
--indent11: #7D5039AD;
--indent12: #A5494FAD;
--indent13: #706597AD;
--indent14: #657D91AD;
--indent15: #6D8D76AD;
--indent16: #A09A84AD;
--indent17: #987174AD;
--indent18: #8B5F78AD;
}
.rm-multibar {
z-index:4;
}
}
@-moz-document url-prefix("https://roamresearch.com/#/app") {
/* Original Dark Age theme by @shodty */
/* Love this theme? Say thanks via [PayPal](https://www.paypal.me/abhayprasanna) or Venmo @Abhay-Prasanna
/*---------------------------------------------------------------------------*/
/* MAIN BODY AND BLOCK COLORS */
.roam-body-main {
margin-top: 45px;
border-radius: 12px;
background: var(--background);
margin-right: 6px;
margin-left: 9px;
}
.rm-bullet__inner {
background-color: var(--bullets);
}
.rm-bullet--closed .rm-bullet__inner {
border: 4px solid var(--closed-bullets) !important;
/* !important needed */
}
.rm-bullet__inner:hover {
background-color: var(--icons-hover);
}
.rm-caret {
color: var(--links--hover);
opacity: 1 !important;
/* !important needed */
position: relative;
top: -1.5px;
}
.rm-caret-hidden {
opacity: 0 !important;
/* !important needed */
}
.rm-caret:hover {
color: var(--icons-hover);
}
.version-bullet {
background-color: var(--sidebar-background) !important;
/* !important needed */
color: var(--body-text);
}
.rm-block-input {
color: var(--body-text);
background-color: var(--sidebar-background);
padding-left: 6px;
border-radius: 5px;
}
/* Block reference */
.block-ref-count-button {
color: var(--icons);
background: transparent;
border-bottom: 1.5px solid var(--block-reference-text) !important;
/* !important needed */
z-index: 1000;
transition: color 0.3s ease;
font-family: var(--header-font);
margin-right: 6px;
margin-top: 2px;
border-radius: 0;
}
.block-ref-count-button:hover {
color: var(--icons-hover);
transition: color 0.3s ease, border 0.3s ease;
}
.rm-block-ref,
span[style*="color: red"] {
color: var(--body-text);
border-bottom: none;
border-right: solid 3px var(--references);
border-left: solid 3px var(--references);
border-radius: 5px;
}
span[style*="color: red"] {
color: var(--block-reference-text) !important;
/* !important needed */
border-bottom: none;
border-right: solid 3px var(--references);
border-left: solid 3px var(--references);
border-radius: 5px;
}
.rm-block-ref:hover,
span[style*="color: red"]:hover {
background-color: var(--kanban-column-background);
transition: color 0.3s ease;
}
span[style*="color: red"]:hover {
cursor: nw-resize;
}
/* Filter icon */
.bp3-icon.bp3-icon-filter[style*="color: rgb(168, 42, 42);"] {
color: var(--filter-icon) !important;
/* !important needed */
}
/* Inline Block References */
.rm-inline-references {
background-color: var(--background);
box-shadow: var(--references) 40px 0px 50px -40px inset;
padding: 5px 20px 5px;
}
.rm-inline-references:before {
color: var(--block-reference-text);
content: "Block References";
font-weight: 500;
}
.rm-zoom-mask {
color: var(--body-text);
}
.rm-zoom-item-content.rm-zoom-collapsed-item {
color: var(--references);
text-decoration: underline;
}
.bp3-icon-caret-right {
color: var(--icons) !important;
/* !important needed */
}
.squish[style*="color: rgb(138, 155, 168);"]>svg>g>path {
fill: var(--icons) !important;
/* !important needed */
}
.bp3-icon-standard.bp3-icon-circle {
color: var(--icons);
}
/* BETTERROAM-LIKE STYLE
Original BetterRoam theme by @linuz90
Love this theme? Say thanks via Paypal: https://www.paypal.me/linuz90 UPDATE */
.roam-article {
padding: 10px 30px 120px 30px !important;
/* !important needed */
}
.roam-app,
.roam-body-main.flex-h-box,
.roam-body {
background: var(--sidebar-background);
}
/*---------------------------------------------------------------------------*/
/* TOPBAR & SIDEBAR STYLE AND COLORS */
/* Right sidebar and topbar */
#right-sidebar,
.rm-topbar {
background-color: var(--sidebar-background);
}
.sidebar-content {
margin-left: 4px;
margin-right: 6px;
padding: 5px;
min-width: 100%;
min-height: 100%;
}
/* Spacing between right sidebar items */
#roam-right-sidebar-content>div>div:nth-child(n)>div {
padding-top: 11px !important;
/* !important needed */
padding-bottom: 11px !important;
/* !important needed */
}
#roam-right-sidebar-content {
border: 1px solid var(--sidebar-background);
border-radius: 12px;
background: var(--background);
margin-right: 6px;
}
#right-sidebar .rm-title-textarea {
...