/* These CSS rules are included in both the outer and inner ACE iframe. */ /* This specifically targets the html block in the editor's iframe only. Otherwise, this will affect the cursor for the rest of the page. */ html.editor-ace-inner { cursor: text; } ::selection { /* This results in #ACF when document color is #FFF */ background: rgba(71, 145, 255, 0.4); } ::-moz-selection { background: rgba(71, 145, 255, 0.4); } a { cursor: pointer !important; } ul, ol, li { padding: 0; margin: 0; } /* ****************** LIST STRUCTURE ************************ * Numbered lists have a slightly different structure than bulleted lists and indented content. * LEGEND: | = margin/padding boundary * * |-#-----Numbered list. : [ 0 initial margin] [1.7 padding - includes #.] [Text content] * ---*-|--Bulleted list. : [1.5 initial margin - includes *.] [0.2 padding] [Text content] * -----|--Indented cont. : [1.5 initial margin] [0.2 padding] [Text content] * * - Numbered lists have no initial margin and all spacing is handled via the # being in the doc flow & padding. * - Bullet lists use "list-style-position: outside" so initial margin must be used to allow space for the outer bullet. * - Indented content is defined with ul as per EPL, so it follows bullet list styling (just minus the bullet itself). * * - The spacing from the start of a list to the text content (---*-|-- above) is 1.7em. * - A new list level (ex: going from list-number1 to list-number2) is always defined as moving inward 1.5em. * - Ex: (list-number7 = 9 inward + 1.7em padding) * (list-bullet7 = 9em inward + 1.5em margin for bullet + 0.2em padding) * ************** END LIST STRUCTURE ***********************/ /* Ordered lists and checklists start at 0 since their bullet is in the document stream. */ /* Each indentation adds +1.5em. */ ol.list-number1, ul.list-unchecked1, ul.list-checked1 { margin-left: 0; } ol.list-number2, ul.list-unchecked2, ul.list-checked2 { margin-left: 1.5em; } ol.list-number3, ul.list-unchecked3, ul.list-checked3 { margin-left: 3em; } ol.list-number4, ul.list-unchecked4, ul.list-checked4 { margin-left: 4.5em; } ol.list-number5, ul.list-unchecked5, ul.list-checked5 { margin-left: 6em; } ol.list-number6, ul.list-unchecked6, ul.list-checked6 { margin-left: 7.5em; } ol.list-number7, ul.list-unchecked7, ul.list-checked7 { margin-left: 9em; } ol.list-number8, ul.list-unchecked8, ul.list-checked8 { margin-left: 10.5em; } /* Unordered lists start in by 1.5em to account for outer list bullet position (not in the document stream). */ /* Each indentation adds +1.5em. */ /* Indent is implemented just like an unordered list without the bullet, so it follows the same ul styles. */ ul.list-bullet1, ul.list-indent1 { margin-left: 1.5em; } ul.list-bullet2, ul.list-indent2 { margin-left: 3em; } ul.list-bullet3, ul.list-indent3 { margin-left: 4.5em; } ul.list-bullet4, ul.list-indent4 { margin-left: 6em; } ul.list-bullet5, ul.list-indent5 { margin-left: 7.5em; } ul.list-bullet6, ul.list-indent6 { margin-left: 9em; } ul.list-bullet7, ul.list-indent7 { margin-left: 10.5em; } ul.list-bullet8, ul.list-indent8 { margin-left: 12em; } ul { list-style-type: disc; } ul.list-bullet1 { list-style-type: disc; } ul.list-bullet2 { list-style-type: circle; } ul.list-bullet3 { list-style-type: square; } ul.list-bullet4 { list-style-type: disc; } ul.list-bullet5 { list-style-type: circle; } ul.list-bullet6 { list-style-type: square; } ul.list-bullet7 { list-style-type: disc; } ul.list-bullet8 { list-style-type: circle; } ul.list-indent1 { list-style-type: none; } ul.list-indent2 { list-style-type: none; } ul.list-indent3 { list-style-type: none; } ul.list-indent4 { list-style-type: none; } ul.list-indent5 { list-style-type: none; } ul.list-indent6 { list-style-type: none; } ul.list-indent7 { list-style-type: none; } ul.list-indent8 { list-style-type: none; } /* Additional padding between the bullet and the text - to match numbered list padding. */ /* @NOTE(samoli) 2014-01-08: This rule needs to be more specific (innerdocbody included) so it doesn't trigger for li elements in the editbar */ #innerdocbody ul li, .innerdocbody ul li { padding-left: 0.2em; } /* @TODO(samoli) 2016-01-22: Should this be on content-container rather than body? */ body { margin: 0; white-space: nowrap; word-wrap: normal; } /* @TODO(samoli) 2016-01-22: Should this be on content-container rather than body? */ body.doesWrap { white-space: normal; word-wrap: break-word; /* fix for issue #1648 - firefox not wrapping long lines (without spaces) correctly */ } /* @TODO(lsantos) 2021-11-04: [newEditor] Remove this css rule after Old Editor is completely removed. */ body:not(.hidden) #version-content, body:not(.hidden) #editor-content-editable { font-size: 1.07143em; /* This is 15px if the base em is 14px */ } .version-content, .editor-content-editable { font-size: 16px; } #innerdocbody, .innerdocbody { font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.6; overflow: hidden; } /* Add 50px spacing on the sides and bottom of the "page". This is the "page" gutter. * Side padding needs to exist so that clicking in the side gutters still moves the cursor to the closest line. * Bottom padding needs to exist so user can click in empty space at the bottom of the page * and have the cursor be set to the last editable line of content. */ #innerdocbody .content-container, .innerdocbody .content-container { /* We want Note contents to be below the Title. Since the Title is NOT in the main content flow, * (it is in the outer iframe), we account for its height by adding in its em height on top of * the top padding that is above the title (2em + [padding]). */ /* @NOTE(bemerick) 2014-04-28: top-padding should exactly match collab-tracker's .dummyBucket class! */ /* Top padding here is fall-back style for older browsers that don't support calc. * 2em at a 14px base works out to 28px, so we add up 28px + 82px = 110px. */ /* @NOTE(samoli) 2016-06-15: If you change the top or bottom padding, please UPDATE the rule for * "editor-content-editable". We have to subtract the top (110px) + bottom (50px) padding from the min-height * style in order to render the correct size of the editor. */ padding: 110px 50px 50px 50px; /* Preferred top padding: 50px above title text + 50px below title text. * Since we have extra whitespace around title text and the first text line in editor, we can't just * just use 2em + 100px. Instead 2em + 82px gives approximately close to what we want * @NOTE(bemerick) 2014-05-05: calc should match in iframe_editor.css, pad-mobile, and pad .dummyBucket! * @TODO(bemerick) 2014-05-05: Merge into padding above once older versions of safari (<=6) and Chrome (<=23) stop being supported */ padding-top: calc(2em + 82px); } #editor-content-editable, .editor-content-editable { outline: none; /* Min-height ensures that this "page" layout container always fills the entire vertical space, * even when the amount of user content has less height than the total available viewport height. * This allows users to click anywhere in the empty space of the "page" below the content and have * his cursor end up flashing on the last line of editable space. */ /* We need to subtract 160px to account for the top/bottom padding since the parent container's 100% calculation * includes that padding (top 110px, bottom 50px). * @see ".innerdocbody .content-container" */ min-height: calc(100% - 160px); } /* Change cursor when hovering over images except for placeholder images indicating upload image progress */ #editor-content-editable img:not(.upload-placeholder), .editor-content-editable img:not(.upload-placeholder) { cursor: pointer; } /* @NOTE(naeims) 2013-09-04: If you reposition this iframe, e.g. change the top value, you must reposition #pageOverlay in the same way. #pageOverlay is defined in editor.css and is meant to be an overlay that is the exact same size and location as the iframe. */ .ace-inner-container { display: block; /* codemirror says it suppresses bugs */ position: relative; left: 32px; /* MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT */ /* We want 50px between this and the toolbar. -2px for two 1px borders */ top: 48px; width: 1px; /* changed programmatically */ height: 1px; /* changed programmatically */ border: 1px solid #e7e7e7; border-bottom: none; overflow: hidden; /* @NOTE(samoli) 2014-05-28: EPL used to use the scrolling=no attribute to disable scrolling. Let's not do that. */ } /* @TODO(samoli) 2016-01-22: Should this be on body? */ body.doesWrap { display: block !important; } #innerdocbody.hidden, .innerdocbody.hidden { display: none !important; } .safari div.ace-line { /* prevents the caret from disappearing on the longest line of the doc */ padding-right: 1px; } p { margin: 0; } /* Stops super long lines without being spaces such as aaaaaaaaaaaaaa*100 breaking the editor Commented out because it stops IE from being able to render the document, crazy IE bug is crazy. */ /* .ace-line{ overflow:hidden; } */ ol { list-style-type: decimal; } /* @TODO(samoli) 2016-01-22: Should this be on content-container rather than innerdocbody? */ ol > li, #innerdocbody ul li.checked, #innerdocbody ul li.unchecked, .innerdocbody ul li.checked, .innerdocbody ul li.unchecked { display: block; /* Fix for when the user presses enter on a list, Firefox and IE initially show the list on the same line */ /* * Indent the line's text content in by amount equal to (bullet# + padding). Example: * // BAD: 1. some text is here and // GOOD: 1. some text is here and // * // it has wrapped very badly yes // it has wrapped perfect. // * * @NOTE(samoli) 2014-04-10: We no longer need this padding to be a specifc amount since all of our lists are right * aligned. Originally, we had everything except roman numeral lists right aligned which made this padding crucial. * @NOTE(samoli) 2014-04-10: Leaving Brian's comments here in case we ever want to switch back to left aligning lists. * @TODO(samoli) 2014-04-10: Remove the following comments if we decide we will never go back to left aligning lists. * * @NOTE(bemerick) 2013-12-18: 2.2em is an acceptable size for the most common list lengths. It keeps text content * properly aligned for '1.', '10.', '100.', 'a.', 'mm.', etc. Supports up to 2 latin chars (702 max) or 3 digits (999). * However, bullets wider than the above, such as 'mmm.', '1000', etc. Will begin to exhibit staggered text alignment. Ex: * mmm. some text // multiple bullet lines will not have text content left-aligned to each other. * 10000. some text * that is ugly. // multiple lines of same bullet will not line up exactly with the first line of the bullet. * This is deemed an acceptable tradeoff at this time since it is rare for a note to have lists longer than this. * To fully solve this would require javascript detecting longer bullet lengths and dynamically adding more padding. * JS is too heavy / expensive for this edge-case and so static CSS is preferred to solve the 99% case. * * @NOTE(bemerick)2013-12-18: 'overflow: hidden', instead of padding, improves multi-line alignment in the same list item. * However, it cannot be used since it causes IE to apply 'hasLayout' to all list elements. * This would add an annoying/ugly "resize handle" box which is unacceptable visually and breaks list functionality. * * @NOTE(mnguyen)2015-05-28: In order for checked and unchecked lists to display propper left-padding, we have to be * fairy specific in order to override the left-padding rule used for unordered lists, which do not contain their * bullet point in the document stream */ padding-left: 1.7em; } /* Targets the numbered list 'bullet' (ex: 1.). Floats to the left with a minimum right margin for spacing between bullet and text. */ ol:before { float: left; /* * @NOTE(bemerick) 2013-12-18: This margin is generally not used since li's padding-left sets our main padding for most lists. * However, on a line with a very long bullet that exceed's li's static left padding, this ensures we still have a small amount * of padding between the bullet and the content. Ex: '10001. some text'. */ margin-right: 0.2em; /* * In order to accomplish right-alignment for all numbered lists, we change the bullet to fill fully from the left * edge of the page up to the desired indentation level of the bullet. This is done by setting: * width = (left-edge-of-page) + (indentation level). * margin-left = (width) - (extra-indent-padding). * This allows long bullet widths (ex: 'xxxxxxcviii') to extend leftward, outside the normal indent bounds of the list. */ display: inline-block; text-align: right; width: 5.75em; margin-left: -4.75em; } /* Add styling to the first item in a list */ .list-start-number1 { counter-reset: first second; } .list-start-number2 { counter-reset: second; } .list-start-number3 { counter-reset: third; } .list-start-number4 { counter-reset: fourth; } .list-start-number5 { counter-reset: fifth; } .list-start-number6 { counter-reset: sixth; } .list-start-number7 { counter-reset: seventh; } .list-start-number8 { counter-reset: eighth; } /* The behavior for incrementing and the prefix */ /* Nesting order is 1., a., i., 1., a., i., ... */ /* Numeric and latin are left-aligned, roman is right-aligned. This is standard in most text-editors. */ ol.list-number1:before { content: counter(first) '. '; counter-increment: first; } ol.list-number2:before { content: counter(second, lower-latin) '. '; counter-increment: second; } ol.list-number3:before { content: counter(third, lower-roman) '. '; counter-increment: third 1; } ol.list-number4:before { content: counter(fourth) '. '; counter-increment: fourth 1; } ol.list-number5:before { content: counter(fifth, lower-latin) '. '; counter-increment: fifth 1; } ol.list-number6:before { content: counter(sixth, lower-roman) '. '; counter-increment: sixth 1; } ol.list-number7:before { content: counter(seventh) '. '; counter-increment: seventh 1; } ol.list-number8:before { content: counter(eighth, lower-latin) '. '; counter-increment: eighth 1; } /* Hyperlinks */ .link { text-decoration: none; color: #1a74ba; } /* End Hyperlinks */ /* Annotations */ /* This rule affects all span elements that have a class starting with "annotation-" or that have "data-annotation-id" attribute */ span[class^='annotation-'], span[data-annotation-id] { background-color: #fad98d; transition: background-color 0.15s ease-in-out; } span[class^='annotation-'], span[data-annotation-id]:hover { background-color: #ffcc56; } /* End Annotations */ /* Diffs */ .unseen-change { /* This is the equivalent of #EAD9F9, or #7400D5 @ 15% */ background-color: rgba(116, 0, 213, 0.15); } span[class^='annotation-'].unseen-change, span[data-annotation-id].unseen-change { background-color: #e6a9ea; } .lineAttribMarker.unseen-change { background-color: inherit; } /* Prevent the entire list line from becoming highlighted. The reason we put the unseen-change class on the
  • even though we make the background-color transparent anyway is because it indicates that the list marker needs to be highlighted, which is the job of the children spans to do. */ li.unseen-change { background-color: transparent; } /* Numbered lists have a slightly different size default to account for larger numbers */ ol li.unseen-change:before { padding-left: 21px; margin-left: -32px; margin-right: 9px; } /* By default, diffs for list markers and the beginning of text will use the padding of the text to connect the highlights of the text and the highlights of the list markers */ li.unseen-change > span.unseen-change:first-of-type { background-color: rgba(116, 0, 213, 0.15); padding-left: 27px; margin-left: -27px; } /* This is the case where there is text content on a list where the list marker is a diff and the beginning text is not a diff. Here, the text will provide the diff for the list marker since its font size can make the highlight height vary @NOTE(mnguyen) 2017-12-20: This only makes the highlight dynamic to the first span's font-size, but there may be larger font-size later on in the list content, which this rule does not handle */ li.unseen-change > span:first-of-type:not(.unseen-change) { /* The border-left creates a highlight that goes over the bullet, while the padding-left adds space between the bullet and the content. The margin-left positions the line to have the highlight go over just the bullet */ border-left: 22px solid rgba(116, 0, 213, 0.15); margin-left: -27px; padding-left: 5px; } /* Numbered lists that are diffs but start of text is not. Just using the diff rules for the li selector isn't sufficient due to numbered lists misplacing where the :before element is vertically based on list's text font size. These rules will give a vertical highlight on the bullet based on the first span of the list */ li.ordered-list-single.unseen-change > span:first-of-type:not(.unseen-change) { border-left-width: 20px; margin-left: -27px; } li.ordered-list-double.unseen-change > span:first-of-type:not(.unseen-change) { border-left-width: 23px; margin-left: -32px; } li.ordered-list-triple.unseen-change > span:first-of-type:not(.unseen-change) { border-left-width: 32px; margin-left: -41px; } /* Numbered lists where the number and beginning of text are diffs */ ol li.unseen-change > span.unseen-change:first-of-type { padding-left: 30px; margin-left: -30px; } li.ordered-list-single.unseen-change > span.unseen-change:first-of-type { padding-left: 27px; margin-left: -27px; } li.ordered-list-double.unseen-change > span.unseen-change:first-of-type { padding-left: 32px; margin-left: -32px; } li.ordered-list-triple.unseen-change > span.unseen-change:first-of-type { padding-left: 37px; margin-left: -37px; } /* End Diffs */ /* Images */ /* @TODO(samoli) 2016-01-22: Should all the following be on content-container rather than innerdocbody? */ /* Should only apply to images that are not a part of an embed */ #innerdocbody .ace-line:not([data-embed-line='true']) img, .innerdocbody .ace-line:not([data-embed-line='true']) img { /* @NOTE(naeims) 2014-06-11: Changed from max-width to width because the outer span is display:inline-block which makes max-width not work in FF and IE. width:100% works correctly across all browsers. */ width: 100%; /* don't let the image go off screen */ cursor: default; } /* this ensures that a mouseover on a hyperlinked image shows a hand-pointer */ #innerdocbody a img, .innerdocbody a img { cursor: pointer; } span[class*='image-'] { /* NOTE(naeims) 2014-06-05: Older browsers (FF 21) and IE need this style, so the error/progress pseudo element and the IMG itself, which are both children of the SPAN stay together at the end of the line. */ display: inline-block; } /* @TODO(samoli) 2016-01-22: Should this be on content-container rather than innerdocbody? */ #innerdocbody img.upload-placeholder, .innerdocbody img.upload-placeholder { /* Need this margin on upload placeholders to match the positioning of our download progress/error placeholders. */ margin-left: 1px; } /* Need .innerdocbody .ace-line to make sure this rule overrides the 100% width rule that is applied to all non-embed images */ #innerdocbody .ace-line img[data-placeholder-type='upload-error'], #innerdocbody .ace-line img[data-placeholder-type='insert-by-file-id-error'], .innerdocbody .ace-line img[data-placeholder-type='upload-error'], .innerdocbody .ace-line img[data-placeholder-type='insert-by-file-id-error'] { width: 210px; height: 140px; } #innerdocbody .ace-line img[data-placeholder-type='progress'], .innerdocbody .ace-line img[data-placeholder-type='progress'] { width: 64px; height: 64px; } /* End Images */ /************* TABLES *************/ .content-container table { width: 100%; border: 0; border-collapse: collapse; table-layout: fixed; margin: 5px 0; } .content-container table.resizable { table-layout: fixed; } .content-container td { border: 1px solid #ccc; /* We want to the top bottom padding to come from the TD but not the left right (in order to make selection look right) */ padding: 10px 0; vertical-align: top; } .content-container .ie-table-outline td { /* Turn off borders for IE, use outline instead (to get rid of the resize grip at the table border) */ border: 0; /* Since outline doesn't collapse properly, we set a .5px outline. This way adjacent cells cause the outline to add up to 1px. The outer border is still set to .5px but the browser will round up in that case so we don't need to worry about it. */ outline: 0.5px solid #ccc; } .content-container table.resizable td div.ace-line { /* We want to use word-wrap over word-break since it will make words break like Chrome's word-break: break-word functionality, which is better across browsers. Note that using word-wrap must also be used in conjunction with table-layout: fixed for the table or else it will not work correctly. */ word-wrap: break-word; } .content-container td div[data-node-type='line'] { /* The left/right cell padding needs to be on the div to make selection extend to the entire cell. For example, if we let the handle left/right padding, and then we make a selection on the element, there is 10px of non-selected space on the left and right of each cell. */ padding: 0 10px; } .table-col-resize-dragger-container { width: 0px; height: 0px; } .table-col-resize-dragger { position: absolute; width: 5px; background-color: rgba(0, 0, 0, 0); overflow: hidden; } .table-col-resize-dragger-dragging { width: 1px; border-right: 1px dashed #aaa; } .table-col-resize-dragger-cursor { cursor: col-resize; } /************* END TABLES *************/ /************* ANNOTATIONS *************/ /* There is only ever one annoatation in the inline toolbar, so we can hide the border. The border is used to distinguish multiple annotations. */ #inlineToolbarTooltip .boxComment { border-bottom: none; } #annotationTooltip { position: absolute; z-index: 1001; /* needs to be greater than the z-index of .content-anchor-menu, which is 1000 */ } #annotationTooltip .annotationContainer { background-color: inherit; border-radius: 9px; } .boxComment { position: relative; font-size: 12px; line-height: 16px; padding: 15px 0 18px 0; margin: 0 16px; width: 280px; cursor: default; display: flex; background-color: #ffffff; } /* Adds a border between visible comments, if more than 1 is not hidden */ .boxComment:not(.hidden) ~ .boxComment:not(.hidden) { border-top: 1px solid #d3d3d3; } /* We add a pseudo :before and :after to this element to overlap the side margins. This way, when the user hovers over the side margins, they'll also hover the pseudo elements and the :hover state will apply to the boxComment element. Normally, the hover state won't be applied when hovering over margins. */ .boxComment:before, .boxComment:after { content: ''; height: 100%; width: 16px; position: absolute; top: 0; } .boxComment:before { left: -16px; } .boxComment:after { right: -16px; } .boxComment .note-head-container { position: absolute; top: 15px; } .boxComment .note-head-container, .boxComment .note-head-container .note-head { width: 32px; height: 32px; } .boxComment .container { width: inherit; } .boxComment .userName { color: #1b2831; line-height: 1.23; font-size: 13px; font-weight: bold; text-decoration: none; padding-left: 40px; /* 40px = 32px notehead width + 8px additional spacing */ width: calc( 100% - 56px ); /* 100% minus 40px for the left padding and 16px for the delete icon on the right hand side */ overflow: hidden; text-overflow: ellipsis; } .boxComment .commentDate { font-size: 11px; line-height: 1.45; color: #767676; padding-left: 40px; width: calc(100% - 40px); /* 100% minus 40px for the left padding */ } .boxComment .commentText { color: #222; line-height: 1.33; font-size: 12px; position: relative; padding-top: 16px; width: inherit; white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ } #annotationTooltip .reply-ui { border-top: 1px solid #d3d3d3; background-color: #fff; border-bottom-right-radius: 9px; border-bottom-left-radius: 9px; } #annotationTooltip .annotation-reply-button { display: flex; padding: 19px 16px; width: 100%; font-size: 12px; } #annotationTooltip .annotation-reply-button #annotation-reply-button-text { line-height: 1.33; } #annotationTooltip .annotation-reply-button:not(:hover) #annotation-reply-button-text { color: #767676; } #annotationTooltip .annotation-reply-button:not(:hover) svg path { fill: #909090; } #annotationTooltip .annotation-reply-button #annotation-reply-button-text { margin-left: 8px; } /* Delete x button */ .boxComment .deleteComment { position: absolute; right: 0; cursor: pointer; opacity: 1; display: none; width: 16px; height: 16px; top: 14px; } .boxComment .deleteComment:hover { opacity: 0.8; } /* Hide the x button when not in edit mode */ .boxComment.deleteProgress .deleteComment, body:not([data-view-state='edit']) .boxComment .deleteComment, body:not([data-view-state='edit']) .boxComment .deleteConfirmation { display: none; } /* This is the delete confirmation overlay, by default it's hidden */ .deleteConfirmation { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.98); border-radius: 3px; text-align: center; } .deleteConfirmation .buttons { margin-top: 12px; font-size: 13px; } .deleteConfirmation .cancelDeletion { margin-right: 3px; color: #222; background-color: #fff; border: solid 1px #bcbcbc; width: 30%; box-shadow: none; } .deleteConfirmation .confirmDeletion { margin-left: 3px; } .deleteConfirmation .confirmDeletion { color: #ffffff; width: 30%; box-shadow: none; } /* Only show the delete confirmation overlay when .deleteProgress is present */ .boxComment.deleteProgress .deleteConfirmation { display: block; } .boxComment:not(.deleteProgress):hover .deleteComment { display: block; } .boxComment .deleteComment svg { display: inline; } .boxComment .deleteComment:not(:hover) svg path { fill: #909090; } .boxComment .deleteConfirmation .buttons button { width: 71px; height: 32px; border-radius: 4px; } .boxComment .deleteConfirmation .buttons .cancelDeletion:hover { background-color: #f7f7f7; } .boxComment .deleteConfirmation .buttons .confirmDeletion:hover { background-color: #0074fe; } .boxComment .deleteConfirmationMessageText { font-size: 14px; color: #222; line-height: 1.43; letter-spacing: 0.3px; } .boxComment .deleteConfirmationMessage { display: block; padding: 18px 0; } /* Hide the reply button, the spinner, and the buttons in the annotation editor. We leave the annotation editor unhidden, just in case the user is in the middle of typing an annotation when a temporary reconnect happens. The reconnect will hide the submit button, so the user can't submit the annotation, but they can continue to edit it. */ body:not([data-view-state='edit']) #annotationTooltip .reply-ui, body:not([data-view-state='edit']) #annotationTooltip .spinnerIcon, body:not([data-view-state='edit']) #annotationTooltip .deleteComment, body:not([data-view-state='edit']) #annotationTooltip .annotationEditor .buttonContainer, body:not([data-view-state='edit']) #version-annotation-tooltip .reply-ui, body:not([data-view-state='edit']) #version-annotation-tooltip .spinnerIcon, body:not([data-view-state='edit']) #version-annotation-tooltip .deleteComment, body:not([data-view-state='edit']) #version-annotation-tooltip .annotationEditor .buttonContainer { display: none; } #annotationTooltip .spinnerIcon { width: 280px; /* same width as each annotation */ padding: 15px; /* same width as each annotation */ border-radius: 10px; /* to prevent clipping on rounded edges of tooltip container */ background-color: white; /* to hide the bottom edges of the tooltip chevron, if required */ background-position: 50% 50%; background-repeat: no-repeat; margin: 0 auto; /* left/right set to auto centers the icon */ } /* @NOTE(naeims) 2015-12-29: This is for bug NOTE-4551. We remove the ability to delete an annotation while the user is typing an annotation reply. Otherwise there would be a data-loss issue where the new annotation reply would get lost if there is no parent annotation to attach it to as a reply. */ #annotationTooltip.replyMode .deleteConfirmation, #annotationTooltip.replyMode .deleteComment { display: none; } /************* END ANNOTATIONS *************/ /*************** CHECKLISTS ****************/ /* Removes the default styling of lists in order to insert the pseudoselectors. */ ul.list-unchecked1, ul.list-unchecked2, ul.list-unchecked3, ul.list-unchecked4, ul.list-unchecked5, ul.list-unchecked6, ul.list-unchecked7, ul.list-unchecked8, ul.list-checked1, ul.list-checked2, ul.list-checked3, ul.list-checked4, ul.list-checked5, ul.list-checked6, ul.list-checked7, ul.list-checked8, li.unchecked, li.unchecked { list-style-type: none; } /* Place both pseudoselectors and text on 1 line. */ ul.list-unchecked1 li, ul.list-unchecked2 li, ul.list-unchecked3 li, ul.list-unchecked4 li, ul.list-unchecked5 li, ul.list-unchecked6 li, ul.list-unchecked7 li, ul.list-unchecked8 li, ul.list-checked1 li, ul.list-checked2 li, ul.list-checked3 li, ul.list-checked4 li, ul.list-checked5 li, ul.list-checked6 li, ul.list-checked7 li, ul.list-checked8 li { display: block; } /* Lightens the text next to a checked checkbox. The original font color stays intact. */ li.checked span { opacity: 0.5; } /************************* START IE/Edge checkbox Fix ******************/ /** * There is a bug in Edge and ie11 for a contenteditable span with opacity not set to 1. * When span has set opacity, the mouse click on that span will move the cursor to the end of * the contenteditable block and then move back to the position that was clicked. To work around this, * we unset the span opacity only for IE/Edge, and put the opacity on the wrapping ul instead. * We can't apply to the li because this will cause the checkbox clickable area to be really small. * We set the base of the entire ul container to 50%. Since opacity compounds, we need to set the * checkbox image to 90% opacity to preserve the overall end effect of 40% opacity on the checkbox. * @TODO(2017-05-22) dyang: Once microsoft fixes this bug, we can remove this forked logic. * @see {@link https://jira.inside-box.net/browse/NOTE-4676} * @see {@link https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12099174/} */ .msedge li.checked span, .msie11 li.checked span { opacity: 1; } .msedge ul.checked, .msie11 ul.checked { opacity: 0.5; } .msedge ul.checked:before, .msie11 ul.checked:before { opacity: 0.9; } /************************** END IE/Edge checkbox Fix *******************/ /* Content's property has whitespace character (\00a0) so that checkboxes show up in mobile. */ ul.unchecked:before, ul.checked:before { content: '\00a0'; padding-right: 19px; /* this is the highest padding we can have in order to have enough room for a single long line of text */ cursor: pointer; float: left; /* This is to ensure that the checkbox is clickable even with a diff overlay (which uses a psuedo :before element) for lists */ z-index: 1; } ul.unchecked:before, ul.checked:before { /* We need to change the position of the checkbox to take into account of the body text line-height */ position: absolute; margin-top: 2px; } ul.unchecked:before { background: url(../../img/notes-sprites_6d540df809d5263ca52d8be8734765ea.min.png); background-position: -61px -89px; opacity: 0.6; } ul.unchecked.hover:before { opacity: 1; } ul.checked:before { background: url(../../img/notes-sprites_6d540df809d5263ca52d8be8734765ea.min.png); background-position: -91px -89px; opacity: 0.4; } ul.checked.hover:before { opacity: 0.6; } /* This rule is necessary to block the cursor from changing to a hand on Read Only Mode. */ #editor-content-editable[contenteditable='false'] ul.checked:before, #editor-content-editable[contenteditable='false'] ul.unchecked:before, .editor-content-editable[contenteditable='false'] ul.checked:before, .editor-content-editable[contenteditable='false'] ul.unchecked:before { cursor: default; } /* This rule is necessary to block the cursor from changing to a hand in version history mode. */ #version-content ul.checked:before, #version-content ul.unchecked:before, .version-content ul.checked:before, .version-content ul.unchecked:before { cursor: default; } /* The hidden checkbox that we will show for print CSS because our normal checkboxes use background image, */ /* which don't print on browsers unless the user changes their browser settings */ input.checkbox-placeholder { display: none; float: left; margin-right: 10px; position: relative; top: 5px; border: 0; outline: none; box-shadow: none; margin-left: -2.1em; /* 2.1em will align checklists indents so it will appear correctly in print preview. */ } /* IE renders checkboxes differently, so adjust them for IE */ .msie input.checkbox-placeholder { margin-right: 5px; top: -3px; } /* Specific for any screens with higher resolutions. 1.3 is categorized as a retina-capable device. A @2x image is needed specifically for higher resolution screens. ....http://crypt.codemancers.com/posts/2013-11-03-image-rendering-on-hd-screens/ Different media queries necessary to target different browsers and resolution units ....http://benfrain.com/a-full-vendor-stack-for-targeting-high-resolution-retina-devices/ This is the same media query from media_queries.css Need to add this here also to properly set up pseudoselectors. */ @media only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 192dpi), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3) { ul.checked:before, ul.unchecked:before { background-size: 170px 403px !important; } ul.unchecked:before { background: url(../../img/notes-sprites@2x_be7dc6d48f2df9035855e417f7f9f98b.min.png); background-position: -61px -89px; } ul.checked:before { background: url(../../img/notes-sprites@2x_be7dc6d48f2df9035855e417f7f9f98b.min.png); background-position: -91px -89px; } } /************* END CHECKLISTS *************/ /************* START PAGE OVERLAY *************/ /* [source-list-width] */ .ace-inner-container { z-index: 1; /* needs to show above the overlay so we can still click */ width: 820px !important; /* need important because of inline styling added by js */ margin: auto; /* @NOTE(samoli) 2015-11-24: We override this for mobile devices in pad-mobile.css because we don't have a page layout in mobile */ margin-left: calc( 50% - 410px + 34px ); /* We had to specifically set the margin-left to not auto since transitions on iframes only work when position is explicitly entered (ie no auto) */ /* 410px for half of container width and 34px for half of source list width [source-list-width] */ left: 0 !important; /* need important because of inline styling added by js */ /* Change the animation duration below require change the setTimeout in sidebar.js as well */ transition: margin-left 0.2s ease-out; /* We used a 0.2s ease-out, which starts fast and decelerates over time*/ -moz-transition: margin-left 0.2s ease-out; -webkit-transition: margin-left 0.2s ease-out; -ms-transition: margin-left 0.2s ease-out; } .left-sidebar-opened .ace-inner-container, .left-sidebar-opened #centeredPage { margin-left: calc(50% - 410px); /* 410px = half of ace-inner-container width (820px) */ } /* dynamically calculate the margin-left for the ace_inner iframe in right sidebar so that content container will stay in the middle of the space on the left side of the right sidebar. 550px = (centerpage width + right sidebar width - source list width) / 2 = (820 + 340 - 68) / 2 */ /* [source-list-width] */ .right-sidebar-layout .ace-inner-container, .right-sidebar-layout #centeredPage { margin-left: -webkit-calc(50% - 546px); margin-left: calc(50% - 546px); } /* @NOTE(naeims) 2013-09-04: If you reposition #pageOverlay, e.g. change the top value, you must reposition the ace_inner iframe in the same way. This iframe is defined in iframe_editor.css. */ /* @TODO(naeims) 2013-09-04: Consider enforcing the dependency between the styles of #pageOverlay and the ace_inner iframe in code by creating a class such as .pagePosition and applying it to both the iframe and #pageOverlay and moving all positioning CSS in there. */ /* overlay that helps position a fake centered page */ #pageOverlay { position: absolute; top: 48px; /* Read NOTE above regarding ace_inner iframe before changing this value */ width: 100%; z-index: 2; } /* a fake div that acts like the document so that can it be used to anchor to the actual page. bounded by width: (editbar_centered_buttons - 10) */ /* [source-list-width] */ #centeredPage { margin-left: calc(50% - 410px + 34px); /* 410px for half of ace-inner-container and 34px for half of source list */ width: 820px; transition: margin-left 0.2s ease-out; -moz-transition: margin-left 0.2s ease-out; -webkit-transition: margin-left 0.2s ease-out; -ms-transition: margin-left 0.2s ease-out; } /* used to block just the document page and nothing else - ex. box-comments still need to be usable @NOTE - this might only be a temporary fix - given that we can find a better way to do it */ #centeredPageBlocker { top: -100%; z-index: 1; cursor: default; } /************* END PAGE OVERLAY *************/ /************* START FULL WIDTH MODE *************/ /* [source-list-width] */ .full-width-mode .ace-inner-container, .full-width-mode #centeredPage { margin-left: 98px; /* 98px = 68px for source list width and 30px for left padding for notehead */ } /* [source-list-width] */ .full-width-mode .ace-inner-container { width: calc(100% - 98px) !important; /* 98px = 68px for source list width and 30px for left padding for notehead */ } .full-width-mode #centeredPage { width: calc(100% - 98px); /* 98px = 68px for source list width and 30px for left padding for notehead */ } /* Left sidebar opened */ .full-width-mode.left-sidebar-opened .ace-inner-container { margin-left: 30px; /* 30px for left padding for noteheads */ width: calc(100% - 30px) !important; } /* [notes-list-width] [source-list-width] */ .full-width-mode.left-sidebar-opened #centeredPage { margin-left: 230px; /* 230px = 200px for half of left sidebar and 30px for left padding for notehead */ width: calc(100% - 230px); } /* Right sidebar opened */ /* [source-list-width] */ .full-width-mode.right-sidebar-layout .ace-inner-container { width: calc( 100% - 98px - 340px ) !important; /* 98px = 68px for source list width and 30px for left padding for notehead; 340px for right sidebar */ } /* Both left and right sidebar opened */ .full-width-mode.left-sidebar-opened.right-sidebar-layout .ace-inner-container { width: calc(100% - 30px - 340px) !important; /* 30px for left padding for notehead; 340px for right sidebar */ } /************* END FULL WIDTH MODE *************/ /********************** START EMBED LINE **********************/ /* Do not allow users to interact with / select an embed line at all. This ensures the user cannot edit * the line or get their cursor trapped in there (since it is a black box that the editor ignores). */ .ace-line[data-embed-line='true'] { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } /* IE 11 OVERRIDE */ /* @NOTE(kcho) 2019-08-29: Embed lines get resize handles when its children elements are clicked in IE 11 because the * embed line has dimensions (i.e. it has width or height, e.g. display: block). In IE 11, by default, the resize handle * is placed around an element with dimensions (i.e. it has width or height, e.g. display: block) when clicked. This * happens specifically for the children elements of the parent element with `contenteditable` attribute. The fix is to * change the value of `display` CSS attribute of the element to ones that do not allow to have dimensions. It was * possible to completely remove the resizer handle around the embed lines by changing the CSS attribute `display` of * the embed lines to `display: inline`. Although, the parent element will not place the resize handle around its child * element when it does not have dimensions, the normal behavior is then to look further into the child element's * children element and see if they have dimensions, and if they do, put the resize handles around them. For Box Preview * however, we were lucky in that from the beginning we decided to set `contenteditable="false"` to the embed line. This * has limited IE 11 from looking inside its children element to find any opportunity to put the handles around any * children elements with dimensions. * * For more info, see: https://jira.inside-box.net/browse/NOTE-12532 */ .msie11 .ace-line[data-embed-line='true'] { display: inline; } /** * @NOTE(kcho) 2019-08-29: Because we set `display: inline` for embed lines in IE11, the overflow is caused by this line * of CSS: `.content-container td div[data-node-type="line"] { padding: 0 10px };` The 10px of padding on each side is * causing the overflow. when it is inside the table cells. */ .msie11 [data-node-type='structure'] .box_embed_preview { width: calc(100% - 20px); } /********************** END EMBED LINE **********************/ /********************** START BOX PREVIEW CSS **********************/ .box_embed_preview { width: 100%; /* Ensures preview doesn't stretch beyond the viewport. This is needed on mobile devices, * specifically ios safari that automatically enlarges the viewport size to fit all content. */ max-width: 90vw; display: inline-block; /* Extra defensive: Ensure user can never put their cursor inside the Preview Embed */ -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; /* Relative position enables the embed-selected custom selection UI to fill over top of this */ position: relative; /* Overrides bold and italics styling if they're applied to the line */ font-weight: normal; font-style: normal; } /* When a Preview Embed is selected, a class is applied to it that creates this fake * overlay box to make the rich embed appear as though it is selected. */ .embed-selected.box_embed_preview:before { content: ''; /* Allow user's click events to pass through this, since it is just a dummy overlay */ pointer-events: none; /* Necessary to ensure the overlay stays over top of rich content. For example, * Box's Preview video player has a higher z-index that we must sit above. */ z-index: 1000; /* Position over top of the element fully and use the browser's default highlight color */ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: Highlight; opacity: 0.6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .ace-line[data-embed-line='true'] > span[class*='box_embed_preview'] { display: inline-block; width: 100%; max-width: 632px; } /* Show a larger border around the preview embed if it is annotated / diff highlighted */ .ace-line[data-embed-line='true'] > span[class^='annotation-'] .box_embed_preview, .ace-line[data-embed-line='true'] > .unseen-change .box_embed_preview { border-style: solid; border-width: 3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /* Color of border for embed with annotation */ .ace-line[data-embed-line='true'] > span[class^='annotation-'] .box_embed_preview { border-color: #fad98d; } /* Color of border for embed with annotation + diff */ .ace-line[data-embed-line='true'] > span[class^='annotation-'].unseen-change .box_embed_preview { border-color: #e6a9ea; } /* Color of border for embed with diff */ .ace-line[data-embed-line='true'] > .unseen-change .box_embed_preview { border-color: rgba(116, 0, 213, 0.15); } /* Set the border radius of the inner wrapper to be 0 since the outer container will have a radius applied */ .ace-line[data-embed-line='true'] > span[class^='annotation-'] .box-preview-wrapper, .ace-line[data-embed-line='true'] > .unseen-change .box-preview-wrapper { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } /* Hide the default diff/annotation highlight that gets applied to the line node */ .ace-line[data-embed-line='true'] > span[class^='annotation-'], .ace-line[data-embed-line='true'] > .unseen-change { background-color: transparent; } .box-preview-wrapper, .box-image-error-container { border: 1px solid #eaeaea; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 5px 9px #cbd8e533; -moz-box-shadow: 0 5px 9px #cbd8e533; box-shadow: 0 5px 9px #cbd8e533; white-space: nowrap; } /* WRAPPER HEADER */ .box-preview-wrapper-header { display: flex; align-items: center; justify-content: space-between; height: 60px; background-color: white; overflow: hidden; } .box-preview-wrapper-header-title-container { min-width: 32px; /* Width of icon */ max-width: calc(100% - 40px); /* 40px for 20px margin on left and right */ margin: 0 20px; line-height: 13px; overflow: hidden; } .box-preview-wrapper-header-title { display: flex; align-items: center; } .box-preview-wrapper-header-title-text { font-size: 13px; color: #0061d5; letter-spacing: 0.3px; text-decoration: none; margin-left: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.5em 0; /* vertical padding prevents character descenders being clipped */ } .box-preview-wrapper-options-menu-button { margin-right: 20px; } /* Hide "..." menu in Box Preview Embed header when the editor state is not "edit" */ body:not([data-view-state='edit']) .box-preview-wrapper-options-menu-button { display: none; } .box-preview-wrapper-options-menu-dropdown { position: absolute; right: 14px; top: 48px; z-index: 2; padding: 0; overflow: hidden; } /* Need innerdocbody ID to increase specificity of rule */ #innerdocbody .box-preview-wrapper-options-menu-dropdown .menu-item, .innerdocbody .box-preview-wrapper-options-menu-dropdown .menu-item, .box-preview-wrapper-who-can-see-this-container { padding-left: 15px; padding-right: 30px; text-align: left; font-size: 13px; line-height: 1.54; color: #222222; } #innerdocbody .box-preview-wrapper-options-menu-dropdown .menu-item, .innerdocbody .box-preview-wrapper-options-menu-dropdown .menu-item { padding-top: 8px; padding-bottom: 8px; } #innerdocbody .box-preview-wrapper-options-menu-dropdown .menu-item, .innerdocbody .box-preview-wrapper-options-menu-dropdown .menu-item, .box-preview-wrapper-who-can-see-this-title { display: flex; align-items: center; } #innerdocbody .box-preview-wrapper-link-options, .innerdocbody .box-preview-wrapper-link-options { padding: 8px 0; } .box-preview-wrapper-who-can-see-this-container { padding-top: 19px; padding-bottom: 20px; border-top: 1px solid #cccccc; background-color: #fafafa; } .box-preview-wrapper-who-can-see-this-icon { margin-right: 10px; } .box-preview-wrapper-who-can-see-this-title { letter-spacing: 0.09px; } .box-preview-wrapper-who-can-see-this-message { font-size: 12px; line-height: 1.33; letter-spacing: 0.08px; color: #767676; margin-top: 2px; margin-left: 26px; /* 26px = 16px box-preview-wrapper-who-can-see-this-icon width + 10px box-preview-wrapper-who-can-see-this-icon margin-right */ max-width: 176px; white-space: normal; } /* WRAPPER CONTENT */ .box-preview-wrapper-content-container { position: relative; width: calc(100% - 20px - 20px); margin: 0 20px 20px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; } .box-preview-wrapper-content, .box-preview-wrapper-representation-container { height: 330px; width: 100%; } .box-preview-wrapper-representation-container { position: relative; display: flex; justify-content: center; align-items: center; background-color: #f5f5f5; cursor: pointer; } /* Static File Image Representation */ #editor-content-editable img.box-preview-wrapper-representation-image, #version-content img.box-preview-wrapper-representation-image, .editor-content-editable img.box-preview-wrapper-representation-image, .version-content img.box-preview-wrapper-representation-image { height: 332px; /* H of 330px auto-scales W of the img to 587px. Increasing H by 2px will ensure that the img will take 100% (590px) of the container, allowing border radiuses to be filled fully. */ max-width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } /* File Type Icon Representation */ #editor-content-editable span.box-preview-wrapper-representation-image svg, #version-content span.box-preview-wrapper-representation-image svg, .editor-content-editable span.box-preview-wrapper-representation-image svg, .version-content span.box-preview-wrapper-representation-image svg { height: 330px; width: 160px; max-width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #editor-content-editable .box-preview-wrapper-representation-click-to-load, #version-content .box-preview-wrapper-representation-click-to-load, .editor-content-editable .box-preview-wrapper-representation-click-to-load, .version-content .box-preview-wrapper-representation-click-to-load { display: inline-block; max-width: calc(100% - 60px); height: auto; padding: 10px; background-color: #222222; opacity: 0; color: #ffffff; text-align: center; vertical-align: middle; font-size: 13px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 10px; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; z-index: 1; } #editor-content-editable .box-preview-wrapper-representation-container:hover .box-preview-wrapper-representation-click-to-load, #version-content .box-preview-wrapper-representation-container:hover .box-preview-wrapper-representation-click-to-load, .editor-content-editable .box-preview-wrapper-representation-container:hover .box-preview-wrapper-representation-click-to-load, .version-content .box-preview-wrapper-representation-container:hover .box-preview-wrapper-representation-click-to-load { opacity: 0.9; } /* LOADING STATES */ .box-preview-wrapper-header-title-loading-state, .box-preview-wrapper-minified-loading-state, .box-preview-wrapper-enlarged-loading-state { animation: box-preview-loading-pulse 0.65s infinite alternate; -webkit-animation: box-preview-loading-pulse 0.65s infinite alternate; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /* The preview embed loading pulse is special because it has to pulse between two different colors. Our normal pulse * animation used in other places (like left sidebar) will pulse between two different opacity values (100% and 50%). * The reason this won't work for preview embed is because while the loading state is shown, the full preview is * loading behind it. If the animation pulses between 100% and 50% opacity, it will reveal the preview underneath. So, * to mimic the same effect of pulsing between 100% and 50% opacity but using solid colors, we simply calculate the * color with RGB values that are halfway between 100% opacity (#f3f3f3 or rgb(243,243,243)) and 0% opacity (white or * rgb(255,255,255) which is rgb(249,249,249) or #f9f9f9 */ @keyframes box-preview-loading-pulse { 0% { background-color: #f3f3f3; } 100% { background-color: #f9f9f9; } } .box-preview-wrapper-header-title-loading-state { max-width: 326px; height: 12px; } .box-preview-wrapper-representation.is-loading { display: none; } /* When the preview is loading, we set the opacity to 0 in order to visually hide it (the preview element will still * exist in the layout of the DOM). We also absolutely position it behind the loading component with a z-index -1. */ .box-preview-wrapper-content.is-loading { opacity: 0; position: absolute; top: 0; z-index: -1; } .box-preview-wrapper-minified-loading-state { height: 36px; } .box-preview-wrapper-enlarged-loading-state, .box-preview-wrapper-enlarged-no-preview-error, .box-preview-wrapper-enlarged-no-file-info-error { height: 330px; } /* ERROR STATES */ .box-preview-wrapper-error { box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 10px; text-align: center; } .box-preview-wrapper-error svg { max-width: 100%; } .box-preview-wrapper-error > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .box-preview-wrapper-minified-no-preview-error, .box-preview-wrapper-enlarged-no-preview-error { background-color: #f3f3f3; } .box-preview-wrapper-minified-no-preview-error { height: 36px; } .box-preview-wrapper-minified-no-file-info-error { height: 80px; margin-top: 20px; } .box-preview-wrapper-preview-load-error-message, .box-image-error-message { font-size: 13px; letter-spacing: 0.3px; color: #767676; } .box-preview-wrapper-preview-load-error-message-try-again { color: #0061d5; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .box-preview-wrapper-preview-load-error-message-try-again.is-enlarged { display: block; text-align: center; } .box-preview-wrapper-error.box-preview-wrapper-enlarged-no-preview-error, .box-preview-wrapper-error.box-preview-wrapper-enlarged-no-file-info-error { flex-direction: column; } /********************** END BOX PREVIEW CSS **********************/ /********************** START EMPTY STATE CSS **********************/ /** * @NOTE(kcho) 2020-06-16: This is the ghost text (placeholder text for editor) implementation. * @see: etherpad-lite/src/client/static/js/dom-line.js->writeHTML() for more details. */ #innerdocbody:not(.is-composition-mode) #editor-content-editable:not([contenteditable='false']) > .ace-line:only-child > [data-placeholder]:only-child:before { content: attr(data-placeholder); position: absolute; color: #909090; background-color: transparent; } /********************** END EMPTY STATE CSS **********************/ *, html, body, p { margin: 0; padding: 0; } .clear { clear: both; } html { width: 100%; } body { overflow: hidden; } body, textarea { font-size: 14px; /* This font style is applying to our editing surface */ font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Default editor text color is #222222 so we set #222222 here too to match. */ color: #222222; /* $bdl-gray */ /* * This is the prefered line spacing when working with "em." * This is a multiplier not a "px" or "em." Multipliers are preferred on line-height so that they apply * correctly to each child element, rather than just the parent. * http://stackoverflow.com/questions/15132671/ems-for-line-height */ line-height: 1.45; } .ace-inner-container { position: absolute; border: none; top: 10px; } textarea { white-space: pre-wrap; overflow-y: auto; overflow-x: hidden; word-wrap: break-word; /* Visually hide the ugly IE scrollbar, but still allow scrolling with mouse */ -ms-overflow-style: none; } /* IE compounds br height with wrapping magicdom div height causing 2x line heights when contenteditable is true. * This prevents IE lines from being too large by suppressing br size (brings it in line with other browsers) */ .msie br { display: none; } /* And the this rule returns them to the correct size when contenteditable is false. (fixing NOTE-1066) */ .msie[contenteditable='false'] br { display: block; } a img { border: 0; } .toolbar ul.notes-menu, .toolbar ul.menu_left, .toolbar ul.menu_right, .toolbar .sub-menu ul { position: relative; list-style: none; z-index: 2; float: left; } /* Ensure that the icons in the Editbar are vertically aligned with the SVG icons */ .toolbar ul.menu_left { display: flex; align-items: center; height: 100%; } .toolbar ul.menu_left li:last-child { margin-right: 0; } .toolbar ul.menu_left li:first-child { margin-left: 0; } #editbar-centered-menu > ul { height: 24px; } .toolbar ul.menu_right { float: right; padding-right: 0; top: 2px; } .toolbar ul.menu_right { padding-right: 20px; } .toolbar ul.notes-menu li { float: left; margin-right: 8px; } .toolbar ul.menu_left li { float: left; margin: 0 2px; } /* For the menu floating to the right, we want it to be flush against the edge of the "page". * So, we remove the right margin on the last li (since it normally has 10 margin-right). */ .toolbar ul.menu_right li:last-child { margin-right: 0; } .toolbar ul li.separator { background: #e8e8e8; width: 1px; height: 16px; /* @NOTE(bemerick) 2014-04-30: Separator is a total width of 16px. * 3px padding on both sides + 10px margin right */ margin: 0 4px; } .pad-container-wrapper { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; /* Required for safari fixes RTL */ bottom: 0px; padding: 0; margin: 0; z-index: 1; -webkit-transition: left 0.2s ease-out, width 0.2s ease-out; transition: left 0.2s ease-out, width 0.2s ease-out; } /* [notes-list-width] [source-list-width] */ .left-sidebar-opened .pad-container-wrapper, .left-sidebar-opened .editor-loading-view-container { width: calc(100% - 400px); /* 400px for left sidebar width */ left: 400px; /* Required for safari fixes RTL */ } /* @NOTE(lsantos) 2023-01-31: 🔨 Unfortunately we needed to write this ugly css class to allow loading-view be responsive with version-history open */ .left-sidebar-opened.right-sidebar-version-history .editor-loading-view-container { width: calc(100% - 400px - 340px); /* 400px for left sidebar width 340px version-history */ left: 400px; /* Required for safari fixes RTL */ } .editor-scroll-container { position: absolute; /* This needs to be matching with the height of the toolbar 64px + 1px for the border bottom */ top: 65px; bottom: 0; right: 0; left: 0; overflow-y: scroll; overflow-x: hidden; /* bg color needed so that loading in other contexts (ex: Webapp preview) has a white bg instead of * transparent. Our loading spinner and messaging has a white bg so we want that to blend in. */ background-color: #fff; /* @NOTE(bemerick) 2018-03-20: This is deliberate & puts the editor container into its own * "stacking context". Without this, Chrome 65 improperly paints the contents outside the container. * While Chrome has "fixed" this in upcoming version of Chrome, we'll keep this here as: * 1. Chrome is still making changes to their core scroll logic, so we're more future proof this way, * 2. It's useful in general to have a z-index so we can understand its z pos relative to other app UI. * @see https://jira.inside-box.net/browse/NOTE-9711 */ z-index: 0; } /* @NOTE(samoli) 2016-03-01: This improves the gross top gray area in when the user accesses a note inside Box Embed. Basically, we hide the toolbar during preview mode (and Box Embed mode) but we still move the editor container down by 61px which causes a weird gray area to show up on the top. Making this 40px makes it look a lot nicer. */ .box-preview .editor-scroll-container { top: 40px; } #reconnect_form button { font-size: 12pt; padding: 5px; } .toolbar #overlay { z-index: 500; background-repeat: repeat-both; width: calc(100% - 80px); margin-left: 80px; position: absolute; height: inherit; left: 0; top: 0; } /* [notes-list-width] [source-list-width] */ .left-sidebar-opened .toolbar #overlay { width: calc(100% - 400px - 100px); /* 400px = left sidebar width */ margin-left: calc(400px + 70px); } * html #overlay { /* for IE 6+ */ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; filter: alpha(opacity=100); opacity: 1; /* in case this is looked at */ background-image: none; background-repeat: no-repeat; /* scale the image */ } #focusprotector { z-index: 100; position: absolute; bottom: 0px; top: 0px; left: 0px; right: 0px; background-color: white; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)'; filter: alpha(opacity=1); opacity: 0.01; display: none; } .rtl { direction: RTL; } /* fix for misaligned checkboxes */ input[type='checkbox'] { vertical-align: -1px; } .right { float: right; } /************* START GENERAL UI COMPONENTS *************/ /* Components that are useful anywhere in the UI: * - Re-usable CSS classes (ex: horizontal flip any componenet) * - Re-usable views (ex: loading spinner) */ /* Flips/Mirrors a component horizontally. */ .flip-horizontal { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); } /* Main animated loading "spinner." Lines animate left-to-right. * You can flip this animation to animate from right-to-left for a * "back in time" loading effect (Version History uses this). */ .loading-logo-spinner { position: absolute; top: 45%; left: calc(50% - 30px); /* subtract half of the width of the spinner to center it */ width: 60px; } /************ START HAMBURGER MENU ************/ .hamburger-menu { cursor: pointer; height: 15px; width: 16px; position: absolute; } .hamburger-menu-bar { background: #666666; border-radius: 3px; transition: all 0.3s ease; height: 1px; position: absolute; } .toggle-left-sidebar-button { display: inline-block; height: 14px; width: 14px; padding: 4px; margin-top: 2px; margin-left: 9px; } .toggle-left-sidebar-button:hover .hamburger-menu-bar { background: #222222; /* $bdl-gray */ } .top-hamburger-menu-bar.hamburger-menu-bar { transform-origin: 0% 0%; top: 0; width: 16px; } .middle-hamburger-menu-bar.hamburger-menu-bar { bottom: 7px; width: 16px; } .bottom-hamburger-menu-bar.hamburger-menu-bar { transform-origin: 0% 100%; bottom: 0; width: 16px; } .toggle-left-sidebar-button.active .top-hamburger-menu-bar.hamburger-menu-bar { transform: rotate(45deg) translate(6px, 4px); width: 10px; } .toggle-left-sidebar-button.active .bottom-hamburger-menu-bar.hamburger-menu-bar { transform: rotate(-45deg) translate(6px, -4px); width: 10px; } .toggle-left-sidebar-button.active .middle-hamburger-menu-bar.hamburger-menu-bar { transform: scaleX(0); transform-origin: center; } /************ END HAMBURGER MENU ************/ /************* END GENERAL UI COMPONENTS *************/ /************* TABLES *************/ #menu-table .menu-item { text-align: center; } #menu-table .menu-item input { width: 20px; border-radius: 0px; padding: 2px 0px; margin-left: 3px; text-align: center; } /************* END TABLES *************/ /***************** START SIDEBAR *****************/ .sidebar { position: fixed; /* This is to account for the toolbar height. If toolbar height change, this * needs to be changed as well. **/ top: 65px; /* list height = sidebar height - toolbar height = 100% - 65px * We need to dynamically calculate it like this. Otherwise the last item * in the list may be hidden if we just use 100% because title or toolbar consumes * 65px out of the total 100% height of the sidebar. **/ height: -webkit-calc(100% - 65px); height: calc(100% - 65px); width: 340px; z-index: 1; background: #fbfbfb; border-left: 1px solid #e7e7e7; /* Scrolling the sidebar will scroll its list and title */ overflow: auto; /* Changing the animation duration here require to change the constant SIDEBAR_ANIMATION_DURATION in sidebar.js as well */ transition: right 0.2s ease-out; -moz-transition: right 0.2s ease-out; -webkit-transition: right 0.2s ease-out; -ms-transition: right 0.2s ease-out; } .sidebar.right { right: 0; } .sidebar.no-scroll { overflow: hidden; } .sidebar-title.toolbar { height: 50px; color: #ffffff; background-color: #1a74ba; border-left: 1px solid #1a74ba; /* This is used to vertical align title and close button in the title container*/ line-height: 60px; } .sidebar-title .title-text { display: inline-block; float: left; position: relative; left: 16px; font-size: 0.93em; /*14px * 0.93 = 13px*/ } .sidebar-title .sidebar-close-container { display: inline-block; float: right; position: relative; right: 16px; height: 50px; line-height: 50px; } button.sidebar-close { padding: 0px; /* required for IE */ cursor: pointer; background-color: #1a74ba; } #use-template-button-viewbar { color: #0061d5; max-width: 200px; margin-right: 20px; overflow: hidden; text-overflow: ellipsis; } #use-template-button-viewbar #use-template-icon { position: relative; top: 1px; margin-right: 1px; fill: currentColor; } #editbar-flush-right button.sidebar-control-button.open, #viewbarRight button.sidebar-control-button.open { background-color: #f3f3f3; } #editbar-flush-right button.sidebar-control-button span.buttonicon, #viewbarRight button.sidebar-control-button span.buttonicon { height: 20px; width: 22px; line-height: 20px; vertical-align: middle; } #box-share-button-text { height: 20px; vertical-align: middle; padding: 0; font-size: 14px; font-weight: bold; line-height: 1.43; letter-spacing: 0.32px; } #editbar-flush-right > button, #viewbarRight > button { padding: 6px 10px; margin: 0; } #viewbarRight .box-comments-button, #viewbarRight .box-options-button, #editbar-flush-right .box-comments-button, #editbar-flush-right .box-options-button { height: 40px; width: 40px; margin: 8px 0 8px 12px; border: 1px solid #bcbcbc; border-radius: 6px; display: flex; align-items: center; justify-content: space-around; padding: 0; position: relative; /* fix for ie 11 to center the icon */ overflow: visible; /* fix for ie 11 for showing the comment badge */ font-size: 1em; } #viewbarRight .box-comments-button:hover, #viewbarRight .box-options-button:hover, #editbar-flush-right .box-comments-button:hover, #editbar-flush-right .box-options-button:hover { background: #f7f7f7; } #viewbarRight .box-comments-button.open, #editbar-flush-right .box-comments-button.open { background: #e7e7e7; } /* Fix for ie 11 to center the comment button icon */ #viewbarRight .buttonicon-speech-balloon, #editbar-flush-right .buttonicon-speech-balloon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* "Open" comments button state should be hidden by default */ .box-comments-button .icon-comments-default-open, .box-comments-button .icon-comments-blank-open { display: none; } /* Hide default comments state when comments sidebar is opened */ .box-comments-button.open .icon-comments-default, .box-comments-button.open .icon-comments-blank { display: none; } /* Show "open" comments button state when comments sidebar is opened */ .box-comments-button.open .icon-comments-default-open, .box-comments-button.open .icon-comments-blank-open { display: flex; } .icon-comments-count { position: relative; } .icon-comments-blank-open svg * { fill: #0061d5; } /* Fix for the comment button SVG icon color */ #viewbarRight .buttonicon-speech-balloon *, #editbar-flush-right .buttonicon-speech-balloon * { fill: #222222; /* $bdl-gray */ } .box-comments-button-count { position: absolute; top: 0; left: 0; width: 22px; height: 20px; line-height: 18px; font-size: 11px; font-weight: bold; color: #4e4e4e; } .box-comments-button.open .box-comments-button-count { color: #fff; } .box-comments-button-count.comments-max-count { font-size: 9px; } #viewbarRight .buttonicon-ellipsis, #editbar-flush-right .buttonicon-ellipsis { height: 20px; } .sidebar-list > li { background: #fbfbfb; font-size: 0.93em; /*14px * 0.93 = 13px*/ list-style-type: none; } /****************** END SIDEBAR ******************/ /************* START VERSION HISTORY *************/ #version-history-view-message { display: inline-block; color: #dbdbdb; /* Set it same as the sidebar-control-button margin-top setting so that both are aligned */ margin-top: 0; } #version-history-list > li { cursor: pointer; } #version-history-list > li:first-child { padding-top: 12px; } #version-history-list > li:hover { background-color: #e5f6ff; } #version-history-list .version-entry-selected { background: #f3f3f3; } .version-entry-timestamp { font-weight: bold; text-align: left; width: 160px; overflow: hidden; text-overflow: ellipsis; padding-left: 22px; float: left; color: #494949; cursor: pointer; } .version-entry-top { height: 16px; line-height: 16px; display: block; padding-top: 16px; } .version-entry-author-list { display: block; padding: 16px 0 16px 22px; } .version-entry-author { /* Using table display to enforce vertical alignment. See http://css-tricks.com/centering-in-the-unknown/ * @TODO(ychen) 2015-1-12: explore flex layout solution. */ display: table; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; color: #6a6a6a; font-size: 0.92em; /*13px * 0.92 = 12px*/ height: 20px; top: 0px; padding-bottom: 8px; } .version-entry-author .note-head-container, .version-entry-author .note-head-container .note-head, .version-entry-author .user-full-name, .version-entry-author .user-initials { height: 20px; line-height: 20px; top: 0px; /* Using table-cell display here alongside the table display for version-entry-author to enforce vertical alignment. */ display: table-cell; vertical-align: middle; } .version-entry-author .note-head-container, .version-entry-author .note-head-container .note-head, .version-entry-author .user-initials { width: 20px; margin: 0; font-size: 0.9em; border-radius: 10px; box-shadow: 0px 0px 0px; /* somehow it is not verticially aligned with the user-initials font Helvetica; */ font-family: inherit; cursor: pointer; } .version-entry-author .user-full-name { padding-left: 10px; } .version-entry-more-authors .user-full-name { color: #1a74ba; } .version-entry-more-authors .user-full-name:hover { color: #003e6e; } #version-content-error, #version-history-spinner, .version-content-error, .version-history-spinner { text-align: center; position: relative; width: 360px; /* Normal content-container is 2em + 60px. Add extra 60px here */ top: 60px; /* center align the container */ margin: auto; cursor: default; } .version-content-error-string { font-size: 1em; color: #333333; } .version-content-error-string-container { padding: 5px; } .version-history-loading-spinner-container { width: 100%; height: 100%; } .version-entry-right-text { text-align: right; float: left; color: #6a6a6a; cursor: pointer; /* Following settings are used to avoid the overlow issue when the text is too long * (e.g., translated text in certain language) */ width: 128px; overflow: hidden; text-overflow: ellipsis; } .version-restore-button { padding-top: 0px; padding-bottom: 0px; /* This overrides the default button setting of 0.93 em, which is 14px * 0.93 * 0.93 = ~12px. 14px * 0.93 * 1 = ~13px */ font-size: 1em; background-color: transparent; color: #1a74ba; font-weight: bold; display: none; } /* Following CSS rules are set to make sure users don't feel like they can take action in the * loading state when entering version history mode */ /* Hide the restore button in loading/error state or if note is currently not connected*/ body:not([data-banner-type='connected']):not([data-banner-type='reconnected']) .version-restore-button, #version-history-sidebar:not([data-version-history-state='show']) .version-restore-button { display: none; } /* Don't change the background color in enter loading state or if note is currently not connected when hover over */ body:not([data-banner-type='connected']):not([data-banner-type='reconnected']) #version-history-list li:hover, #version-history-sidebar[data-version-history-state='enter-loading'] #version-history-list li:hover { background-color: #ffffff; } /* Don't change the cursor to pointer in enter loading state or if note is currently not connected*/ body:not([data-banner-type='connected']):not([data-banner-type='reconnected']) #version-history-list li, body:not([data-banner-type='connected']):not([data-banner-type='reconnected']) .version-entry-timestamp, #version-history-sidebar[data-version-history-state='enter-loading'] #version-history-list li, #version-history-sidebar[data-version-history-state='enter-loading'] .version-entry-timestamp { cursor: default; } #version-history-sidebar.open { right: 0px; } #version-history-sidebar.closed { right: -340px; } .version-restore-button:hover { color: #003e6e; } .version-restore-button .buttonicon { margin-bottom: 3px; margin-right: 10px; } .version-restore-button-text { cursor: pointer; } .version-entry-selected .version-restore-button { display: inline-block; } /************* END VERSION HISTORY *************/ /************* START SHARE SIDEBAR *************/ #share-sidebar { z-index: 2; color: #333333; } #share-sidebar p { font-size: 13px; color: #999999; white-space: normal; } /* share sidebar content */ #share-sidebar .sidebar-content { height: calc(100% - 50px); background-color: #ffffff; border-left: 1px solid #dbdbdb; padding: 0 25px; } #share-sidebar section { padding: 20px 0; } #share-sidebar section > *:not(:last-child), #share-sidebar input { margin-bottom: 10px; } #share-sidebar .hr { height: 0px; border-bottom: 1px solid #dbdbdb; margin: 0 -25px; } #share-sidebar-box-shared-link { height: 86px; } #share-sidebar-collaborators-container { height: calc(100% - 86px); } /* list */ ul#share-sidebar-collaborators { position: relative; height: calc(100% - 180px); overflow: auto; } ul#share-sidebar-collaborators li { list-style: none; height: 40px; width: 100%; line-height: 40px; background: #ffffff; } ul#share-sidebar-collaborators li span { display: inline-block; line-height: 40px; } ul#share-sidebar-collaborators li .collaborator-head { margin-right: 5px; width: 28px; height: 28px; } ul#share-sidebar-collaborators li .collaborator-name { overflow: hidden; text-overflow: clip; } ul#share-sidebar-collaborators li .collaborator-last-access, ul#share-sidebar-collaborators li .collaborator-status { float: right; } ul#share-sidebar-collaborators li .collaborator-status.active { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background-color: #85cf40; } /************** END SHARE SIDEBAR **************/ /************** Start of Content Anchor Menu ************/ /* Content Anchor Menu is a context menu which attach to specific content DOM e.g. table, image */ /* hide content anchor menu if not in edit mode */ body:not([data-view-state='edit']) .content-anchor-menu { display: none; } .content-anchor-menu { position: absolute; background-color: #000; opacity: 0.8; z-index: 1000; border: 1px solid #000; transition: opacity 0.1s, margin-left 0.2s ease-out; -webkit-transition: opacity 0.1s, margin-left 0.2s ease-out; } /* @NOTE(mnguyen) 2016-08-09: The reasoning behind margin-left versus left is that the * element associated with .content-anchor-menu has it's inline left attr set through javascript. * If we want to change this in the future, then take a look at content-anchor-menu.js and table-stalker-menu.js */ /* [notes-list-width] [source-list-width] */ .left-sidebar-opened .content-anchor-menu { margin-left: 200px; /* half of left-sidebar width */ } .content-anchor-menu.float-top { position: fixed; /* Make sure we set important on "top" here because the top position of non-float content anchor menu */ /* is set on style attribute of DOM, so when we float the menu we need make sure this top override */ /* the value on style attribute */ /* Since we only scroll the .pad, we have to add 60px for the toolbar and 1 pixel for it's border */ top: 65px !important; } .content-anchor-menu li { display: inline-block; margin: 0px; padding: 7px; cursor: pointer; } .content-anchor-menu li.split-item { border-right: 1px solid #222222; /* $bdl-gray */ padding-right: 13px; } .content-anchor-menu li .buttonicon { opacity: 1; } .content-anchor-menu li:hover .buttonicon { opacity: 0.8; } .content-anchor-menu.top-radius { border-top-left-radius: 3px; border-top-right-radius: 3px; } .content-anchor-menu.bottom-radius { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } /*************** End of Content Anchor Menu **********/ /*************** Begin Toolbar Extension styles ***********/ /*************** End Toolbar Extension styles ***********/ /*************** Carousel Styles *******************/ .carousel-wrapper { /* Z-index at the level for overlays */ z-index: 6; overflow: hidden; display: inline-block; } .carousel-viewer { position: relative; } .carousel-slides { position: absolute; left: 0px; } .carousel-slides li { display: block; float: left; position: relative; opacity: 0; } .carousel-slides iframe { position: relative; border: 0; width: 100%; height: 100%; } .carousel-slides li.active { opacity: 1; } .carousel-slides.transition-fade li { /* this set of styles allows for all the items to be stack on top of each other * so they can have a fadeIn effect */ position: absolute; top: 0; left: 0; } .carousel-captions-container { display: block; width: auto; margin: auto; position: relative; } .carousel-captions-container span { display: inline-block; opacity: 0; font-size: 2em; color: #ffffff; transition: opacity 250ms ease; position: absolute; margin: 0 auto; left: 0; right: 0; width: 50%; white-space: normal; } .carousel-captions-container span.active { opacity: 1; } .transition-slide, .transition-slide-fade { transition: left 1s ease; -webkit-transition: left 1s ease; } .transition-slide li { /* overrides the default opacity: 0 from the default transition */ opacity: 1; } .transition-fade li { transition: opacity 1s ease; -webkit-transition: opacity 1s ease; } .transition-slide-fade li { transition: opacity 750ms; -webkit-transition: opacity 750ms; } .pagination { margin-top: 20px; width: 100%; opacity: 0.8; } .pagination li { display: inline-block; cursor: pointer; width: 20px; } .pagination span { display: inline-block; width: 7px; height: 7px; margin: 0px 3px; border: 1px solid #ffffff; border-radius: 7px; background-color: transparent; transition: background-color 125ms ease-out; } .pagination li.active span, .pagination li:hover span { background-color: #ffffff; } /*************** End Carousel Styles ****************/ #lightbox { /* The lightbox should be above the highest element in the editor view, which is the editbar dropdown menu */ z-index: 101; position: relative; } .lightbox-overlay { z-index: 105; background-color: rgba(59, 59, 59, 0.95); opacity: 0; transition: opacity 250ms ease; position: fixed; height: 100%; width: 100%; } .lightbox-content { /* This should be at least 1 index ahead of the lightbox overlay so we can see the content over it. */ z-index: 106; opacity: 0; transition: opacity 250ms ease; -webkit-transition: opacity 250ms ease; position: fixed; height: 100%; width: 100%; text-align: center; /* We use table to vertically align child elements inside this div */ display: table; table-layout: fixed; } .active .lightbox-overlay { opacity: 1; } .active .lightbox-overlay-gradient { background: linear-gradient(-20deg, #4c6fc1 0%, #54904f 100%); } .active .lightbox-content { opacity: 1; } /* Asteroids styles */ .asteroids { color: #555; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; cursor: default; } .asteroids .lightbox-overlay { background-color: rgba(255, 255, 255, 0.85); z-index: 1001; } .asteroids .lightbox-content { z-index: 1002; } .asteroids-logo { width: 236px; height: 48px; background-image: url(../../img/asteroids_header_logo_b911b50374ec9e79b9e23870d76e926d.min.svg); background-repeat: no-repeat; } .asteroids-instructions { color: #777; z-index: 1002; position: absolute; left: 0; right: 0; text-align: center; opacity: 1; transition: opacity 0.2s; } .asteroids-instructions-label { text-transform: uppercase; font-weight: 600; font-size: 0.9em; } .asteroids-instructions-text { font-weight: 300; font-size: 0.9em; } .asteroids-header { z-index: 1004; background-color: transparent; position: absolute; top: 0px; left: 0px; right: 0px; height: 60px; } .asteroids-header-left { position: absolute; left: 0px; top: 6px; } .asteroids-header-right { position: absolute; right: 20px; top: 20px; } button.with-border.asteroids-header-help, button.with-border.asteroids-header-quit { color: #000; border: 1px solid #333; text-transform: uppercase; height: auto; float: right; margin-left: 15px; font-weight: 600; font-size: 0.9em; background-color: rgba(255, 255, 255, 0.85); } .asteroids-header-lives, .asteroids-header-score { display: inline-block; text-transform: uppercase; float: right; margin-left: 15px; min-width: 100px; font-weight: 600; font-size: 0.8em; } .asteroids-header-lives-value, .asteroids-header-score-value { font-weight: 300; font-size: 1.7em; } .asteroids-header-lives img { border-radius: 50%; margin-right: 5px; width: 16px; height: 16px; margin-top: 6px; } .asteroids-game-over-screen-title { font-size: 5em; text-transform: uppercase; font-weight: 100; } .asteroids-game-over-screen { z-index: 1003; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.85); } .asteroids-game-over-screen-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 640px; white-space: normal; text-align: center; } .asteroids-game-over-screen-text { margin-top: 40px; font-size: 1.2em; font-weight: 300; } .asteroids-game-over-screen-actions { margin-top: 40px; } button.with-border.asteroids-game-over-screen-get-back { border: 1px solid #333; height: auto; text-transform: uppercase; font-weight: 600; font-size: 0.9em; } button.with-border.asteroids-game-over-screen-play-again { color: #6cb043; border: 1px solid #6cb043; height: auto; text-transform: uppercase; font-weight: 600; font-size: 0.9em; } .cloneHead { position: absolute; width: 30px; height: 30px; transition: top 0.4s ease-out, left 0.4s ease-out; border-radius: 50%; z-index: 1001; } /* END Asteroids styles */ /***************** START 3D HORIZONTAL FLIP ANIMATION CSS *****************/ /* Support for old browsers as well */ /* entire container, keeps perspective */ .flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -ms-transform: perspective(1000px); -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; } /* adding the flip class will flip the animation from front-back */ .flip-container.flip .flip-front { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-container.flip .flip-back { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateY(0deg); } /* others that want to use this have to override this size */ .flip-container, .flip-front, .flip-back { width: 30px; height: 30px; } /* flip speed goes here */ .flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -ms-transition: 0.6s; -moz-transition: 0.6s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; height: inherit; width: inherit; position: relative; } /* hide back of pane during swap */ .flip-front, .flip-back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(0deg); -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -moz-transform: rotateY(0deg); -o-transition: 0.6s; -o-transform-style: preserve-3d; -o-transform: rotateY(0deg); -ms-transition: 0.6s; -ms-transform-style: preserve-3d; -ms-transform: rotateY(0deg); transition: 0.6s; transform-style: preserve-3d; transform: rotateY(0deg); position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .flip-front { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 2; } /* back, initially hidden pane */ .flip-back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } /************* END 3D HORIZONTAL FLIP ANIMATION CSS *************/ /***************** START IMAGE OVERLAY CSS *****************/ #image-overlay .lightbox-content div { width: 100%; height: 100%; display: table-cell; vertical-align: middle; } #image-overlay-image { /* Setting the position to fixed and 0 forces the image to fit within the window */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; max-width: 90%; max-height: 90%; margin: auto; cursor: pointer; border: 0; outline: 0; } #image-overlay .lightbox-progress { /* centered on the screen */ position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } /***************** END IMAGE OVERLAY CSS *****************/ /************* START SELECTOR DROPDOWN CSS *************/ .selector-dropdown { display: block; /* We need to override the defaul white-space: nowrap that is set on the body */ /* That rule is in iframe_editor.css but since that file is also loaded in the top frame, it affects this dropdown */ white-space: normal; background: #fff; border: 1px solid #d2d2d2; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; list-style: none; margin: 0; min-width: 220px; width: 100%; position: absolute; text-align: left; z-index: 100; /* this z-index needs to be high so that the drop down shows above all else */ } .selector-dropdown .selector-dropdown-secondary-text { font-size: 0.8em; color: #8899a6; height: 17px; display: inline-block; } .selector-dropdown .selector-dropdown-primary-text { font-size: 0.9em; padding-right: 5px; font-weight: 500; } .selector-dropdown a { color: #333; cursor: pointer; display: block; overflow-x: hidden; padding: 6px 15px; text-decoration: none; text-overflow: ellipsis; } .selector-dropdown a:hover, .selector-dropdown .dropdown-item-selected { background: #eee; text-decoration: none; } /************* END SELECTOR DROPDOWN CSS *************/ /************* INPUT TEXTAREA CSS (comment textarea) *************/ .comment-textarea { resize: none; border-color: #ccc; border-radius: 2px; color: #505050; background-color: #fff; border: 1px solid #ccc; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08); -webkit-font-smoothing: antialiased; transition: border-color linear 0.15s, box-shadow linear 0.15s; -webkit-transition: border-color linear 0.15s, box-shadow linear 0.15s; } .comment-textarea { padding: 10px; overflow: auto; min-height: 70px; max-height: 200px; width: 225px; font-size: 0.93em; font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; white-space: pre-wrap; word-wrap: break-word; } .comment-textarea .placeholder { color: #a5a5a5; font-weight: normal; } .comment-textarea:hover { border: 1px solid #4c4c4c; } .comment-textarea.has-error, .comment-textarea.has-error:hover, .comment-textarea.has-error:focus { border: 1px solid #ed3757; } .comment-textarea:focus { border-color: #0061d5; box-shadow: none; outline: 0; } .comment-textarea a { color: #0061d5; text-decoration: none; /* We need an !important here because iframe_editor.css has an !important rule for the cursor prop for all anchors */ cursor: inherit !important; } .comment-textarea a:hover { color: #0061d5; text-decoration: underline; } /************* END INPUT TEXTAREA CSS (comment textarea and share tooltip) *************/ /******************************************/ /************* CUSTOM/PAD.CSS *************/ /******************************************/ .hidden { display: none !important; } .preview-hidden { display: none !important; } .notVisible { visibility: hidden !important; opacity: 0 !important; } .widthFull { width: 100%; } .disableSelectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .allowTextSelection { word-wrap: break-word; user-select: text; -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -o-user-select: text; } /* Toolbar overrides */ .toolbar { height: 64px; padding-top: 0; border-bottom: 1px solid #e7e7e7; margin-left: 0px; width: 100%; } /* Toolbar Button Hover States Override */ .inlineToolbarMenu li { display: inline-block; } .toolbar .selected button span { opacity: 1; } /* Wrapper around centered content in top toolbar - bounded by width: (editor_page_width + 10) */ .toolbar .centeredMenu { /* Needs to be the same as toolbar-flush-section margin-top */ padding-top: calc((64px - 24px) / 2); /* 64px for toolbar height - 24px for icon height and then halve to center */ width: 820px; margin-left: calc(50% - 505px); -webkit-transition: margin-left 0.2s ease-out; -moz-transition: margin-left 0.2s ease-out; -ms-transition: margin-left 0.2s ease-out; -o-transition: margin-left 0.2s ease-out; transition: margin-left 0.2s ease-out; /* Want editbar dropdowns to be stacked over table menu. The reason for z-index of 3 is because page-overlay has a z-index of 2*/ z-index: 3; } .left-sidebar-opened .centeredMenu { margin-left: calc(50% - 350px); } /* sets up centering on a block level element. Element must define its own width bounds to center on. */ .centeredBlock { position: relative; margin: auto; } /* * Editbar Menu Style overrides */ .notes-menu .menu-item { line-height: 20px; display: list-item; min-height: 0; } /* Make all link in menu item display as a full width block element */ .notes-menu .menu-item a { display: block; } /* setup 3D transform perspective in order to get better animation */ .transform-perspective { position: relative; z-index: 100; perspective-origin: left top; perspective: 500px; -moz-perspective-origin: left top; -moz-perspective: 500px; -webkit-perspective-origin: left top; -webkit-perspective: 500px; } /** * When dropdown menu drop from right top to left bottom * we should setup properly 3D perspective to give the user right feeling * Normally dropdown menu drop from left top to right bottom, * but when there is no enough space on the right, menu will be opened from * right top position */ .transform-perspective.right-align { perspective-origin: right top; -moz-perspective-origin: right top; -webkit-perspective-origin: right top; } .notes-menu.bottom-right-align { transform-origin: right bottom; -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; perspective-origin: right bottom; -moz-perspective-origin: right bottom; -webkit-perspective-origin: right bottom; } .notes-menu { transition: opacity 0.075s, transform 0.125s; -moz-transition: opacity 0.075s, -moz-transform 0.125s; -webkit-transition: opacity 0.075s, -webkit-transform 0.125s; -ms-transition: opacity 0.075s, -ms-transform 0.125s; opacity: 0; /* a little rotate along with the x and y axis in 3D space */ /* make the flip out animation when apply the css transition */ transform: rotateY(10deg) rotateX(-10deg); -webkit-transform: rotateY(10deg) rotateX(-10deg); -ms-transform: rotateY(10deg) rotateX(-10deg); -moz-transform: rotateY(10deg) rotateX(-10deg); transform-origin: left top; -webkit-transform-origin: left top; -ms-transform-origin: left top; -moz-transform-origin: left top; /* Make the child elements will preserve its 3D position */ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; } /* [notes-list-width] [source-list-width] */ #editbar { margin-left: 400px; /* 400px for the sidebar width */ width: calc(100% - 400px - 6px); position: relative; z-index: 100; background-color: white; } #editbar .notes-menu { position: absolute; /* (toolbar height - margin top of toolbar-flush-section) = 60 - 17 */ top: 36px; text-align: left; /* As an active menu, should appear higher than anything else */ z-index: 100; margin: 0; padding: 12px; border-radius: 8px; border: solid 1px #e8e8e8; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12); overflow: hidden; background-color: #fff; } /* Error messages inside 'insert image/preview from Box shared link' needs to overflow */ #editbar .notes-menu.menu-image { overflow: visible; } /* The margin-top of the flush-left section is more than the centered menu and the right menu */ #editbar .toolbar-flush-left .notes-menu { /* (toolbar height - margin top of toolbar-flush-left) = 60 - 19 */ top: 41px; } #boxShareTooltip { background-color: #fff; border: 1px solid #bdc3c7; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1); } #boxShareTooltip { border-radius: 0; border-top: none; } /** * When dropdown menu drop from right top to left bottom * We need change the 3D transform style to give the user right feeling * Normally dropdown menu drop from left top to right bottom, * but when there is no enough space on the right, menu will be opened from * right top position */ #editbar .notes-menu.right-align { /* a little rotate along with the x and y axis in 3D space */ /* make the flip out animation when apply the css transition */ transform: rotateY(-10deg) rotateX(-10deg); -webkit-transform: rotateY(-10deg) rotateX(-10deg); -ms-transform: rotateY(-10deg) rotateX(-10deg); -moz-transform: rotateY(-10deg) rotateX(-10deg); transform-origin: right top; -webkit-transform-origin: right top; -ms-transform-origin: right top; -moz-transform-origin: right top; } #editbar .notes-menu.is-visible, #help-menu .notes-menu.is-visible { opacity: 1; transform: rotateY(0) rotateX(0); -webkit-transform: rotateY(0) rotateX(0); -ms-transform: rotateY(0) rotateX(0); -moz-transform: rotateY(0) rotateX(0); } /* Default dropdown menu - vertical list items */ #editbar .notes-menu .menu-item { font-size: 1em; color: #222222; /* $bdl-gray */ padding: 8px; margin: 0; cursor: pointer; border: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: none; max-width: 400px; font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; } #editbar .notes-menu.menu-image .menu-item { padding: 8px 40px 8px 8px; } #editbar .notes-menu.not-clickable .menu-item, #editbar .notes-menu .menu-item.not-clickable { padding: 5px 11px; cursor: default; font-weight: normal; } /* Horizontal dropdown menu - horizontal list items */ #editbar .notes-menu.menu-horizontal .menu-item { display: table-cell; margin: 0px; padding: 8px; text-align: center; } #editbar .notes-menu .sub-menu { margin: 0; border: 0; } #editbar .notes-menu .sub-menu ul { padding: 0; } #editbar .notes-menu .menu-item a { text-decoration: none; color: #686868; } #editbar .notes-menu.not-clickable .menu-item:hover, #editbar .notes-menu .menu-item.not-clickable:hover { background-color: #fff; } #editbar .notes-menu .menu-item:hover { background-color: #f4f4f4; /* $bdl-gray-05 */ border-radius: 8px; } #editbar .notes-menu .menu-item.not-clickable { padding: 10px; } /* Defines the fluid layout of the left and right flush toolbar sections */ .toolbar .toolbar-flush-section { position: absolute; /* (toolbar height - section height)/2 = (60 - 22) / 2 = 19 */ margin-top: 19px; } /* Toolbar menu section that is flush & fluid against the right side of screen */ .toolbar-flush-right { right: 24px; /* NOTE(ychen) 2015-10-15: use flex to get rid of the hidden text node(s) between all buttons, * which were causing weird selection/clicking behavior. * Based on the flex doc, this is maybe the reason why flex solved the problem: * "Text that is directly contained inside a flex container is automatically wrapped in an * anonymous flex item. However, an anonymous flex item that contains only white space is * not rendered, as if it were designated display: none." * Those hidden text nodes are automatically added by the browsers because of the indentations * we have in front of the button elements in the pad.html. There are a few other potential * approaches to solve this: * - add a step in our asset pipeline to remove all the safe to remove whitespaces in the pad.html * - set the font size to 0 here and specify the font size in the children elements accordingly * - wrap all the button in
  • . This solved the selection/click issue. But it causes the * event not propagated to our event handler. This may be related to the click event handler * attached to the editbar inside pad_editbar.js */ display: flex; display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* Safari */ /* Vertically align the items inside */ align-items: center; -ms-flex-align: center; -webkit-align-items: center; } .toolbar .toolbar-flush-section.toolbar-flush-right { display: flex; align-items: center; margin: 0; height: 64px; } /* By default, larger logo is shown for viewbar/editbar. */ /* See media_queries.css to logic that instead shows small icon at smaller page widths. */ #emptybar .buttonicon-box-notes-logo, .toolbar .buttonicon-box-notes-logo-icon { display: none; } input, textarea, button { /* @NOTE(bemerick) 2014-04-28: Webkit forcibly tries to set its own font-family and * line-height on input controls. This overrides our main body styles. * Thus, we're forced to re-assert these styles for all inputs. */ font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Although titleEditor is an input, it's part of our editing surface, so it should use same font style as editing surface */ #titleEditor, .titleEditor { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* @NOTE 5/6/2013: These styles are taken from input styles in Box Webapp - see box.css */ input, textarea { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); color: #505050; font-size: 13px; border: 1px solid #ccc; border-radius: 2px; padding: 7px; transition: border-color linear 0.15s, box-shadow linear 0.1s; -webkit-transition: border-color linear 0.15s, box-shadow linear 0.1s; outline: none; -webkit-font-smoothing: antialiased; } input:hover, textarea:hover { border: 1px solid rgba(0, 0, 0, 0.7); border-bottom: 1px solid rgba(0, 0, 0, 0.6); } input:focus, input:active, textarea:focus, textarea:active { border: 1px solid #0061d5; } /* @NOTE(naeims) 2014-04-30: Hide IE's default X, e.g. on title input box. * http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */ ::-ms-clear { display: none; } /* @NOTE(mnguyen) 2020-06-15: IE11 has a black colored placeholder by default, so it must be overridden */ #titleEditor:-ms-input-placeholder, .titleEditor:-ms-input-placeholder { color: #bcbcbc; } button { border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; padding: 3px 0; font-size: 0.9em; background-color: transparent; } button:focus-visible { /* @TODO(edunnahoo) 2023-01-27: Remove !important when we don't have to override BUIE's outline:none */ outline: 1px auto Highlight !important; /* Firefox */ outline: 1px auto -webkit-focus-ring-color !important; /* Chrome and Safari */ outline-offset: 4px; } /* Base style for any styled button */ button.button-gray, button.button-transparent, button.with-border { border-radius: 2px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; } button.button-transparent { background-color: transparent; color: #dbdbdb; } button.button-gray { background-color: #555; color: #dbdbdb; } button.with-border { border: 1px solid #ccc; color: #555555; /* Hard code this height so all browsers render this element consistently. We need this height to be consistent across browsers so we can correctly vertically align the button. */ height: 34px; } /* override cursors for disabled buttons */ button:disabled { cursor: default; } /* @NOTE(bemerick) 2014-01-27: Removes Firefox-specific focus-inner styles so that FF button size ends up * the same as all other browsers. Without this, Firefox buttons have way too much inner-padding. See: * http://stackoverflow.com/questions/5370609/difference-between-firefox-and-chrome-padding * @NOTE(bemerick) 2014-04-29: In all of FF's glory, just unsetting isn't enough. We need to actually * fudge the top/bottom margin by -2px to get the button back to normal height! * See here: http://davidwalsh.name/firefox-buttons */ button::-moz-focus-inner { border: 0 !important; padding: 0 !important; margin: -2px 0 !important; } .buttonicon_menu { width: 20px; height: 20px; display: table-cell; vertical-align: middle; } /* override sprites */ .buttonicon { width: 20px; height: 20px; background-image: url(../../img/notes-sprites_6d540df809d5263ca52d8be8734765ea.min.png); background-repeat: no-repeat; display: inline-block; vertical-align: middle; /* When applied to an html button element, unset the default button styles */ border: none; background-color: transparent; cursor: pointer; } /* SVG buttonicons */ .buttonicon-svg { background-image: none; border-radius: 4px; overflow: hidden; } /* Editbar buttonicons */ .menu_left .buttonicon.buttonicon-svg { width: 24px; height: 24px; padding: 2px; border-radius: 5.3px; } .menu_left .selected .buttonicon-svg { background: #e5effa; } .menu_left .buttonicon-svg:hover, .menu_left button:hover .buttonicon-svg { background: #f4f4f4; /* $bdl-gray-05 */ } .menu_left #button-alignments.disabled .buttonicon-svg:hover, .menu_left button#button-alignments.disabled:hover .buttonicon-svg { cursor: default; background: none; } .menu_left .selected .buttonicon-svg svg :not(g) { fill: #0061d5; } /* Editbar text alignment dropdown buttonicons */ #menu-alignments .buttonicon-svg:hover { background: none; } #menu-alignments .menu-item svg { margin: 0; } .buttonicon-font-color { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } /* Hyperlink button icons in the tooltip */ .hyperlinkActions .buttonicon.buttonicon-svg * { fill: #ffffff; } /* Second Row */ .buttonicon-annotation-add { background-position: -150px -30px; } /* Third Row */ .buttonicon-hyperlink { background-position: 0 -60px; } .buttonicon-pencil-crossed { background-position: -90px -60px; } /* Fifth Row */ .buttonicon-version-history { background-position: -90px -120px; } /* Eleventh Row */ .buttonicon-table-insert-row-below { background-position: 0px -300px; } .buttonicon-table-insert-row-above { background-position: -30px -300px; } .buttonicon-table-remove-row { background-position: -60px -299px; } .buttonicon-print { background-position: -90px -300px; } /* Twelfth Row */ .buttonicon-table-insert-col-right { background-position: -30px -330px; } .buttonicon-table-insert-col-left { background-position: 0px -330px; } .buttonicon-table-remove-col { background-position: -60px -330px; } .buttonicon-verion-entry-more-authors { background-position: -90px -330px; } .buttonicon-shortcuts { background-position: -120px -330px; } .buttonicon-version-history-toggle { background-position: -150px -330px; } /* Thirteenth Row */ .buttonicon-create-note { background-position: -2px -359px; } .buttonicon-recents { background-position: -56px -359px; } .buttonicon-shared-with-me { background-position: -83px -359px; } .buttonicon-my-box-notes { background-position: -110px -359px; } .buttonicon-toggle-fullscreen { background-position: -140px -359px; } /* Fourteenth Row */ .selected .buttonicon-recents { background-position: -56px -383px; } .selected .buttonicon-shared-with-me { background-position: -83px -383px; } .selected .buttonicon-my-box-notes { background-position: -110px -383px; } .selected .buttonicon-toggle-fullscreen { background-position: -140px -381px; } /* Selected retina styles */ /* First row of selected icons */ .buttonicon-font-size-small { background-position: 0 -150px; } .buttonicon-font-size-large { background-position: -30px -150px; } /* Second row of selected icons */ .selected .buttonicon-align-justify { background-position: -45px -180px; } /* Third row of selected icons */ .buttonicon-note-list-item-folder { background-position: -65px -211px; } .buttonicon-annotation-delete { background-position: -90px -210px; } .buttonicon-folder { background-position: -120px -211px; } /* Fourth row */ .buttonicon-version-history-restore { background-position: 0 -240px; } .buttonicon-image-add-from-web { background-position: -60px -240px; } .buttonicon-mac-metakey { background-position: -90px -240px; } .buttonicon-windows-metakey { background-position: -120px -240px; } .buttonicon-box-notes-logo { background-position: 0 -270px; width: 118px; height: 18px; } /* Set the smaller width to only show "box" in the log */ #editbar .buttonicon-box-notes-logo { width: 64px; } .buttonicon-box-notes-logo-icon { background-position: 0 -270px; height: 18px; width: 22px; } .buttonicon-comment-action-delete { background-position: -120px -270px; } .buttonicon-ai-assistant { background-color: transparent; background-image: url(../../img/ai_assistant_icon_ceef091feabc0a3edcd4fdae5317a96f.min.svg); background-position: 3px 2px; background-repeat: no-repeat; height: 20px; width: 20px; vertical-align: middle; } .errorIcon { background-position: -150px -270px; } .version-content-error-icon { background-position: -135px -289px; width: 36px; height: 36px; cursor: default; } /* Not in spritesheet as this is an animated gif. * @NOTE: Using EPL's included loading gif for now */ .spinnerIcon { background-image: url(../../img/loading_cbf917a1b86c16772e392ce3c35e010b.min.gif); width: 16px; height: 16px; } /* CSS3 tooltips. To Use: * 1. Add data-tooltip attribute to an element. Contents will be shown in the tooltip. * 2. Add 'tooltip' class to the element. * 3. Add 'tooltip[Top/Bottom][Left/Right]' class to the element based on desired tooltip position. * @TODO (bemerick) 2013-05-29: Implement other tooltip positions. Only tooltipBottomLeft is available at this time. * @NOTE1: These tooltips only work in CSS3-supported browsers - there is currently no graceful fallback! * @NOTE2: These tooltips have a static position and width at this time! * Modeled similarly to the tutorial here: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/ */ /* Main "bubble" containing tooltip text */ .notes-tooltip:hover:after { background: #333; border-radius: 5px; padding: 5px 15px; position: absolute; white-space: normal; text-align: center; /* Place considerably high in z-index stack to prevent new DOM items from encroaching over the tooltip down the road */ z-index: 98; width: 120px; color: #fff; content: attr(data-tooltip); font-size: 0.8em; } /* tooltip triangle that extends from the text bubble, pointing to the target element for the tooltip */ .notes-tooltip:hover:before { border: solid; /* This border-color is for only up or down pointing beaks */ border-color: #333 transparent; content: ''; position: absolute; z-index: 99; } /* By default, tooltip is generally slightly opaque since it is often on button icons. * Ensure we have full opacity here so that tooltip is fully visibile. */ .notes-tooltip { opacity: 1; } /* The tooltip must be given a bg color in order to have enough weight to trigger :hover in IE10 */ .notes-tooltip:hover { background-color: transparent; } .notes-tooltip.tooltipMiddleRight:hover:before { /* This border-color is for only left or right pointing beaks */ border-color: transparent #333; } .tooltipBottomLeft:hover:after { top: 25px; right: -5px; } .tooltipBottomLeft:hover:before { border-width: 0 6px 6px 6px; bottom: -5px; left: 20%; } .tooltipMiddleRight:hover:after { top: 0; left: 25px; } .tooltipMiddleRight:hover:before { border-width: 6px 6px 6px 0; bottom: 2px; right: -20%; } /* View (read-only) Toolbar */ /* [notes-list-width] [source-list-width] */ #viewbar { text-align: center; cursor: default; position: relative; margin-left: 400px; /* 400px for sidebar width */ width: calc(100% - 400px - 24px); /* 400px sidebar width + 24px right margin */ } body[data-view-state='viewonly'] #viewbar { margin-left: 0; width: 100%; } #viewbarRight { position: absolute; right: 14px; } #viewbarLeft { /* This is used to vertically center the elements that are present inside viewBar left. Currently, this only includes the boxNOTES icon and text */ margin-top: 19px; } .left-sidebar-opened #viewbarLeft { left: -8px; } #viewbarMessage { /* This is used to vertically center the elements that are present inside viewBar message. */ margin-top: 20px; display: inline-block; } #emptybar .toolbar-flush-section { /* This is used to vertically center all elements in the emptybar. Currently, this only includes the Box Notes icon with no text */ margin-top: 20px; } #viewbarMessage .read-only-icon { margin-right: 10px; margin-top: -3px; cursor: default; } .viewbar-message-text { color: #6a6a6a; display: inline; } #viewbar .viewbar-logo { position: absolute; left: 20px; top: 20px; } #viewbar .viewbar-button { box-shadow: none; border-radius: 6px; margin: 8px 0 8px 12px; } #viewbar .viewbar-button-text { height: 20px; vertical-align: middle; padding: 0; font-size: 14px; font-weight: bold; line-height: 1.43; letter-spacing: 0.32px; } #viewbar #viewbar-signup-button { border: 1px solid #bcbcbc; padding: 9px 15px; } #viewbar #viewbar-login-button { border: none; padding: 10px 16px; } #viewbarRight .hidden-comment { display: none; } /* * Viewbar display logic is based on connection status: * When in max-users or max-size state: Max-users/Max-size messaging is visible. Hide the read-only messaging. * When NOT in max-users or max-size state: Read-Only messaging is visible. Hide the max-users/size messaging. */ body[data-banner-type='disconnected-max-users'] #viewbar .read-only-message, body:not([data-banner-type='disconnected-max-users']) #viewbar #max-users-message, body[data-banner-type='disconnected-max-size'] #viewbar .read-only-message, body:not([data-banner-type='disconnected-max-size']) #viewbar #max-size-message, body[data-banner-type='disconnected-db-access-denied'] #viewbar .read-only-message, body:not([data-banner-type='disconnected-db-access-denied']) #viewbar #db-access-denied-message, body[data-banner-type='template-read-only'] #viewbar .read-only-message, body:not([data-banner-type='template-read-only']) #viewbar #template-read-only { display: none; } /* End Read-only Toolbar */ /* Button styles in BDL (Box Design Language: https://cloud.app.box.com/s/fgfsb1o4s4f56t3bejb4w9m4ko7li2u5) */ /* @NOTE(kehuang) 2016-04-14: The button styles in this section is pulled in from box-ui (https://git.dev.box.net/Box/box-ui) */ /* which follows BDL. We should keep this style sync with BDL. */ /* All normal buttons in Notes use this style, such as buttons in editbar and sidebar and buttons in share popup. */ /* However there are some special buttons which don't use this BDL style: */ /* 1. Icons in editbar, they're using