// These CSS custom properties are added here instead of in variables.scss // because variables.scss is injected into every theme CSS file // which causes problems when overriding custom properties in themes :root { --topic-body-width: #{$topic-body-width}; --topic-body-width-padding: #{$topic-body-width-padding}; --topic-avatar-width: #{$topic-avatar-width}; --d-border-radius: initial; --d-border-radius-large: initial; --d-nav-pill-border-radius: var(--d-border-radius); --d-button-border-radius: var(--d-border-radius); --d-input-border-radius: var(--d-border-radius); --d-content-background: initial; --d-font-family--monospace: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; } // -------------------------------------------------- // Base styles for HTML elements // -------------------------------------------------- html { color: var(--primary); font-family: var(--font-family); font-size: var(--base-font-size); line-height: var(--line-height-large); background-color: var(--secondary); overflow-y: scroll; direction: ltr; &.text-size-smallest { font-size: var(--base-font-size-smallest); } &.text-size-smaller { font-size: var(--base-font-size-smaller); } &.text-size-larger { font-size: var(--base-font-size-larger); } &.text-size-largest { font-size: var(--base-font-size-largest); } } // Links // -------------------------------------------------- a { color: var(--tertiary); text-decoration: none; cursor: pointer; &:visited { color: var(--tertiary); } &:hover { color: var(--tertiary); } &:active { color: var(--tertiary); } } // Typography // -------------------------------------------------- hr { display: block; height: 1px; margin: 1em 0; border: 0; border-top: 1px solid var(--primary-low); padding: 0; } // Lists // -------------------------------------------------- ul, ol, dd { margin: 1em 0 1em 1.25em; padding: 0; } .cooked ul, .cooked ol, .cooked dd { clear: both; } .cooked, .d-editor-preview { ul, ol { padding-left: 1.25em; } } li, .cooked li, .d-editor-preview li { > ul, > ol { margin: 0; } } // Embedded content // -------------------------------------------------- img { vertical-align: middle; } // Forms // -------------------------------------------------- fieldset { margin: 0; border: 0; padding: 0; } pre code { overflow: auto; -moz-tab-size: 4; tab-size: 4; &.lang-markdown { white-space: pre-wrap; } } // Tables // -------------------------------------------------- table { border-collapse: collapse; } tbody { border-top: 3px solid var(--primary-low); } .topic-list-item, tr { border-bottom: 1px solid var(--primary-low); @media (prefers-reduced-motion: no-preference) { &.highlighted { animation: background-fade-highlight 2.5s ease-out; } } } // https://en.wikipedia.org/wiki/Ruby_character ruby > rt { font-size: 72%; // ~10px with 14px base } // Buttons (was in normalized) // -------------------------------------------------- button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; } // Inline form // -------------------------------------------------- .inline-form { display: inline-flex; align-items: center; flex-wrap: wrap; &.full-width { display: flex; } > input[type="text"], > input[type="search"], > input[type="password"] { display: inline-flex; flex: 1; } > .select-kit, > input[type="text"], > input[type="search"], > input[type="password"], > label, > .btn, > .d-date-input { margin-bottom: 0.5em; // for when items wrap (mobile, narrow windows) margin-right: 0.5em; &:last-child { margin-right: 0; } } }