Skip to content

Commit

Permalink
[NeoGlass] Add black glass theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@Flashacker-Neo
Flashacker-Neo committed Mar 20, 2022
1 parent 3e8dcc2 commit 1082fe4
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 30 deletions.
19 changes: 10 additions & 9 deletions src/app/mods/alternative-themes/alternativeTheme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Select } from "@helpers/windowHelper/inputDtHelper/inputs/select";
import { Select } from "@helpers/windowHelper/inputDtHelper/select";
import { Mod } from "../mod";

import { neoDark } from "./themes/neoDark";
import { neoGlassTheme } from "./themes/neoGlass";
import { neoGlassThemeWhite, neoGlassThemeBlack } from "./themes/neoGlass";

export class AlternativeTheme extends Mod {

Expand All @@ -20,7 +20,8 @@ export class AlternativeTheme extends Mod {
this.themeList = [
{id: 'default', text: 'Défaut'},
{id: 'neoBlack', text: 'Noir transparent'},
{id: 'neoGlass', text: 'Glass'},
{id: 'neoGlassWhite', text: 'Glass (Blanc)'},
{id: 'neoGlassBlack', text: 'Glass (Noir)'},
];

this.init();
Expand All @@ -40,7 +41,6 @@ export class AlternativeTheme extends Mod {
}

private onOpen() {
const selectHelper: Select = new Select(this.wGame);
const content = this.optionsWindow.rootElement.getElementsByClassName('miscSection')[0].getElementsByClassName('allOptions')[0];

// Create new elements
Expand All @@ -49,16 +49,16 @@ export class AlternativeTheme extends Mod {
headTitle.className = "header";

// Create select
const select = selectHelper.createSelect('theme-selector', this.themeList);
select.style.marginBottom = "15px";
const select: Select = Select.createSelect(this.wGame, 'theme-selector', this.themeList);
select.getHtmlElement().style.marginBottom = "15px";

// Insert in parent
content.append(headTitle);
content.append(select);
content.append(select.getHtmlElement());

// Add event on select
let onClickSelect = (data: any) => { this.applyTheme(data.id) };
selectHelper.addSelectEvent(select, (data: any) => {onClickSelect(data)});
select.addEvent((data: any) => {onClickSelect(data)});
}

private applyTheme(themeId: string) {
Expand All @@ -71,7 +71,8 @@ export class AlternativeTheme extends Mod {

switch (themeId) {
case 'neoBlack': theme.innerHTML = neoDark; break;
case 'neoGlass': theme.innerHTML = neoGlassTheme(); break;
case 'neoGlassWhite': theme.innerHTML = neoGlassThemeWhite(); break;
case 'neoGlassBlack': theme.innerHTML = neoGlassThemeBlack(); break;
}

this.wGame.document.head.appendChild(theme);
Expand Down
116 changes: 95 additions & 21 deletions src/app/mods/alternative-themes/themes/neoGlass.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,43 @@
export function neoGlassTheme(): string {
export function neoGlassThemeWhite(): string {
let theme = neoGlass;

themeVariable.forEach(v => {
themeVariableWhite.forEach(v => {
theme = theme.split(v.id).join(v.value);
});

return theme;
}
export function neoGlassThemeBlack(): string {
let theme = neoGlass;

const themeVariable = [
themeVariableBlack.forEach(v => {
theme = theme.split(v.id).join(v.value);
});

return theme;
}
const themeVariableBlack = [
{id:'%primary%', value:'rgb(0,0,0)'},
{id:'%primary_a70%', value:'rgba(0,0,0,0.7)'},
{id:'%primary_a50%', value:'rgba(0,0,0,0.5)'},
{id:'%primary_a40%', value:'rgba(0,0,0,0.4)'},
{id:'%primary_a30%', value:'rgba(0,0,0,0.3)'},
{id:'%primary_a20%', value:'rgba(0,0,0,0.2)'},
{id:'%primary_a15%', value:'rgba(0,0,0,0.4)'},

{id:'%text_primary%', value:'#ffffff'},
{id:'%text_secondary%', value:'#c1c1c1'},

{id:'%title_color%', value:'#ffffff'},
{id:'%link_color%', value:'#9a077f'},
{id:'%bonus_color%', value:'#a8f928'},
{id:'%malus_color%', value:'#a51919'},

{id:'%btn_color%', value:''},
{id:'%blur%', value:'blur(5px)'},
];

const themeVariableWhite = [
{id:'%primary%', value:'rgb(255,255,255)'},
{id:'%primary_a70%', value:'rgba(255,255,255,0.7)'},
{id:'%primary_a50%', value:'rgba(255,255,255,0.5)'},
Expand All @@ -27,6 +56,7 @@ const themeVariable = [

{id:'%btn_color%', value:'filter: saturate(0.1) brightness(1.5);'},
{id:'%blur%', value:'blur(5px)'},
{id:'%invert%', value:'invert(1)'},
];

const neoGlass = `
Expand Down Expand Up @@ -283,22 +313,22 @@ const neoGlass = `
**********************************/
#dofusBody .MountDetails .mountName {
border: 1px solid %primary_a30%;
color: #3d3d3d;
color: %text_primary%;
}
/* SearchBox *
**********************************/
.InputBox .domInputBox {
border: none;
color: #3d3d3d;
color: %text_primary%;
padding-left: 4px;
}
.searchBox .inputFrame .cancelBtn {
top: -2px;
}
.searchBox .inputFrame .cancelBtn .btnIcon {
filter: invert(1);
filter: %invert%;
}
.searchBox .searchBtn .btnIcon {
%btn_color%
Expand Down Expand Up @@ -340,6 +370,11 @@ const neoGlass = `
left: 6px;
top: 3px;
}
/* Fix checkbox position in filter */
.filterCheckboxes .CheckboxLabel.on::before {
left: 2px;
top: 2px;
}
.CheckboxLabel.on,
.AchievementsWindow .objective.completed {
background-image: none;
Expand Down Expand Up @@ -372,6 +407,7 @@ const neoGlass = `
.RecipeList .searchBar .CheckboxLabel.on {
background-image: none;
background-color: %primary%;
color: %text_primary%;
}
.RecipeList .searchBar .CheckboxLabel::after,
.RecipeList .searchBar .CheckboxLabel.on::after {
Expand Down Expand Up @@ -412,8 +448,8 @@ const neoGlass = `
.fightBtn.Button {
border: 1px solid %primary%;
border-radius: 7px;
color: #3d3d3d;
background: %primary%;
color: %text_primary%;
background: %primary_a50%;
padding: 5px 15px;
height: auto !important;
}
Expand Down Expand Up @@ -602,7 +638,8 @@ const neoGlass = `
.window .QuestsWindow .col1 .ListV2 .listItem.odd > .label,
.window .BestiaryWindow .col1 .SingleSelectionList .listItem.selected > .sublist > .label:nth-child(2n+1),
.window .BestiaryWindow .col1 .SingleSelectionList .listItem:nth-child(2n+1) > .label,
.window.FightEndWindow .TableV2 .row.title {
.window.FightEndWindow .TableV2 .row.title,
.compositionTab .unscrollableContentBlock .compositionContent .col1 .SingleSelectionList .listItem.selected>.sublist>.label:nth-child(odd) {
background-color : %primary_a30%;
}
Expand All @@ -618,12 +655,14 @@ const neoGlass = `
.window .BestiaryWindow .sublist .label.selected,
.Table .container.content .row.highlight,
.window .BestiaryWindow .sublist .label.selected,
.HelpWindow .helpBody .col1 .sublist .label.selected {
.HelpWindow .helpBody .col1 .sublist .label.selected,
.compositionTab .unscrollableContentBlock .compositionContent .col1 .sublist .label.selected,
.compositionTab .unscrollableContentBlock .compositionContent .col1 .SingleSelectionList .listItem.selected>.label {
position: relative;
border-image: none !important;
webkit-border-image: none !important;
background-color: transparent !important;
color: %primary% !important;
color: white !important;
text-shadow: none;
}
Expand All @@ -635,7 +674,9 @@ const neoGlass = `
.Table .container.content .row.highlight:before,
.window .QuestsWindow .sublist .label.selected::before,
.window.OptionsWindow .wrapper .menuCol .menu .listItem.selected::before,
.HelpWindow .helpBody .col1 .sublist .label.selected::before {
.HelpWindow .helpBody .col1 .sublist .label.selected::before,
.compositionTab .unscrollableContentBlock .compositionContent .col1 .sublist .label.selected:before,
.compositionTab .unscrollableContentBlock .compositionContent .col1 .SingleSelectionList .listItem.selected>.label:before {
content: " ";
z-index: -1;
position: absolute;
Expand Down Expand Up @@ -699,11 +740,12 @@ const neoGlass = `
border-radius: 10px 10px 0 0;
border: 1px solid %primary_a30%;
border-bottom: none;
color: #4a4a4a;
color: %text_primary%;
}
.tabs .tab.on,
.SwipingTabs .swipeHeader .swipeTabBtn.on {
background-color : %primary_a70%;
color: %text_secondary%;
}
Expand Down Expand Up @@ -1158,6 +1200,10 @@ const neoGlass = `
.globalWindow .windowBody .Button.button {
margin: 3px 0;
}
/* Fix text visible with button transparency */
.window.globalWindow .selectorContent.Button {
color: transparent;
}
/* Options *
Expand Down Expand Up @@ -1459,15 +1505,16 @@ const neoGlass = `
box-sizing: border-box;
}
/* Monsters details */
.BestiaryWindow .monster .infos {
.BestiaryWindow .monster .infos,
.compositionTab .unscrollableContentBlock .compositionContent .col2 .monster .infos {
background-color: %primary_a30%;
border-color: %primary_a30%;
}
.window .BestiaryWindow .sublist .label {
margin : 0 2px;
}
.listItem.monster.selected .infos {
color: #3d3d3d;
color: %text_primary%;
border-color: %primary%;
}
/* MiniBoss icon */
Expand Down Expand Up @@ -1508,17 +1555,20 @@ const neoGlass = `
background: url(./assets/ui/icons/questMonster.png) 0 50% no-repeat;
}
/* Details more */
.BestiaryWindow .monster .more {
.BestiaryWindow .monster .more,
.compositionTab .unscrollableContentBlock .compositionContent .col2 .monster .more {
background-color: %primary_a30%;
border-color: %primary_a30%;
border-top: none;
color: %text_primary%;
}
/* Monster stats */
.BestiaryWindow .monster .stat {
.BestiaryWindow .monster .stat,
.compositionTab .unscrollableContentBlock .compositionContent .col2 .monster .stat {
background: none;
}
.BestiaryWindow .monster .stat:nth-child(2n+1) {
.BestiaryWindow .monster .stat:nth-child(2n+1),
.compositionTab .unscrollableContentBlock .compositionContent .col2 .monster .stat:nth-child(2n+1) {
background-color: %primary_a30%;
}
/* Items drop slots */
Expand All @@ -1532,7 +1582,7 @@ const neoGlass = `
border-color: gold;
}
.BestiaryWindow .monster .Slot.okDrop::before {
border-color: #3d3d3d;
border-color: %text_primary%;
}
Expand Down Expand Up @@ -1612,6 +1662,10 @@ const neoGlass = `
/* Ascension *
**********************************/
/* List composition */
.compositionTab .unscrollableContentBlock .compositionContent .col1:before {
border: none;
}
.window.ToaWindow .panels .panel .contentBlock::before,
.window.ToaWindow .panels .panel .unscrollableContentBlock::before {
border-radius: 0 7px 7px 7px;
Expand All @@ -1625,12 +1679,15 @@ const neoGlass = `
.window.ToaWindow h6 {
color: %title_color%;
}
.window.ToaWindow .panels .panel .contentBlock .separator {
.window.ToaWindow .panels .panel .contentBlock .separator,
.compositionTab .unscrollableContentBlock .compositionContent .col2 .separator {
background: %primary%;
}
/* Info block */
.generalTab .generalContent .introBlock .col2 .scoreBoxHeaderContentBlock,
.generalTab .generalContent .introBlock .col2 .localisationBox {
.generalTab .generalContent .introBlock .col2 .localisationBox,
.compositionTab .unscrollableContentBlock .compositionContent .col2 .statBlock .scoreBlock .scoreBoxHeaderContentBlock,
.compositionTab .unscrollableContentBlock .compositionContent .col2 .statBlock .scoreBlock .floorScoreBoxHeaderContentBlock {
background: %primary_a40%;
border: 1px solid %primary%;
color: %text_secondary%;
Expand Down Expand Up @@ -1675,6 +1732,23 @@ const neoGlass = `
background: %primary_a30%;
color: %text_primary%;
}
/* Fix Button */
.window.BidHouseShopWindow .sellModeBtn,
.window.BidHouseShopWindow .buyModeBtn {
height: 30px;
}
.window.BidHouseShopWindow .sellModeBtn .btnIcon,
.window.BidHouseShopWindow .buyModeBtn .btnIcon {
top: -7px;
left: -7px;
}
.window.tradeItemWindow .windowBody .buyHardSoftButtons {
max-height: 39px;
min-height: 30px;
}
.window.TradeItemConfirmWindow .rightCol .btnAndFee .buyBtn .btnLabel {
color: %text_primary%;
}
/* Inventory *
Expand Down

0 comments on commit 1082fe4

Please sign in to comment.