Kumi
4f6e170a79
Introduces a margin-top rule for primary buttons within `.card-body`, specifically targeting all but the first button. This change ensures consistent spacing between stacked buttons, enhancing the visual layout and overall user interface within card components. The adjustment caters to the need for clearer visual separation in dense UI areas, particularly where multiple actions are presented in a confined space.
151 lines
No EOL
3 KiB
CSS
151 lines
No EOL
3 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
} |