mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-19 22:15:14 +00:00
151 lines
2.7 KiB
CSS
151 lines
2.7 KiB
CSS
/*
|
|
* This is a manifest file that'll be compiled into application.css.
|
|
*
|
|
* With Propshaft, assets are served efficiently without preprocessing steps. You can still include
|
|
* application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
|
|
* cascading order, meaning styles declared later in the document or manifest will override earlier ones,
|
|
* depending on specificity.
|
|
*
|
|
* Consider organizing styles into separate files for maintainability.
|
|
*/
|
|
|
|
@import "https://uchu.style/color.css";
|
|
@import "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css";
|
|
|
|
/* colors */
|
|
|
|
:root {
|
|
--muted-color: var(--uchu-gray);
|
|
--black: rgb(42, 42, 42);
|
|
--smoke: rgb(242, 242, 242);
|
|
/* color: var(--black); */
|
|
/* background-color: var(--smoke); */
|
|
}
|
|
|
|
:root.development {
|
|
--primary-color: var(--uchu-green);
|
|
}
|
|
:root.production {
|
|
--primary-color: var(--uchu-dark-orange);
|
|
}
|
|
|
|
.title {
|
|
font-weight: bolder;
|
|
margin-top: 0.2rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.primary-color {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.flavor {
|
|
font-weight: thin;
|
|
font-style: italic;
|
|
color: var(--muted-color);
|
|
}
|
|
|
|
.admin-tool {
|
|
border-radius: 5px;
|
|
border: 1px dashed var(--uchu-orange);
|
|
background-color: var(--uchu-light-yellow);
|
|
}
|
|
|
|
.dev-tool {
|
|
border-radius: 5px;
|
|
border: 1px dashed var(--uchu-green);
|
|
background-color: var(--uchu-light-green);
|
|
}
|
|
|
|
.loading {
|
|
padding: 1rem;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
.project-durations {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.auth-options {
|
|
max-width: 400px;
|
|
margin: 2rem auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.auth-button {
|
|
display: inline-block;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border: none;
|
|
width: 100%;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.auth-button.slack {
|
|
background-color: #e13950;
|
|
color: white;
|
|
}
|
|
|
|
.auth-button.email {
|
|
background-color: #0070f3;
|
|
color: white;
|
|
}
|
|
|
|
.auth-divider {
|
|
margin: 1rem 0;
|
|
color: #666;
|
|
position: relative;
|
|
}
|
|
|
|
.auth-divider::before,
|
|
.auth-divider::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 45%;
|
|
height: 1px;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.auth-divider::before {
|
|
left: 0;
|
|
}
|
|
|
|
.auth-divider::after {
|
|
right: 0;
|
|
}
|
|
|
|
.email-auth-form .field {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.email-auth-form input[type="email"] {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.super {
|
|
font-style: italic;
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
margin: 0 0 0.1rem;
|
|
}
|
|
|
|
.auto-scroll {
|
|
/* flash a little bit yellow & leave a little bit of a border */
|
|
animation: flash 1s ease-in-out;
|
|
border: 2px solid var(--uchu-yellow);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
@keyframes flash {
|
|
0% { background-color: var(--uchu-yellow); }
|
|
100% { background-color: transparent; }
|
|
}
|