X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/8132fc186eb0c5fd02c86828c3a4735754296d02..5913c54d19b8f6775633176032161d49f9b2f1aa:/src/redakcja/static/css/html.css?ds=inline diff --git a/src/redakcja/static/css/html.css b/src/redakcja/static/css/html.css new file mode 100644 index 00000000..3b996814 --- /dev/null +++ b/src/redakcja/static/css/html.css @@ -0,0 +1,684 @@ +/* Style widoku HTML. Nie należy tu ustawiać position ani marginesów */ +.htmlview { + counter-reset: main; + font-size: 16px; + font-family: "Georgia", "Times New Roman", serif; + line-height: 1.5em; + padding: 3em 3em 3em 45px; + overflow-y: scroll; + overflow-x: auto; +} + +.htmlview[data-tag-names-visible] { + padding-left: 90px; +} + +/* + .htmlview[data-tag-names-visible] *[x-editable]:not(*[x-common])::before { + display: block; + float: left; + clear: left; + content: attr(x-node); + font-weight: bold; + font-style: normal; + font-variant:normal; + font-size: 8px; + line-height: 8px; + margin-bottom: 4px; + + padding: 3px 4px; + vertical-align: super; + background-color:#add8e6; + margin-left: -80px; + width: 70px; + text-align: center; + + -webkit-border-radius: 4px; + } + */ +.htmlview *[x-node = 'RDF'][x-ns = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'] { + display: none; +} + +.htmlview * { + position: relative; +} + +.htmlview div { + max-width: 36em; +} + +.htmlview #toc { + display: none; +} + +.htmlview a { + color: blue; + text-decoration: none; +} + +.htmlview a:hover { + text-decoration: none; +} + +.htmlview h1 { + font-size: 3em; + margin: 1.5em 0; + text-align: center; + line-height: 1.5em; + font-weight: bold; +} + +.htmlview h2 { + font-size: 2em; + margin: 1.5em 0 0; + font-weight: bold; + line-height: 1.5em; +} + +.htmlview h3 { + font-size: 1.5em; + margin: 1.5em 0 0; + font-weight: normal; + line-height: 1.5em; +} + +.htmlview h4 { + font-size: 1em; + margin: 1.5em 0 0; + line-height: 1.5em; +} + +.htmlview p { + margin: 0; +} + +.htmlview #footnotes div { + margin: 1.5em 0 0 0; +} + +.htmlview #footnotes p { + margin-left: 2.5em; + font-size: 0.875em; +} + +.htmlview blockquote { + font-size: 0.875em; +} + +.htmlview pre { + overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */ + white-space: pre-wrap; /* css-3 */ + white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ /* + width: 99%; */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ +} + +/* ============= */ +/* = Numbering = */ +/* ============= */ +.htmlview .anchor { + position: relative; + margin: 0; + left: -2.2em; + color: #777; + font-size: 12px; + width: 2em; + text-align: center; + padding: 0.25em 0.7em; + line-height: 1.5em; +} + +.htmlview .anchor:hover, .htmlview .anchor:active { + color: #FFF; + background-color: #CCC; +} + +/* =================== */ +/* = Custom elements = */ +/* =================== */ +.htmlview .autor_utwor { + font-size: 0.5em; + display: block; + line-height: 1.5em; + margin-bottom: 0.25em; +} + +.htmlview .dzielo_nadrzedne { + /* */ +} + +.htmlview .podtytul { + /* */ +} + +.htmlview .didaskalia { + font-style: italic; + margin: 0.5em 0 0 1.5em; +} + +.htmlview .kwestia { + margin: 0.5em 0 0; +} + +.htmlview .strofa { + margin: 1.5em 0 0.5em auto; +} + +/* wersy */ +.htmlview *[x-verse]:after { + content: "\feff"; +} + +.htmlview .strofa .wers_wciety, .htmlview .strofa .wers_wciety[data-wlf-typ='1'] { + margin-left: 1em; +} + +.htmlview .strofa .wers_wciety[data-wlf-typ='2'], .htmlview .strofa .wers_cd { + margin-left: 2em; +} + +.htmlview .strofa .wers_wciety[data-wlf-typ='3'] { + margin-left: 3em; +} + +.htmlview .strofa .wers_wciety[data-wlf-typ='4'] { + margin-left: 4em; +} + +.htmlview .strofa .wers_wciety[data-wlf-typ='5'] { + margin-left: 5em; +} + +.htmlview .strofa .wers_wciety[data-wlf-typ='6'] { + margin-left: 6em; +} + +.htmlview .strofa .wers_do_prawej { + text-align: right; +} + +/* błędne wersy */ +.htmlview *:not(.strofa) > *[x-verse]::after { + content: "Ten wers znajduje się poza strofą."; + display: inline; + background: red; + font-size: 8pt; + border: 1px solid black; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + padding: 1px 1em; + margin-left: 1em; + vertical-align: super; +} + +.htmlview .kwestia .strofa { + margin: 0; +} + +.htmlview .akap, .htmlview .akap_cd, .htmlview .akap_dialog { + text-align: justify; + margin: 1.5em 0 0; +} + +.htmlview .motto_container { + display: inline-block; + margin: 1.5em 0 0; + clear: right; +} + +.htmlview .motto { + text-align: justify; + font-style: italic; +} + +.htmlview p.motto_podpis { + position: relative; + right: -3em; + text-align: right; +} + +.htmlview div.fragment { + border-bottom: 0.1em solid #999; + padding-bottom: 1.5em; +} + +.htmlview div.nota p, .htmlview div.dedykacja p { + text-align: right; + font-style: italic; +} + +.htmlview div.ramka { + border: 1px darkgray solid; +} + +.htmlview .nota_red { + background-color: #eee; + border: 1px solid #888; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + display: block; + padding: 0 1em 1em 1em; +} + +.htmlview hr.sekcja_swiatlo { + margin: 2em 0; + visibility: hidden; +} + +.htmlview hr.separator_linia { + margin: 1.5em 0; + border: none; + border-bottom: 0.1em solid #000; +} + +.htmlview p.sekcja_asterysk { + padding: 0; + margin: 1.5em 0; + text-align: center; +} + +.htmlview p.sekcja_asterysk:after { + content: "*"; +} + +.htmlview div.lista_osob ol { + list-style: none; + padding: 0 0 0 1.5em; +} + +.htmlview p.miejsce_czas { + font-style: italic; +} + +.htmlview .mat, .htmlview .slowo_obce, .htmlview .tytul_dziela, .htmlview .didaskalia { + font-style: italic; +} + +.htmlview .wyroznienie { + letter-spacing: 0.1em; +} + +.htmlview .osoba { + font-style: normal; + font-variant: small-caps; +} + +.htmlview em.wieksze_odstepy { + font-style: normal; + word-spacing: 1em; +} + +.htmlview .parse-warning { + display: block; + font-size: 10pt; + background: #C0C0C0; + margin: 1em; +} + +.parse-warning .message { + color: purple; + font-weight: bold; +} + +/* Uwaga/Extra */ +.htmlview .uwaga { + background-color: #96e0e4; + border: 1px solid black; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + display: block; + font-size: 10pt; + line-height: 12pt; + padding: 2px 1em; + float: right; + max-width: 20%; + max-height: 24pt; + margin-left: 0.5em; + overflow: hidden; + z-index: 500; +} + +div[x-node] > .uwaga { + float: none; + padding: 0.5em 1em; + margin: 1em; + max-width: 100%; + max-height: 100%; +} + +.htmlview .uwaga:hover { + max-height: 100%; +} + +.htmlview .annotation-inline-box .uwaga { + max-height: 100%; +} + +/* Motywy */ +/* ======================== */ +/* = Footnotes and themes = */ +/* ======================== */ +.htmlview .begin, .htmlview .end { + background: green; +} + +.htmlview .motyw { + /* position: absolute; */ + float: right; + left: auto; + clear: right; + width: 10em; + + font-style: normal; + font-weight: normal; + font-variant: normal; + letter-spacing: 0; + text-transform: none; + text-decoration: none; + + font-size: 13px; + line-height: 18px; + background-color: #fff; + /* border: 1px solid gray; + + border-right: none; + */ + z-index: 1; + -moz-user-select: -moz-none; + -webkit-user-select: none; + user-select: none; + margin-right: -12em; + text-align: left; + color: #999; +} + +.htmlview .canon { + color: black; +} + +.htmlview .noncanon { + color: #d00; +} + +.htmlview .motyw[x-editable] { + border-left: 4px solid #DDD; + padding: 0.2em 0.2em 0.2em 0.5em; + margin-top: 0.2em; +} + +/* + * Przypisy + */ +/* Znaczniki w tekście */ +.annotation { + font-style: normal; +} + +.htmlview .annotation:before { + content: "[" counter(main) "]"; + counter-increment: main; + vertical-align: super; + text-decoration: none; + font-size: 66%; +} + +.htmlview .annotation:hover { + background-color: #ffcccc; +} +.htmlview .pe .annotation:hover { + background-color: #96e0e4; +} +*.htmlview *.annotation-inline-box { + position: static; +} + +/* + * Przypisy w tekście + */ + +.htmlview .annotation-inline-box:hover > span[x-annotation-box]{ + display: block; +} + +.htmlview .annotation-inline-box > span[x-annotation-box] { + display: none; + width: 300px; + font-size: 10pt; + line-height: 12pt; + font-weight: normal; + font-style: normal; + background: #fffe93; + border: 1px solid black; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + padding: 3px 5px; + text-decoration: none; + z-index: 600; +} + +/* + * Przypisy na końcu utworu (aktualnie nieuzywane) + */ +.htmlview .annotations-block { + counter-reset: secondary; +} + +.htmlview .annotations-block .annotation-body { + position: relative; + padding-left: 2.5em; + padding-top: 0.2em; +} + +.htmlview .annotations-block .annotation-backref { + position: absolute; + top: 0.4em; + left: -0.4em; + width: 2.5em; + text-align: right; +} + +.htmlview .annotations-block .annotation-backref:before { + content: "[" counter(secondary) "]"; + counter-increment: secondary; +} + +/* + * EDITABLE ELEMENTS + */ +.htmlview *[x-editable] { + position: relative; + padding: 2px; + margin-left: 0; + border: 1px solid transparent; +} + +/* focused editable element */ +.htmlview *[x-editable]:hover { + z-index: 900; +} + +.htmlview *[x-editable][x-open] { + visibility: hidden; +} + +.edit-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button { + position: absolute; + top: -21px; + left: -1px; + width: 72px; + height: 28px; + display: block; + /* margin: 4px 0 2px 0;*/ + padding: 5px 5px 2px 5px; + background-color: #FAFAFA; + /* z-index: 3000;*/ + /* color: #FFF; + z-index: 1500; + */ + border: 1px solid #DDD; + border-bottom: none; +} + +.delete-button { + left: 70px; +} + +.tytul-button { + left:150px; + width:100px; +} + +.wyroznienie-button { + left:250px; + width:100px; +} +.slowo-button { + left:350px; + width:100px; +} +.znak-button { + left:450px; + width:100px; +} + +.edit-button:hover, .edit-button:active, +.delete-button:hover, .delete-button:active, +.accept-button:hover, .accept-button:active, +.tytul-button:hover, .tytul-button:active, +.wyroznienie-button:hover, .wyroznienie-button:active, +.slowo-button:hover, .slowo-button:active, +.znak-button:hover, .znak-button:active { + /* color: #FFF;*/ + background-color: #999; + color: #FFF; +} + +/* + * VISIBILITY RULES + */ +.default-menu { + visibility: inherit; + opacity: 0.2; +} + +.default-menu:hover { + opacity: 1; + z-index: 5000; +} + +.htmlview *[x-annotation-box] > .default-menu { + opacity: 1; +} + +.htmlview *[x-editable][x-open] > .default-menu { + visibility: hidden; +} + +.htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu { + visibility: hidden; +} + +.htmlview *[x-editable] > .edit-menu { + visibility: hidden; +} + +.htmlview *[x-editable] *[x-annotation-box] > .edit-menu { + visibility: hidden; +} + +.htmlview *[x-editable][x-open] > .edit-menu { + visibility: visible; +} + +.htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu { + visibility: visible; +} + +.html-editarea { + border: 0; + background-color: gray; + padding: 1px; + z-index: 2000; + position: absolute; +} + +.html-editarea textarea { + position: absolute; + top: 0; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + z-index: 0; + font-size: 10pt; + /* background-color: ivory;*/ +} + +.htmlview .out-of-flow-text { + display: block; + font-family: monospace; + border: 2px solid red !important; + white-space: pre-line; +} + +.htmlview .out-of-flow-text::before { + content: "Tekst w tej ramce nie jest otagowany!"; + background-color: #ff6c6c; + color: black; + font-size: 10pt; + line-height: 12pt; + border: 1px solid black; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + padding: 5px 1em; + margin: 0 0 0 1em; + text-align: justify; + display: inline; + float: right; + max-width: 25%; +} + +.unknown-tag { + background-color: yellow; + margin: -0.25em; + padding: 0.25em; + border: 1px solid orange; +} + +.alien { + color: red; +} + +/* specialChars */ +#specialCharsContainer { + text-align: center; + width: 600px; + height: 400px; + padding:20px; + background-color: gray; + position: absolute; + top: 20px; + left: 20px; + z-index:1000; + overflow:auto; +} +#specialCharsContainer a { + color: white; + font-weight: bold; +} + +#tableSpecialChars td input { + background-color: transparent; + border:0; + color: white; +} + +#tableSpecialChars td input.recentSymbol { + background-color: white; + border:0; + color: black; +}