diff options
Diffstat (limited to 'org.eclipse.help.webapp/m/index.css')
-rw-r--r-- | org.eclipse.help.webapp/m/index.css | 668 |
1 files changed, 668 insertions, 0 deletions
diff --git a/org.eclipse.help.webapp/m/index.css b/org.eclipse.help.webapp/m/index.css new file mode 100644 index 000000000..2595bff90 --- /dev/null +++ b/org.eclipse.help.webapp/m/index.css @@ -0,0 +1,668 @@ +/******************************************************************************* + * Copyright (c) 2020 Holger Voormann and others. + * + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + ******************************************************************************* + + Structure: + ____________________________________________ + | #h(eader) | + |--------------------------------------------| + | #m(ain area) | + | ________________________________________ | + | | | | | | + | | #t(oc) | #s(lider) | #c(ontent iframe) | | + | |________|___________|___________________| | + |--------------------------------------------| + | #f(ooter) | + |____________________________________________| + + *******************************************************************************/ +* { + border: 0; + margin: 0; + padding: 0; +} +input:focus { + outline: none; +} +html, body, #m { + height: 100%; + overflow: hidden; +} +body, input, button { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Lucida Grande", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 1rem; + color: #222; +} +body { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column; + flex-flow: column; + background: #eef0f3; +} +a { + text-decoration: none; +} +strong { + color: #444; +} +button { + background: transparent; + font-size: 1em; + cursor: pointer; +} +#h { + padding: 6px 6px 4px; + display: flex; +} +#m { + width: 100%; + height: 100%; + padding: 2px 0 0; + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + display: -webkit-flex; + display: flex; +} +#t { + width: 400px; + overflow: auto; + scroll-behavior: smooth; +} +#t.hide { + -ms-overflow-style: -ms-autohiding-scrollbar; /* IE and Edge: avoid that the scrollbar is shown even when TOC is hidden */ +} +#t .tree { + padding-top: 6px; +} +#s { + width: 12px; + z-index: 2; + cursor: e-resize; +} +#c, .c { + -webkit-flex: auto; + flex: auto; +} +.c { + overflow: auto; + flex-basis: 0; +} +#t, #c, .c { + height: 1px; + min-height: 100%; + max-height: 100%; +} +#t, #c, .c, .qf, #a { + background: #fff; + box-shadow: 0 1px 3px rgba(0,0,0,0.15); +} + +#f { display: none; } + +/*** main toolbar (in the upper left) ***/ +.y { + display: flex; + margin-right: 6px; +} + +/*** button ***/ +.b { + display: inline-block; + padding: 8px; + font-size: 0; + color: #555; + background: transparent; + box-sizing: content-box; + height: 20px; + width: 20px; +} +.b:hover, #h .q0 > .b:hover { + background: #d7d9db; + border-radius: 5px; +} + +/*** search field (area) ***/ +.q0 { + flex: auto; + display: flex; +} +.q1 { + position: relative; + max-width: 640px; + flex: auto; +} +.q, .qf, .qm { + display: flex; + border-radius: 8px; + background: #fff; +} +.q { + border: 1px solid #fff; + box-shadow: 0 1px 1px rgba(0,0,0,0.05); +} +.qf, .qm { + border: 1px solid #37e; + box-shadow: 0 1px 3px rgba(119,153,238,0.4); +} +.qm { + border-radius: 8px 8px 2px 0; + border-bottom-color: rgba(255,255,255,0); +} +.q0 .b:hover { + background: none; +} +.qf.qa .b, .qm.qa .b, .q.qa .b:hover, #b .a .b, #b .a .b:hover { + color: #fff; + background: #37e; + margin: 0 -0.5px 0 0; /* workaround for Microsoft Edge to avoid white between blue button and blue border */ +} +.qf.qa .b { + border-radius: 0 7px 7px 0; +} +.qm.qa .b { + border-radius: 0 7px 0 0; +} +.q .b:hover { + background: #fff; + cursor: default; +} +.q0 .b { + border-radius: 7px; + margin: 0; + padding: 7.8px; +} +.q .b, .qf .b { + cursor: default; +} +.q2 { + display: flex; + flex: auto; +} +.q2, .q1 .b { + z-index: 2; +} +#q, .qh { + width: 100%; /* needed for some mobiles where "flex: auto" is not enough or does not work */ + flex: auto; + min-width: 24px; + border: 0; + margin: 2px 0; + font-size: 1rem; + background: #fff; +} +.qh { + margin: 0; + color: #ddd; +} +#q::placeholder { + color: #999; + opacity: 1; + font-style: italic; +} +.u { + position: relative; +} + +/*** search proposals (.p) and scopes button (.s) with drop-down (.u) ***/ +.c { + padding: 6px; +} +.r0 { + margin: 1em; + padding: 6px 0; +} +.j, .j li, .j a, .j button { + list-style: none outside none; + display: block; +} +.j { + overflow-wrap: anywhere; +} +.p a, .p button, .u li { + padding: 0.5em 9px; + box-sizing: border-box; + width: 100%; + text-align: left; + cursor: pointer; +} +.p .w { + float: right; +} +.p .n { + clear: both; + margin-top: 3px; +} +.p .v { + display: inline-block; +} +#r .j li a, #b li a, .ba { + max-width: 640px; + margin: 0 0 0.25em 10px; + padding: 6px; + border-radius: 4px; +} +.j .z a, .j .z button, .j a:focus, .j button:focus, .u .z { + background: #e8f2fe; + outline: none; +} +.j, .j a, #r .t, #b a { + color: #222; +} +.j a .w, #r .tree .l, #r .t .tl { + color: #062; +} +#r .l { + cursor: pointer; +} +.w, .n { + font-size: 85%; +} +#r .w, #r .n { + margin-top: 3px; +} +.p, .u { + position: absolute; + float: left; + left: 0; + margin-top: -1px; + top: 100%; + width: 100%; + padding: 0; + z-index: 3; + background: rgba(0, 0, 0, 0); +} +.u { + margin: -4px 0 0 3px; + width: auto; +} +.s0 { + position: relative; + z-index: 5; +} +.s { + background: #f2f4f7; + box-sizing: content-box; + display: flex; + margin: 3px 6px 3px 3px; + padding: 0 0 0 8px; + align-items: center; + border-radius: 5px; + font-size: 1rem; + white-space: nowrap; +} +.s span { + max-width: 240px; + overflow: hidden; +} +.s, .d, .de { + color: #999; +} +.qf .s, .qm .s, .s:hover .d, .s:hover .de { + color: #222; +} +.s .d, .s .de { + display: inline-block; + transform: rotate(90deg); + margin-left: -6px; + margin-right: 6px; + margin: 0 2px 0 -4px; +} +.s .de { + margin: 0 6px 0 -6px; +} +.p ol, .u ul { + display: block; + padding: 0; + margin: 0; + background: #fff; + border: 1px solid #37e; + border-top: none; + border-radius: 0 0 7px 7px; + box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2); + overflow: hidden; +} +.s, .u ul { + border: 1px solid #edeff2; /* -2 V of background */ +} +.u li { + white-space: nowrap; + padding-left: 36px; +} +.u li.x, .u li.y { + padding-left: 9px; +} +.u li.l { + border-top: 1px solid #edeff2; +} +.u li.x:before { + margin-right: 6px; +} +.p .f { + display: none; + position: absolute; + top: 0; + left: 100%; + margin-left: -1px; + height: 100%; + min-height: 42em; + width: 100%; + background: #ffffff; + border: 1px solid #999999; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + z-index: 5; +} +.p .z .f { + display: block; + z-index: 5; +} +.count { + display: inline-block; + background: #eee; + border-radius: 2em; + color: #666; + font-size: 0.8em; + font-weight: bold; + line-height: 1; + margin: 0; + min-width: 1em; + padding: 3px 7px 4px 7px; + position: relative; + text-align: center; + vertical-align: top; +} +#r .tree { + margin-bottom: 0.75em; +} +.tree input { + margin-right: 0.5em; +} + +#h .q0 > .b { + margin-left: 6px; +} + +/*** bookmarks (#b) and scopes (#o) ***/ +.g { + margin: 0 0 0.5em 10px; + font-weight: bold; +} +#b .b, #o .b { + width: auto; + font-size: 1em; + font-weight: bold; + background: #f2f4f7; + border: 1px solid #edeff2; + border-radius: 5px; + margin: 0.5em -12px 0 18px; + color: #999; +} +#b .b:hover, #o .b:hover { + color: #222; +} +#b .br:hover, #o .br:hover { + color: #fff; + background-color: #c11; +} +#b .bc, #o .bc { + color: #555; + background: none; + border: none; + margin: 1em 0 2px 2em; + float: right; +} +#b .bc:hover, #o .bc:hover { + background: #d7d9db; +} +#b li .b { + margin: 0; +} +#o li .b { + margin: 1px; +} +#b input, #o .a input { + width: 320px; +} +#b .br, #o .br { + color: #fff; + background: #e33; +} +#b li .br, #o li .b { + padding: 4px 8px; +} +#b .a .b { + border: none; + border-radius: 0 5px 5px 0; +} +#b li, #o li { + margin: 0 0 0 18px; + list-style: none; +} +#b li a, .ba { + display: inline-flex; + align-items: center; + margin: 0; + padding: 0 3px; +} +#b li a:hover, .ba:hover { + background-color: #e8f2fe; +} +#b li a span, .ba { + padding: 3px; +} +.c .a { + border: 1px solid #37e; + border-radius: 8px; + margin: 1em 0 1em 16px; + display: inline-flex; + min-height: 36px; + align-items: center; +} +#o div.g { + margin: 1em 0 0.5em 10px; +} +.c .tree { + padding: 0 0 8px 0; +} +#b input, #o .a input { + margin: 3px 0.5em; +} + +/*** menu ***/ +#a { + background: #eef0f3; + height: 100%; + width: 0; + position: fixed; + z-index: 9; + top: 0; + right: 0; + overflow-x: hidden; + transition: all 0.25s ease-in; + border-left: #ddd solid 1px; + display: flex; + flex-direction: column; +} +.e { + text-align: right; + padding: 6px; +} +#a > .b { + width: auto; + height: auto; + font-size: 1em; + margin: 3px 6px; + color: #222; + text-align: left; + padding-left: 40px; /* = 8 + 20 + 12 */ +} +#af { + margin: 3px 6px; +} +#af span { + display: inline-block; + padding: 8px 8px 8px 40px; +} +#af .b { + font-size: 1rem; +} +#a > #ap.b, #a > #app.b { + padding-left: 8px; +} +#a > .b:hover { + color: #111; +} +#a > #ah { + padding-left: 40px; +} +#a > #ah.x { + padding-left: 6px; +} +#ah.x:before, #ap:before, #app:before { + display: inline-block; + vertical-align: bottom; + font-size: 0; + width: 20px; + height: 20px; + margin: 0 12px 0 0; +} +#ah.x:before, .u li.x:before { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' focusable='false' role='presentation'%3E%3Cpath d='M 18.720152,3.3629316 C 18.060084,2.7820531 17.056888,2.8348761 16.47601,3.4949448 L 7.7898314,13.157953 3.4335592,8.9600604 C 2.7999482,8.3528147 1.7966621,8.3791818 1.1894164,9.0128871 0.58217173,9.6465896 0.60853792,10.649785 1.2422432,11.257031 l 5.5443048,5.333102 c 0.2903944,0.290393 0.6864358,0.448864 1.1088434,0.448864 h 0.052827 c 0.4224085,-0.02636 0.8448161,-0.211204 1.1088434,-0.528055 L 18.825715,5.6334442 C 19.432961,4.9470093 19.380137,3.9438138 18.720159,3.3629353 Z' fill='%2354595d'/%3E%3C/svg%3E"); + + /* required for IE: */ + display: inline-block; + width: 20px; + +} +#ap:before, #app:before { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' focusable='false' role='presentation'%3E%3Cpath d='m 6.1536984,14.617279 v 1.536358 h 7.6920456 v -1.536358 z m 0,-2.564015 v 1.536357 h 7.6920456 v -1.536357 z m -4.615227,1.536357 h 1.538409 v 4.10345 c -0.0051,1.246112 0.281016,1.537384 1.538409,1.537384 H 15.384153 c 1.257393,0 1.538409,-0.231787 1.538409,-1.537384 v -4.10345 h 1.538409 c 1.307648,0.02051 1.553281,-0.270247 1.538409,-1.537383 V 6.411404 c 0,-1.2050867 -0.194865,-1.5394343 -1.538409,-1.5394343 H 16.922562 V 2.30898 C 16.937433,1.0423563 16.691801,0.76954505 15.384153,0.76954505 H 4.6152894 c -1.230727,0 -1.543537,0.29332335 -1.538409,1.53943495 v 2.5629897 h -1.538409 c -1.323032,0 -1.538409999868,0.2881953 -1.538409999868,1.5394343 v 5.640834 C -0.0050386,13.298349 0.3077434,13.610134 1.5384714,13.589621 Z M 15.384153,17.692046 H 4.6152894 v -6.66644 H 15.384153 Z m 0.96407,-9.485831 c 0,-0.461523 0.369218,-0.830228 0.830741,-0.830228 0.461522,0 0.830741,0.368705 0.830741,0.830228 0,0.461523 -0.369219,0.830741 -0.830741,0.830741 -0.461523,0 -0.830741,-0.369218 -0.830741,-0.830741 z M 4.6152894,2.3079544 H 15.384153 V 4.8740209 H 4.6152894 Z' fill='%2354595d'/%3E%3C/svg%3E"); +} +.ht { + background: #ff6; +} + +/*** tree ***/ +.tree ul { + margin: 0; + padding: 0 0 0 8px; + line-height: 1.3; +} +.tree .closed ul, div#results .closed ul { + display: none; +} +.tree .l { + display: inline-block; + padding: 2px 6px; + border-radius: 4px; + color: #222; + + /* TODO with icons */ + margin-left: 32px; + + /* TODO without icons */ + margin-left: 12px; + +} +.tree .l img { + + /* TODO with icons */ + margin: 0 4px -2px -20px; + + /* TODO without icons */ + display: none; + +} +.tree li { + padding: 0 0 0 10px; /* indent TOC subitems: 10px => .tree a padding-left: 42px - 10px = 32px */ + list-style: none; + position: relative; +} +.tree li.xx > .l, .tree li.x > .l { + font-weight: bold; +} +.tree li.xx > .l { + color: #333; +} +.tree li.x > .l { + color: #444; +} +.tree li.xx > .l { + background-color: #eef0f3; +} +.tree .l, .tree li.xx > .l, .tree li.x > .l, .tree li.xx > .l:hover, .tree li.x > .l:hover { + transition: all 0.1s ease; +} +.tree li > .l:hover { + transition: all 0.1s 0.1s ease; + background-color: #f4f9ff; +} +.tree li > .l:focus { + background-color: #e8f2fe; + outline: none; +} +.tree .h { + /* prevent text selection */ + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; /* otherwise in MS Edge a blinking text cursor will be shown */ + display: inline-block; + position: absolute; + left: -2px; + cursor: pointer; + animation: fly-left 3s ease-in forwards; + color: #999; + transition: transform .25s, color .25s; +} +.tree .open > .h { + color: #333; + transform: rotate(90deg); +} + +/*** logo ***/ +.k1 /* width: 36..146 */ { + /* logo icon */ +} +.kf /* width: > 146 */ { + /* logo full */ +} + +/******************************************************************************* + * Mobile */ + +@media screen and (max-width: 768px) { + + #t, #s, .i, .k0, .k1, .kf, .ke0, .ke1, .kef { + display: none; + } + #m { + overflow: hidden; + } + #t.show { + display: block; + min-width: 100%; + } + .s span { + max-width: 60px; + overflow: hidden; + } + +} + +@media screen and (max-height: 360px) { + .p ol { + overflow-y: auto; + max-height: calc(100vh - 38px); + -ms-overflow-style: none; + scrollbar-width: none; + } + .p ol::-webkit-scrollbar { + display: none; + } +}
\ No newline at end of file |