mirror of
https://github.com/discourse/discourse.git
synced 2024-11-29 00:04:11 +08:00
c937afc75e
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.
229 lines
4.2 KiB
SCSS
229 lines
4.2 KiB
SCSS
.composer-popup-container {
|
|
display: none !important; // can be removed if inline JS CSS is removed from composer-popup
|
|
}
|
|
|
|
.composer-popup {
|
|
display: none !important; // can be removed if inline JS CSS is removed from composer-popup
|
|
}
|
|
|
|
#reply-control {
|
|
z-index: z("mobile-composer");
|
|
.reply-area {
|
|
padding: 0 10px;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
@media screen and (max-width: 374px) {
|
|
padding: 0 5px;
|
|
}
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&.open {
|
|
height: 250px;
|
|
&.edit-title {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
body.ios-safari-composer-hacks &.open {
|
|
height: calc(var(--composer-vh, 1vh) * 100);
|
|
}
|
|
|
|
.keyboard-visible body.ios-safari-composer-hacks &.open .reply-area {
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.reply-to {
|
|
margin: 5px 0;
|
|
.reply-details {
|
|
max-width: calc(100% - 75px);
|
|
}
|
|
|
|
// Protection for languages with long strings on very small screens. This
|
|
// has no effect on most users but we need it for some cases. If this is
|
|
// not added, "add edit reason" will overlap with the composer controls
|
|
@include breakpoint(mobile-small) {
|
|
.reply-details {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.display-edit-reason {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.composer-controls {
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggler {
|
|
.d-icon-chevron-down {
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
|
|
&.draft {
|
|
z-index: z("footer-nav") + 1;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
.toggle-toolbar,
|
|
.toggler {
|
|
top: 8px;
|
|
}
|
|
.draft-text {
|
|
width: calc(100% - 40px);
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
|
|
#reply-title {
|
|
width: calc(100% - 20px);
|
|
}
|
|
|
|
.category-input {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.submit-panel {
|
|
margin-bottom: 5px;
|
|
align-items: baseline;
|
|
.save-or-cancel {
|
|
flex: 1 1 auto;
|
|
#draft-status,
|
|
#file-uploading {
|
|
margin-left: 6px;
|
|
}
|
|
.cancel {
|
|
font-size: 1.4em;
|
|
color: var(--primary-low-mid);
|
|
margin-left: 0.6em;
|
|
padding: 3px 6px;
|
|
}
|
|
}
|
|
.mobile-file-upload:not(.hidden),
|
|
.mobile-preview {
|
|
// Alignment fix, remove if converted to buttons
|
|
display: inline-flex;
|
|
}
|
|
.mobile-file-upload {
|
|
&.hidden + .mobile-preview {
|
|
// Hide preview button while file is uploading to make room for upload progress
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mobile-preview {
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
.d-editor-textarea-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
&.show-preview {
|
|
.submit-panel {
|
|
padding-top: 10px;
|
|
z-index: z("fullscreen") + 1;
|
|
background-color: var(--secondary);
|
|
.cancel,
|
|
.mobile-file-upload,
|
|
.mobile-preview {
|
|
display: none;
|
|
}
|
|
}
|
|
.d-editor-preview-wrapper {
|
|
position: fixed;
|
|
z-index: z("fullscreen");
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--secondary);
|
|
border-bottom: 40px solid var(--secondary);
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
.d-editor-preview {
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.hide-preview {
|
|
.d-editor-preview-wrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.d-editor-button-bar {
|
|
display: none;
|
|
}
|
|
|
|
.toolbar-visible .d-editor-button-bar {
|
|
display: flex;
|
|
}
|
|
|
|
.d-editor-button-bar .btn {
|
|
&.preview {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
#mobile-uploader {
|
|
display: none;
|
|
}
|
|
|
|
.title-and-category,
|
|
.user-selector {
|
|
margin: 0;
|
|
.users-input {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.with-tags {
|
|
.category-input {
|
|
flex: 1 0 0px;
|
|
margin: 0;
|
|
width: 45%;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.mini-tag-chooser {
|
|
width: 50%;
|
|
flex: 1 0 0px;
|
|
margin-left: 5px;
|
|
margin-bottom: 5px;
|
|
z-index: z("base");
|
|
}
|
|
|
|
.selected-name {
|
|
overflow: hidden;
|
|
.name {
|
|
@include ellipsis;
|
|
font-size: $font-down-1;
|
|
.badge-wrapper {
|
|
font-size: $font-0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.title-input,
|
|
.category-input,
|
|
.users-input,
|
|
.add-warning {
|
|
width: 100%;
|
|
}
|
|
|
|
.add-warning {
|
|
margin: 0 0 5px 5px;
|
|
}
|
|
|
|
.whisper {
|
|
margin-right: 5px;
|
|
}
|
|
}
|