240 lines
8.4 KiB
CSS
240 lines
8.4 KiB
CSS
/*STYLE.CSS – 25 Apr 2025*/
|
||
|
||
|
||
.dark-theme {
|
||
min-height: 100vh;
|
||
margin: 0;
|
||
overflow-y: hidden;/* default desktop */
|
||
font-family: sans-serif;
|
||
background-color: #0a0a0a;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.dark-theme { overflow-y: auto; }
|
||
}
|
||
|
||
|
||
a { text-decoration: none; color: var(--light-purple); }
|
||
a:hover { color: var(--light-purple-hover); }
|
||
|
||
|
||
.user-card,
|
||
.download-section {
|
||
background-color: var(--card-bg);
|
||
padding: 1.5rem;
|
||
margin: 1rem 0;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
|
||
form { display: flex; flex-direction: column; gap: 1rem; }
|
||
.form-row { display: flex; flex-direction: column; gap: .3rem; }
|
||
|
||
input[type="text"],
|
||
select {
|
||
padding: .5rem;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--border-color);
|
||
background-color: var(--input-bg);
|
||
color: var(--text-color);
|
||
}
|
||
input[type="text"]::placeholder{
|
||
color: var(--placeholder-color);
|
||
}
|
||
input[type="password"]::placeholder {
|
||
color: #e1e1e1;
|
||
}
|
||
input[type="password"],
|
||
select {
|
||
padding: .5rem;
|
||
border-radius: 4px;
|
||
border: 1px solid #151515;
|
||
background-color: transparent;
|
||
color: #e1e1e1;
|
||
}
|
||
input[type="password"]:focus,
|
||
select:focus {
|
||
outline: none;
|
||
border: 1px solid #151515;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.radix-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: .5rem;
|
||
padding: .8rem 1.2rem;
|
||
font: 500 1rem/1 Sans-Serif;
|
||
background-color: var(--button-bg);
|
||
border: 1px solid var(--button-border);
|
||
border-radius: 5px;
|
||
color: var(--text-color);
|
||
cursor: pointer;
|
||
transition: background-color .2s, border-color .2s, opacity .2s;
|
||
}
|
||
.radix-button:hover { background-color: var(--button-bg-hover); border-color: var(--button-border-hover); }
|
||
.radix-button:focus { outline: none; box-shadow: 0 0 0 2px var(--button-focus); }
|
||
.radix-button:disabled { opacity: .6; cursor: not-allowed; }
|
||
.radix-button.loading { background-color: var(--button-loading-bg); border-color: var(--button-loading-border); color: var(--button-loading-text); cursor: progress; }
|
||
|
||
.centered-wrapper { width: 50%; max-width: 870px; margin: 0 auto; position: absolute; }
|
||
@media (max-width: 768px) { .centered-wrapper { width: 90%; } }
|
||
|
||
.login-card {
|
||
margin-top: 5px;
|
||
border: 1px solid var(--login-card-border);
|
||
width: 300px;
|
||
text-align: center;
|
||
position: absolute; top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: transparent;
|
||
}
|
||
|
||
|
||
.main-container .bloom-logo {
|
||
position: absolute; top: 6px; left: 50%; transform: translate(-50%, -50%);
|
||
}
|
||
.center-container { position: relative; display: flex; flex-direction: column; align-items: center; }
|
||
.center-container .bloom-logo { position: relative; margin-bottom: 1rem; }
|
||
.main-container { position: relative; padding-top: 2.5rem; }
|
||
|
||
@media (max-width: 600px) { .main-container .bloom-logo { transform: translate(-30%, -30%); } }
|
||
|
||
@keyframes floatPulse { 0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)} }
|
||
.bloom-logo {
|
||
height: 40px; width: 40px; border-radius: 6px; font-size: 1rem;
|
||
display: flex; align-items: center; justify-content: center; z-index: 10;
|
||
animation: floatPulse 2.4s ease-in-out infinite;
|
||
}
|
||
|
||
.checkbox-container { display: flex; align-items: center; gap: .5rem; background-color: var(--checkbox-bg); display:none;}
|
||
.remember-me { background-color: var(--checkbox-bg); accent-color: var(--checkbox-accent); width:16px; height:16px; cursor:pointer; display:none;}
|
||
|
||
#downloadURL:focus { outline: none; }
|
||
@keyframes breathe { 0%{border-color:var(--fetching-glow)}50%{border-color:var(--fetching-mid)}100%{border-color:var(--fetching-glow)} }
|
||
.fetching { animation: breathe 2.5s ease-in-out infinite; }
|
||
|
||
.xp-level-info { margin-top:5px; text-align:center; font-family:Arial,sans-serif; }
|
||
.radix-progress { width:80%; margin:8px auto; }
|
||
.radix-progress-track { background-color:var(--progress-track-bg); border-radius:5px; height:20px; overflow:hidden; }
|
||
.radix-progress-indicator { height:100%; background-color:var(--progress-indicator-bg); transition:width .5s ease; }
|
||
|
||
.format-selection-container {
|
||
display:none;
|
||
margin-top:1rem;
|
||
padding:1rem;
|
||
border:1px solid var(--border-color);
|
||
border-radius:8px;
|
||
background:var(--format-bg);
|
||
opacity:0;
|
||
position:relative;
|
||
}
|
||
.format-options { display:flex; flex-direction:column; gap:.3rem; margin:.8rem 0; }
|
||
.format-option input[type=radio]{ margin-right:8px; accent-color:#333; }
|
||
|
||
#closeFormatCard {
|
||
position:absolute; top:8px; right:12px; z-index:2;
|
||
font-size:20px; font-weight:bold; background:transparent; border:none;
|
||
color:var(--close-btn-color); cursor:pointer; transition:color .2s ease;
|
||
}
|
||
#closeFormatCard:hover { color: var(--close-btn-hover); }
|
||
|
||
|
||
.loading { opacity:.7; cursor:wait; }
|
||
|
||
@keyframes breathingPulse{
|
||
0% { transform:scale(1); opacity:.7; }
|
||
50% { transform:scale(1.02);opacity:1; }
|
||
100%{ transform:scale(1); opacity:.7; }
|
||
}
|
||
.breathing { animation: breathingPulse 1.4s ease-in-out infinite; display:flex; align-items:center; gap:.5rem; }
|
||
|
||
|
||
.radix-spinner {
|
||
width:20px; height:20px;
|
||
border:2px solid var(--spinner-border);
|
||
border-top:2px solid var(--spinner-top);
|
||
border-radius:50%;
|
||
animation:spin 1s linear infinite; margin-right:8px;
|
||
}
|
||
@keyframes spin { to{transform:rotate(360deg);} }
|
||
|
||
.radix-button.danger {
|
||
background-color: var(--error-bg);
|
||
border-color: var(--error-bg);
|
||
}
|
||
.radix-button.danger:hover { filter: brightness(0.9); }
|
||
.radix-button.hidden { display: none; }
|
||
|
||
.radix-button.small { padding: .4rem .6rem; font-size: .875rem; }
|
||
|
||
|
||
@keyframes breathe-green{0%{border-color:var(--fetching-glow)}50%{border-color:var(--fetching-mid)}100%{border-color:var(--fetching-glow)}}
|
||
@keyframes breathe-red{0%{border-color:var(--error-glow)}50%{border-color:var(--error-mid)}100%{border-color:var(--error-glow)}}
|
||
.fetching{animation:breathe-green 2.5s ease-in-out infinite;}
|
||
.erroring{animation:breathe-red 1.5s ease-in-out 1;}
|
||
|
||
:root[data-radix-theme="dark"]{
|
||
--error-glow:#ff5c5c;
|
||
--error-mid:#b83e3e;
|
||
}
|
||
|
||
|
||
@keyframes breathe-green{0%{border-color:var(--green-9)}50%{border-color:var(--green-7)}100%{border-color:var(--green-9)}}
|
||
@keyframes breathe-red {0%{border-color:var(--red-9)}50%{border-color:var(--red-7)}100%{border-color:var(--red-9)}}
|
||
|
||
.fetching{animation:breathe-green 2.5s ease-in-out infinite;}
|
||
.erroring{animation:breathe-red 1.6s ease-in-out 1;}
|
||
|
||
|
||
.radix-button.primary{background-color:var(--gray-10);border-color:var(--gray-10);color:var(--gray-1);}
|
||
.radix-button.primary:hover{filter:brightness(1.05);}
|
||
.radix-button.danger{background-color:var(--red-11);border-color:var(--red-10);color:var(--gray-1);}
|
||
.radix-button.danger:hover{filter:brightness(.95);}
|
||
|
||
@keyframes breatheText{0%{opacity:.8}50%{opacity:1}100%{opacity:.8}}
|
||
.breathing-btn{animation:breatheText 1.6s ease-in-out infinite;}
|
||
|
||
|
||
@keyframes breathe-green{0%{border-color:var(--green-9)}50%{border-color:var(--green-7)}100%{border-color:var(--green-9)}}
|
||
@keyframes breathe-red {0%{border-color:var(--red-9)}50%{border-color:var(--red-7)}100%{border-color:var(--red-9)}}
|
||
.fetching{animation:breathe-green 2.5s ease-in-out infinite;}
|
||
.erroring{animation:breathe-red 1.6s ease-in-out 1;}
|
||
|
||
#downloadURL:not(.fetching):not(.erroring):hover{
|
||
border-color:var(--gray-7);transition:border-color .15s ease;
|
||
}
|
||
|
||
|
||
.radix-badge.size-badge{
|
||
background-color:var(--gray-8);
|
||
border:1px solid var(--gray-7);
|
||
color:var(--gray-1);
|
||
padding:.15rem .45rem;
|
||
font-size:.75rem;
|
||
border-radius:4px;
|
||
white-space:nowrap;
|
||
display:inline-flex;
|
||
align-items:center;
|
||
gap:.2rem;
|
||
}
|
||
|
||
.radix-badge.size-badge{
|
||
padding:.15rem .45rem;font-size:.75rem;border-radius:4px;
|
||
display:inline-flex;align-items:center;gap:.15rem;
|
||
transition:background-color .25s ease,border-color .25s ease,color .25s ease;
|
||
}
|
||
|
||
.size-small {background-color:var(--green-9);border:1px solid var(--green-7);color:var(--gray-1);}
|
||
.size-medium{background-color:var(--amber-9);border:1px solid var(--amber-7);color:var(--gray-1);}
|
||
.size-large {background-color:var(--red-10);border:1px solid var(--red-8); color:var(--gray-1);}
|
||
|
||
|
||
.skeleton {
|
||
background:transparent;border:1px dashed var(--gray-7);color:transparent;
|
||
animation:skeletonPulse 1s ease-in-out infinite;
|
||
}
|
||
@keyframes skeletonPulse {0%,100%{opacity:.4}50%{opacity:1}} |