From bb925a9244e0351999effccea8c722723c9a2ead Mon Sep 17 00:00:00 2001 From: gusthoff Date: Fri, 27 Sep 2024 15:10:09 +0200 Subject: [PATCH 1/3] Widget: highlight clickable source-code tabs on mouseover --- frontend/src/styles/learn-dark.scss | 1 + frontend/src/styles/learn.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/frontend/src/styles/learn-dark.scss b/frontend/src/styles/learn-dark.scss index 267bcd311..5aba13286 100644 --- a/frontend/src/styles/learn-dark.scss +++ b/frontend/src/styles/learn-dark.scss @@ -276,6 +276,7 @@ button { color: $color-darktheme-tab-font; &:hover { + background-color: lighten($color-darktheme-theme-bg-dark, 30%); color: $color-darktheme-tab-hover-font; } &.active { diff --git a/frontend/src/styles/learn.scss b/frontend/src/styles/learn.scss index 9cca3e731..2c3fb1545 100644 --- a/frontend/src/styles/learn.scss +++ b/frontend/src/styles/learn.scss @@ -175,6 +175,7 @@ pre.widget { font-family: $mono-font; font-size: 13px; &:hover { + background-color: lighten($color-theme-bg-dark, 30%); color: $color-tab-hover-font; cursor: pointer; } From 9d2836bd2a451e75bc99ec4ae48e7bcb0e9898ea Mon Sep 17 00:00:00 2001 From: gusthoff Date: Fri, 27 Sep 2024 15:12:30 +0200 Subject: [PATCH 2/3] Widget: show border of source-code tabs --- frontend/src/styles/learn-dark.scss | 2 ++ frontend/src/styles/learn.scss | 2 ++ 2 files changed, 4 insertions(+) diff --git a/frontend/src/styles/learn-dark.scss b/frontend/src/styles/learn-dark.scss index 5aba13286..71a51d4e5 100644 --- a/frontend/src/styles/learn-dark.scss +++ b/frontend/src/styles/learn-dark.scss @@ -275,6 +275,8 @@ .tab { button { color: $color-darktheme-tab-font; + border-left: 1px dotted $color-darktheme-widget-border; + border-right: 1px dotted $color-darktheme-widget-border; &:hover { background-color: lighten($color-darktheme-theme-bg-dark, 30%); color: $color-darktheme-tab-hover-font; diff --git a/frontend/src/styles/learn.scss b/frontend/src/styles/learn.scss index 2c3fb1545..f2887fb44 100644 --- a/frontend/src/styles/learn.scss +++ b/frontend/src/styles/learn.scss @@ -174,6 +174,8 @@ pre.widget { color: $color-tab-font; font-family: $mono-font; font-size: 13px; + border-left: 1px dotted $color-widget-border; + border-right: 1px dotted $color-widget-border; &:hover { background-color: lighten($color-theme-bg-dark, 30%); color: $color-tab-hover-font; From 0ac0fd83fd5a4dded78bd34bb0efc3d45c789cab Mon Sep 17 00:00:00 2001 From: gusthoff Date: Fri, 27 Sep 2024 15:15:26 +0200 Subject: [PATCH 3/3] Widget: improvements to selected source-code tab - show indicated at the bottom instead of the top; - always show bottom border; - increase size of selected border. --- frontend/src/styles/learn-dark.scss | 3 ++- frontend/src/styles/learn.scss | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/styles/learn-dark.scss b/frontend/src/styles/learn-dark.scss index 71a51d4e5..b57f1c954 100644 --- a/frontend/src/styles/learn-dark.scss +++ b/frontend/src/styles/learn-dark.scss @@ -277,15 +277,16 @@ color: $color-darktheme-tab-font; border-left: 1px dotted $color-darktheme-widget-border; border-right: 1px dotted $color-darktheme-widget-border; + border-bottom: 1px dotted $color-darktheme-widget-border; &:hover { background-color: lighten($color-darktheme-theme-bg-dark, 30%); color: $color-darktheme-tab-hover-font; } &.active { color: $color-darktheme-tab-active-font; - border-top: 2px solid $color-darktheme-theme-bg-dark; border-left: 1px solid $color-darktheme-widget-border; border-right: 1px solid $color-darktheme-widget-border; + border-bottom: 3px solid $color-darktheme-theme-bg-dark; } } } diff --git a/frontend/src/styles/learn.scss b/frontend/src/styles/learn.scss index f2887fb44..983f69460 100644 --- a/frontend/src/styles/learn.scss +++ b/frontend/src/styles/learn.scss @@ -176,6 +176,7 @@ pre.widget { font-size: 13px; border-left: 1px dotted $color-widget-border; border-right: 1px dotted $color-widget-border; + border-bottom: 1px dotted $color-widget-border; &:hover { background-color: lighten($color-theme-bg-dark, 30%); color: $color-tab-hover-font; @@ -183,9 +184,9 @@ pre.widget { } &.active { color: $color-tab-active-font; - border-top: 2px solid $color-theme-bg-dark; border-left: 1px solid $color-widget-border; border-right: 1px solid $color-widget-border; + border-bottom: 3px solid $color-theme-bg-dark; } } }