privatecoffee-website/assets/css/base.css
Kumi 95387eafae
feat: enhance icon theming flexibility
Introduced a new styling rule for `.bs-icon-circle` to apply a subtler background color, improving visual integration across themes. This change complements existing icon styles by offering an alternative option for a less prominent icon appearance, aimed at enhancing UI adaptability and consistency in different contexts. This update is in response to feedback requesting more nuanced design elements for diverse UI backgrounds.
2024-05-30 12:17:37 +02:00

201 lines
No EOL
3.7 KiB
CSS

/* This file was created as part of the Private.coffee project
It is licensed under the MIT license
For more information, please visit https://private.coffee
*/
/* General styles */
:root,
[data-bs-theme="light"] {
--bs-primary: #f570b9;
--bs-primary-rgb: 245, 112, 185;
--bs-primary-text-emphasis: #622d4a;
--bs-primary-bg-subtle: #fde2f1;
--bs-primary-border-subtle: #fbc6e3;
--bs-body-color: #232323;
--bs-body-color-rgb: 35, 35, 35;
--bs-secondary-color: rgba(35, 35, 35, 0.75);
--bs-secondary-color-rgb: 35, 35, 35, 0.75;
--bs-tertiary-color: rgba(35, 35, 35, 0.5);
--bs-tertiary-color-rgb: 35, 35, 35, 0.5;
--bs-body-font-family: Inconsolata, monospace;
}
.btn-primary {
--bs-btn-color: #000000;
--bs-btn-bg: #f570b9;
--bs-btn-border-color: #f570b9;
--bs-btn-hover-color: #000000;
--bs-btn-hover-bg: #f785c4;
--bs-btn-hover-border-color: #f67ec0;
--bs-btn-focus-shadow-rgb: 37, 17, 28;
--bs-btn-active-color: #000000;
--bs-btn-active-bg: #f78dc7;
--bs-btn-active-border-color: #f67ec0;
--bs-btn-disabled-color: #000000;
--bs-btn-disabled-bg: #f570b9;
--bs-btn-disabled-border-color: #f570b9;
color: #fff;
}
.btn-outline-primary {
--bs-btn-color: #f570b9;
--bs-btn-border-color: #f570b9;
--bs-btn-focus-shadow-rgb: 245, 112, 185;
--bs-btn-hover-color: #000000;
--bs-btn-hover-bg: #f570b9;
--bs-btn-hover-border-color: #f570b9;
--bs-btn-active-color: #000000;
--bs-btn-active-bg: #f570b9;
--bs-btn-active-border-color: #f570b9;
--bs-btn-disabled-color: #f570b9;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #f570b9;
}
h2 .special-header {
font-size: 10rem !important;
}
.special-header {
font-size: 4rem;
font-weight: 900;
}
.fancy-text-primary {
background: -webkit-linear-gradient(45deg, #ba77fc, #ff7f8c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
letter-spacing: 0.03rem;
font-size: 1.1rem;
}
h5 {
letter-spacing: 0.05rem;
}
.navbar-brand {
font-weight: 800 !important;
font-size: x-large;
}
.card-body .btn-primary:not(:first-child) {
margin-top: 10px;
}
.currency-col {
width: 200px;
white-space: nowrap;
text-align: right;
}
.table-transparency td:not(:first-child) {
text-align: right;
}
.section {
padding: 20px 0;
border-bottom: 1px solid #e0e0e0;
}
.alert-warning {
background-color: #fff3cd;
border-color: #ffeeba;
color: #856404;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.alert-warning .alert-link {
color: #856404;
font-weight: bold;
text-decoration: underline;
}
.alert-warning .alert-link:hover {
color: #604c2e;
}
.bs-icon.bs-icon-primary svg {
fill: var(--bs-primary-bg-subtle);
}
.bs-icon.bs-icon-lg svg {
fill: var(--bs-primary);
}
.bs-icon-circle svg {
fill: var(--bs-primary-bg-subtle);
}
/* Responsive Styles */
@media (max-width: 768px) {
.navbar .container {
display: flex;
flex-direction: column;
align-items: center;
}
.navbar .row {
flex-direction: column;
align-items: center;
}
.navbar .col {
text-align: center;
}
.navbar-brand p {
font-size: 0.9rem;
}
.navbar-brand span.fancy-text-primary {
font-size: 1.1rem;
}
.navbar-brand span {
display: block;
}
.navbar-nav {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
padding: 0;
}
.navbar-nav .nav-item {
display: inline-block;
padding: 0 1rem;
}
.btn.btn-primary {
margin: 1rem auto;
display: block;
width: 80%;
}
h2 .special-header {
font-size: 6rem !important;
}
.special-header {
font-size: 2rem;
}
.navbar-btn {
margin: 0 auto !important;
}
.that-br {
display: none;
}
.slogan {
display: none;
}
}