diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/modal.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/modal.scss | 138 |
1 files changed, 127 insertions, 11 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index e95bea0d7..ab8609170 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -23,6 +23,7 @@ left: 0; width: 100%; height: 100%; + box-sizing: border-box; display: flex; flex-direction: column; align-items: center; @@ -415,7 +416,6 @@ } .boost-modal, -.favourite-modal, .confirmation-modal, .report-modal, .actions-modal, @@ -460,7 +460,7 @@ } } -.favourite-modal .status-direct { +.boost-modal .status-direct { background-color: inherit; } @@ -477,8 +477,7 @@ } } -.boost-modal__container, -.favourite-modal__container { +.boost-modal__container { overflow-x: scroll; padding: 10px; @@ -489,7 +488,6 @@ } .boost-modal__action-bar, -.favourite-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .block-modal__action-bar { @@ -511,13 +509,11 @@ } } -.boost-modal__status-header, -.favourite-modal__status-header { +.boost-modal__status-header { font-size: 15px; } -.boost-modal__status-time, -.favourite-modal__status-time { +.boost-modal__status-time { float: right; font-size: 14px; } @@ -1289,11 +1285,11 @@ } } -.modal-root__container .composer--options--dropdown { +.modal-root__container .privacy-dropdown { flex-grow: 0; } -.modal-root__container .composer--options--dropdown--content { +.modal-root__container .privacy-dropdown__dropdown { pointer-events: auto; z-index: 9999; } @@ -1304,3 +1300,123 @@ img.modal-warning { margin-bottom: 15px; width: 60px; } + +.interaction-modal { + max-width: 90vw; + width: 600px; + background: $ui-base-color; + border-radius: 8px; + overflow: hidden; + position: relative; + display: block; + padding: 20px; + + h3 { + font-size: 22px; + line-height: 33px; + font-weight: 700; + text-align: center; + } + + &__icon { + color: $highlight-text-color; + margin: 0 5px; + } + + &__lead { + padding: 20px; + text-align: center; + + h3 { + margin-bottom: 15px; + } + + p { + font-size: 17px; + line-height: 22px; + color: $darker-text-color; + } + } + + &__choices { + display: flex; + + &__choice { + flex: 0 0 auto; + width: 50%; + box-sizing: border-box; + padding: 20px; + + h3 { + margin-bottom: 20px; + } + + p { + color: $darker-text-color; + margin-bottom: 20px; + } + + .button { + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + } + } + } + + @media screen and (max-width: $no-gap-breakpoint - 1px) { + &__choices { + display: block; + + &__choice { + width: auto; + margin-bottom: 20px; + } + } + } +} + +.copypaste { + display: flex; + align-items: center; + gap: 10px; + + input { + display: block; + font-family: inherit; + background: darken($ui-base-color, 8%); + border: 1px solid $highlight-text-color; + color: $darker-text-color; + border-radius: 4px; + padding: 6px 9px; + line-height: 22px; + font-size: 14px; + transition: border-color 300ms linear; + flex: 1 1 auto; + overflow: hidden; + + &:focus { + outline: 0; + background: darken($ui-base-color, 4%); + } + } + + .button { + flex: 0 0 auto; + transition: background 300ms linear; + } + + &.copied { + input { + border: 1px solid $valid-value-color; + transition: none; + } + + .button { + background: $valid-value-color; + transition: none; + } + } +} |