Move scss to its own directory structure rather than inline with components
This commit is contained in:
Michael Peters
parent
46aade557d
commit
b9da8c73c6
2
makefile
2
makefile
@ -2,7 +2,7 @@ watch-tsc:
|
||||
./node_modules/.bin/tsc --watch -p ./src/tsconfig.json
|
||||
|
||||
watch-sass:
|
||||
./node_modules/.bin/sass --watch ./src/client/webapp/styles/styles.scss ./dist/client/webapp/styles/styles.css
|
||||
./node_modules/.bin/sass --watch ./src/client/webapp/index.scss ./dist/client/webapp/index.css
|
||||
|
||||
lint-autofix:
|
||||
./node_modules/.bin/eslint ./src --ext .js,.jsx,.ts,.tsx --fix
|
||||
|
||||
51
src/client/webapp/elements-styles/components/buttons.scss
Normal file
51
src/client/webapp/elements-styles/components/buttons.scss
Normal file
@ -0,0 +1,51 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
/* Buttons */
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: theme.$brand;
|
||||
color: theme.$header-primary;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
padding: 8px 24px;
|
||||
|
||||
&:hover {
|
||||
background-color: theme.$brand-hover;
|
||||
}
|
||||
|
||||
&.positive {
|
||||
background-color: theme.$background-button-positive;
|
||||
|
||||
&:hover {
|
||||
background-color: theme.$background-button-positive-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background-color: theme.$background-button-negative;
|
||||
|
||||
&:hover {
|
||||
background-color: theme.$background-button-negative-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.perdu {
|
||||
background-color: theme.$background-button-perdu;
|
||||
|
||||
&:hover {
|
||||
background-color: theme.$background-button-perdu-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.lower-submit {
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
&.display-popup {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
&.table-icon {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.file-drop {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 22px);
|
||||
top: 22px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: theme.$background-overlay;
|
||||
|
||||
.panel {
|
||||
// TODO: make this nicer
|
||||
color: theme.$text-normal;
|
||||
background-color: theme.$background-primary;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img.drop-icon {
|
||||
display: block;
|
||||
height: 128px;
|
||||
max-width: 128px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.drop-message {
|
||||
font-size: 2em;
|
||||
color: theme.$header-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.dropdown-react {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.label {
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
color: theme.$interactive-normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.display-content {
|
||||
background-color: theme.$background-input;
|
||||
color: theme.$text-normal;
|
||||
padding: 8px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
border: 1px solid theme.$border-input;
|
||||
}
|
||||
|
||||
&:hover .display {
|
||||
border-color: theme.$border-input-hover;
|
||||
}
|
||||
|
||||
&:focus .display {
|
||||
border-color: theme.$border-input-focus;
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(.open) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 8px;
|
||||
color: theme.$text-normal;
|
||||
background-color: theme.$background-dropdown-option;
|
||||
|
||||
&:hover {
|
||||
background-color: theme.$background-dropdown-option-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.image-edit-input-react {
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img.value {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modify {
|
||||
position: absolute;
|
||||
background-color: theme.$brand;
|
||||
padding: 6px;
|
||||
border-radius: 16px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
|
||||
img.pencil {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
32
src/client/webapp/elements-styles/components/input-text.scss
Normal file
32
src/client/webapp/elements-styles/components/input-text.scss
Normal file
@ -0,0 +1,32 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.text-input-react {
|
||||
.label {
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
color: theme.$interactive-normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: theme.$text-normal;
|
||||
background-color: theme.$background-input;
|
||||
border: 1px solid theme.$border-input;
|
||||
border-radius: 3px;
|
||||
max-height: 100px;
|
||||
overflow-y: scroll;
|
||||
padding: 8px;
|
||||
|
||||
&:hover {
|
||||
border-color: theme.$border-input-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: theme.$border-input-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.guild-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-right: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: theme.$header-primary;
|
||||
font-size: 1.25em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.url {
|
||||
color: theme.$text-normal;
|
||||
}
|
||||
|
||||
.expires {
|
||||
color: theme.$text-muted;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.lower-react {
|
||||
.error-container {
|
||||
background-color: theme.$background-secondary-alt;
|
||||
overflow-y: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.2s ease-in-out;
|
||||
|
||||
&:not(.empty) {
|
||||
max-height: 48px;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 16px 16px;
|
||||
height: 16px;
|
||||
color: theme.$text-normal;
|
||||
|
||||
&::first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background-color: theme.$background-tertiary;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
@use "../../../styles/theme.scss";
|
||||
|
||||
.context .menu {
|
||||
min-width: 180px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
background-color: theme.$background-floating;
|
||||
color: theme.$text-normal;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
.item-spacer {
|
||||
background-color: theme.$background-secondary;
|
||||
height: 1px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 8px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
color: theme.$header-primary;
|
||||
background-color: theme.$brand-hover;
|
||||
}
|
||||
|
||||
.item.red {
|
||||
color: theme.$item-red;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item.red:hover {
|
||||
color: theme.$header-primary;
|
||||
background-color: theme.$item-red;
|
||||
}
|
||||
|
||||
.item .icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.guild-title-context-menu .item .icon img,
|
||||
.guild-title-context-menu .item .icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.member-context .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.member-context .item .icon img,
|
||||
.member-context .item .icon svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.member-context .item .status-circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.member-context .item .status-text {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
@use "../../../styles/theme.scss";
|
||||
|
||||
.context {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
|
||||
// Since useEffect gets called after the element is rendered, hide it until
|
||||
// it gets aligned
|
||||
&.react:not(.aligned) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import "theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.channel-list {
|
||||
box-sizing: border-box;
|
||||
@ -7,17 +7,17 @@
|
||||
height: calc(100vh - 71px - 51px); /* May be nice to figure out a way to do this without fixed heights */
|
||||
|
||||
.channel.active {
|
||||
color: $interactive-active;
|
||||
background-color: $background-modifier-selected;
|
||||
color: theme.$interactive-active;
|
||||
background-color: theme.$background-modifier-selected;
|
||||
}
|
||||
|
||||
.channel:not(.active):hover {
|
||||
color: $interactive-hover;
|
||||
background-color: $background-modifier-hover;
|
||||
color: theme.$interactive-hover;
|
||||
background-color: theme.$background-modifier-hover;
|
||||
}
|
||||
|
||||
.channel {
|
||||
color: $channels-default;
|
||||
color: theme.$channels-default;
|
||||
margin: 0 0 2px 8px;
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
@ -0,0 +1,18 @@
|
||||
@use "../../../styles/theme.scss";
|
||||
|
||||
.channel .channel-gear-hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
|
||||
.tab {
|
||||
color: theme.$background-floating; // svg
|
||||
}
|
||||
|
||||
.text {
|
||||
color: theme.$text-normal;
|
||||
background-color: theme.$background-floating;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import "theme.scss";
|
||||
@use "../../../styles/theme.scss";
|
||||
|
||||
/* Member */
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* members are used in the member list and the connection information */
|
||||
/* Note: This member class is used in the member list and the connection information */
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
/* see specific cases for width */
|
||||
.name {
|
||||
color: $header-primary;
|
||||
color: theme.$header-primary;
|
||||
margin-bottom: 2px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@ -45,6 +45,6 @@
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
text-transform: capitalize;
|
||||
color: $channels-default;
|
||||
color: theme.$channels-default;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,144 @@
|
||||
@use "../../../styles/theme.scss";
|
||||
|
||||
.message-react {
|
||||
display: flex;
|
||||
padding: 4px 16px;
|
||||
|
||||
&.continued {
|
||||
margin-top: -4px;
|
||||
|
||||
.timestamp {
|
||||
flex: none; /* >:| NOT GONNA SHRINK BOI */
|
||||
margin: 0;
|
||||
width: 40px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover .timestamp {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.member-avatar img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
margin-left: 16px; /* putting the margin here rather than on the avatar makes selecting better */
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
color: theme.$header-primary;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.member-name:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
color: theme.$text-muted;
|
||||
margin-left: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 16px;
|
||||
color: theme.$text-normal;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
&.text {
|
||||
white-space: pre-wrap;
|
||||
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
color: theme.$header-primary; /* a bit brighter for some more emphasis */
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
&.image {
|
||||
/* Center the loading icon */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
background-color: theme.$background-secondary-alt;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
max-width: 400px;
|
||||
max-height: 300px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: ellipse the overflow */
|
||||
&.resource {
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: theme.$background-secondary-alt;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .download-status {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
> :not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
max-width: 32px;
|
||||
height: 32px;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.filename {
|
||||
color: theme.$text-link;
|
||||
}
|
||||
|
||||
.download-status {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: theme.$text-muted;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
src/client/webapp/elements-styles/lists/guild-list.scss
Normal file
68
src/client/webapp/elements-styles/lists/guild-list.scss
Normal file
@ -0,0 +1,68 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.guild-list-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
flex: none; /* >:| NOT GONNA SHINK BOI */
|
||||
width: 72px; /* TODO: auto-calculated from content */
|
||||
height: calc(100vh - 22px);
|
||||
padding-top: 8px;
|
||||
overflow-y: scroll;
|
||||
|
||||
.guild-list {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.guild-listguild-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.add-guild,
|
||||
.guild-list .guild {
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add-guild .pill,
|
||||
.guild-list .guild .pill {
|
||||
background-color: theme.$header-primary;
|
||||
width: 8px;
|
||||
height: 0;
|
||||
border-radius: 4px 4px;
|
||||
margin-left: -4px;
|
||||
margin-right: 8px;
|
||||
transition: height .1s ease-in-out;
|
||||
}
|
||||
|
||||
.guild-list .guild.active .pill {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.guild-list .guild.unread:not(.active) .pill {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.add-guild:hover .pill,
|
||||
.guild-list .guild:not(.active):hover .pill {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.add-guild img,
|
||||
.guild-list .guild img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
transition: border-radius .1s ease-in-out;
|
||||
}
|
||||
|
||||
.add-guild:hover img,
|
||||
.guild-list .guild:hover img,
|
||||
.guild-list .guild.active img {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
23
src/client/webapp/elements-styles/lists/member-list.scss
Normal file
23
src/client/webapp/elements-styles/lists/member-list.scss
Normal file
@ -0,0 +1,23 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.member-list {
|
||||
.member {
|
||||
background-color: theme.$background-secondary;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.member .name {
|
||||
width: calc(208px - 40px);
|
||||
}
|
||||
|
||||
.member .status-circle {
|
||||
border-color: theme.$background-secondary;
|
||||
}
|
||||
|
||||
.member:hover {
|
||||
background-color: theme.$background-modifier-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../styles/theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
$scrollbarBottom: 4px;
|
||||
$borderRadius: 8px;
|
||||
@ -27,21 +27,21 @@ $borderRadius: 8px;
|
||||
.line {
|
||||
flex: 1;
|
||||
height: 1;
|
||||
background-color: $background-modifier-accent;
|
||||
background-color: theme.$background-modifier-accent;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 12px;
|
||||
line-height: 13px;
|
||||
font-weight: 600;
|
||||
color: $text-muted;
|
||||
color: theme.$text-muted;
|
||||
padding: 2px 4px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $background-message-hover;
|
||||
background-color: theme.$background-message-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,4 @@
|
||||
@import "theme.scss";
|
||||
|
||||
/* Popup Image Overlay */
|
||||
@use "../../../styles/theme.scss";
|
||||
|
||||
body > .overlay,
|
||||
.react-overlays > .overlay {
|
||||
@ -13,34 +11,12 @@ body > .overlay,
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $background-overlay;
|
||||
|
||||
/* General Controls */
|
||||
.text-input {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: $text-normal;
|
||||
background-color: $background-input;
|
||||
border: 1px solid $border-input;
|
||||
border-radius: 3px;
|
||||
max-height: 100px;
|
||||
overflow-y: scroll;
|
||||
padding: 8px;
|
||||
|
||||
&:hover {
|
||||
border-color: $border-input-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $border-input-focus;
|
||||
}
|
||||
}
|
||||
background-color: theme.$background-overlay;
|
||||
|
||||
/* General Submit Dialog Overlays */
|
||||
|
||||
> .content.submit-dialog {
|
||||
background-color: $background-primary;
|
||||
background-color: theme.$background-primary;
|
||||
border-radius: 8px;
|
||||
|
||||
.image-input {
|
||||
@ -51,8 +27,8 @@ body > .overlay,
|
||||
|
||||
.text-input {
|
||||
margin: 16px;
|
||||
color: $text-normal;
|
||||
background-color: $channeltextarea-background;
|
||||
color: theme.$text-normal;
|
||||
background-color: theme.$channeltextarea-background;
|
||||
border-radius: 8px;
|
||||
max-height: 100px;
|
||||
overflow-y: scroll;
|
||||
@ -70,11 +46,11 @@ body > .overlay,
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: $background-tertiary;
|
||||
background-color: theme.$background-tertiary;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $text-normal;
|
||||
color: theme.$text-normal;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
@ -92,7 +68,7 @@ body > .overlay,
|
||||
|
||||
> .choices-react {
|
||||
box-sizing: border-box;
|
||||
background-color: $background-secondary;
|
||||
background-color: theme.$background-secondary;
|
||||
width: 226px;
|
||||
padding: 32px 16px;
|
||||
border-top-left-radius: $content-border-radius;
|
||||
@ -101,39 +77,95 @@ body > .overlay,
|
||||
> .title {
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
color: $interactive-normal;
|
||||
color: theme.$interactive-normal;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
> .choice {
|
||||
color: $interactive-normal;
|
||||
color: theme.$interactive-normal;
|
||||
cursor: pointer;
|
||||
padding: 6px 12px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&.selected {
|
||||
color: $interactive-active;
|
||||
background-color: $background-modifier-selected
|
||||
color: theme.$interactive-active;
|
||||
background-color: theme.$background-modifier-selected
|
||||
}
|
||||
|
||||
&:not(.selected):hover {
|
||||
color: $interactive-hover;
|
||||
background-color: $background-modifier-hover;
|
||||
color: theme.$interactive-hover;
|
||||
background-color: theme.$background-modifier-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.display {
|
||||
$content-border-radius: 4px;
|
||||
|
||||
flex: 1;
|
||||
border-top-right-radius: $content-border-radius;
|
||||
border-bottom-right-radius: $content-border-radius;
|
||||
background-color: theme.$background-primary;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
color: $text-normal;
|
||||
color: theme.$text-normal;
|
||||
font-size: 1.1em;
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
> .scroll {
|
||||
margin: 32px;
|
||||
|
||||
.divider {
|
||||
margin: 16px 0;
|
||||
height: 1px;
|
||||
background-color: theme.$background-primary-divider;
|
||||
}
|
||||
}
|
||||
|
||||
> .popup {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
margin: 16px;
|
||||
padding: 12px 12px 12px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: theme.$interactive-active;
|
||||
background-color: theme.$background-popup-message;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
|
||||
.button {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.85em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:not(:last-child) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
@import "../../styles/theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.react-overlays > .overlay > .content.add-guild {
|
||||
min-width: 350px;
|
||||
background-color: $background-primary;
|
||||
background-color: theme.$background-primary;
|
||||
border-radius: 8px;
|
||||
|
||||
.divider {
|
||||
margin: 16px;
|
||||
height: 1px;
|
||||
background-color: $background-primary-divider;
|
||||
background-color: theme.$background-primary-divider;
|
||||
}
|
||||
|
||||
.guild-preview {
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../styles/theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.react-overlays > .overlay > .content.modify-channel {
|
||||
min-width: 350px;
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../styles/theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.react-overlays > .overlay > .content.error-message {
|
||||
background-color: $background-secondary;
|
||||
background-color: theme.$background-secondary;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
@ -17,7 +17,7 @@
|
||||
margin-left: 16px;
|
||||
|
||||
.title {
|
||||
color: $header-primary;
|
||||
color: theme.$header-primary;
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
.message {
|
||||
padding: 0;
|
||||
color: $text-normal;
|
||||
color: theme.$text-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../styles/theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.react-overlays > .overlay > .content.display-swapper.guild-settings {
|
||||
min-width: 350px;
|
||||
@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.guild-name.text-input {
|
||||
color: $header-primary;
|
||||
color: theme.$header-primary;
|
||||
font-weight: 500;
|
||||
width: 150px;
|
||||
}
|
||||
@ -37,20 +37,20 @@
|
||||
}
|
||||
|
||||
.view-invites {
|
||||
color: $text-normal;
|
||||
color: theme.$text-normal;
|
||||
|
||||
.invites-table {
|
||||
.token-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
background-color: $background-secondary;
|
||||
background-color: theme.$background-secondary;
|
||||
padding: 8px;
|
||||
margin: 0 -8px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: $background-secondary-alt;
|
||||
background-color: theme.$background-secondary-alt;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
@ -68,7 +68,7 @@
|
||||
.token {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.85em;
|
||||
color: $text-muted;
|
||||
color: theme.$text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../styles/theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.react-overlays > .overlay > .content.popup-image {
|
||||
display: flex;
|
||||
@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.download {
|
||||
background-color: $background-primary;
|
||||
background-color: theme.$background-primary;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
@ -26,12 +26,12 @@
|
||||
|
||||
.download .info .name {
|
||||
font-weight: 600;
|
||||
color: $text-normal;
|
||||
color: theme.$text-normal;
|
||||
}
|
||||
|
||||
.download .info .size {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: $text-sending;
|
||||
color: theme.$text-sending;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../styles/theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.react-overlays > .overlay > .content.personalize {
|
||||
background-color: $background-primary;
|
||||
background-color: theme.$background-primary;
|
||||
border-radius: 8px;
|
||||
|
||||
.personalization {
|
||||
2
src/client/webapp/elements-styles/root.scss
Normal file
2
src/client/webapp/elements-styles/root.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@use "../styles/theme.scss";
|
||||
|
||||
@ -1,11 +1,4 @@
|
||||
@import "theme.scss";
|
||||
|
||||
.guild-channel {
|
||||
flex: 1;
|
||||
background-color: $background-primary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
// .channel-title is also used in the channel overlay
|
||||
|
||||
@ -17,9 +10,9 @@
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $header-primary;
|
||||
background-color: $background-primary; /* Different from discrod */
|
||||
border-bottom: 1px solid $background-secondary-alt;
|
||||
color: theme.$header-primary;
|
||||
background-color: theme.$background-primary; /* Different from discrod */
|
||||
border-bottom: 1px solid theme.$background-secondary-alt;
|
||||
|
||||
.channel-icon {
|
||||
margin: 0 8px;
|
||||
@ -36,7 +29,7 @@
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
margin: 0 16px;
|
||||
background-color: $background-modifier-accent;
|
||||
background-color: theme.$background-modifier-accent;
|
||||
}
|
||||
|
||||
.channel-flavor-text {
|
||||
@ -44,7 +37,7 @@
|
||||
line-height: 18px;
|
||||
font-weight: 500;
|
||||
padding-right: 16px;
|
||||
color: $header-secondary;
|
||||
color: theme.$header-secondary;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -1,7 +1,7 @@
|
||||
@import "theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.connection-info {
|
||||
background-color: $background-secondary-alt;
|
||||
background-color: theme.$background-secondary-alt;
|
||||
padding: 8px;
|
||||
cursor: pointer; /* clicking on this brings up the select-status context menu */
|
||||
|
||||
@ -11,6 +11,6 @@
|
||||
}
|
||||
|
||||
.status-circle {
|
||||
border-color: $background-secondary-alt;
|
||||
border-color: theme.$background-secondary-alt;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.context .add-guild-hover,
|
||||
.guild-hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: theme.$background-floating; /* for the tab */
|
||||
|
||||
.info {
|
||||
background-color: theme.$background-floating;
|
||||
color: theme.$header-primary;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
|
||||
> :not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.connection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.connection .status-circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
src/client/webapp/elements-styles/sections/guild-title.scss
Normal file
20
src/client/webapp/elements-styles/sections/guild-title.scss
Normal file
@ -0,0 +1,20 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.guild-title {
|
||||
.guild-name-container {
|
||||
padding: 0 16px;
|
||||
height: 48px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: theme.$header-primary;
|
||||
border-bottom: 1px solid theme.$background-secondary-alt;
|
||||
|
||||
.guild-name {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/client/webapp/elements-styles/sections/guild.scss
Normal file
44
src/client/webapp/elements-styles/sections/guild.scss
Normal file
@ -0,0 +1,44 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.guild-react {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.guild-sidebar {
|
||||
flex: none; /* >:| NOT GONNA SHINK BOI */
|
||||
width: 240px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: theme.$background-secondary;
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
|
||||
.guild-channel {
|
||||
flex: 1;
|
||||
background-color: theme.$background-primary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.guild-channel-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.guild-channel-feed-wrapper {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.member-list-wrapper {
|
||||
box-sizing: border-box;
|
||||
flex: none; /* >:| NOT GONNA SHINK BOI */
|
||||
background-color: theme.$background-secondary;
|
||||
width: 240px;
|
||||
height: calc(100vh - 71px);
|
||||
overflow-y: scroll;
|
||||
padding: 8px 0 8px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import "theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.guilds-manager {
|
||||
flex: 1;
|
||||
105
src/client/webapp/elements-styles/sections/send-message.scss
Normal file
105
src/client/webapp/elements-styles/sections/send-message.scss
Normal file
@ -0,0 +1,105 @@
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
$scrollbarBottom: 4px;
|
||||
$borderRadius: 8px;
|
||||
|
||||
.send-message-input-wrapper {
|
||||
position: relative;
|
||||
height: 0;
|
||||
|
||||
.send-message-input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: 0 16px 16px 16px;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 32px);
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
|
||||
color: theme.$text-normal;
|
||||
background-color: theme.$channeltextarea-background;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.attachment-preview {
|
||||
position: relative;
|
||||
margin: 16px 16px 0 16px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
max-width: calc(100% - 32px);
|
||||
background-color: theme.$background-secondary;
|
||||
|
||||
img.preview {
|
||||
max-width: 128px;
|
||||
max-height: 128px;
|
||||
border-radius: 4px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.name {
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.remove {
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: theme.$background-button-negative;
|
||||
|
||||
&:hover {
|
||||
color: theme.$background-button-negative-hover;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 16px 0 0 0;
|
||||
height: 1px;
|
||||
background-color: theme.$interactive-muted;
|
||||
}
|
||||
|
||||
.send-message-input-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.attachment-input-button {
|
||||
cursor: pointer;
|
||||
margin: 12px;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-input {
|
||||
flex: 1;
|
||||
padding: 12px 12px 12px 0;
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre;
|
||||
|
||||
&.disabled {
|
||||
color: theme.$text-sending;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
@import "theme.scss";
|
||||
@use "../../styles/theme.scss";
|
||||
|
||||
.title-bar {
|
||||
display: flex;
|
||||
|
||||
.app-title {
|
||||
color: $text-muted;
|
||||
color: theme.$text-muted;
|
||||
padding: 6px 0px 0px 10px;
|
||||
flex: 1;
|
||||
-webkit-app-region: drag; /* Also allows for double-click maximise & right-click menu */
|
||||
@ -14,7 +14,7 @@
|
||||
display: flex;
|
||||
|
||||
> * {
|
||||
color: $interactive-normal;
|
||||
color: theme.$interactive-normal;
|
||||
background: none;
|
||||
border: none;
|
||||
width: 28px;
|
||||
@ -27,8 +27,8 @@
|
||||
|
||||
.minimize:hover,
|
||||
.maximize:hover {
|
||||
color: $interactive-hover;
|
||||
background-color: $background-modifier-hover;
|
||||
color: theme.$interactive-hover;
|
||||
background-color: theme.$background-modifier-hover;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
@ -1,275 +0,0 @@
|
||||
@import "../../styles/theme.scss";
|
||||
|
||||
.text-input-react {
|
||||
.label {
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
color: $interactive-normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: $text-normal;
|
||||
background-color: $background-input;
|
||||
border: 1px solid $border-input;
|
||||
border-radius: 3px;
|
||||
max-height: 100px;
|
||||
overflow-y: scroll;
|
||||
padding: 8px;
|
||||
|
||||
&:hover {
|
||||
border-color: $border-input-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $border-input-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-edit-input-react {
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img.value {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modify {
|
||||
position: absolute;
|
||||
background-color: $brand;
|
||||
padding: 6px;
|
||||
border-radius: 16px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
|
||||
img.pencil {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-react {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.label {
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
color: $interactive-normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.display {
|
||||
background-color: $background-input;
|
||||
color: $text-normal;
|
||||
padding: 8px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
border: 1px solid $border-input;
|
||||
}
|
||||
|
||||
&:hover .display {
|
||||
border-color: $border-input-hover;
|
||||
}
|
||||
|
||||
&:focus .display {
|
||||
border-color: $border-input-focus;
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(.open) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 8px;
|
||||
color: $text-normal;
|
||||
background-color: $background-dropdown-option;
|
||||
|
||||
&:hover {
|
||||
background-color: $background-dropdown-option-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.display {
|
||||
$content-border-radius: 4px;
|
||||
|
||||
flex: 1;
|
||||
border-top-right-radius: $content-border-radius;
|
||||
border-bottom-right-radius: $content-border-radius;
|
||||
background-color: $background-primary;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
|
||||
> .scroll {
|
||||
margin: 32px;
|
||||
|
||||
.divider {
|
||||
margin: 16px 0;
|
||||
height: 1px;
|
||||
background-color: $background-primary-divider;
|
||||
}
|
||||
}
|
||||
|
||||
> .popup {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
margin: 16px;
|
||||
padding: 12px 12px 12px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $interactive-active;
|
||||
background-color: $background-popup-message;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
|
||||
.button {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.85em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:not(:last-child) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lower-react {
|
||||
.error-container {
|
||||
background-color: $background-secondary-alt;
|
||||
overflow-y: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.2s ease-in-out;
|
||||
|
||||
&:not(.empty) {
|
||||
max-height: 48px;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 16px 16px;
|
||||
height: 16px;
|
||||
color: $text-normal;
|
||||
|
||||
&::first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background-color: $background-tertiary;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.guild-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-right: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $header-primary;
|
||||
font-size: 1.25em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.url {
|
||||
color: $text-normal;
|
||||
}
|
||||
|
||||
.expires {
|
||||
color: $text-muted;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.file-drop {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 22px);
|
||||
top: 22px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $background-overlay;
|
||||
|
||||
.panel {
|
||||
// TODO: make this nicer
|
||||
color: $text-normal;
|
||||
background-color: $background-primary;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img.drop-icon {
|
||||
display: block;
|
||||
height: 128px;
|
||||
max-width: 128px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.drop-message {
|
||||
font-size: 2em;
|
||||
color: $header-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -63,7 +63,7 @@ const DropdownInput: FC<DropdownInputProps> = (props: DropdownInputProps) => {
|
||||
<div className="dropdown-react" tabIndex={0} onBlur={onMainBlur}>
|
||||
{labelElement}
|
||||
<div
|
||||
ref={displayRef} className="display"
|
||||
ref={displayRef} className="display-content"
|
||||
onClick={onDisplayClick}
|
||||
style={{ width: width }}
|
||||
>{display}</div>
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
@import "../../../styles/theme.scss";
|
||||
|
||||
.channel .channel-gear-hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
|
||||
.tab {
|
||||
color: $background-floating; // svg
|
||||
}
|
||||
|
||||
.text {
|
||||
color: $text-normal;
|
||||
background-color: $background-floating;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
@ -1,144 +0,0 @@
|
||||
@import "../../../styles/theme.scss";
|
||||
|
||||
.message-react {
|
||||
display: flex;
|
||||
padding: 4px 16px;
|
||||
|
||||
&.continued {
|
||||
margin-top: -4px;
|
||||
|
||||
.timestamp {
|
||||
flex: none; /* >:| NOT GONNA SHRINK BOI */
|
||||
margin: 0;
|
||||
width: 40px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover .timestamp {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.member-avatar img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
margin-left: 16px; /* putting the margin here rather than on the avatar makes selecting better */
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
color: $header-primary;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.member-name:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
color: $text-muted;
|
||||
margin-left: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 16px;
|
||||
color: $text-normal;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
&.text {
|
||||
white-space: pre-wrap;
|
||||
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
color: $header-primary; /* a bit brighter for some more emphasis */
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
&.image {
|
||||
/* Center the loading icon */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
background-color: $background-secondary-alt;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
max-width: 400px;
|
||||
max-height: 300px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: ellipse the overflow */
|
||||
&.resource {
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: $background-secondary-alt;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .download-status {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
> :not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
max-width: 32px;
|
||||
height: 32px;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.filename {
|
||||
color: $text-link;
|
||||
}
|
||||
|
||||
.download-status {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: $text-muted;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
@import "./channel-list.scss";
|
||||
@import "./member-list.scss";
|
||||
@import "./message-list.scss";
|
||||
|
||||
@import "./components/channel-element.scss";
|
||||
@import "./components/member-element.scss";
|
||||
@import "./components/message-element.scss";
|
||||
@ -1,33 +0,0 @@
|
||||
@import "../../styles/theme.scss";
|
||||
|
||||
.member-list-wrapper {
|
||||
box-sizing: border-box;
|
||||
flex: none; /* >:| NOT GONNA SHINK BOI */
|
||||
background-color: $background-secondary;
|
||||
width: 240px;
|
||||
height: calc(100vh - 71px);
|
||||
overflow-y: scroll;
|
||||
padding: 8px 0 8px 8px;
|
||||
|
||||
.member-list {
|
||||
.member {
|
||||
background-color: $background-secondary;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.member .name {
|
||||
width: calc(208px - 40px);
|
||||
}
|
||||
|
||||
.member .status-circle {
|
||||
border-color: $background-secondary;
|
||||
}
|
||||
|
||||
.member:hover {
|
||||
background-color: $background-modifier-hover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
@import "./overlay-add-guild.scss";
|
||||
@import "./overlay-error-message.scss";
|
||||
@import "./overlay-guild-settings.scss";
|
||||
@import "./overlay-image.scss";
|
||||
@import "./overlay-channel.scss";
|
||||
@import "./overlay-personalize.scss";
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
|
||||
<link rel="stylesheet" type="text/css" href="./styles/styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
</head>
|
||||
<body class="preload">
|
||||
<div id="react-root"></div>
|
||||
|
||||
48
src/client/webapp/index.scss
Normal file
48
src/client/webapp/index.scss
Normal file
@ -0,0 +1,48 @@
|
||||
@use "styles/theme.scss";
|
||||
@use "styles/fonts.scss";
|
||||
|
||||
@use "styles/general.scss";
|
||||
@use "styles/scrollbars.scss";
|
||||
|
||||
@use "styles/shake.scss";
|
||||
@use "styles/status-circles.scss";
|
||||
|
||||
@use "elements-styles/components/buttons.scss";
|
||||
@use "elements-styles/components/file-drop-target.scss";
|
||||
@use "elements-styles/components/input-dropdown.scss";
|
||||
@use "elements-styles/components/input-image-edit.scss";
|
||||
@use "elements-styles/components/input-text.scss";
|
||||
@use "elements-styles/components/invite-preview.scss";
|
||||
@use "elements-styles/components/submit-overlay-lower.scss";
|
||||
|
||||
@use "elements-styles/contexts/components/context.scss";
|
||||
@use "elements-styles/contexts/components/context-menu.scss";
|
||||
|
||||
@use "elements-styles/lists/components/channel-element.scss";
|
||||
@use "elements-styles/lists/components/member-element.scss";
|
||||
@use "elements-styles/lists/components/message-element.scss";
|
||||
|
||||
@use "elements-styles/lists/channel-list.scss";
|
||||
@use "elements-styles/lists/guild-list.scss";
|
||||
@use "elements-styles/lists/member-list.scss";
|
||||
@use "elements-styles/lists/message-list.scss";
|
||||
|
||||
@use "elements-styles/overlays/components/overlay.scss";
|
||||
|
||||
@use "elements-styles/overlays/overlay-add-guild.scss";
|
||||
@use "elements-styles/overlays/overlay-channel.scss";
|
||||
@use "elements-styles/overlays/overlay-error-message.scss";
|
||||
@use "elements-styles/overlays/overlay-guild-settings.scss";
|
||||
@use "elements-styles/overlays/overlay-image.scss";
|
||||
@use "elements-styles/overlays/overlay-personalize.scss";
|
||||
|
||||
@use "elements-styles/sections/channel-title.scss";
|
||||
@use "elements-styles/sections/connection-info.scss";
|
||||
@use "elements-styles/sections/guild-list-container.scss";
|
||||
@use "elements-styles/sections/guild-title.scss";
|
||||
@use "elements-styles/sections/guild.scss";
|
||||
@use "elements-styles/sections/guilds-manager.scss";
|
||||
@use "elements-styles/sections/send-message.scss";
|
||||
@use "elements-styles/sections/title-bar.scss";
|
||||
|
||||
@use "elements-styles/root.scss";
|
||||
@ -1,51 +0,0 @@
|
||||
@import "theme.scss";
|
||||
|
||||
/* Buttons */
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: $brand;
|
||||
color: $header-primary;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
padding: 8px 24px;
|
||||
|
||||
&:hover {
|
||||
background-color: $brand-hover;
|
||||
}
|
||||
|
||||
&.positive {
|
||||
background-color: $background-button-positive;
|
||||
|
||||
&:hover {
|
||||
background-color: $background-button-positive-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background-color: $background-button-negative;
|
||||
|
||||
&:hover {
|
||||
background-color: $background-button-negative-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.perdu {
|
||||
background-color: $background-button-perdu;
|
||||
|
||||
&:hover {
|
||||
background-color: $background-button-perdu-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.lower-submit {
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
&.display-popup {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
&.table-icon {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
@ -1,117 +0,0 @@
|
||||
@import "theme.scss";
|
||||
|
||||
$scrollbarBottom: 4px;
|
||||
$borderRadius: 8px;
|
||||
|
||||
.guild-channel-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.guild-channel-feed-wrapper {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.send-message-input-wrapper {
|
||||
position: relative;
|
||||
height: 0;
|
||||
|
||||
.send-message-input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: 0 16px 16px 16px;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 32px);
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
|
||||
color: $text-normal;
|
||||
background-color: $channeltextarea-background;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.attachment-preview {
|
||||
position: relative;
|
||||
margin: 16px 16px 0 16px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
max-width: calc(100% - 32px);
|
||||
background-color: $background-secondary;
|
||||
|
||||
img.preview {
|
||||
max-width: 128px;
|
||||
max-height: 128px;
|
||||
border-radius: 4px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.name {
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.remove {
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: $background-button-negative;
|
||||
|
||||
&:hover {
|
||||
color: $background-button-negative-hover;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 16px 0 0 0;
|
||||
height: 1px;
|
||||
background-color: $interactive-muted;
|
||||
}
|
||||
|
||||
.send-message-input-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.attachment-input-button {
|
||||
cursor: pointer;
|
||||
margin: 12px;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-input {
|
||||
flex: 1;
|
||||
padding: 12px 12px 12px 0;
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre;
|
||||
|
||||
&.disabled {
|
||||
color: $text-sending;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,133 +0,0 @@
|
||||
@import "theme.scss";
|
||||
|
||||
/* Contexts */
|
||||
|
||||
.context {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
|
||||
// Since useEffect gets called after the element is rendered, hide it until
|
||||
// it gets aligned
|
||||
&.react:not(.aligned) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.menu {
|
||||
min-width: 180px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
background-color: $background-floating;
|
||||
color: $text-normal;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
.item-spacer {
|
||||
background-color: $background-secondary;
|
||||
height: 1px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 8px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
color: $header-primary;
|
||||
background-color: $brand-hover;
|
||||
}
|
||||
|
||||
.item.red {
|
||||
color: $item-red;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item.red:hover {
|
||||
color: $header-primary;
|
||||
background-color: $item-red;
|
||||
}
|
||||
|
||||
.item .icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.guild-title-context-menu .item .icon img,
|
||||
.guild-title-context-menu .item .icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.member-context .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.member-context .item .icon img,
|
||||
.member-context .item .icon svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.member-context .item .status-circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.member-context .item .status-text {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
.above,
|
||||
.below {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
color: $background-floating; /* for the tab */
|
||||
}
|
||||
|
||||
.above .content,
|
||||
.below .content {
|
||||
color: $header-primary;
|
||||
background-color: $background-floating;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.add-guild-hover,
|
||||
.guild-hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $background-floating; /* for the tab */
|
||||
|
||||
.info {
|
||||
background-color: $background-floating;
|
||||
color: $header-primary;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
|
||||
> :not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.connection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.connection .status-circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
@import "theme.scss";
|
||||
|
||||
.error-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $header-primary;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
color: $text-link;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -1,31 +1,31 @@
|
||||
@font-face {
|
||||
font-family: Whitney;
|
||||
font-weight: 300;
|
||||
src: url(../font/whitney/whitney-300.woff);
|
||||
src: url(./font/whitney/whitney-300.woff);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Whitney;
|
||||
font-weight: 400;
|
||||
src: url(../font/whitney/whitney-400.woff);
|
||||
src: url(./font/whitney/whitney-400.woff);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Whitney;
|
||||
font-weight: 500;
|
||||
src: url(../font/whitney/whitney-500.woff);
|
||||
src: url(./font/whitney/whitney-500.woff);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Whitney;
|
||||
font-weight: 600;
|
||||
src: url(../font/whitney/whitney-600.woff);
|
||||
src: url(./font/whitney/whitney-600.woff);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Whitney;
|
||||
font-weight: 700;
|
||||
src: url(../font/whitney/whitney-700.woff);
|
||||
src: url(./font/whitney/whitney-700.woff);
|
||||
}
|
||||
|
||||
strong, b {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "theme.scss";
|
||||
@use "theme.scss";
|
||||
|
||||
/* disable draggable "ghost" image elements */
|
||||
img {
|
||||
@ -25,14 +25,14 @@ body {
|
||||
}
|
||||
|
||||
:root {
|
||||
background-color: $background-tertiary;
|
||||
background-color: theme.$background-tertiary;
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/questions/16941360/how-to-create-a-placeholder-for-div-that-act-like-textfield
|
||||
[contenteditable=plaintext-only]:empty::before{
|
||||
content:attr(data-placeholder);
|
||||
cursor: text;
|
||||
color: $text-muted;
|
||||
color: theme.$text-muted;
|
||||
}
|
||||
|
||||
[contenteditable=plaintext-only]:focus {
|
||||
|
||||
@ -1,68 +0,0 @@
|
||||
@import "theme.scss";
|
||||
|
||||
.guild-list-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
flex: none; /* >:| NOT GONNA SHINK BOI */
|
||||
width: 72px; /* TODO: auto-calculated from content */
|
||||
height: calc(100vh - 22px);
|
||||
padding-top: 8px;
|
||||
overflow-y: scroll;
|
||||
|
||||
.guild-list {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.guild-listguild-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.add-guild,
|
||||
.guild-list .guild {
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add-guild .pill,
|
||||
.guild-list .guild .pill {
|
||||
background-color: $header-primary;
|
||||
width: 8px;
|
||||
height: 0;
|
||||
border-radius: 4px 4px;
|
||||
margin-left: -4px;
|
||||
margin-right: 8px;
|
||||
transition: height .1s ease-in-out;
|
||||
}
|
||||
|
||||
.guild-list .guild.active .pill {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.guild-list .guild.unread:not(.active) .pill {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.add-guild:hover .pill,
|
||||
.guild-list .guild:not(.active):hover .pill {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.add-guild img,
|
||||
.guild-list .guild img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
transition: border-radius .1s ease-in-out;
|
||||
}
|
||||
|
||||
.add-guild:hover img,
|
||||
.guild-list .guild:hover img,
|
||||
.guild-list .guild.active img {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
@import "theme.scss";
|
||||
|
||||
.guild-react {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.guild-sidebar {
|
||||
flex: none; /* >:| NOT GONNA SHINK BOI */
|
||||
width: 240px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $background-secondary;
|
||||
border-top-left-radius: 8px;
|
||||
|
||||
.guild-name-container {
|
||||
padding: 0 16px;
|
||||
height: 48px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $header-primary;
|
||||
border-bottom: 1px solid $background-secondary-alt;
|
||||
|
||||
.guild-name {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import "theme.scss";
|
||||
@use "theme.scss";
|
||||
|
||||
/* channel feed custom scrollbar */
|
||||
/* Note: Using this hack... https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar */
|
||||
@ -8,14 +8,14 @@
|
||||
|
||||
.message-list .infinite-scroll-scroll-base::-webkit-scrollbar-track {
|
||||
visibility: visible; /* always visible, does not disappear when not hovered over */
|
||||
box-shadow: 0 0 12px 12px $background-secondary inset;
|
||||
box-shadow: 0 0 12px 12px theme.$background-secondary inset;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.message-list .infinite-scroll-scroll-base::-webkit-scrollbar-thumb {
|
||||
visibility: visible; /* always visible, does not disappear when not hovered over */
|
||||
box-shadow: 0 0 12px 12px $background-tertiary inset;
|
||||
box-shadow: 0 0 12px 12px theme.$background-tertiary inset;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@ -35,7 +35,7 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-shadow: 0 0 2px 2px $background-tertiary inset;
|
||||
box-shadow: 0 0 2px 2px theme.$background-tertiary inset;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "theme.scss";
|
||||
@use "theme.scss";
|
||||
|
||||
/* Shaking Elements */
|
||||
@keyframes shake-horizontal {
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
@import "theme.scss";
|
||||
@use "theme.scss";
|
||||
|
||||
/* Status Circles */
|
||||
|
||||
.online .status-circle {
|
||||
background-color: $online;
|
||||
background-color: theme.$online;
|
||||
}
|
||||
|
||||
.away .status-circle {
|
||||
background-color: $away;
|
||||
background-color: theme.$away;
|
||||
}
|
||||
|
||||
.busy .status-circle {
|
||||
background-color: $busy;
|
||||
background-color: theme.$busy;
|
||||
}
|
||||
|
||||
.unknown .status-circle,
|
||||
.connecting .status-circle,
|
||||
.offline .status-circle,
|
||||
.invisible .status-circle {
|
||||
background-color: $offline;
|
||||
background-color: theme.$offline;
|
||||
}
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
@import "theme.scss";
|
||||
@import "fonts.scss";
|
||||
|
||||
@import "../elements/components/components.scss";
|
||||
@import "../elements/overlays/overlays.scss";
|
||||
|
||||
@import "../elements/lists/lists.scss";
|
||||
|
||||
@import "buttons.scss";
|
||||
@import "channel-feed.scss";
|
||||
@import "channel-list.scss";
|
||||
@import "channel.scss";
|
||||
@import "connection.scss";
|
||||
@import "contexts.scss";
|
||||
@import "error-indicator.scss";
|
||||
@import "general.scss";
|
||||
@import "members.scss";
|
||||
@import "overlays.scss";
|
||||
@import "scrollbars.scss";
|
||||
@import "guilds-manager.scss";
|
||||
@import "guild-list.scss";
|
||||
@import "guild.scss";
|
||||
@import "shake.scss";
|
||||
@import "status-circles.scss";
|
||||
@import "title-bar.scss";
|
||||
Loading…
Reference in New Issue
Block a user