| @charset "utf-8"; |
| @import "../util"; |
| |
| /** |
| * Styles for the KWIC view. |
| */ |
| |
| $font-size: 10pt; |
| |
| #search { |
| position: relative; |
| margin-bottom: 30px; |
| overflow: visible; |
| |
| div.matchinfo { |
| display: none; |
| } |
| |
| > ol { |
| overflow-x: hidden; |
| overflow-y: visible; |
| width: auto; |
| text-indent: 0; |
| list-style-type: none; |
| margin: 0; |
| padding: 0; |
| border: $result-border-size solid $kwic-border; |
| font-size: $font-size; |
| |
| > li { |
| display: flex; |
| flex-direction: row; |
| flex-wrap: nowrap; |
| align-items: stretch; |
| align-content: stretch; |
| |
| border: { |
| style: solid; |
| color: $dark-orange; |
| width: 0; |
| } |
| |
| // Actions |
| .button-group.button-view { |
| display: none; |
| } |
| |
| // Zebra style |
| &:nth-of-type(even) div.match-main div.match-wrap { |
| background-color: $kwic-line-even; |
| } |
| |
| // References |
| p.ref { |
| display: none; |
| } |
| |
| div.meta, |
| div.match-main { |
| position: relative; |
| cursor: pointer; |
| } |
| |
| div.match-main { |
| display: block; |
| flex: 7 0; |
| z-index: 4; |
| overflow: hidden; |
| |
| > div.match-wrap { |
| width: 99999%; |
| margin-left: -49999.5%; |
| background-color: $kwic-line-noneven; |
| overflow-x: hidden; |
| overflow-y: visible; |
| white-space: normal; |
| } |
| } |
| |
| div.meta { |
| flex: 1 0; |
| min-width: 12em; |
| max-width: 15em; |
| text-align: left; |
| width: 2px; |
| z-index: 5; |
| overflow-y: hidden; |
| overflow-x: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| background-color: lighten($middle-grey, 5%); |
| color: $nearly-white; |
| font-size: 75%; |
| padding: 0 5pt; |
| |
| border: { |
| color: $dark-grey; |
| style: solid; |
| width: 2px 1px 0 0; |
| } |
| |
| // Tiny hack |
| &:before { |
| content: " "; |
| display: inline-block; |
| height: 100%; |
| vertical-align: middle; |
| } |
| |
| &:empty { |
| border-width: 0 1px 0 0; |
| } |
| |
| &.flip { |
| background-color: lighten($middle-grey, 17%); |
| } |
| } |
| |
| &:first-of-type div.meta { |
| border-top-width: 0; |
| } |
| |
| &:last-of-type div.meta { |
| border-bottom-width: 0; |
| } |
| } |
| } |
| } |
| |
| |
| /** |
| * Snippet rules |
| */ |
| div.snippet { |
| text-overflow: ellipsis; |
| text-indent: 0; |
| text-shadow: $light-shadow; |
| font-size: 0; |
| white-space: nowrap !important; |
| |
| > span, mark { |
| padding: 5pt 0 6pt 0; |
| font-size: $font-size; |
| } |
| |
| > mark, |
| > span.match { |
| font-weight: bold; |
| color: $black; |
| text-shadow: none; |
| padding-left: 4pt; |
| padding-right: 2pt; |
| } |
| |
| > span.match > span.cutted::after { |
| @include icon-font; |
| content: $fa-cut; |
| color: $light-green; |
| |
| padding: { |
| left: 4pt; |
| right: 4pt; |
| } |
| } |
| |
| &.startMore:before, |
| &.endMore:after { |
| content: "…"; |
| padding-left: 2pt; |
| padding-right: 2pt; |
| } |
| |
| // Flags |
| div.flag { |
| position: absolute; |
| height: 100%; |
| top: 0; |
| left: 0; |
| width: 11px; |
| background-color: $dark-orange; |
| border-right: 1px solid $darkest-orange; |
| } |
| } |
| |
| |
| /** |
| * Active rules |
| */ |
| body.no-js #search > ol > li:active, |
| #search > ol > li.active, |
| #search > ol > li:target { |
| position: relative; |
| display: block; |
| background-color: $dark-orange; |
| text-align: left; |
| border-width: 2px; |
| white-space: normal; |
| height: auto; |
| width: auto; |
| overflow: hidden; |
| |
| div.matchinfo { |
| display: block; |
| } |
| |
| + li.active { |
| border-top: $border-size solid $light-grey; |
| padding-top: 3 * $border-size; |
| |
| .button-group.button-view { |
| padding-top: 3 * $border-size; |
| } |
| } |
| |
| .snippet { |
| white-space: normal !important; |
| padding: 2pt 0 5pt 5pt; |
| background-color: $light-orange; |
| |
| span { |
| display: inline !important; |
| } |
| |
| > * { |
| background-color: transparent; |
| } |
| |
| span.inline-marker[data-key][data-value]:not([data-value=""]) { |
| font-size: 85%; |
| text-shadow:none; |
| font-weight: normal; |
| color: $dark-grey; |
| &::before, &::after { |
| display: inline-block !important; |
| border-width: 2px; |
| border-radius: 0; |
| margin: 0; |
| padding: 0 4pt; |
| } |
| &::before { |
| color: white; |
| margin-right: 0; |
| border-top-left-radius: 5px; |
| border-bottom-left-radius: 5px; |
| border-width-right: 0; |
| background-color: $dark-orange !important; |
| content: attr(data-key) ':'; |
| } |
| |
| &::after { |
| border-width-left: 0; |
| margin-left: 0; |
| margin-right: 3pt; |
| padding-left: 1pt; |
| border-top-right-radius: 5px; |
| border-bottom-right-radius: 5px; |
| background-color: $dark-orange !important; |
| content: attr(data-value); |
| } |
| } |
| |
| div.flag { |
| display: none; |
| } |
| |
| margin: { |
| top: 0; |
| right: $right-view-distance; |
| bottom: 0; |
| left: 0; |
| } |
| |
| > span { |
| line-height: 1.4em; |
| width: auto; |
| |
| &.context-left { |
| margin-left: 0; |
| display: inline; |
| overflow: visible; |
| text-align: left; |
| width: auto; |
| } |
| } |
| } |
| |
| .button-group.button-view { |
| display: block; |
| } |
| |
| div.match-main { |
| display: block; |
| width: 100%; |
| |
| div.match-wrap { |
| cursor: default; |
| min-height: 20pt; |
| background-color: $dark-orange; |
| width: 100%; |
| margin-left: 0; |
| overflow-x: visible; |
| white-space: normal; |
| } |
| } |
| |
| div.meta { |
| display: none; |
| } |
| |
| p.ref { |
| display: block; |
| color: $nearly-white; |
| padding: 3pt 10pt 3pt 3pt; |
| padding-right: $right-view-distance; |
| margin: 0pt; |
| width: 100%; |
| bottom: 0; |
| z-index: 30; |
| |
| > span.sigle { |
| font-size: 75%; |
| vertical-align: top; |
| color: $light-orange; |
| float: right; |
| } |
| |
| > div.button-panel + * { |
| margin-left: .5em; |
| } |
| } |
| } |
| |
| |
| /** |
| * Alignment rules |
| */ |
| #search ol { |
| span.context-left { |
| display: inline-block; |
| width: 50.01%; |
| text-align: right; |
| } |
| |
| // Right aligned |
| &.align-right { |
| text-align: right; |
| |
| div.match-main span.context-right { |
| display: inline-block; |
| width: 49.915%; |
| text-align: left; |
| } |
| } |
| |
| // Center aligned |
| &.align-center { |
| div.match-main { |
| width: 100% !important; |
| |
| > .match-wrap { |
| position: relative; |
| margin-left: 0; |
| } |
| } |
| |
| li:not(.active) div.snippet { |
| white-space: normal; |
| text-align: center; |
| width: 100000pt; |
| margin-left: -50000pt; |
| |
| span.context-left { |
| display: inline-block; |
| text-align: right; |
| width: 40000pt; |
| margin-left: 70vw; |
| } |
| |
| span.context-right { |
| display: inline-block; |
| text-align: left; |
| width: 40000pt; |
| } |
| } |
| } |
| } |
| |
| |
| /** |
| * Fix empty contexts |
| */ |
| #search ol span { |
| &.context-left, |
| &.context-right { |
| &:empty::after { |
| content: " "; |
| display: inline-block; |
| } |
| } |
| } |
| |
| |
| /** |
| * Highlight rules |
| */ |
| mark { |
| background-color: inherit; |
| color: inherit; |
| } |
| |
| mark > mark, |
| em, |
| .level-0 { |
| border-bottom-width: 2px; |
| border-bottom-style: solid; |
| padding-bottom: 0px !important; |
| font-style: normal; |
| } |
| |
| mark > mark > mark, |
| em > em, |
| .level-1 { |
| padding-bottom: 3px !important; |
| } |
| |
| mark > mark > mark > mark, |
| em > em > em, |
| .level-2 { |
| padding-bottom: 6px !important; |
| } |
| |
| |
| #search > ol > li { |
| &:not(.active) mark > mark > mark > mark, |
| &:not(.active) em > em > em { |
| line-height: 180%; |
| } |
| &.active mark > mark > mark > mark, |
| &.active em > em > em { |
| line-height: 250%; |
| } |
| } |
| |
| .class-1 { border-color: $kwic-highlight-1; } |
| .class-2 { border-color: $kwic-highlight-2; } |
| .class-3 { border-color: $kwic-highlight-3; } |
| .class-4 { border-color: $kwic-highlight-4; } |