apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Update to Bulma CSS 1.0

Browse Source 
* Update the CSS and add a theme selector to the Chat Settings to force a
  light or dark mode theme (default is automatic).
This commit is contained in:
Noah 2024-04-06 14:35:52 -07:00
parent f0dd1d952c
commit 92a376786d
14 changed files with 17472 additions and 15573 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -5,8 +5,7 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css?{{.CacheHash}}">
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css?{{.CacheHash}}">
<link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
<link rel="stylesheet" type="text/css" href="/static/css/chat.css?{{.CacheHash}}">
<title>{{.Config.Title}}</title>
@ -40,6 +39,7 @@
const UserJWTValid = {{if .JWTAuthOK}}true{{else}}false{{end}};
const UserJWTClaims = {{.JWTClaims.ToJSON}};
const CachedBlocklist = {{.CachedBlocklist}};
const CacheHash = {{.CacheHash}};
// Show the photo detail modal.
function setModalImage(url) {

54
public/static/css/bulma-dark-theme.css Normal file
View File

@ -0,0 +1,54 @@
/* Forced dark theme for Bulma (custom created for BareRTC) */
/* BareRTC custom overrides */
@import url("chat-dark.css");
/* Copied from bulma.css - original dark theme styles */
:root {
--bulma-white-on-scheme-l: 100%;
--bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
--bulma-black-on-scheme-l: 0%;
--bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
--bulma-light-on-scheme-l: 96%;
--bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
--bulma-dark-on-scheme-l: 56%;
--bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1);
--bulma-text-on-scheme-l: 54%;
--bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1);
--bulma-primary-on-scheme-l: 41%;
--bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1);
--bulma-link-on-scheme-l: 73%;
--bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1);
--bulma-info-on-scheme-l: 70%;
--bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1);
--bulma-success-on-scheme-l: 53%;
--bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1);
--bulma-warning-on-scheme-l: 53%;
--bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1);
--bulma-danger-on-scheme-l: 70%;
--bulma-danger-on-scheme: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l), 1);
--bulma-scheme-brightness: dark;
--bulma-scheme-main-l: 9%;
--bulma-scheme-main-bis-l: 11%;
--bulma-scheme-main-ter-l: 13%;
--bulma-soft-l: 20%;
--bulma-bold-l: 90%;
--bulma-soft-invert-l: 90%;
--bulma-bold-invert-l: 20%;
--bulma-background-l: 14%;
--bulma-border-weak-l: 21%;
--bulma-border-l: 24%;
--bulma-text-weak-l: 53%;
--bulma-text-l: 71%;
--bulma-text-strong-l: 93%;
--bulma-text-title-l: 100%;
--bulma-hover-background-l-delta: 5%;
--bulma-active-background-l-delta: 10%;
--bulma-hover-border-l-delta: 10%;
--bulma-active-border-l-delta: 20%;
--bulma-hover-color-l-delta: 5%;
--bulma-active-color-l-delta: 10%;
--bulma-shadow-h: 0deg;
--bulma-shadow-s: 0%;
--bulma-shadow-l: 100%;
}

3
public/static/css/bulma-no-dark-mode.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
public/static/css/bulma-no-dark-mode.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

8843
public/static/css/bulma-prefers-dark.css
View File

File diff suppressed because it is too large Load Diff

23978
public/static/css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

2
public/static/css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

4
public/static/css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

51
public/static/css/chat-dark.css Normal file
View File

@ -0,0 +1,51 @@
/* Custom color overrides for Bulma's dark theme */
.chat-container {
background: rgb(39, 39, 39) !important;
background: linear-gradient(0deg, rgb(39, 39, 39) 0%, rgb(66, 66, 66) 100%) !important;
}
.has-background-primary-light {
background-color: rgba(28, 166, 76, 0.25) !important;
}
.has-background-info-light, .has-background-info {
background-color: rgb(26, 79, 95) !important
}
.has-background-success-light, .has-background-success {
background-color: rgba(19, 71, 37, 0.685) !important
}
.has-background-warning-light, .has-background-warning {
background-color: rgb(100, 90, 41) !important;
}
/* note: this css file otherwise didn't override this, dark's always dark, brighten it! */
.has-text-dark, .button.is-grey {
color: #b5b5b5 !important;
}
.button.is-dark {
color: #b5b5b5 !important;
border-color: #b5b5b5 !important;
}
/* adjust some background colors darker */
.notification.is-success.is-light {
background-color: #232e29 !important;
color: #56cf98 !important;
}
.notification.is-warning.is-light {
background-color: rgb(51, 46, 21) !important;
color: rgb(253, 227, 97) !important;
}
.has-background-dm {
background-color: #100010 !important;
}
.emoji-button button {
background-color: rgba(0, 0, 0, 0.5) !important;
color: rgba(255, 255, 255, 0.5) !important;
}

3
public/static/css/chat-prefers-dark.css Normal file
View File

@ -0,0 +1,3 @@
/* Custom nonshy color overrides for Bulma's dark theme
(prefers-dark edition) */
@import url("chat-dark.css") screen and (prefers-color-scheme: dark);

9
public/static/css/chat.css
View File

@ -87,13 +87,6 @@ img {
grid-template-rows: auto 1fr auto;
}
@media (prefers-color-scheme: dark) {
.chat-container {
background: rgb(39, 39, 39);
background: linear-gradient(0deg, rgb(39, 39, 39) 0%, rgb(66, 66, 66) 100%);
}
}
/* Header row */
.chat-container > .chat-header {
grid-column: 1 / 4;
@ -145,7 +138,7 @@ img {
/* Responsive CSS styles */
@media screen and (min-width: 1024px) {
.mobile-only {
display: none;
display: none !important;
}
}
@media screen and (max-width: 1024px) {

84
src/App.vue
View File

@ -78,6 +78,7 @@ export default {
website: WebsiteURL,
permitNSFW: PermitNSFW,
webhookURLs: WebhookURLs,
cacheHash: CacheHash,
VIP: VIP,
fontSizeClasses: [
["x-2", "Very small chat room text"],
@ -153,6 +154,7 @@ export default {
watchNotif: true, // notify in chat about cameras being watched
closeDMs: false, // ignore unsolicited DMs
muteSounds: false, // mute all sound effects
theme: "auto", // auto, light, dark theme
appleCompat: isAppleWebkit(), // Apple browser compatibility mode
},
@ -515,6 +517,9 @@ export default {
"prefs.appleCompat": function () {
LocalStorage.set('appleCompat', this.prefs.appleCompat);
},
"prefs.theme": function() {
LocalStorage.set('theme', this.prefs.theme);
},
},
computed: {
connected() {
@ -892,6 +897,9 @@ export default {
if (settings.whoSort != undefined) {
this.whoSort = settings.whoSort;
}
if (settings.theme != undefined) {
this.prefs.theme = settings.theme;
}
},
signIn(username) {
@ -3384,6 +3392,36 @@ export default {
<!-- Display preferences -->
<div v-if="settingsModal.tab === 'prefs'">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Theme</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<label class="radio">
<input type="radio"
v-model="prefs.theme"
value="auto">
Automatic
</label>
<label class="radio">
<input type="radio"
v-model="prefs.theme"
value="light">
Light
</label>
<label class="radio">
<input type="radio"
v-model="prefs.theme"
value="dark">
Dark
</label>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Video size</label>
@ -3796,7 +3834,7 @@ export default {
<div class="modal-content">
<div class="card">
<header class="card-header has-background-info">
<p class="card-header-title has-text-light">Broadcast my webcam</p>
<p class="card-header-title">Select Webcam Options</p>
</header>
<div class="card-content">
<p class="block mb-1">
@ -3878,7 +3916,7 @@ export default {
<div class="select is-fullwidth">
<select v-model="webcam.videoDeviceID">
<option :value="null" disabled selected>Select default camera</option>
<option v-for="(d, i) in webcam.videoDevices" :value="d.id">
<option v-for="(d, i) in webcam.videoDevices" :value="d.id" v-bind:key="i">
{{ d.label || `Camera ${i}` }}
</option>
</select>
@ -3890,7 +3928,7 @@ export default {
<div class="select is-fullwidth">
<select v-model="webcam.audioDeviceID">
<option :value="null" disabled selected>Select default microphone</option>
<option v-for="(d, i) in webcam.audioDevices" :value="d.id">
<option v-for="(d, i) in webcam.audioDevices" :value="d.id" v-bind:key="i">
{{ d.label || `Microphone ${i}` }}
</option>
</select>
@ -3900,9 +3938,9 @@ export default {
<div class="field">
<div class="control has-text-centered">
<button type="button" class="button is-link mr-4"
@click="startVideo({ force: true }); nsfwModalCast.visible = false">Start webcam</button>
<button type="button" class="button" @click="nsfwModalCast.visible = false">Cancel</button>
<button type="button" class="button is-success ml-2"
@click="startVideo({ force: true }); nsfwModalCast.visible = false">Start webcam</button>
</div>
</div>
</div>
@ -4019,8 +4057,8 @@ export default {
<!-- Left Column: Channels & DMs -->
<div class="left-column">
<div class="card grid-card">
<header class="card-header has-background-success-dark">
<div class="columns is-mobile card-header-title has-text-light">
<header class="card-header has-background-success">
<div class="columns is-mobile card-header-title">
<div class="column is-narrow mobile-only">
<button type="button" class="button is-success px-2" @click="openChatPanel">
<i class="fa fa-arrow-left"></i>
@ -4128,7 +4166,7 @@ export default {
<i class="fa fa-gear"></i>
</button>
<button type="button" class="button is-small is-outlined" :disabled="webcam.videoScale === 'x4'"
<button type="button" class="button is-small is-outlined mr-1" :disabled="webcam.videoScale === 'x4'"
@click="scaleVideoSize(true)">
<i class="fa fa-magnifying-glass-plus"></i>
</button>
@ -4353,8 +4391,8 @@ export default {
<!-- Right Column: Who Is Online -->
<div class="right-column">
<div class="card grid-card">
<header class="card-header has-background-success-dark">
<div class="columns is-mobile card-header-title has-text-light">
<header class="card-header has-background-success">
<div class="columns is-mobile card-header-title">
<div class="column">Who Is Online</div>
<div class="column is-narrow mobile-only">
<button type="button" class="button is-success px-2" @click="openChatPanel">
@ -4424,8 +4462,8 @@ export default {
</div>
<!-- Who Is Online -->
<ul class="menu-list" v-if="whoTab === 'online'">
<li v-for="(u, i) in sortedWhoList" v-bind:key="i">
<div v-if="whoTab === 'online'">
<div v-for="(u, i) in sortedWhoList" v-bind:key="i">
<WhoListRow
:user="u"
:username="username"
@ -4443,12 +4481,12 @@ export default {
@open-video="openVideo"
@open-profile="showProfileModal">
</WhoListRow>
</li>
</ul>
</div>
</div>
<!-- Watching My Webcam -->
<ul class="menu-list" v-if="whoTab === 'watching'">
<li v-for="(u, i) in sortedWatchingList" v-bind:key="username">
<div v-if="whoTab === 'watching'">
<div v-for="(u, i) in sortedWatchingList" v-bind:key="i">
<WhoListRow
:is-watching-tab="true"
:user="u"
@ -4468,13 +4506,23 @@ export default {
@boot-user="bootUser"
@open-profile="showProfileModal">
</WhoListRow>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Theme CSS (light/dark) -->
<link v-if="prefs.theme === 'light'"
rel="stylesheet" type="text/css"
href="/static/css/bulma-no-dark-mode.min.css?{{.config.cacheHash}}">
<link v-else-if="prefs.theme === 'dark'"
rel="stylesheet" type="text/css"
href="/static/css/bulma-dark-theme.css?{{.config.cacheHash}}">
<link v-else rel="stylesheet" type="text/css"
href="/static/css/chat-prefers-dark.css?{{.config.cacheHash}}">
</template>
<style>

6
src/components/ProfileModal.vue
View File

@ -192,7 +192,7 @@ export default {
<div v-if="user.username !== username" class="mt-4">
<!-- DMs button -->
<button type="button"
class="button is-grey is-outlined is-small px-2 mb-1"
class="button is-dark is-outlined is-small px-2 mb-1"
@click="openDMs()"
:title="isDnd ? 'This person is not accepting new DMs' : 'Open a Direct Message (DM) thread'"
:disabled="isDnd">
@ -202,7 +202,7 @@ export default {
<!-- Mute button -->
<button type="button"
class="button is-grey is-outlined is-small px-2 ml-1 mb-1"
class="button is-dark is-outlined is-small px-2 ml-1 mb-1"
@click="muteUser()" title="Mute user">
<i class="fa fa-comment-slash mr-1" :class="{
'has-text-success': isMuted,
@ -213,7 +213,7 @@ export default {
<!-- Boot button -->
<button type="button"
class="button is-grey is-outlined is-small px-2 ml-1 mb-1"
class="button is-dark is-outlined is-small px-2 ml-1 mb-1"
@click="bootUser()" title="Boot user off your webcam">
<i class="fa fa-user-xmark mr-1" :class="{
'has-text-danger': !isBooted,

1
src/lib/LocalStorage.js
View File

@ -7,6 +7,7 @@ const keys = {
'scrollback': Number, // Scrollback buffer (int)
'preferredDeviceNames': Object, // Webcam/mic device names (object, keys video,audio)
'whoSort': String, // user's preferred sort order for the Who List
'theme': String, // light, dark, or auto theme
// Webcam settings (booleans)
'videoMutual': Boolean,