diff --git a/src/popup.css b/src/popup.css index f6aed49..c288dd3 100644 --- a/src/popup.css +++ b/src/popup.css @@ -8,8 +8,8 @@ --window-margin: 10px; --window-width: 360px; /* Equal to width of add-ons panel */ - --window-height: 550px; /* Equal to hwightof add-ons panel */ - --scrollbar-width: 5px; /*TODO make sure this is correct */ + --window-height: 515px; /* Equal to height add-ons panel */ + --scrollbar-width: 5px; /* Estimated! */ --toggle-margin-left: 15px; --toggle-margin-right: 5px; @@ -29,14 +29,16 @@ --border-radius-section: .5rem; --border-radius-input: .5rem; - --total-height-other: 297px; + --total-height-other: 294px; --total-height-also-li: 26px; + --total-height-prompt: 33.5px; } /* Light theme */ :root { --text-color: var(--color-l-gray-120); - --desc-color: var(--color-l-gray-100); + --desc-color: blue; + --desc-color: var(--color-l-gray-110); --link-color: var(--color-l-gray-90); --icon-color: var(--color-l-gray-80); @@ -86,8 +88,8 @@ --desc-color: var(--color-d-gray-20); --link-color: var(--color-d-gray-50); - --icon-color: var(--color-d-gray-40); - --icon-color-hover: var(--color-d-gray-50); + --icon-color: var(--color-d-gray-50); + --icon-color-hover: var(--color-d-gray-40); --border-color: var(--color-d-gray-90); --border-color-hover: var(--color-d-gray-80); --scrollbar-color: var(--color-d-gray-90); @@ -101,7 +103,7 @@ /* Text input */ --text-input-background-color-focus: var(--color-d-gray-90); - --text-input-placeholder-color: var(--color-d-gray-70); + --text-input-placeholder-color: var(--color-d-gray-50); --text-input-background-color: var(--color-d-gray-100); /* Select */ @@ -207,6 +209,7 @@ button:not(.delete):active > svg { #site-details { min-width: 0; + cursor: default; } #site-details h1 { @@ -216,6 +219,10 @@ button:not(.delete):active > svg { text-overflow: ellipsis; } +#site-details p { + color: var(--desc-color); +} + #state { color: var(--state-text-color-disabled); transition: var(--speed-slow); @@ -268,7 +275,6 @@ button:not(.delete):active > svg { border-radius: var(--border-radius-input); font-size: var(--text-large); color: var(--text-color); - gap: var(--spacer-medium); outline: none; } @@ -321,15 +327,8 @@ button:not(.delete):active > svg { text-wrap: nowrap; gap: var(--spacer-small); align-content: center; -} - -#header-name { - margin-bottom: 17.25px; -} - -#header-pov { - margin-top: 8px; - margin-bottom: 21.25px; + height: var(--total-height-prompt); + margin-bottom: var(--spacer-large); } /* Other pronouns */ @@ -352,6 +351,7 @@ button:not(.delete):active > svg { #other li label { font-size: var(--text-small); + color: var(--desc-color); text-align: right; text-wrap: nowrap; } @@ -365,6 +365,10 @@ button:not(.delete):active > svg { width: min-content; } +#other-final { + margin-bottom: var(--spacer-large); +} + /* Also replacements */ #also li { @@ -375,6 +379,10 @@ button:not(.delete):active > svg { height: var(--total-height-also-li); } +#also li label { + color: var(--desc-color); +} + .lhs { text-align: right; } @@ -398,6 +406,7 @@ button:not(.delete):active > svg { .delete-disabled button { visibility: hidden; + scale: 0; } @@ -513,30 +522,18 @@ background-color: var(--button-background-color-active); .hide { height: 0 !important; - padding-top: 0 !important; - padding-bottom: 0 !important; - margin-top: 0 !important; - margin-bottom: 0 !important; overflow: hidden !important; opacity: 0 !important; } .unhide-slow { transition: - height var(--speed-slow) ease-out, - padding-top var(--speed-slow) ease-out, - padding-bottom var(--speed-slow) ease-out, - margin-top var(--speed-slow) ease-out, - margin-bottom var(--speed-slow) ease-out, - opacity var(--speed-slow) linear !important; + height var(--speed-slow) ease-out, + opacity var(--speed-slow) linear !important; } .unhide-fast { transition: height var(--speed-fast) ease-out, - padding-top var(--speed-fast) ease-out, - padding-bottom var(--speed-fast) ease-out, - margin-top var(--speed-fast) ease-out, - margin-bottom var(--speed-fast) ease-out, opacity var(--speed-fast) linear !important; } diff --git a/src/popup.html b/src/popup.html index d14a594..794f4e4 100644 --- a/src/popup.html +++ b/src/popup.html @@ -22,14 +22,14 @@

Name

-
+

Pronouns

-
+
-
  • +
  • @@ -109,7 +109,9 @@

    Also replace

    - +
    + +