/* Include this CSS file in HTML by using
within the tag.
*/
* {
font-family: Helvetica, Arial, sans-serif;
font-size: 20px;
margin: 0; /* clear browser default */
color: #303030; /* dark gray text */
}
pre {
font-family: "Courier New", monospace;
font-size: 90%;
margin-top: 16px;
margin-bottom: 16px;
}
h1 {
font-size: 30px;
margin-top: 30px;
margin-bottom: 10px;
color: sienna;
}
h2 {
font-size: 20px;
margin-top: 24px;
margin-bottom: 10px;
color: sienna;
}
body { background-color: #e0e0d1;}
p { margin-bottom: 8px;
line-height: 150%; }
ul { margin-bottom: 8px;
line-height: 150%; }
em { font-weight: bold;
font-style: normal; }
/* Define classes for flex-box styles. Used mostly with divs. */
.flex-col {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center; /* main axis */
align-items: center; /* cross axis */
align-content: center;
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center; /* main axis */
align-items: center; /* cross axis */
align-content: center;
}
/* The following is for the top navigation bar. */
ul.topNav {
list-style-type: none; /* don't display as standard ul list */
z-index: 1; /* stay on top of page content */
margin-left: 0; /* away from page's edges */
margin-right: 0; /* away from page's edges */
margin-top: 0;
padding: 0; /* away from nav bar's edges */
overflow: hidden;
background-color: darkgoldenrod; /* whole nav bar background color */
position: fixed; /* doesn't move with scrolling */
top: 0;
left: 0;
width: 100%;
}
ul.topNav li {
float: left; /* where the menu items appear in nav bar */
border-right: 1px solid white; /* divider between each link */
}
ul.topNav li a { /* how to display navigation menu */
display: block; /* makes whole cell clickable & sizable */
color: white; /* link text color */
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topNav li a:hover:not(.active) {
background-color: darkslategray; /* color of link while hovering */
}
.active {
background-color: sienna; /* color of active link */
}
/* The following is for the side navigation bar on the taxonomy-info page. */
ul.sideNav {
list-style-type: none; /* don't display as standard ul list */
margin: 0; /* away from page's edges */
padding: 0; /* away from nav bar's edges */
overflow: auto; /* allows scrolling if too much menu text */
background-color: darkgoldenrod; /* whole nav bar background color */
width: 15%; /* control the width of the menu */
height: 100%; /* takes entire left side of window */
position: fixed; /* stays put on left side of window */
left: 0;
top: 80px;
}
ul.sideNav li a { /* how to display navigation menu */
display: block; /* makes whole cell clickable & sizable */
color: white; /* menu item text color */
text-align: left; /* menu items to the left */
padding: 14px; /* top-bot right-left */
text-decoration: none;
}
ul.sideNav li a:hover:not(.active):not(.navTitle) { /* not active nor title */
background-color: darkslategray; /* color of navigation item while hovering */
}
/* The following is for input/output forms. */
textarea {
height: 22vw;
width: 40vw;
padding: 5px;
background-color: #ccccb3;
border-style: solid;
border-color: gray;
border-width: 2px;
}
/* CSS property cheat sheet
https://developer.mozilla.org/en-US/docs/Web/CSS
display: sets if an element is displayed as a block or inline-box. Complex.
See docs. "display: flex" sets the flex-box mode.
padding: a shorthand property for all four padding sides of the box model. Takes
1–4 args. 1 sets TRBL, 2 set TB RL, 3 set T RL B, 4 set T R B L. Fixed
values and percentages can be intermixed. There are several other
padding-* properties. See docs.
position: set how an elem is positioned
static: follows normal doc flow. top, right, left, bottom, and z-index
properties have no effect. Default.
relative: follow normal doc flow and then offset by top, right, bottom, and
left. Other elems unaffected.
absolute: removed from normal flow. top, bottom, right, and left set
final position. See docs for where origin is taken.
fixed: similar to above but may have different origin. See docs.
sticky: follow normal doc flow but disconnect and stay visible if scrolled
off. See docs.
transition: shorthand property.
transition-delay:
transition-duration:
transition-property:
visibility: sets visibility of an element, but it always takes its usual space.
Doesn't affect other elements. To remove an elem from the document
flow, use display:none.
z-index: sets display order of overlapping elements. Small z-index values are
closer to the viewer. 1 is nearest.
CSS Box Model CSS Properties
+-----------------------------+
| margin (invisible)| margin [-TRBL]
| +-----------------------+ |
| | border | | border [-TRBL] [-width | -style | -color]
| | +-----------------+ | |
| | | padding | | | padding [-TRBL]
| | | +-----------+ | | |
| | | | content | | | |
| | | +-----------+ | | |
| | | | | |
| | +-----------------+ | |
| | | |
| +-----------------------+ |
| |
+-----------------------------+
FLEXBOX
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis
The flexbox layout is all about how a container positions the items it contains
within the space of the container.
display:flex (on a container)
Sets an item to be a flex container. Its children are flex items.
flex-direction:row (on a container)
Makes its children appear left-to-right within the container.
flex-direction:column (on a container)
Makes its children appear top-to-bottom within the container.
Left-to-right or top-to-bottom above is called the main axis. Perpendicular to
this is called the cross axis. Different style properties affect the main
and cross axes.
Some properties take "flex-start" and "flex-end" values. These are just the
edges of the container on the main axis.
Flexboxes may be nested, so a container's item may itself be a flexbox.
flex-wrap:wrap (on a container)
Causes the children to ???
flex-grow (on an item)
Across all the items in the container, the s control how the
main axis space is allotted to each item. s are relative to each
other. For example, if there were two items with s of 1 and 1
(or 40 and 40), then they'd each get the same space. If they were 1 and 2
(or 250 and 500), then the first item gets half the space as the second.
flex-basis (on an item)
sets the minimum space an item gets regardless of what the
s of flex-grow set. After each item gets its then
remaining space is allotted per the s.
0: ignore any intrinsic size of the item
auto: If the item has a specified size, use that. Otherwise, use content size
content: the size of the item is determined by its content
flex-shrink
If all combined size of all a containers items is too big for the container,
this property controls how the items shrink to fit.
justify-content (on container)
Controls how the items in the container align in the main axis of the
container.
flex-start (default): first item at container's flex-start, and each item
after butts up against previous item
flex-end: as flex-start but uses container's flex-end
center: butts all the items together in the main direction and then centers
the bunch in the container
space-around: distributes the items with equal space between and a bit of
margin at either end (control this?)
space-between: as space-around but leaves no margin at either end
justify-items: ignored in flexbox layouts
align-items (on container)
Controls how the items in the container align on the cross axis of the
container. Not used only for flex items.
stretch (default): expand each item to fill the container.
center: retain each item's size and center each in the container.
flex-start: jam each item to the flex-start position
flex-end: jam each item to the flex-end position
baseline: aligns containers' baselines. See docs.
align-self: (on an item)
Takes same argument as align-items, but is used to override align-
items on one or more specific items.
order: (on an item)
Controls the order in which the items are drawn in the container. Items with
higher order s appear later in the container. Items with the same
display in the order of the source code. Negative s are allowed. The
default is 0.
*/
/* Tooltips, copied from W3C Schools */
/* tooltip container */
.tooltip {
/*display: inline-block;*/
/* below puts a small dotted underline */
/* border-bottom: 1px dotted black; */
}
/* Tooltip text. The position:absolute removes it from the document flow, so
no other elements make room for it. The visibility is hidden until we unhide
it later on a mouse hover. */
.tooltiptext {
position: absolute;
z-index: 1; /* covers anything */
visibility: hidden;
background-color: black;
color: #fff;
text-align: left;
padding: 5px 5px;
border-radius: 6px;
}
/* Show the tooltip text when you mouse over the tooltip container. The space
between the two selectors says to select the items of class tooltiptext that
are inside items of class tooltip:hover. So for the item I'm hovering over,
make all items of class tooltiptext visible. There's only one which is the
tooltip text span. */
.tooltip:hover .tooltiptext {
visibility: visible;
transition-delay: 1.5s; /* wait for a second before displaying tooltip */
}
/* submit buttons, TODO combine w/ above */
input[type=submit], button {
background-color: #ccccb3;
border-radius: 5px;
border-style: solid;
border-color: gray;
border-width: 2px;
padding-right: 5px;
padding-left: 5px;
margin-right: 10px;
margin-left: 10px;
}
input[type=text] {
background-color: #ccccb3;
border-radius: 5px;
border-style: solid;
border-color: gray;
border-width: 2px;
padding-right: 5px;
padding-left: 5px;
margin-right: 10px;
margin-left: 10px;
}
input[type=submit]:hover, button:hover { /* Button hover color */
background-color: #b8b894;
}
table, th, tr, td {
padding: 6px;
border: 4px solid #e0e0d1;
background-color: #ccccb3;
border-collapse: collapse;
}
th {
background-color: #b0b090;
}