Overview

​

High-level description

This directory contains CSS files that customize the appearance of Streamlink’s documentation. The main file, override.css, modifies the default styles of the Furo Sphinx theme, while sphinx_gallery.css focuses on enhancing the visual presentation of Sphinx Gallery thumbnails.

​

What does it do?

These CSS files work together to improve the readability and visual appeal of Streamlink’s documentation. They accomplish this by:

1. Customizing the appearance of code blocks, citations, headings, and buttons.
2. Styling elements specific to the “Getting Started” page, such as intro cards and custom buttons.
3. Adjusting the display of Jupyter Notebook elements for better integration within the documentation.
4. Enhancing the presentation of Sphinx Gallery thumbnails, including their containers, links, timings, and figure alignment.

​

Key Files

1. override.css: This is the main CSS file that overrides the default styles of the Furo Sphinx theme. It contains a wide range of style rules targeting various elements of the documentation.

2. sphinx_gallery.css: This file focuses specifically on styling Sphinx Gallery thumbnails, improving their visual presentation within the documentation.

​

Dependencies

The CSS files in this directory rely on the following dependencies:

1. Furo Sphinx theme: The base theme that override.css customizes.
2. Sphinx: The documentation generator that uses these CSS files.
3. Sphinx Gallery: Provides the HTML structure and classes targeted by sphinx_gallery.css.

​

Configuration

While these CSS files don’t have explicit configuration options, they do use specific class names and HTML structures. Here are some key styling targets:

1. Code blocks: Inline code snippets and code blocks are styled for better readability.

   code.docutils.literal.notranslate {
     background-color: #f0f0f0;
     font-size: 0.9em;
     border-radius: 3px;
     color: black;
     word-break: break-word;
     padding: 0.1em 0.2em;
   }
   

2. Citations: Citation lists are styled for better visual separation.

   dl.citation > dt {
     float: left;
     margin-right: 15px;
     font-weight: bold;
   }
   

3. Custom buttons: Used on the “Getting Started” page.

   .custom-button {
     background-color: #f0f0f0;
     border: none;
     color: #333;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     border-radius: 5px;
     max-width: 300px;
     padding: 10px 20px;
   }
   

4. Jupyter Notebook elements: Styled for better integration with the documentation.

   .nbinput .prompt, .nboutput .prompt {
     display: none;
   }
   
   div.nbinput.container, div.nboutput.container {
     display: flex;
     align-items: flex-start;
     margin: 0;
     padding: 0;
     width: 100%;
   }
   

5. Sphinx Gallery thumbnails: Styled in sphinx_gallery.css for improved visual presentation.

These CSS files play a crucial role in shaping the look and feel of Streamlink’s documentation, ensuring that it’s not only informative but also visually appealing and easy to navigate.