Update samy.css

This commit is contained in:
2025-11-26 20:21:08 -05:00
parent c2182d8209
commit 56e84694fa

View File

@@ -1,21 +1,24 @@
:root { :root {
/* Cool Palette */ /* Cool Palette */
--background-color: rgba(18, 18, 18, 1); --background-color: rgba(18, 18, 18, 1);
--border-color: rgba(255,127,0,0.25); --border-color: rgba(255, 127, 0, 0.25);
/* Neutral Colors */ /* Neutral Colors */
--white-color: rgba(255,255,255); --white-color: rgba(255, 255, 255);
--gray-color: rgba(102,102,102); --gray-color: rgba(102, 102, 102);
--dark-gray-color: rgba(51,51,51); --dark-gray-color: rgba(51, 51, 51);
--light-gray-color: rgba(187,187,187); --light-gray-color: rgba(187, 187, 187);
/* Sidebar Button Colors */ /* Sidebar Button Colors */
--btn-sidebar-light-gray: rgba(68,68,68); --btn-sidebar-light-gray: rgba(68, 68, 68);
--btn-sidebar-blue: rgba(30,144,255,1); --btn-sidebar-blue: rgba(30, 144, 255, 1);
--btn-hover: rgba(0,86,179,1); --btn-hover: rgba(0, 86, 179, 1);
--btn-hover-scale: 1.05; --btn-hover-scale: 1.05;
/* Button Colors */ /* Button Colors */
--btn-success: rgba(40,167,69); --btn-success: rgba(40, 167, 69);
--btn-success-disabled: rgba(108,117,125); --btn-success-disabled: rgba(108, 117, 125);
--btn-danger: rgba(220,53,69); --btn-danger: rgba(220, 53, 69);
/* Monkey + status panel settings */ /* Monkey + status panel settings */
--monkey-size: 160px; /* size of SAMY */ --monkey-size: 160px; /* size of SAMY */
@@ -24,6 +27,11 @@
--status-height: 140px; /* max height of status box */ --status-height: 140px; /* max height of status box */
} }
/* Make sizing easier to reason about */
*, *::before, *::after {
box-sizing: border-box;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0; margin: 0;
@@ -78,8 +86,8 @@ body {
padding: 8px 10px; padding: 8px 10px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
background: rgba(255,255,255,0.06); background: rgba(255, 255, 255, 0.06);
font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol',system-ui,sans-serif; font-family: "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", system-ui, sans-serif;
font-size: 12px; font-size: 12px;
line-height: 1.35; line-height: 1.35;
z-index: 1; z-index: 1;
@@ -182,7 +190,7 @@ body {
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
background-color: var(--dark-gray-color); background-color: var(--dark-gray-color);
box-shadow: 0 4px 6px rgba(0,0,0,0.3); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
} }
.checkbox-group label { .checkbox-group label {
@@ -191,8 +199,7 @@ body {
margin-bottom: 8px; margin-bottom: 8px;
} }
/* Inputs / buttons in password & dropdown areas */ /* Inputs / buttons in password and dropdown areas */
/* Inputs / buttons in password & dropdown areas */
#PasswordContainer, #PasswordContainer,
#dattoRmmContainer { #dattoRmmContainer {
margin: 16px 0; margin: 16px 0;
@@ -231,7 +238,6 @@ body {
/* Dropdown fills the whole panel width */ /* Dropdown fills the whole panel width */
#dattoRmmContainer select { #dattoRmmContainer select {
width: 100%; width: 100%;
box-sizing: border-box;
} }
/* GO button styling */ /* GO button styling */
@@ -248,7 +254,6 @@ body {
transform: scale(1.03); transform: scale(1.03);
} }
/* Tag line */ /* Tag line */
.tagline { .tagline {
font-size: 1.2rem; font-size: 1.2rem;
@@ -262,7 +267,18 @@ body {
.container { .container {
flex-direction: column; flex-direction: column;
} }
.sidebar { .sidebar {
width: 100%; width: 100%;
} }
.column {
max-width: 100%;
}
#PasswordContainer,
#dattoRmmContainer {
width: 100%;
max-width: 100%;
}
} }