Web: Launch Options (#109, Fixes #104)

tkashkin · Feb 9, 2023 · 976c45f · 976c45f
1 parent f3919f9
commit 976c45f
Show file tree

Hide file tree

Showing 5 changed files with 215 additions and 109 deletions.
diff --git a/extras/web/base/11_launch_options.css b/extras/web/base/11_launch_options.css
@@ -116,19 +116,23 @@
 
 [class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox
 {
-	background: var(--checkbox_bg) !important;
-	border-radius: var(--checkbox_radius) !important;
+	background-color: var(--checkbox_bg) !important;
 	box-shadow: var(--checkbox_bs) !important;
+	border-radius: var(--checkbox_radius) !important;
+	height: 20px !important;
+	width: 20px !important;
+	margin-top: 3px !important;
 }
 
-[class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox:active
+[class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox:hover
 {
-	background: var(--button_hover_bg) !important;
+	box-shadow: var(--checkbox_hover_bs) !important;
 }
 
-[class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox:focus
+[class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox:active:not(.Active)
 {
-	outline: none !important;
+	box-shadow: none !important;
+	background: var(--checkbox_active_bg) !important;
 }
 
 [class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox.Active
@@ -141,27 +145,34 @@
 
 [class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox.Active:hover
 {
-	background: var(--button_suggested_hover_bg) !important;
+	background-color: var(--button_suggested_hover_bg) !important;
 }
 
 [class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox.Active:active
 {
-	background: var(--button_suggested_click_bg) !important;
+	background-color: var(--button_suggested_click_bg) !important;
 }
 
-[class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox > svg
+[class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox svg
 {
 	stroke-width: var(--checkbox_checked_sw) !important;
 }
 
-[class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox > svg > path
+[class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox svg path
 {
-	stroke: var(--button_fg) !important;
+	stroke: var(--fg) !important;
+	d: path("M 185 63 L 92 170 l -53 -52") !important;
+	transition: none !important;
+}
+
+[class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogCheckbox_Container
+{
+	margin-bottom: 9px !important;
 }
 
 [class*="launchoptionsdialog_LaunchOptionDialog_"] .DialogToggle_Label
 {
-	padding-top: 2px !important;
+	padding-top: 4px !important;
 	color: var(--button_fg) !important;
 	font-family: var(--basefont) !important;
 	font-size: 14px !important;
@@ -238,3 +249,26 @@
 	background: rgba(120, 174, 237, 0.16) !important;
 }
 
+[class*="launchoptionsdialog_ListContainer_"] input[type="radio"]
+{
+	appearance: var(--radio_appearance) !important;
+	border: var(--radio_border) !important;
+	border-radius: var(--radio_radius) !important;
+	min-height: var(--radio_min_height) !important;
+	min-width: var(--radio_min_width) !important;
+}
+
+[class*="launchoptionsdialog_ListContainer_"] input[type="radio"]:checked
+{
+	appearance: var(--radio_appearance) !important;
+	background: var(--radio_checked_bg) !important;
+	border-radius: var(--radio_radius) !important;
+	border: var(--radio_checked_border) !important;
+	min-height: var(--radio_min_height) !important;
+	min-width: var(--radio_min_width) !important;
+}
+
+[class*="launchoptionsdialog_ListContainer_"] input[type="radio"]:focus
+{
+	outline: none !important;
+}
diff --git a/extras/web/base/1_root.css b/extras/web/base/1_root.css
@@ -88,6 +88,16 @@
 	--checkbox_radius: 6px;
 	--checkbox_bg: transparent;
 	--checkbox_bs: inset 0px 0px 0px 2px var(--button_hover_bg);
+	--checkbox_hover_bs: inset 0px 0px 0px 2px var(--button_active_bg);
+	--checkbox_active_bg: var(--button_active_bg);
+
+	--radio_appearance: none;
+	--radio_border: solid 2px var(--button_hover_bg);
+	--radio_checked_bg: var(--button_fg);
+	--radio_checked_border: solid 6px var(--accent_bg);
+	--radio_min_height: 20px;
+	--radio_min_width: 20px;
+	--radio_radius: 50%;
 
 	--card_bg: rgba(255, 255, 255, 0.1);
 	--card_fg: var(--fg);

diff --git a/extras/web/base/7_dialogs.css b/extras/web/base/7_dialogs.css
@@ -0,0 +1,79 @@
+/* Window controls */
+.title-bar-actions
+{
+	position: absolute !important;
+	top: 12px !important;
+	right: 12px !important;
+}
+
+.title-bar-actions .title-area-icon
+{
+	width: 24px !important;
+	height: 24px !important;
+	border-radius: 50% !important;
+	margin-left: 14px !important;
+	background-color: var(--button_bg) !important;
+	transition: var(--focus_transition) !important;
+}
+
+.title-bar-actions .title-area-icon:hover
+{
+	background-color: var(--button_hover_bg) !important;
+}
+
+.title-bar-actions .title-area-icon:active
+{
+	background-color: var(--button_active_bg) !important;
+}
+
+.title-bar-actions .title-area-icon > svg
+{
+	width: 12px !important;
+	height: 12px !important;
+	margin-left: 6px !important;
+	margin-top: 6px !important;
+}
+
+.title-bar-actions .title-area-icon > svg > *
+{
+	stroke: var(--headerbar_fg) !important;
+	stroke-width: 32px !important;
+}
+
+.title-bar-actions .title-area-icon.minimizeButton,
+.title-bar-actions .title-area-icon.maximizeButton
+{
+	display: none !important;
+}
+
+.title-area-icon.maximizeButton svg
+{
+	width: 7px !important;
+	margin-left: 9px !important;
+	margin-top: 6px !important;
+}
+
+.title-area-icon.maximizeButton svg rect
+{
+	width: 160px !important;
+	height: 160px !important;
+	stroke-width: 70px !important;
+}
+
+.title-area-icon.maximizeButton svg line
+{
+	display: none !important;
+}
+
+.title-area-icon.minimizeButton svg
+{
+	width: 10px !important;
+	margin-left: 7px !important;
+}
+
+/* Blue Line on Dialog Window */
+.ModalPosition_TopBar
+{
+	display: none !important;
+}
+