mirror of
https://codeberg.org/claui/mobile-config-firefox.git
synced 2024-11-09 19:30:15 +00:00
0ff12e01fe
Flexbox model will replace old xul box as the default display model so this patch adds support for that in a whole bunch of styles. A lot of style rules are marked as "Fx < 112 compatibility" rules and those can be removed when 112 hits release.
48 lines
No EOL
2.6 KiB
CSS
48 lines
No EOL
2.6 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_loading_progress_throbber.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* Create a circular throbber inside tabs replacing the default one */
|
|
/* Doesn't really measure loading progress but sort of looks like it */
|
|
|
|
#tabbrowser-tabs{ --tab-loader-size: 16px; }
|
|
.tab-throbber,
|
|
.tabbrowser-tab[bursting] .tab-icon-image{
|
|
display: none !important;
|
|
}
|
|
.tab-icon-stack::before{
|
|
display: flex;
|
|
grid-area: 1/1;
|
|
content: "";
|
|
width:var(--tab-loader-size);
|
|
height:var(--tab-loader-size);
|
|
margin-right:6px;
|
|
background: center no-repeat url('data:image/svg+xml,<?xml version="1.0" encoding="UTF-8" ?><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" stroke="url(%23gradient)" fill="none" width="100%" height="100%" stroke-width="1.7"><defs><radialGradient id="gradient" cx="50%" cy="0" r="0.6"><stop offset="0%" stop-color="lightpink"/><stop offset="100%" stop-color="red"/></radialGradient></defs><circle cx="8" cy="8" r="5.7"/></svg>') !important;
|
|
clip-path: polygon(50% 50%,50% 0%,50% 0%,50% 0%, 50% 0%,50% 0%, 50% 0%);
|
|
transition: clip-path 0.2s ease-out, opacity 0.3s linear 0.1s;
|
|
}
|
|
|
|
.tab-icon-stack[pinned]::before{ margin-right: 0px }
|
|
@keyframes loadprogress{
|
|
from{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 50%, 100% 50%,100% 50%, 100% 50%); }
|
|
25%{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 100% 100%,100% 100%, 100% 100%); }
|
|
50%{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%,0% 100%,0% 100%); }
|
|
75%{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%,0% 0%,0% 0%); }
|
|
to{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%, 0% 0%, 50% 0%); }
|
|
}
|
|
@keyframes rotation{
|
|
from{ transform: rotateZ(0deg) }
|
|
to{ transform: rotateZ(360deg) }
|
|
}
|
|
.tabbrowser-tab:not([bursting]) .tab-icon-stack:not([busy])::before{ visibility: collapse; width: 0 }
|
|
.tab-icon-stack:not([busy])::before{ opacity: 0 }
|
|
.tabbrowser-tab:not([progress]) .tab-icon-stack[busy]::before{
|
|
clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 50%, 100% 50%,100% 50%, 100% 50%);
|
|
}
|
|
.tabbrowser-tab[progress] .tab-icon-stack[busy]::before{
|
|
animation: loadprogress 2s linear, rotation 0.7s linear 2s infinite !important;
|
|
animation-fill-mode: forwards !important;
|
|
}
|
|
.tabbrowser-tab[bursting] .tab-icon-stack::before{
|
|
clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%,0% 0%, 50% 0%) !important;
|
|
}
|
|
#tabbrowser-tabs[schedulepressure] .tab-icon-stack::before{ display:none !important; } |