From c644dd4f995a1668951a55cd5194a6d9674aa56c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 19 Dec 2024 09:46:54 +0100 Subject: [PATCH] Fix subscribe button radius --- .../subscribe-button.component.html | 2 +- client/src/sass/application.scss | 2 ++ client/src/sass/bootstrap.scss | 4 ++-- client/src/sass/include/_button-mixins.scss | 6 +++--- client/src/sass/include/_form-mixins.scss | 4 ++-- client/src/sass/include/_variables.scss | 1 + client/src/sass/primeng-custom.scss | 10 +++++----- 7 files changed, 16 insertions(+), 13 deletions(-) diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html index fb2a7011b..002e3ed6c 100644 --- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html +++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html @@ -21,7 +21,7 @@ @if (isUserLoggedIn()) { @if (isAllChannelsSubscribed) { - } @else { diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 8b49988d1..e4c57d925 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -57,6 +57,8 @@ body { --input-y-padding: 5px; --input-x-padding: 20px; + --input-border-radius: 4px; + --textarea-fg: var(--textareaForegroundColor, #{pvar(--input-fg)}); --textarea-bg: var(--textareaBackgroundColor, #{pvar(--input-bg)}); diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index d8ab043c1..31a1e80a1 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -347,8 +347,8 @@ body { .input-group, .btn-group { .last-in-group { - border-top-right-radius: 3px !important; - border-bottom-right-radius: 3px !important; + border-top-right-radius: pvar(--input-border-radius) !important; + border-bottom-right-radius: pvar(--input-border-radius) !important; } } diff --git a/client/src/sass/include/_button-mixins.scss b/client/src/sass/include/_button-mixins.scss index aa3c3ae9c..2f3465233 100644 --- a/client/src/sass/include/_button-mixins.scss +++ b/client/src/sass/include/_button-mixins.scss @@ -145,7 +145,7 @@ padding: pvar(--input-y-padding) pvar(--input-x-padding); font-weight: $font-semibold; - border-radius: 4px; + border-radius: pvar(--input-border-radius); text-align: center; cursor: pointer; @@ -163,7 +163,7 @@ &:is(input[type=button]) { // Because of primeng that redefines border-radius of all input[type="..."] - border-radius: 4px !important; + border-radius: pvar(--input-border-radius) !important; } } @@ -176,7 +176,7 @@ font-weight: $font-semibold; // Because of primeng that redefines border-radius of all input[type="..."] - border-radius: 4px !important; + border-radius: pvar(--input-border-radius) !important; } @mixin peertube-button-small { diff --git a/client/src/sass/include/_form-mixins.scss b/client/src/sass/include/_form-mixins.scss index 524287274..c5a3a8497 100644 --- a/client/src/sass/include/_form-mixins.scss +++ b/client/src/sass/include/_form-mixins.scss @@ -13,7 +13,7 @@ color: pvar(--input-fg); background-color: pvar(--input-bg); border: 1px solid pvar(--input-border-color); - border-radius: 4px; + border-radius: pvar(--input-border-radius); @include rounded-line-height-1-5($font-size); @@ -93,7 +93,7 @@ color: pvar(--input-fg); background: pvar(--input-bg); - border-radius: 4px; + border-radius: pvar(--input-border-radius); } &:focus, diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index c74b3588c..c5316ace3 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -101,6 +101,7 @@ $variables: ( --input-placeholder: var(--input-placeholder), --input-border-color: var(--input-border-color), --input-bg-in-secondary: var(--input-bg-in-secondary), + --input-border-radius: var(--input-border-radius), --input-check-active-fg: var(--input-check-active-fg), --input-check-active-bg: var(--input-check-active-bg), diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index de2317668..290f0ec04 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -151,7 +151,7 @@ body .p-dropdown { background: pvar(--input-bg); border: 1px solid pvar(--input-border-color); transition: border-color 0.2s, box-shadow 0.2s; - border-radius: 4px; + border-radius: pvar(--input-border-radius); } body .p-dropdown:not(.p-disabled):hover { border-color: pvar(--input-border-color); @@ -527,7 +527,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { background: pvar(--input-bg); border: 1px solid pvar(--input-border-color); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 4px; + border-radius: pvar(--input-border-radius); font-size: 16px; } .p-multiselect:not(.p-disabled):hover { @@ -552,7 +552,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { margin-right: 0.25rem; background: pvar(--bg-secondary-500); color: pvar(--fg); - border-radius: 4px; + border-radius: pvar(--input-border-radius); } .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { margin-left: 0.5rem; @@ -589,7 +589,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon { background: pvar(--bg); color: pvar(--fg); border: 1px solid pvar(--input-border-color); - border-radius: 4px; + border-radius: pvar(--input-border-radius); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .p-multiselect-panel .p-multiselect-header { @@ -702,7 +702,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border: 1px solid pvar(--input-border-color); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; - border-radius: 4px; + border-radius: pvar(--input-border-radius); } .p-inputtext:enabled:hover { border-color: pvar(--input-border-color);