init
This commit is contained in:
cash
240
frontend/static/css/style.css
Normal file
240
frontend/static/css/style.css
Normal file
@@ -0,0 +1,240 @@
|
||||
/*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}}
|
||||
Reference in New Issue
Block a user