hackatime/app/assets/stylesheets/application.css
2025-03-12 13:57:28 -04:00

131 lines
2.3 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-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;
}