Bellsworne/sessionzero
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clearing out template stuff and adding basic styles

Browse Source
This commit is contained in:
chris bell
2026-07-17 22:29:57 -05:00
parent 0266d84572
commit fb1ad02406
25 changed files with 186 additions and 659 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/fonts/PTSerif-Regular.ttf Normal file
View File

Binary file not shown.

53
assets/images/icon.svg Executable file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
assets/images/logo-medium.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

9
assets/main.rml
View File

@@ -1,15 +1,14 @@
<rml>
<head>
<title>RmlUi Temaplate</title>
<title>SessionZero</title>
<link type="text/rcss" href="styles/main.rcss" />
</head>
<body>
<div id="navbar">
<h1>RmlUi App Template</h1>
<svg class="logo" src="images/icon.svg"></svg>
<h1>SessionZero</h1>
<div class="nav-buttons">
<button id="nav-home">Home</button>
<button id="nav-test">C++ Test Page</button>
<button id="nav-lua-test" onclick="NavigateTo('lua-test')">Lua Test</button>
<button class="btn-primary" onclick="NavigateTo('home')" id="nav-home">Home</button>
</div>
</div>
<div id="page-content"></div>

11
assets/pages/home.rml
View File

@@ -1,14 +1,3 @@
<div id="page-root" class="page">
<h1>Home</h1>
<p>This is an RmlUi template project with some nice built in features such as:</p>
<ul>
<li>- Lua and SVG plugins enabled</li>
<li>- A shell + page loading system with scoped stylesheets and lua functionality</li>
<li>- Hot reload when pressing F5</li>
<li>- Basic application state management</li>
<li>- A basic stylesheet for common elements</li>
<li>- Easy custom controls system</li>
<li>- Optional Raylib context</li>
<li>- Nix flake for easy development/building</li>
</ul>
</div>

17
assets/pages/lua-test.lua
View File

@@ -1,17 +0,0 @@
LuaTest = {}
local counter = 0
function LuaTest.Test(event)
counter = counter + 1
local document = event.current_element.owner_document
local target = document:GetElementById("lua-counter")
if target then
target.inner_rml = "Lua Counter: " .. counter
end
print("Lua counter incremented to: " .. counter)
end

0
assets/pages/lua-test.rcss
View File

11
assets/pages/lua-test.rml
View File

@@ -1,11 +0,0 @@
<div id="page-root">
<h1>Lua test page</h1>
<p>This button uses <code>NavigateTo('about')</code> lua code instead of being harcoded in a C++ PageBase class:</p>
<button onclick="NavigateTo('about')">Go to About Page</button>
<p>If you have a .lua file with the same name as the page in the pages directory, it will be loaded at runtime so you can add functionality to a page like this:</p>
<p>This button calls <code>LuaTest.Test()</code> from the scoped `lua-test.lua` file</p>
<button onclick="LuaTest.Test(event)">Click me!</button>
<p id="lua-counter"></p>
</div>

28
assets/pages/test-page.lua
View File

@@ -1,28 +0,0 @@
TestPage = {}
local maxHp = 100
local currentHp = 100
function TestPage.Damage(event)
currentHp = currentHp - 5
local document = event.current_element.owner_document
local target = document:GetElementById("hp-bar")
if target then
target:SetAttribute("current", currentHp)
end
end
function TestPage.Heal(event)
currentHp = currentHp + 5
local document = event.current_element.owner_document
local target = document:GetElementById("hp-bar")
if target then
target:SetAttribute("current", currentHp)
end
end

17
assets/pages/test-page.rcss
View File

@@ -1,17 +0,0 @@
#page-root h1 {
color: red;
}
.healthbar-track {
display: block;
width: 200px;
height: 16px;
background-color: #3c3c3c;
border: 1px #666666;
}
.healthbar-fill {
display: block;
height: 100%;
background-color: #ffffff;
}

13
assets/pages/test-page.rml
View File

@@ -1,13 +0,0 @@
<div id="page-root" data-model="test-page" class="page">
<h1>Test page</h1>
<p>{{greeting}}</p>
<button id="test-btn">Button clicked: {{counter}} times</button>
<p>If you have a .rcss file with the same name as the page in the pages directory, it will be loaded at runtime so you can add custom styling to a page, which is why the header is red on this page only.</p>
<p>This next section demonstates two things, the custom <code>"healthbar"</code> rml element, and scoped lua with the damage and heal buttons</p>
<healthbar id="hp-bar" current="100" max="100"></healthbar>
<button onclick="TestPage.Damage(event)">Damage</button>
<button onclick="TestPage.Heal(event)">Heal</button>
</div>

92
assets/styles/main.rcss
View File

@@ -1,25 +1,33 @@
/* ==========================================================================
RCSS User Agent Defaults (Plain HTML Style)
========================================================================== */
* {
box-sizing: border-box;
font-family: "PT Serif";
}
/* Core Application Window Foundation */
body {
display: block;
--background-color: #1a202e; /* Deep navy night */
--primary-color: #3a4f6f; /* Rich medium blue */
--secondary-color: #2d3f5c; /* Deeper blue */
--accent-color: #5b89b3; /* Glowing blue highlight */
--text-color: #ffffff; /* Pure white */
--heading-color: #c5d5e6; /* Soft sky blue */
--form-background: #222837; /* Slightly lighter background */
--text-on-primary: #ffffff; /* White text */
--button-text: #ffffff; /* White text */
--neutral-light: #d8e1ea; /* Bright blue-white */
--neutral-medium: #8494a7; /* Muted blue-gray */
--neutral-dark: #2d364a; /* Deep blue shadow */
font-size: 24px;
color: var(--text-color);
background-color: var(--background-color);
width: 100vw;
height: 100vh;
font-family: "rmlui-debugger-font";
font-size: 16px;
background-color: #ffffff;
color: #000000;
margin: 0px;
padding: 0px;
}
/* Generic Structural Layout Defaults */
* {
box-sizing: border-box;
}
div, section, article, header, footer, main, nav, aside {
display: block;
}
@@ -38,6 +46,7 @@ h1, h2, h3, h4, h5, h6 {
display: block;
font-weight: bold;
margin: 0.83em 0px;
color: var(--heading-color);
}
h1 { font-size: 2em; }
@@ -137,7 +146,7 @@ thead, tbody, tfoot {
========================================================================== */
button, input, select, textarea {
display: inline-block;
font-family: "rmlui-debugger-font";
/* font-family: "rmlui-debugger-font"; */
font-size: 14px;
margin: 2px;
vertical-align: middle;
@@ -267,7 +276,9 @@ progress-value {
}
/* ==========================================================================
Shell
========================================================================== */
#navbar {
@@ -277,13 +288,14 @@ progress-value {
align-items: center;
width: 100%;
height: 60px;
height: 70px;
padding: 0px 20px;
background-color: #2b2baa;
background-color: transparent;
box-shadow: #000a 0px 6px 8px;
}
#navbar h1 {
color: #ffffff;
color: var(--heading-color);
font-size: 24px;
margin: 0px;
}
@@ -296,19 +308,41 @@ progress-value {
#navbar button {
padding: 8px 16px;
background-color: #3c3c3c;
color: #e0e0e0;
border: 1px #666666;
}
#navbar button:hover {
background-color: #55555a;
#navbar svg.logo {
width: 50px;
height: 50px;
}
/* Page Content Base */
#page-content {
display: block;
padding: 20px;
background-color: #1a1a1a;
color: #f0f0f0;
padding: 2rem;
background-color: var(--background-color);
color: var(--text-color);
margin-top: 15px;
}
/* Custom controls */
button.btn-primary {
transition: background-color 0.2s exponential-in-out;
display: inline-block;
min-width: 100px;
min-height: 35px;
padding: 0.75rem 1.5rem;
text-decoration: none;
background-color: var(--primary-color);
border-radius: 4px;
border-color: transparent;
color: var(--text-color);
font-size: 16px;
} button.btn-primary:hover {
background-color: var(--secondary-color);
cursor: pointer;
}
/* button.btn-primary:active {
background-color: #3e8e41;
border-color: #245325;
} */