/*
WELCOME TO STYLESHEET.ORG
This is a design system for laying out content and user interface components.
It can be added to your site by putting the following tag inside the
tag in your HTML page:
You can read more here:
About Stylesheet: https://stylesheet.org/about
Content Tags: https://stylesheet.org/content
Layout System: https://stylesheet.org/layout
Widgets: https://stylesheet.org/widgets
This stylesheet implements a default look & feel, and you are encouraged to copy-paste this into
your own site and customise for your needs.
*/
/*
RESET STYLES
This just resets sizing and display parameters to some known values and ensures they are the same on all browsers.
*/
* { box-sizing: border-box; margin: 0; padding: 0; }
body, html { width:100%; height:100%; }
a { display: inline-block; }
/*
THE PAGE THEME
*/
body { background-color: #fff; }
* { color: #000; font-family: 'arial', 'lucida console', 'courier new', 'courier', monospace; }
/*
UI CONTENT
*/
p a { display: inline; }
panel { display: block; }
panel { background-color: #ccc; color: #00f; padding: 16px; }
panel panel { background-color: #9ab; color: #ff0; padding: 12px; }
panel panel panel { background-color: #9a9; color: #0ff; padding: 8px; }
panel panel panel panel { background-color: #999; color: #fff; padding: 4px; }
panel panel panel panel panel { background-color: #666; color: #fff; padding: 2px; }
/*
LAYOUT
Content is laid out using rows, columns, grids and flexes as described here:
https://stylesheet.org/layout
The tag places its immediate children side-by-side, with the current spacing between each, and no padding around the row.
It is composable with and in any combination, with the spacing automatically turning out correctly.
*/
column, panel, main, padding { display: grid; grid-template-columns: auto; }
row, flex { display: flex; flex-direction: row; }
grid { display: grid; }
flex { flex-wrap: wrap; }
overlay > * { position: absolute; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-7 { grid-template-columns: repeat(7, 1fr); }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
.grid-9 { grid-template-columns: repeat(9, 1fr); }
/* Layout - spacing */
padding,
panel,
flex,
column,
row,
grid,
main{ gap: 16px; grid-gap:16px; }
smaller padding,
smaller panel,
smaller flex,
smaller column,
smaller row,
smaller grid { gap: 12px; grid-gap:12px; }
smaller smaller padding,
smaller smaller panel,
smaller smaller flex,
smaller smaller column,
smaller smaller row,
smaller smaller grid { gap: 8px; grid-gap:8px; }
smaller smaller smaller padding,
smaller smaller smaller panel,
smaller smaller smaller flex,
smaller smaller smaller column,
smaller smaller smaller row,
smaller smaller smaller grid { gap: 4px; grid-gap:4px; }
smaller smaller smaller smaller padding,
smaller smaller smaller smaller panel,
smaller smaller smaller smaller flex,
smaller smaller smaller smaller column,
smaller smaller smaller smaller row,
smaller smaller smaller smaller grid { gap: 2px; grid-gap:2px; }
/* Layout - padding */
padding { padding: 16px; }
smaller padding { padding: 12px; }
smaller smaller padding { padding: 8px; }
smaller smaller smaller padding { padding: 4px; }
smaller smaller smaller smaller padding { padding: 2px; }
smaller smaller smaller smaller smaller padding { padding: 0; }
/* Section */
menu {
width: max-content;
height: fit-content;
padding: var(--gap-3);
border: 4px solid #cde;
background: #def;
}
menu ol { list-style-type: none; display: flex; flex-direction: column; }
menu ol li { margin: var(--gap-5); }
menu ol li a {}
header { padding: 16px; gap: 16px; display: flex; flex-direction: row; }
header nav ol { list-style-type: none; display: flex; flex-direction: row; }
header nav ol li a { display: block; color: #fff; text-decoration: none; }
header header ol li a:hover { background: #123; }
/* Section - Level 0 */
header { background: #9ab; }
header nav ol { gap: 12px; }
header nav ol li a { padding: 8px 20px; background: #345; border-top-right-radius: 12px; }
/* Section - Level 1 */
section header { background: #abc; }
section nav ol { gap: 12px; }
section nav ol li a { padding: 6px 16px; background: #456; border-top-right-radius: 8px; }
/* Section - Level 2 */
section section header { background: #bcd; }
header section section nav ol { gap: 12px; }
header section section nav ol li a { padding: 4px 12px; background: #567; border-top-right-radius: 6px; }
/* Section - Level 3 */
section section header { background: #cde; }
header section section nav ol { gap: 12px; }
header section section nav ol li a { padding: 2px 8px; background: #678; border-top-right-radius: 4px; }
/*
WIDGET: BUTTON
*/
.button {
text-decoration: none;
margin: 0 .5rem 0 0;
border: 1px solid gainsboro;
color: gray;
padding: .5rem 1rem;
box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .05);
border-radius: .5rem;
cursor: pointer;
}
.button:hover {
border: 1px solid black;
}
/*
WIDGET: FORM
*/
form {
border: 4px solid #cde;
display: grid;
grid-template-columns: auto;
grid-gap:8px;
padding: 8px;
max-width: 400px;
}
form input[type="submit"] {
width: auto;
min-width: none;
}
input {
outline: none;
border: 2px solid rgb(190, 190, 190);
padding: 8px;
width: 100%;
}
input:focus {
border: 2px solid rgb(8, 156, 179);
}
select {
outline: none;
border: 2px solid rgb(190, 190, 190);
padding: 8px;
width: 100%;
}
select:focus {
border: 2px solid rgb(8, 156, 179);
}
/* Filter */
filter form {
border: 4px solid #cde;
background: #def;
display: flex;
width: auto;
gap: 8px;
padding: 8px;
max-width: none;
}
filter input[type="submit"] {
width: auto;
min-width: none;
}
filter input,
filter select {
max-width: none;
min-width: 200px;
}
/*
WIDGET: TABLE