/* 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
*/ table { border-collapse: collapse; width: 100%; border: 4px solid #cde; } thead { background: #cde; } th { font-weight: bold; } td, th { padding: 8px; text-align: left; } tr { border-bottom: 1px solid #eee; } tr:nth-child(even) { background: #f4f4f4; } td a { padding: 2px 8px; background: #678; border-top-right-radius: 4px; color: #fff; text-decoration: none; margin-right: 8px; } td a:hover { background: #123; } td a:last-child { margin: 0; } /* WIDGET: PAGING BAR */ paging { text-align: center; } paging a, paging span { margin: 4px; padding: 4px 10px; font-size: 13px; font-weight: bold; text-decoration: none; color: #000; display: inline-block; } paging a { background-color: #cde; padding: 6px 10px; } paging .LayoutPagingBar-prev { background-color: #9ab; border-radius: 12px 0 0 12px; padding: 4px 10px; padding-left: 14px; } paging .LayoutPagingBar-next { background-color: #9ab; border-radius: 0 12px 12px 0; padding: 4px 10px; padding-right: 14px; } paging a.LayoutPagingBar-selected { background: #fff; color: #000; } paging span { color: #678; } paging a:hover { background: #def; } /* WIDGET: CARD */ card { position: relative; overflow: hidden; border: 1px solid black; width: 350px; height: 350px; text-align: center; } card > a { display: block; width: 100%; height: 100%; } card > img { position: absolute; } /* Made with https://stylesheet.org */