/* UNLICENSED This is free and unencumbered software released into the public domain. https://github.com/sesh/brntn-css-2 */ * { box-sizing: border-box; } html { font-family: sans-serif; font-size: 16px; line-height: 1.55; color: #212529; -ms-text-size-adjust: 100%; /* #fix-resize */ -webkit-text-size-adjust: 100%; /* #fix-resize */ } code, pre { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; } code { background-color: #e9ecef; font-size: 0.95em; padding: 0.2em; } h1 { font-size: 2em; /* #fix-h1 */ margin: 0.67em 0; } mark { background-color: #ffec99; } b, strong { font-weight: bold; } /* Images: - max-width 100% - #fix-border: remove border from images inside on old IE */ img { max-width: 100%; border: 0; /* #fix-image-border */ } /* Links: - Nicer default link, hover and visited colors from open-color - #fix-links-ie: remove transparent background in IE 10 - make links bold - remove underline, because I'm a monster */ a { color: #1c7ed6; background-color: transparent; /* #fix-links-ie */ font-weight: bold; text-decoration: none; } a:hover { color: #339af0; } a:visited { color: #ae3ec9; } /* Layout: - remove all margins from - header, main, footer get max-width and margin - blockquote gets a left border */ body { margin: 0; } header, section, footer { width: 44em; max-width: 90%; margin: 2% 5%; } header { display: flex; justify-content: space-between; align-items: center; } section.wide { max-width: 88em; } section { margin-bottom: 2em; } blockquote { border-left: 6px solid #e9ecef; margin-left: 0; padding: 0 0 0 2em; } .container { max-width: 90%; margin: 2% 5%; } /* Tables: - rather simple styling for semantic tables - no caption or footer support */ table { border-collapse: collapse; width: 100%; } table th, table td { padding: 8px 4px; } thead tr { border-bottom: 2px solid #212529; } thead tr th { text-align: left; } tbody tr { border-bottom: 1px solid #adb5bd; } /* Forms: - fixes from normalize (marked with #n) - fieldset padding consistent across browsers, from normalize.css - simple select styling */ button, input, optgroup, select, textarea { font-family: inherit; /* #n */ font-size: inherit; margin: 0; /* #n */ line-height: 1.2; } fieldset { padding: 0.35em 0.75em 0.625em; border-color: #e9ecef; } label { display: block; } input[type=button], input[type=submit], input[type=reset], button { color: #e9ecef; padding: 0.6em 0.8em; background-color: #1c7ed6; border: 0.0725em solid #1c7ed6; -webkit-appearance: none; border-radius: 2px; } input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover { background-color: #339af0; border-color: #339af0; cursor: pointer; } input[type=submit]:disabled, button:disabled { background-color: #adb5bd; border-color: #adb5bd; cursor: auto; } input[type=text], input[type=date], input[type=number], input[type=month], input[type=week], input[type=datetime], input[type=datetime-local], input[type=url], input[type=tel], input[type=email], input[type=search], input[type=password], textarea { -webkit-appearance: none; border-radius: 2px; padding: 0.6em 0.8em; border: 1px solid #adb5bd; } input[type=text]:focus, input[type=date]:focus, input[type=number]:focus, input[type=month]:focus, input[type=week]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=url]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=search]:focus, input[type=password]:focus, textarea:focus { border: 1px solid #495057; } select { background-color: white; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMTI1MjkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tZG93biI+PHBvbHlsaW5lIHBvaW50cz0iNiA5IDEyIDE1IDE4IDkiPjwvcG9seWxpbmU+PC9zdmc+"); background-position: 96%; background-repeat: no-repeat; border: 1px solid #adb5bd; padding: 0.6em 40px 0.6em 0.6em; border-radius: 2px; -webkit-appearance: none; display: block; } /* Checkbox / radio: - based on native-elements - https://native-elements.stackblitz.io/ */ input[type='checkbox'], input[type='radio'] { -moz-appearance: none; -webkit-appearance: none; width: 21px; height: 21px; border-radius: 4px; border: 1px solid #adb5bd; cursor: pointer; position: relative; vertical-align: top; } input[type='checkbox']::before, input[type='radio']::before { content: ''; position: absolute; pointer-events: none; left: 50%; top: 50%; height: 5px; width: 10px; border-radius: 2px 0 2px 2px; border-bottom: 2px solid #f8f9fa; border-left: 2px solid #f8f9fa; transform: translate(-50%, calc(-50% - 1px)) rotate(-45deg); opacity: 0; } input[type='checkbox']:not(:disabled):active, input[type='radio']:not(:disabled):active { border-color: #495057; } input[type='checkbox']:checked, input[type='radio']:checked { background-color: #ced4da; border-color: #ced4da; color: #f8f9fa; } input[type='checkbox']:checked::before, input[type='radio']:checked::before { opacity: 1; } input[type='checkbox']:disabled, input[type='radio']:disabled { opacity: 0.25; background-color: #ced4da; cursor: not-allowed; pointer-events: none; } input[type='checkbox']:checked:disabled::before, input[type='radio']:checked:disabled::before { opacity: 1; } input[type='radio'] { border-radius: 100%; } input[type='radio']::before { border-radius: 100%; border: 0; width: 8px; height: 8px; transform: translate(-50%, calc(-50%)); background-color: #fff; } /* Details */ details { display: flex; flex-direction: column; align-items: flex-start; background-color: #f7f7f7; padding: 10px; margin: 1em 0; border-radius: 6px; overflow: hidden; } details[open] { padding: 10px; } details > :last-child { margin-bottom: 0; } details[open] summary { margin-bottom: 10px; } summary::-webkit-details-marker { color: #363636; } summary::marker { color: #363636; } /* Helpers: - .list-bare to remove icon and padding */ .list--bare { list-style: none; padding-left: 0; } /* Grid */ .grid { display: flex; margin-top: 0; } .grid p { margin-right: 12px; margin-top: 0; } /* Django Messages formatting */ .messages { list-style: none; margin: 1em 0 2em; padding: 0; } .messages li { background-color: #ffec99; padding: 12px; width: 100%; line-height: 2.0em; margin-bottom: 12px; } .messages li.info { background-color: #d0ebff; } .messages li.error { background-color: #ffe3e3; } section, header, footer { width: 32em; } h1 a { display: flex; align-items: center; } h1 a:link, h1 a:visited { color: black; } h1 img { display: inline-block; height: 48px; padding-right: 20px; padding-left: 20px; } .text-muted { color: #9fa8b2; font-size: 0.9em; } input.wide { width: 100%; } #garmin, #intervals { display: none; } #garmin:target, #intervals:target { display: block; } .text-muted a:link, .text-muted a:visited { color: #9fa8b2; } .highlight { overflow: auto; background-color: #ebebeb; border: 2px solid #1d1f21; padding: 0 0.7em; } ul.workout { padding: 0; } .workout li { list-style: none; padding: 8px; background-color: #ebebeb; margin-bottom: 8px; } .workout li.hard { background-color: #ffe066; } .workout li.warmup, .workout li.cooldown { background-color: #d0ebff; } ul.workout-line { padding: 0; overflow: hidden; display: flex; width: 100%; } ul.workout-line li { margin: 0; padding: 0; list-style: none; background-color: #ebebeb; height: 22px; } ul.workout-line li.hard { background-color: #ffe066; } ul.workout-line li.warmup, ul.workout-line li.cooldown { background-color: #d0ebff; }