Skip to content

Instantly share code, notes, and snippets.

@Arty2
Last active April 6, 2020 07:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Arty2/7fa034f662779a1cd01375e6cb83ba2e to your computer and use it in GitHub Desktop.
Save Arty2/7fa034f662779a1cd01375e6cb83ba2e to your computer and use it in GitHub Desktop.
User Style for Dropbox Paper that introduces a simple Dark theme. To be used with Stylus or similar extention.
/*
Obsolete since Dropbox Paper introduced a native Dark theme.
*/
::-moz-selection { background: #000; }
::selection { background: #000; }
body,
.ace-editor,
.hp-sidebar-container,
.folder-sidebar,
.main-header-right,
#main-header-container,
.hp-toc .hp-toc-entries {
background-color: #222;
color: #fff;
}
.folder-sidebar {
/* outline:1px solid yellow; */
border-right: 1px solid #333;
box-shadow: 20px 0 60px 0 #222;
}
.hp-header-title,
.folder-sidebar-unfiled__title,
.hp-toc .hp-toc-entry-link,
.hp-list-item,
.folder-sidebar-header__title > *,
.folder-sidebar .hp-list-item-title-text {
color: #ccc !important;
}
.folder-sidebar .hp-list-item:hover,
.folder-sidebar .folder-sidebar-highlight {
background: #333 !important;
color: #fff;
}
a:hover, a:link, a:visited {
color: #9ff
}
/* .ace-editor code.listtype-code {
background: #000;
color: #fff;
} */
.hp-toc .hp-toc-entry-current .hp-toc-entry-link,
.hp-toc .hp-toc-entry:hover .hp-toc-entry-link {
color: #fff;
}
footer .dmc-button,
.dmc-button-secondary {
background: none;
}
.hp-versions-button {
color: #fff;
opacity: 0.5;
}
.code, .inline-code,
.ace-editor .line-list-type-code,
.ace-editor code.listtype-code {
color: #ccc;
background-color: #000;
border-color: #000;
}
body.show-comments span.attrcomment, body.underline-comments span.attrcomment {
border-bottom-color: #333;
}
body.show-comments span.attrcomment:hover {
background: #333 !important;
}
.right-insert-toolbar-wrapper .insert-toolbar-overlay {
background: #333;
}
.right-insert-toolbar-wrapper .insert-toolbar-overlay::before {
background: linear-gradient(to right, rgba(255,255,255,0) 64px, #333 96px);
}
.ace-feature-due-dates .zoneId-0 > .ace-line.line-list-type-task.focused-line, .ace-feature-due-dates .zoneId-0 > .ace-line.line-list-type-taskdone.focused-line, .ace-feature-due-dates .zoneId-0 > .ace-line.line-list-type-task.ace-task-line-highlighted, .ace-feature-due-dates .zoneId-0 > .ace-line.line-list-type-taskdone.ace-task-line-highlighted {
background-color: #333;
}
/*---------
UI changes
----------*/
.hp-toc .hp-toc-entries {
/* outline: 1px solid yellow; */
}
#comments-sidebar,
.folder-sidebar,
#main-header-container,
.hp-editor-footer-buttons,
.pad-page-sidebar-open-button,
.calendar-event-button-text {
opacity: 0.05;
filter: grayscale(100%);
transition: all 0.3s;
transition-delay: 1.5s;
}
#comments-sidebar {
transition-delay: 0s;
}
#comments-sidebar:hover,
.folder-sidebar:hover,
#main-header-container:hover,
.hp-editor-footer-buttons:hover,
.pad-page-sidebar-open-button:hover,
.calendar-event-button-text:hover {
opacity: 1;
filter: grayscale(0);
transition-delay: 0s;
}
.ace-editor:not(.editor-blank) > div.ace-line::before {
opacity: 0.2;
filter: grayscale(100%);
transition: all 0.3s;
transition-delay: 1.5s;
}
.ace-editor:not(.editor-blank) > div.ace-line:hover::before {
opacity: 1;
filter: grayscale(0);
transition-delay: 0s;
}
.ace-editor ul li {
list-style: none;
}
.ace-editor ul li:before {
content: "–";
display: block;
float: left;
margin-right: 10px;
}
.ace-editor,
.ace-editor h1, .ace-editor h2, .ace-editor h3,
.ace-feature-bigtitle > .ace-editor > div:first-child,
.hp-versions-button,
.hp-toc .hp-toc-entries .dmc-button-content {
font-family: "Anonymous Pro", monospace !important;
}
.hp-versions-button.more-discoverable-sidebars {
position: absolute;
right: 0px;
height: auto;
font-size: 14px !important;
}
.hp-editor-assist-button-group {
margin-bottom: 30px;
}
.hp-toc-entry-current:before {
content: '•';
display: block;
float: left;
margin-left: -10px;
margin-top: 2px;
transition: all 0.3s;
}
/*
placeholder for presenter styles
currently, it looks broken
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment