Last active
May 13, 2020 00:39
-
-
Save lynchjames/7ec5fd6bf738c897611b66d73a6db2bc to your computer and use it in GitHub Desktop.
Stylus CSS for roamresearch.com dark theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "../fonts/Inter/inter.css"; | |
.loading-astrolabe { | |
margin: auto; | |
position: relative; | |
width: 250px; | |
height: 250px; | |
} | |
.loading-astrolabe .wand { | |
position: absolute; | |
width: 80%; | |
top: 24.5%; | |
left: 10%; | |
animation: nav 3.5s linear infinite; | |
} | |
.loading-astrolabe .wand-small { | |
position: absolute; | |
width: 80%; | |
top: 24.5%; | |
left: 11.5%; | |
} | |
.loading-astrolabe .background { | |
width: 100%; | |
border: none; | |
margin-left: -3px; | |
} | |
.spinner-astrolabe { | |
margin: auto; | |
margin-top: 100px; | |
position: relative; | |
width: 200px; | |
height: 200px; | |
} | |
.spinner-astrolabe .wand { | |
position: absolute; | |
width: 80%; | |
top: 24.5%; | |
left: 10%; | |
animation: nav 3.5s linear 20s; | |
} | |
.spinner-astrolabe .wand:hover { | |
animation: nav 3.5s linear infinite; | |
} | |
.spinner-astrolabe .wand-small { | |
position: absolute; | |
width: 80%; | |
top: 24.5%; | |
left: 11.5%; | |
} | |
.spinner-astrolabe .background { | |
width: 100%; | |
border: none; | |
margin-left: -3px; | |
} | |
@keyframes spin { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
@keyframes nav { | |
0% { | |
transform: rotate(0deg); | |
} | |
15% { | |
transform: rotate(-30deg); | |
} | |
25% { | |
transform: rotate(30deg); | |
} | |
40% { | |
transform: rotate(-15deg); | |
} | |
50% { | |
transform: rotate(40deg); | |
} | |
70% { | |
transform: rotate(-50deg); | |
} | |
85% { | |
transform: rotate(75deg); | |
} | |
90% { | |
transform: rotate(-180deg); | |
} | |
100% { | |
transform: rotate(-355deg); | |
} | |
} | |
.spinner-square { | |
box-sizing: border-box; | |
width: 300px; | |
height: 300px; | |
background-color: grey; | |
display: grid; | |
grid-template-rows: 1fr 1fr; | |
padding: 20px; | |
grid-gap: 20px; | |
z-index: 3; | |
grid-template-columns: 1fr 1fr; | |
cursor: pointer; | |
} | |
.spinner-square .spinner-square-front { | |
background-color: white; | |
z-index: 5; | |
} | |
.spinner-square .spinner-square-rotate { | |
position: absolute; | |
margin-left: 75px; | |
margin-top: 75px; | |
background-color: black; | |
width: 150px; | |
height: 150px; | |
animation: spin 4.5s linear infinite; | |
} | |
.scrollbar { | |
margin-left: 30px; | |
float: left; | |
height: 300px; | |
width: 65px; | |
background: #F5F5F5; | |
overflow-y: scroll; | |
margin-bottom: 25px; | |
} | |
#scroll-1::-webkit-scrollbar-track { | |
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
border-radius: 8px; | |
background-color: #F5F5F5; | |
} | |
#scroll-1::-webkit-scrollbar { | |
width: 8px; | |
background-color: #F5F5F5; | |
} | |
#scroll-1::-webkit-scrollbar-thumb { | |
border-radius: 8px; | |
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
background-color: #8A9BA8; | |
} | |
#home { | |
padding: 50px; | |
background-color: blue; | |
color: #182026; | |
} | |
#home .icons { | |
padding-left: 20px; | |
} | |
#home .icons .bp3-icon-large:hover { | |
transform: scale(2); | |
margin-left: 60px; | |
} | |
#home2 .dark { | |
color: white; | |
background-color: #343a40; | |
} | |
#home2 .container { | |
margin: auto; | |
max-width: 1110px; | |
} | |
#home2 .block { | |
padding: 7em 0 0; | |
} | |
#home2 #header { | |
width: 100%; | |
position: fixed; | |
top: 0; | |
} | |
#home2 #header .nav { | |
display: flex; | |
flex: 0 0 auto; | |
align-items: center; | |
padding: 10px 14px; | |
} | |
#home2 #header .nav .bp3-button { | |
color: white; | |
} | |
.bp3-popover .bp3-button, .bp3-elevation-3 { | |
color: #182026 !important; | |
} | |
.bp3-button { | |
margin: 10px 4px 0 0; | |
color: white; | |
} | |
.bp3-button:not([class*="bp3-intent-"]), .bp3-button.bp3-minimal:hover { | |
color: white; | |
} | |
.bp3-dialog { | |
padding: 4px !important; | |
} | |
#home2 #body { | |
margin-top: 50px; | |
} | |
#home2 h1 { | |
margin-bottom: 20px; | |
} | |
#home2 .row { | |
display: flex; | |
flex-wrap: wrap; | |
} | |
#home2 .col { | |
margin: 24px auto; | |
max-width: 300px; | |
} | |
#home2 #testimonials .testimonial { | |
text-align: center; | |
} | |
#home2 #logo-graph { | |
-webkit-filter: grayscale(100%) brightness(60%) contrast(10000000%); | |
opacity: .4; | |
display: grid; | |
} | |
#home2 #footer { | |
padding-bottom: 7em; | |
} | |
#page { | |
font-family: Segoe UI, Roboto, sans-serif; | |
} | |
#page1 { | |
margin: 0 auto; | |
padding-top: 4em; | |
max-width: 40em; | |
font-family: Segoe UI, Roboto, sans-serif; | |
color: #808080; | |
} | |
#page1 h1, | |
#page1 h2 { | |
color: #4d4d4d; | |
text-align: center; | |
} | |
#page1 .sub { | |
width: 400px; | |
margin: 8px auto; | |
} | |
#page1 .hero { | |
margin: 0 auto; | |
display: flex; | |
justify-content: center; | |
} | |
#page1 .hero button { | |
min-height: 50px; | |
font-size: 1.8em; | |
padding: 16px 20px; | |
margin: 8px; | |
} | |
#page1 .zk { | |
padding: 25px; | |
} | |
#page1 .quotes { | |
max-width: 80vw; | |
margin: 20px auto; | |
} | |
#page1 .quote { | |
float: right; | |
padding-top: 1em; | |
} | |
#secret-invite-wrapper { | |
height: 100vh; | |
background-color: black; | |
overscroll-behavior: none; | |
} | |
#secret-invite-wrapper #secret-invite { | |
position: relative; | |
margin: 0 auto; | |
padding-top: 4em; | |
max-width: 40em; | |
font-family: Segoe UI, Roboto, sans-serif; | |
color: #b3b3b3; | |
} | |
#secret-invite-wrapper #secret-invite #secret-scroll { | |
position: absolute; | |
height: 90vh; | |
overflow: scroll; | |
} | |
#secret-invite-wrapper #secret-invite h1, | |
#secret-invite-wrapper #secret-invite h2 { | |
color: #cccccc; | |
text-align: center; | |
} | |
#secret-invite-wrapper #secret-invite .sub { | |
width: 400px; | |
margin: 8px auto; | |
} | |
#secret-invite-wrapper #secret-invite .hero { | |
margin: 0 auto; | |
display: flex; | |
justify-content: center; | |
} | |
#secret-invite-wrapper #secret-invite .hero button { | |
min-height: 50px; | |
font-size: 1.8em; | |
padding: 16px 20px; | |
margin: 8px; | |
} | |
#secret-invite-wrapper #secret-invite .zk { | |
padding: 25px; | |
} | |
#secret-invite-wrapper #secret-invite .quotes { | |
max-width: 80vw; | |
margin: 20px auto; | |
} | |
#secret-invite-wrapper #secret-invite .quote { | |
float: right; | |
padding-top: 1em; | |
} | |
html { | |
scroll-behavior: smooth; | |
} | |
#landing-page * { | |
margin: 0; | |
padding: 0; | |
} | |
#landing-page #form { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
padding: 12px; | |
} | |
#landing-page #form .ff { | |
text-align: center; | |
line-height: 1.8em; | |
font-size: 1.2em; | |
max-width: 400px; | |
} | |
#landing-page #form form { | |
display: flex; | |
flex-direction: column; | |
} | |
#landing-page #form form textarea { | |
max-width: 70vw; | |
width: 300px; | |
resize: none; | |
border: 1px solid lightgrey; | |
padding: 4px; | |
} | |
#landing-page #form form input { | |
max-width: 70vw; | |
width: 300px; | |
padding: 4px; | |
margin: 8px; | |
} | |
#landing-page #header ul { | |
display: flex; | |
list-style-type: none; | |
background-color: #293742; | |
color: #f5f8fa; | |
} | |
#landing-page #header ul .logo { | |
padding: 8px; | |
} | |
#landing-page #header ul li:hover { | |
background-color: #182026; | |
} | |
#landing-page #header ul li a { | |
display: block; | |
padding: 8px; | |
text-decoration: none; | |
width: 100%; | |
height: 100%; | |
color: inherit; | |
} | |
#landing-page #cover { | |
background-color: #182026; | |
padding: 40px 0 0 0; | |
min-height: 100vh; | |
color: #ced9e0; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
#landing-page #cover .a { | |
background-color: #ced9e0; | |
color: #182026; | |
border-radius: 4px; | |
cursor: pointer; | |
text-decoration: none; | |
} | |
#landing-page #cover .a:hover { | |
color: #0e5a8a; | |
} | |
#landing-page #cover #tag-line { | |
padding: 30px 40px 0px; | |
} | |
#landing-page #cover #tag-line ul { | |
line-height: 32px; | |
margin-left: 32px; | |
margin-right: 16px; | |
margin-top: 25px; | |
font-size: 16px; | |
} | |
#landing-page #cover #endorsement { | |
margin: 80px 20px 20px; | |
} | |
#landing-page #cover #callouts { | |
margin-top: 10%; | |
} | |
#landing-page #cover #callouts button { | |
font-size: 20px; | |
padding: 20px; | |
background-color: #182026; | |
} | |
#landing-page #cover #image-collection { | |
flex: 1 1 400px; | |
max-width: 500px; | |
background-color: #ced9e0; | |
color: #293742; | |
padding: 40px 40px 40px; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
#landing-page #cover #image-collection #images { | |
color: #182026; | |
padding: 40px 0px; | |
display: grid; | |
grid-template-columns: repeat(auto-fill, minmax(100px, auto)); | |
grid-column-gap: 20px; | |
justify-items: start; | |
align-items: center; | |
} | |
#landing-page #cover #image-collection #images img { | |
margin: 8px; | |
max-height: 70px; | |
max-width: 100%; | |
} | |
#landing-page #features { | |
padding: 40px 40px; | |
background-color: #293742; | |
border-top: 1px solid #5c7080; | |
color: #d8e1e8; | |
flex-direction: column; | |
} | |
#landing-page #features ul { | |
padding-left: 16px; | |
} | |
#landing-page #features .feature { | |
margin: 40px 0px; | |
display: flex; | |
justify-content: center; | |
flex-wrap: wrap; | |
} | |
#landing-page #features .feature .feature-content { | |
width: 400px; | |
margin: 40px; | |
} | |
#landing-page #features .feature .feature-image { | |
min-height: 400px; | |
min-width: 400px; | |
background-color: grey; | |
} | |
.rm-emoji-block-view { | |
display: flex; | |
flex: 0 0 auto; | |
flex-wrap: wrap; | |
margin-left: 40px; | |
align-items: center; | |
} | |
.rm-emoji-block-view .rm-emoji-button { | |
display: flex; | |
flex: 0 0 auto; | |
align-items: center; | |
cursor: pointer; | |
border-radius: 20px; | |
height: 20px; | |
margin: 0px 4px 4px 0px; | |
} | |
.rm-emoji-block-view .rm-emoji-button .rm-emoji { | |
height: 16px; | |
margin: 0px 4px; | |
} | |
.rm-emoji-block-view .rm-emoji-button .rm-emoji-number { | |
height: 100%; | |
font-size: 10px; | |
margin-right: 6px; | |
font-weight: 500; | |
} | |
.rm-emoji-tooltip { | |
max-width: 200px; | |
overflow-wrap: break-word; | |
font-size: 12px; | |
color: white; | |
font-weight: 600; | |
} | |
.kanban-board { | |
background-color: #a7b6c2; | |
min-width: 100%; | |
min-height: 48px; | |
padding: 8px; | |
overflow-x: scroll; | |
} | |
.kanban-column { | |
background-color: #ededed; | |
margin: 0px 4px 0px 4px; | |
padding: 4px; | |
min-width: 200px; | |
} | |
.kanban-title { | |
text-align: center; | |
} | |
.kanban-card { | |
background-color: white; | |
margin: 8px; | |
padding: 8px; | |
} | |
html { | |
font-family: 'Segoe UI', 'Inter', sans-serif; | |
} | |
@supports (font-variation-settings: normal) { | |
html { | |
font-family: 'Inter var', sans-serif; | |
} | |
} | |
body { | |
overscroll-behavior: none; | |
} | |
::-webkit-scrollbar { | |
width: 0px; | |
background: transparent; | |
} | |
* { | |
box-sizing: border-box; | |
} | |
*:focus { | |
outline-width: 0; | |
} | |
.roam-lift { | |
z-index: 10000; | |
} | |
.CodeMirror { | |
height: auto !important; | |
} | |
@media (max-width: 500px) { | |
.bp3-omnibar { | |
max-width: 310px; | |
left: calc((100vw - 310px) / 2); | |
} | |
} | |
.rm-line { | |
background-color: #ced9e0; | |
flex: 0 0 1px; | |
} | |
.roam-body { | |
height: 100vh; | |
overflow: hidden; | |
position: relative; | |
background-color: #f9f9f9; /* RTB add: bear color */ | |
} | |
.roam-body .roam-app { | |
height: 100%; | |
width: 100%; | |
position: relative; | |
-webkit-overflow-scrolling: touch; | |
background-color: #202b33; | |
} | |
.roam-body .roam-app h1 { | |
color: #f5f8fa; | |
} | |
.roam-body .roam-app .roam-sidebar-container { | |
position: absolute; | |
top: 45px; | |
left: -232px; | |
width: 232px; | |
bottom: 45px; | |
z-index: 999; | |
transition: all 200ms ease-in; | |
background-color: #2f3437; | |
background-color: #182026; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-hover-sidebar-reveal { | |
position: absolute; | |
z-index: 99; | |
top: 0px; | |
right: -8px; | |
bottom: 0px; | |
width: 0px; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-topnav { | |
position: absolute; | |
top: 0; | |
padding: 16px; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content { | |
height: 100%; | |
position: relative; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { | |
padding: 8px 20px; | |
font-weight: bold; | |
cursor: pointer; | |
font-size: 14px; | |
color: #5c7080; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { | |
color: #f5f8fa; | |
background-color: #10161a; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { | |
color: #5c7080; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages { | |
overflow-y: auto; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { | |
text-decoration: none; | |
cursor: pointer; | |
font-size: 14px; | |
padding: 8px 0px 8px 4px; | |
color: #5c7080; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { | |
color: #f5f8fa; | |
background-color: #10161a; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .title { | |
padding: 8px; | |
margin-bottom: 8px; | |
font-size: 14px; | |
font-weight: bold; | |
} | |
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .roam-sidebar-body { | |
margin-top: 64px; | |
width: 100%; | |
transition: all 150ms ease-in; | |
position: absolute; | |
overflow: scroll; | |
} | |
.roam-body .roam-app .roam-main { | |
width: 100%; | |
display: flex; | |
} | |
.roam-body .roam-app .roam-main .roam-article { | |
position: relative; | |
padding: 16px 42px 120px; | |
font-size: 20px; /* RTB add: larger font */ | |
color: #f5f8fa; /* RTB add: roam color */ | |
} | |
.roam-body .roam-app .roam-main .roam-article .rm-title-display { | |
margin-bottom: 32px; | |
} | |
.parent-path-wrapper > div > div > div { | |
background: none !important; | |
} | |
#right-sidebar .rm-reference-container { | |
padding-top: 0px; | |
border-top: none; | |
} | |
.roam-block .rm-reference-container { | |
border-top: 1px solid #ced9e0; | |
padding-top: 0px; | |
} | |
.roam-block .rm-reference-main { | |
border: 1px solid #ced9e0; | |
padding: 0px 16px 12px 16px; | |
} | |
.pointer { | |
cursor: pointer; | |
} | |
.roam-topbar { | |
height: 45px; | |
position: fixed; | |
width: 100%; | |
z-index: 101; | |
background-color: #182026; /* RTB change: bear background */ | |
padding-right: 16px; | |
padding-left: 16px; | |
padding-top: 8px; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
} | |
.trunc { | |
max-width: 120px; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
} | |
.bblack { | |
border: 1px solid black; | |
background-color: lightgrey; | |
} | |
.roam-popup-container { | |
display: flex; | |
flex-direction: column; | |
overflow: scroll; | |
} | |
.roam-popup-container .roam-popup-content { | |
position: absolute; | |
top: 34px; | |
bottom: 10px; | |
width: 100%; | |
overflow-y: scroll; | |
} | |
.rm-input { | |
width: 100%; | |
outline: 1px solid transparent; | |
vertical-align: top; | |
background-color: transparent; | |
border: none; | |
resize: none; | |
} | |
.rm-input::-webkit-input-placeholder { | |
color: #ced9e0; | |
} | |
.rm-input:-moz-placeholder { | |
/* Firefox 18- */ | |
color: #ced9e0; | |
} | |
.rm-input::-moz-placeholder { | |
/* Firefox 19+ */ | |
color: #ced9e0; | |
} | |
.rm-input:-ms-input-placeholder { | |
color: #ced9e0; | |
} | |
.rm-input::placeholder { | |
color: #ced9e0; | |
} | |
.rm-title-textarea { | |
width: 100%; | |
outline: 1px solid transparent; | |
vertical-align: top; | |
line-height: 1.3em; | |
background-color: transparent; | |
border: none; | |
resize: none; | |
} | |
.rm-title-textarea::-webkit-input-placeholder { | |
color: #ced9e0; | |
} | |
.rm-title-textarea:-moz-placeholder { | |
/* Firefox 18- */ | |
color: #ced9e0; | |
} | |
.rm-title-textarea::-moz-placeholder { | |
/* Firefox 19+ */ | |
color: #ced9e0; | |
} | |
.rm-title-textarea:-ms-input-placeholder { | |
color: #ced9e0; | |
} | |
.rm-title-textarea::placeholder { | |
color: #ced9e0; | |
} | |
.rm-title-untitled { | |
color: #ced9e0; | |
} | |
.rm-title-display { | |
line-height: 1.3em; | |
font-weight: 450; | |
word-break: break-word; | |
min-width: 100px; | |
width: 100%; | |
cursor: text; | |
outline: 1px solid transparent; | |
} | |
.roam-log-container .roam-log-page { | |
border-top: 1px solid #738694; | |
margin-top: 40px; | |
padding-top: 40px; | |
padding-bottom: 16px; | |
margin-bottom: 16px; | |
} | |
.roam-log-container .roam-log-page:first-child { | |
border: 0px solid blue; | |
margin-top: 0px; | |
min-height: 500px; | |
padding-top: 0px; | |
} | |
.roam-log-container .roam-log-preview { | |
color: #8a9ba8; | |
} | |
.roam-log-container .roam-log-preview h1 { | |
color: #8a9ba8; | |
} | |
.roam-log-container .roam-log-preview:hover { | |
background-color: grey; | |
} | |
#buffer { | |
display: flex; | |
flex-direction: column; | |
} | |
#buffer .help-title { | |
color: #f5f8fa; | |
text-align: center; | |
font-size: 16px; | |
font-weight: bold; | |
} | |
#buffer .help-sub-title { | |
color: #e1e8ed; | |
text-align: center; | |
} | |
#buffer .help-item-text { | |
color: #e1e8ed; | |
} | |
#buffer .help-item-label { | |
opacity: 0.6; | |
color: #e1e8ed; | |
} | |
.roam-table { | |
padding-bottom: 24px; | |
overflow-x: scroll; | |
} | |
.roam-table th, | |
.roam-table td, | |
.roam-table tr { | |
font-size: 12px; | |
min-width: 100px; | |
max-height: 20px; | |
padding: 8px 16px; | |
margin: 0p; | |
border: 1px solid grey; | |
} | |
.roam-table td { | |
max-height: 20px; | |
overflow: scroll; | |
} | |
.import-table { | |
padding-bottom: 24px; | |
max-width: 100%; | |
} | |
.import-table table { | |
width: 100%; | |
} | |
.import-table th, | |
.import-table td, | |
.import-table tr { | |
font-size: 12px; | |
max-height: 20px; | |
padding: 8px 16px; | |
margin: 0p; | |
border: 1px solid grey; | |
} | |
.import-table td { | |
max-height: 20px; | |
} | |
.import-table td .import-preview { | |
white-space: pre-wrap; | |
word-break: break-word; | |
max-width: 50px; | |
} | |
#info { | |
padding: 8px 0px; | |
margin: 0px 8px; | |
font-size: 12px; | |
} | |
#info table { | |
margin: 0 auto; | |
} | |
#info table, | |
#info th, | |
#info td { | |
padding: 8px; | |
margin: 0p; | |
border: 1px solid grey; | |
} | |
.hoverparent:hover .hoveronly { | |
opacity: 1; | |
} | |
.hoveronly { | |
opacity: 0; | |
} | |
.hoveronly:hover { | |
opacity: 1; | |
} | |
.tiny { | |
font-size: 7px; | |
} | |
.CodeMirror { | |
font-family: monospace; | |
} | |
.CodeMirror .CodeMirror-code pre { | |
font-family: monospace; | |
box-shadow: none; | |
} | |
.block-mention { | |
margin: 4px 8px 4px 0px; | |
cursor: pointer; | |
padding: 8px; | |
background-color: #bfccd6; | |
} | |
.block-mention:hover { | |
background-color: #a7b6c2; | |
} | |
.rm-page-ref { | |
cursor: pointer; | |
} | |
.rm-page-ref:hover { | |
text-decoration: none; | |
} | |
.rm-page-ref-tag { | |
color: #a7b6c2; | |
} | |
.rm-page-ref-brackets { | |
color: #a7b6c2; | |
} | |
.rm-page-ref-link-color { | |
color: #C02942; | |
} | |
.roam-block a { | |
color: #0476D0; | |
text-decoration: underline; | |
} | |
.rm-page-ref-namespace-color { | |
color: green; | |
} | |
.rm-block-ref { | |
padding: 4px 2px; | |
margin: -4px 0px; | |
font-size: 16px; /* RTB change: block ref's same size as others */ | |
display: inline; | |
border-bottom: 1px solid #ced9e0; | |
cursor: alias; | |
padding-left: 0px; /* RTB add: align to left */ | |
} | |
.rm-block-ref:hover { | |
background-color: #f5f8fa; | |
color: #182026; | |
text-decoration: none; | |
} | |
.rm-reference-container { | |
border-top: 1px solid #ced9e0; | |
border-bottom: 1px solid #ced9e0; | |
padding: 12px 0; | |
margin-bottom: 8px; | |
} | |
.check-container { | |
display: inline-block; | |
position: relative; | |
padding-left: 16px; /* RTB change: align checkbox for updated spacing */ | |
margin-bottom: 10px; | |
cursor: pointer; | |
font-size: 22px; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
vertical-align: bottom; | |
top: -10px; /* RTB change: align checkbox for updated spacing */ | |
} | |
/* Hide the browser's default checkbox */ | |
.check-container input { | |
position: absolute; | |
opacity: 0; | |
cursor: pointer; | |
height: 0; | |
width: 0; | |
} | |
/* Create a custom checkbox */ | |
.checkmark { | |
position: absolute; | |
top: 0px; | |
left: 0; | |
height: 12px; | |
border-radius: 2px; | |
width: 12px; | |
border: 1px solid #a7b6c2; | |
} | |
/* On mouse-over, add a grey background color */ | |
/* When the checkbox is checked, add a blue background */ | |
.check-container input:checked ~ .checkmark { | |
background-color: #137cbd; | |
border: none; | |
} | |
/* Create the checkmark/indicator (hidden when not checked) */ | |
.checkmark:after { | |
content: ""; | |
position: absolute; | |
display: none; | |
} | |
/* Show the checkmark when checked */ | |
.check-container input:checked ~ .checkmark:after { | |
display: block; | |
} | |
/* Style the checkmark/indicator */ | |
.check-container .checkmark:after { | |
left: 3.5px; | |
top: 0.25px; | |
width: 5px; | |
height: 10px; | |
border: solid white; | |
border-width: 0 2px 2px 0; | |
-webkit-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
transform: rotate(40deg) scale(0.8); | |
} | |
#roam-sidebar-logo a { | |
text-decoration: none; | |
} | |
#roam-sidebar-logo:hover { | |
background-color: #10161a; | |
} | |
.rm-find-or-create-wrapper { | |
position: relative; | |
transition: all 200ms ease-in; | |
} | |
.rm-find-or-create-wrapper .bp3-transition-container { | |
width: 100%; | |
} | |
.rm-find-or-create-wrapper .bp3-menu { | |
max-width: none; | |
max-height: 400px; | |
} | |
.rm-find-or-create-wrapper .rm-menu-item { | |
padding: 6px; | |
cursor: pointer; | |
border-radius: 2px; | |
} | |
.rm-find-or-create-wrapper .rm-menu-item .rm-search-title { | |
font-weight: bold; | |
} | |
.rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page { | |
color: #0d8050; | |
} | |
.rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item { | |
word-break: break-word; | |
color: #8a9ba8; | |
overflow-wrap: break-spaces; | |
margin-left: -20px; | |
} | |
.rm-fill { | |
width: 100%; | |
} | |
#all-pages-search { | |
background-color: #f9f9f9; | |
} | |
.rm-pages-sort-menu-item { | |
padding-right: 16px; | |
padding-left: 16px; | |
font-weight: bold; | |
} | |
.rm-pages-row-highlight { | |
background-color: #f5f8fa; | |
} | |
.rm-pages-row { | |
display: flex; | |
flex: 0 0 auto; | |
justify-content: space-between; | |
align-items: flex-start; | |
} | |
.rm-pages-row .rm-pages-sort-header { | |
display: flex; | |
flex: 0 0 auto; | |
align-items: center; | |
cursor: pointer; | |
} | |
.rm-pages-row .rm-pages-sort-header:hover { | |
text-decoration: underline; | |
} | |
.rm-pages-row .rm-pages-title-col { | |
padding: 8px 4px; | |
flex: 1 0 50%; | |
text-overflow: ellipsis; | |
} | |
.rm-pages-row .rm-pages-action-col { | |
text-align: right; | |
flex: 1 0 0; | |
padding: 8px 4px; | |
} | |
.rm-pages-row .rm-pages-col { | |
color: #0a9ba8 !important; | |
padding: 8px 4px; | |
flex: 1 0 15%; | |
} | |
.rm-reference-item { | |
margin-top: 8px; | |
margin-right: 8px; | |
flex: 1 1 100%; | |
word-break: break-word; | |
background-color: #f5f8fa; | |
padding: 4px; | |
border-radius: 8px; | |
color: #202b33; | |
font-size: 0.8em; | |
line-height: 1.2em; | |
} | |
.rm-reference-item .controls { | |
padding-top: 0; | |
} | |
.rm-reference-item .check-container{ | |
top: -8px; | |
} | |
.rm-reference-container .rm-level3{ | |
font-size: 1.1em; | |
} | |
.rm-level3 a, .rm-level3 a span:hover { | |
color: #C02942; | |
text-decoration: none !important; | |
} | |
.rm-level1 { | |
font-family: 'Avenir Next LT Pro'; /* RTB change */ | |
font-weight: 400; | |
font-size: 1.8em; | |
} | |
.rm-level1 textarea { | |
line-height: 1.2; | |
} | |
.rm-level1 .roam-block { | |
line-height: 1.2; | |
margin-top: -8px; /* RTB add */ | |
} | |
.rm-level2 { | |
font-family: 'Avenir Next LT Pro' !important; /* RTB change */ | |
font-weight: 400; | |
font-size: 1.4em; | |
} | |
/* RTB new section */ | |
.rm-level2 .roam-block { | |
margin-top: -8px; | |
} | |
.rm-level3 { | |
font-weight: 500; | |
font-size: 1.2em; | |
color: #5c7080; | |
} | |
/* RTB new section */ | |
.rm-level3 .roam-block { | |
margin-top: -5px; | |
} | |
.rm-title1 { | |
word-break: break-word; | |
font-weight: 400; | |
} | |
.rm-histogram-table { | |
width: 100%; | |
margin-left: -8px; | |
box-sizing: border-box; | |
} | |
.rm-histogram-table td { | |
vertical-align: top; | |
min-width: 18px; | |
max-width: 18px; | |
border: 1px solid transparent; | |
} | |
.rm-histogram-table td .flex-v-box { | |
border-right: 0.2px solid #48aff0; | |
justify-content: flex-start; | |
align-items: center; | |
} | |
.rm-histogram-table td .flex-v-box .bp3-popover-wrapper { | |
margin-top: 0px; | |
margin-bottom: 0px; | |
padding-bottom: 0px; | |
} | |
.rm-histogram-table td .flex-v-box .table-edited-by-view { | |
transform-origin: center; | |
background-size: cover; | |
border: 1px solid darkgray; | |
font-size: 0.7em; | |
height: 12px; | |
width: 12px; | |
margin: 0px; | |
padding: 0px; | |
border-radius: 100%; | |
background-repeat: no-repeat; | |
} | |
.slider .slider-cell { | |
border: 1px solid transparent; | |
flex: "1 0 100%"; | |
} | |
.slider .flex-v-box { | |
justify-content: flex-start; | |
align-items: center; | |
} | |
.slider .flex-v-box .bp3-popover-wrapper { | |
margin-top: 0px; | |
margin-bottom: 0px; | |
padding-bottom: 0px; | |
} | |
.slider .flex-v-box .table-edited-by-view { | |
transform-origin: center; | |
background-size: cover; | |
border: 1px solid darkgray; | |
font-size: 0.7em; | |
height: 12px; | |
width: 12px; | |
margin: 0px; | |
padding: 0px; | |
border-radius: 100%; | |
background-repeat: no-repeat; | |
} | |
.nowrap { | |
white-space: nowrap; | |
} | |
#rm-mobile-bar .rm-mobile-button { | |
flex: 1 0 0; | |
} | |
.roam-intense { | |
background-color: yellow; | |
color: #202b33; | |
margin: -2px; | |
padding: 2px; | |
} | |
.roam-highlight { | |
background-color: #fef09f; | |
color: #202b33; | |
margin: -2px; | |
padding: 2px; | |
} | |
.roam-bullet-closed { | |
background-color: #ced9e0; | |
} | |
#right-sidebar .roam-bullet-closed { | |
background-color: #a7b6c2; | |
} | |
.level1 { | |
font-family: Roboto, sans-serif; | |
font-weight: 200; | |
font-size: 40px; | |
color: #444444; | |
letter-spacing: normal; | |
/*-ms-font-feature-settings: 'ss20' 1;*/ | |
} | |
.rm-pm-editor { | |
padding: 5px; | |
min-height: 100px; | |
outline: 0 !important; | |
} | |
.rm-pm-editor h1 { | |
font-family: 'Inter', sans-serif; | |
font-weight: 400; | |
font-size: 1.8em; | |
} | |
.rm-pm-editor h1 textarea { | |
line-height: 1.2; | |
} | |
.rm-pm-editor h1 .roam-block { | |
line-height: 1.2; | |
} | |
.rm-pm-editor h2 { | |
font-family: 'Inter', sans-serif !important; | |
font-weight: 400; | |
font-size: 1.4em; | |
} | |
.rm-pm-editor h3 { | |
font-weight: 500; | |
font-size: 1.2em; | |
color: #5c7080; | |
} | |
.rm-pm-editor img { | |
max-width: 100%; | |
} | |
.rm-pm-sub-editor-wrapper { | |
padding: 2.5px; | |
margin: 2px; | |
background-color: rgba(201, 201, 207, 0.1); | |
} | |
.rm-section-item { | |
width: -webkit-max-content; | |
width: -moz-max-content; | |
width: max-content; | |
} | |
.rm-section { | |
background-color: yellow; | |
} | |
.rm-section-selected { | |
background-color: lightblue; | |
} | |
.rm-edit-view-wrapper { | |
min-width: 21px; | |
} | |
.edited-by-view { | |
flex: 0 0 21px; | |
transform-origin: center; | |
background-size: cover; | |
border: 1px solid darkgray; | |
font-size: 0.7em; | |
margin-top: 6.5px; | |
margin-right: 6px; | |
margin-left: 0px; | |
height: 15px; | |
width: 15px; | |
border-radius: 100%; | |
background-repeat: no-repeat; | |
} | |
.roam-block-container { | |
max-width: 740px; | |
border-radius: 2px; | |
} | |
.block-highlight-grey { | |
background-color: #ced9e0; | |
} | |
.block-highlight-blue { | |
background-color: #7cccff; | |
} | |
.block-highlight-yellow { | |
background-color: yellow; | |
} | |
.block-bullet-view { | |
flex: 1 1 100%; | |
margin-left: 5px; | |
} | |
.block-border-left { | |
border-left: 1px solid #bfccd6; | |
} | |
.text-align-left { | |
text-align: left; | |
} | |
.text-align-center { | |
text-align: center; | |
} | |
.text-align-right { | |
text-align: right; | |
} | |
.text-align-justify { | |
text-align: justify; | |
} | |
.roam-block { | |
min-height: calc(1.5em + 8px); | |
box-sizing: border-box; | |
white-space: pre-wrap; | |
overflow-wrap: break-word; | |
margin-top: -1px; | |
min-width: 100px; | |
width: 100%; | |
line-height: 1.5em; | |
cursor: text; | |
padding-top: 4px; | |
padding-bottom: 4px; | |
} | |
.roam-block .span-view { | |
box-sizing: border-box; | |
} | |
.rm-block-text { | |
max-width: 700px; /* RTB change: desired section width */ | |
} | |
.rm-block-input { | |
line-height: 1.5em; | |
width: 100%; | |
outline: 1px solid transparent; | |
overflow-wrap: break-spaces; | |
vertical-align: top; | |
margin-top: -1px; | |
background-color: transparent; | |
padding-top: 4px; | |
padding-bottom: 4px; | |
letter-spacing: inherit; | |
border: none; | |
resize: none; | |
} | |
.controls { | |
display: flex; | |
flex: 0 0 40px; | |
padding-top: 4px; | |
padding-left: 4px; | |
} | |
.controls .block-expand { | |
transform: scale(1); | |
transform-origin: center; | |
} | |
.controls .block-expand .rm-caret { | |
transition: all 100ms ease-in; | |
} | |
.controls .block-expand .rm-rotate-90 { | |
transform: rotate(-90deg); | |
} | |
.controls .opacity-none { | |
opacity: 0; | |
} | |
.controls .opacity-7 { | |
opacity: 0.7; | |
} | |
.controls .cursor-pointer { | |
cursor: pointer; | |
} | |
.controls .cursor-grab { | |
cursor: grab; | |
} | |
.controls .bk-light-grey { | |
background-color: #ced9e0; | |
} | |
.controls .simple-bullet-outer { | |
display: flex; | |
height: 13px; | |
width: 13px; | |
margin-top: 8.5px; /* RTB change: center bullet to match font sizing */ | |
border-radius: 50%; | |
justify-content: center; | |
align-items: center; | |
} | |
.controls .simple-bullet-outer .simple-bullet-inner { | |
border-radius: 50%; | |
width: 5px; | |
height: 5px; | |
background-color: #3d76bf; /* RTB change: blue bullet */ | |
} | |
.version-bullet { | |
background-color: #a7b6c2; | |
border: none; | |
display: flex; | |
cursor: pointer; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
padding: 0px; | |
transform: scale(0.9); | |
transform-origin: center; | |
margin-top: 2px; | |
margin-left: 0px; | |
height: 16px; | |
font-size: 9px; | |
color: white; | |
text-align: center; | |
min-height: 16px; | |
max-height: 16px; | |
min-width: 16px; | |
max-width: 16px; | |
border-radius: 16px; | |
} | |
.dnd-separator { | |
position: relative; | |
width: 100%; | |
} | |
.dnd-separator .dnd-drop-area { | |
position: absolute; | |
top: -11px; | |
height: 28px; | |
width: 100%; | |
} | |
.dnd-separator .dnd-drop-bar { | |
position: absolute; | |
z-index: 0; | |
top: -4px; | |
left: 20px; | |
width: 96%; | |
height: 4px; | |
border-radius: 10px; | |
background-color: #5c7080; | |
} | |
.rm-database { | |
background-color: #182026; | |
color: #ced9e0; | |
} | |
.rm-mentions-search-items { | |
padding: 8px; | |
} | |
.rm-mentions-search-items .rm-mentions-title { | |
font-size: 20px; | |
font-weight: lighter; | |
margin: 4px; | |
} | |
.rm-mentions-search-items .rm-mentions-search-item { | |
padding: 12px; | |
cursor: pointer; | |
background-color: #f5f8fa; | |
border: 1px solid #bfccd6; | |
} | |
.rm-mentions-search-items .rm-mentions-search-item:hover { | |
background-color: #bfccd6; | |
} | |
.block-ref-count-button { | |
font-size: 0.9em; | |
color: #5c7080 !important; | |
} | |
.rm-grey-text { | |
color: #8a9ba8; | |
} | |
.rm-red-text { | |
color: red; | |
} | |
.flex-v-box { | |
display: flex; | |
flex: 0 0 auto; | |
flex-direction: column; | |
} | |
.flex-h-box { | |
display: flex; | |
flex: 0 0 auto; | |
padding-bottom: 10px; /* RTB add: a little extra space between bullets */ | |
} | |
.flex-align-start { | |
align-items: flex-start; | |
} | |
.flex-justify-start { | |
justify-content: flex-start; | |
} | |
.tags-input { | |
display: inline-block; | |
width: 10em; | |
margin: 0 0 4px; | |
padding: 4px 6px; | |
background: none; | |
border: 0; | |
outline: 0; | |
font: inherit; | |
color: inherit; | |
text-align: left; | |
text-shadow: none; | |
} | |
.tags-input:focus { | |
/* box-shadow: 0 0 5px rgba(81, 203, 238, 1); */ | |
/* border: 2px solid white; */ | |
/* border-bottom-color: #448cca; */ | |
} | |
.tags-output { | |
display: inline-block; | |
margin-left: 4px; | |
} | |
.tags-output-item { | |
display: inline-block; | |
background-color: lightgrey; | |
cursor: pointer; | |
margin: 0 4px 4px 0; | |
padding: 4px 6px; | |
font-size: 10px; | |
border-radius: 4px; | |
} | |
.tags-output-item2 { | |
background-color: black; | |
display: inline-block; | |
text-decoration: none; | |
color: white; | |
cursor: pointer; | |
margin-left: 6px; | |
} | |
html { | |
margin: 0; | |
min-height: 100%; | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
div { | |
font-family: 'Segoe UI'; /* RTB change: desired font (bear) */ | |
font-size: 1em; | |
line-height: 1.5em; | |
margin: 0px; | |
padding: 0px; | |
} | |
textarea { | |
font-family: 'Segoe UI'; /* RTB change: desired font (bear) */ | |
font-size: 1em; | |
line-height: 1.5em; | |
margin: 0px; | |
padding: 0px; | |
} | |
.xtra { | |
transform: scale(3); | |
border-radius: 50%; | |
padding: 4px; | |
} | |
.border { | |
border: 1px solid ; | |
} | |
.display-flex { | |
display: -webkit-flex; | |
display: flex; | |
} | |
.display-inline-flex { | |
display: -webkit-inline-flex; | |
display: inline-flex; | |
} | |
.react-resizable { | |
position: relative; | |
} | |
.react-resizable-handle { | |
position: absolute; | |
width: 20px; | |
height: 20px; | |
bottom: 0; | |
right: 0; | |
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+'); | |
background-position: bottom right; | |
padding: 0 3px 3px 0; | |
background-repeat: no-repeat; | |
background-origin: content-box; | |
box-sizing: border-box; | |
cursor: se-resize; | |
} | |
.resize-card { | |
overflow-y: hidden; | |
} | |
.noselect { | |
-webkit-touch-callout: none; | |
/* iOS Safari */ | |
-webkit-user-select: none; | |
/* Safari */ | |
-khtml-user-select: none; | |
/* Konqueror HTML */ | |
-moz-user-select: none; | |
/* Firefox */ | |
-ms-user-select: none; | |
/* Internet Explorer/Edge */ | |
user-select: none; | |
/* Non-prefixed version, currently */ | |
} | |
/* RTB additions below */ | |
#roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { | |
margin-top: 3px; | |
} | |
#roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { | |
margin-top: 3px; | |
} | |
#roam-right-sidebar-content .rm-level1 .roam-block { | |
margin-top: -5px; | |
} | |
#roam-right-sidebar-content .rm-level2 .roam-block { | |
margin-top: -5px; | |
} | |
#roam-right-sidebar-content .rm-level3 .roam-block { | |
margin-top: -3px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment