diff --git a/app-icons/Boxy for Gmail copy.png b/app-icons/Boxy for Gmail.png similarity index 100% rename from app-icons/Boxy for Gmail copy.png rename to app-icons/Boxy for Gmail.png diff --git a/gc-btt-settings.html b/gc-btt-settings.html index 5dca7c6..b4e663d 100644 --- a/gc-btt-settings.html +++ b/gc-btt-settings.html @@ -9,8 +9,8 @@ font-size: 14px; margin: 24px 48px 64px 48px; padding: 0; - height: 703px; - width: 1000px; + height: 693px; + width: 980px; background: transparent; -webkit-transform: translate3d(0, 0, 0); display: flex; @@ -37,9 +37,8 @@ font-family: "SF Pro Display", Helvetica, sans-serif; font-weight: 600; margin: 0; - padding: 56px 16px 12px 16px; + padding: 56px 16px 16px 16px; font-size: 24px; - border-bottom: 1px solid rgba(255,255,255,.15); } h2 { @@ -57,7 +56,7 @@ font-weight: 600; letter-spacing: .5px; padding: 0 32px; - margin: 24px 0 12px 0; + margin: 20px 0 10px 0; color: rgba(180, 179, 178, 1); } @@ -119,11 +118,12 @@ } .tablink { - margin: 0 0 -1px 0; padding: 8px 12px 8px 48px; - width: 204px; + margin: 0 10px; + width: 184px; position: relative; line-height: 28px; + background: rgba(255,255,255,.1); } .tablink:hover { @@ -140,10 +140,11 @@ .tablink::after { content: " "; display: block; - width: 100%; + width: calc(100% - 52px); height: 1px; position: absolute; bottom: 0; + right: 0; background: rgba(255,255,255,.15); } @@ -156,15 +157,30 @@ display: none; } + .tablink.start { + margin-top: 21px; + border-top-right-radius: 6px; + border-top-left-radius: 6px; + } + + .tablink.start:first-of-type { + margin-top: 0; + } + + .tablink.end { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + .tablink:last-of-type { position: fixed; - bottom: 1px; - border-bottom-left-radius: 10px; + bottom: 10px; + border-radius: 6px; } + .tablink.end::after, .tablink:last-of-type::after { - top: 0; - bottom: auto; + display: none; } /* Content Area Styles */ @@ -465,38 +481,112 @@ /* Radio Switch Styles */ .radio-switch label { - padding-top: 8px; - padding-bottom: 8px; + padding-top: 4px; + padding-bottom: 4px; } .radio-switch small { margin-left: 0; } - .radio-switch .token.selected { - position: absolute; + .radio-switch .token { + position: relative; line-height: normal; bottom: 0; right: 0; - margin-top: -13px; + left: 0; + top: 0; + width: auto; + white-space: nowrap; + } + + .radio-switch .token .active { + display: none; + } + + .radio-switch .token .inactive { + display: block; + } + + .active-preset-display .form-switch label { + display: flex; + flex-direction: row; + } + + .active-preset-display .form-switch label .description { + flex-grow: 1; + } + + .active-preset-display .form-switch label .action .token { + margin-top: 13px; + } + + .active-preset-display .radio-switch .description span, + .active-preset-display .radio-switch .description small, + .active-preset-display .radio-switch .token { + display: none; + } + + .active-preset-display .radio-switch .description small { + margin-top: -4px; + } + + .active-preset-display .radio-switch .description small a { + position: relative; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: auto; + line-height: 16px; + text-align: left; + margin-top: 4px; } + + .active-preset-display .radio-switch .loading .loading, + .active-preset-display .radio-switch .custom .custom, + .active-preset-display .radio-switch .default .default, + .active-preset-display .radio-switch .minimalist .minimalist, + .active-preset-display .radio-switch .gcs-daily-driver .gcs-daily-driver { + display: block; + } + + ul:not(.active-preset-display) .radio-switch .default .token.default, + ul:not(.active-preset-display) .radio-switch .minimalist .token.minimalist, + ul:not(.active-preset-display) .radio-switch .gcs-daily-driver .token.gcs-daily-driver { + background: limegreen; + border-color: limegreen; + } + + .radio-switch .default .token.default .inactive, + .radio-switch .minimalist .token.minimalist .inactive, + .radio-switch .gcs-daily-driver .token.gcs-daily-driver .inactive { + display: none; + } + + .radio-switch .default .token.default .active, + .radio-switch .minimalist .token.minimalist .active, + .radio-switch .gcs-daily-driver .token.gcs-daily-driver .active { + display: block; + } + -
+
@@ -761,7 +886,7 @@

Home Strip

Controls

Quickly change your entire Touch Bar. These don't affect Dock Badge selections. +

Standard Presets

-

Factory Reset

-