discourse/app/assets/stylesheets/common/modal/modal-overrides.scss
Martin Brennan 10b546d8c7
FIX: Make fullscreen code modal occupy as much of the screen as needed (#24403)
This commit makes it so the fullscreen code modal grows
to fit its content, and doesn't show horizontal scrollbars
unless the entire screen is filled by the modal already.

The code syntax highlighting and copy buttons were also
broken in fullscreen because of modal changes over time.
2023-11-21 09:36:42 +10:00

345 lines
5.6 KiB
SCSS

.d-modal.insert-hyperlink-modal {
.insert-link {
overflow-y: visible;
input {
min-width: 300px;
}
.inputs {
position: relative;
.spinner {
position: absolute;
right: 8px;
top: -15px;
width: 10px;
height: 10px;
}
.internal-link-results {
position: absolute;
top: 70%;
padding: 5px 10px;
box-shadow: var(--shadow-card);
z-index: 5;
background-color: var(--secondary);
max-height: 150px;
width: 90%;
overflow-y: auto;
> .search-link {
padding: 6px;
border-bottom: 1px solid var(--primary-low);
cursor: pointer;
display: block;
&:hover,
&:focus {
background-color: var(--highlight-bg);
}
.search-category {
display: flex;
align-items: center;
}
.discourse-tags {
font-size: var(--font-down-1);
}
}
}
}
}
}
.sidebar-section-form-modal {
.sidebar-section-form-link {
.select-kit {
width: 100%;
}
}
}
.jump-to-post-modal {
.modal-body,
.d-modal__body {
overflow-y: visible;
#post-jump {
margin: 0;
width: 100px;
}
.date-picker {
margin: 0;
width: 180px;
}
.input-hint-text {
color: var(--primary);
}
.jump-to-post-control .index {
color: var(--primary-medium);
}
.jump-to-date-control {
display: flex;
align-items: center;
.input-hint-text {
margin-left: 0;
margin-right: 0.5em;
}
}
.separator {
position: relative;
margin: 0.5em auto;
hr {
flex: 1 0 0px;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--secondary);
padding: 0.25rem 0.5rem;
color: var(--primary-medium);
}
}
}
}
.d-modal.choose-topic-modal {
.d-modal {
&__container {
width: 40em; //fixed width to avoid jumps when switching to different views
}
}
#split-topic-name,
#choose-topic-title,
#choose-message-title {
width: 100%;
}
.category-chooser {
margin-bottom: 9px;
}
.controls.existing-topic {
margin-bottom: 0.75em;
}
// move to existing topic
.existing-topic {
.radio {
flex-wrap: wrap;
}
.topic-title {
max-width: 90%;
}
.topic-categories {
display: flex;
font-weight: normal;
gap: 0.5em;
width: 100%;
}
}
#choosing-topic {
form {
hr {
margin-bottom: 0.5em;
}
}
}
}
.d-modal.publish-page-modal {
.d-modal {
&__body {
p.publish-description {
margin-top: 0;
}
.publish-url {
margin-bottom: 1em;
.example-url,
.invalid-slug {
font-weight: bold;
}
}
.publish-slug:disabled {
cursor: not-allowed;
}
.controls {
margin-bottom: 1em;
.description {
margin: 0;
display: flex;
align-items: center;
input[type="checkbox"] {
margin-top: 0;
}
}
}
}
&__footer {
display: flex;
.close-publish-page {
margin-left: auto;
margin-right: 0;
}
}
}
}
.d-modal.topic-bulk-actions-modal {
.d-modal {
&__container {
min-width: 0;
width: 100%;
}
}
p {
margin-top: 0;
}
.bulk-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
gap: 0.5em;
max-width: 100%;
min-width: 0;
.d-button-label {
@include ellipsis;
}
}
}
.d-modal.edit-slow-mode-modal {
.slow-mode-label {
display: inline-flex;
}
.alert.alert-info {
margin-bottom: 0;
}
.input-small {
width: 10%;
}
}
.d-modal.group-add-members-modal {
.input-group {
margin-bottom: 0.5em;
&:last-child {
margin-bottom: 0;
}
}
.user-chooser {
width: calc(100%);
}
}
.d-modal.share-topic-modal {
.d-modal {
&__title {
display: flex;
align-items: center;
gap: 0.5rem;
}
&__subtitle-text {
color: var(--primary-med-or-secondary-med);
}
}
form {
margin-bottom: 0;
}
}
.d-modal.chat-modal-new-message {
align-items: flex-start;
.d-modal {
&__container {
width: var(--modal-max-width);
margin-top: 1rem;
}
&__body {
padding: 0;
input {
width: auto;
}
}
}
.chat-message-creator {
&__add-members-header-container {
padding-inline: 1rem 0.5rem;
}
&__add-members-header {
align-items: center;
}
&__members {
min-height: unset;
padding: 0.25rem 0.5rem;
}
&__add-members__close-btn {
margin-top: 0;
height: 33px;
}
}
@media screen and (max-width: 768px) {
.d-modal {
&__container {
width: 100%;
margin-top: 0;
}
}
}
}
.d-modal.fullscreen-table-modal,
.d-modal.fullscreen-code-modal {
.d-modal {
&__container {
max-height: 100vh;
}
}
.modal-close {
margin-left: auto;
}
}
.d-modal.fullscreen-table-modal {
.d-modal {
&__container {
display: grid;
grid-template-rows: auto 1fr auto;
}
&__footer {
justify-content: space-between;
}
}
}
.d-modal.fullscreen-code-modal {
pre {
margin: 0;
code {
max-width: none;
max-height: none;
padding: 1rem;
white-space: pre;
}
}
}