mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 07:08:44 +08:00
b79ea986ac
Introduce the concept of "high priority notifications" which include PM and bookmark reminder notifications. Now bookmark reminder notifications act in the same way as PM notifications (float to top of recent list, show in the green bubble) and most instances of unread_private_messages in the UI have been replaced with unread_high_priority_notifications. The user email digest is changed to just have a section about unread high priority notifications, the unread PM section has been removed. A high_priority boolean column has been added to the Notification table and relevant indices added to account for it. unread_private_messages has been kept on the User model purely for backwards compat, but now just returns unread_high_priority_notifications count so this may cause some inconsistencies in the UI.
731 lines
12 KiB
SCSS
731 lines
12 KiB
SCSS
// Common
|
|
// global styles that apply to the Discourse application specifically
|
|
// BEWARE: changing these styles implies they take effect anywhere they are seen
|
|
// throughout the Discourse application
|
|
|
|
// Animation Keyframes
|
|
@keyframes ping {
|
|
from {
|
|
transform: scale(0.25);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-forever {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes background-fade-highlight {
|
|
0% {
|
|
background-color: $tertiary-low;
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
// placeholder
|
|
@keyframes placeHolderShimmer {
|
|
0% {
|
|
background-position: -1000px 0;
|
|
}
|
|
100% {
|
|
background-position: 1100px 0;
|
|
}
|
|
}
|
|
|
|
.placeholder-animation {
|
|
animation-duration: 4s;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: infinite;
|
|
animation-name: placeHolderShimmer;
|
|
animation-timing-function: linear;
|
|
background: $primary-very-low;
|
|
background: linear-gradient(
|
|
to right,
|
|
$primary-very-low 10%,
|
|
$primary-low 18%,
|
|
$primary-very-low 33%
|
|
);
|
|
}
|
|
|
|
// Base Elements
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
min-height: 100%;
|
|
|
|
@include clearfix;
|
|
}
|
|
|
|
// setting a static limit on big and small prevents nesting abuse
|
|
big {
|
|
font-size: $font-up-5;
|
|
}
|
|
small {
|
|
font-size: $font-down-2;
|
|
}
|
|
|
|
blockquote {
|
|
@include post-aside;
|
|
clear: both;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
a.cancel {
|
|
margin-left: 1.25em;
|
|
line-height: normal;
|
|
color: $primary-high;
|
|
transition: color 250ms;
|
|
&:hover {
|
|
color: $danger;
|
|
}
|
|
}
|
|
|
|
ul.breadcrumb {
|
|
margin: 0 10px 0 10px;
|
|
}
|
|
|
|
a.no-href {
|
|
cursor: pointer;
|
|
}
|
|
|
|
img.avatar {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
// don't wrap relative dates; we want Jul 26, '15, not: Jul
|
|
// 26,
|
|
// '15
|
|
span.relative-date {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
margin-bottom: 5px;
|
|
align-items: flex-start;
|
|
> .d-icon {
|
|
align-self: center;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
input {
|
|
&[type="radio"],
|
|
&[type="checkbox"] {
|
|
margin-top: 0.17em;
|
|
margin-right: 0.43em;
|
|
margin-left: 0.1em;
|
|
line-height: $line-height-small;
|
|
cursor: pointer;
|
|
flex-shrink: 0; // Adding for safety, Safari will shrink checkboxes
|
|
}
|
|
&[type="submit"],
|
|
&[type="reset"],
|
|
&[type="button"],
|
|
&[type="radio"],
|
|
&[type="checkbox"] {
|
|
width: auto;
|
|
}
|
|
|
|
&.invalid {
|
|
background-color: dark-light-choose(
|
|
$danger-low,
|
|
scale-color($danger, $lightness: -60%)
|
|
);
|
|
}
|
|
|
|
.radio &[type="radio"],
|
|
.checkbox &[type="checkbox"] {
|
|
float: left;
|
|
margin-left: -18px;
|
|
}
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
color: $primary;
|
|
caret-color: currentColor;
|
|
|
|
&[class*="span"] {
|
|
float: none;
|
|
margin-left: 0;
|
|
}
|
|
|
|
&[disabled],
|
|
&[readonly] {
|
|
cursor: not-allowed;
|
|
background-color: $primary-low;
|
|
border-color: $primary-low;
|
|
}
|
|
|
|
&:focus:required:invalid {
|
|
color: $danger;
|
|
border-color: $danger;
|
|
}
|
|
|
|
&:focus:required:invalid:focus {
|
|
border-color: $danger;
|
|
box-shadow: shadow("focus-danger");
|
|
}
|
|
}
|
|
|
|
input {
|
|
&[type="text"],
|
|
&[type="password"],
|
|
&[type="datetime"],
|
|
&[type="datetime-local"],
|
|
&[type="date"],
|
|
&[type="month"],
|
|
&[type="time"],
|
|
&[type="week"],
|
|
&[type="number"],
|
|
&[type="email"],
|
|
&[type="url"],
|
|
&[type="search"],
|
|
&[type="tel"],
|
|
&[type="color"] {
|
|
@include appearance-none;
|
|
display: inline-block;
|
|
padding: $input-padding;
|
|
margin-bottom: 9px;
|
|
font-size: $font-0;
|
|
line-height: $line-height-small;
|
|
color: $primary;
|
|
background-color: $secondary;
|
|
border: 1px solid $primary-medium;
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
min-height: 30px;
|
|
&:focus {
|
|
border-color: $tertiary;
|
|
box-shadow: shadow("focus");
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input {
|
|
&-prepend,
|
|
&-append {
|
|
margin-bottom: 5px;
|
|
input[class*="span"] {
|
|
display: inline-block;
|
|
}
|
|
input,
|
|
select {
|
|
position: relative;
|
|
margin-bottom: 0;
|
|
vertical-align: middle;
|
|
border-radius: 0;
|
|
&:focus {
|
|
z-index: z("base") + 1;
|
|
}
|
|
}
|
|
.add-on {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: auto;
|
|
padding: 0 0.5em;
|
|
height: 28px;
|
|
background-color: $primary-low;
|
|
border: 1px solid $primary-medium;
|
|
}
|
|
.add-on,
|
|
.btn {
|
|
&:first-child {
|
|
margin-right: -1px;
|
|
}
|
|
&:last-child {
|
|
margin-left: -1px;
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-prepend {
|
|
.add-on,
|
|
.btn {
|
|
margin-right: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
height: auto;
|
|
background-color: $secondary;
|
|
border: 1px solid $primary-medium;
|
|
&:focus {
|
|
border-color: $tertiary;
|
|
box-shadow: shadow("focus");
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
select {
|
|
border: 1px solid $primary-low;
|
|
}
|
|
|
|
table {
|
|
th {
|
|
font-weight: normal;
|
|
color: $primary-medium;
|
|
text-align: left;
|
|
padding: 0.5em;
|
|
}
|
|
}
|
|
|
|
// Common Classes
|
|
|
|
.sortable {
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
.discourse-no-touch & {
|
|
&:hover {
|
|
background-color: $primary-low;
|
|
}
|
|
}
|
|
.d-icon {
|
|
margin-left: 0.25em;
|
|
}
|
|
@include unselectable;
|
|
}
|
|
|
|
.radio,
|
|
.checkbox {
|
|
min-height: 18px;
|
|
padding-left: 18px;
|
|
|
|
.controls > &:first-child {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
&.inline {
|
|
display: inline-block;
|
|
padding-top: 5px;
|
|
margin-bottom: 0;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.radio.inline .radio.inline,
|
|
.checkbox.inline .checkbox.inline {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.container {
|
|
@extend .clearfix;
|
|
}
|
|
|
|
.wrap {
|
|
@extend .clearfix;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
padding: 0 8px;
|
|
|
|
.contents {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.boxed {
|
|
&.white {
|
|
background-color: $secondary;
|
|
}
|
|
}
|
|
|
|
.full-width {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
// the default for table cells in topic list
|
|
// is $primary-medium
|
|
// numbers get dimmer as they get colder
|
|
.coldmap {
|
|
&-high {
|
|
color: dark-light-choose($primary-low-mid, $secondary-high) !important;
|
|
}
|
|
|
|
&-med {
|
|
color: dark-light-choose($primary-medium, $secondary-high) !important;
|
|
}
|
|
|
|
&-low {
|
|
color: dark-light-choose($primary-medium, $secondary-medium) !important;
|
|
}
|
|
}
|
|
|
|
.top-space {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.message {
|
|
border-radius: 8px;
|
|
background-color: $secondary;
|
|
padding: 14px;
|
|
|
|
h2 {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.clear-transitions {
|
|
transition: none !important;
|
|
}
|
|
|
|
.tip {
|
|
display: inline-block;
|
|
&.good {
|
|
color: $success;
|
|
}
|
|
&.bad {
|
|
color: $danger;
|
|
}
|
|
}
|
|
|
|
.avatar-wrapper {
|
|
background-color: $secondary;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.profiler-results.profiler-left {
|
|
top: 60px !important;
|
|
}
|
|
|
|
.flex-center-align {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.unread-high-priority-notifications {
|
|
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: z("modal", "overlay");
|
|
}
|
|
|
|
.ring-first-notification {
|
|
position: absolute;
|
|
color: $secondary;
|
|
text-align: left;
|
|
right: 70px;
|
|
top: 60px;
|
|
width: 230px;
|
|
line-height: $line-height-medium;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.fade {
|
|
opacity: 0;
|
|
transition: opacity 0.15s linear;
|
|
|
|
&.in {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.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: $font-up-1;
|
|
padding-left: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
|
|
li {
|
|
border-bottom: 1px solid $primary-low;
|
|
|
|
&:first-of-type {
|
|
border-top: 1px solid $primary-low;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
padding: 10px;
|
|
color: $primary;
|
|
|
|
&:hover {
|
|
background-color: $primary-low;
|
|
color: $primary;
|
|
}
|
|
|
|
&.active {
|
|
font-weight: bold;
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-vertical {
|
|
input,
|
|
textarea,
|
|
select,
|
|
.input-prepend,
|
|
.input-append {
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.control-group {
|
|
@include clearfix;
|
|
}
|
|
|
|
.control-label {
|
|
font-weight: bold;
|
|
font-size: $font-up-2;
|
|
line-height: $line-height-large;
|
|
}
|
|
|
|
.controls {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
// Special elements
|
|
// Special elements
|
|
#main {
|
|
img.avatar {
|
|
&.header {
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
|
|
&.medium {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
&.small {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
&.tiny {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
.user-list {
|
|
.user {
|
|
padding-bottom: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#loading-message {
|
|
position: absolute;
|
|
font-size: $font-up-5;
|
|
text-align: center;
|
|
top: 120px;
|
|
left: 500px;
|
|
color: $primary;
|
|
}
|
|
|
|
#footer {
|
|
.container {
|
|
height: 50px;
|
|
.contents {
|
|
padding-top: 10px;
|
|
a[href] {
|
|
color: $secondary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
|
|
.pref-auth-tokens {
|
|
.row {
|
|
border-bottom: 1px solid #ddd;
|
|
margin: 5px 0px;
|
|
padding-bottom: 5px;
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.auth-token-icon {
|
|
color: $primary-medium;
|
|
font-size: 2.25em;
|
|
float: left;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.auth-token-first {
|
|
font-size: 1.1em;
|
|
|
|
.auth-token-device {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.auth-token-second {
|
|
color: $primary-medium;
|
|
|
|
.active {
|
|
color: $success;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.auth-token-dropdown {
|
|
float: right;
|
|
|
|
.btn,
|
|
.btn:hover {
|
|
background: transparent;
|
|
|
|
.d-icon {
|
|
color: $primary-high;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
width: 120px;
|
|
|
|
& .icon {
|
|
margin-top: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-statuses {
|
|
display: inline;
|
|
float: left;
|
|
margin-right: 0.15em;
|
|
.topic-status {
|
|
margin: 0;
|
|
display: inline-flex;
|
|
color: $primary-medium;
|
|
.d-icon {
|
|
height: 0.76em;
|
|
width: 0.75em;
|
|
}
|
|
&:not(:last-child) {
|
|
margin-right: 0.15em;
|
|
}
|
|
}
|
|
|
|
.topic-status-warning .d-icon-envelope {
|
|
color: $danger;
|
|
}
|
|
}
|
|
|
|
.broken-theme-alert {
|
|
font-size: $base-font-size;
|
|
font-weight: bold;
|
|
padding: 5px 0;
|
|
background: $danger-medium;
|
|
text-align: center;
|
|
z-index: z("max");
|
|
color: $secondary;
|
|
}
|