[BACK]Return to css.h.in CVS log [TXT][DIR] Up to [local] / src / usr.sbin / httpd
File: [local] / src / usr.sbin / httpd / css.h.in (download)

Revision 1.1, Thu Jan 4 18:17:47 2024 UTC (4 months, 3 weeks ago) by espie
Branch: MAIN
CVS Tags: OPENBSD_7_5_BASE, OPENBSD_7_5, HEAD 

make auto-index better
- make it an actual table
- use "human readable sizes" for the file sizes
- add some decoration and javascript to be able to sort it per-column
(client side) (this means some extra column attribute)
- add glue to facilitate embedding js + css directly in the program
- add some graphical indication for directories
- should still validate as proper html everywhere (custom properties
need to be called data-* for this!)

Work with claudio@ and tb@, many thanks to claudio@ for some of the finer
points of css handling, and tb@ for some fine spaces fixes.

I've tried it with lynx as well, shows up correctly.

One big plus is that the size of columns work as utf-8, so you can expose
filenames without any problems (I've tried it with non-js text navigators
as well as firefox, chromium and friends)

And it looks slightly less yahoo ca. 1995.

It's still "one size fits all". If people object to the current look, adding
httpd.conf(5) properties to override the default css should be easy.

okay claudio@, tb@

static const char *css = 
body {
    background-color: white; 
    color: black; 
    font-family: sans-serif;
}
table {
    border-collapse: collapse; 
    border: 1px solid;
}
tr.sort th {
    border-bottom: 1px solid; 
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
}
tr.sort th.sorted { font-weight: bold; }
tr.sort th::after { content: "\a0\2195"; }
tr.dir td:nth-child(2n+1) { 
    font-weight: bold; 
    font-style: italic; 
}
td, th { padding: 2pt 2em; }
td:first-child, th:first-child { padding-left: 5pt; }
td:last-child, th:last-child { padding-right: 5pt; }
td:nth-child(n+2) { text-align: end; }
thead { text-align: left; }
@media (prefers-color-scheme: dark) {
    body { 
	background-color: #1E1F21; 
	color: #EEEFF1; 
    }
    a { color: #BAD7FF; }
}