Where are the css files used in search results stored in SP Online?

Question

I'm customizing a search display template. There is an is a nice transparent overlay on a photo where I display text, but my text is no longer fitting in the overlay because I've added an additional field (image below)

I need to change the height of the overlay. Where do I find:

<div class="cbs-largePictureDataOverlay"  id="_#= dataContainerOverlayId =#_"></div>

Where would this css file be stored in SharePoint Online?

Update____________________________________

I've hit f12 and brought up the developer tool. In the styles panel it shows the class is here:

https://myDomain.sharepoint.com/_layouts/15/1033/styles/Themable/searchv15.css?rev=TIyKz7ecbk5oNOSidkzn9w%3D%3DTAG289

But I still don't know how to find this file to save it back with changes.

Answer 1

As you are using SharePoint online which is SaaS offering , you won't have control to modify any OOTB files (css file below is OOTB css file)

https://myDomain.sharepoint.com/_layouts/15/1033/styles/Themable/searchv15.css?rev=TIyKz7ecbk5oNOSidkzn9w%3D%3DTAG289

Coming to you requirement to to customize css for any sharepoint OOTB css files, you should create custom class in your custom css file which is stored/referenced in all the pages of your site collection. override the css properties which you need to change, you might have to add !important if the sequence of reference of your css file is first and then OOTB css file is loaded.

For e.g.

if you want to over ride cbs-largePictureDataOverlay

add below css class

.cbs-largePictureDataOverlay {
height:100px !important; // change according to your need..
}

Note for SharePoint on premises- SharePoint OOTB css files are stored in layouts folder which is common across all the web applications/site collection where it is referred. It is not advisable to change OOTB files located in layouts folder because it would affect your whole farm and its application.

Hope this helps...Happy coding!!!