By Guest

styles.css

Lua 2.44 KiB 59 2 months ago
/* Think of this file as your reference: Everything that can be customized is in here And everything that is not in here, cannot be customized */ colors { --white: #c8d6e5; --gray: #576574; --lightGray: #8395a7; --purple: #5f27cd; --pink: #aa9999; --blue: #341ff7; --red: #df0808; --black: #20253a; --lightGreen: #60b650; --yellow: #dede6c; --green: #57a64e; } * { display: block; } body { background-color: black; } header { position: relative; /* content: "My Shop"; */ /* background: url(myLogo.nfp); */ /* background-position: left; */ /* Content and Background (Images) are mutually exclusive, with content taking precedence if both are present */ background-color: lightGreen; width: 100%; padding: 2px; height: 6px; color: red; text-align: left; font-size: 2em; /* Either 1em or 2em, no other sizes are currently supported */ } aside { position: absolute; left: 0; bottom: 0; padding: 1px; padding-right: 1px; /* padding-top: 12px;*/ /* Since `top` (and bottom) are omitted here, it will be positioned relative to the last positioned element, which is exactly where we want it to be.. */ width: 100%; height: 8px; /* In Xenon CSS, rem doesn't stand for Root Em, it stands for Remaining space, so this is 100% of the remaining space */ text-align: left; background-color:lightGreen; color: black; } table { position: relative; left: 0; background-color: black; padding: 1px; width: 78px; /* height: calc(100rem - 8px); /* See note under aside height */ */ height: 16px; } td { color: white; padding: 0 1px 0 0; } .stock, .price { text-align: right; } .stock { color: lightGray; width: 7px; } .stock.low { color: yellow; } .stock.critical { color: red; } .name { flex: 1; /*text-align: right;*/ /* tr elements implicitly have flex-box like behavior, it is the only element that (currently) supports this feature */ } .price-container, .price { text-align: left; width: 12px; } .addy-full, .addy {text-align: right; color: yellow; width: 16px; } th { color: white; padding: 1px 1px 1px 0; } details { position: absolute; left: 0; bottom: 0; background-color: transparent; color: black; text-align: right; width: 100%; height: 1px; }