aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - improve landing page room input and buttons to match dark theme

Browse Source
This commit is contained in:
Miroslav Pejic
2026-04-02 16:35:14 +02:00
parent 13e6383fd8
commit e2b178397a
8 changed files with 80 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.template
+1 -1
View File
@@ -1,5 +1,5 @@
# ====================================================
# MiroTalk P2P v.1.7.87 - Environment Configuration
# MiroTalk P2P v.1.7.88 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+1 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.7.87 - Configuration File
* MiroTalk P2P v.1.7.88 - Configuration File
* ==============================================
*
* This file is the central configuration source.
app/src/server.js
+1 -1
View File
@@ -45,7 +45,7 @@ dependencies: {
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.7.87
* @version 1.7.88
*
*/
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.7.87",
"version": "1.7.88",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.7.87",
"version": "1.7.88",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.5.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.7.87",
"version": "1.7.88",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/landing.css
+71 -21
View File
@@ -955,16 +955,25 @@ strong {
}
.button-primary {
color: #f9faff;
background-color: #000000;
color: #ffffff;
background: linear-gradient(135deg, #376df9 0%, #4678f9 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 14px rgba(55, 109, 249, 0.35);
transition:
background 0.2s ease,
transform 0.12s ease,
box-shadow 0.2s ease;
}
.button-primary:hover {
background-color: #4678f9;
background: linear-gradient(135deg, #4678f9 0%, #5a8aff 100%);
transform: translateY(-2px);
transition:
background 0.2s ease,
transform 0.12s ease;
box-shadow: 0 6px 20px rgba(55, 109, 249, 0.45);
}
.button-primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(55, 109, 249, 0.3);
}
.button-primary.is-loading::after {
@@ -1454,38 +1463,77 @@ textarea.form-input {
.room-input-wrap .form-input {
padding-right: 44px;
background-color: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 2px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
caret-color: #4678f9;
font-weight: 600;
letter-spacing: 0.3px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.room-input-wrap .form-input:hover {
border-color: rgba(70, 120, 249, 0.6);
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 16px rgba(70, 120, 249, 0.15);
}
.room-input-wrap .form-input:focus {
border-color: #4678f9;
background-color: rgba(0, 0, 0, 0.55);
box-shadow:
0 0 0 3px rgba(70, 120, 249, 0.2),
0 4px 16px rgba(70, 120, 249, 0.15);
}
.room-input-wrap .form-input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
.room-gen-btn {
position: absolute;
right: 6px;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #000000;
font-size: 14px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
font-size: 15px;
cursor: pointer;
padding: 6px 8px;
border-radius: 4px;
padding: 7px 9px;
border-radius: 6px;
transition:
color 0.2s ease,
background 0.2s ease;
background 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease;
}
.room-gen-btn:hover {
color: #4678f9;
background: rgba(70, 120, 249, 0.1);
color: #ffffff;
background: rgba(70, 120, 249, 0.3);
border-color: rgba(70, 120, 249, 0.5);
}
.room-gen-btn:focus-visible {
outline: none;
color: #4678f9;
background: rgba(70, 120, 249, 0.1);
color: #ffffff;
background: rgba(70, 120, 249, 0.3);
border-color: #4678f9;
}
.room-gen-btn:active {
color: #376df9;
color: #ffffff;
background: rgba(70, 120, 249, 0.5);
border-color: #4678f9;
transform: translateY(-50%) scale(0.85);
box-shadow: 0 0 8px rgba(70, 120, 249, 0.4);
}
.room-gen-btn.spin {
@@ -4026,8 +4074,9 @@ body {
}
.last-room a:hover {
background-color: #0000002a;
transition: all 0.3s ease-in-out;
background-color: rgba(70, 120, 249, 0.15);
color: #4678f9;
transition: all 0.2s ease;
}
/* Use a media query to apply a different flex-wrap value for small screens */
@@ -4127,6 +4176,7 @@ body {
#roomName {
text-align: center;
justify-content: center;
color: #e0e4f0;
}
/*--------------------------------------------------------------
public/js/brand.js
+1 -1
View File
@@ -107,7 +107,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.7.87',
title: 'WebRTC P2P v1.7.88',
html: `
<button
id="support-button"
public/js/client.js
+2 -2
View File
@@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.7.87
* @version 1.7.88
*
*/
@@ -14750,7 +14750,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.87',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.88',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `