mirror of
https://github.com/discourse/discourse.git
synced 2025-04-02 02:26:07 +08:00
UX: Removing px font defintions and replacing with em
This commit is contained in:
parent
70b6030c74
commit
2d9d43ed1a
@ -47,11 +47,11 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
big {
|
big {
|
||||||
font-size: 28px;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 9px;
|
font-size: .643em;
|
||||||
}
|
}
|
||||||
|
|
||||||
//setting a static limit on big and small prevents nesting abuse
|
//setting a static limit on big and small prevents nesting abuse
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
padding-top: 2em;
|
padding-top: 2em;
|
||||||
|
|
||||||
.face {
|
.face {
|
||||||
font-size: 60px;
|
font-size: 4.286em;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
.reason {
|
.reason {
|
||||||
@ -12,7 +12,7 @@
|
|||||||
}
|
}
|
||||||
.url {
|
.url {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-size: 11px;
|
font-size: .786em;
|
||||||
}
|
}
|
||||||
.desc {
|
.desc {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
@ -90,7 +90,7 @@
|
|||||||
b.topics-count {
|
b.topics-count {
|
||||||
color: dark-light-choose($primary-medium, $secondary-medium);
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 11px;
|
font-size: .786em;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.badge-category {
|
span.badge-category {
|
||||||
|
@ -180,7 +180,7 @@
|
|||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40%;
|
top: 40%;
|
||||||
font-size: 36px;
|
font-size: 2.571em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@ -197,7 +197,7 @@
|
|||||||
.jsfu-separator {
|
.jsfu-separator {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
font-size: 36px;
|
font-size: 2.571em;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
@ -225,7 +225,7 @@
|
|||||||
|
|
||||||
// password reset modal
|
// password reset modal
|
||||||
.modal-body.forgot-password-modal p {
|
.modal-body.forgot-password-modal p {
|
||||||
font-size: 14px;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -270,7 +270,7 @@ pre.onebox code ol.lines li:before {
|
|||||||
color:#AFAFAF;
|
color:#AFAFAF;
|
||||||
text-align:right;
|
text-align:right;
|
||||||
padding-right:5px;
|
padding-right:5px;
|
||||||
font-size:12px;
|
font-size:.857em;
|
||||||
line-height: 1.9em;
|
line-height: 1.9em;
|
||||||
content: counter(li-counter);
|
content: counter(li-counter);
|
||||||
counter-increment: li-counter;
|
counter-increment: li-counter;
|
||||||
@ -331,7 +331,7 @@ pre.onebox code {
|
|||||||
.onebox-body .build_status
|
.onebox-body .build_status
|
||||||
{
|
{
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
font-size:12px;
|
font-size:.857em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.onebox-body .status_tag.open {
|
.onebox-body .status_tag.open {
|
||||||
@ -379,7 +379,7 @@ aside.onebox.twitterstatus .onebox-body {
|
|||||||
z-index: 935;
|
z-index: 935;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 12px;
|
font-size: .857em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -395,7 +395,7 @@ aside.onebox.twitterstatus .onebox-body {
|
|||||||
|
|
||||||
.album-title {
|
.album-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 13px;
|
font-size: 1.083em;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
.like-count {
|
.like-count {
|
||||||
color: dark-light-choose($primary-medium, $secondary-medium);
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
||||||
.fa { color: $love; font-size: 12px; }
|
.fa { color: $love; font-size: .857em; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-wrapper span.badge-category {
|
.badge-wrapper span.badge-category {
|
||||||
@ -80,7 +80,7 @@
|
|||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
font-size: 12px;
|
font-size: .857em;
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -31,7 +31,7 @@
|
|||||||
color: $success;
|
color: $success;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity 0.25s;
|
transition: opacity 0.25s;
|
||||||
font-size: 13px;
|
font-size: .929em;
|
||||||
&:not(.success) {
|
&:not(.success) {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
@ -35,8 +35,8 @@
|
|||||||
.bullet + .topic-header-extra {
|
.bullet + .topic-header-extra {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
font-size: 12px;
|
font-size: .857em;
|
||||||
.list-tags { font-size: 12px; }
|
.list-tags { font-size: 1em; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar + .topic-header-extra {
|
.bar + .topic-header-extra {
|
||||||
|
@ -34,7 +34,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.fa {
|
.fa {
|
||||||
font-size: 11px;
|
font-size: .786em;
|
||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
color: dark-light-choose($primary-medium, $secondary-medium);
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
||||||
}
|
}
|
||||||
@ -204,7 +204,7 @@ aside.quote {
|
|||||||
right: -4px;
|
right: -4px;
|
||||||
}
|
}
|
||||||
.fa {
|
.fa {
|
||||||
font-size: 24px;
|
font-size: 1.714em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.topic-map .poster .avatar-flair {
|
.topic-map .poster .avatar-flair {
|
||||||
@ -222,7 +222,7 @@ aside.quote {
|
|||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
.fa {
|
.fa {
|
||||||
font-size: 14px;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.topic-avatar .poster-avatar-extra {
|
.topic-avatar .poster-avatar-extra {
|
||||||
@ -351,7 +351,7 @@ blockquote > *:last-child {
|
|||||||
border-top: none;
|
border-top: none;
|
||||||
float: left;
|
float: left;
|
||||||
i {
|
i {
|
||||||
font-size: 35px;
|
font-size: 2.500em;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: dark-light-choose($primary-low-mid, $secondary-high);
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
||||||
@ -378,7 +378,7 @@ blockquote > *:last-child {
|
|||||||
text-transform: none;
|
text-transform: none;
|
||||||
margin: 15px 0px 5px;
|
margin: 15px 0px 5px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 14px;
|
font-size: 1.11em;
|
||||||
p {
|
p {
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
}
|
}
|
||||||
@ -479,7 +479,7 @@ a.mention, a.mention-group {
|
|||||||
.broken-image, .large-image {
|
.broken-image, .large-image {
|
||||||
color: dark-light-choose($primary-low-mid, $secondary-high);
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
||||||
border: 1px solid $primary-low;
|
border: 1px solid $primary-low;
|
||||||
font-size: 32px;
|
font-size: 2.286em;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -20,10 +20,10 @@ div.tagsinput span.tag {
|
|||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
margin-bottom:5px;
|
margin-bottom:5px;
|
||||||
font-family: helvetica;
|
font-family: helvetica;
|
||||||
font-size:13px;
|
font-size: .929em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px; }
|
div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: .786em; }
|
||||||
div.tagsinput input {
|
div.tagsinput input {
|
||||||
width:80px;
|
width:80px;
|
||||||
font-family: helvetica;
|
font-family: helvetica;
|
||||||
|
@ -60,7 +60,7 @@
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
font-size: 12px;
|
font-size: .857em;
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
|
|
||||||
span.badge-category {
|
span.badge-category {
|
||||||
@ -251,7 +251,7 @@
|
|||||||
padding: 4px 5px 2px 5px;
|
padding: 4px 5px 2px 5px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
color: $secondary;
|
color: $secondary;
|
||||||
font-size: 11px;
|
font-size: .786em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: dark-light-choose($primary-low-mid, $secondary-low);
|
background-color: dark-light-choose($primary-low-mid, $secondary-low);
|
||||||
|
@ -127,7 +127,7 @@
|
|||||||
&:before {
|
&:before {
|
||||||
margin-right: 9px;
|
margin-right: 9px;
|
||||||
font-family: FontAwesome;
|
font-family: FontAwesome;
|
||||||
font-size: 17px;
|
font-size: 1.214em;
|
||||||
}
|
}
|
||||||
&.google, &.google_oauth2 {
|
&.google, &.google_oauth2 {
|
||||||
background: $google;
|
background: $google;
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
float: left;
|
float: left;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
font-size: 13px;
|
font-size: .929em;
|
||||||
|
|
||||||
.name-line {
|
.name-line {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@ -36,7 +36,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
float: right;
|
float: right;
|
||||||
color: lighten($primary, 40%);
|
color: lighten($primary, 40%);
|
||||||
font-size: 11px;
|
font-size: .786em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.delete-info i {
|
.delete-info i {
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.topic-count {
|
.topic-count {
|
||||||
font-size: 11px;
|
font-size: .786em;
|
||||||
color: $primary;
|
color: $primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
.future-date-input-selector-datetime {
|
.future-date-input-selector-datetime {
|
||||||
color: lighten($primary, 40%);
|
color: lighten($primary, 40%);
|
||||||
font-size: 13px;
|
font-size: .929em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.future-date-input-selector-icons {
|
.future-date-input-selector-icons {
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.topic-count {
|
.topic-count {
|
||||||
font-size: 11px;
|
font-size: .786em;
|
||||||
color: $primary;
|
color: $primary;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
@ -159,7 +159,7 @@
|
|||||||
.d-icon {
|
.d-icon {
|
||||||
color: $primary-medium;
|
color: $primary-medium;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
font-size: 1em;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $primary;
|
color: $primary;
|
||||||
|
@ -34,7 +34,7 @@ and (max-width : 570px) {
|
|||||||
color: dark-light-choose($primary-high, $secondary-medium);
|
color: dark-light-choose($primary-high, $secondary-medium);
|
||||||
display: block;
|
display: block;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
font-size: 11px;
|
font-size: .786em;
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
.search-highlight {
|
.search-highlight {
|
||||||
color: dark-light-choose($primary-high, $secondary-low);
|
color: dark-light-choose($primary-high, $secondary-low);
|
||||||
|
@ -136,13 +136,13 @@
|
|||||||
width: auto;
|
width: auto;
|
||||||
color: dark-light-choose($primary-medium, $secondary-medium);
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 12px;
|
font-size: .857em;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
.fa {
|
.fa {
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
font-size: 11px;
|
font-size: 0.917em;
|
||||||
color: dark-light-choose($primary-medium, $secondary-medium);
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
@ -328,7 +328,7 @@ a.star {
|
|||||||
padding: 4px 5px 2px 5px;
|
padding: 4px 5px 2px 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 11px;
|
font-size: .786em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -473,7 +473,7 @@ a.star {
|
|||||||
#suggested-topics .topic-statuses .topic-status {
|
#suggested-topics .topic-statuses .topic-status {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
i {
|
i {
|
||||||
font-size:15px;
|
font-size:1.071em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -31,7 +31,7 @@
|
|||||||
}
|
}
|
||||||
.user-stat {
|
.user-stat {
|
||||||
margin-left: 55px;
|
margin-left: 55px;
|
||||||
font-size: 13px;
|
font-size: .929em;
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -196,7 +196,7 @@ a.star {
|
|||||||
padding: 4px 5px 2px 5px;
|
padding: 4px 5px 2px 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 11px;
|
font-size: .786em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -171,7 +171,7 @@ body.wizard {
|
|||||||
|
|
||||||
span {
|
span {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 15px;
|
font-size: 1.071em;
|
||||||
mix-blend-mode: difference;
|
mix-blend-mode: difference;
|
||||||
color: white;
|
color: white;
|
||||||
z-index: 13;
|
z-index: 13;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user