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