Jayden/wayvr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

themes cleanup, ui improvements

Browse Source
This commit is contained in:
Aleksander
2025-11-12 17:49:05 +01:00
parent 6136a5aa43
commit 6e11c2cf87
15 changed files with 105 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
wlx-overlay-s/src/assets/gui/bar.xml
View File

@@ -2,14 +2,14 @@
<include src="wlx_theme.xml" />
<template name="TopButton">
<rectangle id="~id" color="~bg_color" padding="8" round="50%">
<sprite color="~device_color" width="48" height="48" src="${src}" />
<rectangle id="~id" color="~color_bg" padding="8" round="50%">
<sprite width="48" height="48" src="${src}" />
</rectangle>
</template>
<elements>
<div box_sizing="content_box" flex_direction="column" justify_content="center">
<rectangle padding="10" gap="8" round="100%" color="~bg_color" justify_content="center">
<rectangle padding="10" gap="8" round="100%" color="~color_bg" justify_content="center">
<TopButton id="lock" src="bar/lock_open.svg" />
<TopButton id="anchor" src="bar/anchor.svg" />
<TopButton id="mouse" src="bar/mouse.svg" />
@@ -19,7 +19,7 @@
<TopButton id="inout" src="bar/inout.svg" />
<TopButton id="delete" src="bar/delete.svg" />
</rectangle>
<rectangle padding="8" gap="8" round="100%" color="~bg_color_active" justify_content="center" align_items="center">
<rectangle padding="8" gap="8" round="100%" color="~color_bg_active" justify_content="center" align_items="center">
<label size="18" translation="BAR.OPACITY" color="~text_color" />
<Slider width="150" height="24" min_value="0" max_value="100" value="100" />
<CheckBox translation="BAR.ADDITIVE" color="~text_color" />

25
wlx-overlay-s/src/assets/gui/edit.xml
View File

@@ -1,36 +1,33 @@
<layout>
<theme>
<var key="border" value="2" />
<var key="tint_color" value="#0044CC99" />
</theme>
<include src="theme.xml" />
<macro name="button_style"
margin="2" overflow="hidden" box_sizing="border_box" align_items="center" justify_content="center"
border="2" round="50%" padding="8" gradient="vertical" tooltip_side="bottom" />
<template name="TopButton">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#0044CC" color="#000A1C" color2="#000002" >
<sprite color="~device_color" width="48" height="48" src="${src}" />
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#0044CC" color="#000A1C" color2="#000002">
<sprite width="48" height="48" src="${src}" />
</Button>
</template>
<template name="TopButtonDanger">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#CC0000" color="#110000" color2="#020000" >
<sprite color="~device_color" width="48" height="48" src="${src}" />
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#CC0000" color="#110000" color2="#020000">
<sprite width="48" height="48" src="${src}" />
</Button>
</template>
<template name="TopButtonFaded">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#707070" color="#202020" color2="#010101" >
<sprite color="~device_color" width="48" height="48" src="${src}" />
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#707070" color="#202020" color2="#010101">
<sprite width="48" height="48" src="${src}" />
</Button>
</template>
<elements>
<div width="100%" height="100%">
<rectangle width="100%" height="100%" padding="4" gap="4" align_items="center" justify_content="center" color="#000000DD" flex_direction="row">
<div flex_direction="column">
<rectangle padding="20" gap="8" round="100%" color="~bg_color" justify_content="center" >
<div flex_direction="column">
<rectangle padding="16" gap="8" round="32" color="~color_bg" border="2" border_color="~color_accent" justify_content="center">
<div flex_direction="column" gap="8">
<label align="center" translation="Point on a window to change its parameters.&#xA;Once done, leave edit mode using the button on the right." />
<div flex_direction="row" gap="4">
@@ -59,4 +56,4 @@
</rectangle>
</div>
</elements>
</layout>
</layout>

22
wlx-overlay-s/src/assets/gui/keyboard.xml
View File

@@ -1,7 +1,9 @@
<layout>
<include src="theme.xml" />
<macro name="keycap_rect"
margin="2" width="100%" overflow="hidden" box_sizing="border_box"
border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical"
border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical"
align_items="center" justify_content="center" />
<macro name="keycap_div"
@@ -15,7 +17,7 @@
<template name="KeySpecial">
<div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect">
<sprite color="#FFFFFF" width="32" height="32" src="keyboard/${text}.svg" />
<sprite width="32" height="32" src="keyboard/${text}.svg" />
</rectangle>
</div>
</template>
@@ -25,7 +27,7 @@
<template name="KeyLetter">
<div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect">
<label color="#FFFFFF" text="${text}" size="24" />
<label text="${text}" size="24" />
</rectangle>
</div>
</template>
@@ -35,8 +37,8 @@
<template name="KeyLetterAltGr">
<div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect" gap="4">
<label color="#FFFFFF" text="${text}" size="24" />
<label color="#FFFFFF70" text="${text_altgr}" size="24" />
<label text="${text}" size="24" />
<label color="~color_text_translucent" text="${text_altgr}" size="24" />
</rectangle>
</div>
</template>
@@ -46,8 +48,8 @@
<template name="KeySymbol">
<div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect" gap="4">
<label color="#FFFFFF70" text="${text_shift}" size="24" />
<label color="#FFFFFF" text="${text}" size="24" />
<label color="~color_text_translucent" text="${text_shift}" size="24" />
<label text="${text}" size="24" />
</rectangle>
</div>
</template>
@@ -58,14 +60,14 @@
<div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect" flex_direction="row" flex_wrap="wrap">
<div width="50%" height="50%" align_items="center" justify_content="center">
<label color="#FFFFFF70" text="${text_shift}" size="24" />
<label color="~color_text_translucent" text="${text_shift}" size="24" />
</div>
<div width="50%" height="50%" align_items="center" justify_content="center" />
<div width="50%" height="50%" align_items="center" justify_content="center">
<label color="#FFFFFF" text="${text}" size="24" />
<label text="${text}" size="24" />
</div>
<div width="50%" height="50%" align_items="center" justify_content="center">
<label color="#FFFFFF70" text="${text_altgr}" size="24" />
<label color="~color_text_translucent" text="${text_altgr}" size="24" />
</div>
</rectangle>
</div>

15
wlx-overlay-s/src/assets/gui/theme.xml
View File

@@ -1,9 +1,12 @@
<layout>
<theme>
<var key="menu_dark" value="#0A0A0ACC" />
<var key="background_dark" value="#0d131acc" />
<var key="background_light" value="#244179aa" />
<var key="bottom_panel" value="#141e28" />
</theme>
</layout>
<var key="color_text" value="#FFFFFF" />
<var key="color_text_translucent" value="#FFFFFF40" />
<var key="color_accent" value="#008cff" />
<var key="color_accent_translucent" value="#008cff40" />
<var key="color_accent_20" value="#001c33" /> <!-- 20% brightness -->
<var key="color_accent_5" value="#00070d" /> <!-- 5% brightness -->
<var key="color_accent_1" value="#000103" /> <!-- 1% brightness -->
</theme>
</layout>

4
wlx-overlay-s/src/assets/gui/toolbox.xml
View File

@@ -18,7 +18,7 @@
<elements>
<div width="400" height="200">
<rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~bg_color">
<rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~color_bg">
<label text="Select set to edit" size="48" color="#ffffff" weight="bold" />
<div width="100%" flex_direction="row">
<div id="sets">
@@ -32,4 +32,4 @@
</rectangle>
</div>
</elements>
</layout>
</layout>

12
wlx-overlay-s/src/assets/gui/watch.xml
View File

@@ -19,10 +19,10 @@
border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical" />
<template name="Device">
<sprite color="~device_color" width="${size}" height="${size}" src="${src}" />
<div position="absolute" margin_top="10" margin_left="9">
<label _source="battery" _device="${device}" size="18" shadow="#000000" weight="bold" />
</div>
<sprite width="${size}" height="${size}" src="${src}" />
<div position="absolute" margin_top="10" margin_left="9">
<label _source="battery" _device="${device}" size="18" shadow="#000000" weight="bold" />
</div>
</template>
<template name="Set">
@@ -36,7 +36,7 @@
<elements>
<div width="460" height="260" padding="30" interactable="0">
<rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~bg_color">
<rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~color_bg">
<div width="100%" flex_direction="row">
<Device src="watch/hmd.svg" size="40" device="0" />
<Device src="watch/controller_l.svg" size="36" device="1" />
@@ -77,4 +77,4 @@
</rectangle>
</div>
</elements>
</layout>
</layout>