SheWhoReignsSupreme/Equicord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(IconViewer): add hover effects to icon grid (#542)

Browse source
This commit is contained in:
prism 2025-12-06 14:24:20 +01:00 • committed by GitHub
parent 9c8e135620
commit 527743b147
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 79 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
src/equicordplugins/iconViewer/IconsTab.css
View file

@ -1,115 +1,137 @@
.vc-icon-modal-codeblock {
margin-left: 10%;
margin-top: 30px;
margin-left: 10%;
margin-top: 30px;
}
.vc-icon-icon {
margin-left: 5%;
margin-left: 5%;
color: var(--interactive-normal);
transition: transform 0.15s ease, color 0.15s ease;
}
.vc-icon-icon path,
.vc-icon-icon polygon,
.vc-icon-icon circle,
.vc-icon-icon rect {
fill: var(--interactive-normal);
transition: fill 0.15s ease;
}
.vc-icon-container:hover .vc-icon-icon {
color: var(--interactive-active);
transform: scale(1.020);
}
.vc-icon-container:hover .vc-icon-icon path,
.vc-icon-container:hover .vc-icon-icon polygon,
.vc-icon-container:hover .vc-icon-icon circle,
.vc-icon-container:hover .vc-icon-icon rect {
fill: var(--interactive-active);
}
.vc-icon-modal-main-container {
display: flex;
display: flex;
}
.vc-ic-unordered-list li {
margin-left: 5%;
list-style: disc;
margin-left: 5%;
list-style: disc;
}
.vc-icon-other-icon-sizes {
height: 32px;
display: flex;
margin-top: 15%;
margin-left: 5%;
height: 32px;
display: flex;
margin-top: 15%;
margin-left: 5%;
}
.vc-ic-icon-modal-root {
height: 450px;
width: 700px;
height: 450px;
width: 700px;
}
.vc-icons-tab-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 8px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 8px;
}
.vc-icon-modal-size-ex-icon {
margin-right: 5%;
margin-right: 5%;
}
.vc-icon-modal-icon {
height: 164px;
width: 164px;
height: 164px;
width: 164px;
}
.vc-icon-tab-search-bar-grid {
display: grid;
height: 50px;
gap: 10px;
grid-template-columns: 1fr 10px;
display: grid;
height: 50px;
gap: 10px;
grid-template-columns: 1fr 10px;
}
.vc-icon-display-box {
height: 164px;
width: 164px;
margin-top: 5%;
margin-left: 15%;
background-image: repeating-linear-gradient(45deg,
#ffffff1a 0,
#ffffff1a 10px,
#0000001a 10px,
#0000001a 20px);
border-radius: 10px;
height: 164px;
width: 164px;
margin-top: 5%;
margin-left: 15%;
background-image: repeating-linear-gradient(45deg,
#ffffff1a 0,
#ffffff1a 10px,
#0000001a 10px,
#0000001a 20px);
border-radius: 10px;
}
.vc-icon-container {
margin-top: 5px;
padding: 15px;
border-radius: 5px;
border: 3px solid transparent;
box-sizing: border-box;
margin-top: 5px;
padding: 15px;
border-radius: 5px;
border: 3px solid transparent;
box-sizing: border-box;
}
.vc-icon-container:hover {
border-radius: 5px;
border: 3px solid var(--background-base-low);
box-sizing: border-box;
border-radius: 5px;
border: 3px solid var(--background-base-low);
box-sizing: border-box;
}
.vc-icon-title {
font-size: 0.8em;
margin-top: 0;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.8em;
margin-top: 0;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vc-icon-modal-color-tooltip:hover {
background-color: var(--info-help-background);
background-color: var(--info-help-background);
}
.vc-save-modal {
margin-top: 10%;
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
margin-top: 10%;
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
}
.vc-save-select-option-1 {
margin-bottom: 5%;
margin-bottom: 5%;
}
.vc-save-select-option-2 {
margin-top: 5%;
margin-top: 5%;
}
.vc-ic-modals-root {
border-radius: 25px;
border-radius: 25px;
}
.vc-ic-modals-footer {
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}