389 lines
6.9 KiB
SCSS
389 lines
6.9 KiB
SCSS
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 {
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 0;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
input {
|
|
&[type="radio"], &[type="checkbox"] {
|
|
margin: 3px 0;
|
|
line-height: normal;
|
|
cursor: pointer;
|
|
}
|
|
&[type="submit"], &[type="reset"], &[type="button"], &[type="radio"], &[type="checkbox"] {
|
|
width: auto;
|
|
}
|
|
}
|
|
.radio, .checkbox {
|
|
min-height: 18px;
|
|
padding-left: 18px;
|
|
}
|
|
.radio input[type="radio"], .checkbox input[type="checkbox"] {
|
|
float: left;
|
|
margin-left: -18px;
|
|
}
|
|
.controls > {
|
|
.radio:first-child, .checkbox:first-child {
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
.radio.inline, .checkbox.inline {
|
|
display: inline-block;
|
|
padding-top: 5px;
|
|
margin-bottom: 0;
|
|
vertical-align: middle;
|
|
}
|
|
.radio.inline .radio.inline, .checkbox.inline .checkbox.inline {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.flex-center-align {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.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 blend-primary-secondary(50%);
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
|
|
&.small {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin: 0;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.content-list {
|
|
|
|
h3 {
|
|
color: $primary-medium;
|
|
font-size: 1.071em;
|
|
padding-left: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
|
|
li:first-of-type {
|
|
border-top: 1px solid $primary-low;
|
|
}
|
|
li {
|
|
border-bottom: 1px solid $primary-low;
|
|
}
|
|
|
|
li a {
|
|
display: block;
|
|
padding: 10px;
|
|
color: $primary;
|
|
|
|
&:hover {
|
|
background-color: $primary-low;
|
|
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: $tertiary-low;
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|