add csv page uses blender theme css variables

This commit is contained in:
Ziad-I
2024-08-03 11:54:47 +03:00
committed by Dion Moult
parent 45042aa5e0
commit e45a670ff5
4 changed files with 99 additions and 14 deletions
@@ -103,7 +103,7 @@ nav ul li a.active {
}
.warning {
color: var(--warning-color);
color: var(--blender-info-warning, var(--warning-color));
margin-bottom: var(--margin-small);
padding: var(--padding-tiny);
display: none;
@@ -128,7 +128,7 @@ nav ul li a.active {
overflow: hidden;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
border: 1px solid var(--blender-tab-outline, var(--table-border-color));
background-color: var(--blender-panel-background-color, var(--nav-bg-color));
background-color: var(--blender-panel-background, var(--nav-bg-color));
z-index: 1;
opacity: 0;
visibility: hidden;
@@ -155,7 +155,7 @@ nav ul li a.active {
overflow: hidden;
padding-left: var(--padding-small);
transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
background-color: var(--blender-panel-background-color, var(--nav-bg-color));
background-color: var(--blender-panel-background, var(--nav-bg-color));
margin-top: var(--margin-tiny);
opacity: 0;
}
@@ -173,7 +173,6 @@ nav ul li a.active {
#show-connected-button {
width: auto;
background-color: var(--blender-panel-header, var(--bg-color));
border: none;
font-size: var(--base-font-size);
color: var(--blender-text, var(--text-color))
}
@@ -211,6 +210,17 @@ footer p {
margin-top: var(--margin-small);
}
:root.blender button {
background-color: var(--blender-panel-header);
color: var(--blender-text);
border-color: var(--blender-tab-outline);
transition: filter 0.2s ease;
}
:root.blender button:hover {
filter: brightness(1.2);
}
/* ------------ Overwriting Tabulator CSS rules ------------ */
:root.light .tabulator-header,
@@ -222,4 +232,67 @@ footer p {
:root.light .tabulator {
border-top: 1px solid var(--table-border-color);
border-bottom: 2px solid var(--table-border-color);
}
:root.blender .tabulator-table-holder,
:root.blender .tabulator {
background-color: var(--blender-panel-background) !important;
}
:root.blender .tabulator-header {
border-bottom-color: var(--blender-tab-outline);
color: var(--blender-text);
}
:root.blender .tabulator-header,
:root.blender .tabulator .tabulator-header .tabulator-col {
background-color: var(--blender-panel-header) !important;
}
:root.blender .tabulator {
border-top-color: var(--blender-tab-outline);
border-bottom-color: var(--blender-tab-outline);
color: var(--blender-text);
}
:root.blender .tabulator-row-odd .tabulator-cell {
background-color: var(--blender-odd-row);
transition: filter 0.2s ease;
}
:root.blender .tabulator-row-even .tabulator-cell {
background-color: var(--blender-even-row);
transition: filter 0.2s ease;
}
:root.blender .tabulator-row-odd:hover .tabulator-cell,
:root.blender .tabulator-row-even:hover .tabulator-cell {
filter: brightness(1.4);
}
:root.blender .tabulator-row,
:root.blender .tabulator-cell {
color: var(--blender-text);
}
:root.blender .tabulator-selected .tabulator-cell {
background-color: var(--blender-selected-object) !important;
}
:root.blender .tabulator-selected:hover .tabulator-cell {
background-color: var(--blender-active-object) !important;
filter: brightness(1)
}
.tabulator-menu-item {
color: var(--blender-text) !important;
background-color: var(--blender-panel-background) !important;
transition: filter 0.1s ease;
}
.tabulator-menu-item:hover {
filter: brightness(1.4);
}
@@ -8,7 +8,8 @@ $(document).ready(function () {
var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
? "light"
: "dark";
var theme = localStorage.getItem("theme") || systemTheme;
var defaultTheme = "blender";
var theme = localStorage.getItem("theme") || defaultTheme;
setTheme(theme);
connectSocket();
@@ -297,30 +298,33 @@ function compareHeaders(headers1, headers2) {
}
function setTheme(theme) {
$("html").removeClass("light dark blender").addClass(theme);
var stylesheet = $("#tabulator-stylesheet");
if (theme === "light") {
stylesheet.attr(
"href",
"https://unpkg.com/tabulator-tables/dist/css/tabulator_site.min.css"
);
$("html").removeClass("dark").addClass("light");
$("#toggle-theme").html('<i class="fas fa-sun"></i>');
} else {
} else if (theme === "dark") {
stylesheet.attr(
"href",
"https://unpkg.com/tabulator-tables/dist/css/tabulator_site_dark.min.css"
);
$("html").removeClass("light").addClass("dark");
$("#toggle-theme").html('<i class="fas fa-moon"></i>');
} else if (theme === "blender") {
$("#toggle-theme").html('<i class="fas fa-adjust"></i>');
}
localStorage.setItem("theme", theme);
}
function toggleTheme() {
if ($("html").hasClass("dark")) {
setTheme("light");
} else {
if ($("html").hasClass("light")) {
setTheme("dark");
} else if ($("html").hasClass("dark")) {
setTheme("blender");
} else {
setTheme("light");
}
}
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<html lang="en" class="blender">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+10 -2
View File
@@ -381,7 +381,9 @@ class Web(blenderbim.core.tool.Web):
return tuple(getattr(theme, attribute)[:])
def mix_colors(color1, color2):
alpha1, alpha2 = color1[3] * 255, color2[3] * 255
alpha1 = color1[3] * 255 if len(color1) > 3 else 255
alpha2 = color2[3] * 255 if len(color2) > 3 else 255
alpha = 255 - ((255 - alpha1) * (255 - alpha2) / 255)
red = (color1[0] * (255 - alpha2) + color2[0] * alpha2) / 255
green = (color1[1] * (255 - alpha2) + color2[1] * alpha2) / 255
@@ -392,6 +394,9 @@ class Web(blenderbim.core.tool.Web):
panel = prefs.panelcolors
view_3d = bpy.context.preferences.themes[0].view_3d
top_bar = bpy.context.preferences.themes[0].topbar.space
info = bpy.context.preferences.themes[0].info
file_browser = bpy.context.preferences.themes[0].file_browser
theme = {
"window_background": get_color(prefs, "back"),
"text": get_color(prefs, "text"),
@@ -399,11 +404,14 @@ class Web(blenderbim.core.tool.Web):
"tab_outline": get_color(prefs, "tab_outline"),
"navigation_bar": get_color(prefs, "navigation_bar"),
"panel_header": get_color(panel, "header"),
"panel_background_color": mix_colors(get_color(panel, "back"), get_color(panel, "sub_back")),
"panel_background": mix_colors(get_color(panel, "back"), get_color(panel, "sub_back")),
"top_bar_header": get_color(top_bar, "header"),
"top_bar_header_text": get_color(top_bar, "header_text"),
"active_object": get_color(view_3d, "object_active"),
"selected_object": get_color(view_3d, "object_selected"),
"info_warning": get_color(info, "info_warning"),
"odd_row": get_color(file_browser.space, "back"),
"even_row": mix_colors(get_color(file_browser.space, "back"), get_color(file_browser, "row_alternate")),
}
cls.send_webui_data(theme, "theme", "theme_data", use_web_data=False)