Custom itch.io CSS snippets

itch_profile_page.css

/*
By default, if you have too much text in your collection/game descriptions or game title, the text is cut off.
This snippet makes sure all the text is displayed.

Note that the original behavior is probably meant as an incentive to keep these texts short, so don't go overboard.
*/

.user_page .purchased_games .collection_description,
.user_page .collection_row .collection_description,
.game_grid_widget .game_cell .game_title,
.game_grid_widget .game_cell .game_text {
    white-space: normal;
    overflow: auto;
}

.game_grid_widget .game_cell .game_title {
    display: inline;
}

itch_project_page.css

/*
To make headings expandable, you can wrap them like this: <summary><details><!-- heading goes here --></details></summary>
However, this will cause spacing issues as described here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#summaries_as_headings
This snippet fixes that.
*/
#wrapper .inner_column summary h1,
#wrapper .inner_column summary h2,
#wrapper .inner_column summary h3,
#wrapper .inner_column summary h4,
#wrapper .inner_column summary h5,
#wrapper .inner_column summary h6 {
    display: inline;
}

/*
For some reason, when on mobile, screenshots will be displayed even if they're set to "Hidden" in the theme editor.
This snippet hides them on mobile no matter what the theme editor says.
*/
@media (max-width: 1000px) {
    #wrapper .responsive .view_game_page .columns .left_col,
    #wrapper .responsive .view_game_page .columns .right_col {
        display: none;
    }
}

/*
When expanding the "More information" box on a game page, the publisher name is wrongly displayed at the top of the box, instead of
in the appropriate table data cell. This snippet removes the erroneous publisher name, and displays a new (hardcoded) publisher name
in the empty cell.

(Note: Will use the first empty data cell it finds, so if there are more than one, this might be wrong.
There probably shouldn't be more than one, though.)
*/

#wrapper .game_info_panel_widget.base_widget td:empty::before{
    content: "ENTER YOUR PUBLISHER NAME HERE";
}

#wrapper .game_info_panel_widget.base_widget {
    visibility: hidden;
    padding: 0;
}

#wrapper .game_info_panel_widget.base_widget table {
    visibility: visible;
    background-color: var(--itchio_bg2_sub);
    padding: 10px;
    width: 100%;
}