added wallpaper customization
-- implemented wallpaper blur and opacity
This commit is contained in:
sairaj mote
parent
5aa80491b4
commit
b97d3ebaeb
38
css/main.css
38
css/main.css
@ -225,6 +225,14 @@ fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
input {
|
||||
accent-color: var(--accent-color);
|
||||
}
|
||||
input[type=range]:active {
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
sm-input,
|
||||
sm-textarea {
|
||||
font-size: 0.9rem;
|
||||
@ -883,7 +891,7 @@ sm-button[variant=primary] {
|
||||
}
|
||||
#background_overlay,
|
||||
#background_image {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@ -891,9 +899,7 @@ sm-button[variant=primary] {
|
||||
#background_overlay {
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
background-color: rgba(var(--foreground-color), 0.9);
|
||||
-webkit-backdrop-filter: blur(1rem);
|
||||
backdrop-filter: blur(1rem);
|
||||
background-color: rgba(var(--foreground-color), var(--opacity, 0.6));
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
@ -901,6 +907,8 @@ sm-button[variant=primary] {
|
||||
z-index: -2;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
filter: blur(var(--blur, 1rem));
|
||||
transform: scale(calc(1 + var(--scale, 1.1) / 10));
|
||||
}
|
||||
|
||||
#main_page {
|
||||
@ -927,11 +935,6 @@ sm-button[variant=primary] {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.filled {
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
stroke: none !important;
|
||||
}
|
||||
|
||||
.group-icon {
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
@ -992,9 +995,9 @@ sm-button[variant=primary] {
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
.contact .time {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
grid-area: time;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.contact .admin-tag {
|
||||
padding: 0.1rem 0.6rem;
|
||||
@ -1455,10 +1458,6 @@ sm-button[variant=primary] {
|
||||
position: relative;
|
||||
grid-template-rows: -webkit-max-content 1fr;
|
||||
grid-template-rows: max-content 1fr;
|
||||
background-color: rgba(var(--background-color), 0.1);
|
||||
margin: 0.5rem 0;
|
||||
border-radius: 0.5rem;
|
||||
height: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
#contacts,
|
||||
@ -1808,8 +1807,8 @@ sm-button[variant=primary] {
|
||||
height: 100%;
|
||||
}
|
||||
#chat_header .back-button {
|
||||
padding: 0;
|
||||
margin: 0 -0.5rem 0 -1.2rem;
|
||||
padding: 0.5rem;
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
#chat_header .initial {
|
||||
cursor: pointer;
|
||||
@ -2103,10 +2102,10 @@ sm-button[variant=primary] {
|
||||
height: 100%;
|
||||
}
|
||||
#settings_page section {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
width: min(60ch, 100%);
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
#settings_page section sm-button {
|
||||
margin-top: 0.5rem;
|
||||
@ -2283,9 +2282,6 @@ sm-button[variant=primary] {
|
||||
grid-area: nav;
|
||||
border-top: none;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 1rem);
|
||||
margin: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--background-color), 0.06);
|
||||
}
|
||||
#main_navbar ul {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -204,6 +204,14 @@ details[open] {
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
input {
|
||||
accent-color: var(--accent-color);
|
||||
&[type="range"] {
|
||||
&:active {
|
||||
cursor: grab;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sm-input,
|
||||
sm-textarea {
|
||||
@ -787,20 +795,21 @@ sm-button[variant="primary"] {
|
||||
}
|
||||
#background_overlay,
|
||||
#background_image {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#background_overlay {
|
||||
background-color: red;
|
||||
z-index: -1;
|
||||
background-color: rgba(var(--foreground-color), 0.9);
|
||||
backdrop-filter: blur(1rem);
|
||||
background-color: rgba(var(--foreground-color), var(--opacity, 0.6));
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
#background_image {
|
||||
z-index: -2;
|
||||
object-fit: cover;
|
||||
filter: blur(var(--blur, 1rem));
|
||||
transform: scale(calc(1 + (var(--scale, 1.1) / 10)));
|
||||
}
|
||||
#main_page {
|
||||
display: grid;
|
||||
@ -821,10 +830,6 @@ sm-button[variant="primary"] {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
}
|
||||
.filled {
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
stroke: none !important;
|
||||
}
|
||||
.group-icon {
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
@ -883,9 +888,9 @@ sm-button[variant="primary"] {
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
.time {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
grid-area: time;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.admin-tag {
|
||||
padding: 0.1rem 0.6rem;
|
||||
@ -1315,10 +1320,6 @@ sm-button[variant="primary"] {
|
||||
#mails {
|
||||
position: relative;
|
||||
grid-template-rows: max-content 1fr;
|
||||
background-color: rgba(var(--background-color), 0.1);
|
||||
margin: 0.5rem 0;
|
||||
border-radius: 0.5rem;
|
||||
height: calc(100% - 1rem);
|
||||
}
|
||||
#contacts,
|
||||
#mails,
|
||||
@ -1621,8 +1622,8 @@ sm-button[variant="primary"] {
|
||||
height: 100%;
|
||||
}
|
||||
.back-button {
|
||||
padding: 0;
|
||||
margin: 0 -0.5rem 0 -1.2rem;
|
||||
padding: 0.5rem;
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
.initial {
|
||||
cursor: pointer;
|
||||
@ -1898,10 +1899,10 @@ sm-button[variant="primary"] {
|
||||
height: 100%;
|
||||
}
|
||||
section {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 1.5rem;
|
||||
width: min(60ch, 100%);
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
sm-button {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
@ -2063,9 +2064,6 @@ sm-button[variant="primary"] {
|
||||
grid-area: nav;
|
||||
border-top: none;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 1rem);
|
||||
margin: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--background-color), 0.06);
|
||||
ul {
|
||||
flex-direction: column;
|
||||
|
||||
65
index.html
65
index.html
@ -234,13 +234,7 @@
|
||||
<line x1="1" y1="32" x2="64" y2="32" />
|
||||
<polyline points="29.64 60.97 0.65 32 29.64 3.03" />
|
||||
</svg>
|
||||
<sm-input id="search_chats" type="search" placeholder="Search">
|
||||
<!-- <svg slot="icon" class="icon" viewBox="0 0 64 64">
|
||||
<title>Search</title>
|
||||
<path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/>
|
||||
<line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/>
|
||||
</svg> -->
|
||||
</sm-input>
|
||||
<sm-input id="search_chats" type="search" placeholder="Search"></sm-input>
|
||||
</div>
|
||||
</header>
|
||||
<button id="new_message_button" onclick="openPopup('new_message_popup')"
|
||||
@ -407,7 +401,7 @@
|
||||
</header>
|
||||
<div class="sidebar-item interact active" data-target="profile_panel">Account</div>
|
||||
<div class="sidebar-item interact" data-target="chat_panel">chat</div>
|
||||
<div class="sidebar-item interact" data-target="personalise_panel">personalise</div>
|
||||
<div class="sidebar-item interact" data-target="personalize_panel">personalise</div>
|
||||
<div class="sidebar-item interact" data-target="backup_panel">backup & restore</div>
|
||||
<div class="sidebar-item interact" data-target="about_panel">About</div>
|
||||
</aside>
|
||||
@ -452,7 +446,7 @@
|
||||
</div>
|
||||
</sm-switch>
|
||||
</div>
|
||||
<div id="personalise_panel" class="panel hide">
|
||||
<div id="personalize_panel" class="panel hide">
|
||||
<section>
|
||||
<h4>Chat preview</h4>
|
||||
<div id="chat_preview">
|
||||
@ -483,6 +477,23 @@
|
||||
<input type="file" id="select_bg_image" accept="image/*" />
|
||||
</label>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Backdrop</h4>
|
||||
<label class="grid gap-0-3">
|
||||
<span>Dim wallpaper</span>
|
||||
<div class="flex">
|
||||
<input type="range" min="0" max="100" id="backdrop_opacity" class="w-100">
|
||||
<output id="backdrop_opacity_value"></output>
|
||||
</div>
|
||||
</label>
|
||||
<label class="grid gap-0-3">
|
||||
<span>Blur</span>
|
||||
<div class="flex">
|
||||
<input type="range" min="0" max="100" id="backdrop_blur" class="w-100">
|
||||
<output id="backdrop_blur_value"></output>
|
||||
</div>
|
||||
</label>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Accent color</h4>
|
||||
<color-grid id="accent_color_selector"></color-grid>
|
||||
@ -1557,7 +1568,7 @@
|
||||
const amISender = type === 'chat' && lastMessage.category === 'sent' || type === 'group' && lastMessage.sender === myFloID
|
||||
const lastText = html`<p class="last-message">${amISender ? 'You: ' : ''} ${lastMessage.message}</p>`
|
||||
const timeAndOptions = html`
|
||||
<h5 class="time">${relativeTime.from(lastMessage.time)}</h5>
|
||||
<time class="time">${relativeTime.from(lastMessage.time)}</time>
|
||||
<svg class="icon menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <circle cx="5.59" cy="32" r="5.59"/> <circle cx="58.41" cy="32" r="5.59"/> <circle cx="31.89" cy="32" r="5.59"/> </svg>
|
||||
`;
|
||||
getRef('chats_list').querySelector(`.contact[flo-id="${floID}"]`).append(html.node`${lastText}${timeAndOptions}`)
|
||||
@ -2113,6 +2124,9 @@
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.pad-top{
|
||||
background-color: transparent;
|
||||
}
|
||||
.emoji-menu{
|
||||
border-top: solid rgba(var(--text-color), 0.2) 1px;
|
||||
background: rgba(var(--foreground-color), 0.6);
|
||||
@ -3291,6 +3305,19 @@
|
||||
getRef('selected_bg_preview').classList.remove('hide')
|
||||
getRef('selected_bg_preview').querySelector('img').src = url
|
||||
}
|
||||
const [bgOpacity, bgBlur] = await Promise.all([compactIDB.readData('userSettings', 'bgOpacity'), compactIDB.readData('userSettings', 'bgBlur')])
|
||||
if (bgOpacity) {
|
||||
getRef('backdrop_opacity').value = bgOpacity * 100
|
||||
getRef('backdrop_opacity_value').value = `${bgOpacity * 100}%`
|
||||
getRef('background_overlay').style.setProperty('--opacity', bgOpacity)
|
||||
}
|
||||
if (bgBlur) {
|
||||
getRef('backdrop_blur').value = bgBlur * 100
|
||||
getRef('backdrop_blur_value').value = `${bgBlur * 100}%`
|
||||
getRef('background_image').style.setProperty('--blur', `${bgBlur}rem`)
|
||||
getRef('background_image').style.setProperty('--scale', bgBlur)
|
||||
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
@ -3306,6 +3333,24 @@
|
||||
.catch(err => console.error(err))
|
||||
}
|
||||
|
||||
getRef('backdrop_opacity').addEventListener('input', e => {
|
||||
const opacity = e.target.value
|
||||
getRef('backdrop_opacity_value').value = `${opacity}%`
|
||||
const validOpacity = parseFloat((opacity * 0.01).toFixed(2))
|
||||
getRef('background_overlay').style.setProperty('--opacity', validOpacity)
|
||||
compactIDB.writeData('userSettings', validOpacity, 'bgOpacity')
|
||||
.catch(err => console.error(err))
|
||||
})
|
||||
getRef('backdrop_blur').addEventListener('input', e => {
|
||||
const blur = e.target.value
|
||||
getRef('backdrop_blur_value').value = `${blur}%`
|
||||
const validBlur = parseFloat((blur * 0.01).toFixed(2))
|
||||
getRef('background_image').style.setProperty('--blur', `${validBlur}rem`)
|
||||
getRef('background_image').style.setProperty('--scale', validBlur)
|
||||
compactIDB.writeData('userSettings', validBlur, 'bgBlur')
|
||||
.catch(err => console.error(err))
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user