diff --git a/public/popup.css b/public/popup.css index 1a95c861..1944e5e4 100644 --- a/public/popup.css +++ b/public/popup.css @@ -403,7 +403,7 @@ */ #mainControls { margin: 16px; - padding: 8px 12px; + padding: 8px 14px; text-align: left; border-radius: 8px; border: 2px solid var(--sb-grey-bg-color); @@ -411,6 +411,7 @@ .sponsorStartHint { display: block; text-align: left; + padding-top: 3px; } /* @@ -448,24 +449,24 @@ /* * Your Work box */ -.sbYourWorkCols { +.sbYourWorkBox { margin: 16px; margin-bottom: 8px; border-radius: 8px; border: 2px solid var(--sb-grey-bg-color); } -.sbYourWorkCols > div { - display: flex; +.sbYourWorkCols { + display: grid; + grid-template-columns: 1fr 1fr; border-top: 2px solid var(--sb-grey-bg-color); border-bottom: 2px solid var(--sb-grey-bg-color); } .sbStatsSentence { - padding-top: 5px; - padding-bottom: 5px; + padding: 6px 14px; } -.sbStatsSentence .sbExtraInfo { +.sbExtraInfo { display: inline-block; } @@ -473,37 +474,26 @@ * Increase font size of username input and display */ #usernameValue, -#usernameInput, -#sponsorTimesContributionsDisplay { +#usernameInput { font-size: 16px; flex: 1 0; +} +#sponsorTimesContributionsDisplay { + font-size: 16px; } /* * Improve alignment of username and submissions */ -#usernameElement, +#usernameElement > p, #sponsorTimesContributionsContainer { - display: flex; - flex-direction: column; - justify-content: start; -} -#usernameElement > span, -#sponsorTimesContributionsContainer { - text-align: start; -} - -#sponsorTimesContributionsContainer { - margin-left: 8px; - padding-left: 8px; - border-left: 2px solid var(--sb-grey-bg-color); + text-align: left; } /* * Username */ #usernameElement { - padding: 8px; - min-width: 50%; + padding: 8px 14px; } #setUsernameContainer { display: flex; @@ -549,14 +539,15 @@ width: calc(100% - 68px); text-overflow: ellipsis; color: var(--sb-main-fg-color); - background: var(--sb-grey-bg-color); + background-color: var(--sb-grey-bg-color); } /* * Submissions */ #sponsorTimesContributionsContainer { - padding: 8px; + padding: 8px 14px; + border-left: 2px solid var(--sb-grey-bg-color); } /* @@ -571,14 +562,13 @@ display: inline-block; text-decoration: none; border-radius: 4px; - background: #333; - cursor: pointer; + background-color: #333; padding: 4px 8px; font-weight: 500; margin: 2px 1px; } #sbFooter a:hover { - background: #444; + background-color: #444; } #sponsorTimesDonateContainer a { diff --git a/public/popup.html b/public/popup.html index d5a5cbae..99c6471f 100644 --- a/public/popup.html +++ b/public/popup.html @@ -13,7 +13,7 @@
- +