<details>
<summary>
<div class="settings-button" style="float: left;">
<i class="icon-cog-outline"></i>
</div>
<div class="settings-overlay"></div>
</summary>
<div class="settings-container" class="scrollbar" >
<div class="x-touch1" onclick="document.querySelector('.email').classList.remove('expand');event.stopPropagation();">
<div class="settings-close">
<div class="line1-1"></div>
<div class="line2-1"></div>
</div>
</div>
<div class="settings-content">
<div class="header">Renderer</div>
</div>
</div>
</details>
.settings-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #0f0f0f;
color: white;
cursor: pointer;
display: inline-block;
font-weight: 500;
height: 37px;
width: 68px;
margin-top: -113px;
border-top-left-radius: 4px;
}
.settings-container {
background: #1f1f1f;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
left: 50%;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 346px;
text-align: left;
height: 468px;
display: flex;
flex-direction: column;
margin-top: -30px;
}
.settings-container .settings-close {
display: block;
}
.settings-container .settings-container-title {
color: #ffffff;
padding: 1.5em 2em;
pointer-events: all;
position: relative;
width: calc(100% - 4.5em);
}
.settings-container .settings-container-title h1 {
font-size: 1.25rem;
font-weight: 600;
line-height: normal;
}
.settings-container .settings-content {
padding: 2em;
pointer-events: all;
}
.settings-overlay {
transition: opacity 0.2s ease-out;
pointer-events: none;
background: rgba(0, 0, 0, 0.884);
position: fixed;
opacity: 0;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
details[open] .settings-overlay {
pointer-events: all;
opacity: 0.5;
}
details summary:focus {
outline: none;
}
details summary::-webkit-details-marker {
display: none;
}
code {
font-family: Monaco, monospace;
line-height: 100%;
background-color: #2d2d2c;
padding: 0.1em 0.4em;
letter-spacing: -0.05em;
word-break: normal;
border-radius: 7px;
color: white;
font-weight: normal;
font-size: 1.75rem;
position: relative;
top: -2px;
}
.settings-close {
background: #000000;
border-radius: 100px;
height: 30px;
position: relative;
width: 30px;
border: 2px solid rgb(255, 255, 255);
cursor: pointer;
position: absolute;
}
.line1-1 {
background: #ffffff;
height: 10px;
position: absolute;
transform: translateX(9px) translateY(4px) rotate(45deg);
width: 2px;
margin-top: 4px;
margin-left: 5px;
cursor: pointer;
}
.line2-1 {
background: #ffffff;
height: 10px;
position: absolute;
transform: translateX(9px) translateY(4px) rotate(-45deg);
width: 2px;
margin-top: 4px;
margin-left: 5px;
cursor: pointer;
}
.x-touch1 {
align-items: center;
align-self: center;
cursor: pointer;
display: flex;
height: 30px;
justify-content: center;
margin-left: auto;
width: 30px;
cursor: pointer;
}
Jak zrobić taki przycisk pokazany na zdjęciu powyżej, który będzie poza modal'em ale scrollbar nie będzie go chował jak na zdjęciu poniżej