CCS (Calibre Content Server) Userstyles

[Comfy.n]

Hi everyone,

Userstyles provide a way to customise web pages layout.
In trying to apply them to CCS (Calibre Content Server) pages, I was able to style the FTS results page, by using this code:

PHP Code:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://127.0.0.1:8080/#fts_panel)

{
div{background-color:#e8e5ed !important;}
body{background-color:#504e8b !important;max-width:1000px!important;margin-left:200px!important;}
} 


By using that userstyle, I managed to get a results page that meets quite nicely my preferences:




However, achieving the same on the main CCS pages didn't seem that easy...

So I thought I'd ask, has anyone else fiddled with styling CCS pages, or willing to? If so, may we use this thread to share ideas about CCS user-styling?

The result I'm interested in, at the moment, would look similar to the old layout, particularly concerning the visibility of scrollbars in the book comments, as shown below:

[Comfy.n]

I came up with this custom userstyle for CCS pages other than FTS ones, sharing it in case someone is interested:

PHP Code:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://127.0.0.1:8080/#library_id), url-prefix(http://127.0.0.1:8080/#book_id)

{
.book-list-custom-list, .book-details-panel{background-color:#e8e5ed !important;}

body{background-color:#5A57A5 !important;max-width:1000px!important;margin-left:200px!important;}

.book-search-panel, .generic-items-list, #panel-16, .edit-metadata-panel, .convert-book-panel{background-color:#e8e5ed!important;}

.book-list-container [data-component="top_message"]{color:white!important;}
/*.book-list-container {color:blue!important;}*/

/*.blue-link{color:#6cb4ee!important;font-weight:bold!important;}*/
.blue-link{font-weight:bold!important;}

#panel-14{color:#f8f8f8!important;}
} 


[Comfy.n]

as for the scrollbar visibility in comments, I've fiddled a bit with these elements, but had no success in mimicking the classic layout

PHP Code:

.book-list-custom-list, .book-list-custom-list-item 
{overflow:scroll!important; max-height: 50%!important;}