Mirrored_Repos/crafty-4
1
0
Fork 0
mirror of https://gitlab.com/crafty-controller/crafty-4.git synced 2024-08-30 18:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

First step to reworks themes and css files

Browse Source
This commit is contained in:
Silversthorn 2024-03-04 01:19:00 +01:00
parent e453950a67
commit a07a550125
11 changed files with 31230 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/classes/shared/helpers.py
View File

@ -585,9 +585,17 @@ class Helpers:
)
return False
@staticmethod
def get_themes():
return ["default", "dark", "light", "ronald"]
def get_themes(self):
theme_list = []
themes_path = os.path.join(self.webroot, "static", "assets", "css", "themes")
theme_files = [
file
for file in os.listdir(themes_path)
if os.path.isfile(os.path.join(themes_path, file))
]
for theme in theme_files:
theme_list.append(theme.split(".css")[0])
return theme_list
@staticmethod
def get_local_ip():

1
app/classes/web/panel_handler.py
View File

@ -357,6 +357,7 @@ class PanelHandler(BaseHandler):
else None
),
"superuser": superuser,
"themes": self.helper.get_themes(),
}
try:
page_data["hosts_data"]["disk_json"] = json.loads(

30944
app/frontend/static/assets/css/base-style.css Normal file
View File

File diff suppressed because it is too large Load Diff

216
app/frontend/static/assets/css/dark/style.css
View File

@ -11,222 +11,6 @@
*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
root,
:root.default {
/*CHANGE THESE FOR THEMES*/
--tooltip-bg: black;
--select-bg: #dee0f4;
--ram-bg: #323550;
--base-text: #b9c0d3;
--outline: #383e5d;
--card-banner-bg: #282a40;
--deep-bg: #1C1E2F;
--dropdown-bg: #222437;
/*END THEME VARIATION*/
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: #ff0017;
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: #58d8a3;
--cyan: #57c7d4;
--white: #ffffff;
--white-smoke: #f3f5f6;
--gray: #6c757d;
--gray-light: #8ba2b5;
--gray-lightest: #f7f7f9;
--primary: #2196f3;
--secondary: #dde4eb;
--success: #19d895;
--info: #8862e0;
--warning: #ffaf00;
--danger: #ff6258;
--light: #fbfbfb;
--dark: #252C46;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
:root.anti-lockout {
/*CHANGE THESE FOR THEMES*/
--tooltip-bg: rgb(215, 82, 0);
--select-bg: #b8772c;
--ram-bg: #4d4d4e;
--base-text: white;
--outline: #c73929;
--card-banner-bg: #de7c26;
--deep-bg: #912f2f;
--dropdown-bg: #c83b3b;
/*END THEME VARIATION*/
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: #ff0017;
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: #58d8a3;
--cyan: #57c7d4;
--white: #ffffff;
--white-smoke: #f3f5f6;
--gray: #6c757d;
--gray-light: #8ba2b5;
--gray-lightest: #f7f7f9;
--primary: #dbc900;
--secondary: #dde4eb;
--success: #adff84;
--info: #dbc900;
--warning: #ffaf00;
--danger: #ff6258;
--light: #fbfbfb;
--dark: #252C46;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
:root.light {
/*CHANGE THESE FOR THEMES*/
--tooltip-bg: white;
--select-bg: #dee0f4;
--ram-bg: #4d4d4e;
--base-text: black;
--outline: #383e5d;
--card-banner-bg: #e0e0e0;
--deep-bg: #F5F5F5;
--dropdown-bg: #d8d8d8;
/*END THEME VARIATION*/
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: #ff0017;
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: #58d8a3;
--cyan: #57c7d4;
--white: #ffffff;
--white-smoke: #f3f5f6;
--gray: #6c757d;
--gray-light: #8ba2b5;
--gray-lightest: #f7f7f9;
--primary: #2196f3;
--secondary: #dde4eb;
--success: #449c4b;
--info: #8862e0;
--warning: #ffaf00;
--danger: #ff6258;
--light: #fbfbfb;
--dark: #252C46;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
:root.dark {
/*CHANGE THESE FOR THEMES*/
--tooltip-bg: black;
--select-bg: #dee0f4;
--ram-bg: #3d3d3d;
--base-text: #b9c0d3;
--outline: #3f3f3f;
--card-banner-bg: #212221;
--deep-bg: #0d0d0d;
--dropdown-bg: #171717;
/*END THEME VARIATION*/
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: #ff0017;
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: #58d8a3;
--cyan: #57c7d4;
--white: #ffffff;
--white-smoke: #f3f5f6;
--gray: #6c757d;
--gray-light: #8ba2b5;
--gray-lightest: #f7f7f9;
--primary: #2196f3;
--secondary: #dde4eb;
--success: #19d895;
--info: #8862e0;
--warning: #ffaf00;
--danger: #ff6258;
--light: #fbfbfb;
--dark: #252C46;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
:root.ronald {
/*CHANGE THESE FOR THEMES*/
--tooltip-bg: white;
--select-bg: #dee0f4;
--card-banner-bg: white;
--deep-bg: yellow;
--dropdown-bg: red;
--ram-bg: #4d4d4e;
--base-text: black;
--outline: #383e5d;
/*END THEME VARIATION*/
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: #ff0017;
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: #58d8a3;
--cyan: #57c7d4;
--white: #ffffff;
--white-smoke: #f3f5f6;
--gray: #6c757d;
--gray-light: #8ba2b5;
--gray-lightest: #f7f7f9;
--primary: #2196f3;
--secondary: #dde4eb;
--success: #19d895;
--info: #8862e0;
--warning: #ffaf00;
--danger: #ff6258;
--light: #fbfbfb;
--dark: #252C46;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
*,
*::before,
*::after {

42
app/frontend/static/assets/css/themes/anti-lockout.css Normal file
View File

@ -0,0 +1,42 @@
:root.anti-lockout {
/*CHANGE THESE FOR THEMES*/
--tooltip-bg: rgb(215, 82, 0);
--select-bg: #b8772c;
--ram-bg: #4d4d4e;
--base-text: white;
--outline: #c73929;
--card-banner-bg: #de7c26;
--deep-bg: #912f2f;
--dropdown-bg: #c83b3b;
/*END THEME VARIATION*/
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: #ff0017;
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: #58d8a3;
--cyan: #57c7d4;
--white: #ffffff;
--white-smoke: #f3f5f6;
--gray: #6c757d;
--gray-light: #8ba2b5;
--gray-lightest: #f7f7f9;
--primary: #dbc900;
--secondary: #dde4eb;
--success: #adff84;
--info: #dbc900;
--warning: #ffaf00;
--danger: #ff6258;
--light: #fbfbfb;
--dark: #252C46;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

42
app/frontend/static/assets/css/themes/dark.css Normal file
View File

@ -0,0 +1,42 @@
:root.dark {
/*CHANGE THESE FOR THEMES*/
--tooltip-bg: black;
--select-bg: #dee0f4;
--ram-bg: #3d3d3d;
--base-text: #b9c0d3;
--outline: #3f3f3f;
--card-banner-bg: #212221;
--deep-bg: #0d0d0d;
--dropdown-bg: #171717;
/*END THEME VARIATION*/
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: #ff0017;
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: #58d8a3;
--cyan: #57c7d4;
--white: #ffffff;
--white-smoke: #f3f5f6;
--gray: #6c757d;
--gray-light: #8ba2b5;
--gray-lightest: #f7f7f9;
--primary: #2196f3;
--secondary: #dde4eb;
--success: #19d895;
--info: #8862e0;
--warning: #ffaf00;
--danger: #ff6258;
--light: #fbfbfb;
--dark: #252C46;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

44
app/frontend/static/assets/css/themes/default.css Normal file
View File

@ -0,0 +1,44 @@
root,
:root.default {
/*CHANGE THESE FOR THEMES*/
--tooltip-bg: black;
--base-bg: #dee0f4;
--select-bg: #dee0f4;
--ram-bg: #323550;
--base-text: #b9c0d3;
--outline: #383e5d;
--card-banner-bg: #282a40;
--deep-bg: #1C1E2F;
--dropdown-bg: #222437;
/*END THEME VARIATION*/
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: #ff0017;
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: #58d8a3;
--cyan: #57c7d4;
--white: #ffffff;
--white-smoke: #f3f5f6;
--gray: #6c757d;
--gray-light: #8ba2b5;
--gray-lightest: #f7f7f9;
--primary: #2196f3;
--secondary: #dde4eb;
--success: #19d895;
--info: #8862e0;
--warning: #ffaf00;
--danger: #ff6258;
--light: #fbfbfb;
--dark: #252C46;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

42
app/frontend/static/assets/css/themes/light.css Normal file
View File

@ -0,0 +1,42 @@
:root.light {
/*CHANGE THESE FOR THEMES*/
--tooltip-bg: white;
--select-bg: #dee0f4;
--ram-bg: #4d4d4e;
--base-text: black;
--outline: #383e5d;
--card-banner-bg: #e0e0e0;
--deep-bg: #F5F5F5;
--dropdown-bg: #d8d8d8;
/*END THEME VARIATION*/
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: #ff0017;
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: #58d8a3;
--cyan: #57c7d4;
--white: #ffffff;
--white-smoke: #f3f5f6;
--gray: #6c757d;
--gray-light: #8ba2b5;
--gray-lightest: #f7f7f9;
--primary: #2196f3;
--secondary: #dde4eb;
--success: #449c4b;
--info: #8862e0;
--warning: #ffaf00;
--danger: #ff6258;
--light: #fbfbfb;
--dark: #252C46;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

42
app/frontend/static/assets/css/themes/ronald.css Normal file
View File

@ -0,0 +1,42 @@
:root.ronald {
/*CHANGE THESE FOR THEMES*/
--tooltip-bg: white;
--select-bg: #dee0f4;
--card-banner-bg: white;
--deep-bg: yellow;
--dropdown-bg: red;
--ram-bg: #4d4d4e;
--base-text: black;
--outline: #383e5d;
/*END THEME VARIATION*/
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: #ff0017;
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: #58d8a3;
--cyan: #57c7d4;
--white: #ffffff;
--white-smoke: #f3f5f6;
--gray: #6c757d;
--gray-light: #8ba2b5;
--gray-lightest: #f7f7f9;
--primary: #2196f3;
--secondary: #dde4eb;
--success: #19d895;
--info: #8862e0;
--warning: #ffaf00;
--danger: #ff6258;
--light: #fbfbfb;
--dark: #252C46;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

45
app/frontend/static/assets/css/themes/root.css Normal file
View File

@ -0,0 +1,45 @@
:root {
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: var(--red);
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: var(--teal);
--cyan: var(--cyan);
--white: var(--white);
--gray: var(--gray);
--gray-dark: #292b2c;
--blue: #00aeef;
--indigo: #6610f2;
--purple: #ab8ce4;
--pink: #E91E63;
--red: var(--red);
--orange: #fb9678;
--yellow: #ffd500;
--green: #3bd949;
--teal: var(--teal);
--cyan: var(--cyan);
--white: var(--white);
--white-smoke: var(--white-smoke);
--gray: var(--gray);
--gray-light: #8ba2b5;
--gray-lightest: var(--gray-lightest);
--primary: var(--primary);
--secondary: var(--secondary);
--success: var(--success);
--info: var(--info);
--warning: var(--warning);
--danger: var(--danger);
--light: var(--light);
--dark: var(--dark);
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

30
app/frontend/templates/base.html
View File

@ -37,12 +37,16 @@
<!-- End Plugin css for this page-->
<!-- Layout styles -->
<link rel="stylesheet" href="/static/assets/css/dark/style.css">
{% for theme in data['themes'] %}
<link rel="stylesheet" href="/static/assets/css/themes/{{ theme }}.css">
{% end %}
<!--<link rel="stylesheet" href="/static/assets/css/dark/style.css">-->
<link rel="stylesheet" href="/static/assets/css/base-style.css">
<link rel="stylesheet" href="/static/assets/css/crafty.css">
<!-- End Layout styles -->
<link rel="shortcut icon" type="image/svg+xml" href="/static/assets/images/logo_small.svg">
<link rel="alternate icon" href="/static/assets/images/favicon.png" />
<link rel="stylesheet" href="/static/assets/css/crafty.css">
<!-- Alpine.js - The modern jQuery alternative -->
<script defer src="../static/assets/vendors/js/cdn.min.js"></script>
@ -256,9 +260,9 @@
const sendWssError = () => wsOpen || warn(
'WebSockets are required for Crafty to work. This websocket connection has been closed. Are you using a reverse proxy?',
link='https://docs.craftycontrol.com/pages/getting-started/proxies/',
link_msg="See our documentation for details",
className='wssError'
link = 'https://docs.craftycontrol.com/pages/getting-started/proxies/',
link_msg = "See our documentation for details",
className = 'wssError'
)
function startWebSocket() {
@ -460,7 +464,7 @@
}
function warn(message, link = null, link_msg=null, className = null, bg_color="#f7970f") {
function warn(message, link = null, link_msg = null, className = null, bg_color = "#f7970f") {
var closeEl = document.createElement('span');
var strongEL = document.createElement('strong');
var msgEl = document.createElement('div');
@ -581,13 +585,13 @@
$(document).ready(function () {
console.log('%c[Crafty Controller] %cReady for JS!', 'font-weight: 900; color: #800080;', 'font-weight: 900; color: #eee;');
if ($(document.documentElement).data("username") === "anti-lockout-user"){
if ($(document.documentElement).data("username") === "anti-lockout-user") {
warn(
'⚠️You are in a recovery account. Access is limited!',
link='/logout',
link_msg="Click here to log out after you change your password. ⚠️",
className='anti-lockout',
bg_color='#6887dc'
'⚠️You are in a recovery account. Access is limited!',
link = '/logout',
link_msg = "Click here to log out after you change your password. ⚠️",
className = 'anti-lockout',
bg_color = '#6887dc'
)
}
$('#support_logs').click(function () {
@ -618,4 +622,4 @@
</body>
</html>
</html>