ff_plugins/anime_downloader
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

refactor: Update loading indicator styles to use ::before pseudo-elements and hide svg elements.

Browse Source
This commit is contained in:
projectdx
2025-12-29 21:05:36 +09:00
parent 227e325db2
commit 2c763f7fbf
6 changed files with 132 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
templates/anime_downloader_anilife_queue.html
View File

@@ -266,30 +266,47 @@
backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
} }
#loading img { #loading img,
#loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#loading::after { #loading::before {
content: ''; content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 4px solid rgba(96, 165, 250, 0.2); border: 4px solid rgba(96, 165, 250, 0.2);
border-top-color: #60a5fa; border-top-color: #60a5fa;
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
z-index: 100001;
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to { transform: translate(-50%, -50%) rotate(360deg); }
} }
#modal_loading img { #modal_loading img,
#modal_loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#modal_loading::after { #modal_loading::before {
content: ''; content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid rgba(96, 165, 250, 0.2); border: 3px solid rgba(96, 165, 250, 0.2);

27
templates/anime_downloader_anilife_request.html
View File

@@ -940,30 +940,47 @@
backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
} }
#loading img { #loading img,
#loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#loading::after { #loading::before {
content: ''; content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 4px solid rgba(96, 165, 250, 0.2); border: 4px solid rgba(96, 165, 250, 0.2);
border-top-color: #60a5fa; border-top-color: #60a5fa;
border-radius: 50%; border-radius: 50%;
animation: loader-spin 0.8s linear infinite; animation: loader-spin 0.8s linear infinite;
z-index: 100001;
} }
@keyframes loader-spin { @keyframes loader-spin {
to { transform: rotate(360deg); } to { transform: translate(-50%, -50%) rotate(360deg); }
} }
#modal_loading img { #modal_loading img,
#modal_loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#modal_loading::after { #modal_loading::before {
content: ''; content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid rgba(96, 165, 250, 0.2); border: 3px solid rgba(96, 165, 250, 0.2);

27
templates/anime_downloader_linkkf_queue.html
View File

@@ -314,30 +314,47 @@ function status_html(data) {
backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
} }
#loading img { #loading img,
#loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#loading::after { #loading::before {
content: ''; content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 4px solid rgba(96, 165, 250, 0.2); border: 4px solid rgba(96, 165, 250, 0.2);
border-top-color: #60a5fa; border-top-color: #60a5fa;
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
z-index: 100001;
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to { transform: translate(-50%, -50%) rotate(360deg); }
} }
#modal_loading img { #modal_loading img,
#modal_loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#modal_loading::after { #modal_loading::before {
content: ''; content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid rgba(96, 165, 250, 0.2); border: 3px solid rgba(96, 165, 250, 0.2);

27
templates/anime_downloader_linkkf_request.html
View File

@@ -941,30 +941,47 @@
backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
} }
#loading img { #loading img,
#loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#loading::after { #loading::before {
content: ''; content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 4px solid rgba(96, 165, 250, 0.2); border: 4px solid rgba(96, 165, 250, 0.2);
border-top-color: #60a5fa; border-top-color: #60a5fa;
border-radius: 50%; border-radius: 50%;
animation: loader-spin 0.8s linear infinite; animation: loader-spin 0.8s linear infinite;
z-index: 100001;
} }
@keyframes loader-spin { @keyframes loader-spin {
to { transform: rotate(360deg); } to { transform: translate(-50%, -50%) rotate(360deg); }
} }
#modal_loading img { #modal_loading img,
#modal_loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#modal_loading::after { #modal_loading::before {
content: ''; content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid rgba(96, 165, 250, 0.2); border: 3px solid rgba(96, 165, 250, 0.2);

28
templates/anime_downloader_ohli24_queue.html
View File

@@ -368,31 +368,47 @@
backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
} }
#loading img { #loading img,
#loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#loading::after { #loading::before {
content: ''; content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 4px solid rgba(96, 165, 250, 0.2); border: 4px solid rgba(96, 165, 250, 0.2);
border-top-color: #60a5fa; border-top-color: #60a5fa;
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
z-index: 100001;
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to { transform: translate(-50%, -50%) rotate(360deg); }
} }
/* 모달 로딩 인디케이터 오버라이드 */ #modal_loading img,
#modal_loading img { #modal_loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#modal_loading::after { #modal_loading::before {
content: ''; content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid rgba(96, 165, 250, 0.2); border: 3px solid rgba(96, 165, 250, 0.2);

27
templates/anime_downloader_ohli24_request.html
View File

@@ -1030,31 +1030,48 @@
backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
} }
#loading img { #loading img,
#loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#loading::after { #loading::before {
content: ''; content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 4px solid rgba(96, 165, 250, 0.2); border: 4px solid rgba(96, 165, 250, 0.2);
border-top-color: #60a5fa; border-top-color: #60a5fa;
border-radius: 50%; border-radius: 50%;
animation: loader-spin 0.8s linear infinite; animation: loader-spin 0.8s linear infinite;
z-index: 100001;
} }
@keyframes loader-spin { @keyframes loader-spin {
to { transform: rotate(360deg); } to { transform: translate(-50%, -50%) rotate(360deg); }
} }
/* 모달 로딩 인디케이터 오버라이드 */ /* 모달 로딩 인디케이터 오버라이드 */
#modal_loading img { #modal_loading img,
#modal_loading svg {
display: none !important; display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} }
#modal_loading::after { #modal_loading::before {
content: ''; content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid rgba(96, 165, 250, 0.2); border: 3px solid rgba(96, 165, 250, 0.2);