RanchiMall/rmtimes
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI bug fixes

Browse Source
This commit is contained in:
sairaj mote 2022-08-13 23:12:43 +05:30
parent 4ee2ed2351
commit f8a18b64f4
5 changed files with 206 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
css/main.css
View File

@ -15,34 +15,32 @@ body {
}
body {
--accent-color: #256eff;
--text-color: 20, 20, 20;
--foreground-color: 252, 253, 255;
--background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75);
--green: #1cad59;
--like-color: #e91e63;
scrollbar-gutter: stable;
color: rgba(var(--text-color), 1);
background: rgba(var(--background-color), 1);
transition: background-color 0.3s;
}
body,
body * {
--accent-color: #256eff;
--text-color: 20, 20, 20;
--background-color: 252, 250, 245;
--foreground-color: rgb(255, 253, 251);
--danger-color: rgb(255, 75, 75);
--green: #1cad59;
--like-color: #e91e63;
scrollbar-width: thin;
}
body[data-theme=dark],
body[data-theme=dark] * {
body[data-theme=dark] {
--accent-color: #86afff;
--text-color: 220, 220, 220;
--background-color: 10, 10, 10;
--foreground-color: rgb(24, 24, 24);
--foreground-color: 27, 28, 29;
--background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106);
--green: #00e676;
}
body[data-theme=dark] sm-popup::part(popup) {
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
}
body[data-theme=dark] ::-webkit-calendar-picker-indicator {
filter: invert(1);
@ -531,7 +529,7 @@ strip-option {
}
sm-menu {
--background: var(--foreground-color);
--background: rgba(var(--foreground-color), 1);
}
menu-option {
@ -584,7 +582,7 @@ sm-copy {
height: 100%;
width: 100%;
left: 0;
background: linear-gradient(rgba(var(--foreground-color), 1), transparent 20%, transparent 80%, rgba(var(--foreground-color), 1));
background: linear-gradient(rgba(var(--background-color), 1), transparent 20%, transparent 80%, rgba(var(--background-color), 1));
}
#loader {
@ -658,7 +656,7 @@ sm-copy {
#search_suggestions {
position: absolute;
top: 100%;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
padding: 0.3rem;
width: 100%;
border-radius: 0.3rem;
@ -958,7 +956,7 @@ theme-toggle {
}
#go_to_top {
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
}
#dashboard {
@ -1041,7 +1039,7 @@ theme-toggle {
gap: 1rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
}
.writer-card .writer-profile {
display: flex;
@ -1055,7 +1053,7 @@ theme-toggle {
font-size: 100%;
font-weight: 700;
text-transform: uppercase;
color: var(--foreground-color);
color: rgba(var(--foreground-color), 1);
}
.writer-card sm-copy {
margin-top: -0.5rem;
@ -1203,7 +1201,7 @@ theme-toggle {
width: min-content;
padding: 0.5rem;
border-radius: 0.5rem;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
margin: 1.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

33
css/main.scss
View File

@ -15,16 +15,14 @@ body {
}
body {
&,
* {
--accent-color: #256eff;
--text-color: 20, 20, 20;
--background-color: 252, 250, 245;
--foreground-color: rgb(255, 253, 251);
--foreground-color: 252, 253, 255;
--background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75);
--green: #1cad59;
--like-color: #e91e63;
* {
scrollbar-width: thin;
}
scrollbar-gutter: stable;
@ -34,17 +32,14 @@ body {
}
body[data-theme="dark"] {
&,
* {
--accent-color: #86afff;
--text-color: 220, 220, 220;
--background-color: 10, 10, 10;
--foreground-color: rgb(24, 24, 24);
--foreground-color: 27, 28, 29;
--background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106);
--green: #00e676;
}
sm-popup::part(popup) {
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
}
::-webkit-calendar-picker-indicator {
filter: invert(1);
@ -500,7 +495,7 @@ strip-option {
--border-radius: 0.3rem;
}
sm-menu {
--background: var(--foreground-color);
--background: rgba(var(--foreground-color), 1);
}
menu-option {
font-size: 0.9rem;
@ -545,10 +540,10 @@ sm-copy {
width: 100%;
left: 0;
background: linear-gradient(
rgba(var(--foreground-color), 1),
rgba(var(--background-color), 1),
transparent 20%,
transparent 80%,
rgba(var(--foreground-color), 1)
rgba(var(--background-color), 1)
);
}
}
@ -612,7 +607,7 @@ sm-copy {
#search_suggestions {
position: absolute;
top: 100%;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
padding: 0.3rem;
width: 100%;
border-radius: 0.3rem;
@ -903,7 +898,7 @@ theme-toggle {
padding: 1rem;
}
#go_to_top {
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
}
#dashboard {
@ -980,7 +975,7 @@ theme-toggle {
gap: 1rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
.writer-profile {
display: flex;
align-items: center;
@ -993,7 +988,7 @@ theme-toggle {
font-size: 100%;
font-weight: 700;
text-transform: uppercase;
color: var(--foreground-color);
color: rgba(var(--foreground-color), 1);
}
sm-copy {
margin-top: -0.5rem;
@ -1139,7 +1134,7 @@ theme-toggle {
width: min-content;
padding: 0.5rem;
border-radius: 0.5rem;
background-color: var(--foreground-color);
background-color: rgba(var(--foreground-color), 1);
margin: 1.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

2
index.html
View File

@ -134,7 +134,7 @@
<theme-toggle></theme-toggle>
<button id="user_popup_button" class="hide full-bleed justify-center" onclick="openPopup('user_popup')"
title="Click to view user profile" aria-label="User profile"></button>
<button id="show_sign_in_button" class="button button--primary">Sign In</button>
<button id="show_sign_in_button" class="button button--primary full-bleed">Sign In</button>
</header>
<article id="main_page" class="page hide">
<section id="main_page__header" class="flex align-center">