fix (templates): ai-search OK. Fix themes.
|
@ -3,7 +3,6 @@
|
|||
"default": {
|
||||
"packages": [
|
||||
"package.json",
|
||||
"packages/default.gbtheme/package.json",
|
||||
"packages/default.gbui/package.json"
|
||||
]
|
||||
}
|
||||
|
|
|
@ -518,7 +518,7 @@ export class GBVMService extends GBService {
|
|||
code = ji.default(code, ' ');
|
||||
|
||||
await fs.writeFile(jsfile, code);
|
||||
GBLogEx.info(min, `Code reloaded: ${path.basename(filename)}.`);
|
||||
|
||||
}
|
||||
|
||||
private async executeTasks(min, tasks) {
|
||||
|
|
|
@ -107,6 +107,8 @@ export class ImageProcessingServices {
|
|||
public async getImageFromPrompt({ pid, prompt }) {
|
||||
const { min, user, params } = await DialogKeywords.getProcessInfo(pid);
|
||||
|
||||
GBLogEx.info(min, `DALL-E: ${prompt}.`);
|
||||
|
||||
const azureOpenAIKey = await min.core.getParam(min.instance, 'Azure Open AI Key', null, true);
|
||||
const azureOpenAIEndpoint = await min.core.getParam(min.instance, 'Azure Open AI Endpoint', null, true);
|
||||
const azureOpenAIVersion = await (min.core as any)['getParam'](min.instance, 'Azure Open AI Version', null, true);
|
||||
|
|
|
@ -490,10 +490,10 @@ export class KeywordsExpressions {
|
|||
];
|
||||
|
||||
keywords[i++] = [
|
||||
/\s*(PLAY)(\s*)(.*)/gim,
|
||||
/\s*(SHOW IMAGE)(\s*)(.*)/gim,
|
||||
($0, $1, $2, $3, $4) => {
|
||||
const params = this.getParams($3, ['file']);
|
||||
return `await sys.play({pid: pid, ${params}})`;
|
||||
return `await sys.showImage({pid: pid, ${params}})`;
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -2861,10 +2861,13 @@ export class SystemKeywords {
|
|||
return item;
|
||||
}
|
||||
|
||||
public async play({ pid, file }) {
|
||||
public async showImage({ pid, file }) {
|
||||
const { min, user, params, step } = await DialogKeywords.getProcessInfo(pid);
|
||||
|
||||
await min.kbService.playUrl(min, min.conversationalService, step, file?.url ? file.url : file);
|
||||
const url = file?.url ? file.url : file;
|
||||
GBLog.info(`PLAY IMAGE: ${url}.`);
|
||||
|
||||
await min.kbService.showImage(min, min.conversationalService, step, url);
|
||||
|
||||
await this.setMemoryContext({ pid, erase: true });
|
||||
}
|
||||
|
|
|
@ -602,7 +602,7 @@ export class GBDeployer implements IGBDeployer {
|
|||
const gbai = GBUtil.getGBAIPath(min.instance.botId);
|
||||
|
||||
if (download) {
|
||||
if (packageType === 'gbkb') {
|
||||
if (packageType === '.gbkb' || packageType === '.gbtheme') {
|
||||
await this.cleanupPackage(min.instance, packageName);
|
||||
}
|
||||
|
||||
|
|
|
@ -298,7 +298,6 @@ export class GBMinService {
|
|||
|
||||
await GBVMService.loadConnections(min);
|
||||
|
||||
|
||||
// Install per bot deployed packages.
|
||||
|
||||
let packagePath = urlJoin(`work`, GBUtil.getGBAIPath(min.botId, 'gbdialog'));
|
||||
|
@ -312,8 +311,8 @@ export class GBMinService {
|
|||
packagePath = urlJoin(`work`, GBUtil.getGBAIPath(min.botId, 'gbtheme'));
|
||||
if (await GBUtil.exists(packagePath)) {
|
||||
await this.deployer['deployPackage2'](min, user, packagePath);
|
||||
}
|
||||
else {
|
||||
await this.watchPackages(min, 'gbtheme');
|
||||
} else {
|
||||
await this.deployer['deployPackage2'](min, user, path.join('work', 'default.gbai', 'default.gbtheme'));
|
||||
}
|
||||
|
||||
|
@ -688,7 +687,7 @@ export class GBMinService {
|
|||
if (instance === null) {
|
||||
instance = await this.core.loadInstanceByActivationCode(botId);
|
||||
}
|
||||
GBLogEx.info(instance.instanceId, `Client requested instance for: ${botId}.`);
|
||||
GBLogEx.info(instance.instanceId, `New user: ${req.body?.user?.id}.`);
|
||||
|
||||
if (instance !== null) {
|
||||
// Gets the webchat token, speech token and theme.
|
||||
|
@ -727,8 +726,8 @@ export class GBMinService {
|
|||
config['domain'] = `http://localhost:${GBConfigService.get('PORT')}/directline/${botId}`;
|
||||
} else {
|
||||
const webchatTokenContainer = await this.getWebchatToken(instance);
|
||||
(config['conversationId'] = webchatTokenContainer.conversationId),
|
||||
(config['webchatToken'] = webchatTokenContainer.token);
|
||||
config['conversationId'] = webchatTokenContainer.conversationId;
|
||||
config['webchatToken'] = webchatTokenContainer.token;
|
||||
}
|
||||
|
||||
res.send(JSON.stringify(config));
|
||||
|
@ -1219,7 +1218,7 @@ export class GBMinService {
|
|||
const context = adapter['createContext'](req);
|
||||
context['_activity'] = context.activity.body;
|
||||
await handler(context);
|
||||
|
||||
|
||||
// Return status
|
||||
res.status(200);
|
||||
|
||||
|
@ -1774,6 +1773,7 @@ export class GBMinService {
|
|||
try {
|
||||
const workFolder = path.join('work', packagePath);
|
||||
await this.deployer.deployPackage2(min, null, workFolder, true);
|
||||
GBLogEx.info(min, `Deployed: ${path.basename(workFolder)}.`);
|
||||
} catch (error) {
|
||||
GBLogEx.error(min, `Error deploying package: ${GBUtil.toYAML(error)}`);
|
||||
} finally {
|
||||
|
|
|
@ -45,7 +45,9 @@ export const getRouter = (
|
|||
};
|
||||
console.log('Created conversation with conversationId: ' + conversationId);
|
||||
|
||||
const activity = createConversationUpdateActivity(serviceUrl, conversationId);
|
||||
const userId = req.body.user.id;
|
||||
|
||||
const activity = createConversationUpdateActivity(serviceUrl, conversationId, userId);
|
||||
fetch(botUrl, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(activity),
|
||||
|
@ -362,7 +364,7 @@ const createMessageActivity = (
|
|||
return obj;
|
||||
};
|
||||
|
||||
const createConversationUpdateActivity = (serviceUrl: string, conversationId: string): IConversationUpdateActivity => {
|
||||
const createConversationUpdateActivity = (serviceUrl: string, conversationId: string, userId: any): IConversationUpdateActivity => {
|
||||
const activity: IConversationUpdateActivity = {
|
||||
type: 'conversationUpdate',
|
||||
channelId: 'api',
|
||||
|
@ -371,7 +373,7 @@ const createConversationUpdateActivity = (serviceUrl: string, conversationId: st
|
|||
id: uuidv4.v4(),
|
||||
membersAdded: [],
|
||||
membersRemoved: [],
|
||||
from: { id: 'bot', name: 'bot' }
|
||||
from: { id: userId, name: 'webbot' }
|
||||
};
|
||||
|
||||
return activity;
|
||||
|
|
|
@ -1,171 +0,0 @@
|
|||
body {
|
||||
background-color: #dadada !important;
|
||||
}
|
||||
|
||||
.loader {
|
||||
opacity: 1 !important;
|
||||
filter: opacity(100%);
|
||||
}
|
||||
|
||||
|
||||
.gb-quality-button-yes {
|
||||
width: 54px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-color: green;
|
||||
color: white;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: 0.9s;
|
||||
transition-delay: 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gb-quality-button-no {
|
||||
width: 54px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-color: red;
|
||||
color: white;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: 0.9s;
|
||||
transition-delay: 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gb-markdown-player-quality {
|
||||
background-color: #f5e4a8;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: -9px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
color: #52514e;
|
||||
border: 1px solid #b2a46e;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-player {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
|
||||
}
|
||||
|
||||
.media-player-container {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.media-player-link {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.gb-bullet-player {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
|
||||
background: white;
|
||||
height: 95%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.gb-bullet-player-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gb-image-player-outter-div {}
|
||||
|
||||
.gb-image-player-img {}
|
||||
|
||||
.gb-bullet-player-outter-div {}
|
||||
|
||||
.gb-video-player-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gb-video-react-player {
|
||||
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.App {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.App .body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex-basis: 12em;
|
||||
/* Default value of the element before distribuing the remaing space */
|
||||
flex-grow: 0;
|
||||
/* Defined the ability to groe */
|
||||
flex-shrink: 0;
|
||||
/* Defines the ability to shrink */
|
||||
max-width: 12em;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media-player-container {
|
||||
overflow: auto;
|
||||
max-height: 90%;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.media-player-scroll {
|
||||
height: 1500px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.media-player-scroll h1 {
|
||||
font-size: 15px;
|
||||
}
|
||||
.media-player-scroll p {
|
||||
font-size: 12px;
|
||||
}
|
||||
.media-player-scroll li {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 451px) {
|
||||
.media-player {
|
||||
position: relative;
|
||||
zoom: 90%;
|
||||
height: 94% !important;
|
||||
width: 95% !important;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
.gb-markdown-player-quality {
|
||||
bottom: -1px;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 451px) {
|
||||
.media-player {
|
||||
position: relative;
|
||||
zoom: 90%;
|
||||
height: 100% !important;
|
||||
width: 95% !important;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
}
|
|
@ -1,47 +0,0 @@
|
|||
.webchat > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.webchat {
|
||||
background-color: white !important;
|
||||
left: 57%;
|
||||
right: 0%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.webchat {
|
||||
display: inline-block !important;
|
||||
width: 96% !important;
|
||||
height: 57% !important;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
left: 50%;
|
||||
top: 41%;
|
||||
|
||||
position: absolute;
|
||||
margin-left: -48%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.webchat {
|
||||
display: inline-block !important;
|
||||
width: 50% !important;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
top: 1% !important;
|
||||
|
||||
height: 96%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-left: -8%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-bottom: 4px solid #4f4f4f;
|
||||
}
|
||||
}
|
|
@ -1,18 +0,0 @@
|
|||
.body .container { padding: 1em;width: 100%;height: 100% }
|
||||
|
||||
.body .ms-Breadcrumb {
|
||||
margin-bottom: 1em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.body .selection {
|
||||
height: calc(100vh - 16.5em);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.body .selection .selection-item {
|
||||
display: flex;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.body .selection .selection-item .name { margin-left: 1em; }
|
|
@ -1,8 +0,0 @@
|
|||
.footer {
|
||||
align-items: center;
|
||||
background-color: #450a64;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-container { color: white; }
|
|
@ -1,31 +0,0 @@
|
|||
@media screen and (max-width: 1000px) {
|
||||
.player {
|
||||
width: 93% !important;
|
||||
height: 26% !important;
|
||||
border: 7px solid #6c6c6c;
|
||||
position: absolute;
|
||||
top: 9%;
|
||||
left: 50%;
|
||||
margin-left: -48%;
|
||||
background: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/general-bot-background.jpg"), WHITE;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.player {
|
||||
display: inline-block;
|
||||
width: 46% !important;
|
||||
height: 81% !important;
|
||||
border: 7px solid #6c6c6c;
|
||||
background: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/general-bot-background.jpg"), WHITE;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
top: 15%;
|
||||
}
|
||||
}
|
|
@ -1,7 +0,0 @@
|
|||
.media {
|
||||
margin-top: 20px;
|
||||
height: 280px !important;
|
||||
width: 200px !important;
|
||||
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.NavBar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.2em 0.5em;
|
||||
border-bottom-width: 1px;
|
||||
color:black;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
.logo {
|
||||
padding-top: 4em;
|
||||
}
|
||||
*/
|
||||
|
||||
.NavBar .searchbox { width: 20em; }
|
||||
|
||||
.NavBar .searchbox .ms-SearchBox {
|
||||
background-color: white;
|
||||
margin-bottom: 0;
|
||||
}
|
|
@ -1,206 +0,0 @@
|
|||
.ms-Nav {
|
||||
background: #222;
|
||||
color: white;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.ms-Nav-link {
|
||||
color: white !important;
|
||||
background-color: #222222 !important;
|
||||
}
|
||||
|
||||
.ms-Nav-link a:active {
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.ms-Nav-compositeLink .ms-Nav-chevronButton.ms-Nav-chevronButton--link {
|
||||
background: #222222 !important;
|
||||
}
|
||||
|
||||
.ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton,
|
||||
.ms-Nav-compositeLink.is-selected a {
|
||||
padding-left: 70px !important;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton:after,
|
||||
html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 419px) {
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
background-color: green !important;
|
||||
height: 8%;
|
||||
width: 100% !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.titleSideBarMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconMenu {
|
||||
color: #d1d1d1;
|
||||
font-size: 13px;
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.iconMenu:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.IconsMenu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -23px;
|
||||
height: 22px;
|
||||
width: 300px;
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.iconText {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 520px) and (max-width:1000px) {
|
||||
.titleSideBarMenu {
|
||||
display: none;
|
||||
}
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
background-color: green !important;
|
||||
height: 8%;
|
||||
width: 100% !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-image: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/bot-logo.png");
|
||||
background-position: 2px 2px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.IconsMenu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -11px;
|
||||
height: 22px;
|
||||
width: 416px;
|
||||
left: 100px !important;
|
||||
margin-left: 0px !important;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
.iconMenu {
|
||||
color: #d1d1d1;
|
||||
}
|
||||
.iconMenu:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 420px) and (max-width: 1000px) {
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
background-color: green !important;
|
||||
height: 8%;
|
||||
width: 100% !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.titleSideBarMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconMenu {
|
||||
color: #d1d1d1;
|
||||
font-size: 14px;
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.iconMenu:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.IconsMenu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -11px;
|
||||
height: 22px;
|
||||
width: 416px;
|
||||
left: 50%;
|
||||
margin-left: -208px;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.iconText {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
background-color: green !important;
|
||||
height: 13%;
|
||||
position: absolute;
|
||||
top: 1%;
|
||||
left: 1%;
|
||||
width: 46% !important;
|
||||
border-right: 14px solid #19baee !important;
|
||||
}
|
||||
|
||||
.titleSideBarMenu {
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.iconMenu {
|
||||
color: #d1d1d1;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.iconMenu:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.IconsMenu {
|
||||
width: 520px;
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -249px;
|
||||
bottom: 10px;
|
||||
height: 22px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.iconText {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 684px) {
|
||||
.titleSideBarMenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.iconText:hover {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
|
@ -1,41 +0,0 @@
|
|||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** Main Layout rules */
|
||||
|
||||
.App { min-height: 100vh; }
|
||||
|
||||
.App {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.App .body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.body .sidebar { order: -1; }
|
||||
|
||||
.body .content { flex: 1; }
|
||||
|
||||
.body .sidebar {
|
||||
flex: 0 0 12em;
|
||||
max-width: 12em;
|
||||
}
|
||||
|
||||
.App .header { height: 4em; }
|
||||
|
||||
.App .footer { height: 4em; }
|
||||
|
||||
/** Text */
|
||||
|
||||
.text-red { color: red; }
|
|
@ -1,50 +0,0 @@
|
|||
{
|
||||
"accent": "Red",
|
||||
"avatarSize": 40,
|
||||
|
||||
"backgroundColor": "White",
|
||||
|
||||
"bubbleBackground": "White",
|
||||
"bubbleBorder": "solid 1px #E6E6E6",
|
||||
"bubbleBorderRadius": 2,
|
||||
"bubbleFromUserBackground": "White",
|
||||
"bubbleFromUserBorder": "solid 1px #E6E6E6",
|
||||
"bubbleFromUserBorderRadius": 2,
|
||||
"bubbleFromUserTextColor": "Black",
|
||||
"bubbleImageHeight": 240,
|
||||
"bubbleMaxWidth": 480,
|
||||
"bubbleMinHeight": 40,
|
||||
"bubbleMinWidth": 250,
|
||||
"bubbleTextColor": "Black",
|
||||
|
||||
"hideSendBox": false,
|
||||
|
||||
"microphoneButtonColorOnDictate": "#F33",
|
||||
|
||||
"paddingRegular": 10,
|
||||
"paddingWide": 20,
|
||||
|
||||
"sendBoxButtonColor": "#999",
|
||||
"sendBoxButtonColorOnDisabled": "#CCC",
|
||||
"sendBoxButtonColorOnFocus": "#333",
|
||||
"sendBoxButtonColorOnHover": "#333",
|
||||
|
||||
"sendBoxHeight": 40,
|
||||
|
||||
"showSpokenText": false,
|
||||
|
||||
"suggestedActionBackground": "White",
|
||||
"suggestedActionBorder": "solid 2px",
|
||||
"suggestedActionBorderRadius": 0,
|
||||
"suggestedActionDisabledBackground": "White",
|
||||
"suggestedActionDisabledBorder": "solid 2px #E6E6E6",
|
||||
"suggestedActionHeight": 40,
|
||||
"transcriptOverlayButtonBackground": "rgba(0, 0, 0, .6)",
|
||||
"transcriptOverlayButtonBackgroundOnFocus": "rgba(0, 0, 0, .8)",
|
||||
"transcriptOverlayButtonBackgroundOnHover": "rgba(0, 0, 0, .8)",
|
||||
"transcriptOverlayButtonColor": "White",
|
||||
"transcriptOverlayButtonColorOnFocus": "White",
|
||||
"transcriptOverlayButtonColorOnHover": "White",
|
||||
|
||||
"videoHeight": 270
|
||||
}
|
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 70 KiB |
Before Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 79 KiB |
Before Width: | Height: | Size: 958 B |
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 6.5 KiB |
Before Width: | Height: | Size: 247 KiB |
Before Width: | Height: | Size: 64 KiB |
Before Width: | Height: | Size: 79 KiB |
Before Width: | Height: | Size: 1.7 KiB |
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"version": "1.0.0",
|
||||
"description": "Default General Bots theme.",
|
||||
"authors": "pragmatismo.io",
|
||||
"license": "AGPL-3.0"
|
||||
|
||||
}
|
|
@ -31,32 +31,15 @@
|
|||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html style="width: 100%; height: 100%" class="{themeColor}">
|
||||
<html style="width: 100%; height: 100%" class="{themeColor}">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="stylesheet" type="text/css" href="./css/pragmatismo.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/themes/{theme}/css/ChatPane.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/themes/{theme}/css/Content.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/themes/{theme}/css/Footer.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/themes/{theme}/css/GifPlayer.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/themes/{theme}/css/MediaPlayer.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/themes/{theme}/css/NavBar.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/themes/{theme}/css/App.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/themes/{theme}/css/SideBarMenu.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/themes/{theme}/css/colors.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/themes/{theme}/css/default.css" />
|
||||
<script src="./js/webchat.js"></script>
|
||||
<title>{title} - General Bots Community Edition</title>
|
||||
|
||||
<style>
|
||||
.loader {
|
||||
opacity: 0 !important;
|
||||
/* filter: opacity(0); Problem in recent Chrome 68+ */
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>{title} | General Bots</title>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setTimeout(() => {
|
||||
|
|
|
@ -57,6 +57,15 @@ class GBUIApp extends React.Component {
|
|||
window.user = this.getUser();
|
||||
}
|
||||
|
||||
generateRandomId(length) {
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * characters.length));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
sendToken(token) {
|
||||
setTimeout(() => {
|
||||
window.line
|
||||
|
@ -87,7 +96,7 @@ class GBUIApp extends React.Component {
|
|||
}
|
||||
|
||||
getUser() {
|
||||
return { id: 'web@gb', name: 'You' };
|
||||
return { id: window.userId, name: 'You' };
|
||||
}
|
||||
|
||||
postMessage(value) {
|
||||
|
@ -167,6 +176,9 @@ class GBUIApp extends React.Component {
|
|||
setupBotConnection(instanceClient) {
|
||||
let _this_ = this;
|
||||
window['botchatDebug'] = true;
|
||||
window.userId = this.generateRandomId(16);
|
||||
|
||||
_this_.setState({ token: instanceClient.webchatToken });
|
||||
|
||||
const line = instanceClient.webchatToken
|
||||
? new DirectLine({
|
||||
|
@ -174,16 +186,18 @@ class GBUIApp extends React.Component {
|
|||
})
|
||||
: new DirectLine({
|
||||
domain: instanceClient.domain,
|
||||
userId:window.userId,
|
||||
userIdOnStartConversation: window.userId,
|
||||
secret: null,
|
||||
token: null,
|
||||
webSocket: false // defaults to true
|
||||
});
|
||||
line.setUserId(window.userId);
|
||||
|
||||
_this_.setState({ line: line });
|
||||
|
||||
line.connectionStatus$.subscribe(connectionStatus => {
|
||||
if (connectionStatus === ConnectionStatus.Online) {
|
||||
line.setUserId = null;
|
||||
_this_.setState({ instanceClient: instanceClient });
|
||||
window['botConnection'] = line;
|
||||
}
|
||||
|
@ -314,29 +328,29 @@ class GBUIApp extends React.Component {
|
|||
let gbCss = <div />;
|
||||
let seo = <div />;
|
||||
let sideBar = <div />;
|
||||
|
||||
|
||||
if (this.state.line) {
|
||||
|
||||
chat = (
|
||||
<ReactWebChat
|
||||
ref={chat => {
|
||||
this.chat = chat;
|
||||
}}
|
||||
userID= {window.userId}
|
||||
locale={'en-us'}
|
||||
directLine={this.state.line}
|
||||
/>
|
||||
);
|
||||
|
||||
if (this.state.instanceClient) {
|
||||
let color1 = this.state.instanceClient.color1;
|
||||
gbCss = <GBCss instance={this.state.instanceClient} />;
|
||||
seo = <SEO instance={this.state.instanceClient} />;
|
||||
const token = this.state.instanceClient.speechToken;
|
||||
|
||||
|
||||
document.body.style.setProperty('background-color', this.state.instanceClient.color2, 'important');
|
||||
|
||||
chat = (
|
||||
<ReactWebChat
|
||||
ref={chat => {
|
||||
this.chat = chat;
|
||||
}}
|
||||
locale={'en-us'}
|
||||
directLine={this.state.line}
|
||||
webSpeechPonyfillFactory={window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
|
||||
credentials: { authorizationToken: token, region: 'westus' }
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
sideBar = (
|
||||
<div
|
||||
className="sidebar"
|
||||
|
|
|
@ -37,14 +37,8 @@ class GBCss extends React.Component {
|
|||
if (this.props.instance) {
|
||||
css = (
|
||||
<Helmet>
|
||||
<link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/ChatPane.css"} />
|
||||
<link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/Content.css"} />
|
||||
<link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/Footer.css"} />
|
||||
<link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/GifPlayer.css"} />
|
||||
<link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/MediaPlayer.css"} />
|
||||
<link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/NavBar.css"} />
|
||||
<link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/App.css"} />
|
||||
<link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/SidebarMenu.css" } />
|
||||
<link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/colors.css"} />
|
||||
<link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/default.css" } />
|
||||
</Helmet>
|
||||
);
|
||||
} else {
|
||||
|
|
|
@ -28,23 +28,21 @@
|
|||
| |
|
||||
\*****************************************************************************/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import React, { Component } from 'react';
|
||||
|
||||
class GBImagePlayer extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
};
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
play(url) {
|
||||
this.playerImage.src = url;
|
||||
}
|
||||
|
||||
stop(){
|
||||
this.playerImage.src = "";
|
||||
stop() {
|
||||
this.playerImage.src = '';
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
|
|
@ -1382,7 +1382,22 @@ export class KBService implements IGBKBService {
|
|||
) {
|
||||
conversationalService.sendAudio(min, step, answer.content);
|
||||
}
|
||||
|
||||
public async showImage(
|
||||
min,
|
||||
conversationalService: IGBConversationalService,
|
||||
step: GBDialogStep,
|
||||
url: string,
|
||||
channel: string
|
||||
) {
|
||||
if (channel === 'whatsapp') {
|
||||
await min.conversationalService.sendFile(min, step, null, url, '');
|
||||
} else {
|
||||
await conversationalService.sendEvent(min, step, 'play', {
|
||||
playerType: 'image',
|
||||
data: url
|
||||
});
|
||||
}
|
||||
}
|
||||
public async playUrl(
|
||||
min,
|
||||
conversationalService: IGBConversationalService,
|
||||
|
|
33
src/app.ts
|
@ -40,7 +40,7 @@ import bodyParser from 'body-parser';
|
|||
import { GBLog, GBMinInstance, IGBCoreService, IGBInstance } from 'botlib';
|
||||
import child_process from 'child_process';
|
||||
import express from 'express';
|
||||
import fs from 'fs/promises';
|
||||
import fs from 'fs/promises';
|
||||
import http from 'http';
|
||||
import httpProxy from 'http-proxy';
|
||||
import https from 'https';
|
||||
|
@ -103,7 +103,7 @@ export class GBServer {
|
|||
GBServer.globals.debuggers = [];
|
||||
GBServer.globals.users = [];
|
||||
GBServer.globals.indexSemaphore = new Mutex();
|
||||
|
||||
|
||||
server.use(bodyParser.json());
|
||||
server.use(bodyParser.json({ limit: '1mb' }));
|
||||
server.use(bodyParser.urlencoded({ limit: '1mb', extended: true }));
|
||||
|
@ -114,6 +114,15 @@ export class GBServer {
|
|||
next();
|
||||
});
|
||||
|
||||
process.on('SIGINT', () => {
|
||||
GBLogEx.info(0, 'SIGINT signal received.');
|
||||
});
|
||||
|
||||
process.on('SIGTSTP', () => {
|
||||
GBLogEx.info(0, 'SIGTSTP signal received.');
|
||||
shutdown();
|
||||
});
|
||||
|
||||
process.on('SIGTERM', () => {
|
||||
GBLogEx.info(0, 'SIGTERM signal received.');
|
||||
});
|
||||
|
@ -140,7 +149,7 @@ export class GBServer {
|
|||
|
||||
process.env.PWD = process.cwd();
|
||||
const workDir = path.join(process.env.PWD, 'work');
|
||||
if (!await GBUtil.exists(workDir)) {
|
||||
if (!(await GBUtil.exists(workDir))) {
|
||||
mkdirp.sync(workDir);
|
||||
}
|
||||
|
||||
|
@ -295,7 +304,7 @@ export class GBServer {
|
|||
}
|
||||
} catch (error) {
|
||||
GBLog.error(`STOP: ${GBUtil.toYAML(error.message)}`);
|
||||
process.exit(1);
|
||||
shutdown();
|
||||
}
|
||||
})();
|
||||
};
|
||||
|
@ -315,7 +324,7 @@ export class GBServer {
|
|||
const options1 = {
|
||||
passphrase: process.env.CERTIFICATE_PASSPHRASE,
|
||||
pfx: await fs.readFile(process.env.CERTIFICATE_PFX),
|
||||
ca: await GBUtil.exists(process.env.CERTIFICATE_CA) ? await fs.readFile(process.env.CERTIFICATE_CA) : null
|
||||
ca: (await GBUtil.exists(process.env.CERTIFICATE_CA)) ? await fs.readFile(process.env.CERTIFICATE_CA) : null
|
||||
};
|
||||
|
||||
const httpsServer = https.createServer(options1, server).listen(port, mainCallback);
|
||||
|
@ -362,3 +371,17 @@ export class GBServer {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
function shutdown() {
|
||||
GBServer.globals.server.close(() => {
|
||||
GBLogEx.info(0, 'General Bots server closed.');
|
||||
|
||||
GBServer.globals.apiServer.close(() => {
|
||||
GBLogEx.info(0, 'General Bots API server closed.');
|
||||
process.exit(0);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
image = GET IMAGE "AI Search BOT and write General Bots."
|
||||
|
||||
PLAY image
|
||||
SHOW IMAGE image
|
||||
|
||||
BEGIN SYSTEM PROMPT
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
name,value
|
||||
Answer Mode,document-ref
|
||||
Theme Color,blue
|
||||
Start Dialog, start
|
|
|
@ -1,750 +0,0 @@
|
|||
/* Base Styles */
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: var(--color-text);
|
||||
background: linear-gradient(135deg, var(--color-background-light), var(--color-background-dark));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Main Sections */
|
||||
|
||||
/* Sidebar */
|
||||
.ms-Nav {
|
||||
background: var(--color-sidebar-background);
|
||||
color: var(--color-text);
|
||||
margin-top: 2rem;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 8px rgba(var(--color-shadow), 0.2);
|
||||
}
|
||||
|
||||
.ms-Nav-link {
|
||||
color: var(--color-text) !important;
|
||||
background-color: var(--color-link-background) !important;
|
||||
border-radius: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.75rem;
|
||||
transition: background-color 0.3s, border-right 0.3s;
|
||||
}
|
||||
|
||||
.ms-Nav-link a:active {
|
||||
border-right: 2px solid var(--color-text);
|
||||
}
|
||||
|
||||
.ms-Nav-compositeLink .ms-Nav-chevronButton.ms-Nav-chevronButton--link {
|
||||
background: var(--color-link-background) !important;
|
||||
}
|
||||
|
||||
.ms-Nav-compositeLink.is-selected {
|
||||
padding-left: 80px !important;
|
||||
}
|
||||
|
||||
.ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton:after,
|
||||
.ms-Nav-compositeLink.is-selected a:after {
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
box-shadow: 0 4px 15px rgba(var(--color-shadow), 0.3);
|
||||
border-radius: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 419px),
|
||||
screen and (min-width: 420px) and (max-width: 1000px) {
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
height: 7%;
|
||||
width: 95% !important;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 14px;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
|
||||
.titleSideBarMenu {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.titleSideBarMenu img {
|
||||
width: 32px;
|
||||
margin-left: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.iconMenu {
|
||||
font-size: 9pt;
|
||||
display: inline;
|
||||
margin-right: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.iconMenu:hover {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.iconText {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 419px) {
|
||||
.IconsMenu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -23px;
|
||||
height: 30px;
|
||||
width: 320px;
|
||||
left: 50%;
|
||||
margin-left: -160px;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 420px) and (max-width: 1000px) {
|
||||
.IconsMenu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
height: 30px;
|
||||
width: 450px;
|
||||
left: 80px !important;
|
||||
margin-left: 0px !important;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
height: 18%;
|
||||
width: 45% !important;
|
||||
background-color: var(--color-sidebar-background) !important;
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
left: 3%;
|
||||
border-right: 14px solid var(--color-border) !important;
|
||||
}
|
||||
|
||||
.titleSideBarMenu {
|
||||
text-align: center;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.iconMenu {
|
||||
font-size: 09pt;
|
||||
text-align: center;
|
||||
margin: 10px 6px;
|
||||
padding-left: 48px;
|
||||
}
|
||||
|
||||
.IconsMenu {
|
||||
width: 560px;
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -260px;
|
||||
bottom: 1rem;
|
||||
top: 60px;
|
||||
height: 28px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 12pt;
|
||||
}
|
||||
}
|
||||
|
||||
/* Player */
|
||||
.player {
|
||||
background-color: var(--color-player-background);
|
||||
box-shadow: 0 4px 15px rgba(var(--color-shadow), 0.3);
|
||||
border-radius: 0.75rem;
|
||||
border: 7px solid var(--color-border);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.player {
|
||||
width: 94% !important;
|
||||
height: 44% !important;
|
||||
border: 5px solid var(--color-border);
|
||||
position: absolute;
|
||||
top: 11%;
|
||||
left: 50%;
|
||||
margin-left: -48%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.player {
|
||||
width: 46% !important;
|
||||
height: 73% !important;
|
||||
border: 8px solid var(--color-light-border);
|
||||
position: absolute;
|
||||
left: 3%;
|
||||
top: 24%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Webchat */
|
||||
.webchat {
|
||||
background-color: var(--color-webchat-background) !important;
|
||||
box-shadow: 0 8px 20px rgba(var(--color-shadow), 0.1);
|
||||
border-radius: 1rem;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.webchat > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.webchat {
|
||||
width: 96% !important;
|
||||
height: 37% !important;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
margin-left: -48%;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.webchat {
|
||||
width: 48% !important;
|
||||
height: 94%;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 19px;
|
||||
bottom: 0;
|
||||
border-bottom: 4px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
/* General Styles */
|
||||
.gb-quality-button-yes {
|
||||
width: 54px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--color-yes-button-background);
|
||||
color: var(--color-white);
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.9s, transform 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gb-quality-button-yes:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.gb-quality-button-no {
|
||||
width: 54px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--color-no-button-background);
|
||||
color: var(--color-white);
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.9s, transform 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gb-quality-button-no:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.gb-markdown-player-quality {
|
||||
background-color: var(--color-markdown-background);
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: -9px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
color: var(--color-markdown-text);
|
||||
border: 1px solid var(--color-markdown-border);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-player-container {
|
||||
overflow: auto;
|
||||
max-height: 90%;
|
||||
background: var(--color-media-background);
|
||||
}
|
||||
|
||||
.media-player-scroll {
|
||||
height: 1500px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.media-player-scroll h1 {
|
||||
font-size: 15px;
|
||||
}
|
||||
.media-player-scroll p {
|
||||
font-size: 12px;
|
||||
}
|
||||
.media-player-scroll li {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 451px) {
|
||||
.media-player {
|
||||
position: relative;
|
||||
zoom: 90%;
|
||||
height: 94% !important;
|
||||
width: 95% !important;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
.gb-markdown-player-quality {
|
||||
bottom: -1px;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 451px) {
|
||||
.media-player {
|
||||
position: relative;
|
||||
zoom: 90%;
|
||||
height: 100% !important;
|
||||
width: 95% !important;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Grey Theme */
|
||||
|
||||
.theme-grey {
|
||||
--color-dark: #212121;
|
||||
--color-dark-gray: #424242;
|
||||
--color-gray: #616161;
|
||||
--color-light-gray: #E0E0E0;
|
||||
--color-white: #F5F5F5;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #757575;
|
||||
--color-background-light:#212121;
|
||||
--color-background-dark: #F5F5F5;
|
||||
--color-sidebar-background: #424242;
|
||||
--color-link-background: #212121;
|
||||
--color-player-background: #E0E0E0;
|
||||
--color-webchat-background: #F5F5F5;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #212121;
|
||||
--color-markdown-border: #757575;
|
||||
--color-media-background: #F5F5F5;
|
||||
}
|
||||
|
||||
.theme-light{
|
||||
--color-text: #333;
|
||||
--color-background-light: #f4f4f9;
|
||||
--color-background-dark: #e0e0e0;
|
||||
--color-sidebar-background: lightgrey;
|
||||
--color-link-background: #f0f0f0;
|
||||
--color-player-background: #fafafa;
|
||||
--color-webchat-background: #ffffff;
|
||||
--color-shadow: 0, 0, 0;
|
||||
--color-border: #cccccc;
|
||||
--color-light-border: #ddd;
|
||||
--color-yes-button-background: #28a745;
|
||||
--color-no-button-background: #dc3545;
|
||||
--color-white: #fff;
|
||||
--color-markdown-background: #f9f9f9;
|
||||
--color-markdown-text: #333;
|
||||
--color-markdown-border: #ccc;
|
||||
--color-media-background: #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
/* Red Theme */
|
||||
|
||||
.theme-red{
|
||||
--color-dark: #D32F2F;
|
||||
--color-dark-gray: #C62828;
|
||||
--color-gray: #B71C1C;
|
||||
--color-light-gray: #FFCDD2;
|
||||
--color-white: #FAFAFA;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #D32F2F;
|
||||
--color-background-light: #FFEBEE;
|
||||
--color-background-dark: #D32F2F;
|
||||
--color-sidebar-background: #C62828;
|
||||
--color-link-background: #B71C1C;
|
||||
--color-player-background: #F8BBD0;
|
||||
--color-webchat-background: #FCE4EC;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #B71C1C;
|
||||
--color-markdown-border: #D32F2F;
|
||||
--color-media-background: #FFEBEE;
|
||||
}
|
||||
|
||||
/* Blue Theme */
|
||||
.theme-blue {
|
||||
|
||||
--color-dark: #0D47A1;
|
||||
--color-dark-gray: #1565C0;
|
||||
--color-gray: #1976D2;
|
||||
--color-light-gray: #BBDEFB;
|
||||
--color-white: #E3F2FD;
|
||||
--color-green: #2E7D32;
|
||||
--color-red: #C62828;
|
||||
--color-yellow: #F9A825;
|
||||
--color-text: white;
|
||||
--color-border: #1E88E5;
|
||||
--color-background-light: #E3F2FD;
|
||||
--color-background-dark: #1976D2;
|
||||
--color-sidebar-background: #1565C0;
|
||||
--color-link-background: #0D47A1;
|
||||
--color-player-background: #BBDEFB;
|
||||
--color-webchat-background: #E3F2FD;
|
||||
--color-yes-button-background: #2E7D32;
|
||||
--color-no-button-background: #C62828;
|
||||
--color-markdown-background: #F9A825;
|
||||
--color-markdown-text: #0D47A1;
|
||||
--color-markdown-border: #1E88E5;
|
||||
--color-media-background: #E3F2FD;
|
||||
}
|
||||
|
||||
/* Green Theme */
|
||||
.theme-green {
|
||||
|
||||
--color-dark: #1B5E20;
|
||||
--color-dark-gray: #2E7D32;
|
||||
--color-gray: #388E3C;
|
||||
--color-light-gray: #C8E6C9;
|
||||
--color-white: #F1F8E9;
|
||||
--color-green: #1B5E20;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #4CAF50;
|
||||
--color-background-light: #F1F8E9;
|
||||
--color-background-dark: #388E3C;
|
||||
--color-sidebar-background: #2E7D32;
|
||||
--color-link-background: #1B5E20;
|
||||
--color-player-background: #C8E6C9;
|
||||
--color-webchat-background: #F1F8E9;
|
||||
--color-yes-button-background: #4CAF50;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #1B5E20;
|
||||
--color-markdown-border: #4CAF50;
|
||||
--color-media-background: #F1F8E9;
|
||||
}
|
||||
|
||||
/* Yellow Theme */
|
||||
.theme-yellow {
|
||||
|
||||
--color-dark: #FBC02D;
|
||||
--color-dark-gray: #F9A825;
|
||||
--color-gray: #F57F17;
|
||||
--color-light-gray: #FFF9C4;
|
||||
--color-white: #FFFDE7;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #FBC02D;
|
||||
--color-background-light: #FFF9C4;
|
||||
--color-background-dark: #F57F17;
|
||||
--color-sidebar-background: #F9A825;
|
||||
--color-link-background: #FBC02D;
|
||||
--color-player-background: #FFFDE7;
|
||||
--color-webchat-background: #FFF9C4;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #F9A825;
|
||||
--color-markdown-text: #F57F17;
|
||||
--color-markdown-border: #FBC02D;
|
||||
--color-media-background: #FFF9C4;
|
||||
}
|
||||
|
||||
/* Purple Theme */
|
||||
.theme-purple {
|
||||
--color-dark: #4A148C;
|
||||
--color-dark-gray: #6A1B9A;
|
||||
--color-gray: #7B1FA2;
|
||||
--color-light-gray: #E1BEE7;
|
||||
--color-white: #F3E5F5;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #6A1B9A;
|
||||
--color-background-light: #F3E5F5;
|
||||
--color-background-dark: #7B1FA2;
|
||||
--color-sidebar-background: #6A1B9A;
|
||||
--color-link-background: #4A148C;
|
||||
--color-player-background: #E1BEE7;
|
||||
--color-webchat-background: #F3E5F5;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #7B1FA2;
|
||||
--color-markdown-border: #6A1B9A;
|
||||
--color-media-background: #E1BEE7;
|
||||
}
|
||||
|
||||
/* Orange Theme */
|
||||
.theme-orange {
|
||||
--color-dark: #E65100;
|
||||
--color-dark-gray: #EF6C00;
|
||||
--color-gray: #F57C00;
|
||||
--color-light-gray: #FFCC80;
|
||||
--color-white: #FFF3E0;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #FF9800;
|
||||
--color-background-light: #FFF3E0;
|
||||
--color-background-dark: #F57C00;
|
||||
--color-sidebar-background: #EF6C00;
|
||||
--color-link-background: #E65100;
|
||||
--color-player-background: #FFCC80;
|
||||
--color-webchat-background: #FFF3E0;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #E65100;
|
||||
--color-markdown-border: #FF9800;
|
||||
--color-media-background: #FFF3E0;
|
||||
}
|
||||
|
||||
/* Brown Theme */
|
||||
.theme-brown {
|
||||
--color-dark: #3E2723;
|
||||
--color-dark-gray: #4E342E;
|
||||
--color-gray: #5D4037;
|
||||
--color-light-gray: #D7CCC8;
|
||||
--color-white: #EFEBE9;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #6D4C41;
|
||||
--color-background-light: #EFEBE9;
|
||||
--color-background-dark: #5D4037;
|
||||
--color-sidebar-background: #4E342E;
|
||||
--color-link-background: #3E2723;
|
||||
--color-player-background: #D7CCC8;
|
||||
--color-webchat-background: #EFEBE9;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #5D4037;
|
||||
--color-markdown-border: #6D4C41;
|
||||
--color-media-background: #EFEBE9;
|
||||
}
|
||||
|
||||
/* Pink Theme */
|
||||
.theme-pink {
|
||||
--color-dark: #880E4F;
|
||||
--color-dark-gray: #AD1457;
|
||||
--color-gray: #C2185B;
|
||||
--color-light-gray: #F8BBD0;
|
||||
--color-white: #FCE4EC;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #C2185B;
|
||||
--color-background-light: #FCE4EC;
|
||||
--color-background-dark: #C2185B;
|
||||
--color-sidebar-background: #AD1457;
|
||||
--color-link-background: #880E4F;
|
||||
--color-player-background: #F8BBD0;
|
||||
--color-webchat-background: #FCE4EC;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #880E4F;
|
||||
--color-markdown-border: #C2185B;
|
||||
--color-media-background: #FCE4EC;
|
||||
}
|
||||
|
||||
/* Cyan Theme */
|
||||
.theme-cyan {
|
||||
--color-dark: #006064;
|
||||
--color-dark-gray: #00838F;
|
||||
--color-gray: #0097A7;
|
||||
--color-light-gray: #B2EBF2;
|
||||
--color-white: #E0F7FA;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #00ACC1;
|
||||
--color-background-light: #E0F7FA;
|
||||
--color-background-dark: #0097A7;
|
||||
--color-sidebar-background: #00838F;
|
||||
--color-link-background: #006064;
|
||||
--color-player-background: #B2EBF2;
|
||||
--color-webchat-background: #E0F7FA;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #006064;
|
||||
--color-markdown-border: #00ACC1;
|
||||
--color-media-background: #E0F7FA;
|
||||
}
|
||||
|
||||
/* Lime Theme */
|
||||
.theme-lime {
|
||||
--color-dark: #827717;
|
||||
--color-dark-gray: #9E9D24;
|
||||
--color-gray: #AFB42B;
|
||||
--color-light-gray: #F0F4C3;
|
||||
--color-white: #F9FBE7;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #CDDC39;
|
||||
--color-background-light: #F9FBE7;
|
||||
--color-background-dark: #AFB42B;
|
||||
--color-sidebar-background: #9E9D24;
|
||||
--color-link-background: #827717;
|
||||
--color-player-background: #F0F4C3;
|
||||
--color-webchat-background: #F9FBE7;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #827717;
|
||||
--color-markdown-border: #CDDC39;
|
||||
--color-media-background: #F9FBE7;
|
||||
}
|
||||
|
||||
/* Indigo Theme */
|
||||
.theme-indigo {
|
||||
--color-dark: #1A237E;
|
||||
--color-dark-gray: #283593;
|
||||
--color-gray: #303F9F;
|
||||
--color-light-gray: #C5CAE9;
|
||||
--color-white: #E8EAF6;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #3F51B5;
|
||||
--color-background-light: #E8EAF6;
|
||||
--color-background-dark: #303F9F;
|
||||
--color-sidebar-background: #283593;
|
||||
--color-link-background: #1A237E;
|
||||
--color-player-background: #C5CAE9;
|
||||
--color-webchat-background: #E8EAF6;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #1A237E;
|
||||
--color-markdown-border: #3F51B5;
|
||||
--color-media-background: #E8EAF6;
|
||||
}
|
||||
|
||||
/* Teal Theme */
|
||||
.theme-teal {
|
||||
--color-dark: #004D40;
|
||||
--color-dark-gray: #00695C;
|
||||
--color-gray: #00796B;
|
||||
--color-light-gray: #B2DFDB;
|
||||
--color-white: #E0F2F1;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #009688;
|
||||
--color-background-light: #E0F2F1;
|
||||
--color-background-dark: #00796B;
|
||||
--color-sidebar-background: #00695C;
|
||||
--color-link-background: #004D40;
|
||||
--color-player-background: #B2DFDB;
|
||||
--color-webchat-background: #E0F2F1;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #004D40;
|
||||
--color-markdown-border: #009688;
|
||||
--color-media-background: #E0F2F1;
|
||||
}
|
||||
|
||||
/* Violet Theme */
|
||||
.theme-violet {
|
||||
--color-dark: #4A148C;
|
||||
--color-dark-gray: #6A1B9A;
|
||||
--color-gray: #7B1FA2;
|
||||
--color-light-gray: #E1BEE7;
|
||||
--color-white: #F3E5F5;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #6A1B9A;
|
||||
--color-background-light: #F3E5F5;
|
||||
--color-background-dark: #7B1FA2;
|
||||
--color-sidebar-background: #6A1B9A;
|
||||
--color-link-background: #4A148C;
|
||||
--color-player-background: #E1BEE7;
|
||||
--color-webchat-background: #F3E5F5;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #7B1FA2;
|
||||
--color-markdown-border: #6A1B9A;
|
||||
--color-media-background: #F3E5F5;
|
||||
}
|
||||
|
||||
/* Black & White Theme */
|
||||
.theme-black-white {
|
||||
|
||||
--color-dark: #000000;
|
||||
--color-dark-gray: #333333;
|
||||
--color-gray: #555555;
|
||||
--color-light-gray: #DDDDDD;
|
||||
--color-white: #FFFFFF;
|
||||
--color-green: #00FF00;
|
||||
--color-red: #FF0000;
|
||||
--color-yellow: #FFFF00;
|
||||
--color-text: white;
|
||||
--color-border: #555555;
|
||||
--color-background-light: #FFFFFF;
|
||||
--color-background-dark: #000000;
|
||||
--color-sidebar-background: #333333;
|
||||
--color-link-background: #000000;
|
||||
--color-player-background: #DDDDDD;
|
||||
--color-webchat-background: #FFFFFF;
|
||||
--color-yes-button-background: #00FF00;
|
||||
--color-no-button-background: #FF0000;
|
||||
--color-markdown-background: #FFFF00;
|
||||
--color-markdown-text: #000000;
|
||||
--color-markdown-border: #555555;
|
||||
--color-media-background: #FFFFFF;
|
||||
}
|
|
@ -1,47 +0,0 @@
|
|||
.webchat > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.webchat {
|
||||
background-color: white !important;
|
||||
left: 57%;
|
||||
right: 0%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.webchat {
|
||||
display: inline-block !important;
|
||||
width: 96% !important;
|
||||
height: 57% !important;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
left: 50%;
|
||||
top: 41%;
|
||||
|
||||
position: absolute;
|
||||
margin-left: -48%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.webchat {
|
||||
display: inline-block !important;
|
||||
width: 50% !important;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
top: 1% !important;
|
||||
|
||||
height: 96%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-left: -8%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-bottom: 4px solid #4f4f4f;
|
||||
}
|
||||
}
|
|
@ -1,18 +0,0 @@
|
|||
.body .container { padding: 1em;width: 100%;height: 100% }
|
||||
|
||||
.body .ms-Breadcrumb {
|
||||
margin-bottom: 1em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.body .selection {
|
||||
height: calc(100vh - 16.5em);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.body .selection .selection-item {
|
||||
display: flex;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.body .selection .selection-item .name { margin-left: 1em; }
|
|
@ -1,8 +0,0 @@
|
|||
.footer {
|
||||
align-items: center;
|
||||
background-color: #450a64;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-container { color: white; }
|
|
@ -1,31 +0,0 @@
|
|||
@media screen and (max-width: 1000px) {
|
||||
.player {
|
||||
width: 93% !important;
|
||||
height: 26% !important;
|
||||
border: 7px solid #6c6c6c;
|
||||
position: absolute;
|
||||
top: 9%;
|
||||
left: 50%;
|
||||
margin-left: -48%;
|
||||
background: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/general-bot-background.jpg"), WHITE;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.player {
|
||||
display: inline-block;
|
||||
width: 46% !important;
|
||||
height: 81% !important;
|
||||
border: 7px solid #6c6c6c;
|
||||
background: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/general-bot-background.jpg"), WHITE;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
top: 15%;
|
||||
}
|
||||
}
|
|
@ -1,7 +0,0 @@
|
|||
.media {
|
||||
margin-top: 20px;
|
||||
height: 280px !important;
|
||||
width: 200px !important;
|
||||
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.NavBar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.2em 0.5em;
|
||||
border-bottom-width: 1px;
|
||||
color:black;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
.logo {
|
||||
padding-top: 4em;
|
||||
}
|
||||
*/
|
||||
|
||||
.NavBar .searchbox { width: 20em; }
|
||||
|
||||
.NavBar .searchbox .ms-SearchBox {
|
||||
background-color: white;
|
||||
margin-bottom: 0;
|
||||
}
|
|
@ -1,206 +0,0 @@
|
|||
.ms-Nav {
|
||||
background: #222;
|
||||
color: white;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.ms-Nav-link {
|
||||
color: white !important;
|
||||
background-color: #222222 !important;
|
||||
}
|
||||
|
||||
.ms-Nav-link a:active {
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.ms-Nav-compositeLink .ms-Nav-chevronButton.ms-Nav-chevronButton--link {
|
||||
background: #222222 !important;
|
||||
}
|
||||
|
||||
.ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton,
|
||||
.ms-Nav-compositeLink.is-selected a {
|
||||
padding-left: 70px !important;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton:after,
|
||||
html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 419px) {
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
background-color: green !important;
|
||||
height: 8%;
|
||||
width: 100% !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.titleSideBarMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconMenu {
|
||||
color: #d1d1d1;
|
||||
font-size: 13px;
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.iconMenu:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.IconsMenu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -23px;
|
||||
height: 22px;
|
||||
width: 300px;
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.iconText {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 520px) and (max-width:1000px) {
|
||||
.titleSideBarMenu {
|
||||
display: none;
|
||||
}
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
background-color: green !important;
|
||||
height: 8%;
|
||||
width: 100% !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-image: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/bot-logo.png");
|
||||
background-position: 2px 2px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.IconsMenu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -11px;
|
||||
height: 22px;
|
||||
width: 416px;
|
||||
left: 100px !important;
|
||||
margin-left: 0px !important;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
.iconMenu {
|
||||
color: #d1d1d1;
|
||||
}
|
||||
.iconMenu:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 420px) and (max-width: 1000px) {
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
background-color: green !important;
|
||||
height: 8%;
|
||||
width: 100% !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.titleSideBarMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconMenu {
|
||||
color: #d1d1d1;
|
||||
font-size: 14px;
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.iconMenu:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.IconsMenu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -11px;
|
||||
height: 22px;
|
||||
width: 416px;
|
||||
left: 50%;
|
||||
margin-left: -208px;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.iconText {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
background-color: green !important;
|
||||
height: 13%;
|
||||
position: absolute;
|
||||
top: 1%;
|
||||
left: 1%;
|
||||
width: 46% !important;
|
||||
border-right: 14px solid #19baee !important;
|
||||
}
|
||||
|
||||
.titleSideBarMenu {
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.iconMenu {
|
||||
color: #d1d1d1;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.iconMenu:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.IconsMenu {
|
||||
width: 520px;
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -249px;
|
||||
bottom: 10px;
|
||||
height: 22px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.iconText {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 684px) {
|
||||
.titleSideBarMenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.iconText:hover {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
416
templates/default.gbai/default.gbtheme/css/colors.css
Normal file
|
@ -0,0 +1,416 @@
|
|||
/* Grey Theme */
|
||||
|
||||
.theme-grey {
|
||||
--color-dark: #212121;
|
||||
--color-dark-gray: #424242;
|
||||
--color-gray: #616161;
|
||||
--color-light-gray: #E0E0E0;
|
||||
--color-white: #F5F5F5;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #757575;
|
||||
--color-background-light:#212121;
|
||||
--color-background-dark: #F5F5F5;
|
||||
--color-sidebar-background: #424242;
|
||||
--color-link-background: #212121;
|
||||
--color-player-background: #E0E0E0;
|
||||
--color-webchat-background: #F5F5F5;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #212121;
|
||||
--color-markdown-border: #757575;
|
||||
--color-media-background: #F5F5F5;
|
||||
}
|
||||
|
||||
.theme-light{
|
||||
--color-text: #333;
|
||||
--color-background-light: #f4f4f9;
|
||||
--color-background-dark: #e0e0e0;
|
||||
--color-sidebar-background: lightgrey;
|
||||
--color-link-background: #f0f0f0;
|
||||
--color-player-background: #fafafa;
|
||||
--color-webchat-background: #ffffff;
|
||||
--color-shadow: 0, 0, 0;
|
||||
--color-border: #cccccc;
|
||||
--color-light-border: #ddd;
|
||||
--color-yes-button-background: #28a745;
|
||||
--color-no-button-background: #dc3545;
|
||||
--color-white: #fff;
|
||||
--color-markdown-background: #f9f9f9;
|
||||
--color-markdown-text: #333;
|
||||
--color-markdown-border: #ccc;
|
||||
--color-media-background: #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
/* Red Theme */
|
||||
|
||||
.theme-red{
|
||||
--color-dark: #D32F2F;
|
||||
--color-dark-gray: #C62828;
|
||||
--color-gray: #B71C1C;
|
||||
--color-light-gray: #FFCDD2;
|
||||
--color-white: #FAFAFA;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #D32F2F;
|
||||
--color-background-light: #FFEBEE;
|
||||
--color-background-dark: #D32F2F;
|
||||
--color-sidebar-background: #C62828;
|
||||
--color-link-background: #B71C1C;
|
||||
--color-player-background: #F8BBD0;
|
||||
--color-webchat-background: #FCE4EC;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #B71C1C;
|
||||
--color-markdown-border: #D32F2F;
|
||||
--color-media-background: #FFEBEE;
|
||||
}
|
||||
|
||||
/* Blue Theme */
|
||||
.theme-blue {
|
||||
|
||||
--color-dark: #0D47A1;
|
||||
--color-dark-gray: #1565C0;
|
||||
--color-gray: #1976D2;
|
||||
--color-light-gray: #BBDEFB;
|
||||
--color-white: #E3F2FD;
|
||||
--color-green: #2E7D32;
|
||||
--color-red: #C62828;
|
||||
--color-yellow: #F9A825;
|
||||
--color-text: white;
|
||||
--color-border: #1E88E5;
|
||||
--color-background-light: #E3F2FD;
|
||||
--color-background-dark: #1976D2;
|
||||
--color-sidebar-background: #1565C0;
|
||||
--color-link-background: #0D47A1;
|
||||
--color-player-background: #BBDEFB;
|
||||
--color-webchat-background: #E3F2FD;
|
||||
--color-yes-button-background: #2E7D32;
|
||||
--color-no-button-background: #C62828;
|
||||
--color-markdown-background: #F9A825;
|
||||
--color-markdown-text: #0D47A1;
|
||||
--color-markdown-border: #1E88E5;
|
||||
--color-media-background: #E3F2FD;
|
||||
}
|
||||
|
||||
/* Green Theme */
|
||||
.theme-green {
|
||||
|
||||
--color-dark: #1B5E20;
|
||||
--color-dark-gray: #2E7D32;
|
||||
--color-gray: #388E3C;
|
||||
--color-light-gray: #C8E6C9;
|
||||
--color-white: #F1F8E9;
|
||||
--color-green: #1B5E20;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #4CAF50;
|
||||
--color-background-light: #F1F8E9;
|
||||
--color-background-dark: #388E3C;
|
||||
--color-sidebar-background: #2E7D32;
|
||||
--color-link-background: #1B5E20;
|
||||
--color-player-background: #C8E6C9;
|
||||
--color-webchat-background: #F1F8E9;
|
||||
--color-yes-button-background: #4CAF50;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #1B5E20;
|
||||
--color-markdown-border: #4CAF50;
|
||||
--color-media-background: #F1F8E9;
|
||||
}
|
||||
|
||||
/* Yellow Theme */
|
||||
.theme-yellow {
|
||||
|
||||
--color-dark: #FBC02D;
|
||||
--color-dark-gray: #F9A825;
|
||||
--color-gray: #F57F17;
|
||||
--color-light-gray: #FFF9C4;
|
||||
--color-white: #FFFDE7;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #FBC02D;
|
||||
--color-background-light: #FFF9C4;
|
||||
--color-background-dark: #F57F17;
|
||||
--color-sidebar-background: #F9A825;
|
||||
--color-link-background: #FBC02D;
|
||||
--color-player-background: #FFFDE7;
|
||||
--color-webchat-background: #FFF9C4;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #F9A825;
|
||||
--color-markdown-text: #F57F17;
|
||||
--color-markdown-border: #FBC02D;
|
||||
--color-media-background: #FFF9C4;
|
||||
}
|
||||
|
||||
/* Purple Theme */
|
||||
.theme-purple {
|
||||
--color-dark: #4A148C;
|
||||
--color-dark-gray: #6A1B9A;
|
||||
--color-gray: #7B1FA2;
|
||||
--color-light-gray: #E1BEE7;
|
||||
--color-white: #F3E5F5;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #6A1B9A;
|
||||
--color-background-light: #F3E5F5;
|
||||
--color-background-dark: #7B1FA2;
|
||||
--color-sidebar-background: #6A1B9A;
|
||||
--color-link-background: #4A148C;
|
||||
--color-player-background: #E1BEE7;
|
||||
--color-webchat-background: #F3E5F5;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #7B1FA2;
|
||||
--color-markdown-border: #6A1B9A;
|
||||
--color-media-background: #E1BEE7;
|
||||
}
|
||||
|
||||
/* Orange Theme */
|
||||
.theme-orange {
|
||||
--color-dark: #E65100;
|
||||
--color-dark-gray: #EF6C00;
|
||||
--color-gray: #F57C00;
|
||||
--color-light-gray: #FFCC80;
|
||||
--color-white: #FFF3E0;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #FF9800;
|
||||
--color-background-light: #FFF3E0;
|
||||
--color-background-dark: #F57C00;
|
||||
--color-sidebar-background: #EF6C00;
|
||||
--color-link-background: #E65100;
|
||||
--color-player-background: #FFCC80;
|
||||
--color-webchat-background: #FFF3E0;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #E65100;
|
||||
--color-markdown-border: #FF9800;
|
||||
--color-media-background: #FFF3E0;
|
||||
}
|
||||
|
||||
/* Brown Theme */
|
||||
.theme-brown {
|
||||
--color-dark: #3E2723;
|
||||
--color-dark-gray: #4E342E;
|
||||
--color-gray: #5D4037;
|
||||
--color-light-gray: #D7CCC8;
|
||||
--color-white: #EFEBE9;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #6D4C41;
|
||||
--color-background-light: #EFEBE9;
|
||||
--color-background-dark: #5D4037;
|
||||
--color-sidebar-background: #4E342E;
|
||||
--color-link-background: #3E2723;
|
||||
--color-player-background: #D7CCC8;
|
||||
--color-webchat-background: #EFEBE9;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #5D4037;
|
||||
--color-markdown-border: #6D4C41;
|
||||
--color-media-background: #EFEBE9;
|
||||
}
|
||||
|
||||
/* Pink Theme */
|
||||
.theme-pink {
|
||||
--color-dark: #880E4F;
|
||||
--color-dark-gray: #AD1457;
|
||||
--color-gray: #C2185B;
|
||||
--color-light-gray: #F8BBD0;
|
||||
--color-white: #FCE4EC;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #C2185B;
|
||||
--color-background-light: #FCE4EC;
|
||||
--color-background-dark: #C2185B;
|
||||
--color-sidebar-background: #AD1457;
|
||||
--color-link-background: #880E4F;
|
||||
--color-player-background: #F8BBD0;
|
||||
--color-webchat-background: #FCE4EC;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #880E4F;
|
||||
--color-markdown-border: #C2185B;
|
||||
--color-media-background: #FCE4EC;
|
||||
}
|
||||
|
||||
/* Cyan Theme */
|
||||
.theme-cyan {
|
||||
--color-dark: #006064;
|
||||
--color-dark-gray: #00838F;
|
||||
--color-gray: #0097A7;
|
||||
--color-light-gray: #B2EBF2;
|
||||
--color-white: #E0F7FA;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #00ACC1;
|
||||
--color-background-light: #E0F7FA;
|
||||
--color-background-dark: #0097A7;
|
||||
--color-sidebar-background: #00838F;
|
||||
--color-link-background: #006064;
|
||||
--color-player-background: #B2EBF2;
|
||||
--color-webchat-background: #E0F7FA;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #006064;
|
||||
--color-markdown-border: #00ACC1;
|
||||
--color-media-background: #E0F7FA;
|
||||
}
|
||||
|
||||
/* Lime Theme */
|
||||
.theme-lime {
|
||||
--color-dark: #827717;
|
||||
--color-dark-gray: #9E9D24;
|
||||
--color-gray: #AFB42B;
|
||||
--color-light-gray: #F0F4C3;
|
||||
--color-white: #F9FBE7;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #CDDC39;
|
||||
--color-background-light: #F9FBE7;
|
||||
--color-background-dark: #AFB42B;
|
||||
--color-sidebar-background: #9E9D24;
|
||||
--color-link-background: #827717;
|
||||
--color-player-background: #F0F4C3;
|
||||
--color-webchat-background: #F9FBE7;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #827717;
|
||||
--color-markdown-border: #CDDC39;
|
||||
--color-media-background: #F9FBE7;
|
||||
}
|
||||
|
||||
/* Indigo Theme */
|
||||
.theme-indigo {
|
||||
--color-dark: #1A237E;
|
||||
--color-dark-gray: #283593;
|
||||
--color-gray: #303F9F;
|
||||
--color-light-gray: #C5CAE9;
|
||||
--color-white: #E8EAF6;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #3F51B5;
|
||||
--color-background-light: #E8EAF6;
|
||||
--color-background-dark: #303F9F;
|
||||
--color-sidebar-background: #283593;
|
||||
--color-link-background: #1A237E;
|
||||
--color-player-background: #C5CAE9;
|
||||
--color-webchat-background: #E8EAF6;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #1A237E;
|
||||
--color-markdown-border: #3F51B5;
|
||||
--color-media-background: #E8EAF6;
|
||||
}
|
||||
|
||||
/* Teal Theme */
|
||||
.theme-teal {
|
||||
--color-dark: #004D40;
|
||||
--color-dark-gray: #00695C;
|
||||
--color-gray: #00796B;
|
||||
--color-light-gray: #B2DFDB;
|
||||
--color-white: #E0F2F1;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #009688;
|
||||
--color-background-light: #E0F2F1;
|
||||
--color-background-dark: #00796B;
|
||||
--color-sidebar-background: #00695C;
|
||||
--color-link-background: #004D40;
|
||||
--color-player-background: #B2DFDB;
|
||||
--color-webchat-background: #E0F2F1;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #004D40;
|
||||
--color-markdown-border: #009688;
|
||||
--color-media-background: #E0F2F1;
|
||||
}
|
||||
|
||||
/* Violet Theme */
|
||||
.theme-violet {
|
||||
--color-dark: #4A148C;
|
||||
--color-dark-gray: #6A1B9A;
|
||||
--color-gray: #7B1FA2;
|
||||
--color-light-gray: #E1BEE7;
|
||||
--color-white: #F3E5F5;
|
||||
--color-green: #388E3C;
|
||||
--color-red: #D32F2F;
|
||||
--color-yellow: #FBC02D;
|
||||
--color-text: white;
|
||||
--color-border: #6A1B9A;
|
||||
--color-background-light: #F3E5F5;
|
||||
--color-background-dark: #7B1FA2;
|
||||
--color-sidebar-background: #6A1B9A;
|
||||
--color-link-background: #4A148C;
|
||||
--color-player-background: #E1BEE7;
|
||||
--color-webchat-background: #F3E5F5;
|
||||
--color-yes-button-background: #388E3C;
|
||||
--color-no-button-background: #D32F2F;
|
||||
--color-markdown-background: #FBC02D;
|
||||
--color-markdown-text: #7B1FA2;
|
||||
--color-markdown-border: #6A1B9A;
|
||||
--color-media-background: #F3E5F5;
|
||||
}
|
||||
|
||||
/* Black & White Theme */
|
||||
.theme-black-white {
|
||||
|
||||
--color-dark: #000000;
|
||||
--color-dark-gray: #333333;
|
||||
--color-gray: #555555;
|
||||
--color-light-gray: #DDDDDD;
|
||||
--color-white: #FFFFFF;
|
||||
--color-green: #00FF00;
|
||||
--color-red: #FF0000;
|
||||
--color-yellow: #FFFF00;
|
||||
--color-text: white;
|
||||
--color-border: #555555;
|
||||
--color-background-light: #FFFFFF;
|
||||
--color-background-dark: #000000;
|
||||
--color-sidebar-background: #333333;
|
||||
--color-link-background: #000000;
|
||||
--color-player-background: #DDDDDD;
|
||||
--color-webchat-background: #FFFFFF;
|
||||
--color-yes-button-background: #00FF00;
|
||||
--color-no-button-background: #FF0000;
|
||||
--color-markdown-background: #FFFF00;
|
||||
--color-markdown-text: #000000;
|
||||
--color-markdown-border: #555555;
|
||||
--color-media-background: #FFFFFF;
|
||||
}
|
518
templates/default.gbai/default.gbtheme/css/default.css
Normal file
|
@ -0,0 +1,518 @@
|
|||
/* Base Styles */
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: var(--color-text);
|
||||
background: linear-gradient(135deg, var(--color-background-light), var(--color-background-dark));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Main Sections */
|
||||
|
||||
/* Sidebar */
|
||||
.ms-Nav {
|
||||
background: var(--color-sidebar-background);
|
||||
color: var(--color-text);
|
||||
margin-top: 2rem;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 8px rgba(var(--color-shadow), 0.2);
|
||||
}
|
||||
|
||||
.ms-Nav-link {
|
||||
color: var(--color-text) !important;
|
||||
background-color: var(--color-link-background) !important;
|
||||
border-radius: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.75rem;
|
||||
transition: background-color 0.3s, border-right 0.3s;
|
||||
}
|
||||
|
||||
.ms-Nav-link a:active {
|
||||
border-right: 2px solid var(--color-text);
|
||||
}
|
||||
|
||||
.ms-Nav-compositeLink .ms-Nav-chevronButton.ms-Nav-chevronButton--link {
|
||||
background: var(--color-link-background) !important;
|
||||
}
|
||||
|
||||
.ms-Nav-compositeLink.is-selected {
|
||||
padding-left: 80px !important;
|
||||
}
|
||||
|
||||
.ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton:after,
|
||||
.ms-Nav-compositeLink.is-selected a:after {
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
box-shadow: 0 4px 15px rgba(var(--color-shadow), 0.3);
|
||||
border-radius: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 419px),
|
||||
screen and (min-width: 420px) and (max-width: 1000px) {
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
height: 7%;
|
||||
width: 95% !important;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 14px;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
|
||||
.titleSideBarMenu {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.titleSideBarMenu img {
|
||||
width: 32px;
|
||||
margin-left: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.iconMenu {
|
||||
font-size: 9pt;
|
||||
display: inline;
|
||||
margin-right: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.iconMenu:hover {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.iconText {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 419px) {
|
||||
.IconsMenu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -23px;
|
||||
height: 30px;
|
||||
width: 320px;
|
||||
left: 50%;
|
||||
margin-left: -160px;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 420px) and (max-width: 1000px) {
|
||||
.IconsMenu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
height: 30px;
|
||||
width: 450px;
|
||||
left: 80px !important;
|
||||
margin-left: 0px !important;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.sidebar {
|
||||
display: inline-block !important;
|
||||
height: 18%;
|
||||
width: 45% !important;
|
||||
background-color: var(--color-sidebar-background) !important;
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
left: 3%;
|
||||
border-right: 14px solid var(--color-border) !important;
|
||||
}
|
||||
|
||||
.titleSideBarMenu {
|
||||
text-align: center;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.iconMenu {
|
||||
font-size: 09pt;
|
||||
text-align: center;
|
||||
margin: 10px 6px;
|
||||
padding-left: 48px;
|
||||
}
|
||||
|
||||
.IconsMenu {
|
||||
width: 560px;
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -260px;
|
||||
bottom: 1rem;
|
||||
top: 60px;
|
||||
height: 28px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 12pt;
|
||||
}
|
||||
}
|
||||
|
||||
/* Player */
|
||||
.player {
|
||||
background-color: var(--color-player-background);
|
||||
box-shadow: 0 4px 15px rgba(var(--color-shadow), 0.3);
|
||||
border-radius: 0.75rem;
|
||||
border: 7px solid var(--color-border);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.player {
|
||||
width: 94% !important;
|
||||
height: 44% !important;
|
||||
border: 5px solid var(--color-border);
|
||||
position: absolute;
|
||||
top: 11%;
|
||||
left: 50%;
|
||||
margin-left: -48%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.player {
|
||||
width: 46% !important;
|
||||
height: 73% !important;
|
||||
border: 8px solid var(--color-light-border);
|
||||
position: absolute;
|
||||
left: 3%;
|
||||
top: 24%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Webchat */
|
||||
.webchat {
|
||||
background-color: var(--color-webchat-background) !important;
|
||||
box-shadow: 0 8px 20px rgba(var(--color-shadow), 0.1);
|
||||
border-radius: 1rem;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.webchat > div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.webchat {
|
||||
width: 96% !important;
|
||||
height: 37% !important;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
margin-left: -48%;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.webchat {
|
||||
width: 48% !important;
|
||||
height: 94%;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 19px;
|
||||
bottom: 0;
|
||||
border-bottom: 4px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
/* General Styles */
|
||||
.gb-quality-button-yes {
|
||||
width: 54px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--color-yes-button-background);
|
||||
color: var(--color-white);
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.9s, transform 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gb-quality-button-yes:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.gb-quality-button-no {
|
||||
width: 54px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--color-no-button-background);
|
||||
color: var(--color-white);
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.9s, transform 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gb-quality-button-no:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.gb-markdown-player-quality {
|
||||
background-color: var(--color-markdown-background);
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: -9px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
color: var(--color-markdown-text);
|
||||
border: 1px solid var(--color-markdown-border);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.media-player-container {
|
||||
overflow: auto;
|
||||
max-height: 90%;
|
||||
background: var(--color-media-background);
|
||||
}
|
||||
|
||||
.media-player-scroll {
|
||||
height: 1500px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.media-player-scroll h1 {
|
||||
font-size: 15px;
|
||||
}
|
||||
.media-player-scroll p {
|
||||
font-size: 12px;
|
||||
}
|
||||
.media-player-scroll li {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 451px) {
|
||||
.media-player {
|
||||
position: relative;
|
||||
zoom: 90%;
|
||||
height: 94% !important;
|
||||
width: 95% !important;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
.gb-markdown-player-quality {
|
||||
bottom: -1px;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 451px) {
|
||||
.media-player {
|
||||
position: relative;
|
||||
zoom: 90%;
|
||||
height: 100% !important;
|
||||
width: 95% !important;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Red Theme Colors */
|
||||
:root {
|
||||
--primary-color: #ff4d4d; /* Red color */
|
||||
--secondary-color: #cc0000; /* Darker red */
|
||||
--text-color: #ffffff; /* White text */
|
||||
--background-color: #dadada; /* Light gray background */
|
||||
--alert-success-color: #d4edda;
|
||||
--alert-error-color: #f8d7da;
|
||||
}
|
||||
|
||||
/* General Styles */
|
||||
body {
|
||||
background-color: var(--background-color) !important;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.App {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.App .body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex-basis: 12em;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
max-width: 12em;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.media-player-container {
|
||||
overflow: auto;
|
||||
max-height: 90%;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.media-player-scroll {
|
||||
height: 1500px;
|
||||
}
|
||||
|
||||
/* Loader */
|
||||
.loader {
|
||||
opacity: 1 !important;
|
||||
filter: opacity(100%);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.gb-quality-button-yes {
|
||||
width: 54px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-color: green;
|
||||
color: var(--text-color);
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: 0.9s;
|
||||
transition-delay: 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gb-quality-button-no {
|
||||
width: 54px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--text-color);
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: 0.9s;
|
||||
transition-delay: 0.3s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Markdown Player */
|
||||
.gb-markdown-player-quality {
|
||||
background-color: #f5e4a8;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: -9px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
color: #52514e;
|
||||
border: 1px solid #b2a46e;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Media Player */
|
||||
.media-player {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
|
||||
}
|
||||
|
||||
.media-player-container {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.media-player-link {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.gb-bullet-player {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
|
||||
background: white;
|
||||
height: 95%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.gb-bullet-player-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gb-image-player-outter-div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gb-image-player-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.gb-bullet-player-outter-div {}
|
||||
|
||||
.gb-video-player-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gb-video-react-player {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* Responsive Media Queries */
|
||||
@media screen and (max-width: 1000px) {
|
||||
.media-player-scroll h1 {
|
||||
font-size: 15px;
|
||||
}
|
||||
.media-player-scroll p {
|
||||
font-size: 12px;
|
||||
}
|
||||
.media-player-scroll li {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 451px) {
|
||||
.media-player {
|
||||
position: relative;
|
||||
zoom: 90%;
|
||||
height: 94% !important;
|
||||
width: 95% !important;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
.gb-markdown-player-quality {
|
||||
bottom: -1px;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 451px) {
|
||||
.media-player {
|
||||
position: relative;
|
||||
zoom: 90%;
|
||||
height: 100% !important;
|
||||
width: 95% !important;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** Main Layout rules */
|
||||
|
||||
.App { min-height: 100vh; }
|
||||
|
||||
.App {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.App .body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.body .sidebar { order: -1; }
|
||||
|
||||
.body .content { flex: 1; }
|
||||
|
||||
.body .sidebar {
|
||||
flex: 0 0 12em;
|
||||
max-width: 12em;
|
||||
}
|
||||
|
||||
.App .header { height: 4em; }
|
||||
|
||||
.App .footer { height: 4em; }
|
||||
|
||||
/** Text */
|
||||
|
||||
.text-red { color: red; }
|