michael/cordis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

move scss for overlays

Browse Source
This commit is contained in:
Michael Peters 2021-12-13 19:00:04 -06:00
parent 97bb08c255
commit 965de83433
10 changed files with 248 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/webapp/styles/components.scss → src/client/webapp/elements/components/components.scss
View File

@ -1,4 +1,4 @@
@import "theme.scss";
@import "../../styles/theme.scss";
.text-input-react {
.label {

26
src/client/webapp/elements/overlays/overlay-add-guild.scss Normal file
View File

@ -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;
}
}
}

32
src/client/webapp/elements/overlays/overlay-error-message.scss Normal file
View File

@ -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;
}
}
}

112
src/client/webapp/elements/overlays/overlay-guild-settings.scss Normal file
View File

@ -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;
}
}
}
}
}

37
src/client/webapp/elements/overlays/overlay-image.scss Normal file
View File

@ -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;
}
}

17
src/client/webapp/elements/overlays/overlay-modify-channel.scss Normal file
View File

@ -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;
}
}

15
src/client/webapp/elements/overlays/overlay-personalize.scss Normal file
View File

@ -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;
}
}
}

6
src/client/webapp/elements/overlays/overlays.scss Normal file
View File

@ -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";

245
src/client/webapp/styles/overlays.scss
View File

@ -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;

4
src/client/webapp/styles/styles.scss
View File

@ -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";