mirror of
https://github.com/discourse/discourse.git
synced 2025-03-04 17:09:39 +08:00

A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
263 lines
3.9 KiB
SCSS
263 lines
3.9 KiB
SCSS
// Desktop styles for "/user" section
|
|
.user-content-wrapper {
|
|
&,
|
|
> .user-stream {
|
|
> .alert:first-child {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.show-mores {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.form-horizontal .control-group.category {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.user-profile-hidden {
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
}
|
|
.user-secondary-navigation {
|
|
min-width: 150px;
|
|
.nav-stacked {
|
|
background-color: transparent;
|
|
|
|
li {
|
|
border-bottom: none;
|
|
|
|
&.archive {
|
|
padding-left: 1.4em;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-medium);
|
|
|
|
&.active {
|
|
color: var(--primary);
|
|
font-weight: bold;
|
|
background-color: transparent;
|
|
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-content {
|
|
padding-bottom: 12px;
|
|
margin-bottom: 12px;
|
|
background-color: var(--secondary);
|
|
box-sizing: border-box;
|
|
|
|
&.user-badges-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn.right {
|
|
float: right;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.pref-avatar {
|
|
.avatar {
|
|
max-width: 90px;
|
|
max-height: 90px;
|
|
}
|
|
}
|
|
|
|
.pref-second-factor {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.invite-controls .btn {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.user-invite-list {
|
|
width: 100%;
|
|
margin-top: 15px;
|
|
tr {
|
|
td {
|
|
padding: 0.667em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-invite-search {
|
|
clear: both;
|
|
margin: 15px 0px -15px 0px;
|
|
}
|
|
|
|
.user-invite-none {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.user-main {
|
|
margin-bottom: 50px;
|
|
|
|
.about {
|
|
&.group {
|
|
.details {
|
|
padding: 15px 0;
|
|
margin: 0;
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
.details {
|
|
img.avatar {
|
|
margin: 0 20px 10px 0;
|
|
}
|
|
|
|
.primary {
|
|
.primary-textual {
|
|
padding: 0 4px 4px;
|
|
a[href] {
|
|
text-decoration: underline;
|
|
}
|
|
h1 {
|
|
max-width: 100%;
|
|
@include ellipsis;
|
|
}
|
|
.location-and-website {
|
|
display: flex;
|
|
max-width: 100%;
|
|
@include ellipsis;
|
|
.user-profile-location {
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bio {
|
|
max-width: 750px;
|
|
|
|
a.mention {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.secondary {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
|
|
&.has-background {
|
|
.user-profile-image {
|
|
height: 300px;
|
|
}
|
|
.details {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 15px 0 0 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.controls {
|
|
padding: 0 0 12px 0;
|
|
float: right;
|
|
text-align: right;
|
|
|
|
.btn {
|
|
min-width: 140px;
|
|
}
|
|
}
|
|
|
|
&.collapsed-info {
|
|
.user-profile-image {
|
|
display: none;
|
|
}
|
|
.controls {
|
|
width: auto;
|
|
|
|
> ul {
|
|
display: inline-flex;
|
|
> li {
|
|
display: inline;
|
|
margin-left: 12px;
|
|
.d-button-label {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
a {
|
|
margin-bottom: 10px;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.details {
|
|
position: relative;
|
|
padding: 0;
|
|
margin-top: 0;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-field {
|
|
input[type="text"] {
|
|
width: 530px;
|
|
}
|
|
|
|
.controls {
|
|
.instructions {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.public-user-fields {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.user-preferences {
|
|
padding-top: 10px;
|
|
padding-left: 30px;
|
|
|
|
.form-vertical {
|
|
width: 500px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
h3 {
|
|
color: var(--primary);
|
|
margin: 20px 0 10px 0;
|
|
}
|
|
|
|
.category-selector,
|
|
.tag-chooser,
|
|
textarea,
|
|
input.user-selector,
|
|
.user-chooser {
|
|
width: 100%;
|
|
}
|
|
|
|
.instructions {
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
|
|
.user-crawler {
|
|
.username {
|
|
margin-left: 5px;
|
|
display: inline-block;
|
|
}
|
|
}
|