img.avatar { border-radius: 50%; } .container { @extend .clearfix; } .wrap { @extend .clearfix; margin-right: auto; margin-left: auto; padding: 0 8px; .contents { position: relative; } } .full-width { margin-left: 12px; } big { font-size: 28px; } small { font-size: 9px; } //setting a static limit on big and small prevents nesting abuse blockquote { @include post-aside; clear: both; } a.no-href { cursor: pointer; } html { height: 100%; } body { background-attachment: fixed; background-size: cover; min-height: 100%; @include clearfix; button.ok { background: $success; color: $secondary; @include hover { background: lighten($success, 10%); color: $secondary; } } button.cancel { background: $danger; color: $secondary; @include hover { background: lighten($danger, 10%); color: $secondary; } } // the default for table cells in topic list // is scale-color($primary, $lightness: 50%) // numbers get dimmer as they get colder .coldmap-high { color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)) !important; } .coldmap-med { color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)) !important; } .coldmap-low { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)) !important; } #loading-message { position: absolute; font-size: 2.143em; text-align: center; top: 120px; left: 500px; color: $primary; } .top-space { margin-top: 10px; } ul.breadcrumb { margin: 0 10px 0 10px; } .message { @include border-radius-all(8px); background-color: $secondary; padding: 14px; h2 { margin-bottom: 20px; } } #footer { .container { height: 50px; .contents { padding-top: 10px; a[href] { color: $secondary; } } } } .clear-transitions { transition:none !important; } .tip { display: inline-block; &.good { color: $success; } &.bad { color: $danger; } } input[type].invalid { background-color: dark-light-choose(scale-color($danger, $lightness: 80%), scale-color($danger, $lightness: -60%)); } .d-editor-input { resize: none; } .avatar-wrapper { background-color: $secondary; display: inline-block; border-radius: 50%; } .profiler-results.profiler-left { top: 60px !important; } } .unread-private-messages { color: $secondary; background: $success; &.badge-notification[href] {color: $secondary;} } .ring-backdrop-spotlight { position: absolute; width: 80px; height: 80px; top: -18px; right: -18px; background-image: radial-gradient(40px at 50% 50% , transparent 95%, $primary 100%); opacity: 0.85; } .ring-backdrop { position: absolute; width: 80px; height: 80px; top: -18px !important; right: -18px !important; box-shadow: 0 0 0 9999px rgba($primary, 0.85); z-index: 1040; } .ring-first-notification { position: absolute; color: $secondary; text-align: left; right: 70px; top: 60px; width: 230px; line-height: 30px; } .ring { $gradient-start: transparent; $gradient-end: #090; background: -webkit-radial-gradient($gradient-start, $gradient-end); background: -o-radial-gradient($gradient-start, $gradient-end); background: -moz-radial-gradient($gradient-start, $gradient-end); background: radial-gradient($gradient-start, $gradient-end); top: -11px !important; right: 23.5px !important; border-radius: 100%; width: 20px; height: 20px; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: center; -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: ping; -webkit-animation-name: ping; } @-webkit-keyframes ping { from { $scale: 0.25; transform: scale($scale); -ms-transform: scale($scale); -webkit-transform: scale($scale); -o-transform: scale($scale); -moz-transform: scale($scale); opacity: 1; } to { $scale: 2; transform: scale($scale); -ms-transform: scale($scale); -webkit-transform: scale($scale); -o-transform: scale($scale); -moz-transform: scale($scale); opacity: 0; } } .fade { opacity: 0; transition: opacity 0.15s linear; } .fade.in { opacity: 1; } @-webkit-keyframes rotate-forever { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate-forever { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .inline-spinner { display: inline-block; margin: 0; } .spinner { margin: 20px auto 20px auto; position: relative; -webkit-animation: rotate-forever 1s infinite linear; animation: rotate-forever 1s infinite linear; height: 30px; width: 30px; border: 4px solid dark-light-diff($primary, $secondary, 50%, -50%); border-right-color: transparent; border-radius: 50%; &.small { width: 10px; height: 10px; margin: 0; display: inline-block; } } .content-list { h3 { color: dark-light-diff($primary, $secondary, 50%, -20%); font-size: 1.071em; padding-left: 5px; margin-bottom: 10px; } ul { list-style: none; margin: 0; li:first-of-type { border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); } li { border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); } li a { display: block; padding: 10px; color: $primary; &:hover { background-color: dark-light-diff($primary, $secondary, 90%, -60%); color: $primary; } &.active { font-weight: bold; color: $primary; } } } } // don't wrap relative dates, we want // // Jul 26, '15 // // not // // Jul // 26, // '15 // span.relative-date { white-space:nowrap; } @keyframes background-fade-highlight { 0% { background-color: dark-light-diff($tertiary, $secondary, 85%, -65%); } 100% { background-color: transparent; } }