cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-29 02:10:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

Finished cleaning up User Settings CSS

Browse source
This commit is contained in:
nizune 2021-08-03 17:07:02 +02:00
parent e1ffefe2ba
commit a10646888f
2 changed files with 75 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
src/pages/settings/Settings.module.scss
View file

@ -1,81 +1,58 @@
/* Settings animations */
@keyframes open {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
0% { transform: scale(1.2); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes close {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.2); opacity: 0; }
}
@keyframes opacity {
0% {
opacity: 0;
}
20% {
opacity: 0.5;
}
50% {
opacity: 1;
}
0% { opacity: 0; }
20% { opacity: 0.5; }
50% { opacity: 1; }
}
/* Settings CSS */
.settings[data-mobile="true"] {
flex-direction: column;
background: var(--primary-header);
.scrollbox { //TOFIX: need to put this into a media query later
visibility: visible !important;
overflow-y: auto;
.sidebar, .content { background: var(--primary-background); }
.scrollbox {
&::-webkit-scrollbar-thumb {
border-top: none;
}
}
.sidebar,
.content {
background: var(--primary-background);
}
/* Sidebar */
.sidebar {
justify-content: flex-start;
overflow-y: auto;
.container {
padding: 20px 8px calc(var(--bottom-navigation-height) + 30px);
min-width: 218px;
width: 100%;
}
> div {
width: 100%;
}
.version {
place-items: center;
}
.scrollbox { width: 100%; }
.version { place-items: center; }
}
/* Content */
.content {
padding: 0;
}
.scrollbox { overflow: auto; }
.contentcontainer {
max-width: unset !important;
padding: 10px 12px var(--bottom-navigation-height) !important;
}
}
}
.settings:not([data-mobile="true"]) {
top: 0;
@ -86,9 +63,7 @@
position: fixed;
animation: open 0.18s ease-out, opacity 0.18s;
&.closing {
animation: close 0.18s ease-in;
}
&.closing { animation: close 0.18s ease-in; }
}
.settings {
@ -133,21 +108,14 @@
flex-direction: column;
}
.divider {
height: 30px;
}
.divider { height: 30px; }
.donate {
color: goldenrod !important;
}
.logOut {
color: var(--error) !important;
}
.donate { color: goldenrod !important; }
.logOut {color: var(--error) !important; }
.version {
margin: 1rem 12px 0;
font-size: 10px;
font-size: .625rem;
color: var(--secondary-foreground);
font-family: var(--monospace-font), monospace;
user-select: text;
@ -159,7 +127,7 @@
flex-direction: column;
}
.revision a:hover {
a:hover {
text-decoration: underline;
}
}
@ -180,7 +148,7 @@
gap: 13px;
height: fit-content;
max-width: 740px;
padding: 80px 2em;
padding: 80px 32px;
width: 100%;
flex-direction: column;
}
@ -191,13 +159,13 @@
h1 {
margin: 0;
line-height: 1em;
font-size: 1.2em;
line-height: 1rem;
font-size: 1.2rem;
font-weight: 600;
}
h3 {
font-size: 13px;
font-size: .8125rem;
text-transform: uppercase;
color: var(--secondary-foreground);
@ -208,15 +176,14 @@
h4 {
margin: 4px 2px;
font-size: 13px;
font-size: .8125rem;
color: var(--tertiary-foreground);
text-transform: uppercase;
}
h5 {
margin-top: 0;
font-size: 12px;
font-size: .75rem;
font-weight: 400;
}
@ -224,7 +191,7 @@
border-top: 1px solid;
margin: 0;
padding-top: 5px;
font-size: 14px;
font-size: .875rem;
color: var(--secondary-foreground);
}
}
@ -240,14 +207,10 @@
content: "ESC";
margin-top: 4px;
display: flex;
text-align: center;
align-content: center;
justify-content: center;
position: relative;
color: var(--foreground);
width: 40px;
opacity: 0.5;
font-size: 0.75em;
opacity: .5;
font-size: .75rem;
}
.closeButton {
@ -259,29 +222,17 @@
width: 40px;
border: 3px solid var(--tertiary-background);
cursor: pointer;
visibility: visible;
svg {
color: var(--secondary-foreground);
}
&:hover {
background: var(--secondary-header);
}
&:active {
transform: translateY(2px);
svg { color: var(--secondary-foreground); }
&:hover { background: var(--secondary-header); }
&:active { transform: translateY(2px); }
}
}
}
section {
margin-bottom: 1em;
}
}
.loader {
> div {
margin: auto;
@media (pointer: coarse) {
.scrollbox {
visibility: visible !important;
overflow-y: auto;
}
}

2
src/pages/settings/Settings.tsx
View file

@ -185,7 +185,6 @@ export default function Settings() {
<Text id="app.settings.pages.logOut" />
</ButtonItem>,
<div className={styles.version}>
<div>
<span className={styles.revision}>
<a
href={`${REPO_URL}/${GIT_REVISION}`}
@ -216,7 +215,6 @@ export default function Settings() {
API: {client.configuration?.revolt ?? "N/A"}
</span>
<span>revolt.js: {LIBRARY_VERSION}</span>
</div>
</div>,
]}
/>