;
}
return translationMarkup;
@@ -67,6 +60,7 @@ const SlideTranslation = ({ getFontSize, translationObj, translationHTML }) => {
SlideTranslation.propTypes = {
getFontSize: PropTypes.func,
translationObj: PropTypes.object,
+ lang: PropTypes.string,
};
export default SlideTranslation;
diff --git a/www/main/viewer/Slide/SlideTransliteration.jsx b/www/main/viewer/Slide/SlideTransliteration.jsx
index 335e0e73a..c127be46d 100644
--- a/www/main/viewer/Slide/SlideTransliteration.jsx
+++ b/www/main/viewer/Slide/SlideTransliteration.jsx
@@ -3,21 +3,22 @@ import PropTypes from 'prop-types';
import { useStoreState } from 'easy-peasy';
import anvaad from 'anvaad-js';
-const SlideTransliteration = ({ getFontSize, gurmukhiString }) => {
- const { transliterationLanguage, transliterationFontSize } = useStoreState(
+const SlideTransliteration = ({ getFontSize, gurmukhiString, lang, position }) => {
+ const { content1FontSize, content2FontSize, content3FontSize } = useStoreState(
(state) => state.userSettings,
);
+ const fontSizes = [content1FontSize, content2FontSize, content3FontSize];
const [transliterationString, setTransliterationString] = useState(null);
const getTransliteration = (gurmukhi) => {
- switch (transliterationLanguage) {
- case 'English':
+ switch (lang) {
+ case 'transliteration-english':
setTransliterationString(anvaad.translit(gurmukhi));
break;
- case 'Shahmukhi':
+ case 'transliteration-punjabi':
setTransliterationString(anvaad.translit(gurmukhi || '', 'shahmukhi'));
break;
- case 'Devanagari':
+ case 'transliteration-hindi':
setTransliterationString(anvaad.translit(gurmukhi || '', 'devnagri'));
break;
default:
@@ -28,16 +29,13 @@ const SlideTransliteration = ({ getFontSize, gurmukhiString }) => {
useEffect(() => {
getTransliteration(gurmukhiString);
- }, [gurmukhiString, transliterationLanguage]);
+ }, [gurmukhiString, lang]);
- const customStyle = getFontSize(transliterationFontSize);
+ const customStyle = getFontSize(fontSizes[position]);
return (
transliterationString && (
-
+
{transliterationString}
)
@@ -47,6 +45,8 @@ const SlideTransliteration = ({ getFontSize, gurmukhiString }) => {
SlideTransliteration.propTypes = {
getFontSize: PropTypes.func,
gurmukhiString: PropTypes.string,
+ lang: PropTypes.string,
+ position: PropTypes.number,
};
export default SlideTransliteration;
diff --git a/www/main/viewer/hooks/bakePanktee.js b/www/main/viewer/hooks/bakePanktee.js
index 73edf64b8..6a35bbb34 100644
--- a/www/main/viewer/hooks/bakePanktee.js
+++ b/www/main/viewer/hooks/bakePanktee.js
@@ -53,7 +53,7 @@ const bakePanktee = () => {
...getFontSize(gurbaniFontSize),
display: 'inline-block',
margin: '0 0.15em',
- 'white-space': 'nowrap',
+ whiteSpace: 'nowrap',
};
}
return breakIntoWords(gurmukhiString).map((word, i) => (
diff --git a/www/main/workspace-bar/components/WorkspaceBar.jsx b/www/main/workspace-bar/components/WorkspaceBar.jsx
index a09f77b11..4bbf31d3a 100644
--- a/www/main/workspace-bar/components/WorkspaceBar.jsx
+++ b/www/main/workspace-bar/components/WorkspaceBar.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
import { useStoreState, useStoreActions } from 'easy-peasy';
import { updateViewerScale } from '../../viewer/utils';
@@ -7,32 +7,26 @@ const remote = require('@electron/remote');
const { i18n } = remote.require('./app');
const analytics = remote.getGlobal('analytics');
-const { store } = remote.require('./app');
+// const { store } = remote.require('./app');
const WorkspaceBar = () => {
- const { isSingleDisplayMode } = useStoreState((state) => state.userSettings);
- const { setIsSingleDisplayMode } = useStoreActions((state) => state.userSettings);
+ const { currentWorkspace } = useStoreState((state) => state.userSettings);
const { minimizedBySingleDisplay } = useStoreState((state) => state.navigator);
+ const { setCurrentWorkspace } = useStoreActions((state) => state.userSettings);
const presenterIdentifier = i18n.t('WORKSPACES.PRESENTER');
- const workspaces = [presenterIdentifier, i18n.t('WORKSPACES.SINGLE_DISPLAY')];
- const defaultWsState = !isSingleDisplayMode ? workspaces[0] : workspaces[1];
- const [currentWorkspace, setWorkspace] = useState(defaultWsState);
+ const singleDisplayIdentifier = i18n.t('WORKSPACES.SINGLE_DISPLAY');
+ const multiPaneIdentifier = i18n.t('WORKSPACES.MULTI_PANE');
+ const workspaces = [singleDisplayIdentifier, presenterIdentifier, multiPaneIdentifier];
const handleWorkspaceChange = (workspace) => {
const moveToPresenter = workspace === presenterIdentifier;
if (moveToPresenter) {
- if (isSingleDisplayMode) {
- setIsSingleDisplayMode(false);
- }
- store.setUserPref('app.layout.presenter-view', moveToPresenter);
- global.platform.updateSettings();
global.controller['presenter-view']();
- } else if (!isSingleDisplayMode) {
- setIsSingleDisplayMode(true);
}
- setWorkspace(workspace);
- analytics.trackEvent('changed workspace', workspace);
+ if (currentWorkspace !== workspace) {
+ setCurrentWorkspace(workspace);
+ }
analytics.trackEvent({
category: 'workspace',
action: 'changed',
diff --git a/www/obs/index.html b/www/obs/index.html
index a147a660b..3866f02c1 100644
--- a/www/obs/index.html
+++ b/www/obs/index.html
@@ -131,13 +131,13 @@
const layoutContainer = document.querySelector('.layout-top-bottom');
layoutContainer.style.color = overlayPrefs.textColor;
layoutContainer.style.fontSize = `${(preview && overlayPrefs.fitTextSwitch) ? 3 : overlayPrefs.textSize}vh`;
- layoutContainer.style.padding = `${overlayPrefs.fitTextSwitch ? 1 : overlayPrefs.padding}vh`;
+ layoutContainer.style.padding = `${overlayPrefs.fitTextSwitch ? '1vh 5%' : `${overlayPrefs.padding}vh 5%`}`;
layoutContainer.style.backgroundColor = `rgba(${hexToRgb(overlayPrefs.bgColor)}, ${bgOpacity})`;
document.querySelectorAll('.content-top, .content-bottom').forEach(el => {
el.style.color = overlayPrefs.textColor;
el.style.fontSize = `${(preview && overlayPrefs.fitTextSwitch) ? 3 : overlayPrefs.textSize}vh`;
- el.style.padding = `${overlayPrefs.fitTextSwitch ? 1 : overlayPrefs.padding}vh`;
+ el.style.padding = `${overlayPrefs.fitTextSwitch ? '1vh 5%' : `${overlayPrefs.padding}vh 5%`}`;
el.style.backgroundColor = `rgba(${hexToRgb(overlayPrefs.bgColor)}, ${bgOpacity})`;
});
@@ -149,11 +149,11 @@
if (!preview && ['top', 'bottom'].includes(overlayPrefs.layout)) {
if (overlayPrefs.fitTextSwitch) {
fitTextInstances = fitty('.layout-top-bottom .o-gurbani', {
- minSize: 14,
+ minSize: 18,
maxSize: 36,
});
fitTextInstances.push(...fitty('.layout-top-bottom .o-translation', {
- minSize: 12,
+ minSize: 14,
maxSize: 24,
multiLine: true,
}));
diff --git a/www/src/scss/_overlay.scss b/www/src/scss/_overlay.scss
index fa9bb4c26..b939467a3 100644
--- a/www/src/scss/_overlay.scss
+++ b/www/src/scss/_overlay.scss
@@ -98,16 +98,31 @@ $toolbar-width: 40px;
}
.url-container {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+
input[type='text'] {
background: #fff;
border: 1px solid #ddd;
border-radius: 32px;
color: #333;
font-size: 12px;
+ line-height: 2;
margin: 0;
padding: 10px;
text-align: center;
}
+
+ .tooltip {
+ background-color: black;
+ border-radius: 6px;
+ color: #fff;
+ font-size: 12px;
+ opacity: 0;
+ padding: 0.5em 0.7em;
+ width: max-content;
+ }
}
.toggle-text > .layout-btn,
@@ -329,6 +344,10 @@ input[type='color'] {
background: #ddd;
display: inline-block;
margin: 2px;
+
+ &:hover + .tooltip {
+ opacity: 1;
+ }
}
.resize-btn {
diff --git a/www/src/scss/_settings.scss b/www/src/scss/_settings.scss
index 54839af11..e936318c4 100644
--- a/www/src/scss/_settings.scss
+++ b/www/src/scss/_settings.scss
@@ -219,6 +219,21 @@
}
}
}
+
+ .icon-reset {
+ border-radius: 4px;
+ box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+ cursor: pointer;
+ padding: 8px;
+ display: flex;
+ gap: 8px;
+
+ img{
+ height: 16px;
+ width: 16px;
+ filter: invert(0.4);
+ }
+ }
}
}
}
@@ -379,14 +394,6 @@
margin-top: 0.25em;
}
-.translation,
-.transliteration,
-.teeka {
- display: none;
- height: 0;
- opacity: 0;
-}
-
.translation-visibility-true .translation,
.transliteration-visibility-true .transliteration,
.teeka-visibility-true .teeka {
diff --git a/www/src/scss/controller.scss b/www/src/scss/controller.scss
index 98ac5d545..4e4ac0b0e 100644
--- a/www/src/scss/controller.scss
+++ b/www/src/scss/controller.scss
@@ -11,6 +11,7 @@ $totalSessionOffset: $footerOffset + $shortcutTrayHeight;
$sessionPageHeight: calc(100% - #{$totalSessionOffset});
.presenter-view.shortcut-tray-true {
+
#main-ui,
.nav-page:nth-child(2) {
height: $sessionPageHeight;
@@ -92,6 +93,7 @@ ul {
.launchpad {
display: flex;
flex-direction: row;
+ flex-wrap: wrap;
height: 100%;
overflow-x: auto;
padding: 10px 10px 40px 50px;
@@ -121,6 +123,7 @@ ul {
.pane {
height: inherit;
}
+
.shabad-list {
height: inherit;
}
@@ -142,7 +145,7 @@ ul {
}
.pane-content {
- > div {
+ >div {
padding: 0;
}
}
@@ -175,6 +178,7 @@ ul {
.pane {
height: inherit;
}
+
.search-footer {
margin: 0;
width: 100%;
@@ -204,7 +208,7 @@ ul {
top: 0;
width: 100%;
- & > .viewer-pane {
+ &>.viewer-pane {
padding: 0;
& .pane {
@@ -228,13 +232,14 @@ ul {
}
}
}
-
+
.single-display {
&-minimize {
min-height: auto;
height: 5vh;
}
}
+
.single-display-switches {
background: rgba(221, 221, 221, 1);
@@ -252,14 +257,46 @@ ul {
}
}
- .navigator-row {
+ .navigator-column {
align-items: center;
display: flex;
flex-direction: column;
+ flex-wrap: wrap;
justify-content: space-evenly;
position: relative;
- width: 50vw;
+ width: 50%;
+ }
+
+ .navigator-row {
+ height: 50%;
+ width: 100vw;
+ display: flex;
+ justify-content: space-evenly;
}
+
+ .multipane-grid {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ width: 100%;
+ height: 50%;
+ }
+
+ .shabad1-container, .shabad2-container, .shabad3-container {
+ grid-row: 1;
+ }
+
+ .shabad1-container {
+ grid-column: 1/3;
+ }
+
+ .shabad2-container {
+ grid-column: 3/5;
+ }
+
+ .shabad3-container {
+ grid-column: 5/7;
+ }
+
}
.minimized {
@@ -342,7 +379,7 @@ ul {
}
&#session-page {
- ul > li {
+ ul>li {
align-items: center;
display: flex;
@@ -389,7 +426,7 @@ ul {
border-bottom: none;
}
- li > a {
+ li>a {
cursor: default;
display: block;
line-height: normal;
@@ -517,4 +554,4 @@ ul {
}
@import 'foundation/foundation', 'animations', 'footer', 'forms', 'header', 'helpers', 'search',
- 'share-sync', 'settings', 'notifications';
+'share-sync', 'settings', 'notifications';
\ No newline at end of file
diff --git a/www/src/scss/navigator/common/_pane.scss b/www/src/scss/navigator/common/_pane.scss
index 284da0017..bbff1c24f 100644
--- a/www/src/scss/navigator/common/_pane.scss
+++ b/www/src/scss/navigator/common/_pane.scss
@@ -2,12 +2,16 @@
.pane-container {
flex: 1;
max-height: 45vh;
+ height: 100%;
}
.pane {
display: flex;
flex-direction: column;
min-width: 500px;
+ .multipane-grid & {
+ min-width: 300px;
+ }
position: relative;
overflow: hidden;
height: 100%;
@@ -40,7 +44,7 @@
}
.pane-content {
- @include flex($fd-value: column, $ai-value: initial);
+ @include flex($fd-value: column, $ai-value: initial, $jc-value: flex-start);
flex-grow: 1;
flex-wrap: nowrap;
height: 100%;
diff --git a/www/src/scss/navigator/common/_verse-block.scss b/www/src/scss/navigator/common/_verse-block.scss
index d8c05ef12..e71ca2815 100644
--- a/www/src/scss/navigator/common/_verse-block.scss
+++ b/www/src/scss/navigator/common/_verse-block.scss
@@ -16,7 +16,7 @@
.verse-content {
flex-grow: 1;
- padding: 5px 0;
+ padding: 10px 0;
line-height: 1.3;
}
@@ -47,10 +47,19 @@
.theme-dark-theme & {
background-color: $dull-blue;
}
+ .inactive-pane & {
+ .theme-light-theme & {
+ background-color: $transparent-light-black;
+ }
+ .theme-dark-theme & {
+ background-color: $transparent-light-white;
+ }
+ }
}
.search-list {
display: inline-flex;
padding: 0 5px;
+ width: 100%;
.sggs-color {
color: $cadmium-orange;
}
@@ -83,15 +92,17 @@
transition: 0.3s all ease;
&.search-li {
- padding: 2px 10px;
+ display: flex;
+ justify-content: space-between;
list-style: none;
+ padding: 2px 10px;
}
&.shabad-li {
align-items: center;
display: flex;
justify-content: center;
- padding: 5px 10px;
+ padding: 0 10px;
transition: 0.3s all ease;
}
div {
diff --git a/www/src/scss/navigator/misc/_misc.scss b/www/src/scss/navigator/misc/_misc.scss
index b070da65a..5294228d7 100644
--- a/www/src/scss/navigator/misc/_misc.scss
+++ b/www/src/scss/navigator/misc/_misc.scss
@@ -37,15 +37,6 @@ $misc-footer-active: 70px;
}
}
}
- .history-results {
- overflow-y: auto;
-
- .history-item {
- cursor: pointer;
- margin: 8px 0;
- padding: 10px;
- }
- }
.list-of-items {
@include flex($fd-value: column, $jc-value: start);
margin: 0;
@@ -69,6 +60,7 @@ $misc-footer-active: 70px;
}
}
}
+
.misc-footer {
@include flex($fd-value: column);
height: fit-content;
@@ -133,12 +125,22 @@ $misc-footer-active: 70px;
}
}
+.history-results {
+ overflow-y: auto;
+
+ .history-item {
+ cursor: pointer;
+ margin: 0;
+ padding: 16px 10px;
+ }
+}
+
.fav-shabad-container {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
- padding: 0px 8px;
+ padding: 0px 10px;
transition: 0.3s all ease;
.fav-shabad-text {
@@ -146,6 +148,11 @@ $misc-footer-active: 70px;
width: 65%;
}
+ .fav-item {
+ margin: 0;
+ padding: 16px 0;
+ }
+
.fav-shabad-options {
align-items: center;
color: $grey;
@@ -268,6 +275,21 @@ $misc-footer-active: 70px;
}
}
+.misc-slides-pane {
+ @include flex($jc-value: flex-start);
+ gap: 20px;
+ padding: 0 32px;
+
+ .misc-slide-button {
+ background: $cadmium-orange;
+ border-radius: 4px;
+ box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+ color: $white;
+ cursor: pointer;
+ padding: 8px;
+ }
+}
+
.dhan-guru {
&-pane {
padding: 0 32px;
diff --git a/www/src/scss/navigator/search/_searchNew.scss b/www/src/scss/navigator/search/_searchNew.scss
index 2b68376b8..9b30aa5c4 100644
--- a/www/src/scss/navigator/search/_searchNew.scss
+++ b/www/src/scss/navigator/search/_searchNew.scss
@@ -254,10 +254,9 @@
overflow: auto;
}
.search-footer {
- @include flex($ai-value: start, $jc-value: initial, $width: 99%);
+ @include flex($ai-value: center, $jc-value: initial, $width: 100%);
font-size: 14px;
padding: 10px;
- margin-bottom: 5px;
span {
&:not(:last-child) {
@include inline-flex($width: initial);
diff --git a/www/src/scss/navigator/shabad/_multipane.scss b/www/src/scss/navigator/shabad/_multipane.scss
new file mode 100644
index 000000000..29febd08f
--- /dev/null
+++ b/www/src/scss/navigator/shabad/_multipane.scss
@@ -0,0 +1,193 @@
+@each $pane, $color in $multipane-colors {
+ .#{$pane} {
+ border-bottom: 2px solid $color;
+ display: flex;
+ justify-content: space-between;
+ position: relative;
+
+ .pane-info {
+ height: 100%;
+
+ button {
+ height: 100%;
+
+ &.disabled {
+ opacity: 0.5;
+ i {
+ cursor: not-allowed;
+ }
+ }
+ }
+ }
+
+ .pane-symbol {
+ background-color: $color;
+ color: white;
+ display: inline-block;
+ height: 100%;
+ font-size: 18px;
+ margin-right: 4px;
+ text-align: center;
+ width: 40px;
+ }
+
+ .pane-tools {
+ align-items: center;
+ display: flex;
+ justify-content: flex-end;
+ width: 100px;
+
+ button {
+ background-color: transparent;
+ cursor: pointer;
+ padding: 0 8px;
+ }
+
+ .fav-btn {
+ border-radius: 50%;
+ margin: 0;
+ i {
+ padding-right: 0;
+ }
+ }
+
+ .arrow-icons {
+ display: flex;
+
+ i {
+ border-radius: 50%;
+ font-size: 16px;
+ padding: 5px;
+ }
+ }
+
+ .pane-options-dropdown {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background: url('../../assets/img/icons/ellipsis-vertical-solid.svg');
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: auto 18px;
+ border: none;
+ color: transparent;
+ cursor: pointer;
+ height: 40px;
+ outline: none;
+ padding: 16px;
+ width: 40px;
+ }
+ }
+
+ &-btn {
+ &:disabled {
+ cursor: not-allowed;
+ }
+
+ &.active {
+ background-color: $color;
+ color: white;
+ }
+ }
+
+ .pane-options {
+ position: absolute;
+ top: 35px;
+ right: 0px;
+ width: 120px;
+ list-style-type: none;
+ z-index: 100;
+
+ ul {
+ list-style-type: none;
+
+ li {
+ padding-left: 24px;
+ cursor: pointer;
+ }
+ }
+
+ &.hidden {
+ display: none;
+ }
+ }
+ }
+
+ .button-#{$pane} {
+ cursor: pointer;
+ margin: 0 2px;
+ padding: 12px;
+ transition: 0.3s all ease;
+
+ i {
+ color: $snow-white;
+ font-size: 14px;
+ }
+
+ &:hover {
+ background-color: $color;
+ color: white;
+ }
+
+ &:disabled {
+ background-color: rgba($color, 0.8);
+ color: initial;
+ cursor: not-allowed;
+ i {
+ cursor: not-allowed;
+ }
+ }
+ }
+}
+
+.default-pane-switcher {
+ flex-grow: 1;
+ text-align: right;
+
+ button {
+ cursor: pointer;
+ padding: 8px 12px;
+ }
+}
+
+.multipane-content-btn {
+ border: 1px solid black;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ margin: 12px;
+ padding: 8px;
+ width: 160px;
+
+ span {
+ margin-left: 12px;
+ }
+}
+
+.multipane-dropdown {
+ list-style-type: none;
+ overflow: hidden;
+ position: absolute;
+ padding: 4px;
+ z-index: 10;
+
+ &.disabled {
+ height: 0px;
+ transition: 0.3s height ease;
+ opacity: 0;
+ }
+
+ &.enabled {
+ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+ height: 154px;
+ transition: 0.3s height ease;
+ opacity: 1;
+ }
+
+ p {
+ &.locked-option {
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+ }
+}
\ No newline at end of file
diff --git a/www/src/scss/navigator/shabad/_shabad.scss b/www/src/scss/navigator/shabad/_shabad.scss
index 007909136..0825cc576 100644
--- a/www/src/scss/navigator/shabad/_shabad.scss
+++ b/www/src/scss/navigator/shabad/_shabad.scss
@@ -1,4 +1,5 @@
@import '../utils/variables';
+
.shabad-pane {
@include flex($ai-value: start);
width: 100%;
@@ -7,6 +8,7 @@
&:hover {
outline: 0;
}
+
.shabad-list {
height: 100%;
}
@@ -17,6 +19,8 @@
&-header {
@include flex($ai-value: center, $jc-value: flex-end);
+ height: 100%;
+ width: 100%;
.toggle-viewer-btn {
align-items: center;
@@ -60,4 +64,4 @@
i {
padding-right: 8px;
}
-}
+}
\ No newline at end of file
diff --git a/www/src/scss/obs/styles.scss b/www/src/scss/obs/styles.scss
index 7f710d26d..5c70ed0d1 100644
--- a/www/src/scss/obs/styles.scss
+++ b/www/src/scss/obs/styles.scss
@@ -34,6 +34,11 @@ body {
padding: 0;
}
}
+
+ .o-gurbani,
+ .o-translation {
+ white-space: pre-wrap;
+ }
}
.gurmukhi {
diff --git a/www/src/scss/styles.scss b/www/src/scss/styles.scss
index cc877a14d..b54d3b6e0 100644
--- a/www/src/scss/styles.scss
+++ b/www/src/scss/styles.scss
@@ -45,7 +45,7 @@ $tag-popular-color: #ce744e;
@import 'controller.scss', 'markdown', 'themes/themes', 'update', 'viewer', 'window', 'addon', 'akhandpaatt',
'overlay', 'animations', 'noty', 'ui-library', 'workspace-bar', 'navigator/common/pane',
- 'navigator/common/verse-block', 'navigator/search/searchNew', 'navigator/shabad/shabad',
+ 'navigator/common/verse-block', 'navigator/search/searchNew', 'navigator/shabad/shabad', 'navigator/shabad/multipane',
'navigator/misc/misc', 'navigator/common/icon-button', 'navigator/viewer/viewer',
'navigator/search/gurmukhi-keyboard';
@@ -179,6 +179,7 @@ button {
padding: 0.3rem 1rem;
display: flex;
align-items: center;
+ transition: 0.3s all ease;
}
header,
diff --git a/www/src/scss/themes/helpers/_dark-base.scss b/www/src/scss/themes/helpers/_dark-base.scss
index fe7ce3c4c..6f6ee4bd0 100644
--- a/www/src/scss/themes/helpers/_dark-base.scss
+++ b/www/src/scss/themes/helpers/_dark-base.scss
@@ -35,13 +35,15 @@
.addon-overlay,
.fav-results {
background-color: $bg-alt;
+
.sttm-loader {
border-color: $bg-bright;
border-top-color: $accent;
}
}
- .viewer-controls, .tingle-modal-box__footer {
+ .viewer-controls,
+ .tingle-modal-box__footer {
background-color: $bg-main;
}
@@ -68,6 +70,7 @@
.settings-wrapper {
.settings-viewer {
+
.slide-transliteration,
.slide-translation,
.slide-teeka {
@@ -99,11 +102,13 @@
filter: invert(1);
}
}
+
.misc-active {
color: $white;
}
}
}
+
.pane-content {
background-color: $bg-alt;
}
@@ -126,6 +131,7 @@
color: $white;
}
}
+
.control-item:hover {
background-color: $bg-main;
}
@@ -138,9 +144,11 @@
.slide#announcement-slide .announcements {
color: $white;
}
+
.search-footer {
background: $bg-main;
}
+
.search-pane {
.pane {
.pane-footer {
@@ -152,7 +160,7 @@
&-dd-group:hover {
background-color: $transparent-light-white;
}
-
+
option {
color: $text-base;
}
@@ -164,6 +172,7 @@
border: 1px solid $light-grey;
}
}
+
&-checkbox {
&:checked {
+ {
@@ -180,26 +189,32 @@
.clear-pane {
background-color: $black;
- .quick-tray > i {
+ .quick-tray>i {
color: $white;
}
+
.footer-toggler-inactive {
background: $tray-bg;
}
+
.footer-toggler {
background-color: $tray-bg;
}
}
}
+
.shortcut-drawer {
background: $tray-bg;
}
+
.tray-item-icon {
background: $button-bg;
}
+
.tray-item-icon {
color: $white;
}
+
&.shortcut-tray-true .shortcut-toggle {
background: darken($bg-main, 10);
}
@@ -255,27 +270,27 @@
background-color: $highlight-bg !important;
color: $text-base !important;
- & + i {
+ &+i {
background-color: $highlight-bg !important;
color: $text-base !important;
}
}
}
- .switch > label {
+ .switch>label {
background: $text-dim;
}
- .switch > label::after {
+ .switch>label::after {
background: $text-bright;
border-color: $text-dim;
}
- .switch input:checked + label {
+ .switch input:checked+label {
background: $accent;
}
- .switch input:checked + label::after {
+ .switch input:checked+label::after {
background: $white;
border-color: $accent;
}
@@ -323,11 +338,11 @@
}
}
- input:focus + div {
+ input:focus+div {
background: rgba(255, 255, 255, 0.12);
}
- > button {
+ >button {
color: $text-bright;
}
}
@@ -335,6 +350,7 @@
.search-container:focus {
background: white;
}
+
.filters {
select {
border: $bg-main;
@@ -359,6 +375,7 @@
a {
color: $text-base;
}
+
&:hover {
background-color: $bg-bright;
cursor: pointer;
@@ -384,11 +401,45 @@
color: $text-base;
}
}
+
.fav-shabad-container:hover {
background-color: $bg-bright;
}
}
+ .shabad-pane {
+ .pane-options-dropdown {
+ filter: invert(1);
+
+ option {
+ background-color: $bg-main;
+ color: $white;
+ }
+ }
+
+ .live-pane {
+ box-shadow: rgba($transparent-light-white, 0.25) 0px 13px 27px -5px,
+ rgba($transparent-light-white, 0.3) 0px 8px 16px -8px;
+ }
+ }
+
+ .pane-tools {
+ button,
+ select,
+ div > i {
+ color: $text-base;
+
+ &:hover {
+ background-color: $transparent-light-white;
+ }
+ }
+ }
+
+ .pane-info button {
+ color: $text-base;
+ background-color: transparent;
+ }
+
#footer {
background-color: $bg-main;
@@ -405,8 +456,10 @@
}
}
}
+
.workspace-bar {
background-color: $bg-main;
+
div:hover {
color: $text-base;
background-color: $bg-bright;
@@ -416,8 +469,9 @@
::-webkit-scrollbar-thumb {
background-color: $scrollbar;
}
-
+
.verse-block {
+
.search-li,
.shabad-li {
&:hover {
@@ -433,4 +487,29 @@
}
}
}
+
+ .sundar-gutka-bani {
+ &:hover {
+ background-color: $disabled-dark;
+ }
+ }
+
+ .multipane-dropdown {
+ background-color: $bg-main;
+ }
+
+ @each $pane, $color in $multipane-colors {
+ .button-#{$pane} {
+ background-color: rgba($color, 0.6);
+ color: rgba($white, 0.7);
+ }
+ .#{$pane}-btn {
+ background-color: $bg-alt;
+ color: $text-base;
+
+ &:disabled {
+ opacity: 0.5;
+ }
+ }
+ }
}
diff --git a/www/src/scss/themes/helpers/_light-base.scss b/www/src/scss/themes/helpers/_light-base.scss
index 012225140..8b9abbb36 100644
--- a/www/src/scss/themes/helpers/_light-base.scss
+++ b/www/src/scss/themes/helpers/_light-base.scss
@@ -58,6 +58,7 @@
.addon-overlay,
.fav-results {
background-color: $nav-bg;
+
.sttm-loader {
border-color: $alt-bg;
border-top-color: $active-focus;
@@ -66,6 +67,7 @@
.workspace-bar {
background-color: $dialog-bg;
+
div:hover {
background-color: $nav-bg;
}
@@ -102,35 +104,42 @@
background-color: $statusbar-bg;
color: $base-text;
}
+
.control-item {
input[type='range']::before {
color: $base-text;
}
}
+
.control-item:hover {
background-color: $statusbar-bg;
}
+
.misc-pane {
.misc-header {
a {
color: $grey;
}
+
.misc-active {
color: $dark-grey;
}
}
+
.pane-footer {
background-color: $alt-bg;
.clear-pane {
background-color: $not-so-white;
- .quick-tray > i {
+ .quick-tray>i {
color: $white;
}
+
.footer-toggler-inactive {
background-color: $tray-bg;
}
+
.footer-toggler {
background-color: $tray-bg;
}
@@ -147,10 +156,12 @@
.pane-footer {
background-color: transparent;
}
+
.search-footer {
background-color: $statusbar-bg;
}
}
+
.select-bani {
&-dd-group:hover {
background-color: $transparent-light-black;
@@ -159,7 +170,7 @@
option {
color: $base-text;
}
- }
+ }
}
.viewer-pane {
@@ -171,12 +182,15 @@
.pane-footer {
background: $statusbar-bg;
}
+
.tray-item-icon {
background: $button-bg;
}
+
.tray-item-icon {
color: $white;
}
+
&.shortcut-tray-true .shortcut-toggle {
background: $alt-bg;
}
@@ -215,11 +229,12 @@
.pane {
background-color: $nav-bg;
color: $base-text !important;
+
a.panktee.current {
background-color: $current-focus !important;
color: $base-text !important;
- & + i {
+ &+i {
background-color: $current-focus !important;
color: $base-text !important;
}
@@ -249,9 +264,11 @@
background-color: $statusbar-bg;
border-top: 1px solid $lighter-grey;
color: $base-text;
+
.input-box {
color: $black;
}
+
input {
color: $base-text;
@@ -267,17 +284,18 @@
}
}
- input:focus + div {
+ input:focus+div {
background: $dialog-bg;
}
- > button {
+ >button {
color: $base-text;
}
}
.panktee span.gurmukhi {
color: $base-text;
+
span.highlight {
color: $black;
}
@@ -313,6 +331,7 @@
color: $base-text;
}
}
+
.fav-shabad-container:hover {
background-color: $statusbar-bg;
}
@@ -334,7 +353,9 @@
}
}
}
+
.verse-block {
+
.search-li,
.shabad-li {
&:hover {
@@ -342,7 +363,7 @@
}
}
}
-
+
.shabad-pane-header {
>i {
&:hover {
@@ -350,4 +371,64 @@
}
}
}
+
+ .shabad-pane {
+ .pane-options-dropdown {
+ option {
+ color: $base-text;
+ }
+ }
+
+ .live-pane {
+ box-shadow: rgba($transparent-light-black, 0.25) 0px 13px 27px -5px,
+ rgba($transparent-light-black, 0.3) 0px 8px 16px -8px;
+ }
+ }
+
+
+ .pane-tools {
+
+ button,
+ select,
+ div > i {
+ color: $base-text;
+
+ &:hover {
+ background-color: $transparent-light-black;
+ }
+ }
+ }
+
+ .pane-info button {
+ color: $base-text;
+ background-color: transparent;
+ }
+
+ .sundar-gutka-bani {
+ &:hover {
+ background-color: $disabled-light;
+ }
+ }
+
+ .pane-options {
+ background-color: $nav-bg;
+
+ ul {
+ li {
+ &:hover {
+ background-color: $current-focus;
+ }
+ }
+ }
+ }
+
+ .multipane-dropdown {
+ background-color: $alt-bg;
+ }
+
+ @each $pane, $color in $multipane-colors {
+ .button-#{$pane} {
+ background-color: rgba($color, 0.3);
+ }
+ }
}
diff --git a/www/src/scss/themes/helpers/_variables.scss b/www/src/scss/themes/helpers/_variables.scss
index 2902f66c4..4a73d6e2f 100644
--- a/www/src/scss/themes/helpers/_variables.scss
+++ b/www/src/scss/themes/helpers/_variables.scss
@@ -41,3 +41,10 @@ $light-green: #27ae60;
$apple-green: #65a757;
$picton-blue: #348ce7;
+$grape: #7209B7;
+
+$multipane-colors: (
+ "pane-1": $picton-blue,
+ "pane-2": $princeton-orange,
+ "pane-3": $grape
+);
diff --git a/www/src/scss/viewer/verse-slide/_verse-slide.scss b/www/src/scss/viewer/verse-slide/_verse-slide.scss
index b62af6a2c..e57d962db 100644
--- a/www/src/scss/viewer/verse-slide/_verse-slide.scss
+++ b/www/src/scss/viewer/verse-slide/_verse-slide.scss
@@ -35,7 +35,6 @@
font-size: 45px;
font-weight: normal;
line-height: 1.15;
- order: 1;
}
.slide-announcement {
@@ -43,6 +42,7 @@
display: flex;
height: 100%;
justify-content: center;
+ white-space: pre-wrap;
.gurmukhi-announcement-slide {
@extend .gurmukhi-vaak-thick;
@@ -59,7 +59,6 @@
.slide-translation {
font-weight: 600;
margin: 10px 0;
- order: 2;
&.custom-english {
display: flex;
@@ -75,19 +74,16 @@
@extend .gurmukhi-vaak;
font-weight: 600;
margin: 10px 0;
- order: 3;
}
.slide-transliteration {
font-weight: 600;
margin: 10px 0;
- order: 4;
}
.slide-next-line {
opacity: 0.5;
margin: 10px 0;
- order: 5;
}
.slide-left-align {
diff --git a/www/viewer.html b/www/viewer.html
index bced2ead5..380fae414 100644
--- a/www/viewer.html
+++ b/www/viewer.html
@@ -14,7 +14,7 @@