Dropbox Paper for Writers

styles.css

/* @import url("//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"); */

#padpage {
    max-width: 49rem !important;
    width: 100% !important;
    margin-left: auto !important;
}

/* Header */
#hp-page-editor #main-header-container {
    background: transparent !important;
    box-shadow: none !important;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
}

#hp-page-editor #main-header-container .dmc-button,
#hp-page-editor .hp-sharing-connected-users-list {
    pointer-events: all;
}

#hp-page-editor .hp-header-sidebar-button-wrapper, 
#hp-page-editor .header-pad-title-and-folder {
    display: none !important;
}

#hp-page-editor .main-header-right {
    display: flex;
    align-items: center;
    padding-top: 0 !important;
}

#hp-page-editor .hp-sharing-current-user,
#hp-page-editor .hp-user-is-disconnected,
#hp-page-editor .hp-copy-link-button,
#hp-page-editor .hp-header-icon-present,
#hp-page-editor .main-header-divider,
#hp-page-editor .hp-search-combobox:not(.hp-search-focused):not(.dmc-combobox-open):not(.dmc-combobox-child-focused),
#hp-page-editor .hp-tasks-button, 
#hp-page-editor .hp-tasks-button + [class*="dropdown"],
#hp-page-editor .hp-create-pad-button {
    display: none !important;
}

#hp-page-editor .hp-sharing {
    margin: 0 !important;
}

#hp-page-editor .hp-sharing-button {
    background: none !important;
    color: var(--hp-color-button);
    height: auto !important;
    line-height: 1.5 !important;
    font-weight: normal !important;
    padding: 4px !important;
}

/* Overlay comments */

#hp-page-editor #comments-sidebar {
    left: 100% !important;
    margin-top: 0 !important;
    right: calc(50% - 50vw + 12px) !important;
}

#hp-page-editor #comments-sidebar .comments-sidebar-body {
    margin-top: 0 !important;
    max-width: 260px !important;
    position: relative !important;
}

#hp-page-editor #comments-sidebar .comment-thread {
    right: 0 !important;
    left: auto !important;
    transition: width 0.3s, opacity 0.3s;
    width: auto !important;
    min-width: 260px !important;
}

.hp-highlighting-comment #hp-page-editor #comments-sidebar .comment-thread {
    opacity: 1 !important; /* Disable dropbox's opacity and save that for hovering over the editor */
}

.hp-highlighting-comment #hp-page-editor #padeditor:hover ~ #comments-sidebar .comment-thread {
    opacity: 0.4 !important; /* see-through */
}

.hp-highlighting-comment #hp-page-editor #comments-sidebar .comment-thread::before {
    background: var(--hp-color-bg);
    content: '';
    opacity: 0.3;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 5px;
    transition: opacity 0.25s;
    z-index: 1000;
}

.hp-highlighting-comment #hp-page-editor #comments-sidebar .comment-thread.comment-thread-hover::before,
.hp-highlighting-comment #hp-page-editor #comments-sidebar .comment-thread.comment-highlight::before {
    opacity: 0;
}

#hp-page-editor #comments-sidebar .comment-thread .comment-user-avatar-wrapper {
    float: right !important;
}

.hp-highlighting-comment #hp-page-editor #comments-sidebar  .comment-thread .comment-user-avatar-wrapper {
    float: left !important;
}

/* Editor */

#padpage-container {
    margin-top: 0 !important;
    height: 100% !important;
}


#padeditor .ace-feature-bigtitle > .ace-editor {
    padding-top: 0;
}

/*.hp-add-calendar-event-menu-button,*/
#padeditor .collapsable-section-handle {
    display: none !important;
}


/* Base font */
#padeditor div.ace-line:not(.has-line-manager):not(.line-list-type-task)/*,
.url.hashtag a*/ {
    font-size: 1.375rem;
    line-height: 1.45;
}

#padeditor .ace-editor div.ace-line:not(.has-line-manager):not([data-is-title="true"]):not(.has-line-manager):not(.line-list-type-task),
#padeditor .ace-editor h1, #padeditor .ace-editor h2 {
    font-family: Georgia !important;
}

/* Headings */

#padeditor .ace-editor h1, #padeditor .ace-editor h2 {
    font-weight: bold;
    line-height: 1.2;
}

#padeditor .ace-feature-bigtitle > .ace-editor::before {
    height: 100vh;
    display: inline-block;
    content: '';
    vertical-align: middle;
}

#padeditor .ace-feature-bigtitle > .ace-editor > div:first-child {
    font-size: 2.625rem;
    font-weight: normal;
    display: inline-block;
    margin-top: 3rem;
    margin-bottom: 3rem;
    position: relative;
    vertical-align: middle;
}

    #padeditor .ace-feature-bigtitle > .ace-editor > div:first-child + .ace-line[data-is-subtitle="true"] h1 {
        margin-top: 0;
    }

#padeditor .ace-editor h1 {
    font-size: 2.625rem;
    margin-bottom: 1em;
    margin-top: 60vh;
}

@media (max-height: 240px) {
    #padeditor .ace-editor h1 {
        margin-top: 128px;
    }
}

#padeditor .ace-editor h2 {
    font-size: 1.75rem;
    margin-top: 2.625rem;
    margin-bottom: 1.75rem;
}


/* IAL IDs */

#padeditor .ace-editor .ace-line:not([class*="author-"]) + .ace-line[class*="author-"] + .ace-line,
#padeditor .ace-editor .ace-line[class*="header"] + .ace-line[class*="author-"] + .ace-line {
    position: relative;
}

#padeditor .ace-editor h1 .url.hashtag:nth-last-child(2) a,
#padeditor .ace-editor h2 .url.hashtag:nth-last-child(2) a,
#padeditor .ace-editor .ace-line:not([class*="author-"]) + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2) a,
#padeditor .ace-editor .ace-line[class*="header"] + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2) a {
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    right: calc(100% + 22px);
    left: calc(50% - 50vw + 32px); /* 32px = TOC abstracts */
    text-align: right;
}

#padeditor .ace-editor .ace-line:not([class*="author-"]) + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2) a,
#padeditor .ace-editor .ace-line[class*="header"] + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2) a {
    bottom: calc(100% + 0.15em);
}


#padeditor .ace-editor .ace-line:not([class*="author-"]) + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2) + *,
#padeditor .ace-editor .ace-line[class*="header"] + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2) + *,
#padeditor .ace-editor h1 .url.hashtag:nth-last-child(2) + *,
#padeditor .ace-editor h2 .url.hashtag:nth-last-child(2) + * {
    /* Hide and remove trailing } from flow */
    position: absolute;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

/*
#padeditor .ace-editor h1 .url.hashtag:nth-last-child(2) a {
    margin-top: 0.75rem !important;
    bottom: auto !important;
}

#padeditor .ace-editor h2 .url.hashtag:nth-last-child(2) a {
    margin-top: 0.35rem !important;
    bottom: auto !important;
}
*/

#padeditor .ace-editor h1 .url.hashtag:nth-last-child(2) a,
#padeditor .ace-editor h2 .url.hashtag:nth-last-child(2) a {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

#padeditor .ace-editor h1 .url.hashtag:nth-last-child(2) .comment-extra-inner-span,
#padeditor .ace-editor h2 .url.hashtag:nth-last-child(2) .comment-extra-inner-span {
    position: static;
}

#padeditor .ace-editor h1 .url.hashtag:nth-last-child(2)::before,
#padeditor .ace-editor h2 .url.hashtag:nth-last-child(2)::before,
#padeditor .ace-editor .ace-line:not([class*="author-"]) + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2)::before,
#padeditor .ace-editor .ace-line[class*="header"] + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2)::before {
    background: var(--hp-color-bg);
    color: transparent;
    transform: translateX(-100%);
    position: absolute;
    pointer-events: none;
}

line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2)::before,
#padeditor .ace-editor .ace-line[class*="header"] + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2)::before {
    content: '{:';
}

#padeditor .ace-editor .ace-line:not([class*="author-"]) + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2)::after,
#padeditor .ace-editor .ace-line[class*="header"] + .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2)::after {
    content: '#';
    padding-left: 0.35em;
    padding-right: 0.35em;
    left: 0;
    pointer-events: none;
    position: absolute;
}

#padeditor .ace-editor h1 .url.hashtag:nth-last-child(2)::before,
#padeditor .ace-editor h2 .url.hashtag:nth-last-child(2)::before {
    content: '{' !important;
}

#padeditor .ace-editor h1 .url.hashtag:nth-last-child(2)::after,
#padeditor .ace-editor h2 .url.hashtag:nth-last-child(2)::after {
    /* just in case */
    content: none !important;
}


/* Footnotes */
/* --------- */
/* No smart quotes in code blocks, and highlight doesn't get exported in Markdown */

#padeditor span s,
#padeditor .ace-editor .ace-line[class*="author-"] + .ace-line .url.hashtag:nth-last-child(2)::after {
    color: var(--color_stone_dark);
    background-color: var(--color_stone_sixteen);
}

#padeditor span s {
    text-decoration: initial;
}

/* Highlights */

:root:not(.paper-noir) #padeditor .ace-line span[class*="thread-"]:not(.gallery-item-wrapper) {
    background-color: #ffc41a !important;
}

#padeditor .ace-line[class*="gutter-author"]::before {
    display: none !important;
}

/* TOC */

#hp-page-editor .hp-toc {
    display: block !important;
    padding-bottom: 0 !important;
    transform: translateY(0) !important; /* I don't know why this is needed */
    top: 63px !important; /* header height */
    bottom: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
}

#hp-page-editor .hp-toc .hp-toc-entries,
#hp-page-editor .hp-toc:hover,
#hp-page-editor .hp-toc.hp-toc-active {
    width: 350px !important;
}

#hp-page-editor .hp-toc .hp-toc-entries {
    background-color: var(--hp-color-text);
    border-radius: 0 !important;
}

.hp-toc .hp-toc-entry,
.hp-toc .hp-toc-abstract-entry {
    height: 32px;
}

.hp-toc .hp-toc-abstract-entry {
    margin-left: 0;
}

.hp-toc .hp-toc-entry-link {
    color: var(--hp-color-bg);
    font-size: 16px;
}

    :root:not(.paper-noir) .hp-toc .hp-toc-entry-current .hp-toc-entry-link,
    :root:not(.paper-noir) .hp-toc .hp-toc-entry:hover .hp-toc-entry-link {
        color: var(--color_snozzberry_illo);
    }

/* History/Tools */

#hp-page-editor .insert-toolbar-wrapper,
#hp-page-editor ~ .hp-editor-footer-buttons {
    display: none !important;
}

#hp-page-editor .hp-versions-button {
    right: 14px !important;
}

.hp-lang-en #hp-page-editor .hp-versions-button .i18n-msg {
    text-indent: -4em; /* hide "Updated" text */
    display: inline-block;
    overflow: hidden;
}

.hp-lang-en #hp-page-editor .hp-versions-button .i18n-msg .time-ago {
    text-indent: -2.1em; /* trim ...ago */
    overflow: hidden;
    display: inline-block;
    direction: rtl;
    unicode-bidi: plaintext;
}

/* Popups */

.hp-popup.hp-popup-xxxlarge {
    margin: 0 !important;
    top: 0 !important;
    border-radius: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.hp-versions-popup-header {
    padding-top: 0 !important;
}

.hp-versions-popup-magic-header {
    display: none !important;
}

.hp-versions-content {
    height: calc(100% - 42px) !important;
}

.hp-popup .hp-popup-x {
    z-index: 100;
}