Open In App

Primer CSS Details Darkened Fullscreen Click Area

Improve
Improve
Like Article
Like
Save
Share
Report

Primer CSS is an open-source component-rich CSS library that helps developers to develop beautiful and responsive websites which work on devices of any screen size. It has a wide range of components that fulfills the need of any website.

In this article, we will be seeing Primer CSS Details Darkened Fullscreen Click Area. The details-overlay-dark class is used in addition to the details-overlay to darken the click area overlay.

Primer CSS Details Darkened Fullscreen Click Area Classes: 

  • details-overlay-dark: This class is used to darken the click area overlay.

Syntax:

<details class="details-overlay details-overlay-dark">
    ...
</details>

Example 1:  This example shows the use of the details-overlay-dark class to darken the click area overlay.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Primer CSS Details Darken 
        Fullscreen Click Area
    </title>
      
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div class="text-center">
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
          
        <h4>
            Primer CSS Details Darken 
            Fullscreen Click Area
        </h4>
    </div>
  
    <div class="d-flex flex-items-center flex-column mt-5">
        <details class="details-overlay details-overlay-dark">
            <summary class="btn">Expand</summary>
  
            <!-- Additional classes are used to 
                make hidden text more visible -->
            <div class="border mt-3 p-2 color-bg-default 
                position-relative" style="z-index: 112;">
                <h3>GeeksforGeeks is awesome :)</h3>
                <p>It is a computer science portal for geeks.</p>
            </div>
        </details>
    </div>
</body>
  
</html>


Output:

 

Example 2: The below example shows how to change the style of the summary element using the button classes. In this example, we used the btn-primary class in addition to btn to change the style of the summary element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Primer CSS Details Darken 
        Fullscreen Click Area
    </title>
      
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div class="text-center">
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
          
        <h4>
            Primer CSS Details Darken 
            Fullscreen Click Area
        </h4>
    </div>
  
    <div class="d-flex flex-items-center flex-column mt-5">
        <details class="details-overlay details-overlay-dark">
          
            <!-- We used button classes to 
                style the summary element. -->
            <summary class="btn btn-primary">Expand</summary>
              
            <!-- Additional classes are used to 
                make hidden text more visible. -->
            <div class="border mt-3 p-2 color-bg-default 
                position-relative" style="z-index: 112;">
                <h3>GeeksforGeeks is awesome :)</h3>
                <p>It is a computer science portal for geeks.</p>
            </div>
        </details>
    </div>
</body>
  
</html>


Output:

 

Reference: https://primer.style/css/utilities/details#darkened-fullscreen-click-area



Last Updated : 24 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads