/** * Styles used for highlighting and annotating text/content. **/ /** * Legacy Styles - Content that uses these must be transitioned to the newer styles. **/ /* Used to render an inline marker/reminder for something that needs to be done. */ span.todo { display: inline; color: DarkRed; background-color: LightGray; } span.todo::before { content: "[[TODO: "; color: DarkSlateGray; } span.todo::after { content: "]]"; color: DarkSlateGray; } /* Highlighting styles */ mark.toggle_cmnt::after { padding: 0px 2px 0px 2px; color: #f0f0f0; text-shadow: 0px 0px 4px black; } /* Since there's no background color on a editor's note highlight, don't put padding on the right (otherwise, * it looks awkward. */ mark.toggle_cmnt.editors_note::after { padding-right: 0px; } mark.toggle_cmnt.collapsed::after { content: "\25bc"; } mark.toggle_cmnt.expanded::after { content: "\25b2"; } /* * Highlighting styles. */ mark { padding: 0px 0px; cursor: pointer; border-radius: 2px; border-style: none; border-width: 1px; } mark, mark.yellow { background-color: Yellow; border-color: Yellow; } mark.toggle_cmnt.hlt_off::after, mark.yellow.toggle_cmnt.hlt_off::after { color: Yellow; } mark.interest, mark.blue { background-color: LightSkyBlue; border-color: LightSkyBlue; } mark.interest.toggle_cmnt.hlt_off::after, mark.blue.toggle_cmnt.hlt_off::after { color: LightSkyBlue; } mark.ltblue { background-color: LightBlue; border-color: LightBlue; } mark.ltblue.toggle_cmnt.hlt_off::after { color: LightBlue; } mark.belligerence, mark.cyan { background-color: Cyan; border-color: Cyan; } mark.belligerence.toggle_cmnt.hlt_off::after, mark.cyan.toggle_cmnt.hlt_off::after { color: Cyan; } mark.ltcyan { background-color: LightCyan; border-color: LightCyan; } mark.ltcyan.toggle_cmnt.hlt_off::after { color: LightCyan; } mark.gold { background-color: Gold; border-color: Gold; } mark.gold.toggle_cmnt.hlt_off::after { color: Gold; } mark.gray { background-color: LightGray; border-color: LightGray; } mark.gray.toggle_cmnt.hlt_off::after { color: LightGray; } mark.perjury, mark.green { background-color: Lime; border-color: Lime; } mark.perjury.toggle_cmnt.hlt_off::after, mark.green.toggle_cmnt.hlt_off::after { color: Lime; } mark.strategic, mark.magenta { background-color: Magenta; border-color: Magenta; } mark.strategic.toggle_cmnt.hlt_off::after, mark.magenta.toggle_cmnt.hlt_off::after { color: Magenta; } mark.psycho, mark.orange { background-color: Orange; border-color: Orange; } /* 'psycho' for psychological or psychopathy, take your pick. This is also used to highlight a party is trying to be manipulative. */ mark.psycho.toggle_cmnt.hlt_off::after, mark.orange.toggle_cmnt.hlt_off::after { color: Orange; } mark.pink { background-color: Pink; border-color: Pink; } mark.pink.toggle_cmnt.hlt_off::after { color: Pink; } mark.threat, mark.violet { background-color: Violet; border-color: Violet; } mark.threat.toggle_cmnt.hlt_off::after, mark.violet.toggle_cmnt.hlt_off::after { color: Violet; } mark.critical, mark.red { background-color: Red; border-color: Red; color: Yellow; font-weight: bold; } mark.critical.toggle_cmnt.hlt_off::after, mark.red.toggle_cmnt.hlt_off::after { color: Red; } mark.racism, mark.dkred { background-color: DarkRed; border-color: DarkRed; color: LavenderBlush; font-weight: bold; } mark.racism.toggle_cmnt.hlt_off::after, mark.dkred.toggle_cmnt.hlt_off::after { color: DarkRed; } mark.silver { background-color: Silver; border-color: Silver; } mark.silver.toggle_cmnt.hlt_off::after { color: Silver; } mark.ltyellow { background-color: LightYellow; border-color: LightYellow; } mark.ltyellow.toggle_cmnt.hlt_off::after { color: LightYellow; } mark.dkyellow { background-color: #f0f000; border-color: #f0f000; } mark.dkyellow.toggle_cmnt.hlt_off::after { color: #f0f000; } mark.hlt_on { } mark.hlt_off { background-color: transparent; border-bottom-style: dotted; color: inherit; font-weight: initial; } /** * Text highlighted for an editor's note does not have a colored background. The purpose for the * mark is to enable the toggling of the associated comment block. */ mark.hlt.editors_note { background-color: transparent; } /** * Highlight labels/markers. */ mark::before { font-size: 8pt; font-style: italic; vertical-align: super; padding: 0px 2px 0px 0px; } /* For highlighting within correspondences, so it is clear it is not part of the correspondence. */ div#msgbody_blk mark::before { content: "{editor}"; } mark.belligerence::before { content: "{belligerence}"; color: Blue; } mark.critical::before { content: "{critical}"; color: Pink; } mark.interest::before { content: "{interest}"; color: DarkBlue; } mark.perjury::before { content: "{lies}"; color: DarkSlateGray; } mark.psycho::before { content: "{psych}"; color: DarkRed; } mark.racism::before { content: "{racism}"; color: Yellow; } mark.strategic::before { content: "{strategic}"; color: White; } mark.threat::before { content: "{threat}"; color: White; } /* Styles to highlight the expression of various emotions. This is typically used in transcripts that have accompanying * audio or video recordings. */ mark.emo_happy, mark.emo_sad, mark.emo_angry { font-style: italic; font-weight: bold; line-height: 1.5; background-color: transparent; } mark.emo_happy { text-decoration: underline double Fuchsia 2px; } mark.emo_happy.expanded + aside.cmnt { margin-top: 4px; } mark.emo_happy::before { content: "{laughing}"; color: Fuchsia; background-color: white; text-decoration: initial; } mark.toggle_cmnt.emo_happy.collapsed::after { content: url("/media/logos/audio-12.png") " \25bc"; text-decoration: none; } mark.toggle_cmnt.emo_happy.expanded::after { content: url("/media/logos/audio-12.png") " \25b2"; text-decoration: none; } mark.emo_sad { text-decoration: underline double DeepSkyBlue 2px; } mark.emo_sad::before { content: "{crying}"; color: DeepSkyBlue; background-color: white; text-decoration: initial; vertical-align: top; } mark.emo_angry { text-decoration: underline double Purple 2px; } mark.emo_angry::before { content: "{anger}"; color: Purple; background-color: white; text-decoration: initial; } mark.hlt_off::before { content: none; } /* This is used for highlighting entire blocks (rather than the individual lines of text). * This puts a highlighted border along the right edge of the block/element. The contained * block/element could also set it's background color as indicated below (though that is not * mandatory). */ div.block_highlight { border-top-style: solid; border-top-width: 2px; border-right-style: solid; border-right-width: 8px; margin-bottom: 0px; } /* When a block highlight is immediately followed by another, put a slight space between them, * so it's visible that they're two separate blocks. */ div.block_highlight + div.block_highlight { margin-top: 4px; } /* A nested block highlight. This adds a nested colored border along the right edge, with a * slight space between them. */ div.block_highlight > div.block_highlight { margin-right: 3px; } /* The following sets the color of the right-side border and the background, for the block highlighted * element. */ div.block_highlight, div.block_highlight.yellow { border-color: Yellow; background-color: #ffffd0; } div.block_highlight.interest, div.block_highlight.blue { border-color: LightSkyBlue; background-color: #d7f5ff; } div.block_highlight.ltblue { border-color: LightBlue; background-color: #d3eaf1; } div.block_highlight.cyan { border-color: Cyan; background-color: #b7ffff; } div.block_highlight.gold { border-color: Gold; background-color: #ffef95; } div.block_highlight.gray { border-color: LightGray; background-color: #f3f3f3; } div.block_highlight.perjury, div.block_highlight.green { border-color: Lime; background-color: #d1f8d1; } div.block_highlight.strategic, div.block_highlight.magenta { border-color: Magenta; background-color: #ffbfff; } div.block_highlight.psycho, div.block_highlight.orange { border-color: Orange; background-color: #ffd384; } div.block_highlight.pink { border-color: Pink; background-color: #ffeaee; } div.block_highlight.critical, div.block_highlight.red { border-color: Red; background-color: #ffaaaa; } div.block_highlight.threat, div.block_highlight.violet { border-color: Violet; background-color: #fad3fa; } /* Grouping is used to just place a gray border around a block if, for example, there is nothing interesting in it. */ div.block_highlight.grouping { border-color: Silver; background-color: rgba(0,0,0,0.03); border-bottom-style: solid; border-bottom-width: 2px; } div.block_highlight.silver { border-color: Silver; background-color: #efefef; } div.block_highlight.ltyellow { border-color: LightYellow; background-color: transparent; } div.block_highlight.dkyellow { border-color: #f0f000; background-color: #f5f596; } /* For editors's note block highlights, don't set the background color, just the border. */ div.block_highlight.editors_note { border-color: #aaaaaa; background-color: transparent; } /* Highlighting is turned off. */ div.block_highlight.hlt_off { border-width: 1px; background-color: transparent; } /* * Styles for inline comment/annotation boxes. These are often used in conjunction with the highlighting * styles specified above to provide comments/explanations about the highlighted text. */ /* Styles that apply to all types of comment/annotation boxes. */ aside.cmnt { display: block; margin: 0px 0px 4px 20px; padding: 0px 2px 2px 10px; color: #444444; background-color: #f0f0f0; border-style: solid; border-width: 1px; border-color: #dddddd; box-shadow: 2px 2px 3px; text-indent: 0px; line-height: normal; font-weight: normal; border-radius: 0px 4px 4px 4px; } aside.cmnt.collapsed { display: none; } aside.cmnt.expanded { display: block; } /* Styles specific to the comment of a "block highlight". This typically appears at the beginning of the * block highlight. */ div.block_highlight > aside.cmnt { border-right-style: none; border-radius: 5px 0px 0px 5px; margin: 0px -2px 4px 0px; } aside.cmnt, aside.cmnt * { font-size: 9pt !important; } /* Color specific comment/annotation styles. */ aside.cmnt, aside.cmnt.yellow { border-color: yellow; } aside.cmnt.interest, aside.cmnt.blue { border-color: LightSkyBlue; } aside.cmnt.ltblue { border-color: LightBlue; } aside.cmnt.belligerence, aside.cmnt.cyan { border-color: Cyan; } aside.cmnt.ltcyan { border-color: LightCyan; } aside.cmnt.gold { border-color: Gold; } aside.cmnt.gray { border-color: LightGray; } aside.cmnt.perjury, aside.cmnt.green { border-color: Lime; } aside.cmnt.strategic, aside.cmnt.magenta { border-color: Magenta; } aside.cmnt.psycho, aside.cmnt.orange { border-color: Orange; } aside.cmnt.pink { border-color: Pink; } aside.cmnt.critical, aside.cmnt.red { border-color: Red; color: #444444; font-weight: normal; } aside.cmnt.racism, aside.cmnt.dkred { border-color: DarkRed; } aside.cmnt.threat, aside.cmnt.violet { border-color: Violet; } aside.cmnt.grouping, aside.cmnt.silver { border-color: Silver; } aside.cmnt.dkyellow { border-color: #f0f000; } /* For critical and racism comments, make the box border a little thicker to make it stand out more. */ aside.cmnt.critical, aside.cmnt.racism { border-width: 2px; } /* * The "editor's note" comment has slightly different styling than the normal comment boxes. * An editor's note is not usually associated with a highlighted segment of text. */ aside.cmnt.editors_note { font-size: 8pt !important; border-color: #aaaaaa; background-color: #dddddd; padding: 2px 5px; border-radius: 4px; box-shadow: none; } span.cmnt.editors_note { font-size: 8pt; color: #444444; border-style: solid; border-width: 1px; border-color: #aaaaaa; background-color: #dddddd; border-radius: 3px; padding: 0px 3px; } /* Styles for headings used within aside.cmnt. */ aside.cmnt h1, aside.cmnt h2, aside.cmnt h3, aside.cmnt h4, aside.cmnt h5, aside.cmnt h6, aside.cmnt h7, aside.cmnt h8, aside.cmnt h9 { background-color: transparent; color: #444444; box-shadow: none; border-radius: 0px; margin: 1em 0em 0.5em 0em; } aside.cmnt h2 { padding: 1px 0px; font-size: 9pt; text-decoration: underline; background-color: transparent; color: Black; margin: 0 0 1em 0; } aside.cmnt h3 { margin: 1em 0em 0.5em 0em; } aside.cmnt h4, aside.cmnt h5, aside.cmnt h6, aside.cmnt h7, aside.cmnt h8, aside.cmnt h9 { margin: 1em 0em 0em 0em; } aside.cmnt p + h2 { margin-top: 1em; } aside.cmnt + p { margin-top: 1em; } div.document aside.cmnt section { margin-top: 1em; } /* Turn off certain styling for elements within a comment. */ aside.cmnt div.subsection { border-style: none; } /* Red underline to emphasize critical text. */ span.underline_critical { text-decoration: underline red 1px; font-style: italic; }