X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/f8dc1e5b5062456deab01f927e82b753202f31e3..58e0903a3f0e1e105a11638b18b588e9eb6a8b9e:/platforma/static/css/html.css diff --git a/platforma/static/css/html.css b/platforma/static/css/html.css old mode 100755 new mode 100644 index 9db90bed..ba0f8535 --- a/platforma/static/css/html.css +++ b/platforma/static/css/html.css @@ -1,11 +1,44 @@ /* 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; + padding: 3em; + padding-left: 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'] { + display: none; } .htmlview * { @@ -25,6 +58,10 @@ text-decoration: none; } +.htmlview a:hover { + text-decoration: none; +} + .htmlview h1 { font-size: 3em; margin: 1.5em 0; @@ -57,25 +94,6 @@ margin: 0; } -/* ======================== */ -/* = Footnotes and themes = */ -/* ======================== */ -.htmlview .theme-begin { - border-left: 0.1em solid #DDDDDD; - color: #777; - padding: 0 0.5em; - width: 7.5em; - font-style: normal; - font-weight: normal; - font-size: 16px; - float: right; - margin-right: -9.5em; - clear: both; - left: 40em; - line-height: 1.5em; - text-align: left; -} - .htmlview #footnotes div { margin: 1.5em 0 0 0; } @@ -120,17 +138,11 @@ } .htmlview .dzielo_nadrzedne { - font-size: 1.5em; - display: block; - line-height: 1.5em; - margin-bottom: -0.25em; + /* */ } .htmlview .podtytul { - font-size: 0.5em; - display: block; - line-height: 1.5em; - margin-top: -0.25em; + /* */ } .htmlview .didaskalia { @@ -143,7 +155,53 @@ } .htmlview .strofa { - margin: 1.5em 0 0 auto; + margin: 1.5em 0 0.5em auto; +} + +/* wersy */ +.htmlview .strofa .wers_wciety, .htmlview .strofa .wers_wciety[data-wlf-typ = +'1'] { + margin-left: 1em; +} + +.htmlview .strofa .wers_wciety[data-wlf-typ = +'2'] { + 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; +} + +/* 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 { @@ -155,7 +213,7 @@ margin: 1.5em 0 0; } -.htmlview p.motto { +.htmlview .motto { text-align: justify; font-style: italic; margin: 1.5em 0 0; @@ -171,8 +229,7 @@ padding-bottom: 1.5em; } -.htmlview div.nota p, -.htmlview div.dedykacja p { +.htmlview div.nota p, .htmlview div.dedykacja p { text-align: right; font-style: italic; } @@ -203,10 +260,7 @@ font-style: italic; } -.htmlview .mat, -.htmlview .slowo_obce, -.htmlview .tytul_dziela, -.htmlview .didaskalia { +.htmlview .mat, .htmlview .slowo_obce, .htmlview .tytul_dziela, .htmlview .didaskalia { font-style: italic; } @@ -226,154 +280,286 @@ margin: 1em; } -/* Przypisy */ -.htmlview .annotation { - vertical-align: super; - text-decoration: none; - font-size: 0.66em; +.parse-warning .message { + color: purple; + font-weight: bold; } -.htmlview a:hover { +/* 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; +} + +.utwor > .uwaga { + float: none; + padding: 0.5em 1em; + margin: 1em; + max-width: 100%; + max-height: 100%; +} + +.htmlview .uwaga:hover { + 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-weight: normal; + font-size: 13px; + line-height: 18px; + font-variant: normal; text-decoration: none; + 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; } -/* .htmlview .annotation:before { - content: "[\2217]"; -} */ +.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 */ +.htmlview .annotation { + vertical-align: super; + text-decoration: none; + /* font-size: 10px; */ +} -.htmlview span.annotation:before { +.htmlview .annotation:before { content: "[" counter(main) "]"; counter-increment: main; } .htmlview .annotation:hover { - background-color: #dfdfdf; + background-color: #96e0e4; +} +*.htmlview *.annotation-inline-box { + position: static; } -.parse-warning .message { - color: purple; - font-weight: bold; +/* + * Przypisy w tekście + */ +.htmlview .annotation-inline-box > span[x-annotation-box] { + display: none; + position: absolute; + width: 300px; + font-size: 10pt; + line-height: 12pt; + font-weight: normal; + font-style: normal; + background: #fffe93; + border-color: black; + border-width: 1px; + border-style: solid; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + padding: 3px 5px; + text-decoration: none; + z-index: 1000; +} + +/* + * 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] { - border: 2px solid white; - padding: 5px; + position: relative; + padding: 2px; + margin-left: 0; + border: 1px solid #FFF; } /* focused editable element */ -.htmlview *[x-editable]:hover -{ - background-color: #dfdfdf; - border: 2px solid black; - z-index: 100; +.htmlview *[x-editable]:hover { + z-index: 900; } -.htmlview *[x-editable][x-open] -{ +.htmlview *[x-editable][x-open] { visibility: hidden; } -.htmlview *[x-editable] .context-menu { +.edit-button, .delete-button, .accept-button { position: absolute; - top: -28px; - left: -2px; - height: 24px; - - text-align: center; + top: -21px; + left: -1px; + width: 72px; + height: 21px; + display: block; + /* margin: 4px 0 2px 0;*/ + padding: 5px 5px 2px 5px; + border: none; + background-color: #FAFAFA; + /* z-index: 3000;*/ + /* color: #FFF; + z-index: 1500; + */ + border: 1px solid #DDD; + border-bottom: none; +} - font-size: 14px; - line-height: 24px; - font-weight: normal; - font-style: normal; +.delete-button { + left: 70px; +} - background-color: #dfdfdf; - margin: 0px; - padding: 0px; +.edit-button:hover, .edit-button:active, .delete-button:hover, .delete-button:active, .accept-button:hover, .accept-button:active { + /* color: #FFF;*/ + background-color: #999; + color: #FFF; +} - border-top: 2px solid black; - border-left: 2px solid black; - border-right: 2px solid black; - - display: none; - visibility: visible; - overflow: hidden; - - -moz-border-radius-topright: 5px; - -moz-border-radius-topleft: 5px; +/* + * VISIBILITY RULES + */ +.default-menu { + visibility: inherit; + opacity: 0.2; +} - -webkit-border-top-right-radius: 5px; - -webkit-border-top-left-radius: 5px; +.default-menu:hover { + opacity: 1; + z-index: 5000; +} - z-index: 3000; +.htmlview *[x-annotation-box] > .default-menu { + opacity: 1; } -.htmlview *[x-editable] *.context-menu * { - padding: 5px; +.htmlview *[x-editable][x-open] > .default-menu { + visibility: hidden; } -.htmlview *[x-editable] *.context-menu *:hover { - background-color: yellow; - z-index: 3100; +.htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu { + visibility: hidden; } -/* - * VISIBILITY RULES - */ -.htmlview *[x-editable]:hover *.default-menu { - display: block; +.htmlview *[x-editable] > .edit-menu { + visibility: hidden; } -.htmlview *[x-editable][x-open] *.default-menu { - display: none; +.htmlview *[x-editable] *[x-annotation-box] > .edit-menu { + visibility: hidden; } -.htmlview *[x-editable][x-open] *.edit-menu { - display: block; +.htmlview *[x-editable][x-open] > .edit-menu { + visibility: visible; +} + +.htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu { + visibility: visible; } .html-editarea { - border: 2px solid black; + border: 0px; background-color: gray; padding: 1px; - z-index: 2000; + position: absolute; } -.html-editarea textarea -{ - border: 0px; +.html-editarea textarea { + position: absolute; + top: 0; margin: 0px; padding: 0px; - width: 100%; height: 100%; - z-index: 0; font-size: 10pt; - background-color: ivory; + /* background-color: ivory;*/ } -.html-editarea p.html-editarea-toolbar { - position: absolute; - background: gray; - - bottom: -26px; - height: 24px; - - left: 0px; - right: 0px; - - border: 2px solid black; - - margin: 0px; - padding: 0px; - - z-index: 100; +.htmlview .out-of-flow-text { + display: block; + font-face: 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: 0em; + margin-left: 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; +}