Improve element gallery header (#6239)

* Improve header of Element Gallery.

* Add click to copy url to screenshot header and each screenshot row.
This commit is contained in:
Benoit Marty 2026-02-23 17:58:47 +01:00 committed by GitHub
parent 496595f20d
commit e951d188fb
2 changed files with 160 additions and 16 deletions

View file

@ -60,11 +60,14 @@ br {
}
form {
display: flex;
align-items: center;
}
label {
margin-left: 10px;
margin-right: 6px;
white-space: nowrap;
}
input {
@ -72,7 +75,13 @@ input {
}
#width_input {
width: 80px;
width: 60px;
height: 32px;
background: #21262e;
color: white;
border: 1px solid #30363d;
border-radius: 6px;
padding-left: 8px;
}
#screenshots_container {
@ -98,6 +107,7 @@ input {
background: #101318;
color: #FFF;
padding: 0px;
z-index: 100;
}
#header {
top: 0;
@ -114,6 +124,7 @@ input {
font-size: 1.5rem;
font-weight: bold;
margin-top: 5px;
white-space: nowrap;
}
.fullstop--green {
@ -162,3 +173,81 @@ a {
text-align: center;
vertical-align: middle;
}
.multiselect {
width: 200px;
margin-left: 10px;
margin-right: 10px;
position: relative;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
height: 32px;
font-weight: bold;
background: #21262e;
color: white;
border: 1px solid #30363d;
border-radius: 6px;
padding-left: 8px;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
cursor: pointer;
}
#checkboxes {
display: none;
border: 1px solid #30363d;
background-color: #161b22;
position: absolute;
z-index: 10;
width: 100%;
max-height: 600px;
overflow-y: auto;
box-shadow: 0 8px 16px rgba(0,0,0,0.5);
border-radius: 6px;
margin-top: 4px;
}
#checkboxes label {
display: block;
margin: 0;
padding: 8px 12px;
cursor: pointer;
}
#checkboxes label:hover {
background-color: #0DBD8B;
}
#checkboxes input {
vertical-align: middle;
}
#lines {
margin-left: 16px;
white-space: nowrap;
}
.copy-message {
position: absolute;
bottom: 60px;
right: 20px;
background-color: #0DBD8B;
color: white;
padding: 10px 20px;
border: 1px solid #30363d;
border-radius: 6px;
font-size: 16px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}