From dca677465f693d11be62465913a741e73ea4f6c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=89=8D=E8=BF=9B!?= <92249100+ddzzkunye@users.noreply.github.com> Date: Sun, 18 Feb 2024 19:31:40 +0800 Subject: [PATCH 1/4] Update translations.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 给语言选择加了一个更大的边框 Signed-off-by: 前进! <92249100+ddzzkunye@users.noreply.github.com> --- themes/2345lgbt/assets/styles/header/translations.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/themes/2345lgbt/assets/styles/header/translations.scss b/themes/2345lgbt/assets/styles/header/translations.scss index 90e3745..9a06e16 100644 --- a/themes/2345lgbt/assets/styles/header/translations.scss +++ b/themes/2345lgbt/assets/styles/header/translations.scss @@ -61,7 +61,12 @@ $padding: 0.5em; text-align: left; color: #49454f; - border: $padding-1 solid #79747e; + //border: $padding-1 solid #79747e; //因为$padding-1参数(themes/2345lgbt/assets/_variables.scss)同时控制着主要部分卡片的边框粗细, 所以此处无法使用 + border: 0.1875rem solid transparent; //0.1875是0.0625(也就是2024Feb18的$padding-1值)的三倍 + background-clip: padding-box, border-box; + background-origin: padding-box, border-box; + background-image: linear-gradient(to right, #fff, #fff), linear-gradient(135deg, #E4A8CA 20%, #2D8AFB 20%); //渐变的颜色使用了logo的颜色 相同的角度 硬边渐变 还好我是学数字媒体的 + // 上方四行实现了渐变, 参考https://segmentfault.com/a/1190000040794056 border-radius: 1em; background: transparent; &::before { From ee8fdeb9cefdc66fe1d198386f8e17f682ece4a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=89=8D=E8=BF=9B!?= <92249100+ddzzkunye@users.noreply.github.com> Date: Sun, 18 Feb 2024 20:02:36 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E8=B0=83=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/2345lgbt/assets/_variables.scss | 1 + themes/2345lgbt/assets/styles/header/translations.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/themes/2345lgbt/assets/_variables.scss b/themes/2345lgbt/assets/_variables.scss index 1ba1ccd..c29a70c 100644 --- a/themes/2345lgbt/assets/_variables.scss +++ b/themes/2345lgbt/assets/_variables.scss @@ -1,4 +1,5 @@ $padding-1: 0.0625rem; +$padding-translations: 0.1875rem; $border-radius: var(--border-radius); $link-active: #3287ff; $link-inactive: #000; diff --git a/themes/2345lgbt/assets/styles/header/translations.scss b/themes/2345lgbt/assets/styles/header/translations.scss index 9a06e16..d27fc2e 100644 --- a/themes/2345lgbt/assets/styles/header/translations.scss +++ b/themes/2345lgbt/assets/styles/header/translations.scss @@ -62,7 +62,7 @@ $padding: 0.5em; color: #49454f; //border: $padding-1 solid #79747e; //因为$padding-1参数(themes/2345lgbt/assets/_variables.scss)同时控制着主要部分卡片的边框粗细, 所以此处无法使用 - border: 0.1875rem solid transparent; //0.1875是0.0625(也就是2024Feb18的$padding-1值)的三倍 + border: $padding-translations solid transparent; //0.1875是0.0625(也就是2024Feb18的$padding-1值)的三倍 background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #fff, #fff), linear-gradient(135deg, #E4A8CA 20%, #2D8AFB 20%); //渐变的颜色使用了logo的颜色 相同的角度 硬边渐变 还好我是学数字媒体的 From 997e757cca6c2a6397a1ca5c76ec07f7882a7673 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=89=8D=E8=BF=9B!?= <92249100+ddzzkunye@users.noreply.github.com> Date: Mon, 19 Feb 2024 16:25:32 +0800 Subject: [PATCH 3/4] FIX BUG --- themes/2345lgbt/assets/styles/header/translations.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/themes/2345lgbt/assets/styles/header/translations.scss b/themes/2345lgbt/assets/styles/header/translations.scss index d27fc2e..0df902e 100644 --- a/themes/2345lgbt/assets/styles/header/translations.scss +++ b/themes/2345lgbt/assets/styles/header/translations.scss @@ -68,7 +68,6 @@ $padding: 0.5em; background-image: linear-gradient(to right, #fff, #fff), linear-gradient(135deg, #E4A8CA 20%, #2D8AFB 20%); //渐变的颜色使用了logo的颜色 相同的角度 硬边渐变 还好我是学数字媒体的 // 上方四行实现了渐变, 参考https://segmentfault.com/a/1190000040794056 border-radius: 1em; - background: transparent; &::before { position: absolute; left: 1em; From 9f6d9390f266eaeaae28fa17a2458aef80de53d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=89=8D=E8=BF=9B!?= <92249100+ddzzkunye@users.noreply.github.com> Date: Mon, 19 Feb 2024 16:33:23 +0800 Subject: [PATCH 4/4] Clean up comments --- themes/2345lgbt/assets/styles/header/translations.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/themes/2345lgbt/assets/styles/header/translations.scss b/themes/2345lgbt/assets/styles/header/translations.scss index 0df902e..5d1fd31 100644 --- a/themes/2345lgbt/assets/styles/header/translations.scss +++ b/themes/2345lgbt/assets/styles/header/translations.scss @@ -61,12 +61,12 @@ $padding: 0.5em; text-align: left; color: #49454f; - //border: $padding-1 solid #79747e; //因为$padding-1参数(themes/2345lgbt/assets/_variables.scss)同时控制着主要部分卡片的边框粗细, 所以此处无法使用 - border: $padding-translations solid transparent; //0.1875是0.0625(也就是2024Feb18的$padding-1值)的三倍 + border: $padding-translations solid transparent; + // The lower three rows realize the gradient border, reference https://segmentfault.com/a/1190000040794056 background-clip: padding-box, border-box; background-origin: padding-box, border-box; - background-image: linear-gradient(to right, #fff, #fff), linear-gradient(135deg, #E4A8CA 20%, #2D8AFB 20%); //渐变的颜色使用了logo的颜色 相同的角度 硬边渐变 还好我是学数字媒体的 - // 上方四行实现了渐变, 参考https://segmentfault.com/a/1190000040794056 + background-image: linear-gradient(to right, #fff, #fff), linear-gradient(135deg, #E4A8CA 20%, #2D8AFB 20%); + //gravity uses the color of the logo using hard side gradients at the same angle border-radius: 1em; &::before { position: absolute;