├── Functional-Dark ├── Program ├── Functional-Light ├── Dracula-Abhay ├── Abhay-Dracula-Masonry ├── Dracula Theme, Free Font ├── SolarizedLight └── Fabriq-Theme /Functional-Dark: -------------------------------------------------------------------------------- 1 | /*scrollbar*/ 2 | ::-webkit-scrollbar { 3 | width: 7px; 4 | } 5 | /* search */ 6 | /* search bar full width */ 7 | /* 8 | .rm-find-or-create-wrapper { 9 | flex: 0 1 100% !important; 10 | } 11 | */ 12 | /*reduces font size when I'm doing an inline search with [[]] or (()) */ 13 | div.bp3-elevation-3 { 14 | font-size: 0.7em; 15 | } 16 | /*Wraps text when I'm doing an inline search with [[]] or (())*/ 17 | .bp3-text-overflow-ellipsis { 18 | text-overflow: unset; 19 | white-space: unset; 20 | } 21 | 22 | /* Increases the height of the inline search box */ 23 | div.bp3-elevation-3[style^='max-height: 300px; top: 26px; overflow: auto;'] { 24 | max-height: 600px !important; 25 | } 26 | 27 | .rm-block-ref { 28 | background: #d8e1e824; 29 | border-bottom: 0.5px solid #d8e1e8; 30 | cursor: alias; 31 | } 32 | 33 | /* freeze page titles at the top, maybe doesn't work */ 34 | /* 35 | .roam-article > div > div:nth-child(1):not(.roam-log-page) { 36 | position: sticky!important; 37 | top: 0px!important; 38 | z-index: 100!important; 39 | } 40 | .bp3-button.bp3-small, .bp3-small .bp3-button { 41 | padding: 0px 30px; 42 | } 43 | .bp3-elevation-3 { 44 | z-index: 10000!important; 45 | } 46 | */ 47 | 48 | /* Fix search and buttons to right side when sidebar opens */ 49 | .roam-topbar { 50 | position: fixed !important; 51 | right: 0px !important; 52 | z-index: 5 !important; 53 | padding-right: 31px !important; 54 | } 55 | /* Move down to make up for the 45px height of topbar */ 56 | .roam-body-main { 57 | margin-top: 45px; 58 | } 59 | #right-sidebar { 60 | height: 99%; 61 | } 62 | /* When sidebar opens this button appears. Need z-index so it shows on top of fixed position topbar */ 63 | #right-sidebar > div.flex-h-box > button { 64 | z-index: 5; 65 | padding-top: 5px !important; 66 | } 67 | /* So that you can get a full verticle handle to resize the sidebar */ 68 | #right-sidebar .rm-resize-handle { 69 | z-index: 1; 70 | } 71 | /* Sets rounded edges around sidebar and aligns with main window */ 72 | #roam-right-sidebar-content { 73 | margin-top : 9px; 74 | border : 1px solid var(--sidebar-background) !important; 75 | border-radius: 12px !important; 76 | background : var(--background) !important; 77 | margin-right : 6px !important; 78 | } 79 | /* When editing page title in sidebar this prevents it from having weird height issues */ 80 | #right-sidebar .rm-title-textarea { 81 | width: 95%; 82 | } 83 | .roam-main { 84 | height: 99%; 85 | } 86 | /* Rounded edges for main window */ 87 | .roam-body-main { 88 | border : 1px solid var(--sidebar-background) !important; 89 | border-radius: 12px !important; 90 | background : var(--background) !important; 91 | margin-right : 6px !important; 92 | margin-left : 6px !important; 93 | } 94 | -------------------------------------------------------------------------------- /Program: -------------------------------------------------------------------------------- 1 | *label: Beginning 2 | *header: Welcome to your first GuidedTrack program! 3 | We're glad to have you here. You'll notice that what you see highlighted on the left is what is showing in the preview on the right. 4 | 5 | People will move on to the next page down in the text of this program by pressing on the button. Code is executed top to bottom, hopefully you'll get a sense for what this means by previewing the program. 6 | 7 | *You can add to this program by placing your cursor and typing. Rearrange it through cut and paste.* 8 | 9 | *button: Next page 10 | 11 | *question: First off: What's your name? 12 | *save: userName 13 | 14 | You can add text, multimedia, lists, and more. Check out the Content section of the toolbar to learn how. 15 | *image: https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2FRobAndHisNotes%2F87_ZJIfisb.png?alt=media&token=88dd7ecc-8861-4a10-96d2-ebbc0be26ec2 16 | *caption: The Content section of the toolbar 17 | 18 | *button: Next page 19 | 20 | 21 | Pages always end with something the user interacts with. This could include buttons like you've seen or a question. Check the Interactions section of the toolbar for more! 22 | *question: Did you know you can put videos on a page? 23 | Yes 24 | *video: https://www.youtube.com/watch?v=SC4xMk98Pdc 25 | *button: Next 26 | No 27 | You can do it by clicking on "video" from the content section of the toolbar or by just writing it out like you see in the highlighted code 28 | *video: https://www.youtube.com/watch?v=SC4xMk98Pdc 29 | Congratulations! Now you know. 30 | *button: Next 31 | 32 | 33 | 34 | You can also ask follow-up questions based on the user's response through indentation. 35 | *question: Can you speak Spanish? 36 | *save: Spanish 37 | Yes 38 | ¡Hola, {userName}! 39 | *button: Next 40 | No 41 | I'm sorry to hear that... 42 | *question: Do you want to learn? 43 | Yes 44 | Too bad! We don't teach it. 45 | *button: Next 46 | No 47 | 48 | *if: Spanish = "Yes" 49 | This is another way you can change the flow of a program! You can save a user's past choice and only give certain content based on their answers. 50 | *image: https://media.makeameme.org/created/what-if-soy-26fc0eb6f8.jpg 51 | *button: Next 52 | 53 | 54 | You can ask many different types of questions. Go to questions in the toolbar and change the *Type* to whatever you want. Try playing with it! 55 | *image: https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2FRobAndHisNotes%2FZp2srQ8vA6.png?alt=media&token=beec518f-e331-4c99-bd83-2952cfe4fd1e 56 | *button: Next 57 | 58 | When the user answers questions, GuidedTrack collects data! You can click here to see what participant data is collected. 59 | *image: https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2FRobAndHisNotes%2F8slPrOWIMq.png?alt=media&token=c732819c-1a00-4600-a716-11277165c9a7 60 | *button: Next 61 | 62 | 63 | *question: Would you like to keep playing with this program or start over? 64 | *tip: You'll always be able to access this program by going to your program list. 65 | Finish the program 66 | Start over 67 | *goto: Beginning 68 | --This will take you back to the *label at the beginning with the same name. 69 | 70 | 71 | -------------------------------------------------------------------------------- /Functional-Light: -------------------------------------------------------------------------------- 1 | .roam-toolkit-block-mode--highlight{background-color: #9580ff4d; !important;} 2 | /*scrollbar*/ 3 | ::-webkit-scrollbar { 4 | width: 7px; 5 | } 6 | /* search */ 7 | 8 | /* search bar full width */ 9 | 10 | .rm-find-or-create-wrapper { 11 | flex: 0 1 100% !important; 12 | } 13 | /*reduces font size when I'm doing an inline search with [[]] or (()) */ 14 | div.bp3-elevation-3 { 15 | font-size: 0.7em; 16 | } 17 | /*Wraps text when I'm doing an inline search with [[]] or (())*/ 18 | .bp3-text-overflow-ellipsis { 19 | text-overflow: unset; 20 | white-space: unset; 21 | } 22 | 23 | /* Increases the height of the inline search box */ 24 | div.bp3-elevation-3[style^='max-height: 300px; top: 26px; overflow: auto;'] { 25 | max-height: 600px !important; 26 | } 27 | 28 | .rm-block-ref { 29 | background: #d8e1e8; 30 | border-bottom: 0.5px solid #d8e1e8; 31 | cursor: alias; 32 | } 33 | 34 | /* freeze page titles at the top, maybe doesn't work */ 35 | /* 36 | .roam-article > div > div:nth-child(1):not(.roam-log-page) { 37 | position: sticky!important; 38 | top: 0px!important; 39 | z-index: 100!important; 40 | } 41 | .bp3-button.bp3-small, .bp3-small .bp3-button { 42 | padding: 0px 30px; 43 | } 44 | .bp3-elevation-3 { 45 | z-index: 10000!important; 46 | } 47 | */ 48 | 49 | /* Fix search and buttons to right side when sidebar opens */ 50 | .roam-topbar { 51 | position: fixed !important; 52 | right: 0px !important; 53 | z-index: 5 !important; 54 | padding-right: 31px !important; 55 | } 56 | /* Move down to make up for the 45px height of topbar */ 57 | .roam-body-main { 58 | margin-top: 45px; 59 | } 60 | #right-sidebar { 61 | height: 99%; 62 | } 63 | /* When sidebar opens this button appears. Need z-index so it shows on top of fixed position topbar */ 64 | #right-sidebar > div.flex-h-box > button { 65 | z-index: 5; 66 | padding-top: 5px !important; 67 | } 68 | /* So that you can get a full verticle handle to resize the sidebar */ 69 | #right-sidebar .rm-resize-handle { 70 | z-index: 1; 71 | } 72 | /* Sets rounded edges around sidebar and aligns with main window */ 73 | #roam-right-sidebar-content { 74 | margin-top : 9px; 75 | border : 1px solid var(--sidebar-background) !important; 76 | border-radius: 12px !important; 77 | background : var(--background) !important; 78 | margin-right : 6px !important; 79 | } 80 | /* When editing page title in sidebar this prevents it from having weird height issues */ 81 | #right-sidebar .rm-title-textarea { 82 | width: 95%; 83 | } 84 | .roam-main { 85 | height: 99%; 86 | } 87 | /* Rounded edges for main window */ 88 | .roam-body-main { 89 | border : 1px solid var(--sidebar-background) !important; 90 | border-radius: 12px !important; 91 | background : var(--background) !important; 92 | margin-right : 6px !important; 93 | margin-left : 6px !important; 94 | } 95 | 96 | /* WIDTH FIXES */ 97 | 98 | .rm-block-text, 99 | .roam-article, 100 | .roam-block-container { 101 | max-width: 100% !important; 102 | } 103 | 104 | #rm-log-container { 105 | padding-right: calc((100% - var(--reduce-padding-right)) / 2) !important; 106 | padding-left : calc((100% - var(--reduce-padding-left)) / 2) !important; 107 | } 108 | 109 | div[style*="padding-right: calc((100% - 568px) / 2); padding-left: calc((100% - 1032px) / 2);"] { 110 | padding-right: calc((100% - var(--reduce-padding-right)) / 2) !important; 111 | padding-left : calc((100% - var(--reduce-padding-left)) / 2) !important; 112 | } 113 | 114 | div[style*="padding-right: calc((100% - 800px) / 2); padding-left: calc((100% - 800px) / 2);"] { 115 | padding-right: calc((100% - var(--reduce-padding-right)) / 2) !important; 116 | padding-left : calc((100% - var(--reduce-padding-left)) / 2) !important; 117 | } 118 | -------------------------------------------------------------------------------- /Dracula-Abhay: -------------------------------------------------------------------------------- 1 | @import url('https://abhayprasanna.github.io/better-dark-age.css'); 2 | /* IMPORT FONTS */ 3 | @import url('https://fonts.googleapis.com/css?family=Commissioner|Fira+Code|Bitter'); 4 | @import "../fonts/Inter/inter.css"; 5 | 6 | 7 | :root { 8 | /* FONTS */ 9 | --global-font : 'Roboto'; 10 | --secondary-font : 'Roboto'; 11 | --header-font : 'Roboto'; 12 | /* WIDTH FIXES - default 568px,1032px - increase to increase WIDTH */ 13 | --reduce-padding-right : 3400px; 14 | --reduce-padding-left : 3400px; 15 | /* COLORS (HT: Jack Laing for [[Dracula Pro]] color theme) */ 16 | --page-links : #81FFEA; 17 | --attributes-color : #FFFF80; 18 | --external-links : #8AFF80; 19 | --links-hover : #9580FF; 20 | --hashtags : #FE7FBF; 21 | --body-text : #F2F2F2; 22 | --italics-color : #FE7FBF; 23 | --bold-color : #FF9580; 24 | --highlight-text-color : #1B1A23; 25 | --highlighter : #FFFF80; 26 | --background : #1B1A23; 27 | --sidebar-background : #2B2640; 28 | --sidebar-text : #F2F2F2; 29 | --page-heading : #9580FF; 30 | --daily-heading : #9580FF; 31 | --headings : #F2F2F2; 32 | --bullets : #7C6EAD; 33 | --closed-bullets : #313340; 34 | --references : #7C6EAD; 35 | --block-reference-text : #FF9580; 36 | --namespaces : #81FFEA; 37 | --all-pages-mentions : #FF9580; 38 | --cursor : #F2F2F2; 39 | --icons : #7C6EAD; 40 | --icons-hover : #81FFEA; 41 | --filter-icon : #8AFF80; 42 | /* FONT SIZES */ 43 | --main-font-size : 1em; 44 | --page-head-font-size : 2.2em; 45 | --h1-font-size : 2em; 46 | --h2-font-size : 1.6em; 47 | --h3-font-size : 1.2em; 48 | --sidebar-h1-size : 2.2em; 49 | /* DROPDOWN MENU */ 50 | --dropdown-menu-background: #2B2640; 51 | --dropdown-menu-highlight : #1B1A23; 52 | --dropdown-menu-text : #F2F2F2; 53 | --dropdown-newpage : #9580FF; 54 | /* SEARCH BAR */ 55 | --search-bar-background : #1B1A23; 56 | --search-bar-text : #F2F2F2; 57 | /* KANBAN CARD COLORS */ 58 | --kanban-main-background : #1B1A23; 59 | --kanban-column-background: #2A2C37; 60 | --kanban-card-background : #1B1A23; 61 | --kanban-text-hover : #81FFEA; 62 | } 63 | /* Roam Toolkit Vim mode */ 64 | .roam-toolkit-block-mode--highlight{background-color: #7c6ead59; !important;} 65 | 66 | /* Rainbow indentation */ 67 | /* 68 | Feel free to adjust the colors - this one loops every 69 | 7 colors like the rainbow but you can change that to 70 | cycle earlier or choose more unique colors. 71 | To add deeper indents: 72 | 1. Add { > div.flex-v-box > div } incrementally to the first line, and 73 | 2. Add {> div.flex-v-box > div:nth-child(n) } incrementally to the second line 74 | */ 75 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 76 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div { 77 | border-left-color: #F2F2F2AD!important; 78 | } 79 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div, 80 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div { 81 | border-left-color: #9580FFAD !important; 82 | } 83 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n), 84 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 85 | border-left-color: #92FFFFAD !important; 86 | } 87 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 88 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 89 | border-left-color: #8AFF80AD !important; 90 | } 91 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 92 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 93 | border-left-color: #FFFF80AD !important; 94 | } 95 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 96 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 97 | border-left-color: #FF9580AD !important; 98 | } 99 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 100 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 101 | border-left-color: #FE7FBFAD !important; 102 | } 103 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 104 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 105 | border-left-color: #DA53EEAD !important; 106 | } 107 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 108 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 109 | border-left-color: #6600EDAD !important; 110 | } 111 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 112 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 113 | border-left-color: #0079FFAD !important; 114 | } 115 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 116 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 117 | border-left-color: #00F11DAD !important; 118 | } 119 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 120 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 121 | border-left-color: #FFEF00AD !important; 122 | } 123 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 124 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 125 | border-left-color: #FF7F00AD !important; 126 | } 127 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 128 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 129 | border-left-color: #FF0900AD !important; 130 | } 131 | 132 | /* 133 | Optional border adjustments: 134 | 1. You can add a border-radius: 5px or more to get an interesting delineation 135 | 2. You can adjust the width of the border but make sure to adjust margin to align the border with the bullets 136 | */ 137 | .block-border-left { 138 | border-left-width: 2px !important; 139 | margin-left: 5px !important; 140 | } 141 | 142 | /* Right side bar reference boxes */ 143 | .rm-reference-item { 144 | background-color: #2B2640; 145 | border-radius: 15px; 146 | padding: 5px; 147 | margin-top: 15px !important; 148 | } 149 | 150 | -------------------------------------------------------------------------------- /Abhay-Dracula-Masonry: -------------------------------------------------------------------------------- 1 | @import url('https://abhayprasanna.github.io/better-dark-age.css'); 2 | /* IMPORT FONTS */ 3 | @import url('https://fonts.googleapis.com/css?family=Commissioner|Fira+Code|Bitter'); 4 | @import "../fonts/Inter/inter.css"; 5 | 6 | 7 | :root { 8 | /* FONTS */ 9 | --global-font : 'Inter'; 10 | --secondary-font : 'Inter'; 11 | --header-font : 'Inter'; 12 | /* WIDTH FIXES - default 568px,1032px - increase to increase WIDTH */ 13 | --reduce-padding-right : 3400px; 14 | --reduce-padding-left : 3400px; 15 | /* COLORS (HT: Jack Laing for [[Dracula Pro]] color theme) */ 16 | --page-links : #81FFEA; 17 | --attributes-color : #FFFF80; 18 | --external-links : #8AFF80; 19 | --links-hover : #9580FF; 20 | --hashtags : #FE7FBF; 21 | --body-text : #F2F2F2; 22 | --italics-color : #92FFFF; 23 | --bold-color : #FF9580; 24 | --highlight-text-color : #1B1A23; 25 | --highlighter : #FFFF80; 26 | --background : #1B1A23; 27 | --sidebar-background : #2B2640; 28 | --sidebar-text : #F2F2F2; 29 | --page-heading : #9580FF; 30 | --daily-heading : #9580FF; 31 | --headings : #F2F2F2; 32 | --bullets : #7C6EAD; 33 | --closed-bullets : #313340; 34 | --references : #7C6EAD; 35 | --block-reference-text : #FF9580; 36 | --namespaces : #81FFEA; 37 | --all-pages-mentions : #FF9580; 38 | --cursor : #F2F2F2; 39 | --icons : #7C6EAD; 40 | --icons-hover : #81FFEA; 41 | --filter-icon : #8AFF80; 42 | /* FONT SIZES */ 43 | --main-font-size : 1em; 44 | --page-head-font-size : 2.2em; 45 | --h1-font-size : 2em; 46 | --h2-font-size : 1.6em; 47 | --h3-font-size : 1.2em; 48 | --sidebar-h1-size : 2.2em; 49 | /* DROPDOWN MENU */ 50 | --dropdown-menu-background: #2B2640; 51 | --dropdown-menu-highlight : #1B1A23; 52 | --dropdown-menu-text : #F2F2F2; 53 | --dropdown-newpage : #9580FF; 54 | /* SEARCH BAR */ 55 | --search-bar-background : #1B1A23; 56 | --search-bar-text : #F2F2F2; 57 | /* KANBAN CARD COLORS */ 58 | --kanban-main-background : #1B1A23; 59 | --kanban-column-background: #2A2C37; 60 | --kanban-card-background : #1B1A23; 61 | --kanban-text-hover : #81FFEA; 62 | } 63 | /* Roam Toolkit Vim mode */ 64 | .roam-toolkit-block-mode--highlight{background-color: #7c6ead59; !important;} 65 | 66 | /* Rainbow indentation */ 67 | /* 68 | Feel free to adjust the colors - this one loops every 69 | 7 colors like the rainbow but you can change that to 70 | cycle earlier or choose more unique colors. 71 | To add deeper indents: 72 | 1. Add { > div.flex-v-box > div } incrementally to the first line, and 73 | 2. Add {> div.flex-v-box > div:nth-child(n) } incrementally to the second line 74 | */ 75 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 76 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div { 77 | border-left-color: #F2F2F2AD!important; 78 | } 79 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div, 80 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div { 81 | border-left-color: #9580FFAD !important; 82 | } 83 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n), 84 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 85 | border-left-color: #92FFFFAD !important; 86 | } 87 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 88 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 89 | border-left-color: #8AFF80AD !important; 90 | } 91 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 92 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 93 | border-left-color: #FFFF80AD !important; 94 | } 95 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 96 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 97 | border-left-color: #FF9580AD !important; 98 | } 99 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 100 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 101 | border-left-color: #FE7FBFAD !important; 102 | } 103 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 104 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 105 | border-left-color: #DA53EEAD !important; 106 | } 107 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 108 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 109 | border-left-color: #6600EDAD !important; 110 | } 111 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 112 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 113 | border-left-color: #0079FFAD !important; 114 | } 115 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 116 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 117 | border-left-color: #00F11DAD !important; 118 | } 119 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 120 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 121 | border-left-color: #FFEF00AD !important; 122 | } 123 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 124 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 125 | border-left-color: #FF7F00AD !important; 126 | } 127 | #rm-log-container > div > div > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n) > div.flex-v-box > div:nth-child(n), 128 | .flex-v-box > div:nth-child(n) > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div > div.flex-v-box > div { 129 | border-left-color: #FF0900AD !important; 130 | } 131 | 132 | /* 133 | Optional border adjustments: 134 | 1. You can add a border-radius: 5px or more to get an interesting delineation 135 | 2. You can adjust the width of the border but make sure to adjust margin to align the border with the bullets 136 | */ 137 | .block-border-left { 138 | border-left-width: 2px !important; 139 | margin-left: 5px !important; 140 | } 141 | 142 | /* masonry mode */ 143 | 144 | :root { 145 | --right-sidebar-masonry-bg: sidebar-background; 146 | --right-sidebar-masonry-outline: #d8e1e8; 147 | } 148 | #app .roam-main .roam-body-main .roam-center { 149 | flex: 1 1 100% !important; 150 | flex-basis: 10% !important; 151 | } 152 | #right-sidebar { 153 | /* container */ 154 | background-color: right-sidebar-masonry-bg !important; 155 | } 156 | .roam-log-container .roam-log-page { 157 | padding: 10px; 158 | border: 1px solid #bfbfbf; 159 | border-radius: 5px; 160 | background-color: #1B1A23 !important; 161 | } 162 | #right-sidebar #roam-right-sidebar-content { 163 | overflow: scroll !important; 164 | white-space: normal; 165 | display: flex; 166 | flex-flow: column wrap; 167 | } 168 | #right-sidebar #roam-right-sidebar-content .sidebar-content { 169 | overflow: scroll !important; 170 | white-space: normal; 171 | display: flex; 172 | align-content: flex-start; 173 | flex-flow: column wrap; 174 | /* item */ 175 | } 176 | #right-sidebar #roam-right-sidebar-content .sidebar-content > div { 177 | position: relative; 178 | display: flex; 179 | flex: 0 1 auto; 180 | flex-direction: column; 181 | align-self: flex-start; 182 | margin-right: 0px !important; 183 | margin-left: 15px; 184 | padding: 10px; 185 | border-radius: 5px; 186 | margin-bottom: 16px; 187 | min-height: fit-content; 188 | width: 600px; 189 | background-color: var(--right-sidebar-masonry-bg) !important; 190 | border: 1px solid var(--right-sidebar-masonry-outline) !important; 191 | /* item header */ 192 | /* item content */ 193 | } 194 | 195 | #right-sidebar 196 | #roam-right-sidebar-content 197 | .sidebar-content 198 | > div 199 | > div 200 | > div:nth-child(2) { 201 | resize: vertical; 202 | overflow-y: auto; 203 | overflow-x: hidden; 204 | max-height: 770px; 205 | } 206 | #right-sidebar 207 | #roam-right-sidebar-content 208 | .sidebar-content 209 | > div 210 | > div 211 | > div:nth-child(2) 212 | > div 213 | > div.flex-v-box { 214 | margin-left: 0px !important; 215 | } 216 | 217 | /* Right side bar reference boxes */ 218 | .rm-reference-item { 219 | background-color: #2B2640; 220 | border-radius: 15px; 221 | padding: 5px; 222 | margin-top: 15px !important; 223 | } 224 | 225 | /* Making highlights work better with page reference colors */ 226 | 227 | .roam-highlight .rm-page-ref-tag { 228 | color: #9580FF !important; 229 | } 230 | 231 | .roam-highlight .rm-page-ref-link-color, .roam-highlight .rm-page-ref-brackets { 232 | color: #9580FF !important; 233 | } 234 | -------------------------------------------------------------------------------- /Dracula Theme, Free Font: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | ### ROAM CUSTOM THEME ### 4 | > Many thanks to the Roam Slack community for all the resources, particularly @Anthony and @Mark for their patience with me that helped in this construction. Mostly adapted from Anthony's bear themes, with some mix and matches from other people's codes and other changes. I don't know what I'm doing really, just wanted to make it pretty. 5 | > Edits by Rob Haisfield 6 | > v1.0 7 | */ 8 | 9 | /* Editor */ 10 | 11 | @import "../fonts/Inter/inter.css"; 12 | .loading-astrolabe { 13 | margin: auto; 14 | position: relative; 15 | width: 250px; 16 | height: 250px; 17 | } 18 | .loading-astrolabe .wand { 19 | position: absolute; 20 | width: 80%; 21 | top: 24.5%; 22 | left: 10%; 23 | animation: nav 3.5s linear infinite; 24 | } 25 | .loading-astrolabe .wand-small { 26 | position: absolute; 27 | width: 80%; 28 | top: 24.5%; 29 | left: 11.5%; 30 | } 31 | .loading-astrolabe .background { 32 | width: 100%; 33 | border: none; 34 | margin-left: -3px; 35 | } 36 | .spinner-astrolabe { 37 | margin: auto; 38 | margin-top: 100px; 39 | position: relative; 40 | width: 200px; 41 | height: 200px; 42 | } 43 | .spinner-astrolabe .wand { 44 | position: absolute; 45 | width: 80%; 46 | top: 24.5%; 47 | left: 10%; 48 | animation: nav 3.5s linear 20s; 49 | } 50 | .spinner-astrolabe .wand:hover { 51 | animation: nav 3.5s linear infinite; 52 | } 53 | .spinner-astrolabe .wand-small { 54 | position: absolute; 55 | width: 80%; 56 | top: 24.5%; 57 | left: 11.5%; 58 | } 59 | .spinner-astrolabe .background { 60 | width: 100%; 61 | border: none; 62 | margin-left: -3px; 63 | } 64 | @keyframes spin { 65 | 0% { 66 | transform: rotate(0deg); 67 | } 68 | 100% { 69 | transform: rotate(360deg); 70 | } 71 | } 72 | @keyframes nav { 73 | 0% { 74 | transform: rotate(0deg); 75 | } 76 | 15% { 77 | transform: rotate(-30deg); 78 | } 79 | 25% { 80 | transform: rotate(30deg); 81 | } 82 | 40% { 83 | transform: rotate(-15deg); 84 | } 85 | 50% { 86 | transform: rotate(40deg); 87 | } 88 | 70% { 89 | transform: rotate(-50deg); 90 | } 91 | 85% { 92 | transform: rotate(75deg); 93 | } 94 | 90% { 95 | transform: rotate(-180deg); 96 | } 97 | 100% { 98 | transform: rotate(-355deg); 99 | } 100 | } 101 | .spinner-square { 102 | box-sizing: border-box; 103 | width: 300px; 104 | height: 300px; 105 | background-color: grey; 106 | display: grid; 107 | grid-template-rows: 1fr 1fr; 108 | padding: 20px; 109 | grid-gap: 20px; 110 | z-index: 3; 111 | grid-template-columns: 1fr 1fr; 112 | cursor: pointer; 113 | } 114 | .spinner-square .spinner-square-front { 115 | background-color: white; 116 | z-index: 5; 117 | } 118 | .spinner-square .spinner-square-rotate { 119 | position: absolute; 120 | margin-left: 75px; 121 | margin-top: 75px; 122 | background-color: black; 123 | width: 150px; 124 | height: 150px; 125 | animation: spin 4.5s linear infinite; 126 | } 127 | .scrollbar { 128 | margin-left: 30px; 129 | float: left; 130 | height: 300px; 131 | width: 65px; 132 | background: #F5F5F5; 133 | overflow-y: scroll; 134 | margin-bottom: 25px; 135 | } 136 | #scroll-1::-webkit-scrollbar-track { 137 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 138 | border-radius: 8px; 139 | background-color: #F5F5F5; 140 | } 141 | #scroll-1::-webkit-scrollbar { 142 | width: 8px; 143 | background-color: #F5F5F5; 144 | } 145 | #scroll-1::-webkit-scrollbar-thumb { 146 | border-radius: 8px; 147 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 148 | background-color: #8A9BA8; 149 | } 150 | #home { 151 | padding: 50px; 152 | background-color: blue; 153 | color: #182026; 154 | } 155 | #home .icons { 156 | padding-left: 20px; 157 | } 158 | #home .icons .bp3-icon-large:hover { 159 | transform: scale(2); 160 | margin-left: 60px; 161 | } 162 | #home2 .dark { 163 | color: white; 164 | background-color: #343a40; 165 | } 166 | #home2 .container { 167 | margin: auto; 168 | max-width: 1110px; 169 | } 170 | #home2 .block { 171 | padding: 7em 0 0; 172 | } 173 | #home2 #header { 174 | width: 100%; 175 | position: fixed; 176 | top: 0; 177 | } 178 | #home2 #header .nav { 179 | display: flex; 180 | flex: 0 0 auto; 181 | align-items: center; 182 | padding: 10px 14px; 183 | } 184 | #home2 #header .nav .bp3-button { 185 | color: white; 186 | } 187 | #home2 #body { 188 | margin-top: 50px; 189 | } 190 | #home2 h1 { 191 | margin-bottom: 20px; 192 | } 193 | #home2 .row { 194 | display: flex; 195 | flex-wrap: wrap; 196 | } 197 | #home2 .col { 198 | margin: 24px auto; 199 | max-width: 300px; 200 | } 201 | #home2 #testimonials .testimonial { 202 | text-align: center; 203 | } 204 | #home2 #logo-graph { 205 | -webkit-filter: grayscale(100%) brightness(60%) contrast(10000000%); 206 | opacity: .4; 207 | display: grid; 208 | } 209 | #home2 #footer { 210 | padding-bottom: 7em; 211 | } 212 | #page { 213 | font-family: Segoe UI, Roboto, sans-serif; 214 | } 215 | #page1 { 216 | margin: 0 auto; 217 | padding-top: 4em; 218 | max-width: 40em; 219 | font-family: Segoe UI, Roboto, sans-serif; 220 | color: #808080; 221 | } 222 | #page1 h1, 223 | #page1 h2 { 224 | color: #4d4d4d; 225 | text-align: center; 226 | } 227 | #page1 .sub { 228 | width: 400px; 229 | margin: 8px auto; 230 | } 231 | #page1 .hero { 232 | margin: 0 auto; 233 | display: flex; 234 | justify-content: center; 235 | } 236 | #page1 .hero button { 237 | min-height: 50px; 238 | font-size: 1.8em; 239 | padding: 16px 20px; 240 | margin: 8px; 241 | } 242 | #page1 .zk { 243 | padding: 25px; 244 | } 245 | #page1 .quotes { 246 | max-width: 80vw; 247 | margin: 20px auto; 248 | } 249 | #page1 .quote { 250 | float: right; 251 | padding-top: 1em; 252 | } 253 | #secret-invite-wrapper { 254 | height: 100vh; 255 | background-color: black; 256 | overscroll-behavior: none; 257 | } 258 | #secret-invite-wrapper #secret-invite { 259 | position: relative; 260 | margin: 0 auto; 261 | padding-top: 4em; 262 | max-width: 40em; 263 | font-family: Segoe UI, Roboto, sans-serif; 264 | color: #b3b3b3; 265 | } 266 | #secret-invite-wrapper #secret-invite #secret-scroll { 267 | position: absolute; 268 | height: 90vh; 269 | overflow: scroll; 270 | } 271 | #secret-invite-wrapper #secret-invite h1, 272 | #secret-invite-wrapper #secret-invite h2 { 273 | color: #cccccc; 274 | text-align: center; 275 | } 276 | #secret-invite-wrapper #secret-invite .sub { 277 | width: 400px; 278 | margin: 8px auto; 279 | } 280 | #secret-invite-wrapper #secret-invite .hero { 281 | margin: 0 auto; 282 | display: flex; 283 | justify-content: center; 284 | } 285 | #secret-invite-wrapper #secret-invite .hero button { 286 | min-height: 50px; 287 | font-size: 1.8em; 288 | padding: 16px 20px; 289 | margin: 8px; 290 | } 291 | #secret-invite-wrapper #secret-invite .zk { 292 | padding: 25px; 293 | } 294 | #secret-invite-wrapper #secret-invite .quotes { 295 | max-width: 80vw; 296 | margin: 20px auto; 297 | } 298 | #secret-invite-wrapper #secret-invite .quote { 299 | float: right; 300 | padding-top: 1em; 301 | } 302 | html { 303 | scroll-behavior: smooth; 304 | } 305 | #landing-page * { 306 | margin: 0; 307 | padding: 0; 308 | } 309 | #landing-page #form { 310 | display: flex; 311 | flex-direction: column; 312 | align-items: center; 313 | padding: 12px; 314 | } 315 | #landing-page #form .ff { 316 | text-align: center; 317 | line-height: 1.8em; 318 | font-size: 1.2em; 319 | max-width: 400px; 320 | } 321 | #landing-page #form form { 322 | display: flex; 323 | flex-direction: column; 324 | } 325 | #landing-page #form form textarea { 326 | max-width: 70vw; 327 | width: 300px; 328 | resize: none; 329 | border: 1px solid lightgrey; 330 | padding: 4px; 331 | } 332 | #landing-page #form form input { 333 | max-width: 70vw; 334 | width: 300px; 335 | padding: 4px; 336 | margin: 8px; 337 | } 338 | #landing-page #header ul { 339 | display: flex; 340 | list-style-type: none; 341 | background-color: #293742; 342 | color: #f5f8fa; 343 | } 344 | #landing-page #header ul .logo { 345 | padding: 8px; 346 | } 347 | #landing-page #header ul li:hover { 348 | background-color: #182026; 349 | } 350 | #landing-page #header ul li a { 351 | display: block; 352 | padding: 8px; 353 | text-decoration: none; 354 | width: 100%; 355 | height: 100%; 356 | color: inherit; 357 | } 358 | #landing-page #cover { 359 | background-color: #182026; 360 | padding: 40px 0 0 0; 361 | min-height: 100vh; 362 | color: #ced9e0; 363 | display: flex; 364 | flex-direction: column; 365 | align-items: center; 366 | } 367 | #landing-page #cover .a { 368 | background-color: #ced9e0; 369 | color: #182026; 370 | border-radius: 4px; 371 | cursor: pointer; 372 | text-decoration: none; 373 | } 374 | #landing-page #cover .a:hover { 375 | color: #0e5a8a; 376 | } 377 | #landing-page #cover #tag-line { 378 | padding: 30px 40px 0px; 379 | } 380 | #landing-page #cover #tag-line ul { 381 | line-height: 32px; 382 | margin-left: 32px; 383 | margin-right: 16px; 384 | margin-top: 25px; 385 | font-size: 16px; 386 | } 387 | #landing-page #cover #endorsement { 388 | margin: 80px 20px 20px; 389 | } 390 | #landing-page #cover #callouts { 391 | margin-top: 10%; 392 | } 393 | #landing-page #cover #callouts button { 394 | font-size: 20px; 395 | padding: 20px; 396 | background-color: #182026; 397 | } 398 | #landing-page #cover #image-collection { 399 | flex: 1 1 400px; 400 | max-width: 500px; 401 | background-color: #ced9e0; 402 | color: #293742; 403 | padding: 40px 40px 40px; 404 | display: flex; 405 | flex-direction: column; 406 | align-items: center; 407 | } 408 | #landing-page #cover #image-collection #images { 409 | color: #182026; 410 | padding: 40px 0px; 411 | display: grid; 412 | grid-template-columns: repeat(auto-fill, minmax(100px, auto)); 413 | grid-column-gap: 20px; 414 | justify-items: start; 415 | align-items: center; 416 | } 417 | #landing-page #cover #image-collection #images img { 418 | margin: 8px; 419 | max-height: 70px; 420 | max-width: 100%; 421 | } 422 | #landing-page #features { 423 | padding: 40px 40px; 424 | background-color: #293742; 425 | border-top: 1px solid #5c7080; 426 | color: #d8e1e8; 427 | flex-direction: column; 428 | } 429 | #landing-page #features ul { 430 | padding-left: 16px; 431 | } 432 | #landing-page #features .feature { 433 | margin: 40px 0px; 434 | display: flex; 435 | justify-content: center; 436 | flex-wrap: wrap; 437 | } 438 | #landing-page #features .feature .feature-content { 439 | width: 400px; 440 | margin: 40px; 441 | } 442 | #landing-page #features .feature .feature-image { 443 | min-height: 400px; 444 | min-width: 400px; 445 | background-color: grey; 446 | } 447 | .rm-emoji-block-view { 448 | display: flex; 449 | flex: 0 0 auto; 450 | flex-wrap: wrap; 451 | margin-left: 40px; 452 | align-items: center; 453 | } 454 | .rm-emoji-block-view .rm-emoji-button { 455 | display: flex; 456 | flex: 0 0 auto; 457 | align-items: center; 458 | cursor: pointer; 459 | border-radius: 20px; 460 | height: 20px; 461 | margin: 0px 4px 4px 0px; 462 | } 463 | .rm-emoji-block-view .rm-emoji-button .rm-emoji { 464 | height: 16px; 465 | margin: 0px 4px; 466 | } 467 | .rm-emoji-block-view .rm-emoji-button .rm-emoji-number { 468 | height: 100%; 469 | font-size: 10px; 470 | margin-right: 6px; 471 | font-weight: 500; 472 | } 473 | .rm-emoji-tooltip { 474 | max-width: 200px; 475 | overflow-wrap: break-word; 476 | font-size: 12px; 477 | color: white; 478 | font-weight: 600; 479 | } 480 | .kanban-board { 481 | background-color: #a7b6c2; 482 | min-width: 100%; 483 | min-height: 48px; 484 | padding: 8px; 485 | overflow-x: scroll; 486 | } 487 | .kanban-column { 488 | background-color: #ededed; 489 | margin: 0px 4px 0px 4px; 490 | padding: 4px; 491 | min-width: 200px; 492 | } 493 | .kanban-title { 494 | text-align: center; 495 | } 496 | .kanban-card { 497 | background-color: white; 498 | margin: 8px; 499 | padding: 8px; 500 | } 501 | html { 502 | font-family: 'Inter', sans-serif; 503 | } 504 | @supports (font-variation-settings: normal) { 505 | html { 506 | font-family: 'Inter var', sans-serif; 507 | } 508 | } 509 | body { 510 | overscroll-behavior: none; 511 | } 512 | ::-webkit-scrollbar { 513 | width: 0px; 514 | background: transparent; 515 | } 516 | * { 517 | box-sizing: border-box; 518 | } 519 | *:focus { 520 | outline-width: 0; 521 | } 522 | .roam-lift { 523 | z-index: 10000; 524 | } 525 | .CodeMirror { 526 | height: auto !important; 527 | } 528 | @media (max-width: 500px) { 529 | .bp3-omnibar { 530 | max-width: 310px; 531 | left: calc((100vw - 310px) / 2); 532 | } 533 | } 534 | .rm-line { 535 | background-color: #ced9e0; 536 | flex: 0 0 1px; 537 | } 538 | .roam-body .roam-app { 539 | height: 100%; 540 | width: 100%; 541 | position: relative; 542 | -webkit-overflow-scrolling: touch; 543 | color: #454158; 544 | } 545 | .roam-body .roam-app h1 { 546 | color: #22212C; 547 | } 548 | .roam-body .roam-app .roam-sidebar-container { 549 | position: absolute; 550 | top: 45px; 551 | left: -232px; 552 | width: 232px; 553 | bottom: 45px; 554 | z-index: 999; 555 | transition: all 200ms ease-in; 556 | background-color: #2f3437; 557 | background-color: #182026; 558 | } 559 | .roam-body .roam-app .roam-sidebar-container .roam-hover-sidebar-reveal { 560 | position: absolute; 561 | z-index: 99; 562 | top: 0px; 563 | right: -8px; 564 | bottom: 0px; 565 | width: 0px; 566 | } 567 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-topnav { 568 | position: absolute; 569 | top: 0; 570 | padding: 16px; 571 | } 572 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content { 573 | height: 100%; 574 | position: relative; 575 | } 576 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 577 | padding: 8px 20px; 578 | font-weight: bold; 579 | cursor: pointer; 580 | font-size: 14px; 581 | color: #5c7080; 582 | } 583 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 584 | color: #f5f8fa; 585 | background-color: #10161a; 586 | } 587 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 588 | color: #5c7080; 589 | } 590 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages { 591 | overflow-y: auto; 592 | } 593 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 594 | text-decoration: none; 595 | cursor: pointer; 596 | font-size: 14px; 597 | padding: 8px 0px 8px 4px; 598 | color: #5c7080; 599 | } 600 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 601 | color: #f5f8fa; 602 | background-color: #10161a; 603 | } 604 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .title { 605 | padding: 8px; 606 | margin-bottom: 8px; 607 | font-size: 14px; 608 | font-weight: bold; 609 | } 610 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .roam-sidebar-body { 611 | margin-top: 64px; 612 | width: 100%; 613 | transition: all 150ms ease-in; 614 | position: absolute; 615 | overflow: scroll; 616 | } 617 | .roam-body .roam-app .roam-main { 618 | width: 100%; 619 | display: flex; 620 | 621 | } 622 | .roam-body .roam-app .roam-main .roam-article .rm-title-display { 623 | margin-bottom: 32px; 624 | } 625 | #right-sidebar .rm-reference-container { 626 | padding-top: 0px; 627 | border-top: none; 628 | } 629 | .roam-block .rm-reference-container { 630 | padding-top: 0px; 631 | border-top: none; 632 | } 633 | 634 | .pointer { 635 | cursor: pointer; 636 | } 637 | .trunc { 638 | max-width: 120px; 639 | white-space: nowrap; 640 | text-overflow: ellipsis; 641 | overflow: hidden; 642 | } 643 | .bblack { 644 | border: 1px solid black; 645 | background-color: lightgrey; 646 | } 647 | .roam-popup-container { 648 | display: flex; 649 | flex-direction: column; 650 | overflow: scroll; 651 | } 652 | .roam-popup-container .roam-popup-content { 653 | position: absolute; 654 | top: 34px; 655 | bottom: 10px; 656 | width: 100%; 657 | overflow-y: scroll; 658 | } 659 | .rm-input { 660 | width: 100%; 661 | outline: 1px solid transparent; 662 | vertical-align: top; 663 | background-color: transparent; 664 | border: none; 665 | resize: none; 666 | } 667 | .rm-input::-webkit-input-placeholder { 668 | color: #ced9e0; 669 | } 670 | .rm-input:-moz-placeholder { 671 | /* Firefox 18- */ 672 | color: #ced9e0; 673 | } 674 | .rm-input::-moz-placeholder { 675 | /* Firefox 19+ */ 676 | color: #ced9e0; 677 | } 678 | .rm-input:-ms-input-placeholder { 679 | color: #ced9e0; 680 | } 681 | .rm-input::placeholder { 682 | color: #ced9e0; 683 | } 684 | .rm-title-textarea { 685 | width: 100%; 686 | outline: 1px solid transparent; 687 | vertical-align: top; 688 | line-height: 1.3em; 689 | background-color: transparent; 690 | border: none; 691 | resize: none; 692 | } 693 | .rm-title-textarea::-webkit-input-placeholder { 694 | color: #ced9e0; 695 | } 696 | .rm-title-textarea:-moz-placeholder { 697 | /* Firefox 18- */ 698 | color: #ced9e0; 699 | } 700 | .rm-title-textarea::-moz-placeholder { 701 | /* Firefox 19+ */ 702 | color: #ced9e0; 703 | } 704 | .rm-title-textarea:-ms-input-placeholder { 705 | color: #ced9e0; 706 | } 707 | .rm-title-textarea::placeholder { 708 | color: #ced9e0; 709 | } 710 | .rm-title-untitled { 711 | color: #ced9e0; 712 | } 713 | .rm-title-display { 714 | line-height: 1.3em; 715 | font-weight: 450; 716 | word-break: break-word; 717 | min-width: 100px; 718 | width: 100%; 719 | cursor: text; 720 | outline: 1px solid transparent; 721 | } 722 | .roam-log-container .roam-log-page { 723 | border-top: 1px solid #738694; 724 | margin-top: 40px; 725 | padding-top: 40px; 726 | padding-bottom: 16px; 727 | margin-bottom: 16px; 728 | } 729 | .roam-log-container .roam-log-page:first-child { 730 | border: 0px solid blue; 731 | margin-top: 0px; 732 | min-height: 500px; 733 | padding-top: 0px; 734 | } 735 | /* candidate for the context color */ 736 | .roam-log-container .roam-log-preview { 737 | color: #8a9ba8; 738 | } 739 | .roam-log-container .roam-log-preview h1 { 740 | color: #8a9ba8; 741 | } 742 | .roam-log-container .roam-log-preview:hover { 743 | background-color: grey; 744 | } 745 | #buffer { 746 | display: flex; 747 | flex-direction: column; 748 | } 749 | #buffer .help-title { 750 | color: #f5f8fa; 751 | text-align: center; 752 | font-size: 16px; 753 | font-weight: bold; 754 | } 755 | #buffer .help-sub-title { 756 | color: #e1e8ed; 757 | text-align: center; 758 | } 759 | #buffer .help-item-text { 760 | color: #e1e8ed; 761 | } 762 | #buffer .help-item-label { 763 | opacity: 0.6; 764 | color: #e1e8ed; 765 | } 766 | .roam-table { 767 | padding-bottom: 24px; 768 | overflow-x: scroll; 769 | } 770 | .roam-table th, 771 | .roam-table td, 772 | .roam-table tr { 773 | font-size: 12px; 774 | min-width: 100px; 775 | max-height: 20px; 776 | padding: 8px 16px; 777 | margin: 0p; 778 | border: 1px solid grey; 779 | } 780 | .roam-table td { 781 | max-height: 20px; 782 | overflow: scroll; 783 | } 784 | .import-table { 785 | padding-bottom: 24px; 786 | max-width: 100%; 787 | } 788 | .import-table table { 789 | width: 100%; 790 | } 791 | .import-table th, 792 | .import-table td, 793 | .import-table tr { 794 | font-size: 12px; 795 | max-height: 20px; 796 | padding: 8px 16px; 797 | margin: 0p; 798 | border: 1px solid grey; 799 | } 800 | .import-table td { 801 | max-height: 20px; 802 | } 803 | .import-table td .import-preview { 804 | white-space: pre-wrap; 805 | word-break: break-word; 806 | max-width: 50px; 807 | } 808 | #info { 809 | padding: 8px 0px; 810 | margin: 0px 8px; 811 | font-size: 12px; 812 | } 813 | #info table { 814 | margin: 0 auto; 815 | } 816 | #info table, 817 | #info th, 818 | #info td { 819 | padding: 8px; 820 | margin: 0p; 821 | border: 1px solid grey; 822 | } 823 | .hoverparent:hover .hoveronly { 824 | opacity: 1; 825 | } 826 | .hoveronly { 827 | opacity: 0; 828 | } 829 | .hoveronly:hover { 830 | opacity: 1; 831 | } 832 | .tiny { 833 | font-size: 7px; 834 | } 835 | .CodeMirror { 836 | font-family: monospace; 837 | } 838 | .CodeMirror .CodeMirror-code pre { 839 | font-family: monospace; 840 | box-shadow: none; 841 | } 842 | 843 | #roam-sidebar-logo a { 844 | text-decoration: none; 845 | } 846 | #roam-sidebar-logo:hover { 847 | background-color: #10161a; 848 | } 849 | .rm-find-or-create-wrapper { 850 | position: relative; 851 | transition: all 200ms ease-in; 852 | } 853 | .rm-find-or-create-wrapper .bp3-transition-container { 854 | width: 100%; 855 | } 856 | .rm-find-or-create-wrapper .bp3-menu { 857 | max-width: none; 858 | max-height: 400px; 859 | } 860 | .rm-find-or-create-wrapper .rm-menu-item { 861 | padding: 6px; 862 | cursor: pointer; 863 | border-radius: 2px; 864 | } 865 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title { 866 | font-weight: bold; 867 | } 868 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page { 869 | color: #0d8050; 870 | } 871 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item { 872 | word-break: break-word; 873 | color: #8a9ba8; 874 | overflow-wrap: break-spaces; 875 | margin-left: -20px; 876 | } 877 | .rm-fill { 878 | width: 100%; 879 | } 880 | .rm-pages-sort-menu-item { 881 | padding-right: 16px; 882 | padding-left: 16px; 883 | font-weight: bold; 884 | } 885 | .rm-pages-row-highlight { 886 | background-color: #793784; 887 | } 888 | .rm-pages-row { 889 | display: flex; 890 | flex: 0 0 auto; 891 | justify-content: space-between; 892 | align-items: flex-start; 893 | } 894 | .rm-pages-row .rm-pages-sort-header { 895 | display: flex; 896 | flex: 0 0 auto; 897 | align-items: center; 898 | cursor: pointer; 899 | } 900 | .rm-pages-row .rm-pages-sort-header:hover { 901 | text-decoration: underline; 902 | } 903 | .rm-pages-row .rm-pages-title-col { 904 | padding: 8px 4px; 905 | flex: 1 0 50%; 906 | text-overflow: ellipsis; 907 | } 908 | .rm-pages-row .rm-pages-action-col { 909 | text-align: right; 910 | flex: 1 0 0; 911 | padding: 8px 4px; 912 | } 913 | .rm-pages-row .rm-pages-col { 914 | color: #8a9ba8; 915 | padding: 8px 4px; 916 | flex: 1 0 15%; 917 | } 918 | /* candidate for changing the background color of a block reference */ 919 | .rm-reference-item { 920 | margin-top: 8px; 921 | margin-right: 8px; 922 | flex: 1 1 100%; 923 | word-break: break-word; 924 | background-color: #f5f8fa; 925 | padding-right: 8px; 926 | } 927 | .rm-level1 textarea { 928 | line-height: 1.2; 929 | } 930 | .rm-level1 .roam-block { 931 | line-height: 1.2; 932 | margin-top: -8px; /* RTB add */ 933 | } 934 | 935 | /* RTB new section */ 936 | .rm-level2 .roam-block { 937 | margin-top: -8px; 938 | } 939 | 940 | .rm-level3 { 941 | font-weight: 500; 942 | font-size: 1.2em; 943 | color: #5c7080; 944 | } 945 | 946 | /* RTB new section */ 947 | .rm-level3 .roam-block { 948 | margin-top: -5px; 949 | } 950 | 951 | .rm-title1 { 952 | word-break: break-word; 953 | font-weight: 400; 954 | } 955 | .rm-histogram-table { 956 | width: 100%; 957 | margin-left: -8px; 958 | box-sizing: border-box; 959 | } 960 | .rm-histogram-table td { 961 | vertical-align: top; 962 | min-width: 18px; 963 | max-width: 18px; 964 | border: 1px solid transparent; 965 | } 966 | .rm-histogram-table td .flex-v-box { 967 | border-right: 0.2px solid #48aff0; 968 | justify-content: flex-start; 969 | align-items: center; 970 | } 971 | .rm-histogram-table td .flex-v-box .bp3-popover-wrapper { 972 | margin-top: 0px; 973 | margin-bottom: 0px; 974 | padding-bottom: 0px; 975 | } 976 | .rm-histogram-table td .flex-v-box .table-edited-by-view { 977 | transform-origin: center; 978 | background-size: cover; 979 | border: 1px solid darkgray; 980 | font-size: 0.7em; 981 | height: 12px; 982 | width: 12px; 983 | margin: 0px; 984 | padding: 0px; 985 | border-radius: 100%; 986 | background-repeat: no-repeat; 987 | } 988 | .slider .slider-cell { 989 | border: 1px solid transparent; 990 | flex: "1 0 100%"; 991 | } 992 | .slider .flex-v-box { 993 | justify-content: flex-start; 994 | align-items: center; 995 | } 996 | .slider .flex-v-box .bp3-popover-wrapper { 997 | margin-top: 0px; 998 | margin-bottom: 0px; 999 | padding-bottom: 0px; 1000 | } 1001 | .slider .flex-v-box .table-edited-by-view { 1002 | transform-origin: center; 1003 | background-size: cover; 1004 | border: 1px solid darkgray; 1005 | font-size: 0.7em; 1006 | height: 12px; 1007 | width: 12px; 1008 | margin: 0px; 1009 | padding: 0px; 1010 | border-radius: 100%; 1011 | background-repeat: no-repeat; 1012 | } 1013 | .nowrap { 1014 | white-space: nowrap; 1015 | } 1016 | #rm-mobile-bar .rm-mobile-button { 1017 | flex: 1 0 0; 1018 | } 1019 | .roam-intense { 1020 | background-color: yellow; 1021 | margin: -2px; 1022 | padding: 2px; 1023 | } 1024 | .roam-highlight { 1025 | background-color: #793784; 1026 | margin: -2px; 1027 | padding: 2px; 1028 | } 1029 | .roam-bullet-closed { 1030 | background-color: #ced9e0; 1031 | } 1032 | #right-sidebar .roam-bullet-closed { 1033 | background-color: #a7b6c2; 1034 | } 1035 | .level1 { 1036 | font-family: Roboto, sans-serif; 1037 | font-weight: 200; 1038 | font-size: 40px; 1039 | color: #444444; 1040 | letter-spacing: normal; 1041 | /*-ms-font-feature-settings: 'ss20' 1;*/ 1042 | } 1043 | .rm-pm-editor { 1044 | padding: 5px; 1045 | min-height: 100px; 1046 | outline: 0 !important; 1047 | } 1048 | .rm-pm-editor h1 { 1049 | font-family: 'Inter', sans-serif; 1050 | font-weight: 400; 1051 | font-size: 1.8em; 1052 | } 1053 | .rm-pm-editor h1 textarea { 1054 | line-height: 1.2; 1055 | } 1056 | .rm-pm-editor h1 .roam-block { 1057 | line-height: 1.2; 1058 | } 1059 | .rm-pm-editor h2 { 1060 | font-family: 'Inter', sans-serif !important; 1061 | font-weight: 400; 1062 | font-size: 1.4em; 1063 | } 1064 | .rm-pm-editor h3 { 1065 | font-weight: 500; 1066 | font-size: 1.2em; 1067 | color: #5c7080; 1068 | } 1069 | .rm-pm-editor img { 1070 | max-width: 100%; 1071 | } 1072 | .rm-pm-sub-editor-wrapper { 1073 | padding: 2.5px; 1074 | margin: 2px; 1075 | background-color: rgba(201, 201, 207, 0.1); 1076 | } 1077 | .rm-section-item { 1078 | width: -webkit-max-content; 1079 | width: -moz-max-content; 1080 | width: max-content; 1081 | } 1082 | .rm-section { 1083 | background-color: yellow; 1084 | } 1085 | .rm-section-selected { 1086 | background-color: lightblue; 1087 | } 1088 | .rm-edit-view-wrapper { 1089 | min-width: 21px; 1090 | } 1091 | .edited-by-view { 1092 | flex: 0 0 21px; 1093 | transform-origin: center; 1094 | background-size: cover; 1095 | border: 1px solid darkgray; 1096 | font-size: 0.7em; 1097 | margin-top: 6.5px; 1098 | margin-right: 6px; 1099 | margin-left: 0px; 1100 | height: 15px; 1101 | width: 15px; 1102 | border-radius: 100%; 1103 | background-repeat: no-repeat; 1104 | } 1105 | .roam-block-container { 1106 | max-width: 740px; 1107 | border-radius: 2px; 1108 | } 1109 | 1110 | .block-bullet-view { 1111 | flex: 1 1 100%; 1112 | margin-left: 5px; 1113 | } 1114 | .block-border-left { 1115 | /* border-left: 1px solid #bfccd6; RTB: Remove left-side vertical lines */ 1116 | } 1117 | .text-align-left { 1118 | text-align: left; 1119 | } 1120 | .text-align-center { 1121 | text-align: center; 1122 | } 1123 | .text-align-right { 1124 | text-align: right; 1125 | } 1126 | .text-align-justify { 1127 | text-align: justify; 1128 | } 1129 | .roam-block { 1130 | min-height: calc(1.5em + 8px); 1131 | box-sizing: border-box; 1132 | white-space: pre-wrap; 1133 | overflow-wrap: break-word; 1134 | margin-top: -1px; 1135 | min-width: 100px; 1136 | width: 100%; 1137 | line-height: 1.5em; 1138 | cursor: text; 1139 | padding-top: 4px; 1140 | padding-bottom: 4px; 1141 | } 1142 | .roam-block .span-view { 1143 | box-sizing: border-box; 1144 | } 1145 | 1146 | .rm-block-text { 1147 | max-width: 700px; /* RTB change: desired section width fff */ 1148 | color: #F8F8F2; 1149 | } 1150 | 1151 | .controls { 1152 | display: flex; 1153 | flex: 0 0 40px; 1154 | padding-top: 4px; 1155 | padding-left: 4px; 1156 | } 1157 | .controls .block-expand { 1158 | transform: scale(1); 1159 | transform-origin: center; 1160 | } 1161 | .controls .block-expand .rm-caret { 1162 | transition: all 100ms ease-in; 1163 | } 1164 | .controls .block-expand .rm-rotate-90 { 1165 | transform: rotate(-90deg); 1166 | } 1167 | .controls .opacity-none { 1168 | opacity: 0; 1169 | } 1170 | .controls .opacity-7 { 1171 | opacity: 0.7; 1172 | } 1173 | .controls .cursor-pointer { 1174 | cursor: pointer; 1175 | } 1176 | .controls .cursor-grab { 1177 | cursor: grab; 1178 | } 1179 | .controls .bk-light-grey { 1180 | background-color: #ced9e0; 1181 | } 1182 | .version-bullet { 1183 | background-color: #a7b6c2; 1184 | border: none; 1185 | display: flex; 1186 | cursor: pointer; 1187 | flex-direction: column; 1188 | align-items: center; 1189 | justify-content: center; 1190 | padding: 0px; 1191 | transform: scale(0.9); 1192 | transform-origin: center; 1193 | margin-top: 2px; 1194 | margin-left: 0px; 1195 | height: 16px; 1196 | font-size: 9px; 1197 | color: white; 1198 | text-align: center; 1199 | min-height: 16px; 1200 | max-height: 16px; 1201 | min-width: 16px; 1202 | max-width: 16px; 1203 | border-radius: 16px; 1204 | } 1205 | .dnd-separator { 1206 | position: relative; 1207 | width: 100%; 1208 | } 1209 | .dnd-separator .dnd-drop-area { 1210 | position: absolute; 1211 | top: -11px; 1212 | height: 28px; 1213 | width: 100%; 1214 | } 1215 | .dnd-separator .dnd-drop-bar { 1216 | position: absolute; 1217 | z-index: 0; 1218 | top: -4px; 1219 | left: 20px; 1220 | width: 96%; 1221 | height: 4px; 1222 | border-radius: 10px; 1223 | background-color: #5c7080; 1224 | } 1225 | .rm-database { 1226 | background-color: #182026; 1227 | color: #ced9e0; 1228 | } 1229 | .rm-mentions-search-items { 1230 | padding: 8px; 1231 | } 1232 | .rm-mentions-search-items .rm-mentions-title { 1233 | font-size: 20px; 1234 | font-weight: lighter; 1235 | margin: 4px; 1236 | } 1237 | .rm-mentions-search-items .rm-mentions-search-item { 1238 | padding: 12px; 1239 | cursor: pointer; 1240 | background-color: #f5f8fa; 1241 | border: 1px solid #bfccd6; 1242 | } 1243 | .rm-mentions-search-items .rm-mentions-search-item:hover { 1244 | background-color: #bfccd6; 1245 | } 1246 | .block-ref-count-button { 1247 | font-size: 0.9em; 1248 | } 1249 | .rm-grey-text { 1250 | color: #85406B !important; 1251 | } 1252 | .rm-red-text { 1253 | color: red; 1254 | } 1255 | .flex-v-box { 1256 | display: flex; 1257 | flex: 0 0 auto; 1258 | flex-direction: column; 1259 | } 1260 | .flex-h-box { 1261 | display: flex; 1262 | flex: 0 0 auto; 1263 | padding-bottom: 10px; /* RTB add: a little extra space between bullets */ 1264 | } 1265 | .flex-align-start { 1266 | align-items: flex-start; 1267 | } 1268 | .flex-justify-start { 1269 | justify-content: flex-start; 1270 | } 1271 | .tags-input { 1272 | display: inline-block; 1273 | width: 10em; 1274 | margin: 0 0 4px; 1275 | padding: 4px 6px; 1276 | background: none; 1277 | border: 0; 1278 | outline: 0; 1279 | font: inherit; 1280 | color: inherit; 1281 | text-align: left; 1282 | text-shadow: none; 1283 | } 1284 | .tags-input:focus { 1285 | /* box-shadow: 0 0 5px rgba(81, 203, 238, 1); */ 1286 | /* border: 2px solid white; */ 1287 | /* border-bottom-color: #448cca; */ 1288 | } 1289 | .tags-output { 1290 | display: inline-block; 1291 | margin-left: 4px; 1292 | } 1293 | .tags-output-item { 1294 | display: inline-block; 1295 | background-color: lightgrey; 1296 | cursor: pointer; 1297 | margin: 0 4px 4px 0; 1298 | padding: 4px 6px; 1299 | font-size: 10px; 1300 | border-radius: 4px; 1301 | } 1302 | .tags-output-item2 { 1303 | background-color: black; 1304 | display: inline-block; 1305 | text-decoration: none; 1306 | color: white; 1307 | cursor: pointer; 1308 | margin-left: 6px; 1309 | } 1310 | html { 1311 | margin: 0; 1312 | min-height: 100%; 1313 | } 1314 | body { 1315 | margin: 0; 1316 | padding: 0; 1317 | } 1318 | .xtra { 1319 | transform: scale(3); 1320 | border-radius: 50%; 1321 | padding: 4px; 1322 | } 1323 | .border { 1324 | border: 1px solid ; 1325 | } 1326 | .display-flex { 1327 | display: -webkit-flex; 1328 | display: flex; 1329 | } 1330 | .display-inline-flex { 1331 | display: -webkit-inline-flex; 1332 | display: inline-flex; 1333 | } 1334 | .react-resizable { 1335 | position: relative; 1336 | } 1337 | .react-resizable-handle { 1338 | position: absolute; 1339 | width: 20px; 1340 | height: 20px; 1341 | bottom: 0; 1342 | right: 0; 1343 | background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+'); 1344 | background-position: bottom right; 1345 | padding: 0 3px 3px 0; 1346 | background-repeat: no-repeat; 1347 | background-origin: content-box; 1348 | box-sizing: border-box; 1349 | cursor: se-resize; 1350 | } 1351 | .resize-card { 1352 | overflow-y: hidden; 1353 | } 1354 | .noselect { 1355 | -webkit-touch-callout: none; 1356 | /* iOS Safari */ 1357 | -webkit-user-select: none; 1358 | /* Safari */ 1359 | -khtml-user-select: none; 1360 | /* Konqueror HTML */ 1361 | -moz-user-select: none; 1362 | /* Firefox */ 1363 | -ms-user-select: none; 1364 | /* Internet Explorer/Edge */ 1365 | user-select: none; 1366 | /* Non-prefixed version, currently */ 1367 | } 1368 | 1369 | /* RTB additions below */ 1370 | 1371 | #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { 1372 | margin-top: 3px; 1373 | } 1374 | 1375 | #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { 1376 | margin-top: 3px; 1377 | } 1378 | 1379 | #roam-right-sidebar-content .rm-level1 .roam-block { 1380 | margin-top: -5px; 1381 | } 1382 | 1383 | #roam-right-sidebar-content .rm-level2 .roam-block { 1384 | margin-top: -5px; 1385 | } 1386 | 1387 | #roam-right-sidebar-content .rm-level3 .roam-block { 1388 | margin-top: -3px; 1389 | } 1390 | 1391 | #roam-right-sidebar-content { 1392 | font-size: 16px; 1393 | } 1394 | 1395 | #roam-right-sidebar-content .rm-block-ref { 1396 | font-size: 14px; /* make block ref in side-bar a little smaller to show that's it's a reference */ 1397 | /* color: #9d6500; Don't change color of full block ref in sidebar */ 1398 | } 1399 | 1400 | a { 1401 | color: #8AFF80; /* solarized light color */ 1402 | } 1403 | 1404 | /* 1405 | Popup menu when typing / below 1406 | .bp3-elevation-3 { 1407 | background-color: navajowhite !important; 1408 | } 1409 | .bp3-elevation-3 div { 1410 | font-family: ... 1411 | } 1412 | */ 1413 | /* background color for right sidebar */ 1414 | #right-sidebar { 1415 | background-color: #353844 !important; /* nicer light gray color */ 1416 | } 1417 | 1418 | /* target block embeds on main page and in sidebar */ 1419 | div[id^='block-input-'] > span > div { 1420 | background-color: #80FFEA3b !important; 1421 | } 1422 | 1423 | 1424 | /* Side Bar */ 1425 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button, 1426 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper, 1427 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 1428 | background-color: #22212C; 1429 | color: #80FFEA; 1430 | } 1431 | 1432 | /* Better hover effect for shortcut pages in left side-bar */ 1433 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 1434 | color: #80FFEA; 1435 | background-color: #7970A9; 1436 | } 1437 | /* Omni Sidebar Hover State */ 1438 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 1439 | color: #80FFEA; 1440 | background-color: #7970A9; 1441 | } 1442 | 1443 | 1444 | /* Side Bar Open/Close Icon */ 1445 | .bp3-button:before, 1446 | .bp3-minimal:before, 1447 | .bp3-icon-menu:before, 1448 | .bp3-small:before { 1449 | color: #80FFEA !important; 1450 | } 1451 | 1452 | /* Change sideboard left sidebar to all one color */ 1453 | .roam-body .roam-app .roam-sidebar-container { 1454 | background-color: #22212C !important; 1455 | } 1456 | /*Change Roam Research logo color to match theme*/ 1457 | #roam-sidebar-logo { 1458 | filter: brightness(0) saturate(100%) invert(92%) sepia(20%) saturate(457%) hue-rotate(315deg) brightness(108%) contrast(99%); 1459 | } 1460 | #roam-sidebar-logo:focus, #roam-sidebar-logo:hover { 1461 | text-decoration: none !important; 1462 | } 1463 | /* Change color of the email address at top of left sidebar to match theme */ 1464 | .bp3-button div { 1465 | color: #80FFEA !important; 1466 | } 1467 | 1468 | /*scrollbar*/ 1469 | ::-webkit-scrollbar { 1470 | width: 7px; 1471 | } 1472 | /*lets me customize color of the selected block and text within it, focus on my attention on where I'm writing*/ 1473 | .rm-block-input { 1474 | line-height: 1.5em; 1475 | width: 100%; 1476 | outline: 1px solid rgba(0, 0, 0, 0); 1477 | overflow-wrap: break-spaces; 1478 | vertical-align: top; 1479 | margin-top: -1px; 1480 | color: #fff !important; 1481 | background-color: #7970A9; 1482 | padding-top: 4px; 1483 | padding-bottom: 4px; 1484 | padding-left: 5px; 1485 | letter-spacing: inherit; 1486 | border-radius: 10px; 1487 | resize: none; 1488 | } 1489 | 1490 | /*SEARCH BAR*/ 1491 | 1492 | /* search bar extended */ 1493 | .rm-find-or-create-wrapper { 1494 | flex: 0 1 100% !important; 1495 | } 1496 | /* Input Text Color */ 1497 | .bp3-input { 1498 | color: #80FFEA; 1499 | } 1500 | 1501 | /* Roam Search Box Field and Border */ 1502 | .bp3-input, 1503 | .bp3-input[readonly]{ 1504 | background: #363845; 1505 | box-shadow: inset 0 0 0 2px g; 1506 | } 1507 | 1508 | /* Roam Search Box Placeholder Text Color */ 1509 | .bp3-input::placeholder, 1510 | .bp3-input-group > .bp3-icon { 1511 | color: #80FFEA; 1512 | } 1513 | 1514 | /* Context Menus */ 1515 | .bp3-popover .bp3-popover-content, 1516 | .bp3-menu { 1517 | background: #23252F; 1518 | color: #cac2db; 1519 | border-radius: 4px; 1520 | box-shadow: 0 0 0 1px #b5aacd, 1521 | 0 2px 10px #b5aacd, 1522 | 0 3px 15px #b5aacd; 1523 | } 1524 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page { 1525 | color: #793784; 1526 | } 1527 | 1528 | /*reduces font size when I'm doing an inline search with [[]] or (()) */ 1529 | div.bp3-elevation-3 { 1530 | font-size: 0.85em; 1531 | background-color: #9580FF; 1532 | color: #000; 1533 | } 1534 | /* Slash Popup */ 1535 | .bp3-elevation-3 { 1536 | color: #1775db; 1537 | background-color: #22212C !important; 1538 | font-size: 12px; 1539 | border-radius: 4px; 1540 | box-shadow: 0 0 0 2px #544158, 1541 | 0 2px 15px #544158; 1542 | } 1543 | .bp3-elevation-3 .dont-unfocus-block { 1544 | filter: invert(100%); 1545 | } 1546 | /*Wraps text when I'm doing an inline search with [[]] or (())*/ 1547 | .bp3-text-overflow-ellipsis { 1548 | text-overflow: unset; 1549 | white-space: unset; 1550 | } 1551 | 1552 | /* Increases the height of the inline search box */ 1553 | div.bp3-elevation-3[style^='max-height: 300px; top: 26px; overflow: auto;'] { 1554 | max-height: 600px !important; 1555 | } 1556 | 1557 | /* Right side bar reference boxes */ 1558 | 1559 | #right-sidebar .rm-reference-item { 1560 | background-color: #353845; 1561 | border-radius: 15px; 1562 | padding: 5px; 1563 | color: #fff 1564 | } 1565 | 1566 | /* Reference Boxes */ 1567 | .rm-reference-item { 1568 | background-color: #2D2F3E; 1569 | border-radius: 15px; 1570 | padding: 20px; 1571 | } 1572 | 1573 | /*make topbar have same color as general background color */ 1574 | .roam-topbar { 1575 | height: 45px; 1576 | position: fixed; 1577 | width: 100%; 1578 | z-index: 101; 1579 | background-color: #454158; /* RTB change: main bear background color main - solarized light */ 1580 | padding-right: 16px; 1581 | padding-left: 16px; 1582 | display: flex; 1583 | flex-direction: column; 1584 | justify-content: center; 1585 | } 1586 | 1587 | .roam-body { 1588 | height: 100vh; 1589 | overflow: hidden; 1590 | position: relative; 1591 | background-color: #454158; /* RTB add: roam main background color main bear color - solarized light */ 1592 | } 1593 | 1594 | /* ### All Pages View ### */ 1595 | .rm-pages-row { 1596 | background-color: #353844 !important; 1597 | border-bottom: 1px solid #353844 !important; 1598 | } 1599 | .rm-pages-title-col > .bp3-text-overflow-ellipsis > a { 1600 | color: #80FFEA !important; 1601 | } 1602 | .rm-pages-title-col > .bp3-text-overflow-ellipsis > span { 1603 | color: #83F58A !important; 1604 | } 1605 | 1606 | 1607 | /* css font */ 1608 | 1609 | .rm-level2 { 1610 | font-family: 'Avenir Next' !important; /* RTB change */ 1611 | font-weight: 400; 1612 | font-size: 1.4em; 1613 | } 1614 | 1615 | .rm-level1 { 1616 | font-family: 'Avenir Next'; /* RTB change */ 1617 | font-weight: 400; 1618 | font-size: 1.8em; 1619 | } 1620 | 1621 | div { 1622 | font-family: 'Avenir Next'; /* RTB change: desired font (bear) */ 1623 | font-size: 1em; 1624 | line-height: 1.5em; 1625 | margin: 0px; 1626 | padding: 0px; 1627 | } 1628 | textarea { 1629 | font-family: 'Avenir Next'; /* RTB change: desired font (bear) */ 1630 | font-size: 1em; 1631 | line-height: 1.5em; 1632 | margin: 0px; 1633 | padding: 0px; 1634 | } 1635 | 1636 | /* text color */ 1637 | .roam-body .roam-app .roam-main .roam-article { 1638 | position: relative; 1639 | padding: 16px 42px 120px; 1640 | font-size: 20px; /* RTB add: larger font */ 1641 | color: #F8F8F2; /* RTB add: roam color - solarized light */ 1642 | } 1643 | 1644 | /* Header Styles */ 1645 | /* RR change: Header styles */ 1646 | .roam-body .roam-app h1 { 1647 | /*color: #202b33;*/ 1648 | /*RR change: font, blue text and background highlight*/ 1649 | color: #8AFF80; 1650 | /* background-color: #2f2d2a; */ 1651 | padding-left: 10px; 1652 | } 1653 | .roam-body .roam-app h2 { 1654 | color: #FFCA80; 1655 | /* background-color: #2f2d2a; */ 1656 | padding-left: 10px; 1657 | margin-top: -5px !important; 1658 | } 1659 | .roam-app h3 { 1660 | font-weight: bold; 1661 | color: #FFCA80; 1662 | /* background-color: #2f2d2a; */ 1663 | padding-left: 10px; 1664 | margin-top: -3px !important; 1665 | } 1666 | 1667 | .controls .simple-bullet-outer { 1668 | display: flex; 1669 | height: 13px; 1670 | width: 13px; 1671 | margin-top: 6.3px; /* RTB change: center bullet to match font sizing */ 1672 | border-radius: 50%; 1673 | justify-content: center; 1674 | align-items: center; 1675 | } 1676 | .controls .simple-bullet-outer .simple-bullet-inner { 1677 | border-radius: 50%; 1678 | width: 5px; 1679 | height: 5px; 1680 | background-color: #C7B1F5; /* RTB change: solarized light bullet */ 1681 | } 1682 | 1683 | /*checkbox stuff*/ 1684 | 1685 | .check-container { 1686 | display: inline-block; 1687 | position: relative; 1688 | padding-left: 16px; /* RTB change: align checkbox for updated spacing */ 1689 | margin-bottom: 10px; 1690 | cursor: pointer; 1691 | font-size: 22px; 1692 | -webkit-user-select: none; 1693 | -moz-user-select: none; 1694 | -ms-user-select: none; 1695 | user-select: none; 1696 | vertical-align: bottom; 1697 | top: -14px; /* RTB change: align checkbox for updated spacing */ 1698 | } 1699 | /* Hide the browser's default checkbox */ 1700 | .check-container input { 1701 | position: absolute; 1702 | opacity: 0; 1703 | cursor: pointer; 1704 | height: 0; 1705 | width: 0; 1706 | } 1707 | /* Create a custom checkbox */ 1708 | .checkmark { 1709 | position: absolute; 1710 | top: 0px; 1711 | left: 0; 1712 | height: 16px; 1713 | border-radius: 2px; 1714 | width: 16px; 1715 | border: 1px solid #C7B1F5; 1716 | background-color: #585b70 1717 | } 1718 | /* On mouse-over, add a grey background color */ 1719 | /* When the checkbox is checked, add a blue background */ 1720 | .check-container input:checked ~ .checkmark { 1721 | background-color: #585b70; /* solarized light */ 1722 | border: 1px solid #C7B1F5; 1723 | } 1724 | /* Create the checkmark/indicator (hidden when not checked) */ 1725 | .checkmark:after { 1726 | content: ""; 1727 | position: absolute; 1728 | display: none; 1729 | } 1730 | /* Show the checkmark when checked */ 1731 | .check-container input:checked ~ .checkmark:after { 1732 | display: block; 1733 | } 1734 | /* Style the checkmark/indicator */ 1735 | .check-container .checkmark:after { 1736 | left: 4px; 1737 | top: -1.px; 1738 | width: 8px; 1739 | height: 13px; 1740 | border: solid #C7B1F5; 1741 | border-width: 0 2px 2px 0; 1742 | -webkit-transform: rotate(45deg); 1743 | -ms-transform: rotate(45deg); 1744 | transform: rotate(40deg) scale(0.8); 1745 | } 1746 | 1747 | /*Some things with page links an block references*/ 1748 | .block-mention { 1749 | margin: 4px 8px 4px 0px; 1750 | cursor: pointer; 1751 | padding: 8px; 1752 | background-color: #FF80BF; 1753 | } 1754 | .block-mention:hover { 1755 | background-color: #a7b6c2; 1756 | } 1757 | .rm-page-ref { 1758 | cursor: pointer; 1759 | } 1760 | .rm-page-ref:hover { 1761 | text-decoration: underline; 1762 | } 1763 | .rm-page-ref-tag { 1764 | color: #80FFEA; 1765 | background-color: #7970A9; 1766 | border-radius: 10px; 1767 | padding: 2px 3px 2px 3px; 1768 | } 1769 | .rm-page-ref-brackets { 1770 | color: #C7B1F5; 1771 | } 1772 | .rm-page-ref-link-color { 1773 | color: #80FFEA; /* RTB solarized light color on page names page links*/ 1774 | } 1775 | .rm-page-ref-namespace-color { 1776 | color: #8AFF80; 1777 | } 1778 | /* candidate block reference color*/ 1779 | .rm-block-ref { 1780 | padding: 1px 2px; 1781 | margin: -4px 0px; 1782 | font-size: 20px; /* RTB change: block ref's same size as others */ 1783 | display: inline; 1784 | border-bottom: 1px solid #ced9e0; 1785 | cursor: alias; 1786 | padding-left: 0px; /* RTB add: align to left */ 1787 | } 1788 | /* css block reference hovor color */ 1789 | .rm-block-ref:hover { 1790 | background-color: #847CA5; 1791 | } 1792 | 1793 | .rm-reference-container { 1794 | border-top: 2px solid #2A212C; 1795 | padding-top: 12px; 1796 | margin-bottom: 8px; 1797 | } 1798 | 1799 | /*Pill Page References*/ 1800 | /*span.rm-page-ref { 1801 | background-color: #fbd15b75 !important; 1802 | font-size: 18px; 1803 | letter-spacing: .07em; 1804 | } 1805 | span.rm-page-ref { 1806 | color: black !important; 1807 | border-radius: 10px; 1808 | padding: 2px 3px 2px 3px; 1809 | } 1810 | 1811 | span.rm-page-ref:hover { 1812 | color: black !important; 1813 | background-color: #b0d4fc !important; 1814 | text-decoration: none; 1815 | } 1816 | span.rm-page-ref:hover { 1817 | color: #000 !important; 1818 | background-color: #ffca36d9 !important; 1819 | border-radius: 15px; 1820 | text-decoration: none; 1821 | }*/ 1822 | 1823 | /*change some of the louder highlight colors:*/ 1824 | .block-highlight-grey { 1825 | background-color: #ced9e0; 1826 | } 1827 | .block-highlight-blue { 1828 | background-color: #7D729D; 1829 | } 1830 | .block-highlight-yellow { 1831 | background-color: #7D729D; 1832 | } 1833 | 1834 | /* change the color of what's selected when I'm going through the search bar */ 1835 | .flex-v-box.rm-menu-item[style ^="background-color"] { 1836 | background-color: #454158 !important; 1837 | } 1838 | .flex-v-box.rm-menu-item:hover, .flex-v-box.rm-menu-item[style ^="background-color"]:hover { 1839 | background-color: #454158 !important; 1840 | } 1841 | 1842 | /*RR change: additional text styles*/ 1843 | .roam-app strong { 1844 | color: #FF9580 !important; 1845 | } 1846 | 1847 | .roam-app em { 1848 | color: #FF80BF; 1849 | } 1850 | 1851 | .roam-block .rm-reference-main { 1852 | border: 1px solid #ced9e0; 1853 | padding: 0px 16px 12px 16px; 1854 | background-color: #93a1a173 1855 | } 1856 | -------------------------------------------------------------------------------- /SolarizedLight: -------------------------------------------------------------------------------- 1 | /* 2 | ### ROAM CUSTOM THEME ### 3 | > Many thanks to the Roam Slack community for all the resources, particularly @Anthony and @Mark for their patience with me that helped in this construction. Mostly adapted from Anthony's bear themes, with some mix and matches from other people's codes. I don't know what I'm doing really, just wanted to make it pretty. 4 | > Edits by Rob Haisfield 5 | > v1.0 6 | */ 7 | 8 | /* Editor */ 9 | 10 | @import url('https://abhayprasanna.github.io/rainbow-indent-core.css'); 11 | @import "../fonts/Inter/inter.css"; 12 | .loading-astrolabe { 13 | margin: auto; 14 | position: relative; 15 | width: 250px; 16 | height: 250px; 17 | } 18 | .loading-astrolabe .wand { 19 | position: absolute; 20 | width: 80%; 21 | top: 24.5%; 22 | left: 10%; 23 | animation: nav 3.5s linear infinite; 24 | } 25 | .loading-astrolabe .wand-small { 26 | position: absolute; 27 | width: 80%; 28 | top: 24.5%; 29 | left: 11.5%; 30 | } 31 | .loading-astrolabe .background { 32 | width: 100%; 33 | border: none; 34 | margin-left: -3px; 35 | } 36 | .spinner-astrolabe { 37 | margin: auto; 38 | margin-top: 100px; 39 | position: relative; 40 | width: 200px; 41 | height: 200px; 42 | } 43 | .spinner-astrolabe .wand { 44 | position: absolute; 45 | width: 80%; 46 | top: 24.5%; 47 | left: 10%; 48 | animation: nav 3.5s linear 20s; 49 | } 50 | .spinner-astrolabe .wand:hover { 51 | animation: nav 3.5s linear infinite; 52 | } 53 | .spinner-astrolabe .wand-small { 54 | position: absolute; 55 | width: 80%; 56 | top: 24.5%; 57 | left: 11.5%; 58 | } 59 | .spinner-astrolabe .background { 60 | width: 100%; 61 | border: none; 62 | margin-left: -3px; 63 | } 64 | @keyframes spin { 65 | 0% { 66 | transform: rotate(0deg); 67 | } 68 | 100% { 69 | transform: rotate(360deg); 70 | } 71 | } 72 | @keyframes nav { 73 | 0% { 74 | transform: rotate(0deg); 75 | } 76 | 15% { 77 | transform: rotate(-30deg); 78 | } 79 | 25% { 80 | transform: rotate(30deg); 81 | } 82 | 40% { 83 | transform: rotate(-15deg); 84 | } 85 | 50% { 86 | transform: rotate(40deg); 87 | } 88 | 70% { 89 | transform: rotate(-50deg); 90 | } 91 | 85% { 92 | transform: rotate(75deg); 93 | } 94 | 90% { 95 | transform: rotate(-180deg); 96 | } 97 | 100% { 98 | transform: rotate(-355deg); 99 | } 100 | } 101 | .spinner-square { 102 | box-sizing: border-box; 103 | width: 300px; 104 | height: 300px; 105 | background-color: grey; 106 | display: grid; 107 | grid-template-rows: 1fr 1fr; 108 | padding: 20px; 109 | grid-gap: 20px; 110 | z-index: 3; 111 | grid-template-columns: 1fr 1fr; 112 | cursor: pointer; 113 | } 114 | .spinner-square .spinner-square-front { 115 | background-color: white; 116 | z-index: 5; 117 | } 118 | .spinner-square .spinner-square-rotate { 119 | position: absolute; 120 | margin-left: 75px; 121 | margin-top: 75px; 122 | background-color: black; 123 | width: 150px; 124 | height: 150px; 125 | animation: spin 4.5s linear infinite; 126 | } 127 | .scrollbar { 128 | margin-left: 30px; 129 | float: left; 130 | height: 300px; 131 | width: 65px; 132 | background: #F5F5F5; 133 | overflow-y: scroll; 134 | margin-bottom: 25px; 135 | } 136 | #scroll-1::-webkit-scrollbar-track { 137 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 138 | border-radius: 8px; 139 | background-color: #F5F5F5; 140 | } 141 | #scroll-1::-webkit-scrollbar { 142 | width: 8px; 143 | background-color: #F5F5F5; 144 | } 145 | #scroll-1::-webkit-scrollbar-thumb { 146 | border-radius: 8px; 147 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 148 | background-color: #8A9BA8; 149 | } 150 | #home { 151 | padding: 50px; 152 | background-color: blue; 153 | color: #182026; 154 | } 155 | #home .icons { 156 | padding-left: 20px; 157 | } 158 | #home .icons .bp3-icon-large:hover { 159 | transform: scale(2); 160 | margin-left: 60px; 161 | } 162 | #home2 .dark { 163 | color: white; 164 | background-color: #343a40; 165 | } 166 | #home2 .container { 167 | margin: auto; 168 | max-width: 1110px; 169 | } 170 | #home2 .block { 171 | padding: 7em 0 0; 172 | } 173 | #home2 #header { 174 | width: 100%; 175 | position: fixed; 176 | top: 0; 177 | } 178 | #home2 #header .nav { 179 | display: flex; 180 | flex: 0 0 auto; 181 | align-items: center; 182 | padding: 10px 14px; 183 | } 184 | #home2 #header .nav .bp3-button { 185 | color: white; 186 | } 187 | #home2 #body { 188 | margin-top: 50px; 189 | } 190 | #home2 h1 { 191 | margin-bottom: 20px; 192 | } 193 | #home2 .row { 194 | display: flex; 195 | flex-wrap: wrap; 196 | } 197 | #home2 .col { 198 | margin: 24px auto; 199 | max-width: 300px; 200 | } 201 | #home2 #testimonials .testimonial { 202 | text-align: center; 203 | } 204 | #home2 #logo-graph { 205 | -webkit-filter: grayscale(100%) brightness(60%) contrast(10000000%); 206 | opacity: .4; 207 | display: grid; 208 | } 209 | #home2 #footer { 210 | padding-bottom: 7em; 211 | } 212 | #page { 213 | font-family: Segoe UI, Roboto, sans-serif; 214 | } 215 | #page1 { 216 | margin: 0 auto; 217 | padding-top: 4em; 218 | max-width: 40em; 219 | font-family: Segoe UI, Roboto, sans-serif; 220 | color: #808080; 221 | } 222 | #page1 h1, 223 | #page1 h2 { 224 | color: #4d4d4d; 225 | text-align: center; 226 | } 227 | #page1 .sub { 228 | width: 400px; 229 | margin: 8px auto; 230 | } 231 | #page1 .hero { 232 | margin: 0 auto; 233 | display: flex; 234 | justify-content: center; 235 | } 236 | #page1 .hero button { 237 | min-height: 50px; 238 | font-size: 1.8em; 239 | padding: 16px 20px; 240 | margin: 8px; 241 | } 242 | #page1 .zk { 243 | padding: 25px; 244 | } 245 | #page1 .quotes { 246 | max-width: 80vw; 247 | margin: 20px auto; 248 | } 249 | #page1 .quote { 250 | float: right; 251 | padding-top: 1em; 252 | } 253 | #secret-invite-wrapper { 254 | height: 100vh; 255 | background-color: black; 256 | overscroll-behavior: none; 257 | } 258 | #secret-invite-wrapper #secret-invite { 259 | position: relative; 260 | margin: 0 auto; 261 | padding-top: 4em; 262 | max-width: 40em; 263 | font-family: Segoe UI, Roboto, sans-serif; 264 | color: #b3b3b3; 265 | } 266 | #secret-invite-wrapper #secret-invite #secret-scroll { 267 | position: absolute; 268 | height: 90vh; 269 | overflow: scroll; 270 | } 271 | #secret-invite-wrapper #secret-invite h1, 272 | #secret-invite-wrapper #secret-invite h2 { 273 | color: #cccccc; 274 | text-align: center; 275 | } 276 | #secret-invite-wrapper #secret-invite .sub { 277 | width: 400px; 278 | margin: 8px auto; 279 | } 280 | #secret-invite-wrapper #secret-invite .hero { 281 | margin: 0 auto; 282 | display: flex; 283 | justify-content: center; 284 | } 285 | #secret-invite-wrapper #secret-invite .hero button { 286 | min-height: 50px; 287 | font-size: 1.8em; 288 | padding: 16px 20px; 289 | margin: 8px; 290 | } 291 | #secret-invite-wrapper #secret-invite .zk { 292 | padding: 25px; 293 | } 294 | #secret-invite-wrapper #secret-invite .quotes { 295 | max-width: 80vw; 296 | margin: 20px auto; 297 | } 298 | #secret-invite-wrapper #secret-invite .quote { 299 | float: right; 300 | padding-top: 1em; 301 | } 302 | html { 303 | scroll-behavior: smooth; 304 | } 305 | #landing-page * { 306 | margin: 0; 307 | padding: 0; 308 | } 309 | #landing-page #form { 310 | display: flex; 311 | flex-direction: column; 312 | align-items: center; 313 | padding: 12px; 314 | } 315 | #landing-page #form .ff { 316 | text-align: center; 317 | line-height: 1.8em; 318 | font-size: 1.2em; 319 | max-width: 400px; 320 | } 321 | #landing-page #form form { 322 | display: flex; 323 | flex-direction: column; 324 | } 325 | #landing-page #form form textarea { 326 | max-width: 70vw; 327 | width: 300px; 328 | resize: none; 329 | border: 1px solid lightgrey; 330 | padding: 4px; 331 | } 332 | #landing-page #form form input { 333 | max-width: 70vw; 334 | width: 300px; 335 | padding: 4px; 336 | margin: 8px; 337 | } 338 | #landing-page #header ul { 339 | display: flex; 340 | list-style-type: none; 341 | background-color: #293742; 342 | color: #f5f8fa; 343 | } 344 | #landing-page #header ul .logo { 345 | padding: 8px; 346 | } 347 | #landing-page #header ul li:hover { 348 | background-color: #182026; 349 | } 350 | #landing-page #header ul li a { 351 | display: block; 352 | padding: 8px; 353 | text-decoration: none; 354 | width: 100%; 355 | height: 100%; 356 | color: inherit; 357 | } 358 | #landing-page #cover { 359 | background-color: #182026; 360 | padding: 40px 0 0 0; 361 | min-height: 100vh; 362 | color: #ced9e0; 363 | display: flex; 364 | flex-direction: column; 365 | align-items: center; 366 | } 367 | #landing-page #cover .a { 368 | background-color: #ced9e0; 369 | color: #182026; 370 | border-radius: 4px; 371 | cursor: pointer; 372 | text-decoration: none; 373 | } 374 | #landing-page #cover .a:hover { 375 | color: #0e5a8a; 376 | } 377 | #landing-page #cover #tag-line { 378 | padding: 30px 40px 0px; 379 | } 380 | #landing-page #cover #tag-line ul { 381 | line-height: 32px; 382 | margin-left: 32px; 383 | margin-right: 16px; 384 | margin-top: 25px; 385 | font-size: 16px; 386 | } 387 | #landing-page #cover #endorsement { 388 | margin: 80px 20px 20px; 389 | } 390 | #landing-page #cover #callouts { 391 | margin-top: 10%; 392 | } 393 | #landing-page #cover #callouts button { 394 | font-size: 20px; 395 | padding: 20px; 396 | background-color: #182026; 397 | } 398 | #landing-page #cover #image-collection { 399 | flex: 1 1 400px; 400 | max-width: 500px; 401 | background-color: #ced9e0; 402 | color: #293742; 403 | padding: 40px 40px 40px; 404 | display: flex; 405 | flex-direction: column; 406 | align-items: center; 407 | } 408 | #landing-page #cover #image-collection #images { 409 | color: #182026; 410 | padding: 40px 0px; 411 | display: grid; 412 | grid-template-columns: repeat(auto-fill, minmax(100px, auto)); 413 | grid-column-gap: 20px; 414 | justify-items: start; 415 | align-items: center; 416 | } 417 | #landing-page #cover #image-collection #images img { 418 | margin: 8px; 419 | max-height: 70px; 420 | max-width: 100%; 421 | } 422 | #landing-page #features { 423 | padding: 40px 40px; 424 | background-color: #293742; 425 | border-top: 1px solid #5c7080; 426 | color: #d8e1e8; 427 | flex-direction: column; 428 | } 429 | #landing-page #features ul { 430 | padding-left: 16px; 431 | } 432 | #landing-page #features .feature { 433 | margin: 40px 0px; 434 | display: flex; 435 | justify-content: center; 436 | flex-wrap: wrap; 437 | } 438 | #landing-page #features .feature .feature-content { 439 | width: 400px; 440 | margin: 40px; 441 | } 442 | #landing-page #features .feature .feature-image { 443 | min-height: 400px; 444 | min-width: 400px; 445 | background-color: grey; 446 | } 447 | .rm-emoji-block-view { 448 | display: flex; 449 | flex: 0 0 auto; 450 | flex-wrap: wrap; 451 | margin-left: 40px; 452 | align-items: center; 453 | } 454 | .rm-emoji-block-view .rm-emoji-button { 455 | display: flex; 456 | flex: 0 0 auto; 457 | align-items: center; 458 | cursor: pointer; 459 | border-radius: 20px; 460 | height: 20px; 461 | margin: 0px 4px 4px 0px; 462 | } 463 | .rm-emoji-block-view .rm-emoji-button .rm-emoji { 464 | height: 16px; 465 | margin: 0px 4px; 466 | } 467 | .rm-emoji-block-view .rm-emoji-button .rm-emoji-number { 468 | height: 100%; 469 | font-size: 10px; 470 | margin-right: 6px; 471 | font-weight: 500; 472 | } 473 | .rm-emoji-tooltip { 474 | max-width: 200px; 475 | overflow-wrap: break-word; 476 | font-size: 12px; 477 | color: white; 478 | font-weight: 600; 479 | } 480 | .kanban-board { 481 | background-color: #a7b6c2; 482 | min-width: 100%; 483 | min-height: 48px; 484 | padding: 8px; 485 | overflow-x: scroll; 486 | } 487 | .kanban-column { 488 | background-color: #ededed; 489 | margin: 0px 4px 0px 4px; 490 | padding: 4px; 491 | min-width: 200px; 492 | } 493 | .kanban-title { 494 | text-align: center; 495 | } 496 | .kanban-card { 497 | background-color: white; 498 | margin: 8px; 499 | padding: 8px; 500 | } 501 | html { 502 | font-family: 'Inter', sans-serif; 503 | } 504 | @supports (font-variation-settings: normal) { 505 | html { 506 | font-family: 'Inter var', sans-serif; 507 | } 508 | } 509 | body { 510 | overscroll-behavior: none; 511 | } 512 | ::-webkit-scrollbar { 513 | width: 0px; 514 | background: transparent; 515 | } 516 | * { 517 | box-sizing: border-box; 518 | } 519 | *:focus { 520 | outline-width: 0; 521 | } 522 | .roam-lift { 523 | z-index: 10000; 524 | } 525 | .CodeMirror { 526 | height: auto !important; 527 | } 528 | @media (max-width: 500px) { 529 | .bp3-omnibar { 530 | max-width: 310px; 531 | left: calc((100vw - 310px) / 2); 532 | } 533 | } 534 | .rm-line { 535 | background-color: #ced9e0; 536 | flex: 0 0 1px; 537 | } 538 | .roam-body { 539 | height: 100vh; 540 | overflow: hidden; 541 | position: relative; 542 | background-color: #fcf6e5; /* RTB add: bear color - solarized light */ 543 | } 544 | .roam-body .roam-app { 545 | height: 100%; 546 | width: 100%; 547 | position: relative; 548 | -webkit-overflow-scrolling: touch; 549 | color: #202b33; 550 | } 551 | .roam-body .roam-app h1 { 552 | color: #202b33; 553 | } 554 | .roam-body .roam-app .roam-sidebar-container { 555 | position: absolute; 556 | top: 45px; 557 | left: -232px; 558 | width: 232px; 559 | bottom: 45px; 560 | z-index: 999; 561 | transition: all 200ms ease-in; 562 | background-color: #2f3437; 563 | background-color: #182026; 564 | } 565 | .roam-body .roam-app .roam-sidebar-container .roam-hover-sidebar-reveal { 566 | position: absolute; 567 | z-index: 99; 568 | top: 0px; 569 | right: -8px; 570 | bottom: 0px; 571 | width: 0px; 572 | } 573 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-topnav { 574 | position: absolute; 575 | top: 0; 576 | padding: 16px; 577 | } 578 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content { 579 | height: 100%; 580 | position: relative; 581 | } 582 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 583 | padding: 8px 20px; 584 | font-weight: bold; 585 | cursor: pointer; 586 | font-size: 14px; 587 | color: #5c7080; 588 | } 589 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 590 | color: #f5f8fa; 591 | background-color: #10161a; 592 | } 593 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 594 | color: #5c7080; 595 | } 596 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages { 597 | overflow-y: auto; 598 | } 599 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 600 | text-decoration: none; 601 | cursor: pointer; 602 | font-size: 14px; 603 | padding: 8px 0px 8px 4px; 604 | color: #5c7080; 605 | } 606 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 607 | color: #f5f8fa; 608 | background-color: #10161a; 609 | } 610 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .title { 611 | padding: 8px; 612 | margin-bottom: 8px; 613 | font-size: 14px; 614 | font-weight: bold; 615 | } 616 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .roam-sidebar-body { 617 | margin-top: 64px; 618 | width: 100%; 619 | transition: all 150ms ease-in; 620 | position: absolute; 621 | overflow: scroll; 622 | } 623 | .roam-body .roam-app .roam-main { 624 | width: 100%; 625 | display: flex; 626 | 627 | } 628 | .roam-body .roam-app .roam-main .roam-article { 629 | position: relative; 630 | padding: 16px 42px 120px; 631 | font-size: 20px; /* RTB add: larger font */ 632 | color: #444444; /* RTB add: roam color - solarized light */ 633 | } 634 | .roam-body .roam-app .roam-main .roam-article .rm-title-display { 635 | margin-bottom: 32px; 636 | } 637 | #right-sidebar .rm-reference-container { 638 | padding-top: 0px; 639 | border-top: none; 640 | } 641 | .roam-block .rm-reference-container { 642 | padding-top: 0px; 643 | border-top: none; 644 | } 645 | .roam-block .rm-reference-main { 646 | border: 1px solid #ced9e0; 647 | padding: 0px 16px 12px 16px; 648 | } 649 | .pointer { 650 | cursor: pointer; 651 | } 652 | .roam-topbar { 653 | height: 45px; 654 | position: fixed; 655 | width: 100%; 656 | z-index: 101; 657 | background-color: #fcf5e5; /* RTB change: bear background - solarized light */ 658 | padding-right: 16px; 659 | padding-left: 16px; 660 | display: flex; 661 | flex-direction: column; 662 | justify-content: center; 663 | } 664 | .trunc { 665 | max-width: 120px; 666 | white-space: nowrap; 667 | text-overflow: ellipsis; 668 | overflow: hidden; 669 | } 670 | .bblack { 671 | border: 1px solid black; 672 | background-color: lightgrey; 673 | } 674 | .roam-popup-container { 675 | display: flex; 676 | flex-direction: column; 677 | overflow: scroll; 678 | } 679 | .roam-popup-container .roam-popup-content { 680 | position: absolute; 681 | top: 34px; 682 | bottom: 10px; 683 | width: 100%; 684 | overflow-y: scroll; 685 | } 686 | .rm-input { 687 | width: 100%; 688 | outline: 1px solid transparent; 689 | vertical-align: top; 690 | background-color: transparent; 691 | border: none; 692 | resize: none; 693 | } 694 | .rm-input::-webkit-input-placeholder { 695 | color: #ced9e0; 696 | } 697 | .rm-input:-moz-placeholder { 698 | /* Firefox 18- */ 699 | color: #ced9e0; 700 | } 701 | .rm-input::-moz-placeholder { 702 | /* Firefox 19+ */ 703 | color: #ced9e0; 704 | } 705 | .rm-input:-ms-input-placeholder { 706 | color: #ced9e0; 707 | } 708 | .rm-input::placeholder { 709 | color: #ced9e0; 710 | } 711 | .rm-title-textarea { 712 | width: 100%; 713 | outline: 1px solid transparent; 714 | vertical-align: top; 715 | line-height: 1.3em; 716 | background-color: transparent; 717 | border: none; 718 | resize: none; 719 | } 720 | .rm-title-textarea::-webkit-input-placeholder { 721 | color: #ced9e0; 722 | } 723 | .rm-title-textarea:-moz-placeholder { 724 | /* Firefox 18- */ 725 | color: #ced9e0; 726 | } 727 | .rm-title-textarea::-moz-placeholder { 728 | /* Firefox 19+ */ 729 | color: #ced9e0; 730 | } 731 | .rm-title-textarea:-ms-input-placeholder { 732 | color: #ced9e0; 733 | } 734 | .rm-title-textarea::placeholder { 735 | color: #ced9e0; 736 | } 737 | .rm-title-untitled { 738 | color: #ced9e0; 739 | } 740 | .rm-title-display { 741 | line-height: 1.3em; 742 | font-weight: 450; 743 | word-break: break-word; 744 | min-width: 100px; 745 | width: 100%; 746 | cursor: text; 747 | outline: 1px solid transparent; 748 | } 749 | .roam-log-container .roam-log-page { 750 | border-top: 1px solid #738694; 751 | margin-top: 40px; 752 | padding-top: 40px; 753 | padding-bottom: 16px; 754 | margin-bottom: 16px; 755 | } 756 | .roam-log-container .roam-log-page:first-child { 757 | border: 0px solid blue; 758 | margin-top: 0px; 759 | min-height: 500px; 760 | padding-top: 0px; 761 | } 762 | .roam-log-container .roam-log-preview { 763 | color: #8a9ba8; 764 | } 765 | .roam-log-container .roam-log-preview h1 { 766 | color: #8a9ba8; 767 | } 768 | .roam-log-container .roam-log-preview:hover { 769 | background-color: grey; 770 | } 771 | #buffer { 772 | display: flex; 773 | flex-direction: column; 774 | } 775 | #buffer .help-title { 776 | color: #f5f8fa; 777 | text-align: center; 778 | font-size: 16px; 779 | font-weight: bold; 780 | } 781 | #buffer .help-sub-title { 782 | color: #e1e8ed; 783 | text-align: center; 784 | } 785 | #buffer .help-item-text { 786 | color: #e1e8ed; 787 | } 788 | #buffer .help-item-label { 789 | opacity: 0.6; 790 | color: #e1e8ed; 791 | } 792 | .roam-table { 793 | padding-bottom: 24px; 794 | overflow-x: scroll; 795 | } 796 | .roam-table th, 797 | .roam-table td, 798 | .roam-table tr { 799 | font-size: 12px; 800 | min-width: 100px; 801 | max-height: 20px; 802 | padding: 8px 16px; 803 | margin: 0p; 804 | border: 1px solid grey; 805 | } 806 | .roam-table td { 807 | max-height: 20px; 808 | overflow: scroll; 809 | } 810 | .import-table { 811 | padding-bottom: 24px; 812 | max-width: 100%; 813 | } 814 | .import-table table { 815 | width: 100%; 816 | } 817 | .import-table th, 818 | .import-table td, 819 | .import-table tr { 820 | font-size: 12px; 821 | max-height: 20px; 822 | padding: 8px 16px; 823 | margin: 0p; 824 | border: 1px solid grey; 825 | } 826 | .import-table td { 827 | max-height: 20px; 828 | } 829 | .import-table td .import-preview { 830 | white-space: pre-wrap; 831 | word-break: break-word; 832 | max-width: 50px; 833 | } 834 | #info { 835 | padding: 8px 0px; 836 | margin: 0px 8px; 837 | font-size: 12px; 838 | } 839 | #info table { 840 | margin: 0 auto; 841 | } 842 | #info table, 843 | #info th, 844 | #info td { 845 | padding: 8px; 846 | margin: 0p; 847 | border: 1px solid grey; 848 | } 849 | .hoverparent:hover .hoveronly { 850 | opacity: 1; 851 | } 852 | .hoveronly { 853 | opacity: 0; 854 | } 855 | .hoveronly:hover { 856 | opacity: 1; 857 | } 858 | .tiny { 859 | font-size: 7px; 860 | } 861 | .CodeMirror { 862 | font-family: monospace; 863 | } 864 | .CodeMirror .CodeMirror-code pre { 865 | font-family: monospace; 866 | box-shadow: none; 867 | } 868 | .block-mention { 869 | margin: 4px 8px 4px 0px; 870 | cursor: pointer; 871 | padding: 8px; 872 | background-color: #bfccd6; 873 | } 874 | .block-mention:hover { 875 | background-color: #a7b6c2; 876 | } 877 | .rm-page-ref { 878 | cursor: pointer; 879 | } 880 | .rm-page-ref:hover { 881 | text-decoration: underline; 882 | } 883 | .rm-page-ref-tag { 884 | color: #a7b6c2; 885 | } 886 | .rm-page-ref-brackets { 887 | color: #a7b6c2; 888 | } 889 | .rm-page-ref-link-color { 890 | color: #9d6500; /* solarized light color */ 891 | } 892 | .rm-page-ref-namespace-color { 893 | color: green; 894 | } 895 | .rm-block-ref { 896 | padding: 4px 2px; 897 | margin: -4px 0px; 898 | font-size: 20px; /* RTB change: block ref's same size as others */ 899 | display: inline; 900 | border-bottom: 1px solid #ced9e0; 901 | cursor: alias; 902 | padding-left: 0px; /* RTB add: align to left */ 903 | } 904 | .rm-block-ref:hover { 905 | background-color: #f5f8fa; 906 | } 907 | .rm-reference-container { 908 | border-top: 2px solid #202b33; 909 | padding-top: 12px; 910 | margin-bottom: 8px; 911 | } 912 | .check-container { 913 | display: inline-block; 914 | position: relative; 915 | padding-left: 16px; /* RTB change: align checkbox for updated spacing */ 916 | margin-bottom: 10px; 917 | cursor: pointer; 918 | font-size: 22px; 919 | -webkit-user-select: none; 920 | -moz-user-select: none; 921 | -ms-user-select: none; 922 | user-select: none; 923 | vertical-align: bottom; 924 | top: -12px; /* RTB change: align checkbox for updated spacing */ 925 | } 926 | /* Hide the browser's default checkbox */ 927 | .check-container input { 928 | position: absolute; 929 | opacity: 0; 930 | cursor: pointer; 931 | height: 0; 932 | width: 0; 933 | } 934 | /* Create a custom checkbox */ 935 | .checkmark { 936 | position: absolute; 937 | top: 0px; 938 | left: 0; 939 | height: 12px; 940 | border-radius: 2px; 941 | width: 12px; 942 | border: 1px solid #a7b6c2; 943 | } 944 | /* On mouse-over, add a grey background color */ 945 | /* When the checkbox is checked, add a blue background */ 946 | .check-container input:checked ~ .checkmark { 947 | background-color: #9d6500; /* solarized light */ 948 | border: none; 949 | } 950 | /* Create the checkmark/indicator (hidden when not checked) */ 951 | .checkmark:after { 952 | content: ""; 953 | position: absolute; 954 | display: none; 955 | } 956 | /* Show the checkmark when checked */ 957 | .check-container input:checked ~ .checkmark:after { 958 | display: block; 959 | } 960 | /* Style the checkmark/indicator */ 961 | .check-container .checkmark:after { 962 | left: 3.5px; 963 | top: 0.25px; 964 | width: 5px; 965 | height: 10px; 966 | border: solid white; 967 | border-width: 0 2px 2px 0; 968 | -webkit-transform: rotate(45deg); 969 | -ms-transform: rotate(45deg); 970 | transform: rotate(40deg) scale(0.8); 971 | } 972 | #roam-sidebar-logo a { 973 | text-decoration: none; 974 | } 975 | #roam-sidebar-logo:hover { 976 | background-color: #10161a; 977 | } 978 | .rm-find-or-create-wrapper { 979 | position: relative; 980 | transition: all 200ms ease-in; 981 | } 982 | .rm-find-or-create-wrapper .bp3-transition-container { 983 | width: 100%; 984 | } 985 | .rm-find-or-create-wrapper .bp3-menu { 986 | max-width: none; 987 | max-height: 400px; 988 | } 989 | .rm-find-or-create-wrapper .rm-menu-item { 990 | padding: 6px; 991 | cursor: pointer; 992 | border-radius: 2px; 993 | } 994 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title { 995 | font-weight: bold; 996 | } 997 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page { 998 | color: #0d8050; 999 | } 1000 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item { 1001 | word-break: break-word; 1002 | color: #8a9ba8; 1003 | overflow-wrap: break-spaces; 1004 | margin-left: -20px; 1005 | } 1006 | .rm-fill { 1007 | width: 100%; 1008 | } 1009 | .rm-pages-sort-menu-item { 1010 | padding-right: 16px; 1011 | padding-left: 16px; 1012 | font-weight: bold; 1013 | } 1014 | .rm-pages-row-highlight { 1015 | background-color: #f5f8fa; 1016 | } 1017 | .rm-pages-row { 1018 | display: flex; 1019 | flex: 0 0 auto; 1020 | justify-content: space-between; 1021 | align-items: flex-start; 1022 | } 1023 | .rm-pages-row .rm-pages-sort-header { 1024 | display: flex; 1025 | flex: 0 0 auto; 1026 | align-items: center; 1027 | cursor: pointer; 1028 | } 1029 | .rm-pages-row .rm-pages-sort-header:hover { 1030 | text-decoration: underline; 1031 | } 1032 | .rm-pages-row .rm-pages-title-col { 1033 | padding: 8px 4px; 1034 | flex: 1 0 50%; 1035 | text-overflow: ellipsis; 1036 | } 1037 | .rm-pages-row .rm-pages-action-col { 1038 | text-align: right; 1039 | flex: 1 0 0; 1040 | padding: 8px 4px; 1041 | } 1042 | .rm-pages-row .rm-pages-col { 1043 | color: #8a9ba8; 1044 | padding: 8px 4px; 1045 | flex: 1 0 15%; 1046 | } 1047 | .rm-reference-item { 1048 | margin-top: 8px; 1049 | margin-right: 8px; 1050 | flex: 1 1 100%; 1051 | word-break: break-word; 1052 | background-color: #f5f8fa; 1053 | padding-right: 8px; 1054 | } 1055 | .rm-level1 textarea { 1056 | line-height: 1.2; 1057 | } 1058 | .rm-level1 .roam-block { 1059 | line-height: 1.2; 1060 | margin-top: -8px; /* RTB add */ 1061 | } 1062 | 1063 | /* RTB new section */ 1064 | .rm-level2 .roam-block { 1065 | margin-top: -8px; 1066 | } 1067 | 1068 | .rm-level3 { 1069 | font-weight: 500; 1070 | font-size: 1.2em; 1071 | color: #5c7080; 1072 | } 1073 | 1074 | /* RTB new section */ 1075 | .rm-level3 .roam-block { 1076 | margin-top: -5px; 1077 | } 1078 | 1079 | .rm-title1 { 1080 | word-break: break-word; 1081 | font-weight: 400; 1082 | } 1083 | .rm-histogram-table { 1084 | width: 100%; 1085 | margin-left: -8px; 1086 | box-sizing: border-box; 1087 | } 1088 | .rm-histogram-table td { 1089 | vertical-align: top; 1090 | min-width: 18px; 1091 | max-width: 18px; 1092 | border: 1px solid transparent; 1093 | } 1094 | .rm-histogram-table td .flex-v-box { 1095 | border-right: 0.2px solid #48aff0; 1096 | justify-content: flex-start; 1097 | align-items: center; 1098 | } 1099 | .rm-histogram-table td .flex-v-box .bp3-popover-wrapper { 1100 | margin-top: 0px; 1101 | margin-bottom: 0px; 1102 | padding-bottom: 0px; 1103 | } 1104 | .rm-histogram-table td .flex-v-box .table-edited-by-view { 1105 | transform-origin: center; 1106 | background-size: cover; 1107 | border: 1px solid darkgray; 1108 | font-size: 0.7em; 1109 | height: 12px; 1110 | width: 12px; 1111 | margin: 0px; 1112 | padding: 0px; 1113 | border-radius: 100%; 1114 | background-repeat: no-repeat; 1115 | } 1116 | .slider .slider-cell { 1117 | border: 1px solid transparent; 1118 | flex: "1 0 100%"; 1119 | } 1120 | .slider .flex-v-box { 1121 | justify-content: flex-start; 1122 | align-items: center; 1123 | } 1124 | .slider .flex-v-box .bp3-popover-wrapper { 1125 | margin-top: 0px; 1126 | margin-bottom: 0px; 1127 | padding-bottom: 0px; 1128 | } 1129 | .slider .flex-v-box .table-edited-by-view { 1130 | transform-origin: center; 1131 | background-size: cover; 1132 | border: 1px solid darkgray; 1133 | font-size: 0.7em; 1134 | height: 12px; 1135 | width: 12px; 1136 | margin: 0px; 1137 | padding: 0px; 1138 | border-radius: 100%; 1139 | background-repeat: no-repeat; 1140 | } 1141 | .nowrap { 1142 | white-space: nowrap; 1143 | } 1144 | #rm-mobile-bar .rm-mobile-button { 1145 | flex: 1 0 0; 1146 | } 1147 | .roam-intense { 1148 | background-color: yellow; 1149 | margin: -2px; 1150 | padding: 2px; 1151 | } 1152 | .roam-highlight { 1153 | background-color: #abffa0c4; 1154 | margin: -2px; 1155 | padding: 2px; 1156 | } 1157 | .roam-bullet-closed { 1158 | background-color: #ced9e0; 1159 | } 1160 | #right-sidebar .roam-bullet-closed { 1161 | background-color: #a7b6c2; 1162 | } 1163 | .level1 { 1164 | font-family: Roboto, sans-serif; 1165 | font-weight: 200; 1166 | font-size: 40px; 1167 | color: #444444; 1168 | letter-spacing: normal; 1169 | /*-ms-font-feature-settings: 'ss20' 1;*/ 1170 | } 1171 | .rm-pm-editor { 1172 | padding: 5px; 1173 | min-height: 100px; 1174 | outline: 0 !important; 1175 | } 1176 | .rm-pm-editor h1 { 1177 | font-family: 'Inter', sans-serif; 1178 | font-weight: 400; 1179 | font-size: 1.8em; 1180 | } 1181 | .rm-pm-editor h1 textarea { 1182 | line-height: 1.2; 1183 | } 1184 | .rm-pm-editor h1 .roam-block { 1185 | line-height: 1.2; 1186 | } 1187 | .rm-pm-editor h2 { 1188 | font-family: 'Inter', sans-serif !important; 1189 | font-weight: 400; 1190 | font-size: 1.4em; 1191 | } 1192 | .rm-pm-editor h3 { 1193 | font-weight: 500; 1194 | font-size: 1.2em; 1195 | color: #5c7080; 1196 | } 1197 | .rm-pm-editor img { 1198 | max-width: 100%; 1199 | } 1200 | .rm-pm-sub-editor-wrapper { 1201 | padding: 2.5px; 1202 | margin: 2px; 1203 | background-color: rgba(201, 201, 207, 0.1); 1204 | } 1205 | .rm-section-item { 1206 | width: -webkit-max-content; 1207 | width: -moz-max-content; 1208 | width: max-content; 1209 | } 1210 | .rm-section { 1211 | background-color: yellow; 1212 | } 1213 | .rm-section-selected { 1214 | background-color: lightblue; 1215 | } 1216 | .rm-edit-view-wrapper { 1217 | min-width: 21px; 1218 | } 1219 | .edited-by-view { 1220 | flex: 0 0 21px; 1221 | transform-origin: center; 1222 | background-size: cover; 1223 | border: 1px solid darkgray; 1224 | font-size: 0.7em; 1225 | margin-top: 6.5px; 1226 | margin-right: 6px; 1227 | margin-left: 0px; 1228 | height: 15px; 1229 | width: 15px; 1230 | border-radius: 100%; 1231 | background-repeat: no-repeat; 1232 | } 1233 | .roam-block-container { 1234 | max-width: 740px; 1235 | border-radius: 2px; 1236 | } 1237 | .block-highlight-grey { 1238 | background-color: #ced9e0; 1239 | } 1240 | .block-highlight-blue { 1241 | background-color: #7cccff; 1242 | } 1243 | .block-highlight-yellow { 1244 | background-color: yellow; 1245 | } 1246 | .block-bullet-view { 1247 | flex: 1 1 100%; 1248 | margin-left: 5px; 1249 | } 1250 | .block-border-left { 1251 | /* border-left: 1px solid #bfccd6; RTB: Remove left-side vertical lines */ 1252 | } 1253 | .text-align-left { 1254 | text-align: left; 1255 | } 1256 | .text-align-center { 1257 | text-align: center; 1258 | } 1259 | .text-align-right { 1260 | text-align: right; 1261 | } 1262 | .text-align-justify { 1263 | text-align: justify; 1264 | } 1265 | .roam-block { 1266 | min-height: calc(1.5em + 8px); 1267 | box-sizing: border-box; 1268 | white-space: pre-wrap; 1269 | overflow-wrap: break-word; 1270 | margin-top: -1px; 1271 | min-width: 100px; 1272 | width: 100%; 1273 | line-height: 1.5em; 1274 | cursor: text; 1275 | padding-top: 4px; 1276 | padding-bottom: 4px; 1277 | } 1278 | .roam-block .span-view { 1279 | box-sizing: border-box; 1280 | } 1281 | .rm-block-text { 1282 | max-width: 700px; /* RTB change: desired section width */ 1283 | } 1284 | 1285 | .controls { 1286 | display: flex; 1287 | flex: 0 0 40px; 1288 | padding-top: 4px; 1289 | padding-left: 4px; 1290 | } 1291 | .controls .block-expand { 1292 | transform: scale(1); 1293 | transform-origin: center; 1294 | } 1295 | .controls .block-expand .rm-caret { 1296 | transition: all 100ms ease-in; 1297 | } 1298 | .controls .block-expand .rm-rotate-90 { 1299 | transform: rotate(-90deg); 1300 | } 1301 | .controls .opacity-none { 1302 | opacity: 0; 1303 | } 1304 | .controls .opacity-7 { 1305 | opacity: 0.7; 1306 | } 1307 | .controls .cursor-pointer { 1308 | cursor: pointer; 1309 | } 1310 | .controls .cursor-grab { 1311 | cursor: grab; 1312 | } 1313 | .controls .bk-light-grey { 1314 | background-color: #ced9e0; 1315 | } 1316 | .controls .simple-bullet-outer { 1317 | display: flex; 1318 | height: 13px; 1319 | width: 13px; 1320 | margin-top: 6.3px; /* RTB change: center bullet to match font sizing */ 1321 | border-radius: 50%; 1322 | justify-content: center; 1323 | align-items: center; 1324 | } 1325 | .controls .simple-bullet-outer .simple-bullet-inner { 1326 | border-radius: 50%; 1327 | width: 5px; 1328 | height: 5px; 1329 | background-color: #9d6500; /* RTB change: solarized light bullet */ 1330 | } 1331 | .version-bullet { 1332 | background-color: #a7b6c2; 1333 | border: none; 1334 | display: flex; 1335 | cursor: pointer; 1336 | flex-direction: column; 1337 | align-items: center; 1338 | justify-content: center; 1339 | padding: 0px; 1340 | transform: scale(0.9); 1341 | transform-origin: center; 1342 | margin-top: 2px; 1343 | margin-left: 0px; 1344 | height: 16px; 1345 | font-size: 9px; 1346 | color: white; 1347 | text-align: center; 1348 | min-height: 16px; 1349 | max-height: 16px; 1350 | min-width: 16px; 1351 | max-width: 16px; 1352 | border-radius: 16px; 1353 | } 1354 | .dnd-separator { 1355 | position: relative; 1356 | width: 100%; 1357 | } 1358 | .dnd-separator .dnd-drop-area { 1359 | position: absolute; 1360 | top: -11px; 1361 | height: 28px; 1362 | width: 100%; 1363 | } 1364 | .dnd-separator .dnd-drop-bar { 1365 | position: absolute; 1366 | z-index: 0; 1367 | top: -4px; 1368 | left: 20px; 1369 | width: 96%; 1370 | height: 4px; 1371 | border-radius: 10px; 1372 | background-color: #5c7080; 1373 | } 1374 | .rm-database { 1375 | background-color: #182026; 1376 | color: #ced9e0; 1377 | } 1378 | .rm-mentions-search-items { 1379 | padding: 8px; 1380 | } 1381 | .rm-mentions-search-items .rm-mentions-title { 1382 | font-size: 20px; 1383 | font-weight: lighter; 1384 | margin: 4px; 1385 | } 1386 | .rm-mentions-search-items .rm-mentions-search-item { 1387 | padding: 12px; 1388 | cursor: pointer; 1389 | background-color: #f5f8fa; 1390 | border: 1px solid #bfccd6; 1391 | } 1392 | .rm-mentions-search-items .rm-mentions-search-item:hover { 1393 | background-color: #bfccd6; 1394 | } 1395 | .block-ref-count-button { 1396 | font-size: 0.9em; 1397 | } 1398 | .rm-grey-text { 1399 | color: #8a9ba8; 1400 | } 1401 | .rm-red-text { 1402 | color: red; 1403 | } 1404 | .flex-v-box { 1405 | display: flex; 1406 | flex: 0 0 auto; 1407 | flex-direction: column; 1408 | } 1409 | .flex-h-box { 1410 | display: flex; 1411 | flex: 0 0 auto; 1412 | padding-bottom: 10px; /* RTB add: a little extra space between bullets */ 1413 | } 1414 | .flex-align-start { 1415 | align-items: flex-start; 1416 | } 1417 | .flex-justify-start { 1418 | justify-content: flex-start; 1419 | } 1420 | .tags-input { 1421 | display: inline-block; 1422 | width: 10em; 1423 | margin: 0 0 4px; 1424 | padding: 4px 6px; 1425 | background: none; 1426 | border: 0; 1427 | outline: 0; 1428 | font: inherit; 1429 | color: inherit; 1430 | text-align: left; 1431 | text-shadow: none; 1432 | } 1433 | .tags-input:focus { 1434 | /* box-shadow: 0 0 5px rgba(81, 203, 238, 1); */ 1435 | /* border: 2px solid white; */ 1436 | /* border-bottom-color: #448cca; */ 1437 | } 1438 | .tags-output { 1439 | display: inline-block; 1440 | margin-left: 4px; 1441 | } 1442 | .tags-output-item { 1443 | display: inline-block; 1444 | background-color: lightgrey; 1445 | cursor: pointer; 1446 | margin: 0 4px 4px 0; 1447 | padding: 4px 6px; 1448 | font-size: 10px; 1449 | border-radius: 4px; 1450 | } 1451 | .tags-output-item2 { 1452 | background-color: black; 1453 | display: inline-block; 1454 | text-decoration: none; 1455 | color: white; 1456 | cursor: pointer; 1457 | margin-left: 6px; 1458 | } 1459 | html { 1460 | margin: 0; 1461 | min-height: 100%; 1462 | } 1463 | body { 1464 | margin: 0; 1465 | padding: 0; 1466 | } 1467 | .xtra { 1468 | transform: scale(3); 1469 | border-radius: 50%; 1470 | padding: 4px; 1471 | } 1472 | .border { 1473 | border: 1px solid ; 1474 | } 1475 | .display-flex { 1476 | display: -webkit-flex; 1477 | display: flex; 1478 | } 1479 | .display-inline-flex { 1480 | display: -webkit-inline-flex; 1481 | display: inline-flex; 1482 | } 1483 | .react-resizable { 1484 | position: relative; 1485 | } 1486 | .react-resizable-handle { 1487 | position: absolute; 1488 | width: 20px; 1489 | height: 20px; 1490 | bottom: 0; 1491 | right: 0; 1492 | background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+'); 1493 | background-position: bottom right; 1494 | padding: 0 3px 3px 0; 1495 | background-repeat: no-repeat; 1496 | background-origin: content-box; 1497 | box-sizing: border-box; 1498 | cursor: se-resize; 1499 | } 1500 | .resize-card { 1501 | overflow-y: hidden; 1502 | } 1503 | .noselect { 1504 | -webkit-touch-callout: none; 1505 | /* iOS Safari */ 1506 | -webkit-user-select: none; 1507 | /* Safari */ 1508 | -khtml-user-select: none; 1509 | /* Konqueror HTML */ 1510 | -moz-user-select: none; 1511 | /* Firefox */ 1512 | -ms-user-select: none; 1513 | /* Internet Explorer/Edge */ 1514 | user-select: none; 1515 | /* Non-prefixed version, currently */ 1516 | } 1517 | 1518 | /* RTB additions below */ 1519 | 1520 | #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { 1521 | margin-top: 3px; 1522 | } 1523 | 1524 | #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { 1525 | margin-top: 3px; 1526 | } 1527 | 1528 | #roam-right-sidebar-content .rm-level1 .roam-block { 1529 | margin-top: -5px; 1530 | } 1531 | 1532 | #roam-right-sidebar-content .rm-level2 .roam-block { 1533 | margin-top: -5px; 1534 | } 1535 | 1536 | #roam-right-sidebar-content .rm-level3 .roam-block { 1537 | margin-top: -3px; 1538 | } 1539 | 1540 | #roam-right-sidebar-content { 1541 | font-size: 16px; 1542 | } 1543 | 1544 | #roam-right-sidebar-content .rm-block-ref { 1545 | font-size: 14px; /* make block ref in side-bar a little smaller to show that's it's a reference */ 1546 | /* color: #9d6500; Don't change color of full block ref in sidebar */ 1547 | } 1548 | 1549 | a { 1550 | color: #9d6500; /* solarized light color */ 1551 | } 1552 | 1553 | /* 1554 | Popup menu when typing / below 1555 | .bp3-elevation-3 { 1556 | background-color: navajowhite !important; 1557 | } 1558 | .bp3-elevation-3 div { 1559 | font-family: ... 1560 | } 1561 | */ 1562 | 1563 | #right-sidebar { 1564 | background-color: rgb(247, 249, 251) !important; /* nicer light gray color */ 1565 | } 1566 | 1567 | /* target block embeds on main page and in sidebar */ 1568 | div[id^='block-input-'] > span > div { 1569 | background-color: #acb0e830 !important; 1570 | } 1571 | 1572 | /* RTB additions below */ 1573 | 1574 | #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { 1575 | margin-top: 3px; 1576 | } 1577 | 1578 | #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { 1579 | margin-top: 3px; 1580 | } 1581 | 1582 | #roam-right-sidebar-content .rm-level1 .roam-block { 1583 | margin-top: -5px; 1584 | } 1585 | 1586 | #roam-right-sidebar-content .rm-level2 .roam-block { 1587 | margin-top: -5px; 1588 | } 1589 | 1590 | #roam-right-sidebar-content .rm-level3 .roam-block { 1591 | margin-top: -3px; 1592 | } 1593 | 1594 | 1595 | /* Side Bar */ 1596 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button, 1597 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper, 1598 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 1599 | background-color: #586f76; 1600 | color: #e9e1cc; 1601 | } 1602 | 1603 | /* Better hover effect for shortcut pages in left side-bar */ 1604 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 1605 | color: #DAD5B6; 1606 | background-color: #767558; 1607 | } 1608 | /* Omni Sidebar Hover State */ 1609 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 1610 | color: #DAD5B6; 1611 | background-color: #767558; 1612 | } 1613 | 1614 | 1615 | /* Side Bar Open/Close Icon */ 1616 | .bp3-button:before, 1617 | .bp3-minimal:before, 1618 | .bp3-icon-menu:before, 1619 | .bp3-small:before { 1620 | color: #e9e1cc !important; 1621 | } 1622 | 1623 | /* Change sideboard to all one color */ 1624 | .roam-body .roam-app .roam-sidebar-container { 1625 | background-color: #586F76 !important; 1626 | } 1627 | /*Change Roam Research logo color to match theme*/ 1628 | #roam-sidebar-logo { 1629 | filter: brightness(0) saturate(100%) invert(92%) sepia(20%) saturate(457%) hue-rotate(315deg) brightness(108%) contrast(99%); 1630 | } 1631 | #roam-sidebar-logo:focus, #roam-sidebar-logo:hover { 1632 | text-decoration: none !important; 1633 | } 1634 | /* Change color of the email address at top of left sidebar to match theme */ 1635 | .bp3-button div { 1636 | color: #FEF6E5 !important; 1637 | } 1638 | 1639 | /*Pill Page References*/ 1640 | /*span.rm-page-ref { 1641 | background-color: #fbd15b75 !important; 1642 | font-size: 18px; 1643 | letter-spacing: .07em; 1644 | } 1645 | span.rm-page-ref { 1646 | color: black !important; 1647 | border-radius: 10px; 1648 | padding: 2px 3px 2px 3px; 1649 | } 1650 | 1651 | span.rm-page-ref:hover { 1652 | color: black !important; 1653 | background-color: #b0d4fc !important; 1654 | text-decoration: none; 1655 | } 1656 | span.rm-page-ref:hover { 1657 | color: #000 !important; 1658 | background-color: #ffca36d9 !important; 1659 | border-radius: 15px; 1660 | text-decoration: none; 1661 | }*/ 1662 | 1663 | /* Tag Styles hashtags*/ 1664 | /*.rm-page-ref-tag 1665 | color: #f8c764 !important; 1666 | background-color: #423212; 1667 | border-radius: 10px; 1668 | padding: 2px 3px 2px 3px; 1669 | } 1670 | .rm-page-ref-tag:hover { 1671 | color: white !important; 1672 | background-color: #e88a24; 1673 | text-decoration: none; 1674 | } 1675 | */ 1676 | 1677 | /*scrollbar*/ 1678 | ::-webkit-scrollbar { 1679 | width: 7px; 1680 | } 1681 | /*lets me customize color of the selected block and text within it*/ 1682 | .rm-block-input { 1683 | line-height: 1.5em; 1684 | width: 100%; 1685 | outline: 1px solid rgba(0, 0, 0, 0); 1686 | overflow-wrap: break-spaces; 1687 | vertical-align: top; 1688 | margin-top: -1px; 1689 | color: #000 !important; 1690 | background-color: #bf9a286b; 1691 | padding-top: 4px; 1692 | padding-bottom: 4px; 1693 | padding-left: 5px; 1694 | letter-spacing: inherit; 1695 | border-radius: 10px; 1696 | resize: none; 1697 | } 1698 | 1699 | /* search */ 1700 | 1701 | .rm-find-or-create-wrapper { 1702 | flex: 0 1 100% !important; 1703 | } 1704 | 1705 | /*reduces font size when I'm doing an inline search with [[]] or (()) */ 1706 | div.bp3-elevation-3 { 1707 | font-size: 0.7em; 1708 | } 1709 | /*Wraps text when I'm doing an inline search with [[]] or (())*/ 1710 | .bp3-text-overflow-ellipsis { 1711 | text-overflow: unset; 1712 | white-space: unset; 1713 | } 1714 | 1715 | /* Increases the height of the inline search box */ 1716 | div.bp3-elevation-3[style^='max-height: 300px; top: 26px; overflow: auto;'] { 1717 | max-height: 600px !important; 1718 | } 1719 | 1720 | /* Right side bar reference boxes */ 1721 | #right-sidebar .rm-reference-item { 1722 | background-color: #ede6f9; 1723 | border-radius: 15px; 1724 | padding: 5px; 1725 | } 1726 | 1727 | /* Reference Boxes */ 1728 | /*.rm-reference-item { 1729 | background-color: #ede6f9; 1730 | border-radius: 15px; 1731 | padding: 20px; 1732 | }*/ 1733 | 1734 | /* font changes */ 1735 | .rm-level1 { 1736 | font-family: 'Computer Modern Serif'; /* RTB change */ 1737 | font-weight: 400; 1738 | font-size: 1.8em; 1739 | } 1740 | 1741 | .rm-level2 { 1742 | font-family: 'Computer Modern Serif' !important; /* RTB change */ 1743 | font-weight: 400; 1744 | font-size: 1.4em; 1745 | } 1746 | 1747 | div { 1748 | font-family: 'Computer Modern Serif'; /* RTB change: desired font (bear) */ 1749 | font-size: 1em; 1750 | line-height: 1.5em; 1751 | margin: 0px; 1752 | padding: 0px; 1753 | } 1754 | 1755 | textarea { 1756 | font-family: 'Computer Modern Serif'; /* RTB change: desired font (bear) */ 1757 | font-size: 1em; 1758 | line-height: 1.5em; 1759 | margin: 0px; 1760 | padding: 0px; 1761 | } 1762 | 1763 | /* Roam Toolkit Vim mode */ 1764 | .roam-toolkit-block-mode--highlight{background-color: #bf9a286b; !important;} 1765 | 1766 | /* full width of text */ 1767 | .roam-block-container { 1768 | max-width: 100% !important; 1769 | } 1770 | div.roam-center > div:first-child { 1771 | padding-right: calc((100% - 950px) / 2) !important; 1772 | padding-left: calc((100% - 1500px) / 2) !important; 1773 | } 1774 | .hoverparent[style^='position: relative; width: 500px;'] { 1775 | width: 100% !important; 1776 | } 1777 | .hoverparent .react-resizable[style^='width: 500px;'] { 1778 | width: 100% !important; 1779 | } 1780 | .react-resizable[style^='width: 580px;'], 1781 | .react-resizable[style^='width: 720px;'] { 1782 | width: 100% !important; 1783 | } 1784 | .hoverparent[style^="position: relative; width: 580px;"], 1785 | .hoverparent[style^="position: relative; width: 720px;"] { 1786 | width: 100% !important; 1787 | } 1788 | .rm-block-text { 1789 | max-width: 100%; 1790 | } 1791 | 1792 | /* Rainbow indentation */ 1793 | /* 1794 | Feel free to adjust the colors - this one loops every 1795 | 7 colors like the rainbow but you can change that to 1796 | cycle earlier or choose more unique colors. 1797 | To add deeper indents: 1798 | 1. Add { > div.flex-v-box > div } incrementally to the first line, and 1799 | 2. Add {> div.flex-v-box > div:nth-child(n) } incrementally to the second line 1800 | */ 1801 | /* Rainbow indentation */ 1802 | /* 1803 | Feel free to adjust the color variables! 1804 | This one loops every 6 colors, and goes 18 levels deep (3 cycles). 1805 | The 3 selectors for each level correspond to: 1806 | 1. Daily notes scrolling view 1807 | 2. Single page view 1808 | 3. Right sidebar outline view 1809 | */ 1810 | 1811 | :root { 1812 | --box-shadow-values: none; /* Set to "none" to remove shadow, default is 25px 0px 20px -30px */ 1813 | --indent1: #6c71c4ad; 1814 | --indent2: #268bd2ad; 1815 | --indent3: #859900ad; 1816 | --indent4: #b58900ad; 1817 | --indent5: #cb4b16ad; 1818 | --indent6: #d33682ad; 1819 | --indent7: #2aa198ad; 1820 | --indent8: #6c71c4ad; 1821 | --indent9: #268bd2ad; 1822 | --indent10: #859900ad; 1823 | --indent11: #b58900ad; 1824 | --indent12: #cb4b16ad; 1825 | --indent13: #d33682ad; 1826 | --indent14: #2aa198ad; 1827 | --indent15: #6c71c4ad; 1828 | --indent16: #268bd2ad; 1829 | --indent17: #859900ad; 1830 | --indent18: #b58900ad; 1831 | } 1832 | 1833 | .block-border-left { 1834 | border-left-width: 3px !important; /* Default 1px */ 1835 | margin-left: 4px; /* Default 6px */ 1836 | border-radius: 0; /* Set to 0 to get smooth, straight indents */ 1837 | padding: 0 !important; /* Set to 0 to align all indents */ 1838 | } 1839 | 1840 | /*RR change: additional text styles, bold and italics*/ 1841 | .roam-app strong { 1842 | color: #6c71c4 !important; 1843 | } 1844 | 1845 | .roam-app em { 1846 | color: #d33682; 1847 | } 1848 | 1849 | /*RR change: Markdown Links */ 1850 | 1851 | .roam-app a { 1852 | color: #2aa198; 1853 | } 1854 | 1855 | .roam-app a:focus, 1856 | .roam-app a:hover { 1857 | color: #2aa198; 1858 | text-decoration: underline; 1859 | } 1860 | 1861 | .rm-page-ref-tag { 1862 | color: #d33682; 1863 | } 1864 | -------------------------------------------------------------------------------- /Fabriq-Theme: -------------------------------------------------------------------------------- 1 | /* 2 | ### ROAM CUSTOM THEME ### 3 | > Many thanks to the Roam Slack community for all the resources, particularly @Anthony and @Mark for their patience with me that helped in this construction. Mostly adapted from Anthony's bear themes, with some mix and matches from other people's codes. I don't know what I'm doing really, just wanted to make it pretty. 4 | > Edits by Rob Haisfield 5 | > v1.whatever 6 | */ 7 | 8 | /* Editor */ 9 | 10 | @import "../fonts/Inter/inter.css"; 11 | .loading-astrolabe { 12 | margin: auto; 13 | position: relative; 14 | width: 250px; 15 | height: 250px; 16 | } 17 | .loading-astrolabe .wand { 18 | position: absolute; 19 | width: 80%; 20 | top: 24.5%; 21 | left: 10%; 22 | animation: nav 3.5s linear infinite; 23 | } 24 | .loading-astrolabe .wand-small { 25 | position: absolute; 26 | width: 80%; 27 | top: 24.5%; 28 | left: 11.5%; 29 | } 30 | .loading-astrolabe .background { 31 | width: 100%; 32 | border: none; 33 | margin-left: -3px; 34 | } 35 | .spinner-astrolabe { 36 | margin: auto; 37 | margin-top: 100px; 38 | position: relative; 39 | width: 200px; 40 | height: 200px; 41 | } 42 | .spinner-astrolabe .wand { 43 | position: absolute; 44 | width: 80%; 45 | top: 24.5%; 46 | left: 10%; 47 | animation: nav 3.5s linear 20s; 48 | } 49 | .spinner-astrolabe .wand:hover { 50 | animation: nav 3.5s linear infinite; 51 | } 52 | .spinner-astrolabe .wand-small { 53 | position: absolute; 54 | width: 80%; 55 | top: 24.5%; 56 | left: 11.5%; 57 | } 58 | .spinner-astrolabe .background { 59 | width: 100%; 60 | border: none; 61 | margin-left: -3px; 62 | } 63 | @keyframes spin { 64 | 0% { 65 | transform: rotate(0deg); 66 | } 67 | 100% { 68 | transform: rotate(360deg); 69 | } 70 | } 71 | @keyframes nav { 72 | 0% { 73 | transform: rotate(0deg); 74 | } 75 | 15% { 76 | transform: rotate(-30deg); 77 | } 78 | 25% { 79 | transform: rotate(30deg); 80 | } 81 | 40% { 82 | transform: rotate(-15deg); 83 | } 84 | 50% { 85 | transform: rotate(40deg); 86 | } 87 | 70% { 88 | transform: rotate(-50deg); 89 | } 90 | 85% { 91 | transform: rotate(75deg); 92 | } 93 | 90% { 94 | transform: rotate(-180deg); 95 | } 96 | 100% { 97 | transform: rotate(-355deg); 98 | } 99 | } 100 | .spinner-square { 101 | box-sizing: border-box; 102 | width: 300px; 103 | height: 300px; 104 | background-color: grey; 105 | display: grid; 106 | grid-template-rows: 1fr 1fr; 107 | padding: 20px; 108 | grid-gap: 20px; 109 | z-index: 3; 110 | grid-template-columns: 1fr 1fr; 111 | cursor: pointer; 112 | } 113 | .spinner-square .spinner-square-front { 114 | background-color: white; 115 | z-index: 5; 116 | } 117 | .spinner-square .spinner-square-rotate { 118 | position: absolute; 119 | margin-left: 75px; 120 | margin-top: 75px; 121 | background-color: black; 122 | width: 150px; 123 | height: 150px; 124 | animation: spin 4.5s linear infinite; 125 | } 126 | .scrollbar { 127 | margin-left: 30px; 128 | float: left; 129 | height: 300px; 130 | width: 65px; 131 | background: #F5F5F5; 132 | overflow-y: scroll; 133 | margin-bottom: 25px; 134 | } 135 | #scroll-1::-webkit-scrollbar-track { 136 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 137 | border-radius: 8px; 138 | background-color: #F5F5F5; 139 | } 140 | #scroll-1::-webkit-scrollbar { 141 | width: 8px; 142 | background-color: #F5F5F5; 143 | } 144 | #scroll-1::-webkit-scrollbar-thumb { 145 | border-radius: 8px; 146 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 147 | background-color: #8A9BA8; 148 | } 149 | #home { 150 | padding: 50px; 151 | background-color: blue; 152 | color: #182026; 153 | } 154 | #home .icons { 155 | padding-left: 20px; 156 | } 157 | #home .icons .bp3-icon-large:hover { 158 | transform: scale(2); 159 | margin-left: 60px; 160 | } 161 | #home2 .dark { 162 | color: white; 163 | background-color: #343a40; 164 | } 165 | #home2 .container { 166 | margin: auto; 167 | max-width: 1110px; 168 | } 169 | #home2 .block { 170 | padding: 7em 0 0; 171 | } 172 | #home2 #header { 173 | width: 100%; 174 | position: fixed; 175 | top: 0; 176 | } 177 | #home2 #header .nav { 178 | display: flex; 179 | flex: 0 0 auto; 180 | align-items: center; 181 | padding: 10px 14px; 182 | } 183 | #home2 #header .nav .bp3-button { 184 | color: white; 185 | } 186 | #home2 #body { 187 | margin-top: 50px; 188 | } 189 | #home2 h1 { 190 | margin-bottom: 20px; 191 | } 192 | #home2 .row { 193 | display: flex; 194 | flex-wrap: wrap; 195 | } 196 | #home2 .col { 197 | margin: 24px auto; 198 | max-width: 300px; 199 | } 200 | #home2 #testimonials .testimonial { 201 | text-align: center; 202 | } 203 | #home2 #logo-graph { 204 | -webkit-filter: grayscale(100%) brightness(60%) contrast(10000000%); 205 | opacity: .4; 206 | display: grid; 207 | } 208 | #home2 #footer { 209 | padding-bottom: 7em; 210 | } 211 | #page { 212 | font-family: Segoe UI, Roboto, sans-serif; 213 | } 214 | #page1 { 215 | margin: 0 auto; 216 | padding-top: 4em; 217 | max-width: 40em; 218 | font-family: Segoe UI, Roboto, sans-serif; 219 | color: #808080; 220 | } 221 | #page1 h1, 222 | #page1 h2 { 223 | color: #4d4d4d; 224 | text-align: center; 225 | } 226 | #page1 .sub { 227 | width: 400px; 228 | margin: 8px auto; 229 | } 230 | #page1 .hero { 231 | margin: 0 auto; 232 | display: flex; 233 | justify-content: center; 234 | } 235 | #page1 .hero button { 236 | min-height: 50px; 237 | font-size: 1.8em; 238 | padding: 16px 20px; 239 | margin: 8px; 240 | } 241 | #page1 .zk { 242 | padding: 25px; 243 | } 244 | #page1 .quotes { 245 | max-width: 80vw; 246 | margin: 20px auto; 247 | } 248 | #page1 .quote { 249 | float: right; 250 | padding-top: 1em; 251 | } 252 | #secret-invite-wrapper { 253 | height: 100vh; 254 | background-color: black; 255 | overscroll-behavior: none; 256 | } 257 | #secret-invite-wrapper #secret-invite { 258 | position: relative; 259 | margin: 0 auto; 260 | padding-top: 4em; 261 | max-width: 40em; 262 | font-family: Segoe UI, Roboto, sans-serif; 263 | color: #b3b3b3; 264 | } 265 | #secret-invite-wrapper #secret-invite #secret-scroll { 266 | position: absolute; 267 | height: 90vh; 268 | overflow: scroll; 269 | } 270 | #secret-invite-wrapper #secret-invite h1, 271 | #secret-invite-wrapper #secret-invite h2 { 272 | color: #cccccc; 273 | text-align: center; 274 | } 275 | #secret-invite-wrapper #secret-invite .sub { 276 | width: 400px; 277 | margin: 8px auto; 278 | } 279 | #secret-invite-wrapper #secret-invite .hero { 280 | margin: 0 auto; 281 | display: flex; 282 | justify-content: center; 283 | } 284 | #secret-invite-wrapper #secret-invite .hero button { 285 | min-height: 50px; 286 | font-size: 1.8em; 287 | padding: 16px 20px; 288 | margin: 8px; 289 | } 290 | #secret-invite-wrapper #secret-invite .zk { 291 | padding: 25px; 292 | } 293 | #secret-invite-wrapper #secret-invite .quotes { 294 | max-width: 80vw; 295 | margin: 20px auto; 296 | } 297 | #secret-invite-wrapper #secret-invite .quote { 298 | float: right; 299 | padding-top: 1em; 300 | } 301 | html { 302 | scroll-behavior: smooth; 303 | } 304 | #landing-page * { 305 | margin: 0; 306 | padding: 0; 307 | } 308 | #landing-page #form { 309 | display: flex; 310 | flex-direction: column; 311 | align-items: center; 312 | padding: 12px; 313 | } 314 | #landing-page #form .ff { 315 | text-align: center; 316 | line-height: 1.8em; 317 | font-size: 1.2em; 318 | max-width: 400px; 319 | } 320 | #landing-page #form form { 321 | display: flex; 322 | flex-direction: column; 323 | } 324 | #landing-page #form form textarea { 325 | max-width: 70vw; 326 | width: 300px; 327 | resize: none; 328 | border: 1px solid lightgrey; 329 | padding: 4px; 330 | } 331 | #landing-page #form form input { 332 | max-width: 70vw; 333 | width: 300px; 334 | padding: 4px; 335 | margin: 8px; 336 | } 337 | #landing-page #header ul { 338 | display: flex; 339 | list-style-type: none; 340 | background-color: #293742; 341 | color: #f5f8fa; 342 | } 343 | #landing-page #header ul .logo { 344 | padding: 8px; 345 | } 346 | #landing-page #header ul li:hover { 347 | background-color: #182026; 348 | } 349 | #landing-page #header ul li a { 350 | display: block; 351 | padding: 8px; 352 | text-decoration: none; 353 | width: 100%; 354 | height: 100%; 355 | color: inherit; 356 | } 357 | #landing-page #cover { 358 | background-color: #182026; 359 | padding: 40px 0 0 0; 360 | min-height: 100vh; 361 | color: #ced9e0; 362 | display: flex; 363 | flex-direction: column; 364 | align-items: center; 365 | } 366 | #landing-page #cover .a { 367 | background-color: #ced9e0; 368 | color: #182026; 369 | border-radius: 4px; 370 | cursor: pointer; 371 | text-decoration: none; 372 | } 373 | #landing-page #cover .a:hover { 374 | color: #0e5a8a; 375 | } 376 | #landing-page #cover #tag-line { 377 | padding: 30px 40px 0px; 378 | } 379 | #landing-page #cover #tag-line ul { 380 | line-height: 32px; 381 | margin-left: 32px; 382 | margin-right: 16px; 383 | margin-top: 25px; 384 | font-size: 16px; 385 | } 386 | #landing-page #cover #endorsement { 387 | margin: 80px 20px 20px; 388 | } 389 | #landing-page #cover #callouts { 390 | margin-top: 10%; 391 | } 392 | #landing-page #cover #callouts button { 393 | font-size: 20px; 394 | padding: 20px; 395 | background-color: #182026; 396 | } 397 | #landing-page #cover #image-collection { 398 | flex: 1 1 400px; 399 | max-width: 500px; 400 | background-color: #ced9e0; 401 | color: #293742; 402 | padding: 40px 40px 40px; 403 | display: flex; 404 | flex-direction: column; 405 | align-items: center; 406 | } 407 | #landing-page #cover #image-collection #images { 408 | color: #182026; 409 | padding: 40px 0px; 410 | display: grid; 411 | grid-template-columns: repeat(auto-fill, minmax(100px, auto)); 412 | grid-column-gap: 20px; 413 | justify-items: start; 414 | align-items: center; 415 | } 416 | #landing-page #cover #image-collection #images img { 417 | margin: 8px; 418 | max-height: 70px; 419 | max-width: 100%; 420 | } 421 | #landing-page #features { 422 | padding: 40px 40px; 423 | background-color: #293742; 424 | border-top: 1px solid #5c7080; 425 | color: #d8e1e8; 426 | flex-direction: column; 427 | } 428 | #landing-page #features ul { 429 | padding-left: 16px; 430 | } 431 | #landing-page #features .feature { 432 | margin: 40px 0px; 433 | display: flex; 434 | justify-content: center; 435 | flex-wrap: wrap; 436 | } 437 | #landing-page #features .feature .feature-content { 438 | width: 400px; 439 | margin: 40px; 440 | } 441 | #landing-page #features .feature .feature-image { 442 | min-height: 400px; 443 | min-width: 400px; 444 | background-color: grey; 445 | } 446 | .rm-emoji-block-view { 447 | display: flex; 448 | flex: 0 0 auto; 449 | flex-wrap: wrap; 450 | margin-left: 40px; 451 | align-items: center; 452 | } 453 | .rm-emoji-block-view .rm-emoji-button { 454 | display: flex; 455 | flex: 0 0 auto; 456 | align-items: center; 457 | cursor: pointer; 458 | border-radius: 20px; 459 | height: 20px; 460 | margin: 0px 4px 4px 0px; 461 | } 462 | .rm-emoji-block-view .rm-emoji-button .rm-emoji { 463 | height: 16px; 464 | margin: 0px 4px; 465 | } 466 | .rm-emoji-block-view .rm-emoji-button .rm-emoji-number { 467 | height: 100%; 468 | font-size: 10px; 469 | margin-right: 6px; 470 | font-weight: 500; 471 | } 472 | .rm-emoji-tooltip { 473 | max-width: 200px; 474 | overflow-wrap: break-word; 475 | font-size: 12px; 476 | color: white; 477 | font-weight: 600; 478 | } 479 | .kanban-board { 480 | background-color: #a7b6c2; 481 | min-width: 100%; 482 | min-height: 48px; 483 | padding: 8px; 484 | overflow-x: scroll; 485 | } 486 | .kanban-column { 487 | background-color: #ededed; 488 | margin: 0px 4px 0px 4px; 489 | padding: 4px; 490 | min-width: 200px; 491 | } 492 | .kanban-title { 493 | text-align: center; 494 | } 495 | .kanban-card { 496 | background-color: white; 497 | margin: 8px; 498 | padding: 8px; 499 | } 500 | html { 501 | font-family: 'Inter', sans-serif; 502 | } 503 | @supports (font-variation-settings: normal) { 504 | html { 505 | font-family: 'Inter var', sans-serif; 506 | } 507 | } 508 | body { 509 | overscroll-behavior: none; 510 | } 511 | ::-webkit-scrollbar { 512 | width: 0px; 513 | background: transparent; 514 | } 515 | * { 516 | box-sizing: border-box; 517 | } 518 | *:focus { 519 | outline-width: 0; 520 | } 521 | .roam-lift { 522 | z-index: 10000; 523 | } 524 | .CodeMirror { 525 | height: auto !important; 526 | } 527 | @media (max-width: 500px) { 528 | .bp3-omnibar { 529 | max-width: 310px; 530 | left: calc((100vw - 310px) / 2); 531 | } 532 | } 533 | .rm-line { 534 | background-color: #ced9e0; 535 | flex: 0 0 1px; 536 | } 537 | .roam-body { 538 | height: 100vh; 539 | overflow: hidden; 540 | position: relative; 541 | background-color: #FFFFFF; /* RTB add: bear color - solarized light background color main view */ 542 | } 543 | .roam-body .roam-app { 544 | height: 100%; 545 | width: 100%; 546 | position: relative; 547 | -webkit-overflow-scrolling: touch; 548 | color: #202b33; 549 | } 550 | .roam-body .roam-app h1 { 551 | color: #202b33; 552 | } 553 | .roam-body .roam-app .roam-sidebar-container { 554 | position: absolute; 555 | top: 45px; 556 | left: -232px; 557 | width: 232px; 558 | bottom: 45px; 559 | z-index: 999; 560 | transition: all 200ms ease-in; 561 | background-color: #2f3437; 562 | background-color: #182026; 563 | } 564 | .roam-body .roam-app .roam-sidebar-container .roam-hover-sidebar-reveal { 565 | position: absolute; 566 | z-index: 99; 567 | top: 0px; 568 | right: -8px; 569 | bottom: 0px; 570 | width: 0px; 571 | } 572 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-topnav { 573 | position: absolute; 574 | top: 0; 575 | padding: 16px; 576 | } 577 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content { 578 | height: 100%; 579 | position: relative; 580 | } 581 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 582 | padding: 8px 20px; 583 | font-weight: bold; 584 | cursor: pointer; 585 | font-size: 14px; 586 | color: #5c7080; 587 | } 588 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 589 | color: #f5f8fa; 590 | background-color: #10161a; 591 | } 592 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 593 | color: #5c7080; 594 | } 595 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages { 596 | overflow-y: auto; 597 | } 598 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 599 | text-decoration: none; 600 | cursor: pointer; 601 | font-size: 14px; 602 | padding: 8px 0px 8px 4px; 603 | color: #5c7080; 604 | } 605 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 606 | color: #f5f8fa; 607 | background-color: #10161a; 608 | } 609 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .title { 610 | padding: 8px; 611 | margin-bottom: 8px; 612 | font-size: 14px; 613 | font-weight: bold; 614 | } 615 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .roam-sidebar-body { 616 | margin-top: 64px; 617 | width: 100%; 618 | transition: all 150ms ease-in; 619 | position: absolute; 620 | overflow: scroll; 621 | } 622 | .roam-body .roam-app .roam-main { 623 | width: 100%; 624 | display: flex; 625 | 626 | } 627 | .roam-body .roam-app .roam-main .roam-article { 628 | position: relative; 629 | padding: 16px 42px 120px; 630 | font-size: 20px; /* RTB add: larger font */ 631 | color: #141E35; /* RTB add: roam color - solarized light text color */ 632 | } 633 | .roam-body .roam-app .roam-main .roam-article .rm-title-display { 634 | margin-bottom: 32px; 635 | } 636 | #right-sidebar .rm-reference-container { 637 | padding-top: 0px; 638 | border-top: none; 639 | } 640 | .roam-block .rm-reference-container { 641 | padding-top: 0px; 642 | border-top: none; 643 | } 644 | 645 | .pointer { 646 | cursor: pointer; 647 | } 648 | .roam-topbar { 649 | height: 45px; 650 | position: fixed; 651 | width: 100%; 652 | z-index: 101; 653 | background-color: #ffffff; /* RTB change: bear background - solarized light */ 654 | padding-right: 16px; 655 | padding-left: 16px; 656 | display: flex; 657 | flex-direction: column; 658 | justify-content: center; 659 | } 660 | .trunc { 661 | max-width: 120px; 662 | white-space: nowrap; 663 | text-overflow: ellipsis; 664 | overflow: hidden; 665 | } 666 | .bblack { 667 | border: 1px solid black; 668 | background-color: lightgrey; 669 | } 670 | .roam-popup-container { 671 | display: flex; 672 | flex-direction: column; 673 | overflow: scroll; 674 | } 675 | .roam-popup-container .roam-popup-content { 676 | position: absolute; 677 | top: 34px; 678 | bottom: 10px; 679 | width: 100%; 680 | overflow-y: scroll; 681 | } 682 | .rm-input { 683 | width: 100%; 684 | outline: 1px solid transparent; 685 | vertical-align: top; 686 | background-color: transparent; 687 | border: none; 688 | resize: none; 689 | } 690 | .rm-input::-webkit-input-placeholder { 691 | color: #ced9e0; 692 | } 693 | .rm-input:-moz-placeholder { 694 | /* Firefox 18- */ 695 | color: #ced9e0; 696 | } 697 | .rm-input::-moz-placeholder { 698 | /* Firefox 19+ */ 699 | color: #ced9e0; 700 | } 701 | .rm-input:-ms-input-placeholder { 702 | color: #ced9e0; 703 | } 704 | .rm-input::placeholder { 705 | color: #ced9e0; 706 | } 707 | .rm-title-textarea { 708 | width: 100%; 709 | outline: 1px solid transparent; 710 | vertical-align: top; 711 | line-height: 1.3em; 712 | background-color: transparent; 713 | border: none; 714 | resize: none; 715 | } 716 | .rm-title-textarea::-webkit-input-placeholder { 717 | color: #ced9e0; 718 | } 719 | .rm-title-textarea:-moz-placeholder { 720 | /* Firefox 18- */ 721 | color: #ced9e0; 722 | } 723 | .rm-title-textarea::-moz-placeholder { 724 | /* Firefox 19+ */ 725 | color: #ced9e0; 726 | } 727 | .rm-title-textarea:-ms-input-placeholder { 728 | color: #ced9e0; 729 | } 730 | .rm-title-textarea::placeholder { 731 | color: #ced9e0; 732 | } 733 | .rm-title-untitled { 734 | color: #ced9e0; 735 | } 736 | .rm-title-display { 737 | line-height: 1.3em; 738 | font-weight: 450; 739 | word-break: break-word; 740 | min-width: 100px; 741 | width: 100%; 742 | cursor: text; 743 | outline: 1px solid transparent; 744 | } 745 | .roam-log-container .roam-log-page { 746 | border-top: 1px solid #738694; 747 | margin-top: 40px; 748 | padding-top: 40px; 749 | padding-bottom: 16px; 750 | margin-bottom: 16px; 751 | } 752 | .roam-log-container .roam-log-page:first-child { 753 | border: 0px solid blue; 754 | margin-top: 0px; 755 | min-height: 500px; 756 | padding-top: 0px; 757 | } 758 | .roam-log-container .roam-log-preview { 759 | color: #8a9ba8; 760 | } 761 | .roam-log-container .roam-log-preview h1 { 762 | color: #8a9ba8; 763 | } 764 | .roam-log-container .roam-log-preview:hover { 765 | background-color: grey; 766 | } 767 | #buffer { 768 | display: flex; 769 | flex-direction: column; 770 | } 771 | #buffer .help-title { 772 | color: #f5f8fa; 773 | text-align: center; 774 | font-size: 16px; 775 | font-weight: bold; 776 | } 777 | #buffer .help-sub-title { 778 | color: #e1e8ed; 779 | text-align: center; 780 | } 781 | #buffer .help-item-text { 782 | color: #e1e8ed; 783 | } 784 | #buffer .help-item-label { 785 | opacity: 0.6; 786 | color: #e1e8ed; 787 | } 788 | .roam-table { 789 | padding-bottom: 24px; 790 | overflow-x: scroll; 791 | } 792 | .roam-table th, 793 | .roam-table td, 794 | .roam-table tr { 795 | font-size: 12px; 796 | min-width: 100px; 797 | max-height: 20px; 798 | padding: 8px 16px; 799 | margin: 0p; 800 | border: 1px solid grey; 801 | } 802 | .roam-table td { 803 | max-height: 20px; 804 | overflow: scroll; 805 | } 806 | .import-table { 807 | padding-bottom: 24px; 808 | max-width: 100%; 809 | } 810 | .import-table table { 811 | width: 100%; 812 | } 813 | .import-table th, 814 | .import-table td, 815 | .import-table tr { 816 | font-size: 12px; 817 | max-height: 20px; 818 | padding: 8px 16px; 819 | margin: 0p; 820 | border: 1px solid grey; 821 | } 822 | .import-table td { 823 | max-height: 20px; 824 | } 825 | .import-table td .import-preview { 826 | white-space: pre-wrap; 827 | word-break: break-word; 828 | max-width: 50px; 829 | } 830 | #info { 831 | padding: 8px 0px; 832 | margin: 0px 8px; 833 | font-size: 12px; 834 | } 835 | #info table { 836 | margin: 0 auto; 837 | } 838 | #info table, 839 | #info th, 840 | #info td { 841 | padding: 8px; 842 | margin: 0p; 843 | border: 1px solid grey; 844 | } 845 | .hoverparent:hover .hoveronly { 846 | opacity: 1; 847 | } 848 | .hoveronly { 849 | opacity: 0; 850 | } 851 | .hoveronly:hover { 852 | opacity: 1; 853 | } 854 | .tiny { 855 | font-size: 7px; 856 | } 857 | .CodeMirror { 858 | font-family: monospace; 859 | } 860 | .CodeMirror .CodeMirror-code pre { 861 | font-family: monospace; 862 | box-shadow: none; 863 | } 864 | .block-mention { 865 | margin: 4px 8px 4px 0px; 866 | cursor: pointer; 867 | padding: 8px; 868 | background-color: #bfccd6; 869 | } 870 | .block-mention:hover { 871 | background-color: #a7b6c2; 872 | } 873 | .rm-page-ref { 874 | cursor: pointer; 875 | } 876 | .rm-page-ref:hover { 877 | text-decoration: underline; 878 | } 879 | .rm-page-ref-tag { 880 | color: #a7b6c2; 881 | } 882 | .rm-page-ref-brackets { 883 | color: #268bd261; /* color of brackets*/ 884 | } 885 | .rm-page-ref-link-color { 886 | color: #469986; /* color of page link references page references */ 887 | } 888 | .rm-page-ref-namespace-color { 889 | color: green; 890 | } 891 | .rm-block-ref { 892 | padding: 4px 2px; 893 | margin: -4px 0px; 894 | font-size: 20px; /* RTB change: block ref's same size as others */ 895 | display: inline; 896 | border-bottom: 1px solid #93a1a1; 897 | cursor: alias; 898 | padding-left: 0px; /* RTB add: align to left */ 899 | } 900 | .rm-block-ref:hover { 901 | background-color: #f5f8fa; 902 | } 903 | .rm-reference-container { 904 | border-top: 2px solid #202b33; 905 | padding-top: 12px; 906 | margin-bottom: 8px; 907 | } 908 | .check-container { 909 | display: inline-block; 910 | position: relative; 911 | padding-left: 16px; /* RTB change: align checkbox for updated spacing */ 912 | margin-bottom: 10px; 913 | cursor: pointer; 914 | font-size: 22px; 915 | -webkit-user-select: none; 916 | -moz-user-select: none; 917 | -ms-user-select: none; 918 | user-select: none; 919 | vertical-align: bottom; 920 | top: -12px; /* RTB change: align checkbox for updated spacing */ 921 | } 922 | /* Hide the browser's default checkbox */ 923 | .check-container input { 924 | position: absolute; 925 | opacity: 0; 926 | cursor: pointer; 927 | height: 0; 928 | width: 0; 929 | } 930 | /* Create a custom checkbox */ 931 | .checkmark { 932 | position: absolute; 933 | top: 0px; 934 | left: 0; 935 | height: 12px; 936 | border-radius: 2px; 937 | width: 12px; 938 | border: 1px solid #469986; 939 | } 940 | /* On mouse-over, add a grey background color */ 941 | /* When the checkbox is checked, add a blue background */ 942 | .check-container input:checked ~ .checkmark { 943 | background-color: #141E35; /* solarized light */ 944 | border: none; 945 | } 946 | /* Create the checkmark/indicator (hidden when not checked) */ 947 | .checkmark:after { 948 | content: ""; 949 | position: absolute; 950 | display: none; 951 | } 952 | /* Show the checkmark when checked */ 953 | .check-container input:checked ~ .checkmark:after { 954 | display: block; 955 | } 956 | /* Style the checkmark/indicator */ 957 | .check-container .checkmark:after { 958 | left: 3.5px; 959 | top: 0.25px; 960 | width: 5px; 961 | height: 10px; 962 | border: solid white; 963 | border-width: 0 2px 2px 0; 964 | -webkit-transform: rotate(45deg); 965 | -ms-transform: rotate(45deg); 966 | transform: rotate(40deg) scale(0.8); 967 | } 968 | #roam-sidebar-logo a { 969 | text-decoration: none; 970 | } 971 | #roam-sidebar-logo:hover { 972 | background-color: #10161a; 973 | } 974 | .rm-find-or-create-wrapper { 975 | position: relative; 976 | transition: all 200ms ease-in; 977 | } 978 | .rm-find-or-create-wrapper .bp3-transition-container { 979 | width: 100%; 980 | } 981 | .rm-find-or-create-wrapper .bp3-menu { 982 | max-width: none; 983 | max-height: 400px; 984 | } 985 | .rm-find-or-create-wrapper .rm-menu-item { 986 | padding: 6px; 987 | cursor: pointer; 988 | border-radius: 2px; 989 | } 990 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title { 991 | font-weight: bold; 992 | } 993 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page { 994 | color: #469986; 995 | } 996 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item { 997 | word-break: break-word; 998 | color: #8a9ba8; 999 | overflow-wrap: break-spaces; 1000 | margin-left: -20px; 1001 | } 1002 | .rm-fill { 1003 | width: 100%; 1004 | } 1005 | .rm-pages-sort-menu-item { 1006 | padding-right: 16px; 1007 | padding-left: 16px; 1008 | font-weight: bold; 1009 | } 1010 | .rm-pages-row-highlight { 1011 | background-color: #f5f8fa; 1012 | } 1013 | .rm-pages-row { 1014 | display: flex; 1015 | flex: 0 0 auto; 1016 | justify-content: space-between; 1017 | align-items: flex-start; 1018 | } 1019 | .rm-pages-row .rm-pages-sort-header { 1020 | display: flex; 1021 | flex: 0 0 auto; 1022 | align-items: center; 1023 | cursor: pointer; 1024 | } 1025 | .rm-pages-row .rm-pages-sort-header:hover { 1026 | text-decoration: underline; 1027 | } 1028 | .rm-pages-row .rm-pages-title-col { 1029 | padding: 8px 4px; 1030 | flex: 1 0 50%; 1031 | text-overflow: ellipsis; 1032 | } 1033 | .rm-pages-row .rm-pages-action-col { 1034 | text-align: right; 1035 | flex: 1 0 0; 1036 | padding: 8px 4px; 1037 | } 1038 | .rm-pages-row .rm-pages-col { 1039 | color: #8a9ba8; 1040 | padding: 8px 4px; 1041 | flex: 1 0 15%; 1042 | } 1043 | /* the background color for roam reference items */ 1044 | .rm-reference-item { 1045 | margin-top: 8px; 1046 | margin-right: 8px; 1047 | flex: 1 1 100%; 1048 | word-break: break-word; 1049 | background-color: #ffffff; 1050 | border-radius: 10px; 1051 | padding-right: 8px; 1052 | } 1053 | 1054 | /* RTB new section */ 1055 | .rm-level2 .roam-block { 1056 | margin-top: -8px; 1057 | } 1058 | 1059 | .rm-level3 { 1060 | font-weight: 500; 1061 | font-size: 1.2em; 1062 | color: #5c7080; 1063 | } 1064 | 1065 | /* RTB new section */ 1066 | .rm-level3 .roam-block { 1067 | margin-top: -5px; 1068 | } 1069 | 1070 | .rm-title1 { 1071 | word-break: break-word; 1072 | font-weight: 400; 1073 | } 1074 | .rm-histogram-table { 1075 | width: 100%; 1076 | margin-left: -8px; 1077 | box-sizing: border-box; 1078 | } 1079 | .rm-histogram-table td { 1080 | vertical-align: top; 1081 | min-width: 18px; 1082 | max-width: 18px; 1083 | border: 1px solid transparent; 1084 | } 1085 | .rm-histogram-table td .flex-v-box { 1086 | border-right: 0.2px solid #48aff0; 1087 | justify-content: flex-start; 1088 | align-items: center; 1089 | } 1090 | .rm-histogram-table td .flex-v-box .bp3-popover-wrapper { 1091 | margin-top: 0px; 1092 | margin-bottom: 0px; 1093 | padding-bottom: 0px; 1094 | } 1095 | .rm-histogram-table td .flex-v-box .table-edited-by-view { 1096 | transform-origin: center; 1097 | background-size: cover; 1098 | border: 1px solid darkgray; 1099 | font-size: 0.7em; 1100 | height: 12px; 1101 | width: 12px; 1102 | margin: 0px; 1103 | padding: 0px; 1104 | border-radius: 100%; 1105 | background-repeat: no-repeat; 1106 | } 1107 | .slider .slider-cell { 1108 | border: 1px solid transparent; 1109 | flex: "1 0 100%"; 1110 | } 1111 | .slider .flex-v-box { 1112 | justify-content: flex-start; 1113 | align-items: center; 1114 | } 1115 | .slider .flex-v-box .bp3-popover-wrapper { 1116 | margin-top: 0px; 1117 | margin-bottom: 0px; 1118 | padding-bottom: 0px; 1119 | } 1120 | .slider .flex-v-box .table-edited-by-view { 1121 | transform-origin: center; 1122 | background-size: cover; 1123 | border: 1px solid darkgray; 1124 | font-size: 0.7em; 1125 | height: 12px; 1126 | width: 12px; 1127 | margin: 0px; 1128 | padding: 0px; 1129 | border-radius: 100%; 1130 | background-repeat: no-repeat; 1131 | } 1132 | .nowrap { 1133 | white-space: nowrap; 1134 | } 1135 | #rm-mobile-bar .rm-mobile-button { 1136 | flex: 1 0 0; 1137 | } 1138 | .roam-intense { 1139 | background-color: yellow; 1140 | margin: -2px; 1141 | padding: 2px; 1142 | } 1143 | .roam-highlight { 1144 | background-color: #A4CE64dd; 1145 | margin: -2px; 1146 | padding: 2px; 1147 | } 1148 | .roam-bullet-closed { 1149 | background-color: #ced9e0; 1150 | } 1151 | #right-sidebar .roam-bullet-closed { 1152 | background-color: #a7b6c2; 1153 | } 1154 | .level1 { 1155 | font-family: Roboto, sans-serif; 1156 | font-weight: 200; 1157 | font-size: 40px; 1158 | color: #444444; 1159 | letter-spacing: normal; 1160 | /*-ms-font-feature-settings: 'ss20' 1;*/ 1161 | } 1162 | .rm-pm-editor { 1163 | padding: 5px; 1164 | min-height: 100px; 1165 | outline: 0 !important; 1166 | } 1167 | .rm-pm-editor h1 { 1168 | font-family: 'Inter', sans-serif; 1169 | font-weight: 400; 1170 | font-size: 1.8em; 1171 | } 1172 | .rm-pm-editor h1 textarea { 1173 | line-height: 1.2; 1174 | } 1175 | .rm-pm-editor h1 .roam-block { 1176 | line-height: 1.2; 1177 | } 1178 | .rm-pm-editor h2 { 1179 | font-family: 'Inter', sans-serif !important; 1180 | font-weight: 400; 1181 | font-size: 1.4em; 1182 | } 1183 | .rm-pm-editor h3 { 1184 | font-weight: 500; 1185 | font-size: 1.2em; 1186 | color: #5c7080; 1187 | } 1188 | .rm-pm-editor img { 1189 | max-width: 100%; 1190 | } 1191 | .rm-pm-sub-editor-wrapper { 1192 | padding: 2.5px; 1193 | margin: 2px; 1194 | background-color: rgba(201, 201, 207, 0.1); 1195 | } 1196 | .rm-section-item { 1197 | width: -webkit-max-content; 1198 | width: -moz-max-content; 1199 | width: max-content; 1200 | } 1201 | .rm-section { 1202 | background-color: yellow; 1203 | } 1204 | .rm-section-selected { 1205 | background-color: lightblue; 1206 | } 1207 | .rm-edit-view-wrapper { 1208 | min-width: 21px; 1209 | } 1210 | .edited-by-view { 1211 | flex: 0 0 21px; 1212 | transform-origin: center; 1213 | background-size: cover; 1214 | border: 1px solid darkgray; 1215 | font-size: 0.7em; 1216 | margin-top: 6.5px; 1217 | margin-right: 6px; 1218 | margin-left: 0px; 1219 | height: 15px; 1220 | width: 15px; 1221 | border-radius: 100%; 1222 | background-repeat: no-repeat; 1223 | } 1224 | .roam-block-container { 1225 | max-width: 740px; 1226 | border-radius: 2px; 1227 | } 1228 | .block-highlight-grey { 1229 | background-color: #ced9e0; 1230 | } 1231 | .block-highlight-blue { 1232 | background-color: #D6ECE7; 1233 | } 1234 | /* expand context highlight color */ 1235 | .block-highlight-yellow { 1236 | background-color: #ede6f9; 1237 | } 1238 | .block-bullet-view { 1239 | flex: 1 1 100%; 1240 | margin-left: 5px; 1241 | } 1242 | .block-border-left { 1243 | /* border-left: 1px solid #bfccd6; RTB: Remove left-side vertical lines */ 1244 | } 1245 | .text-align-left { 1246 | text-align: left; 1247 | } 1248 | .text-align-center { 1249 | text-align: center; 1250 | } 1251 | .text-align-right { 1252 | text-align: right; 1253 | } 1254 | .text-align-justify { 1255 | text-align: justify; 1256 | } 1257 | .roam-block { 1258 | min-height: calc(1.5em + 8px); 1259 | box-sizing: border-box; 1260 | white-space: pre-wrap; 1261 | overflow-wrap: break-word; 1262 | margin-top: -1px; 1263 | min-width: 100px; 1264 | width: 100%; 1265 | line-height: 1.5em; 1266 | cursor: text; 1267 | padding-top: 4px; 1268 | padding-bottom: 4px; 1269 | } 1270 | .roam-block .span-view { 1271 | box-sizing: border-box; 1272 | } 1273 | .rm-block-text { 1274 | max-width: 700px; /* RTB change: desired section width */ 1275 | } 1276 | 1277 | .controls { 1278 | display: flex; 1279 | flex: 0 0 40px; 1280 | padding-top: 4px; 1281 | padding-left: 4px; 1282 | } 1283 | .controls .block-expand { 1284 | transform: scale(1); 1285 | transform-origin: center; 1286 | } 1287 | .controls .block-expand .rm-caret { 1288 | transition: all 100ms ease-in; 1289 | } 1290 | .controls .block-expand .rm-rotate-90 { 1291 | transform: rotate(-90deg); 1292 | } 1293 | .controls .opacity-none { 1294 | opacity: 0; 1295 | } 1296 | .controls .opacity-7 { 1297 | opacity: 0.7; 1298 | } 1299 | .controls .cursor-pointer { 1300 | cursor: pointer; 1301 | } 1302 | .controls .cursor-grab { 1303 | cursor: grab; 1304 | } 1305 | .controls .bk-light-grey { 1306 | background-color: #ced9e0; 1307 | } 1308 | .controls .simple-bullet-outer { 1309 | display: flex; 1310 | height: 13px; 1311 | width: 13px; 1312 | margin-top: 6.3px; /* RTB change: center bullet to match font sizing */ 1313 | border-radius: 50%; 1314 | justify-content: center; 1315 | align-items: center; 1316 | } 1317 | .controls .simple-bullet-outer .simple-bullet-inner { 1318 | border-radius: 50%; 1319 | width: 5px; 1320 | height: 5px; 1321 | background-color: #469986; /* RTB change: solarized light bullet color */ 1322 | } 1323 | .version-bullet { 1324 | background-color: #a7b6c2; 1325 | border: none; 1326 | display: flex; 1327 | cursor: pointer; 1328 | flex-direction: column; 1329 | align-items: center; 1330 | justify-content: center; 1331 | padding: 0px; 1332 | transform: scale(0.9); 1333 | transform-origin: center; 1334 | margin-top: 2px; 1335 | margin-left: 0px; 1336 | height: 16px; 1337 | font-size: 9px; 1338 | color: white; 1339 | text-align: center; 1340 | min-height: 16px; 1341 | max-height: 16px; 1342 | min-width: 16px; 1343 | max-width: 16px; 1344 | border-radius: 16px; 1345 | } 1346 | .dnd-separator { 1347 | position: relative; 1348 | width: 100%; 1349 | } 1350 | .dnd-separator .dnd-drop-area { 1351 | position: absolute; 1352 | top: -11px; 1353 | height: 28px; 1354 | width: 100%; 1355 | } 1356 | .dnd-separator .dnd-drop-bar { 1357 | position: absolute; 1358 | z-index: 0; 1359 | top: -4px; 1360 | left: 20px; 1361 | width: 96%; 1362 | height: 4px; 1363 | border-radius: 10px; 1364 | background-color: #5c7080; 1365 | } 1366 | .rm-database { 1367 | background-color: #182026; 1368 | color: #ced9e0; 1369 | } 1370 | .rm-mentions-search-items { 1371 | padding: 8px; 1372 | } 1373 | .rm-mentions-search-items .rm-mentions-title { 1374 | font-size: 20px; 1375 | font-weight: lighter; 1376 | margin: 4px; 1377 | } 1378 | .rm-mentions-search-items .rm-mentions-search-item { 1379 | padding: 12px; 1380 | cursor: pointer; 1381 | background-color: #f5f8fa; 1382 | border: 1px solid #bfccd6; 1383 | } 1384 | .rm-mentions-search-items .rm-mentions-search-item:hover { 1385 | background-color: #bfccd6; 1386 | } 1387 | .block-ref-count-button { 1388 | font-size: 0.9em; 1389 | } 1390 | .rm-grey-text { 1391 | color: #8a9ba8; 1392 | } 1393 | .rm-red-text { 1394 | color: red; 1395 | } 1396 | .flex-v-box { 1397 | display: flex; 1398 | flex: 0 0 auto; 1399 | flex-direction: column; 1400 | } 1401 | .flex-h-box { 1402 | display: flex; 1403 | flex: 0 0 auto; 1404 | padding-bottom: 10px; /* RTB add: a little extra space between bullets */ 1405 | } 1406 | .flex-align-start { 1407 | align-items: flex-start; 1408 | } 1409 | .flex-justify-start { 1410 | justify-content: flex-start; 1411 | } 1412 | .tags-input { 1413 | display: inline-block; 1414 | width: 10em; 1415 | margin: 0 0 4px; 1416 | padding: 4px 6px; 1417 | background: none; 1418 | border: 0; 1419 | outline: 0; 1420 | font: inherit; 1421 | color: inherit; 1422 | text-align: left; 1423 | text-shadow: none; 1424 | } 1425 | .tags-input:focus { 1426 | /* box-shadow: 0 0 5px rgba(81, 203, 238, 1); */ 1427 | /* border: 2px solid white; */ 1428 | /* border-bottom-color: #448cca; */ 1429 | } 1430 | .tags-output { 1431 | display: inline-block; 1432 | margin-left: 4px; 1433 | } 1434 | .tags-output-item { 1435 | display: inline-block; 1436 | background-color: lightgrey; 1437 | cursor: pointer; 1438 | margin: 0 4px 4px 0; 1439 | padding: 4px 6px; 1440 | font-size: 10px; 1441 | border-radius: 4px; 1442 | } 1443 | .tags-output-item2 { 1444 | background-color: black; 1445 | display: inline-block; 1446 | text-decoration: none; 1447 | color: white; 1448 | cursor: pointer; 1449 | margin-left: 6px; 1450 | } 1451 | html { 1452 | margin: 0; 1453 | min-height: 100%; 1454 | } 1455 | body { 1456 | margin: 0; 1457 | padding: 0; 1458 | } 1459 | .xtra { 1460 | transform: scale(3); 1461 | border-radius: 50%; 1462 | padding: 4px; 1463 | } 1464 | .border { 1465 | border: 1px solid ; 1466 | } 1467 | .display-flex { 1468 | display: -webkit-flex; 1469 | display: flex; 1470 | } 1471 | .display-inline-flex { 1472 | display: -webkit-inline-flex; 1473 | display: inline-flex; 1474 | } 1475 | .react-resizable { 1476 | position: relative; 1477 | } 1478 | .react-resizable-handle { 1479 | position: absolute; 1480 | width: 20px; 1481 | height: 20px; 1482 | bottom: 0; 1483 | right: 0; 1484 | background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+'); 1485 | background-position: bottom right; 1486 | padding: 0 3px 3px 0; 1487 | background-repeat: no-repeat; 1488 | background-origin: content-box; 1489 | box-sizing: border-box; 1490 | cursor: se-resize; 1491 | } 1492 | .resize-card { 1493 | overflow-y: hidden; 1494 | } 1495 | .noselect { 1496 | -webkit-touch-callout: none; 1497 | /* iOS Safari */ 1498 | -webkit-user-select: none; 1499 | /* Safari */ 1500 | -khtml-user-select: none; 1501 | /* Konqueror HTML */ 1502 | -moz-user-select: none; 1503 | /* Firefox */ 1504 | -ms-user-select: none; 1505 | /* Internet Explorer/Edge */ 1506 | user-select: none; 1507 | /* Non-prefixed version, currently */ 1508 | } 1509 | 1510 | /* RTB additions below */ 1511 | 1512 | #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { 1513 | margin-top: 3px; 1514 | } 1515 | 1516 | #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { 1517 | margin-top: 3px; 1518 | } 1519 | 1520 | #roam-right-sidebar-content .rm-level1 .roam-block { 1521 | margin-top: -5px; 1522 | } 1523 | 1524 | #roam-right-sidebar-content .rm-level2 .roam-block { 1525 | margin-top: -5px; 1526 | } 1527 | 1528 | #roam-right-sidebar-content .rm-level3 .roam-block { 1529 | margin-top: -3px; 1530 | } 1531 | 1532 | #roam-right-sidebar-content { 1533 | font-size: 16px; 1534 | } 1535 | 1536 | #roam-right-sidebar-content .rm-block-ref { 1537 | font-size: 14px; /* make block ref in side-bar a little smaller to show that's it's a reference */ 1538 | /* color: #9d6500; Don't change color of full block ref in sidebar */ 1539 | } 1540 | 1541 | a { 1542 | color: #A4CE64; /* solarized light color */ 1543 | } 1544 | 1545 | /* 1546 | Popup menu when typing / below 1547 | .bp3-elevation-3 { 1548 | background-color: navajowhite !important; 1549 | } 1550 | .bp3-elevation-3 div { 1551 | font-family: ... 1552 | } 1553 | */ 1554 | 1555 | #right-sidebar { 1556 | background-color: rgb(247, 249, 251) !important; /* nicer light gray color */ 1557 | } 1558 | 1559 | /* target block embeds on main page and in sidebar */ 1560 | div[id^='block-input-'] > span > div { 1561 | background-color: #acb0e830 !important; 1562 | } 1563 | 1564 | /* RTB additions below */ 1565 | 1566 | #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { 1567 | margin-top: 3px; 1568 | } 1569 | 1570 | #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { 1571 | margin-top: 3px; 1572 | } 1573 | 1574 | #roam-right-sidebar-content .rm-level1 .roam-block { 1575 | margin-top: -5px; 1576 | } 1577 | 1578 | #roam-right-sidebar-content .rm-level2 .roam-block { 1579 | margin-top: -5px; 1580 | } 1581 | 1582 | #roam-right-sidebar-content .rm-level3 .roam-block { 1583 | margin-top: -3px; 1584 | } 1585 | 1586 | 1587 | /* Side Bar */ 1588 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button, 1589 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper, 1590 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 1591 | background-color: #141E35; 1592 | color: #469986; 1593 | } 1594 | 1595 | /* Better hover effect for shortcut pages in left side-bar */ 1596 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 1597 | color: #141E35; 1598 | background-color: #ACD2CA; 1599 | } 1600 | /* Omni Sidebar Hover State */ 1601 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 1602 | color: #141E35; 1603 | background-color: #ACD2CA; 1604 | } 1605 | 1606 | 1607 | /* Side Bar Open/Close Icon */ 1608 | .bp3-button:before, 1609 | .bp3-minimal:before, 1610 | .bp3-icon-menu:before, 1611 | .bp3-small:before { 1612 | color: #469986 !important; 1613 | } 1614 | 1615 | /* Change sideboard to all one color */ 1616 | .roam-body .roam-app .roam-sidebar-container { 1617 | background-color: #141E35 !important; 1618 | } 1619 | /*Change Roam Research logo color to match theme*/ 1620 | #roam-sidebar-logo { 1621 | filter: brightness(0) saturate(100%) invert(92%) sepia(20%) saturate(457%) hue-rotate(315deg) brightness(108%) contrast(99%); 1622 | } 1623 | #roam-sidebar-logo:focus, #roam-sidebar-logo:hover { 1624 | text-decoration: none !important; 1625 | } 1626 | /* Change color of the email address at top of left sidebar to match theme */ 1627 | .bp3-button div { 1628 | color: #469986 !important; 1629 | } 1630 | 1631 | /*Pill Page References*/ 1632 | /*span.rm-page-ref { 1633 | background-color: #fbd15b75 !important; 1634 | font-size: 18px; 1635 | letter-spacing: .07em; 1636 | } 1637 | span.rm-page-ref { 1638 | color: black !important; 1639 | border-radius: 10px; 1640 | padding: 2px 3px 2px 3px; 1641 | } 1642 | 1643 | span.rm-page-ref:hover { 1644 | color: black !important; 1645 | background-color: #b0d4fc !important; 1646 | text-decoration: none; 1647 | } 1648 | span.rm-page-ref:hover { 1649 | color: #000 !important; 1650 | background-color: #ffca36d9 !important; 1651 | border-radius: 15px; 1652 | text-decoration: none; 1653 | }*/ 1654 | 1655 | /* Tag Styles hashtags*/ 1656 | /*.rm-page-ref-tag 1657 | color: #f8c764 !important; 1658 | background-color: #423212; 1659 | border-radius: 10px; 1660 | padding: 2px 3px 2px 3px; 1661 | } 1662 | .rm-page-ref-tag:hover { 1663 | color: white !important; 1664 | background-color: #e88a24; 1665 | text-decoration: none; 1666 | } 1667 | */ 1668 | 1669 | /* scrollbar scroll bar */ 1670 | ::-webkit-scrollbar { 1671 | width: 7px; 1672 | } 1673 | /* lets me customize color of the selected block and text within it input block input */ 1674 | .rm-block-input { 1675 | line-height: 1.5em; 1676 | /* font-size: 20px; */ /* RTB add: larger font */ 1677 | width: 90%; 1678 | outline: 1px solid rgba(0, 0, 0, 0); 1679 | overflow-wrap: break-spaces; 1680 | vertical-align: top; 1681 | margin-top: -1px; 1682 | font-family: 'Avenir Next'; /* RTB change */ 1683 | color: #141E35 !important; 1684 | background-color: #ACD2CA; 1685 | padding-top: 4px; 1686 | padding-bottom: 4px; 1687 | padding-left: 0px; 1688 | letter-spacing: inherit; 1689 | border-radius: 7px; 1690 | resize: none; 1691 | } 1692 | 1693 | /* search bar full width */ 1694 | 1695 | .rm-find-or-create-wrapper { 1696 | flex: 0 1 100% !important; 1697 | } 1698 | 1699 | /* reduces font size when I'm doing an inline search with [[]] or (()) */ 1700 | div.bp3-elevation-3 { 1701 | font-size: 0.7em; 1702 | } 1703 | /*Wraps text when I'm doing an inline search with [[]] or (())*/ 1704 | .bp3-text-overflow-ellipsis { 1705 | text-overflow: unset; 1706 | white-space: unset; 1707 | } 1708 | 1709 | /* Increases the height of the inline search box */ 1710 | div.bp3-elevation-3[style^='max-height: 300px; top: 26px; overflow: auto;'] { 1711 | max-height: 600px !important; 1712 | } 1713 | 1714 | /* Right side bar reference boxes */ 1715 | #right-sidebar .rm-reference-item { 1716 | background-color: #ECF6F8; 1717 | border-radius: 10px; 1718 | border: 2px; 1719 | padding: 5px; 1720 | } 1721 | 1722 | /*RR change: additional text styles for bold and italics and bold */ 1723 | .roam-app strong { 1724 | color: #8AC349 !important; 1725 | } 1726 | 1727 | .roam-app em { 1728 | color: #8AC349; 1729 | } 1730 | 1731 | /*RR change: Markdown Links and the titles of pages in the side bar */ 1732 | 1733 | .roam-app a { 1734 | color: #00b3c4; 1735 | } 1736 | 1737 | .roam-app a:focus, 1738 | .roam-app a:hover { 1739 | color: #5EBAC3; 1740 | text-decoration: underline; 1741 | } 1742 | 1743 | 1744 | 1745 | /* background for the linked references and queries query background */ 1746 | .roam-block .rm-reference-main { 1747 | border: 2px solid #46998645; 1748 | background-color: #ECF6F8; 1749 | } 1750 | 1751 | .loading-astrolabe{ 1752 | display: block; 1753 | -moz-box-sizing: border-box; 1754 |   box-sizing: border-box; 1755 | background: url(https://i.imgur.com/KWl6pqT.gif) no-repeat; 1756 |   width: 600px; 1757 |   height: 600px; 1758 |   padding-left: 600px; /* Equal to width of new image */ 1759 | } 1760 | .loading-astrolabe .wand{ 1761 | visibility: hidden !important; 1762 | } 1763 | 1764 | /* full width of text v1 */ 1765 | /* .roam-block-container { 1766 | max-width: 100% !important; 1767 | } 1768 | div.roam-center > div:first-child { 1769 | padding-right: calc((100% - 950px) / 2) !important; 1770 | padding-left: calc((100% - 1500px) / 2) !important; 1771 | } 1772 | .hoverparent[style^='position: relative; width: 500px;'] { 1773 | width: 100% !important; 1774 | } 1775 | .hoverparent .react-resizable[style^='width: 500px;'] { 1776 | width: 100% !important; 1777 | } 1778 | .react-resizable[style^='width: 580px;'], 1779 | .react-resizable[style^='width: 720px;'] { 1780 | width: 100% !important; 1781 | } 1782 | .hoverparent[style^="position: relative; width: 580px;"], 1783 | .hoverparent[style^="position: relative; width: 720px;"] { 1784 | width: 100% !important; 1785 | } 1786 | .rm-block-text { 1787 | max-width: 3000%; 1788 | } 1789 | */ 1790 | 1791 | /* Make page width wider Ally */ 1792 | .roam-block-container,.roam-block,.rm-block-text {max-width: 2000px;} 1793 | 1794 | .roam-center > div {padding-right: 0px !important;padding-left: 0px !important;} 1795 | 1796 | 1797 | 1798 | /* thicker lines to mark bullet indentation hierarchy */ 1799 | 1800 | .block-border-left { 1801 | border: none; 1802 | } 1803 | .roam-block-container { 1804 | position: relative; 1805 | } 1806 | .roam-block-container .block-border-left .flex-h-box.flex-align-start.flex-justify-start { 1807 | margin-left: 10px; 1808 | } 1809 | .roam-block-container .block-border-left .flex-h-box.flex-align-start.flex-justify-start .controls { 1810 | display: table-cell; 1811 | position: absolute; 1812 | height: 100%; 1813 | } 1814 | .roam-block-container .block-border-left .flex-h-box.flex-align-start.flex-justify-start .controls .block-expand { 1815 | opacity: 1 !important; 1816 | display: table-cell; 1817 | position: absolute; 1818 | bottom: 0; 1819 | top: 0; 1820 | left: -10px; 1821 | } 1822 | .roam-block-container .block-border-left .flex-h-box.flex-align-start.flex-justify-start .controls .block-expand .bp3-icon-caret-down { 1823 | border-left: 2px solid #bfccd6; 1824 | height: 100%; 1825 | width: 20px; 1826 | } 1827 | .roam-block-container .block-border-left .flex-h-box.flex-align-start.flex-justify-start .controls .block-expand .bp3-icon-caret-down.rm-rotate-90 { 1828 | transform: none; 1829 | } 1830 | .roam-block-container .block-border-left .flex-h-box.flex-align-start.flex-justify-start .controls .block-expand .bp3-icon-caret-down:before { 1831 | content: ""; 1832 | } 1833 | .roam-block-container .block-border-left .flex-h-box.flex-align-start.flex-justify-start .controls .block-expand.cursor-pointer .bp3-icon-caret-down { 1834 | border-color: #469986; 1835 | } 1836 | .roam-block-container .block-border-left .flex-h-box.flex-align-start.flex-justify-start .controls .simple-bullet-outer { 1837 | position: relative; 1838 | left: 5px; 1839 | } 1840 | .roam-block-container .block-border-left .flex-h-box.flex-align-start.flex-justify-start .roam-block, .roam-block-container .block-border-left .flex-h-box.flex-align-start.flex-justify-start .rm-block-input { 1841 | margin-left: 25px; 1842 | } 1843 | 1844 | /* Comment button */ 1845 | .bp3-icon-comment { opacity: 100 !important; 1846 | transform: scale(1.2) !important; 1847 | padding-right: 20px;} 1848 | .bp3-icon-comment::before { color: #5EBAC3 !important; 1849 | } 1850 | .roam-toolkit-block-mode--highlight{background-color: #D6ECE7 !important;} 1851 | 1852 | /* highlight color */ 1853 | .roam-highlight { 1854 | background-color: #bee3d985; 1855 | margin: -2px; 1856 | padding: 2px; 1857 | } 1858 | 1859 | /* weird sidebar stuff with masonry mode */ 1860 | :root { 1861 | --right-sidebar-masonry-bg: rgb(247, 249, 251); 1862 | --right-sidebar-masonry-outline: #d8e1e8; 1863 | } 1864 | #app .roam-main .roam-body-main .roam-center { 1865 | flex: 1 1 100% !important; 1866 | flex-basis: 10% !important; 1867 | } 1868 | #right-sidebar { 1869 | /* container */ 1870 | background-color: #d6ece7 !important; 1871 | } 1872 | .roam-log-container .roam-log-page { 1873 | padding: 10px; 1874 | border: 1px solid #bfbfbf; 1875 | border-radius: 5px; 1876 | background-color: #ffffff !important; 1877 | } 1878 | #right-sidebar #roam-right-sidebar-content { 1879 | overflow: scroll !important; 1880 | white-space: normal; 1881 | display: flex; 1882 | flex-flow: column wrap; 1883 | } 1884 | #right-sidebar #roam-right-sidebar-content .sidebar-content { 1885 | overflow: scroll !important; 1886 | white-space: normal; 1887 | display: flex; 1888 | align-content: flex-start; 1889 | flex-flow: column wrap; 1890 | /* item */ 1891 | } 1892 | #right-sidebar #roam-right-sidebar-content .sidebar-content > div { 1893 | position: relative; 1894 | display: flex; 1895 | flex: 0 1 auto; 1896 | flex-direction: column; 1897 | align-self: flex-start; 1898 | margin-right: 0px !important; 1899 | margin-left: 15px; 1900 | padding: 10px; 1901 | border-radius: 5px; 1902 | margin-bottom: 16px; 1903 | min-height: fit-content; 1904 | width: 600px; 1905 | background-color: var(--right-sidebar-masonry-bg) !important; 1906 | border: 1px solid var(--right-sidebar-masonry-outline) !important; 1907 | /* item header */ 1908 | /* item content */ 1909 | } 1910 | 1911 | #right-sidebar 1912 | #roam-right-sidebar-content 1913 | .sidebar-content 1914 | > div 1915 | > div 1916 | > div:nth-child(2) { 1917 | resize: vertical; 1918 | overflow-y: auto; 1919 | overflow-x: hidden; 1920 | max-height: 770px; 1921 | } 1922 | #right-sidebar 1923 | #roam-right-sidebar-content 1924 | .sidebar-content 1925 | > div 1926 | > div 1927 | > div:nth-child(2) 1928 | > div 1929 | > div.flex-v-box { 1930 | margin-left: 0px !important; 1931 | } 1932 | 1933 | /* CSS Fonts */ 1934 | div { 1935 | font-family: 'Inter'; /* RTB change: desired change font (bear) */ 1936 | font-size: 1em; 1937 | line-height: 1.5em; 1938 | margin: 0px; 1939 | padding: 0px; 1940 | } 1941 | textarea { 1942 | font-family: 'Inter'; /* RTB change: desired change font (bear) */ 1943 | font-size: 1em; 1944 | line-height: 1.5em; 1945 | margin: 0px; 1946 | padding: 0px; 1947 | } 1948 | .rm-level1 { 1949 | font-family: 'Inter'; /* RTB change */ 1950 | font-weight: 400; 1951 | font-size: 1.8em; 1952 | } 1953 | .rm-level1 textarea { 1954 | line-height: 1.2; 1955 | } 1956 | .rm-level1 .roam-block { 1957 | line-height: 1.2; 1958 | margin-top: -8px; /* RTB add */ 1959 | } 1960 | .rm-level2 { 1961 | font-family: 'Inter' !important; /* RTB change */ 1962 | font-weight: 400; 1963 | font-size: 1.4em; 1964 | } 1965 | --------------------------------------------------------------------------------