Issues with the top bar when using a theme other then the default (dark and sepia)

[Udarthegreat]

Bug Report

Description

When on mobile, and the theme is sepia or dark and you scroll up from the top the bar at the top disappears which makes the UI hard to read and interact with

Steps to Reproduce

Steps to reproduce the behavior:

1. Go to any page
2. Click on the big A (I have no clue what it is called)
3. Switch theme from the default to a different one
4. Scroll down
5. The bar at the top disappears

Expected behavior

From what I can tell there is supposed to be be a bar behind the language selector and the A (I have no clue what it is called)

Screenshots

This first screen shot is of the default theme with what seams to be the default and correct behavior

Next is the sepia and dark themes in that order which have issue

Environment

• OS: iOS
• OS Version: 15.0.2
• Browser: Brave, Firefox, Firefox focus and Safari
• Browser Version: brave: 1.32.3, Firefox: 40.2

Additional context

I am on IOS and don't have access to Android so I could not test it in those devices; I also haven't had the chance to test on desktop. Also I would like to note that this is my first issue on this project so I am sorry if I made a mistake when typing this up.

For Algorithm Archive Developers

• [x] The bug can be reproduced
• [ ] The bug can be fixed
• [ ] There is a timeline to fix the bug
• [ ] The bug has been fixed (Please link the PR)

[Udarthegreat]

I just checked on desktop and it has the same issues with the themes (I would link my version but I don't know how to check the version of Firefox on desktop).

[ShadowMitia]

Thanks for the report! You can check thr version on dedktop in Help > About firefox I think.

[Udarthegreat]

Thank you for the help with the menus, that means that the images for desktop(https://github.com/algorithm-archivists/algorithm-archive/issues/978#issuecomment-1000866088) are taken from Firefox 95.0.2

[Amaras]

I can reproduce this on Vivaldi browser version 5.0.2497.32, installed on my Ubuntu 20.04 machine.

This seems to be intentional, is in the light theme bar is opaque, while the Dark and Sepia themes have a transparent bar.

This will probably a simple CSS change (if JS doesn't mess with it), if someone can do this or point me to the themes.

[Udarthegreat]

question, should I mark The bug can be fixed as checked on the main post at the top or should I not since from what I can tell at this point it would be possible to do so.

also are there any other tags that should be added to this issue?

[mahdisarikhani]

I think this can be solved by adding these lines to styles/website.css

.book.color-theme-1 .book-header {
    color: #afa70;
    background: #f3eacb;
}

.book.color-theme-2 .book-header {
    color: #7e888b;
    background: #1c1f2b;
}

It worked on Firefox and Chromium on my Arch Linux machine.

[Amaras]

This should probably be solved using CSS variables, but this should be good enough, I'll look at it when I have some time

[mahdisarikhani]

The CSS variables of themes are written in gitbook-plugin-fontsettings. I found these two lines cause the transparent top bar, but I do not know how gitbook/honkit plugins works, so cannot go any further.

[Amaras]

I think we use the default gitbook themes, which makes it hard to change them.

We seem to be using those plugins, which doesn't seem to include the plugin you linked:

• mathjax@https://github.com/algorithm-archivists/plugin-mathjax
• bibtex-cite
• wordcount
• api-language-selector@https://github.com/algorithm-archivists/gitbook-plugin-api-language-selector.git
• include-codeblock
• bulk-redirect
• prism
• -highlight

EDIT: Looking at the dependencies, Honkit seems to use the (now read-only) plugin you pointed to indeed. I think I can fork the plugin so we can modify it ourselves

[Udarthegreat]

So from what I can tell this is fixable, am I wrong here, does this mean that I can mark it The bug can be fixed on the top post

[leios]

I think we got caught up in the fact that the theme api plugin does not technically have a license attached to it, so we were uncomfortable modifying it. The fonts plugin is apache, so it's fine to fork and modify that.

Maybe the best course of action is to fork that one, make the changes and see if setting it as a dependency fixes the issue.