diff --git a/extras/web/base/11_launch_options.css b/extras/web/base/11_launch_options.css index d5b07cfe..8fa9242b 100644 --- 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 index 7844f1db..d371d991 100644 --- 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 new file mode 100644 index 00000000..af1f9781 --- /dev/null +++ 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; +} + diff --git a/extras/web/full/7_dialogs.css b/extras/web/full/7_dialogs.css index 5685ab8a..4aafd686 100644 --- a/extras/web/full/7_dialogs.css +++ b/extras/web/full/7_dialogs.css @@ -12,11 +12,6 @@ font-weight: var(--baseweight) !important; } -.ModalPosition_TopBar -{ - display: none !important; -} - .ModalPosition_Content > .DialogContent { background: var(--popover_bg) !important; @@ -235,79 +230,6 @@ background: var(--destructive_active_bg) !important; } -/* 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; -} - /* PagedSettingsDialog */ .ModalDialogPopup .DialogContent:not(.GenericConfirmDialog), .ModalDialogPopup .DialogContent:not(.GenericConfirmDialog) .DialogContentTransition, @@ -417,7 +339,58 @@ } /* Checkboxes */ -.ModalDialogPopup .DialogCheckbox_Container +.ModalDialogPopup [class*="appproperties_AppProperties_"] [class*="appproperties_Install_"] > .DialogCheckbox +{ + background-color: var(--checkbox_bg) !important; + box-shadow: var(--checkbox_bs) !important; + border-radius: var(--checkbox_radius) !important; + height: 20px !important; + width: 20px !important; +} + +.ModalDialogPopup [class*="appproperties_AppProperties_"] [class*="appproperties_Install_"] > .DialogCheckbox:hover +{ + box-shadow: var(--checkbox_hover_bs) !important; +} + +.ModalDialogPopup [class*="appproperties_AppProperties_"] [class*="appproperties_Install_"] > .DialogCheckbox:active:not(.Active) +{ + box-shadow: none !important; + background: var(--checkbox_active_bg) !important; +} + +.ModalDialogPopup [class*="appproperties_AppProperties_"] [class*="appproperties_Install_"] > .DialogCheckbox.Active +{ + background: var(--checkbox_checked_bg) !important; + background-blend-mode: var(--button_suggested_blend) !important; + border-radius: var(--checkbox_radius) !important; + box-shadow: none !important; +} + +.ModalDialogPopup [class*="appproperties_AppProperties_"] [class*="appproperties_Install_"] > .DialogCheckbox.Active:hover +{ + background-color: var(--button_suggested_hover_bg) !important; +} + +.ModalDialogPopup [class*="appproperties_AppProperties_"] [class*="appproperties_Install_"] > .DialogCheckbox.Active:active +{ + background-color: var(--button_suggested_click_bg) !important; +} + +.ModalDialogPopup [class*="appproperties_AppProperties_"] [class*="appproperties_Install_"] > .DialogCheckbox svg +{ + stroke-width: var(--checkbox_checked_sw) !important; +} + +.ModalDialogPopup [class*="appproperties_AppProperties_"] [class*="appproperties_Install_"] > .DialogCheckbox svg path +{ + stroke: var(--fg) !important; + d: path("M 185 63 L 92 170 l -53 -52") !important; + transition: none !important; +} + +/* Checkboxes as Switches */ +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogCheckbox_Container { align-items: center !important; background: var(--entry_bg) !important; @@ -428,13 +401,13 @@ transition: var(--focus_transition) !important; } -.ModalDialogPopup .DialogCheckbox_Container:hover +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogCheckbox_Container:hover { background: var(--button_hover_bg) !important; box-shadow: none !important; } -.ModalDialogPopup .DialogCheckbox_Container:active +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogCheckbox_Container:active { background: var(--button_active_bg) !important; } @@ -447,7 +420,8 @@ font-weight: var(--label_weight) !important; } -.ModalDialogPopup .DialogCheckbox +.ModalDialogPopup [class*="appproperties_AppProperties_"] div:not([class*="appproperties_Install_"]) > .DialogCheckbox, +.FriendsSettingsNotificationRow_Checkbox .DialogCheckbox { background: var(--card_bg) !important; background-blend-mode: var(--button_suggested_blend) !important; @@ -458,59 +432,66 @@ min-width: 44px !important; } -.ModalDialogPopup .DialogCheckbox.Active +.ModalDialogPopup [class*="appproperties_AppProperties_"] div:not([class*="appproperties_Install_"]) > .DialogCheckbox.Active, +.FriendsSettingsNotificationRow_Checkbox .DialogCheckbox.Active { background: var(--button_suggested_bg) !important; } -.ModalDialogPopup .DialogCheckbox:hover +.ModalDialogPopup [class*="appproperties_AppProperties_"] div:not([class*="appproperties_Install_"]) > .DialogCheckbox:hover, +.FriendsSettingsNotificationRow_Checkbox .DialogCheckbox:hover { background-color: var(--button_suggested_hover_bg) !important; } -.ModalDialogPopup .DialogCheckbox:active +.ModalDialogPopup [class*="appproperties_AppProperties_"] div:not([class*="appproperties_Install_"]) > .DialogCheckbox:active, +.FriendsSettingsNotificationRow_Checkbox .DialogCheckbox:active { background-color: var(--button_suggested_click_bg) !important; } -.ModalDialogPopup .DialogCheckbox .SVGIcon_DialogCheck +.ModalDialogPopup [class*="appproperties_AppProperties_"] div:not([class*="appproperties_Install_"]) > .DialogCheckbox .SVGIcon_DialogCheck, +.FriendsSettingsNotificationRow_Checkbox .DialogCheckbox .SVGIcon_DialogCheck { opacity: 1 !important; transition: margin-left 60ms linear !important; margin-left: -2px !important; } -.ModalDialogPopup .DialogCheckbox.Active .SVGIcon_DialogCheck +.ModalDialogPopup [class*="appproperties_AppProperties_"] div:not([class*="appproperties_Install_"]) > .DialogCheckbox.Active .SVGIcon_DialogCheck, +.FriendsSettingsNotificationRow_Checkbox .DialogCheckbox.Active .SVGIcon_DialogCheck { margin-left: 20px !important; } -.ModalDialogPopup .DialogCheckbox svg path +.ModalDialogPopup [class*="appproperties_AppProperties_"] div:not([class*="appproperties_Install_"]) > .DialogCheckbox svg path, +.FriendsSettingsNotificationRow_Checkbox .DialogCheckbox svg path { d: path("M 100, 100 m -75, 0 a 160,160 0 1,0 320,0 a 160,160 0 1,0 -320,0") !important; fill: var(--fg) !important; stroke: none !important; + stroke-dasharray: none !important; } -.ModalDialogPopup .DialogControlsSection .DialogCheckbox_Container:not(:last-child):first-child, -.ModalDialogPopup .DialogBody .DialogCheckbox_Container:not(:last-child):first-child, -.ModalDialogPopup .DialogBody .DialogDropDown:not(:last-child):first-child +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogControlsSection .DialogCheckbox_Container:not(:last-child):first-child, +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogBody .DialogCheckbox_Container:not(:last-child):first-child, +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogBody .DialogDropDown:not(:last-child):first-child { border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; } -.ModalDialogPopup .DialogControlsSection .DialogCheckbox_Container:not(:first-child):last-child, -.ModalDialogPopup .DialogBody .DialogCheckbox_Container:not(:first-child):last-child, -.ModalDialogPopup .DialogBody .DialogDropDown:not(:first-child):last-child, -.ModalDialogPopup .DialogBody .DialogCheckbox_Container + .DialogInputLabelGroup > .DialogDropDown, -.ModalDialogPopup .DialogBody .DialogInputLabelGroup > .DialogDropDown + .DialogCheckbox_Container +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogControlsSection .DialogCheckbox_Container:not(:first-child):last-child, +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogBody .DialogCheckbox_Container:not(:first-child):last-child, +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogBody .DialogDropDown:not(:first-child):last-child, +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogBody .DialogCheckbox_Container + .DialogInputLabelGroup > .DialogDropDown, +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogBody .DialogInputLabelGroup > .DialogDropDown + .DialogCheckbox_Container { border-top-right-radius: 0px !important; border-top-left-radius: 0px !important; } -.ModalDialogPopup .DialogBody .DialogInputLabelGroup > .DialogLabel + .DialogDropDown +.ModalDialogPopup [class*="appproperties_AppProperties_"] .DialogBody .DialogInputLabelGroup > .DialogLabel + .DialogDropDown { border-top-right-radius: var(--entry_radius) !important; border-top-left-radius: var(--entry_radius) !important; diff --git a/install.py b/install.py index 4462c903..12abe429 100755 --- a/install.py +++ b/install.py @@ -46,6 +46,7 @@ webthemedir / "base/4_collections.css", webthemedir / "base/5_game_details.css", webthemedir / "base/6_downloads.css", + webthemedir / "base/7_dialogs.css", webthemedir / "base/9_scrollbars.css", webthemedir / "base/10_login.css", webthemedir / "base/11_launch_options.css", @@ -61,6 +62,7 @@ webthemedir / "full/5_game_details.css", webthemedir / "base/6_downloads.css", webthemedir / "full/6_downloads.css", + webthemedir / "base/7_dialogs.css", webthemedir / "full/7_dialogs.css", webthemedir / "full/8_chat.css", webthemedir / "base/9_scrollbars.css",