/*
* CQPweb: a user-friendly interface to the IMS Corpus Query Processor
* Copyright (C) 2008-today Andrew Hardie and contributors
*
* See http://cwb.sourceforge.net/cqpweb.php
*
* This file is part of CQPweb.
*
* CQPweb is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* CQPweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see .
*/
/* These are the bits and pieces of CSS that are for the "system" - ie, can't be changed just to "skin" the UI.
* many times, the clientside code depends on these being here. */
/*
* a note on measures. Primary unit here is rem.
* USUALLY, 1rem = 12pt = 16px = 100%.
*/
/*
TODO https://css-tricks.com/box-sizing/
The above recommends a practice for getting box sizing to work better.
Might make it possible to get rid of some of the table-based layout.
*/
/*
* =========
* RESET CSS
* =========
*/
/* Some selected bits from Meyer's classic reset.css, merged into base rules for CQPweb. */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
a, code, em, img, strong, sub, sup,
ol, ul, li, form, label,
table, tbody, tfoot, thead, tr, th, td,
footer, menu, nav,
audio, video {
margin : 0; /* margin & padding syntax is TOP RIGHT BOTTOM LEFT */
padding : 0;
border : 0;
text-indent : 0;
line-height : 120%;
font-size : inherit;
font-family : inherit;
}
html {
/* doesn't work in safari, apparently; but if available, we should use. */
scroll-behavior : smooth;
color : var(--colour-text-normal)
}
/* for debug: to see where the transparent patches are...
body { background-color:pink; }
*/
p {
/* standard paragraph: 0.8 rem above & below, nothing left or right. */
display : block;
margin : 0.8rem 0rem 0.8rem 0rem;
font-size : inherit;
font-family : inherit;
}
ul, ol {
margin : 1rem 0 1rem 0;
padding-left : 2.5rem;
}
ol {
list-style : decimal outside none;
}
ul {
list-style : disc outside none;
}
/* default table bordering : nothing! */
table {
border-spacing : 0;
border-collapse : separate;
}
/* put strong and em to useful defaults; set font for pre and code. */
em {
font-style : italic;
}
strong {
font-weight : bold;
}
pre, code {
font-family : "Courier New", Courier, "Lucida Console", Monaco, monospace;
}
/* setup pointers */
select, button, label, input[type="radio"], input[type="checkbox"], input[type="submit"] , input[type="reset"] , input[type="file"] {
/* because clickable */
cursor : pointer;
}
/* radio buttons and cursors have weird defaults in the user agent stylesheet */
input[type="radio"], input[type="checkbox"] {
margin : 0;
}
textarea, input[type="text"] {
cursor : text;
}
/* a generally-OK text size for all textareas. Specific classes of textarea may override. */
textarea {
font-size : 1rem;
}
/* end of basic resets */
/* TODO don't rely on the user agent stylesheet to make "submit" & buttons not crap... we should supply some decent styling ourselves for that! */
/*
* =====================================
* Colour scheme variables! Documenation
* =====================================
*/
/*
The following is what the colour scheme definition looks like.
-- FOUR basic layout colours: a foreground colour (normally pastel), a background colour (grey),
a strong colour (more vivid version of the pastel foregreound),
and a contrast colour (for messages / errors.
-- TWO layout colours that mostly don't change: data2 is s variant grey, ouline is white
because it's for linesbetween layiout boxes.
-- FOUR font colours:
-- normal: usually black, it needs to work against fg, bg, and string.
-- faint : usually grey, it is used for washed-out text.
-- bright: a colour that stands out against fg and strong (and needs to stand out against bg as well though it doesn't always.
-- mid : like bright, but less so. bright and mid are usually used for links.
ISSUES:
- "normal" doesn't always work equally against fg and strong.
- colour scheme "dusk is a good example of this. White is good against "stong", less good against fg, and bad against bg.
(I haven't yet dsared look at how it appears on top of onctrast).
Solution: split normal into fg, bg, strong, contrast - for what they stand in front of?
and those should be used for noonlinks;
Then, for mid and bright, these should be used for inks
BUT be careful with these
An unhovered ink should be normal - BUT we put these links on both fg and bg blocks.
So bright appears (onhover) on top of fg and strong.
Inactive CONTROLS are mid,but inactive menulinks are normal!
(sigh)
=================================================================
TYPE CONTROL MENU ITEM LINK
------------------------------------------------------------
Normal
L/o fg or bg fg fg or bg
text mid normal bright
Hover
L/o strong bg (same as normal)
text bright bright bright
=======================================================================
:root {
--colour-layout-fg : #d1a4ff ;
--colour-layout-bg : #d5d5d5 ;
--colour-layout-strong : #8000ff ;
--colour-layout-contrast : #ffeeaa ;
--colour-layout-data2 : #f0f0f0 ;
--colour-layout-outline : white ;
--colour-text-normal : black ;
--colour-text-strong : white ;
--colour-text-bright : yellow ;
--colour-text-faint : gray ;
}
solution:
new color, -text-strong
-bright =>
menuItem should use normal and bright still.
*/
/*
* =========================================================================================================
* Commonly-used string definitions (some, e.g. fonts, may become part of the modifiable stuff like colours)
* =========================================================================================================
*/
:root {
--font-ui : Verdana, Tahoma, Arial, Helvetica, sans-serif;
--font-content : "Times New Roman", Times, Georgia, serif;
--boxpad-default : 0.2rem 0.5rem 0.2rem 0.5rem;
}
/*
* ==================================================
* alignment classes for containers
* ==================================================
*/
/* replacement for align="left,right,center" in HTML. */
.algC {
text-align : center;
}
.algL {
text-align : left;
}
.algR {
text-align : right;
}
/* add margin auto to any table inside a text-centre block. */
.algC table {
margin-left : auto;
margin-right : auto;
}
/*
* ==========================
* different paragraph styles
* ==========================
*/
p.errormessage {
font-family : var(--font-ui);
font-size : 1rem;
}
p.instruction {
font-family : var(--font-ui);
font-size : 0.8rem;
}
p.helpnote {
font-family : var(--font-ui);
font-size : 0.8rem;
}
p.bigbold {
font-family : var(--font-ui);
font-size : 1.2rem;
font-weight : bold;
}
p.spacer {
font-size : 0.8rem;
padding : 0rem;
line-height : 10%;
height : 0.8rem;
}
/*
* ============
* table layout
* ============
*/
/* class for making any kind of block take up all horizontal space */
.fullwidth {
width : 100%;
}
/* class for making any kind of block take up only as much horizontal space as it needs */
.minwidth {
width : intrinsic;
width : -webkit-max-content;
width : -moz-max-content;
width : max-content;
}
/* class which replicates the old HTML "nowrap" Boolean attribute for table cells. */
.nowrap {
white-space : nowrap;
}
/* class which stops tables using the "margin" feture to centre thmeselves
.noCentre */
/*
seems to be unused
table.controlbox {
border: thick outset;
}
td.controlbox {
font-family: var(--font-ui);
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
border: medium outset;
}
*/
/*
* ==================
* Major layout units
* ==================
*
* NB don't forget the padding rule:
* padding: TOP RIGHT BOTTOM LEFT;
*/
table.layout-frame {
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.0625rem;
/* 0.0625rem = 1px given descent from html font-size */
}
th.layout-strong {
padding : 0.5rem;
background-color : var(--colour-layout-strong);
font-family : var(--font-ui);
font-size : 1rem;
font-weight : bold;
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.125rem;
color : var(--colour-text-strong);
}
td.layout-fg {
padding : var(--boxpad-default);
background-color : var(--colour-layout-fg);
font-family : var(--font-ui);
font-size : 0.8rem;
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.125rem;
}
td.layout-contrast {
padding : var(--boxpad-default);
background-color : var(--colour-layout-contrast);
font-family : var(--font-ui);
font-size : 0.8rem;
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.125rem;
}
td.layout-bg {
padding : var(--boxpad-default);
background-color : var(--colour-layout-bg);
font-family : var(--font-ui);
font-size : 0.8rem;
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.125rem;
}
/* class to make direct inline content of a cell have more space around it (as if it were WRITING | );
makes a th have the same top/bottom as the comfy td (a slighter increase in the case of th.layout-strong) */
td.comfy, th.comfy {
padding-top : 1rem;
padding-bottom : 1rem;
/* left / right padding stays as-is in a comfy cell. */
}
/* class to turn off the padding of any of the above (i.e. hollow them out) in order to let it be filled by an a.control-box */
td.hollow {
/* hollow cells are centred by default. Use "style" on the td to override if need be. */
padding : 0;
text-align : center;
}
td.hollow.algL {
text-align : left;
}
td.hollow.algR {
text-align : right;
}
/* braindead page nav adds "braindead-pager" to the class "hollow" (so the cells are of a set size) */
td.braindead-pager {
width : 6rem;
height : 2.5rem;
}
/* non-outlined box (with padding) */
td.basicbox {
padding : 0.625rem 0.5rem 0.625rem 0.5rem;
background-color : var(--colour-layout-fg);
font-family : var(--font-ui);
font-size : 0.8rem;
}
/* like basic box, but with no padding */
td.tightbox {
padding : 0;
background-color : var(--colour-layout-fg);
font-family : var(--font-ui);
font-size : 0.8rem;
}
/*
* ===========
* UI features
* ===========
*/
/* this blocks links from inheriting "block" from the para they are in.
Some specific classes will override that. */
/* the comment above seems to have come astray */
a.link {
color : var(--colour-text-bright);
text-decoration : underline dotted var(--colour-text-bright);
}
a.link:hover, a.link:visited {
text-decoration-style: dashed;
}
a.external::after {
content : url(../css/img/ext-link.png);
}
/* TODO there might need ot be a slightly different styling for with external ref in the monochrome view...*/
/* text that is a control button. These go within [...], and appear inline (they don't fill a cell properly if made "block"). */
a[class*=control-] {
cursor : pointer;
white-space : nowrap;
font-family : inherit;
font-size : inherit;
color : var(--colour-text-bright);
}
a.control-inline {
display : inline;
}
/* span.control-box-off formats text as a "dead link" IE an unusable control box.
Without it, control boxes without an would look weird. */
a.control-box, span.control-box-off {
display : block;
padding : 0.8rem;
}
a.control-inline:link, a.control-inline:visited, a.control-box:link, a.control-box:visited {
text-decoration : none;
}
a.control-inline:hover, a.control-inline:active, a.control-box:hover, a.control-box:active {
background-color : var(--colour-layout-strong);
}
th a.control-inline:hover, th a.control-inline:active, th a.control-box:hover, th a.control-box:active {
text-decoration : underline double;
}
/* creates hover-help with no actual action. */
a.control-info {
cursor : help;
display : inline;
}
a.control-info:hover {
background-color : var(--colour-layout-strong);
color : var(--colour-text-bright);
}
/*
* ===========
* Menu layout
* ===========
*/
nav {
width : 14rem;
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.0625rem;
/* cos 1px = 0.0625em */
}
a.menuItem {
display : block;
white-space : nowrap;
padding : var(--boxpad-default);
background-color : var(--colour-layout-fg);
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.125rem;
font-size : 0.8rem;
font-family : var(--font-ui);
}
a.menuItem:link, a.menuItem:visited {
background-color : var(--colour-layout-fg);
color : var(--colour-text-normal);
text-decoration : none;
}
a.menuItem:hover, a.menuItem:active {
background-color : var(--colour-layout-bg);
color : var(--colour-text-bright);
text-decoration : underline;
}
/* Currently-selected menu items & header items will not usually have an href;
* ergo, no visited/hover, and colour always = normal */
a.menuItem.current {
background-color : var(--colour-layout-bg);
color : var(--colour-text-normal);
text-decoration : none;
}
a.menuItem.header {
padding : 0.5rem;
background-color : var(--colour-layout-strong);
color : var(--colour-text-strong);
text-align : center;
font-weight : bold;
font-size : 1rem;
text-decoration : none;
}
/*
* =============================
* Styles for concordance layout
* =============================
*/
/* kwic layout concordance line */
td.kwic {
padding : 0.2rem;
background-color : var(--colour-layout-fg);
border-style : solid;
border-color : var(--colour-layout-outline);
}
td.kwic.before {
border-width : 0.125rem 0rem 0.125rem 0.125rem;
text-align : right;
}
td.kwic.after {
border-width : 0.125rem 0.125rem 0.125rem 0rem;
text-align : left;
}
td.kwic.node {
background-color : var(--colour-layout-data2);
border-width : 0.125rem 0.0625rem;
text-align : center;
}
td.lineview {
padding : var(--boxpad-default);
background-color : var(--colour-layout-fg);
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.125rem;
}
/* TODO note that parallel-line repeats lineview. So: td.lineview.parallel instead, likewise td.kwic.parallel? --- which only implement overrides? */
td.parallel-line {
padding : var(--boxpad-default);
background-color : var(--colour-layout-data2);
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.125rem;
}
td.parallel-kwic {
padding : var(--boxpad-default);
background-color : var(--colour-layout-data2);
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.125rem;
text-align : center;
}
td.text_id, td.conc_ln {
padding : 0.2rem;
background-color : var(--colour-layout-fg);
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.125rem;
text-align : center;
}
/* TODO this style seems not to be used ........... but should be? */
span.hit {
color : var(--colour-text-bright);
font-weight : bold;
}
span.highlight {
font-weight : bold;
}
div.node {
font-weight : bold;
}
/*
* nothing is yet done with the next two classes, just laying down a marker
*/
span.cqp-target {
font-weight : bold;
}
span.cqp-keyword {
font-weight : bold;
}
span.time-report {
background-color : var(--colour-layout-fg); /* TODO this is a HAAAAAAAAAACK */
color : var(--colour-text-faint);
font-size : 0.83333rem;
font-weight : normal;
}
/*
* ====================================
* Extra styles for keywords/wordclouds
* ====================================
*
* "wordcloudQuery" is used for links in a Wmatrix-style wordcloud.
*/
a.wordcloudQuery {
/* 1rem because 16px = middle for the font keywords. The different elements in the cloud override the size as needed. */
font : bold 1rem Arial, Helvetica, sans-serif;
color : blue;
}
a.wordcloudQuery:visited {
color : blue;
}
a.wordcloudQuery:hover {
color : red;
}
/*
* ===========================
* Extra styles for gloss view
* ===========================
*/
/* the table for right or left or node */
.glossbox-frame {
display : inline-block;
margin : 0.125rem;
}
.glossbox {
text-align : left;
padding : 0.125rem;
margin : 0.0625rem;
white-space : nowrap;
}
/* not needed yet. Might be needed later.
.glossbox.line1 {
}
.glossbox.line2 {
}
*/
/*
* =================
* Styles for footer
* =================
*/
.footbox {
padding : 0.2rem 0.5rem 2rem 0.5rem;
background-color : var(--colour-layout-outline);
border-style : solid;
border-color : var(--colour-layout-outline);
border-width : 0.2rem;
font-family : var(--font-ui);
font-size : 0.66666rem;
color : var(--colour-text-faint);
}
a.copynote:link, a.copynote:visited {
color : var(--colour-text-faint);
text-decoration : none;
}
a.copynote:hover {
color : var(--colour-text-bright);
text-decoration : underline;
}
/*
* ===================================
* Popup UI overlays: begin invisible.
* ===================================
*/
.popup-ui {
display : none;
}
/*
* ==============================================================================================
* latedata: non-rendered nodes that add variables to the global app datastore at initialisation.
* ==============================================================================================
*/
.latedata {
display : none;
}
/*
* ===================================
* Greyout overlay: positioning
* ===================================
*/
.greyout-content {
position : absolute;
left : 50%;
top : 50%;
transform : translate(-50%, -50%);
background-color : var(--colour-layout-outline);
/* i.e. provide a "white" backdrop over the greyout, like the base layer of the page. */
}
/*
* ==================================================
* the next three classes support the tooltip system.
* ==================================================
*/
/* TODO Possibly variable-ise the tooltip colors? And other appearance stuff?
then, the "configurable" things would be settable in a custom CSS file */
div.floatingToolTip {
/* configurable */
width : 20rem; /* initial width of each tooltip box. */
background-color : var(--colour-tooltip-frame); /* colour parameter -- colour of border */
padding : 0.125rem; /* padding controls width of "border", which is 1 + padding */
opacity : 1.0; /* should the floating tooltip box be opaque ? */
/* end configurable */
/* these are part of the system: should not be changed. */
visibility : hidden;
position : absolute;
z-index : -1010;
left : 0;
top : 0;
}
table.floatingToolTipFrame {
width : 100%;
opacity : inherit;
}
td.floatingToolTipTarget {
/* configurable */
background-color : var(--colour-tooltip-bg); /* colour parameter -- colour of background */
color : var(--colour-tooltip-text); /* colour parameter -- colour of tooltip text */
font-family : var(--font-ui);
font-size : 0.6666rem;
font-weight : normal;
text-align : left;
/* end configurable */
padding : 0.125rem;
opacity : inherit;
}