From 965de834336ce515c866922237f971a256e267fb Mon Sep 17 00:00:00 2001 From: Michael Peters Date: Mon, 13 Dec 2021 19:00:04 -0600 Subject: [PATCH] move scss for overlays --- .../components}/components.scss | 2 +- .../elements/overlays/overlay-add-guild.scss | 26 ++ .../overlays/overlay-error-message.scss | 32 +++ .../overlays/overlay-guild-settings.scss | 112 ++++++++ .../elements/overlays/overlay-image.scss | 37 +++ .../overlays/overlay-modify-channel.scss | 17 ++ .../overlays/overlay-personalize.scss | 15 ++ .../webapp/elements/overlays/overlays.scss | 6 + src/client/webapp/styles/overlays.scss | 245 ------------------ src/client/webapp/styles/styles.scss | 4 +- 10 files changed, 248 insertions(+), 248 deletions(-) rename src/client/webapp/{styles => elements/components}/components.scss (99%) create mode 100644 src/client/webapp/elements/overlays/overlay-add-guild.scss create mode 100644 src/client/webapp/elements/overlays/overlay-error-message.scss create mode 100644 src/client/webapp/elements/overlays/overlay-guild-settings.scss create mode 100644 src/client/webapp/elements/overlays/overlay-image.scss create mode 100644 src/client/webapp/elements/overlays/overlay-modify-channel.scss create mode 100644 src/client/webapp/elements/overlays/overlay-personalize.scss create mode 100644 src/client/webapp/elements/overlays/overlays.scss diff --git a/src/client/webapp/styles/components.scss b/src/client/webapp/elements/components/components.scss similarity index 99% rename from src/client/webapp/styles/components.scss rename to src/client/webapp/elements/components/components.scss index 9f5dcaa..6b75481 100644 --- a/src/client/webapp/styles/components.scss +++ b/src/client/webapp/elements/components/components.scss @@ -1,4 +1,4 @@ -@import "theme.scss"; +@import "../../styles/theme.scss"; .text-input-react { .label { diff --git a/src/client/webapp/elements/overlays/overlay-add-guild.scss b/src/client/webapp/elements/overlays/overlay-add-guild.scss new file mode 100644 index 0000000..8ad14d9 --- /dev/null +++ b/src/client/webapp/elements/overlays/overlay-add-guild.scss @@ -0,0 +1,26 @@ +@import "../../styles/theme.scss"; + +#react-overlays > .overlay > .content.add-guild { + min-width: 350px; + background-color: $background-secondary; + border-radius: 8px; + + .divider { + margin: 16px; + height: 1px; + background-color: $background-primary; + } + + .guild-preview { + margin: 16px; + } + + .personalization { + margin: 16px; + display: flex; + + .display-name { + margin-left: 16px; + } + } +} diff --git a/src/client/webapp/elements/overlays/overlay-error-message.scss b/src/client/webapp/elements/overlays/overlay-error-message.scss new file mode 100644 index 0000000..6ed88dc --- /dev/null +++ b/src/client/webapp/elements/overlays/overlay-error-message.scss @@ -0,0 +1,32 @@ +@import "../../styles/theme.scss"; + +#react-overlays > .overlay > .content.error-message { + background-color: $background-secondary; + padding: 16px; + border-radius: 8px; + align-items: center; + display: flex; + + .icon img { + display: block; + width: 48px; + height: 48px; + } + + .text { + margin-left: 16px; + + .title { + color: $header-primary; + font-size: 1.2em; + font-weight: 600; + line-height: 1; + margin-bottom: 4px; + } + + .message { + padding: 0; + color: $text-normal; + } + } +} diff --git a/src/client/webapp/elements/overlays/overlay-guild-settings.scss b/src/client/webapp/elements/overlays/overlay-guild-settings.scss new file mode 100644 index 0000000..c0b1847 --- /dev/null +++ b/src/client/webapp/elements/overlays/overlay-guild-settings.scss @@ -0,0 +1,112 @@ +@import "../../styles/theme.scss"; + +#react-overlays > .overlay > .content.display-swapper.guild-settings { + min-width: 350px; + + .overview { + .metadata { + display: flex; + margin-bottom: 12px; + + .name { + margin-left: 16px; + } + + .guild-name.text-input { + color: $header-primary; + font-weight: 500; + width: 150px; + } + } + } + + .invites { + .create-invite { + .interface { + display: flex; + align-items: flex-start; + + .inputs > :not(:last-child) { + margin-bottom: 8px; + } + } + + .guild-preview { + margin-left: 16px; + } + } + + .view-invites { + color: $text-normal; + + .invites-table { + .token-row { + display: flex; + align-items: center; + line-height: 1; + background-color: $background-secondary; + padding: 8px; + margin: 0 -8px; + border-radius: 4px; + + &:hover { + background-color: $background-secondary-alt; + } + + &:not(:last-child) { + margin-bottom: 8px; + } + + .user-token { + flex: 1; + + .user { + font-weight: 600; + margin-bottom: 4px; + } + + .token { + font-family: 'Courier New', Courier, monospace; + font-size: 0.85em; + color: $text-muted; + } + } + + .created-expires { + text-align: right; + font-size: 0.85em; + margin-right: 8px; + + > :not(:last-child) { + margin-bottom: 4px; + } + } + + .actions { + display: flex; + + .button { + padding: 8px; + } + + > :not(:last-child) { + margin-right: 8px; + } + } + } + } + + td.actions { + display: flex; + + :not(:last-child) { + margin-right: 8px; + } + + .button { + padding: 8px; + } + } + } + } +} diff --git a/src/client/webapp/elements/overlays/overlay-image.scss b/src/client/webapp/elements/overlays/overlay-image.scss new file mode 100644 index 0000000..d7cfd41 --- /dev/null +++ b/src/client/webapp/elements/overlays/overlay-image.scss @@ -0,0 +1,37 @@ +@import "../../styles/theme.scss"; + +#react-overlays > .overlay > .content.popup-image { + display: flex; + flex-flow: column; + align-items: center; + + > img { + max-width: 70vw; + max-height: 70vh; + } + + .download { + background-color: $background-primary; + border-radius: 8px; + padding: 8px; + display: flex; + align-items: center; + margin-top: 8px; + justify-content: space-between; + } + + .download .info { + margin-right: 8px; + } + + .download .info .name { + font-weight: 600; + color: $text-normal; + } + + .download .info .size { + font-size: 12px; + font-weight: 500; + color: $text-sending; + } +} diff --git a/src/client/webapp/elements/overlays/overlay-modify-channel.scss b/src/client/webapp/elements/overlays/overlay-modify-channel.scss new file mode 100644 index 0000000..d85fe71 --- /dev/null +++ b/src/client/webapp/elements/overlays/overlay-modify-channel.scss @@ -0,0 +1,17 @@ +@import "../../styles/theme.scss"; + +#react-overlays > .overlay > .content.modify-channel { + min-width: 350px; + max-width: calc(100vw - 80px); + + .preview.channel-title { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + padding-right: 8px; + } + + > .channel-name, + > .flavor-text { + margin: 16px; + } +} diff --git a/src/client/webapp/elements/overlays/overlay-personalize.scss b/src/client/webapp/elements/overlays/overlay-personalize.scss new file mode 100644 index 0000000..85c92b7 --- /dev/null +++ b/src/client/webapp/elements/overlays/overlay-personalize.scss @@ -0,0 +1,15 @@ +@import "../../styles/theme.scss"; + +#react-overlays > .overlay > .content.personalize { + background-color: $background-primary; + border-radius: 8px; + + .personalization { + display: flex; + padding: 16px; + + .display-name { + margin-left: 16px; + } + } +} diff --git a/src/client/webapp/elements/overlays/overlays.scss b/src/client/webapp/elements/overlays/overlays.scss new file mode 100644 index 0000000..c95b1e4 --- /dev/null +++ b/src/client/webapp/elements/overlays/overlays.scss @@ -0,0 +1,6 @@ +@import "./overlay-add-guild.scss"; +@import "./overlay-error-message.scss"; +@import "./overlay-guild-settings.scss"; +@import "./overlay-image.scss"; +@import "./overlay-modify-channel.scss"; +@import "./overlay-personalize.scss"; diff --git a/src/client/webapp/styles/overlays.scss b/src/client/webapp/styles/overlays.scss index ff8bcd6..1b9563d 100644 --- a/src/client/webapp/styles/overlays.scss +++ b/src/client/webapp/styles/overlays.scss @@ -37,44 +37,6 @@ body > .overlay, } } - /* Popup Image */ - - > .content.popup-image { - display: flex; - flex-flow: column; - align-items: center; - - > img { - max-width: 70vw; - max-height: 70vh; - } - - .download { - background-color: $background-primary; - border-radius: 8px; - padding: 8px; - display: flex; - align-items: center; - margin-top: 8px; - justify-content: space-between; - } - - .download .info { - margin-right: 8px; - } - - .download .info .name { - font-weight: 600; - color: $text-normal; - } - - .download .info .size { - font-size: 12px; - font-weight: 500; - color: $text-sending; - } - } - /* Drop Target Overlay */ > .content.drop-target { @@ -199,67 +161,6 @@ body > .overlay, } } - /* Personalization Overlay */ - - > .content.personalize { - background-color: $background-primary; - border-radius: 8px; - - .personalization { - display: flex; - padding: 16px; - - .display-name { - margin-left: 16px; - } - } - } - - /* Add guild Overlay */ - - > .content.add-guild { - min-width: 350px; - background-color: $background-secondary; - border-radius: 8px; - - .divider { - margin: 16px; - height: 1px; - background-color: $background-primary; - } - - .guild-preview { - margin: 16px; - } - - .personalization { - margin: 16px; - display: flex; - - .display-name { - margin-left: 16px; - } - } - } - - /* Modify Channel Overlay */ - - > .content.modify-channel { - min-width: 350px; - max-width: calc(100vw - 80px); - - .preview.channel-title { - border-top-left-radius: 8px; - border-top-right-radius: 8px; - padding-right: 8px; - } - - > .channel-name, - > .flavor-text { - margin: 16px; - } - } - /* Offers selectors on left side and content on the right side */ > .content.display-swapper { height: calc(100vh - 50px - 22px); // fill height @@ -315,152 +216,6 @@ body > .overlay, } } - /* guild Settings Overlay*/ - - > .content.display-swapper.guild-settings { - min-width: 350px; - - .overview { - .metadata { - display: flex; - margin-bottom: 12px; - - .name { - margin-left: 16px; - } - - .guild-name.text-input { - color: $header-primary; - font-weight: 500; - width: 150px; - } - } - } - - .invites { - .create-invite { - .interface { - display: flex; - align-items: flex-start; - - .inputs > :not(:last-child) { - margin-bottom: 8px; - } - } - - .guild-preview { - margin-left: 16px; - } - } - - .view-invites { - color: $text-normal; - - .invites-table { - .token-row { - display: flex; - align-items: center; - line-height: 1; - background-color: $background-secondary; - padding: 8px; - margin: 0 -8px; - border-radius: 4px; - - &:hover { - background-color: $background-secondary-alt; - } - - &:not(:last-child) { - margin-bottom: 8px; - } - - .user-token { - flex: 1; - - .user { - font-weight: 600; - margin-bottom: 4px; - } - - .token { - font-family: 'Courier New', Courier, monospace; - font-size: 0.85em; - color: $text-muted; - } - } - - .created-expires { - text-align: right; - font-size: 0.85em; - margin-right: 8px; - - > :not(:last-child) { - margin-bottom: 4px; - } - } - - .actions { - display: flex; - - .button { - padding: 8px; - } - - > :not(:last-child) { - margin-right: 8px; - } - } - } - } - - td.actions { - display: flex; - - :not(:last-child) { - margin-right: 8px; - } - - .button { - padding: 8px; - } - } - } - } - } - - /* Error Message Overlay */ - - > .content.error-message { - background-color: $background-secondary; - padding: 16px; - border-radius: 8px; - align-items: center; - display: flex; - - .icon img { - display: block; - width: 48px; - height: 48px; - } - - .text { - margin-left: 16px; - - .title { - color: $header-primary; - font-size: 1.2em; - font-weight: 600; - line-height: 1; - margin-bottom: 4px; - } - - .message { - padding: 0; - color: $text-normal; - } - } - } - /* View Tokens Overlay */ > .content.token-log { background-color: $background-secondary; diff --git a/src/client/webapp/styles/styles.scss b/src/client/webapp/styles/styles.scss index 95ed443..50971c7 100644 --- a/src/client/webapp/styles/styles.scss +++ b/src/client/webapp/styles/styles.scss @@ -1,7 +1,8 @@ @import "theme.scss"; @import "fonts.scss"; -@import "components.scss"; +@import "../elements/components/components.scss"; +@import "../elements/overlays/overlays.scss"; @import "buttons.scss"; @import "channel-feed.scss"; @@ -16,7 +17,6 @@ @import "messages.scss"; @import "overlays.scss"; @import "scrollbars.scss"; -@import "scrollbars.scss"; @import "guild-list.scss"; @import "guild-members.scss"; @import "guild.scss";