/* ---- Consistent border radii (app-wide) ----
One knob: --app-border-radius. Every box (cards, alerts, modals, dropdowns,
toasts, list-groups, form controls, .rounded/-2/-3/-4 utilities, .rounded-lg/-md,
.box-container) shares this radius. Buttons are always pills.
Intentional exceptions keep their own radius: circles/avatars (50%), pills,
toggle switches, chart bars/legend swatches, scrollbar thumbs, tiny tags,
the .mobile-* journal UI and TV/print/share graphics. */
/* Must also match [data-bs-theme] — Bootstrap re-declares the radius tokens on
[data-bs-theme=light] (set on ), which would otherwise shadow :root. */
:root,
[data-bs-theme] {
--app-border-radius: 10px;
--bs-border-radius: var(--app-border-radius);
--bs-border-radius-lg: var(--app-border-radius);
--bs-border-radius-xl: var(--app-border-radius);
}
/* Buttons are always pills. Inner corners of .btn-group/.input-group are still
squared off by Bootstrap's own higher-specificity corner rules. The sized
group selectors are needed because .btn-group-sm/-lg > .btn outrank .btn. */
.btn,
.btn-group-sm > .btn,
.btn-group-lg > .btn {
--bs-btn-border-radius: 50rem;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
/* Must equal the page colour painted by #app (.bg-light: rgb(242,242,246) light /
#151515 dark, see .bootstrap .bg-light below and custom-bootstrap-dark.css).
iOS WKWebView (Cordova app, PWA) paints the DOCUMENT background in the
safe-area insets above and below the layout viewport, so any other colour
here shows up as a white band under the status bar and home indicator. */
background: rgb(242, 242, 246);
font-family: 'Helvetica Neue', arial, sans-serif;
font-weight: 400;
/* color: #444; */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* padding-top: env(safe-area-inset-top); */
/* overscroll-behavior-y: contain; */
}
html[data-bs-theme='dark'],
html[data-bs-theme='dark'] body {
background: #151515;
}
/*
body.android {
padding-top: 30px !important;
} */
[data-bs-theme='dark'] .logoImg {
/* turn black → white, keep transparency */
/* filter: invert(1); */
/* optional tiny tweaks */
filter: invert(1) brightness(1.05) contrast(1.05);
}
[data-bs-theme='light'] .logoImg {
filter: none;
}
body {
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Only the native iOS wrapper opts into viewport-fit=cover. Body padding already
insets the content and refresh band; fixed headers need the same top origin.
Fit #app inside the padded body instead of overflowing it with another 100vh. */
html.native-ios-app {
--native-safe-area-top: env(safe-area-inset-top, 0px);
--app-viewport-height: 100%;
}
/* Cover the header while it slides through the status-bar area on scroll.
Bootstrap's fixed headers use z-index 1030; drawers and top sheets stay above this. */
html.native-ios-app body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--native-safe-area-top);
background: inherit;
z-index: 1031;
pointer-events: none;
}
/* Tight Mode for global spacing reduction */
/* body.tight-mode {
font-size: 0.9rem !important;
line-height: 1.0rem !important;
} */
/* .tight-mode p,
.tight-mode h1, .tight-mode h2, .tight-mode h3, .tight-mode h4, .tight-mode h5, .tight-mode h6,
.tight-mode ul, .tight-mode ol, .tight-mode li,
.tight-mode div, .tight-mode section, .tight-mode article {
margin: 0 !important;
line-height: 1.1 !important;
} */
/* Optional: Override Bootstrap-specific elements for tighter spacing */
/* .tight-mode .container,
.tight-mode .container-fluid,
.tight-mode .row,
.tight-mode .col {
padding: 0 !important;
} */
/* Lists: remove padding/margin for tight layout */
/* .tight-mode ul, .tight-mode ol {
padding-left: 1rem !important;
margin-bottom: 0 !important;
} */
/* Tighten buttons and forms */
/* .tight-mode button,
.tight-mode input,
.tight-mode textarea {
padding: 0.25rem 0.5rem !important;
margin: 0 !important;
} */
/* Adjust table padding/margins for tighter spacing */
/* .tight-mode table {
margin: 0 !important;
padding: 0 !important;
} */
/* Tighter margin utility classes */
/* .tight-mode .m-1 { margin: 0.1rem !important; }
.tight-mode .m-2 { margin: 0.2rem !important; }
.tight-mode .m-3 { margin: 0.3rem !important; }
.tight-mode .m-4 { margin: 0.5rem !important; }
.tight-mode .m-5 { margin: 0.75rem !important; } */
/* Tighter padding utility classes */
/* .tight-mode .p-1 { padding: 0.1rem !important; }
.tight-mode .p-2 { padding: 0.2rem !important; }
.tight-mode .p-3 { padding: 0.3rem !important; }
.tight-mode .p-4 { padding: 0.5rem !important; }
.tight-mode .p-5 { padding: 0.75rem !important; } */
/* Tighter margin and padding for specific directions (top, bottom, left, right) */
/* .tight-mode .mt-1, .tight-mode .mb-1, .tight-mode .ms-1, .tight-mode .me-1 { margin: 0.1rem !important; } */
/* .tight-mode .pt-1, .tight-mode .pb-1, .tight-mode .ps-1, .tight-mode .pe-1 { padding: 0.1rem !important; } */
/* .tight-mode .mt-2, .tight-mode .mb-2, .tight-mode .ms-2, .tight-mode .me-2 { margin: 0.2rem !important; } */
/* .tight-mode .pt-2, .tight-mode .pb-2, .tight-mode .ps-2, .tight-mode .pe-2 { padding: 0.2rem !important; } */
/* .bootstrap .fixed-top {
top: env(safe-area-inset-top) !important;
} */
.hljs {
color: #abb2bf !important; /* default Atom One Dark text */
background-color: #282c34 !important; /* dark bg */
border-radius: var(--app-border-radius); /* rounded corners */
padding: 0.75rem; /* some inner space */
overflow-x: auto; /* scroll long lines */
}
/* optional: tweak code font & size */
.hljs code {
color: #f0f0f0;
font-family: 'Source Code Pro', monospace;
font-size: 0.9rem;
}
.hljs-property {
color: #E06C75 !important; /* lighter, Atom One Dark “red” */
}
.selected {
outline: 2px solid blue;
}
.islink {
cursor: pointer;
}
.font-style-narrow {
font-family: 'Roboto Condensed', var(--bs-font-sans-serif);
font-weight: 300; /* try 300–400 */
font-stretch: condensed; /* try condensed or semi-condensed */
}
.hoverelementonly {
display: none;
}
.hoverElement:hover .hoverelementonly {
display : inline;
}
.hoverElement:hover .hoverelementhide {
display : none;
}
.box-container {
border-radius: var(--app-border-radius);
}
.progress-bar-vertical {
width: 40px;
min-height: 100px;
/* margin-right: 30px; */
float: left;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
align-items: flex-end;
-webkit-align-items: flex-end; /* Safari 7.0+ */
}
.progress-bar-vertical .progress-bar {
width: 100%;
height: 0;
-webkit-transition: height 0.6s ease;
-o-transition: height 0.6s ease;
transition: height 0.6s ease;
}
.progress-bar-container {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.progress-bar-container .progress {
height: 4px;
}
.progress-bar-container .progress-bar {
/* background-color: #e9ecef; */
height: 4px;
position: relative;
}
.progress-dot-container {
position: absolute;
width: 100%;
top: -10px;
display: flex;
justify-content: space-between;
}
.progress-dot {
width: 20px;
height: 20px;
background-color: #dddddd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
}
.progress-dot.active {
background-color: #007bff;
}
/* Label styling */
.progress-label-container {
position: absolute;
width: 100%;
top: -30px; /* Positioning labels above dots */
display: flex;
justify-content: space-between;
font-size: 14px;
color: #333;
text-wrap: nowrap;
}
.progress-label {
position: relative;
text-align: center;
width: 20px; /* Ensures labels are centered with dots */
}
.progress-label-text {
position: absolute;
top: 0px; /* Positioning text below dots */
left: 50%;
transform: translateX(-50%);
}
.vertical-text {
display: inline-block;
writing-mode: vertical-rl; /* Standard property */
-webkit-writing-mode: vertical-rl; /* Safari */
-ms-writing-mode: tb-rl; /* IE and old Edge */
text-orientation: mixed; /* Standard property */
-webkit-text-orientation: mixed; /* Safari */
white-space: nowrap;
}
.keyboardShortcut {
font-size: 0.8em;
font-family:'Courier New', Courier, monospace;
}
/* custom.css (load this after bootstrap.css) */
/* Fallback for browsers that do not support writing-mode */
@supports not (writing-mode: vertical-rl) {
.vertical-text {
writing-mode: unset;
-webkit-writing-mode: unset;
-ms-writing-mode: unset;
transform: rotate(90deg);
transform-origin: left bottom;
}
}
.top {
vertical-align: top !important;
}
.middle {
vertical-align: middle !important;
}
.bottom {
vertical-align: bottom !important;
}
.baseline {
vertical-align: baseline !important;
}
.w-1 {
width: 1% !important;
}
.w-2 {
width: 2% !important;
}
.w-3 {
width: 3% !important;
}
.w-4 {
width: 4% !important;
}
.w-5 {
width: 5% !important;
}
.w-10 {
width: 10% !important;
}
.w-15 {
width: 15% !important;
}
.w-20 {
width: 20% !important;
}
.w-95 {
width: 95% !important;
}
.w-90 {
width: 90% !important;
}
.w-85 {
width: 85% !important;
}
.w-80 {
width: 80% !important;
}
.input-plain[type="number"]::-webkit-inner-spin-button,
.input-plain[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-plain[type="number"] {
-moz-appearance: textfield; /* Firefox */
text-align: right;
}
.dragged {
border: 2px dotted #ff0000;
}
.over {
border: 2px dotted #00ff00;
}
.list {
list-style-type: none;
}
.navbar-toggler-icon{
font-size: 0.6em;
}
.navbar-toggler {
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
.bg-black {
background-color: #0a0a0a;
}
.bg-orange {
background-color: rgb(255,95,51);
}
.btn.btn-orange {
background-color: rgb(255, 95, 51); /* Or use a specific orange hex code like #FFA500 */
color: white;
}
/* Optional: Add hover effect */
.btn.btn-orange:hover {
background-color: rgba(255, 95, 51, 0.853); /* Darker shade for hover */
color: white;
}
/* Glow background utilities */
.bg-glow-primary {
background-color: #007bff !important;
box-shadow: 0 0 0.2rem #007bff, 0 0 0.2rem #007bff;
transition: box-shadow .2s ease-in-out;
}
.bg-glow-primary:hover {
box-shadow: 0 0 0.5rem #007bff, 0 0 0.5rem #007bff;
}
.bg-glow-secondary {
background-color: #6c757d !important;
box-shadow: 0 0 0.2rem #6c757d, 0 0 0.2rem #6c757d;
transition: box-shadow .2s ease-in-out;
}
.bg-glow-secondary:hover {
box-shadow: 0 0 0.5rem #6c757d, 0 0 0.5rem #6c757d;
}
.bg-glow-success {
background-color: #28a745 !important;
box-shadow: 0 0 0.2rem #28a745, 0 0 0.2rem #28a745;
transition: box-shadow .2s ease-in-out;
}
.bg-glow-success:hover {
box-shadow: 0 0 0.5rem #28a745, 0 0 0.5rem #28a745;
}
.bg-glow-danger {
background-color: #dc3545 !important;
box-shadow: 0 0 0.2rem #dc3545, 0 0 0.2rem #dc3545;
transition: box-shadow .2s ease-in-out;
}
.bg-glow-danger:hover {
box-shadow: 0 0 0.5rem #dc3545, 0 0 0.5rem #dc3545;
}
.bg-glow-warning {
background-color: #ffc107 !important;
box-shadow: 0 0 0.2rem #ffc107, 0 0 0.2rem #ffc107;
transition: box-shadow .2s ease-in-out;
}
.bg-glow-warning:hover {
box-shadow: 0 0 0.5rem #ffc107, 0 0 0.5rem #ffc107;
}
.bg-glow-info {
background-color: #17a2b8 !important;
box-shadow: 0 0 0.2rem #17a2b8, 0 0 0.2rem #17a2b8;
transition: box-shadow .2s ease-in-out;
}
.bg-glow-info:hover {
box-shadow: 0 0 0.5rem #17a2b8, 0 0 0.5rem #17a2b8;
}
/* Optional pulsing animation */
@keyframes glowPulse {
0% { box-shadow: 0 0 0.2rem currentColor; }
50% { box-shadow: 0 0 1rem currentColor; }
100% { box-shadow: 0 0 0.5rem currentColor; }
}
.pulse-glow {
animation: glowPulse 2s infinite ease-in-out;
/* combine with any bg-glow-* class: …
*/
}
.form-control-sm-no-height {
height: inherit !important;
}
.tracking-nav .nav-link {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
* {
box-sizing: border-box;
}
#app {
height: 100%;
}
.imageRounded {
width: 76px;
min-width: 76px;
height: 76px;
min-height: 76px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.imageRoundedXLarge {
width: 250px;
min-width: 250px;
height: 250px;
min-height: 250px;
}
.imageRoundedLarge {
width: 150px;
min-width: 150px;
height: 150px;
min-height: 150px;
}
.imageRoundedMediumPlus {
width: 100px;
min-width: 100px;
height: 100px;
min-height: 100px;
}
.imageRoundedMedium {
width: 55px;
min-width: 55px;
height: 55px;
min-height: 55px;
}
.imageRoundedSmall {
width: 40px;
min-width: 40px;
height: 40px;
min-height: 40px;
}
.imageRoundedThumb2 {
width: 28px;
min-width: 28px;
height: 28px;
min-height: 28px;
}
.imageRoundedThumb {
width: 25px;
min-width: 25px;
height: 25px;
min-height: 25px;
}
.imageRoundedIcon {
width: 17px;
min-width: 17px;
height: 17px;
min-height: 17px;
}
.imageRoundedSmallIcon {
width: 13px;
min-width: 13px;
height: 13px;
min-height: 13px;
}
.imageRoundedResponsive {
width: 90px;
min-width: 90px;
height: 90px;
min-height: 90px;
}
.imageRoundedResponsivePosition {
top: -45px;
}
.badge-light {
border: 1px solid #e6e6e6;
}
.badge-dark {
border: 1px solid #191d21;
}
.badge-warning {
border: 1px solid #efb506;
}
.badge-danger {
border: 1px solid #c92f3f;
}
.badge-success {
border: 1px solid #22933d;
}
.badge-primary {
border: 1px solid #0073ee;
}
.badge-info {
border: 1px solid #1492a6;
}
.bootstrap .rounded-lg,
.bootstrap-dark .rounded-lg {
border-radius: var(--app-border-radius) !important;
}
.bootstrap .rounded-bottom-lg,
.bootstrap-dark .rounded-bottom-lg {
border-bottom-left-radius: var(--app-border-radius) !important;
border-bottom-right-radius: var(--app-border-radius) !important;
}
.bootstrap .rounded-top-lg,
.bootstrap-dark .rounded-top-lg {
border-top-left-radius: var(--app-border-radius) !important;
border-top-right-radius: var(--app-border-radius) !important;
}
.bootstrap .rounded-md,
.bootstrap-dark .rounded-md {
border-radius: var(--app-border-radius) !important;
}
.bootstrap .rounded-bottom-md,
.bootstrap-dark .rounded-bottom-md {
border-bottom-left-radius: var(--app-border-radius) !important;
border-bottom-right-radius: var(--app-border-radius) !important;
}
.bootstrap .rounded-top-md,
.bootstrap-dark .rounded-top-md {
border-top-left-radius: var(--app-border-radius) !important;
border-top-right-radius: var(--app-border-radius) !important;
}
.bootstrap .rounded-lg-lg,
.bootstrap-dark .rounded-lg-lg {
border-radius: var(--app-border-radius) !important;
}
.bootstrap .rounded-lg-md,
.bootstrap-dark .rounded-lg-md {
border-radius: var(--app-border-radius) !important;
}
@media only screen and (max-width: 600px) {
.bootstrap .rounded-lg-lg,
.bootstrap-dark .rounded-lg-lg {
border-radius: 0rem !important;
}
.bootstrap .rounded-lg-md,
.bootstrap-dark .rounded-lg-md {
border-radius: 0rem !important;
}
}
.scrollbar {
scrollbar-width: auto; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.no-scrollbar {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.no-scrollbar::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.imageRoundedResponsive {
width: 100px;
min-width: 100px;
height: 100px;
min-height: 100px;
}
.imageRoundedResponsivePosition {
top: -50px;
}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
.imageRoundedResponsive {
width: 120px;
min-width: 120px;
height: 120px;
min-height: 120px;
}
.imageRoundedResponsivePosition {
top: -60px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.imageRoundedResponsive {
width: 150px;
min-width: 150px;
height: 150px;
min-height: 150px;
}
.imageRoundedResponsivePosition {
top: -85px;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.imageRoundedResponsive {
width: 150px;
min-width: 150px;
height: 150px;
min-height: 150px;
}
.imageRoundedResponsivePosition {
top: -85px;
}
}
.subtopmenu {
line-height: 1.8em;
}
.calendarIsWeekend {
background-color: rgba(255,50,50,0.2);
}
.calendarIsToday {
background-color: rgba(23,162,184,0.2);
}
.calendarIsChosen {
background-color: rgba(0,123,255,0.2);
}
.jumbotron-thumb {
max-height: 450px;
overflow: hidden;
}
.frontpage-hero-image .imageContainer {
max-height: 50vh;
}
.frontpage-hero-image .imageContainer .lazy-image-container {
width: 100%;
}
.frontpage-hero-image .imageContainer .lazy-image-container img {
max-height: unset !important;
width: 100%;
object-fit: cover;
}
.frontpage-hero-image video {
max-height: 50vh;
width: 100%;
object-fit: cover;
}
.list-thumb {
max-height: 200px;
overflow: hidden;
}
.bootstrap-dark .nav-link {
padding: .5rem 1.8rem;
font-size: 1.2em;
}
.bootstrap-dark .form-control-plaintext {
color: #d3d3d3;
}
.text-overflow {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.text-strikethrough {
text-decoration: line-through;
}
.pointerCursor {
cursor: pointer;
pointer-events: inherit;
}
.contain-images img {
max-width: 100%;
}
.btn:focus, .btn:active, .btn:hover {
outline: none !important;
box-shadow: none !important;
}
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-primary:hover, .btn-outline-primary:hover,
.btn-outline-info:hover, .btn-outline-info:hover,
.btn-outline-danger:hover, .btn-outline-danger:hover,
.btn-outline-warning:hover, .btn-outline-warning:hover {
background: none !important;
}
.map-marker {
position: relative;
background: #00aabb;
border-radius: .4em;
}
.map-marker:after {
content: '';
position: absolute;
bottom: 0;
left: 20%;
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-left: 0;
margin-left: -15px;
margin-bottom: -30px;
}
.bubble {
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
width: 120px;
height: 30px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #7F7F7F solid 1px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 40px 10px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -40px;
left: 50px;
}
.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 40px 10px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
bottom: -41px;
left: 50px;
}
.bubble2 {
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
width: 120px;
height: 30px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #7F7F7F solid 1px;
}
.bubble2:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 10px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -10px;
left: 50px;
}
.bubble2:before {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 10px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
bottom: -11px;
left: 50px;
}
.bubble3 {
position: relative;
width: 200px;
height: 30px;
padding: 0px;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: #7C7F7F solid 1px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.bubble3:after {
content: '';
position: absolute;
border-style: solid;
border-width: 5px 0 5px 30px;
border-color: transparent #ffffff;
display: block;
width: 0;
z-index: 1;
right: -30px;
top: 10px;
}
.bubble3:before {
content: '';
position: absolute;
border-style: solid;
border-width: 5px 0 5px 30px;
border-color: transparent #7C7F7F;
display: block;
width: 0;
z-index: 0;
right: -31px;
top: 10px;
}
.bubble4 {
position: relative;
width: 200px;
height: 30px;
padding: 0px;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: #7C7F7F solid 1px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.bubble4:after {
content: '';
position: absolute;
border-style: solid;
border-width: 5px 0 5px 30px;
border-color: transparent #ffffff;
display: block;
width: 0;
z-index: 1;
right: -30px;
top: 10px;
}
.bubble4:before {
content: '';
position: absolute;
border-style: solid;
border-width: 5px 0 5px 30px;
border-color: transparent #7C7F7F;
display: block;
width: 0;
z-index: 0;
right: -31px;
top: 10px;
}
.commentBubble {
max-width: 100%; /* limit width so it looks like a bubble */
padding: 0.5rem 1rem;
margin: 2px 0 0 0; /* minimal top margin to stay close to author name */
border-radius: var(--app-border-radius); /* bubble edges */
display: inline-block; /* important for bubble shape */
position: relative; /* so we can do "arrow" effects if desired */
}
.commentBody {
font-size: 1.0rem !important;
}
.commentBody > div,
.commentBody p {
margin: 0;
padding: 0;
line-height: 1.4;
}
/* For others’ comments (on the left, gray-ish background) */
.othersComment {
background-color: var(--bs-tertiary-bg); /* nice card-like surface */
color: var(--bs-body-color); /* readable text for the theme */
border: 1px solid var(--bs-border-color); /* subtle border that adapts */
margin-right: auto; /* push to the left */
}
/* For your own comments (on the right, green-ish background) */
.myMessage {
/* background-color: #358cfc; */
/* background-color: color-mix(in srgb, 100%, 50%); */
/* color: #ffffff; */
margin-left: auto; /* push to the right */
background-color: var(--bs-primary) !important; /* nice card-like surface */
color: var(--bs-light) !important; /* readable text for the theme */
/* border: 1px solid var(--bs-border-color); subtle border that adapts */
/* border-radius: var(--bs-border-radius); */
/* margin-right: auto; push to the left */
/* You can also float or text-align right, but flex auto margin is simpler */
text-align: left; /* keep text left-aligned even if bubble is right */
}
.likes {
font-size: 1.0rem !important;
}
.likes-comment {
font-size: 0.85rem !important;
/* Comment action strip (Like / Reply / trash). The Like element is a plain
, so iOS long-press would start text selection and show the
Copy/Look Up bar on top of the reaction picker. */
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
@keyframes like-heart-animation {
0%,
to {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
15% {
opacity: 0.9;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
30% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
45%,
80% {
opacity: 0.9;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.likeStory {
animation: 2s like-heart-animation ease-in-out forwards;
}
@keyframes unlike-heart-animation {
0%,
to {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
15% {
opacity: 0.9;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
30% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
45%,
80% {
opacity: 0.9;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.unlikeStory {
animation: 2s unlike-heart-animation ease-in-out forwards;
}
/* add to your global CSS or a module */
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.9); }
100% { transform: scale(1); }
}
.heart {
cursor: pointer;
transition: fill 0.2s ease;
will-change: transform;
}
.heart.liked {
fill: #e0245e;
}
.heart.animate {
animation: pop 0.3s ease-out;
}
.bigHeart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
pointer-events: none;
animation: bigPop 0.8s forwards;
}
@keyframes bigPop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}
.bigHeart svg {
width: 120px;
height: 120px;
fill: rgba(224, 36, 94, 0.9);
}
@keyframes placeholderFade {
0% {
background-color: rgba(165, 165, 165, 0.1);
}
50% {
background-color: rgba(165, 165, 165, 0.3);
}
100% {
background-color: rgba(165, 165, 165, 0.1);
}
}
.placeholder {
animation: placeholderFade 1.5s infinite;
height: 20px;
min-width: 100px;
margin: 0px 0;
border-radius: 4px;
}
.table-placeholder {
animation: placeholderFade 1.5s infinite;
height: 20px;
width: 100%;
border-radius: 4px;
}
.table-header-sticky {
/* Set an explicit or max height so the container can scroll */
max-height: 80vh;
overflow-y: auto;
}
.table-header-sticky thead th {
position: sticky;
top: 0; /* Sticks to the top of the scrolling container */
z-index: 2; /* Ensures it's above the rows */
background: #fff; /* So the header text isn’t obscured by rows scrolling underneath */
}
.skeleton-row {
display: flex;
justify-content: space-between;
}
.skeleton-cell {
flex: 1;
margin: 5px 5px;
background-color: #eee;
}
.bootstrap .bg-light {
background-color: rgb(242, 242, 246) !important;
}
.bootstrap .bg-success-light {
background-color: rgba(40, 167, 69, 0.2) !important;
}
.bootstrap .bg-danger-light {
background-color: rgba(255, 0, 0, 0.2) !important;
}
.bootstrap .bg-primary-light {
background-color: rgba(0, 123, 255, 0.2) !important;
}
.bootstrap .bg-info-light {
background-color: rgba(23, 162, 184, 0.2) !important;
}
.bootstrap .bg-warning-light {
background-color: rgba(255, 193, 7, 0.6) !important;
}
.bootstrap .bg-secondary-light {
background-color: rgba(108, 117, 125, 0.2) !important;
}
.bg-darkmode,
.bootstrap .bg-darkmode,
.bootstrap-dark .bg-darkmode {
background-color: #191d21 !important;
}
.bg-lightmode,
.bootstrap .bg-lightmode,
.bootstrap-dark .bg-lightmode {
background-color: #fff !important;
}
.bootstrap .border-darkmode,
.bootstrap-dark .border-darkmode,
.border-darkmode {
border-color: #191d21 !important;
border-width: 4px !important;
}
.bootstrap .border-lightmode,
.bootstrap-dark .border-lightmode,
.border-lightmode {
border-color: #fff !important;
border-width: 4px !important;
}
.rounded-lg.inboxBubble {
border-radius: var(--app-border-radius) !important;
font-size: 1.1em;
}
.bootstrap .rounded-none,
.bootstrap-dark .rounded-none {
border-radius: 0rem 0rem 0rem 0rem !important;
}
.bootstrap .rounded-pill-left,
.bootstrap-dark .rounded-pill-left {
border-radius: 50rem 0rem 0rem 50rem !important;
}
.bootstrap .rounded-pill-right,
.bootstrap-dark .rounded-pill-right {
border-radius: 0rem 50rem 50rem 0rem !important;
}
.bootstrap .rounded-pill-both,
.bootstrap-dark .rounded-pill-both {
border-radius: 50rem 50rem 50rem 50rem !important;
}
.btn-circle {
border-radius: 50% !important;
}
.loginContainer {
color: #ffffff;
}
.storyPoll .markup p {
margin-bottom: 0;
}
.noscroll {
overflow: hidden;
}
.bg-img-cover {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.nospace .markup p {
/* margin-bottom: 0; */
}
.bootstrap-dark .custom-file-label {
border-radius: var(--app-border-radius);
border-style: dashed;
}
.bootstrap-dark .custom-file-input:lang(en) ~ .custom-file-label::after {
display: none;
content: "";
}
.bootstrap .custom-file-label {
border-radius: var(--app-border-radius);
border-style: dashed;
}
.bootstrap .custom-file-input:lang(en) ~ .custom-file-label::after {
display: none;
content: "";
}
/* BS5 theme-aware file tile (replaces .custom-file from BS4) */
.fileDrop {
position: relative;
min-height: 115px;
display: flex;
align-items: center;
justify-content: center;
gap: .25rem;
border: 1px dashed var(--bs-border-color);
border-radius: var(--bs-border-radius);
background-color: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fileDrop i { font-size: 1.6rem; }
.fileDrop:hover {
background-color: var(--bs-tertiary-bg);
}
.fileDrop:focus-within {
border-style: solid;
border-color: var(--bs-primary);
box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
/* make the whole tile clickable, keep it accessible */
.fileDrop input[type='file'] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.profileSmallName {
font-size: 18px;
font-weight: 700;
}
.profileSmallHeader {
font-size: 13px;
font-weight: 700;
}
.profileSmallNumbers {
font-size: 13px;
font-weight: 400;
}
.profileMediumNumbers {
font-size: 18px;
font-weight: 510;
}
.header2 {
font-size: 18px;
font-weight: 700;
line-height: 22px;
}
.header3 {
font-size: 18px;
font-weight: 400;
line-height: 22px;
}
.header4 {
font-size: 15px;
font-weight: 510;
line-height: 19px;
}
.widgetHeaderTop {
font-size: 15px;
font-weight: 700;
line-height: 15px;
}
.widgetHeaderIcon {
font-size: 16px;
font-weight: 900;
line-height: 24px;
}
.widgetHeaderIconLarge {
font-size: 19px;
font-weight: 900;
line-height: 24px;
}
.widgetHeaderIconXLarge {
font-size: 24px;
font-weight: 900;
line-height: 26px;
}
.widgetHeader {
font-size: 15px;
font-weight: 510;
line-height: 22px;
}
.widgetHeaderLarge {
font-size: 18px;
font-weight: 510;
line-height: 22px;
}
.widgetHeaderSmall {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.widgetSubHeaderSmall {
font-size: 15px;
font-weight: 400;
line-height: 15px;
}
.widgetContentText {
font-size: 28px;
font-weight: 700;
line-height: 30px;
margin-top: 37px;
margin-bottom: 37px;
}
.widgetContentTextMedium {
font-size: 22px;
font-weight: 600;
line-height: 22px;
margin-top: 10px;
}
.widgetContentTextSmall {
font-size: 18px;
font-weight: 510;
line-height: 18px;
margin-top: 10px;
}
.appHeader {
line-height: 22px !important;
font-size: 20px !important;
font-weight: 400 !important;
}
.appMenu {
line-height: 22px !important;
font-size: 20px !important;
font-weight: 400 !important;
}
.appNavigation {
line-height: 22px !important;
font-size: 17px !important;
font-weight: 400 !important;
}
.appSegmentControllerPrimary {
line-height: 18px !important;
font-size: 15px !important;
font-weight: 400 !important;
}
.appSegmentControllerSecondary {
line-height: 22px !important;
font-size: 17 !important;
font-weight: 600 !important;
}
.markup-header .markup p {
margin: 0px;
}
.markup > p:last-child {
margin: 0px;
}
.markup img {
max-width: 100%;
}
/* Help center article — clean, professional styling for inline screenshots */
.help-article-body img {
display: block;
max-width: 100%;
height: auto;
margin: 1.5rem auto;
border: 1px solid var(--bs-border-color);
border-radius: var(--app-border-radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
background-color: var(--bs-body-bg);
}
.help-article-body p > img:only-child {
margin-top: 1.75rem;
margin-bottom: 1.75rem;
}
.help-article-body a > img {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.help-article-body a:hover > img {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.06);
}
[data-bs-theme="dark"] .help-article-body img,
.bootstrap-dark .help-article-body img {
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}
.drag {
margin-right: 15px;
cursor: move;
}
.tabbable .nav-tabs {
overflow-x: auto;
overflow-y:hidden;
flex-wrap: nowrap;
}
.tabbable .nav-tabs .nav-link {
white-space: nowrap;
}
.box-header {
font-size: 1.45em;
line-height: 1.0em;
}
.box-header-info {
font-size: 1.2em;
}
.bootstrap-dark .box-line {
/* border-bottom: 2px solid #151515; */
}
.bootstrap .box-line {
/* border-bottom: 2px solid rgb(242, 242, 246); */
}
.box-line:last-child {
border-bottom: none;
}
.box-line:hover {
cursor: pointer;
}
.box-line-add {
font-size: 2.0em;
}
.bootstrap-dark .box-line-add {
color: #505050;
}
.bootstrap .box-line-add {
color: #d0d0d0;
}
.box-line-header {
font-size: 0.8em !important;
font-weight: 350;
}
.box-line-title {
font-size: 1.1em;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
white-space: nowrap;
}
.box-line-qty {
font-size: 2.25em;
font-weight: 100;
width: 50px;
min-width: 50px;
display: grid;
align-items: center;
justify-items: end;
}
.box-line-title-info {
font-size: 0.9em;
line-height: 1.0em;
font-weight: 350;
}
.box-line-status {
font-size: 1.0em;
}
.box-line-focused {
border-left: 2px solid #007bff;
}
.box-line-info {
font-size: 0.9em;
font-weight: 350;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
white-space: nowrap;
}
.box-line-image {
width: 100px !important;
height: 90px;
}
.box-line-image-placeholder {
width: 100% !important;
height: 100% !important;
}
.box-line-image img {
width: 100px !important;
height: 90px;
object-fit: cover;
}
.box-line-image-large {
max-height: 300px;
overflow: hidden;
}
.box-line-image-large img {
max-height: 300px;
object-fit: cover;
}
.bootstrap-dark .box-line-info {
color: #505050;
}
.bootstrap .box-line-info {
color: #a0a0a0;
}
.form-label-inline {
position: absolute;
top: 6px;
left: 8px;
font-size: 0.75em;
}
.bootstrap .fastlist-hide,
.bootstrap-dark .fastlist-hide {
display: none !important;
}
.swipe-container > div:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.swipe-container > div:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.swipe-container > div:not(:last-child) {
margin-right: 2px;
}
/* Make the video container fill the entire window */
.video-container {
/* position: fixed; */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.8); /* Optional: background color */
}
/* Make the video player responsive */
.video-player {
max-width: 100%;
max-height: 50vh;
}
.resultLine .selected {
background-color: #007bff;
color: #ffffff;
}
.toastui-calendar-dropdown-menu-item .toastui-calendar-content {
font-size: 1.0rem !important;
font-weight: 400 !important;
}
.no-select {
user-select: none;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
}
.leaflet-marker-icon.leaflet-div-icon {
background: transparent;
border: none;
}
.leaflet-marker-icon.waypoint-marker-icon,
.leaflet-marker-icon.waypoint-label-icon {
background: transparent;
border: none;
pointer-events: auto !important;
cursor: pointer;
z-index: 1000 !important;
}
.leaflet-marker-icon.waypoint-marker-icon > div,
.leaflet-marker-icon.waypoint-label-icon > div {
pointer-events: auto !important;
}
.leaflet-marker-icon.checkpoint-marker-icon {
background: transparent;
border: none;
pointer-events: none !important;
}
.leaflet-marker-icon.checkpoint-marker-icon > div {
pointer-events: none !important;
}
.leaflet-marker-icon.tracker-marker-icon {
background: transparent;
border: none;
transition: transform 3s ease-out;
}
/* Disable transition during zoom to prevent visual glitch */
.leaflet-zoom-anim .tracker-marker-icon {
transition: none !important;
}
tr.deleted td {
text-decoration: line-through;
}
.scroll-wrapper {
position: relative;
display: flex;
align-items: center;
}
.scroll-button {
background-color: rgba(255, 255, 255, 1.0);
border: none;
cursor: pointer;
font-size: 32px;
padding: 10px;
z-index: 1;
opacity: 0.5;
transition: opacity 0.3s;
z-index: 100000;
border: 2px solid #808080;
}
.scroll-button.left {
position: absolute;
top: 40%;
left: 0 !important;
}
.scroll-button.right {
position: absolute;
top: 40%;
right: 0 !important;
}
.scroll-button:hover {
opacity: 1;
}
.scroll-button:disabled {
opacity: 0.2;
cursor: default;
}
@media print {
/* Default page settings for receipts/invoices */
@page {
margin: 10mm;
}
/* Brother QL-820NWB label printer - continuous roll landscape (default) */
@page landscape {
size: auto 58mm; /* Landscape: auto width (continuous), 58mm height (roll width - padding) */
margin: 0; /* No margins for label printing */
}
/* Portrait mode for shipping code labels, barcodes, and QR codes */
@page portrait {
size: 60mm auto; /* Portrait: 60mm width (label width), auto height (continuous) */
margin: 0;
}
:root, html, body {
color-scheme: light !important;
}
html, body {
background: white !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
body * {
visibility: hidden;
}
.receipt, .receipt * {
visibility: visible;
margin: 0;
padding: 0;
}
.receipt {
width: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 5mm;
box-sizing: border-box;
font-size: 9pt; /* Adjust as needed */
color: black; /* Better for printing */
background: white !important;
}
/* Prevent nested .receipt elements from getting extra padding */
.receipt .receipt {
position: relative;
padding: 0;
}
/* Reset Bootstrap padding/margin utilities inside receipt for print */
.receipt .px-5,
.receipt .py-5,
.receipt .p-5,
.receipt .px-3,
.receipt .py-3,
.receipt .p-3,
.receipt .mx-3,
.receipt .my-3,
.receipt .m-3 {
padding: 0 !important;
margin: 0 !important;
}
.receipt .mt-5 {
margin-top: 1rem !important;
}
.receipt .box-container {
padding: 0 !important;
background: white !important;
}
.receipt .table-responsive {
overflow: visible !important;
}
/* Ensure stamps are visible and properly positioned in print */
.receipt-stamp {
visibility: visible !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
background: transparent !important;
}
.barcodeLabelPage, .barcodeLabelPage * {
visibility: visible;
}
.barcodeLabelPage {
page: landscape; /* Use landscape named page */
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: auto; /* Auto width for continuous roll in landscape */
height: 58mm; /* Fixed height: 62mm roll width - 4mm padding */
box-sizing: border-box;
/* font-size: 9pt; Adjust as needed */
color: black; /* Better for printing */
/* background: #ff00ff; */ /* Debug: uncomment to see label boundaries */
}
.barcodeLabelPage .container {
width: 100%;
padding: 0;
/* background-color: #00ff00; */
}
.barcodeLabelPage > svg {
/* background-color: #ff0000; */
width: 100%;
height: 100%;
}
/* Portrait mode for shipping code labels */
.barcodeLabelPagePortrait, .barcodeLabelPagePortrait * {
visibility: visible;
}
.barcodeLabelPagePortrait {
page: portrait; /* Use portrait named page */
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 60mm; /* Fixed width: 60mm label width */
height: auto; /* Auto height for continuous roll in portrait */
box-sizing: border-box;
color: black;
/* background: #ffff00; */ /* Debug: uncomment to see label boundaries */
}
.barcodeLabelPagePortrait .container {
width: 100%;
padding: 0;
}
.page-break {
display: block;
page-break-before: always; /* Force page breaks */
}
}
@media print {
/* Hide ALL body children except the prescription print div */
body.printing-prescription > *:not(.printPrescription) {
display: none !important;
visibility: hidden !important;
}
/* Also hide any fixed-position elements that might overlay */
body.printing-prescription .fixed-top,
body.printing-prescription .fixed-bottom,
body.printing-prescription [style*="position: fixed"],
body.printing-prescription [style*="position:fixed"] {
display: none !important;
}
.printPrescription, .printPrescription * {
visibility: visible !important;
}
.printPrescription {
width: 100%;
position: static;
font-size: 13px;
margin: 0;
padding: 15mm;
box-sizing: border-box;
background: white !important;
color: black !important;
}
/* Force clean backgrounds on all child elements */
.printPrescription *,
.printPrescription *::before,
.printPrescription *::after {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Keep readable contrast for muted labels (Rp., Dssn., Reit, etc.) */
.printPrescription .text-muted,
.printPrescription .text-body-secondary {
color: #555 !important;
}
/* When printing prescriptions, hide all other competing print targets */
body.printing-prescription .receipt,
body.printing-prescription .receipt *,
body.printing-prescription .printRaceStats,
body.printing-prescription .printRaceStats *,
body.printing-prescription .viewForm,
body.printing-prescription .viewForm *,
body.printing-prescription .print-section,
body.printing-prescription .print-section *,
body.printing-prescription .barcodeLabelPage,
body.printing-prescription .barcodeLabelPage *,
body.printing-prescription .barcodeLabelPagePortrait,
body.printing-prescription .barcodeLabelPagePortrait *,
body.printing-prescription .holiday-planner-main,
body.printing-prescription .holiday-planner-main * {
visibility: hidden !important;
display: none !important;
}
.printRaceStats, .printRaceStats * {
visibility: visible;
}
.printRaceStats {
width: 100%;
position: absolute;
font-size: 11px;
top: 0;
left: 0;
margin: 0;
padding: 10mm;
box-sizing: border-box;
color: black;
background: white;
}
.printRaceStats h4 {
font-size: 18px;
margin-bottom: 15px;
border-bottom: 2px solid #333;
padding-bottom: 10px;
}
.printRaceStats h5 {
font-size: 13px;
margin: 15px 0 8px 0;
}
.printRaceStats .summary-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 20px;
}
.printRaceStats .summary-card {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.printRaceStats .summary-card .label {
font-size: 9px;
color: #666;
margin-bottom: 4px;
}
.printRaceStats .summary-card .value {
font-size: 14px;
font-weight: bold;
}
.printRaceStats .section {
margin-bottom: 15px;
page-break-inside: avoid;
}
.printRaceStats .stats-row {
display: flex;
gap: 20px;
}
.printRaceStats .breakdown-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
.printRaceStats .stats-table {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
}
.printRaceStats .stats-table th,
.printRaceStats .stats-table td {
border: 1px solid #ddd;
padding: 5px 8px;
text-align: left;
}
.printRaceStats .stats-table th {
background: #f0f0f0;
font-weight: bold;
}
.printRaceStats .stats-table td:not(:first-child) {
text-align: right;
}
.printRaceStats .print-footer {
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #ddd;
font-size: 9px;
color: #666;
text-align: right;
}
.printRaceStats .bar-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.printRaceStats .bar-item {
display: grid;
grid-template-columns: 140px 100px 1fr;
align-items: center;
gap: 8px;
}
.printRaceStats .bar-label {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.printRaceStats .bar-value {
font-size: 10px;
text-align: right;
color: #666;
}
.printRaceStats .print-progress {
height: 10px;
background: #e9ecef;
border-radius: 3px;
overflow: hidden;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.printRaceStats .print-progress-bar {
height: 100%;
border-radius: 3px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
@media print {
body * {
visibility: hidden;
}
.viewForm, .viewForm * {
visibility: visible;
}
.viewForm {
width: 100%;
position: absolute;
font-size: 13px;
top: 0;
left: 0;
margin: 0;
padding: 5mm;
box-sizing: border-box;
}
}
@media print {
body * {
visibility: hidden;
}
.print-section, .print-section * {
visibility: visible;
}
.print-section {
width: 100%;
position: static;
font-size: 11px;
margin: 0;
padding: 10mm;
box-sizing: border-box;
background: white !important;
}
.print-section table {
width: 100%;
border-collapse: collapse;
}
.print-section th, .print-section td {
padding: 2px 4px;
border: 1px solid #ccc;
}
.print-section .table-dark {
background-color: #f0f0f0 !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.print-section .table-responsive {
overflow: visible !important;
}
}
@media print {
body * {
visibility: hidden;
}
.holiday-planner-main, .holiday-planner-main * {
visibility: visible;
}
.holiday-planner-main {
width: 100%;
position: absolute;
font-size: 10px;
top: 0;
left: 0;
margin: 0;
padding: 5mm;
box-sizing: border-box;
background: white !important;
color: black !important;
}
.holiday-planner-main .holiday-grid-print-container {
display: block !important;
width: 100%;
}
.holiday-planner-main .holiday-grid-print {
width: 100% !important;
border-collapse: collapse;
background: white !important;
color: black !important;
margin-bottom: 12px;
page-break-inside: avoid;
table-layout: fixed;
font-size: 9px;
}
.holiday-planner-main .holiday-grid-print th,
.holiday-planner-main .holiday-grid-print td {
padding: 2px 3px !important;
border: 1px solid #999 !important;
background: white !important;
color: black !important;
font-size: 9px;
}
.holiday-planner-main .holiday-grid-print .name-col {
width: 120px !important;
min-width: 120px !important;
max-width: 120px !important;
background-color: #f0f0f0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 9px;
}
.holiday-planner-main .holiday-grid-print .weekend {
background-color: #e9ecef !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.holiday-planner-main .holiday-grid-print .holiday {
background-color: #f8d7da !important;
color: #721c24 !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.holiday-planner-main .holiday-grid-print .has-holiday {
background: repeating-linear-gradient(45deg, #007bff, #007bff 2px, #0056b3 2px, #0056b3 4px) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.holiday-planner-main .text-muted {
color: #6c757d !important;
}
}
@media print {
.printAppointment, .printAppointment * {
visibility: visible;
}
.printAppointment {
width: 100%;
position: absolute;
font-size: 11pt;
top: 0;
left: 0;
margin: 0;
padding: 10mm;
box-sizing: border-box;
background: white !important;
color: black !important;
z-index: 999999;
}
body.printing-appointment .receipt,
body.printing-appointment .receipt *,
body.printing-appointment .printPrescription,
body.printing-appointment .printPrescription *,
body.printing-appointment .printRaceStats,
body.printing-appointment .printRaceStats *,
body.printing-appointment .viewForm,
body.printing-appointment .viewForm *,
body.printing-appointment .print-section,
body.printing-appointment .print-section *,
body.printing-appointment .barcodeLabelPage,
body.printing-appointment .barcodeLabelPage *,
body.printing-appointment .barcodeLabelPagePortrait,
body.printing-appointment .barcodeLabelPagePortrait *,
body.printing-appointment .holiday-planner-main,
body.printing-appointment .holiday-planner-main * {
visibility: hidden !important;
display: none !important;
}
}
.show-pad-down {
display: block !important;
}
@media (max-width: 767px) {
.show-pad-down {
display: none !important;
}
}
.show-ipad-up-2 {
color: var(--bs-tertiary-color) !important;
}
.show-ipad-up {
display: none !important;
}
/* show (as flex) on md+ (>=768px) */
@media (min-width: 768px) {
.show-ipad-up {
display: flex !important;
}
}
@media (max-width: 767px) {
.w-50.w-ipad {
margin-top: 10px !important;
width: 100% !important;
}
.w-25.w-ipad {
margin-top: 10px !important;
width: 50% !important;
}
}
@media (max-width: 1024px) {
.w-50.w-ipad {
margin-top: 10px !important;
width: 100% !important;
}
.w-25.w-ipad {
margin-top: 10px !important;
width: 50% !important;
}
}
/* iOS */
@media (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
body {
padding-top: 44px; /* iPhone X, iPhone XS */
}
}
/* iOS-style Toggle Switches (Bootstrap 4.5 compatible) */
.custom-switch {
position: relative;
display: inline-block;
width: auto !important;
height: 34px;
}
.custom-switch .custom-control-input {
opacity: 0;
width: 0;
height: 0;
}
.custom-switch .custom-control-label {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
transition: .4s;
}
.custom-switch .custom-control-label:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
transition: .4s;
}
.custom-switch .custom-control-input:checked + .custom-control-label {
background-color: #007bff;
}
.custom-switch .custom-control-input:focus + .custom-control-label {
box-shadow: 0 0 1px #007bff;
}
.custom-switch .custom-control-input:checked + .custom-control-label:before {
transform: translateX(26px);
}
/* Medium switch variant */
.custom-switch-md {
width: 48px;
height: 28px;
}
.custom-switch-md .custom-control-label:before {
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
}
.custom-switch-md .custom-control-input:checked + .custom-control-label:before {
transform: translateX(20px);
}
/* Small switch variant */
.custom-switch-sm {
width: 36px;
height: 20px;
}
.custom-switch-sm .custom-control-label {
border-radius: 20px;
}
.custom-switch-sm .custom-control-label:before {
height: 12px;
width: 12px;
left: 4px;
bottom: 4px;
}
.custom-switch-sm .custom-control-input:checked + .custom-control-label:before {
transform: translateX(16px);
}
/* Bootstrap 5 form-switch fallback */
.form-switch .form-check-input {
width: 2em;
margin-left: -2.5em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
background-position: left center;
border-radius: 2em;
transition: background-position .15s ease-in-out;
}
.form-switch .form-check-input:checked {
background-position: right center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1.0%29'/%3e%3c/svg%3e");
background-color: #007bff;
border-color: #007bff;
}
/* Specific styling for your current markup */
.form-check.custom-switch .form-check-input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.form-check.custom-switch .form-check-label {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
background-color: #ccc;
border-radius: 34px;
cursor: pointer;
transition: .4s;
padding-left: 0;
}
.form-check.custom-switch .form-check-label:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
transition: .4s;
}
.form-check.custom-switch .form-check-input:checked + .form-check-label {
background-color: #007bff;
}
.form-check.custom-switch .form-check-input:checked + .form-check-label:before {
transform: translateX(26px);
}
.form-check.custom-switch-md .form-check-label {
width: 48px;
height: 28px;
}
.form-check.custom-switch-md .form-check-label:before {
height: 20px;
width: 20px;
}
.form-check.custom-switch-md .form-check-input:checked + .form-check-label:before {
transform: translateX(20px);
}
/* Remove underlines from functional button-like links */
a.btn,
a.nav-link,
a.navbar-brand,
a.dropdown-item,
a.list-group-item,
a.breadcrumb-item,
a.page-link,
a.badge,
a.alert-link,
a.card-link,
a[role="button"],
a.font-style-narrow,
a.stretched-link,
.btn-link,
.islink,
.pointerCursor {
text-decoration: none !important;
}
/* Hover states should also have no underline */
a.btn:hover,
a.nav-link:hover,
a.navbar-brand:hover,
a.dropdown-item:hover,
a.list-group-item:hover,
a.breadcrumb-item:hover,
a.page-link:hover,
a.badge:hover,
a.alert-link:hover,
a.card-link:hover,
a[role="button"]:hover,
a.font-style-narrow:hover,
a.stretched-link:hover,
.btn-link:hover,
.islink:hover,
.pointerCursor:hover {
text-decoration: none !important;
}
/* Focus states should also have no underline */
a.btn:focus,
a.nav-link:focus,
a.navbar-brand:focus,
a.dropdown-item:focus,
a.list-group-item:focus,
a.breadcrumb-item:focus,
a.page-link:focus,
a.badge:focus,
a.alert-link:focus,
a.card-link:focus,
a[role="button"]:focus,
a.font-style-narrow:focus,
a.stretched-link:focus,
.btn-link:focus,
.islink:focus,
.pointerCursor:focus {
text-decoration: none !important;
}
/* Dark mode ToastUI Calendar styles */
[data-bs-theme='dark'] .toastui-calendar-month-more-list,
[data-bs-theme='dark'] .toastui-calendar-month,
[data-bs-theme='dark'] .toastui-calendar-week,
[data-bs-theme='dark'] .toastui-calendar-day,
[data-bs-theme='dark'] .toastui-calendar-time,
[data-bs-theme='dark'] .toastui-calendar-timegrid,
[data-bs-theme='dark'] .toastui-calendar-daygrid,
[data-bs-theme='dark'] .toastui-calendar-panel,
[data-bs-theme='dark'] .toastui-calendar-panel-container {
background-color: #212529 !important;
color: #f8f9fa !important;
}
/* Calendar grid and header backgrounds */
[data-bs-theme='dark'] .toastui-calendar-header,
[data-bs-theme='dark'] .toastui-calendar-month-column-header,
[data-bs-theme='dark'] .toastui-calendar-week-header,
[data-bs-theme='dark'] .toastui-calendar-day-header {
background-color: #343a40 !important;
color: #f8f9fa !important;
border-color: #495057 !important;
}
/* Calendar day cells */
[data-bs-theme='dark'] .toastui-calendar-month-daygrid-cell,
[data-bs-theme='dark'] .toastui-calendar-week-daygrid-cell,
[data-bs-theme='dark'] .toastui-calendar-timegrid-cell,
[data-bs-theme='dark'] .toastui-calendar-time-date,
[data-bs-theme='dark'] .toastui-calendar-time-timezone {
background-color: #212529 !important;
border-color: #495057 !important;
color: #f8f9fa !important;
}
/* Today cell highlighting */
[data-bs-theme='dark'] .toastui-calendar-month-daygrid-cell.toastui-calendar-today,
[data-bs-theme='dark'] .toastui-calendar-week-daygrid-cell.toastui-calendar-today {
background-color: #0d6efd !important;
color: #ffffff !important;
}
/* Weekend cells */
[data-bs-theme='dark'] .toastui-calendar-month-daygrid-cell.toastui-calendar-weekend,
[data-bs-theme='dark'] .toastui-calendar-week-daygrid-cell.toastui-calendar-weekend {
background-color: #2d3748 !important;
}
/* Calendar events */
[data-bs-theme='dark'] .toastui-calendar-event,
[data-bs-theme='dark'] .toastui-calendar-event-bar,
[data-bs-theme='dark'] .toastui-calendar-time-event {
color: #000000 !important; /* Keep event text black for readability on colored backgrounds */
}
/* Time grid lines */
[data-bs-theme='dark'] .toastui-calendar-timegrid-line,
[data-bs-theme='dark'] .toastui-calendar-time-hour-line {
border-color: #495057 !important;
}
/* Current time indicator */
[data-bs-theme='dark'] .toastui-calendar-timegrid-current-time,
[data-bs-theme='dark'] .toastui-calendar-time-current-time {
background-color: #dc3545 !important;
}
/* Dropdown menus */
[data-bs-theme='dark'] .toastui-calendar-dropdown-menu,
[data-bs-theme='dark'] .toastui-calendar-month-more-list {
background-color: #343a40 !important;
border-color: #495057 !important;
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15) !important;
}
[data-bs-theme='dark'] .toastui-calendar-dropdown-menu-item,
[data-bs-theme='dark'] .toastui-calendar-month-more-item {
color: #f8f9fa !important;
}
[data-bs-theme='dark'] .toastui-calendar-dropdown-menu-item:hover,
[data-bs-theme='dark'] .toastui-calendar-month-more-item:hover {
background-color: #495057 !important;
}
/* Calendar navigation buttons */
[data-bs-theme='dark'] .toastui-calendar-btn,
[data-bs-theme='dark'] .toastui-calendar-btn-prev,
[data-bs-theme='dark'] .toastui-calendar-btn-next,
[data-bs-theme='dark'] .toastui-calendar-btn-today {
background-color: #6c757d !important;
color: #f8f9fa !important;
border-color: #495057 !important;
}
[data-bs-theme='dark'] .toastui-calendar-btn:hover,
[data-bs-theme='dark'] .toastui-calendar-btn-prev:hover,
[data-bs-theme='dark'] .toastui-calendar-btn-next:hover,
[data-bs-theme='dark'] .toastui-calendar-btn-today:hover {
background-color: #5c636a !important;
}
/* Calendar titles and text */
[data-bs-theme='dark'] .toastui-calendar-title,
[data-bs-theme='dark'] .toastui-calendar-month-title,
[data-bs-theme='dark'] .toastui-calendar-week-title {
color: #f8f9fa !important;
}
/* Time grid labels */
[data-bs-theme='dark'] .toastui-calendar-timegrid-timezone-label,
[data-bs-theme='dark'] .toastui-calendar-time-timezone-label {
color: #adb5bd !important;
}
/* Event popups and forms */
[data-bs-theme='dark'] .toastui-calendar-popup,
[data-bs-theme='dark'] .toastui-calendar-form {
background-color: #343a40 !important;
border-color: #495057 !important;
color: #f8f9fa !important;
}
[data-bs-theme='dark'] .toastui-calendar-popup-form-row,
[data-bs-theme='dark'] .toastui-calendar-form-row {
border-color: #495057 !important;
}
[data-bs-theme='dark'] .toastui-calendar-form-input,
[data-bs-theme='dark'] .toastui-calendar-popup-form-input {
background-color: #212529 !important;
border-color: #495057 !important;
color: #f8f9fa !important;
}
/* Scrollbars for dark mode calendar */
[data-bs-theme='dark'] .toastui-calendar-time::-webkit-scrollbar,
[data-bs-theme='dark'] .toastui-calendar-timegrid::-webkit-scrollbar {
width: 8px;
background-color: #212529;
}
[data-bs-theme='dark'] .toastui-calendar-time::-webkit-scrollbar-thumb,
[data-bs-theme='dark'] .toastui-calendar-timegrid::-webkit-scrollbar-thumb {
background-color: #495057;
border-radius: 4px;
}
[data-bs-theme='dark'] .toastui-calendar-time::-webkit-scrollbar-thumb:hover,
[data-bs-theme='dark'] .toastui-calendar-timegrid::-webkit-scrollbar-thumb:hover {
background-color: #6c757d;
}
/* base: default is `blue` so no attr needed */
html[data-hue='blue'], body[data-hue='blue'] {
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
--bs-link-color: var(--bs-blue);
--bs-link-hover-color: color-mix(in srgb, var(--bs-blue), #000 20%);
--bs-primary-text-emphasis: #052c65;
--bs-primary-bg-subtle: #cfe2ff;
--bs-primary-border-subtle: #9ec5fe;
}
html[data-hue='indigo'], body[data-hue='indigo'] {
--bs-primary: var(--bs-indigo);
--bs-primary-rgb: var(--bs-indigo-rgb);
--bs-link-color: var(--bs-indigo);
--bs-link-hover-color: color-mix(in srgb, var(--bs-indigo), #000 20%);
--bs-primary-text-emphasis: var(--bs-indigo);
--bs-primary-bg-subtle: #e0cffc;
--bs-primary-border-subtle: #c29ffa;
}
html[data-hue='purple'], body[data-hue='purple'] {
--bs-primary: var(--bs-purple);
--bs-primary-rgb: var(--bs-purple-rgb);
--bs-link-color: var(--bs-purple);
--bs-link-hover-color: color-mix(in srgb, var(--bs-purple), #000 20%);
--bs-primary-text-emphasis: var(--bs-purple);
--bs-primary-bg-subtle: #e2d9f3;
--bs-primary-border-subtle: #c5b3e6;
}
html[data-hue='pink'], body[data-hue='pink'] {
--bs-primary: var(--bs-pink);
--bs-primary-rgb: var(--bs-pink-rgb);
--bs-link-color: var(--bs-pink);
--bs-link-hover-color: color-mix(in srgb, var(--bs-pink), #000 20%);
--bs-primary-text-emphasis: var(--bs-pink);
--bs-primary-bg-subtle: #f7d6e6;
--bs-primary-border-subtle: #efadcd;
}
html[data-hue='red'], body[data-hue='red'] {
--bs-primary: var(--bs-red);
--bs-primary-rgb: var(--bs-red-rgb);
--bs-link-color: var(--bs-red);
--bs-link-hover-color: color-mix(in srgb, var(--bs-red), #000 20%);
--bs-primary-text-emphasis: var(--bs-danger-text-emphasis);
--bs-primary-bg-subtle: var(--bs-danger-bg-subtle);
--bs-primary-border-subtle: var(--bs-danger-border-subtle);
}
html[data-hue='orange'], body[data-hue='orange'] {
--bs-primary: var(--bs-orange);
--bs-primary-rgb: var(--bs-orange-rgb);
--bs-link-color: var(--bs-orange);
--bs-link-hover-color: color-mix(in srgb, var(--bs-orange), #000 20%);
--bs-primary-text-emphasis: var(--bs-orange);
--bs-primary-bg-subtle: #ffe5d0;
--bs-primary-border-subtle: #fecba1;
}
html[data-hue='yellow'], body[data-hue='yellow'] {
--bs-primary: var(--bs-yellow);
--bs-primary-rgb: var(--bs-yellow-rgb);
--bs-link-color: var(--bs-yellow);
--bs-link-hover-color: color-mix(in srgb, var(--bs-yellow), #000 25%);
--bs-primary-text-emphasis: var(--bs-warning-text-emphasis);
--bs-primary-bg-subtle: var(--bs-warning-bg-subtle);
--bs-primary-border-subtle: var(--bs-warning-border-subtle);
}
html[data-hue='green'], body[data-hue='green'] {
--bs-primary: var(--bs-green);
--bs-primary-rgb: var(--bs-green-rgb);
--bs-link-color: var(--bs-green);
--bs-link-hover-color: color-mix(in srgb, var(--bs-green), #000 20%);
--bs-primary-text-emphasis: var(--bs-success-text-emphasis);
--bs-primary-bg-subtle: var(--bs-success-bg-subtle);
--bs-primary-border-subtle: var(--bs-success-border-subtle);
}
html[data-hue="teal"], body[data-hue="teal"] {
--bs-primary: var(--bs-teal);
--bs-primary-rgb: var(--bs-teal-rgb);
--bs-link-color: var(--bs-teal);
--bs-link-hover-color: color-mix(in srgb, var(--bs-teal), #000 20%);
--bs-primary-text-emphasis: var(--bs-teal-text-emphasis, #0f5132);
--bs-primary-bg-subtle: var(--bs-teal-bg-subtle, #d2f4ea);
--bs-primary-border-subtle: var(--bs-teal-border-subtle, #a6e9d5);
}
html[data-hue="cyan"], body[data-hue="cyan"] {
--bs-primary: var(--bs-cyan);
--bs-primary-rgb: var(--bs-cyan-rgb);
--bs-link-color: var(--bs-cyan);
--bs-link-hover-color: color-mix(in srgb, var(--bs-cyan), #000 20%);
--bs-primary-text-emphasis: var(--bs-info-text-emphasis);
--bs-primary-bg-subtle: var(--bs-info-bg-subtle);
--bs-primary-border-subtle: var(--bs-info-border-subtle);
}
/* optional gray palette (maps primary to gray) */
html[data-hue='gray'], body[data-hue='gray'] {
--bs-primary: var(--bs-gray-700);
--bs-primary-rgb: 73,80,87;
--bs-link-color: var(--bs-gray-700);
--bs-link-hover-color: color-mix(in srgb, var(--bs-gray-700), #000 20%);
--bs-primary-text-emphasis: var(--bs-gray-800);
--bs-primary-bg-subtle: var(--bs-gray-100);
--bs-primary-border-subtle: var(--bs-gray-300);
}
/* === Buttons: make .btn-primary & .btn-outline-primary follow the current hue === */
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
/* hover/active states derived from current hue */
--bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary), #000 12%);
--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary), #000 18%);
--bs-btn-active-bg: color-mix(in srgb, var(--bs-primary), #000 18%);
--bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary), #000 24%);
--bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary), #000 30%);
--bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-primary), #000 30%);
}
.btn-outline-primary {
--bs-btn-color: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-bg: transparent;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--bs-primary);
--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary), #000 12%);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: color-mix(in srgb, var(--bs-primary), #000 12%);
--bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary), #000 18%);
--bs-btn-disabled-color: color-mix(in srgb, var(--bs-primary), #000 35%);
--bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-primary), #000 35%);
}
/* Optional: badges that follow hue */
.text-bg-primary {
background-color: var(--bs-primary) !important;
color: #fff !important;
}
/* Background utility that follows hue */
.bg-primary {
background-color: var(--bs-primary) !important;
color: #fff !important;
}
/* color-picker.css */
.colorGrid {
--columns: 8;
display: grid;
grid-template-columns: repeat(var(--columns), 32px);
gap: 8px;
}
.colorSwatch {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.15);
padding: 0;
cursor: pointer;
position: relative;
outline: none;
transition: transform 80ms ease, box-shadow 80ms ease;
}
.colorSwatch:hover { transform: scale(1.06); }
.colorSwatch:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,0.25); }
.colorSwatchMoreLabel {
width: auto;
min-width: 72px;
padding: 0 10px;
grid-column: span 2;
font-size: 12px;
}
.colorSwatch[aria-checked='true'] {
/* uses button's currentColor set in JS for ring */
box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
transform: scale(1.08);
}
.swatchMark {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 18px;
font-weight: 700;
line-height: 1;
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
/* "No color / reset to default" swatch — neutral, dark-mode aware surface. */
.colorSwatchClear {
background-color: var(--bs-tertiary-bg, #f8f9fa);
border: 1px dashed var(--bs-border-color, rgba(0,0,0,0.25));
}
.swatchClearMark {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 18px;
line-height: 1;
color: var(--bs-secondary-color, #6c757d);
}
/* Feed background composer -------------------------------------------------
* The shared compact form remains mounted (and owns persistence), while its
* marker-encoded ingress row is replaced by the marker-free visual editor.
*/
.article-background-mode .compact-field-row:has(textarea[data-field='ingress']:not(.background-composer-input)),
.article-composer .compact-field-row:has(select[data-field='backgroundTextEffect']),
.article-composer .compact-field-row:has(select[data-field='backgroundTextStyle']),
.article-composer .compact-field-row:has(select[data-field='backgroundTextAnimation']),
.article-composer .compact-field-row:has(select[data-field='backgroundDecoration']),
.article-composer .compact-field-row:has(select[data-field='backgroundMotion']),
.article-composer .compact-field-row:has(select[data-field='imageOverlay']),
.article-composer .compact-field-row:has(input[data-field='imageOverlayLocation']),
.article-composer .compact-field-row:has(select[data-field='imageFilter']) {
display: none;
}
.background-composer-shell {
border: 1px solid var(--bs-border-color);
border-radius: var(--app-border-radius);
background: var(--bs-body-bg);
overflow: hidden;
}
.background-composer-card {
min-height: clamp(220px, 26vh, 340px);
padding: clamp(18px, 4vw, 44px);
display: flex;
align-items: center;
justify-content: center;
cursor: text;
overflow: hidden;
position: relative;
isolation: isolate;
}
.background-post-display {
isolation: isolate;
overflow: hidden;
}
/* Server-rendered share card (routes/public/postCard.js): a fixed 1200x630
canvas, 28px base so the 2.5em/3.5em text sizes fill it like the feed does. */
.post-share-card-page {
width: 1200px;
height: 630px;
overflow: hidden;
background: #ffffff;
}
.post-share-card {
width: 1200px;
height: 630px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 48px 72px;
font-size: 28px;
font-weight: 500;
overflow: hidden;
}
.post-share-card .bg-post-lines p,
.post-share-card .feed-post-text p { margin: 0 0 0.15em; }
.background-composer-card-content {
width: 100%;
font-weight: 500;
line-height: 1.15;
overflow-wrap: anywhere;
}
.background-composer-card-placeholder {
color: inherit;
opacity: 0.82;
font-size: clamp(1.8rem, 4vw, 3.5rem);
font-weight: 500;
line-height: 1.1;
text-align: center;
}
/* Presets drawer: real mini cards, two per row on phones, three from md. */
.background-preset-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
@media (min-width: 768px) {
.background-preset-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.background-preset-card {
width: 100%;
min-height: 120px;
padding: 0.75rem;
border: 2px solid transparent;
border-radius: var(--app-border-radius);
font-size: 1.35rem;
cursor: pointer;
text-align: center;
}
.background-preset-card:focus-visible {
outline: 3px solid var(--bs-primary);
outline-offset: 2px;
}
/* Backgrounds and flags can change luminance behind a single word. The
* adaptive edge color comes from articleBackgroundStyles; the selected effect
* supplies --background-text-shadow, with the readable outline as fallback. */
.background-composer-card-content,
.background-composer-card-placeholder,
.background-post-display .box-line-content {
position: relative;
z-index: 2;
text-shadow: var(--background-text-shadow,
-1px -1px 0 var(--background-text-outline, rgba(0,0,0,0.72)),
1px -1px 0 var(--background-text-outline, rgba(0,0,0,0.72)),
-1px 1px 0 var(--background-text-outline, rgba(0,0,0,0.72)),
1px 1px 0 var(--background-text-outline, rgba(0,0,0,0.72)),
0 2px 5px rgba(0,0,0,0.38));
}
/* Each effect provides both a text-shadow (solid text) and a drop-shadow
* filter (--background-text-pattern-shadow) for gradient-clipped text, where
* text-shadow cannot be used — see .background-text-pattern below. */
.background-text-effect-none {
--background-text-shadow: none;
--background-text-pattern-shadow: none;
}
.background-text-effect-soft {
--background-text-shadow: 0 2px 4px rgba(0,0,0,0.58), 0 5px 12px rgba(0,0,0,0.32);
--background-text-pattern-shadow:
drop-shadow(0 2px 4px rgba(0,0,0,0.58))
drop-shadow(0 5px 12px rgba(0,0,0,0.32));
}
.background-text-effect-outline {
--background-text-shadow:
-1px -1px 0 var(--background-text-outline),
1px -1px 0 var(--background-text-outline),
-1px 1px 0 var(--background-text-outline),
1px 1px 0 var(--background-text-outline),
0 2px 5px rgba(0,0,0,0.38);
--background-text-pattern-shadow:
drop-shadow(1px 1px 0 var(--background-text-outline))
drop-shadow(-1px -1px 0 var(--background-text-outline))
drop-shadow(0 2px 5px rgba(0,0,0,0.38));
}
.background-text-effect-strong {
--background-text-shadow:
-2px -2px 0 var(--background-text-outline),
0 -2px 0 var(--background-text-outline),
2px -2px 0 var(--background-text-outline),
-2px 0 0 var(--background-text-outline),
2px 0 0 var(--background-text-outline),
-2px 2px 0 var(--background-text-outline),
0 2px 0 var(--background-text-outline),
2px 2px 0 var(--background-text-outline),
0 4px 8px rgba(0,0,0,0.48);
--background-text-pattern-shadow:
drop-shadow(2px 2px 0 var(--background-text-outline))
drop-shadow(-2px -2px 0 var(--background-text-outline))
drop-shadow(0 4px 8px rgba(0,0,0,0.48));
}
.background-text-effect-glow {
--background-text-shadow:
0 0 2px var(--background-text-outline),
0 0 7px var(--background-text-outline),
0 0 14px var(--background-text-outline),
0 3px 5px rgba(0,0,0,0.4);
--background-text-pattern-shadow:
drop-shadow(0 0 2px var(--background-text-outline))
drop-shadow(0 0 7px var(--background-text-outline))
drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}
.background-text-effect-lift {
--background-text-shadow:
0 1px 0 rgba(255,255,255,0.42),
0 3px 0 rgba(0,0,0,0.38),
0 7px 10px rgba(0,0,0,0.42);
--background-text-pattern-shadow:
drop-shadow(0 3px 0 rgba(0,0,0,0.38))
drop-shadow(0 7px 10px rgba(0,0,0,0.42));
}
.background-text-style-rainbow {
--background-text-pattern: linear-gradient(
90deg, #ff416c 0%, #ffb703 20%, #67d64f 40%, #00c2ff 60%, #8b5cf6 80%, #ff4db8 100%
);
}
.background-text-style-gold-gradient {
--background-text-pattern: linear-gradient(
110deg, #8a5a00 0%, #ffd76a 28%, #fff3b0 45%, #c88700 68%, #ffdf7e 100%
);
}
.background-text-style-silver-gradient {
--background-text-pattern: linear-gradient(
110deg, #596473 0%, #dce5ec 28%, #ffffff 45%, #8b98a8 68%, #e8eef2 100%
);
}
.background-text-style-sunset-gradient {
--background-text-pattern: linear-gradient(
90deg, #ffe1c7 0%, #ffad8f 28%, #ff4f81 62%, #8d4dde 100%
);
}
.background-text-style-ocean-gradient {
--background-text-pattern: linear-gradient(
90deg, #d8ffff 0%, #4dd7e1 30%, #2f80ed 66%, #163a76 100%
);
}
.background-text-style-candy-stripes {
--background-text-pattern: repeating-linear-gradient(
135deg,
#ffffff 0%, #ffffff 10%,
#ff6fa8 10%, #ff6fa8 20%,
#ffe56b 20%, #ffe56b 30%,
#65e7df 30%, #65e7df 40%
);
}
.background-text-style-neon-gradient {
--background-text-pattern: linear-gradient(
90deg, #00fff0 0%, #2f7cff 25%, #b44cff 50%, #ff3daf 75%, #fff700 100%
);
}
/* Patterned text is clipped on the text wrappers only (feed: .feed-post-text
* from article/list.js; composer: .background-composer-card-text), so widgets,
* badges and buttons inside the card keep readable text. text-shadow paints
* ABOVE a text-clipped background and would cover the gradient, so the edge
* comes from a drop-shadow filter chosen per text effect instead. Living on an
* inner element also keeps the animation keyframes that set `filter` on the
* outer content element from clobbering that edge. */
.background-text-pattern .feed-post-text,
.background-text-pattern .background-composer-card-text,
.background-text-pattern .background-composer-card-placeholder {
background-image: var(--background-text-pattern);
background-position: center;
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter: var(--background-text-pattern-shadow,
drop-shadow(1px 1px 0 var(--background-text-outline, rgba(0,0,0,0.72)))
drop-shadow(-1px -1px 0 var(--background-text-outline, rgba(0,0,0,0.72)))
drop-shadow(0 2px 5px rgba(0,0,0,0.38)));
}
/* Shimmer moves the gradient itself, which now lives on the text wrapper. */
.background-text-animation-shimmer.background-text-pattern .feed-post-text,
.background-text-animation-shimmer.background-text-pattern .background-composer-card-text {
animation: background-text-pattern-shimmer 2.8s linear infinite;
}
.background-text-animation-wave .background-composer-card-content,
.background-text-animation-wave .box-line-content {
animation: background-text-wave 2.8s ease-in-out infinite;
transform-origin: center;
}
.background-text-animation-flicker .background-composer-card-content,
.background-text-animation-flicker .box-line-content {
animation: background-text-flicker 2.7s linear infinite;
}
.background-text-animation-pulse .background-composer-card-content,
.background-text-animation-pulse .box-line-content {
animation: background-text-pulse 2.2s ease-in-out infinite;
transform-origin: center;
}
.background-text-animation-float .background-composer-card-content,
.background-text-animation-float .box-line-content {
animation: background-text-float 3.2s ease-in-out infinite;
}
.background-text-animation-bounce .background-composer-card-content,
.background-text-animation-bounce .box-line-content {
animation: background-text-bounce 2.4s ease-in-out infinite;
}
.background-text-animation-shimmer .background-composer-card-content,
.background-text-animation-shimmer .box-line-content {
animation: background-text-shimmer 2.8s linear infinite;
}
.background-text-animation-glitch .background-composer-card-content,
.background-text-animation-glitch .box-line-content {
animation: background-text-glitch 2.6s steps(1, end) infinite;
}
/* Decorative overlays ---------------------------------------------------- */
.background-decoration-layer {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
user-select: none;
}
.background-decoration-item {
position: absolute;
display: block;
font-size: clamp(1rem, 2.3vw, 1.8rem);
line-height: 1;
opacity: 0.82;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}
.background-decoration-item:nth-child(1) { left: 2%; top: 5%; transform: rotate(-14deg); }
.background-decoration-item:nth-child(2) { left: 17%; top: 3%; transform: rotate(9deg) scale(0.75); }
.background-decoration-item:nth-child(3) { left: 35%; top: 7%; transform: rotate(-5deg) scale(0.9); }
.background-decoration-item:nth-child(4) { left: 57%; top: 3%; transform: rotate(12deg) scale(0.78); }
.background-decoration-item:nth-child(5) { left: 77%; top: 7%; transform: rotate(-8deg); }
.background-decoration-item:nth-child(6) { right: 2%; top: 15%; transform: rotate(15deg) scale(0.82); }
.background-decoration-item:nth-child(7) { left: 3%; bottom: 12%; transform: rotate(12deg) scale(0.82); }
.background-decoration-item:nth-child(8) { left: 18%; bottom: 4%; transform: rotate(-9deg); }
.background-decoration-item:nth-child(9) { left: 39%; bottom: 7%; transform: rotate(7deg) scale(0.76); }
.background-decoration-item:nth-child(10) { left: 61%; bottom: 4%; transform: rotate(-12deg) scale(0.9); }
.background-decoration-item:nth-child(11) { left: 80%; bottom: 8%; transform: rotate(9deg); }
.background-decoration-item:nth-child(12) { right: 2%; bottom: 18%; transform: rotate(-14deg) scale(0.78); }
.background-decoration-confetti .background-decoration-item:nth-child(4n + 1) { color: #ff4d6d; }
.background-decoration-confetti .background-decoration-item:nth-child(4n + 2) { color: #ffd60a; }
.background-decoration-confetti .background-decoration-item:nth-child(4n + 3) { color: #35d6c1; }
.background-decoration-confetti .background-decoration-item:nth-child(4n) { color: #9b5de5; }
.background-decoration-sparkles .background-decoration-item {
color: #fff0a8;
text-shadow: 0 0 7px rgba(255,238,137,0.92);
}
.background-decoration-hearts .background-decoration-item { color: #ff7aa8; }
.background-decoration-snow .background-decoration-item {
color: #ffffff;
text-shadow: 0 0 5px rgba(83,178,255,0.8), 0 1px 2px rgba(0,0,0,0.38);
}
.background-decoration-paws .background-decoration-item,
.background-decoration-footballs .background-decoration-item,
.background-decoration-balloons .background-decoration-item {
opacity: 0.74;
}
/* Animated background layers -------------------------------------------- */
.background-motion-layer {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
}
.background-motion-layer.background-motion-flowing-gradient {
inset: -30%;
background: linear-gradient(
120deg,
rgba(255,70,170,0.72), rgba(255,205,86,0.48), rgba(30,225,206,0.62), rgba(93,91,255,0.72)
);
background-size: 300% 300%;
mix-blend-mode: soft-light;
opacity: 0.68;
animation: background-motion-flow 10s ease-in-out infinite;
}
.background-motion-layer.background-motion-aurora {
inset: -18%;
background:
radial-gradient(ellipse at 18% 65%, rgba(48,255,175,0.78) 0%, rgba(48,255,175,0) 47%),
radial-gradient(ellipse at 72% 25%, rgba(65,157,255,0.72) 0%, rgba(65,157,255,0) 48%),
radial-gradient(ellipse at 88% 76%, rgba(210,88,255,0.68) 0%, rgba(210,88,255,0) 43%);
mix-blend-mode: screen;
opacity: 0.72;
filter: blur(10px) saturate(1.2);
animation: background-motion-aurora 9s ease-in-out infinite alternate;
}
.background-motion-layer.background-motion-twinkling-stars {
opacity: 0.72;
}
.background-motion-twinkling-stars .background-motion-particle {
position: absolute;
left: var(--particle-x);
top: var(--particle-y);
width: var(--particle-size);
height: var(--particle-size);
border-radius: 50%;
color: rgba(255,255,255,0.96);
background: currentColor;
filter: drop-shadow(0 0 3px currentColor);
animation: background-motion-star-twinkle var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.background-motion-twinkling-stars .background-motion-particle:nth-child(3n) {
width: calc(var(--particle-size) + 4px);
height: calc(var(--particle-size) + 4px);
border-radius: 0;
clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
}
.background-motion-twinkling-stars .background-motion-particle:nth-child(5n + 2) {
color: rgba(184,228,255,0.94);
}
.background-motion-twinkling-stars .background-motion-particle:nth-child(5n + 4) {
color: rgba(255,236,166,0.94);
}
.background-motion-layer.background-motion-gentle-confetti {
opacity: 0.68;
}
.background-motion-gentle-confetti .background-motion-particle {
position: absolute;
left: var(--particle-x);
top: -12%;
width: var(--particle-size);
height: calc(var(--particle-size) + 5px);
border-radius: 2px;
background: #ff5a7a;
animation: background-motion-confetti-fall var(--particle-duration) linear var(--particle-delay) infinite;
}
.background-motion-gentle-confetti .background-motion-particle:nth-child(even) {
animation-name: background-motion-confetti-fall-reverse;
}
.background-motion-gentle-confetti .background-motion-particle:nth-child(6n + 2) { background: #ffd84d; }
.background-motion-gentle-confetti .background-motion-particle:nth-child(6n + 3) { background: #4de1c1; }
.background-motion-gentle-confetti .background-motion-particle:nth-child(6n + 4) { background: #9b6cff; }
.background-motion-gentle-confetti .background-motion-particle:nth-child(6n + 5) { background: #ff8ec7; }
.background-motion-gentle-confetti .background-motion-particle:nth-child(6n) { background: #55b9ff; }
.background-motion-gentle-confetti .background-motion-particle:nth-child(3n) {
height: var(--particle-size);
border-radius: 50%;
}
.background-motion-gentle-confetti .background-motion-particle:nth-child(4n) {
height: calc(var(--particle-size) + 2px);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
@keyframes background-motion-flow {
0%, 100% { background-position: 0% 50%; transform: rotate(-2deg) scale(1); }
50% { background-position: 100% 50%; transform: rotate(2deg) scale(1.06); }
}
@keyframes background-motion-aurora {
0% { transform: translate3d(-4%, 2%, 0) rotate(-2deg) scale(1); }
100% { transform: translate3d(5%, -3%, 0) rotate(3deg) scale(1.12); }
}
@keyframes background-motion-star-twinkle {
0%, 100% { opacity: 0.18; transform: scale(0.55) rotate(-8deg); }
42% { opacity: 0.92; transform: scale(1.18) rotate(7deg); }
64% { opacity: 0.46; transform: scale(0.78) rotate(2deg); }
}
@keyframes background-motion-confetti-fall {
0% { top: -12%; opacity: 0; transform: translateX(0) rotate(0deg); }
9% { opacity: 0.72; }
48% { transform: translateX(var(--particle-drift)) rotate(190deg); }
90% { opacity: 0.72; }
100% { top: 112%; opacity: 0; transform: translateX(var(--particle-return-drift)) rotate(520deg); }
}
@keyframes background-motion-confetti-fall-reverse {
0% { top: -12%; opacity: 0; transform: translateX(0) rotate(0deg); }
9% { opacity: 0.72; }
48% { transform: translateX(var(--particle-drift)) rotate(-175deg); }
90% { opacity: 0.72; }
100% { top: 112%; opacity: 0; transform: translateX(var(--particle-return-drift)) rotate(-500deg); }
}
/* Animated image overlays ------------------------------------------------ */
.article-image-effects-panel {
overflow: hidden;
border: 1px solid var(--bs-border-color);
border-radius: var(--app-border-radius);
background: var(--bs-body-bg);
}
.article-image-effect-preview {
position: relative;
display: flex;
justify-content: center;
min-height: 180px;
max-height: 320px;
overflow: hidden;
background: #111318;
}
.article-image-preview-media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 180px;
max-height: 320px;
overflow: hidden;
}
.article-image-preview-placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0.82;
filter: blur(2px);
}
.article-image-preview-full {
position: relative;
z-index: 1;
display: flex;
align-items: center;
width: 100%;
min-height: 180px;
max-height: 320px;
}
.article-image-preview-full > img {
max-height: 320px;
object-fit: contain !important;
}
/* Snapchat-style settings icon floating on the composer image preview. Sits
above the story text layer (z-index 3) and the location sticker (z-index 4)
so it stays tappable whatever is drawn on the photo. */
.article-image-effects-toggle {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
opacity: 0.92;
}
.article-image-effects-toggle:hover,
.article-image-effects-toggle:focus-visible {
opacity: 1;
}
.article-image-effects-toolbar {
border-top: 1px solid var(--bs-border-color);
}
.article-image-overlay-select,
.article-image-filter-select {
width: auto;
min-width: 190px;
max-width: 100%;
}
.article-image-location-input {
width: min(280px, 100%);
}
.article-image-location-editor {
align-items: center;
}
@media (max-width: 575.98px) {
.article-image-effects-toolbar {
align-items: stretch !important;
flex-direction: column;
}
.article-image-effect-control {
align-items: stretch !important;
flex-direction: column;
width: 100%;
}
.article-image-overlay-select,
.article-image-filter-select,
.article-image-location-input {
width: 100%;
}
.article-image-location-editor .btn {
width: 100%;
}
}
.article-image-filter-target,
.article-image-filter-scope .imageContainer > .lazy-image-container {
filter: var(--article-image-filter, none);
transition: filter 240ms ease;
}
.article-image-filter-none { --article-image-filter: none; }
.article-image-filter-vivid { --article-image-filter: saturate(1.4) contrast(1.08); }
.article-image-filter-warm { --article-image-filter: sepia(0.16) saturate(1.22) hue-rotate(-8deg) brightness(1.03); }
.article-image-filter-cool { --article-image-filter: saturate(1.08) hue-rotate(12deg) brightness(1.02); }
.article-image-filter-monochrome { --article-image-filter: grayscale(1) contrast(1.08); }
.article-image-filter-vintage { --article-image-filter: sepia(0.4) saturate(0.82) contrast(0.96) brightness(1.04); }
.article-image-filter-cinematic { --article-image-filter: contrast(1.18) saturate(0.82) brightness(0.94); }
.article-image-filter-dramatic { --article-image-filter: contrast(1.32) saturate(1.15) brightness(0.9); }
.article-image-filter-soft { --article-image-filter: contrast(0.9) saturate(0.9) brightness(1.08); }
.article-image-overlay {
position: absolute;
inset: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
user-select: none;
}
.article-image-overlay-particle {
position: absolute;
display: block;
line-height: 1;
will-change: transform, opacity;
}
.article-image-overlay-sparkling-stars .article-image-overlay-particle {
left: var(--particle-x);
top: var(--particle-y);
color: rgba(255,255,255,0.98);
font-size: var(--particle-font-size);
text-shadow: 0 0 4px #ffffff, 0 0 10px rgba(170,220,255,0.94);
mix-blend-mode: screen;
animation: article-image-sparkle var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-sparkling-stars .article-image-overlay-particle:nth-child(5n + 2) {
color: #fff0a8;
text-shadow: 0 0 4px #ffffff, 0 0 11px rgba(255,218,103,0.92);
}
.article-image-overlay-pulsing-hearts .article-image-overlay-particle {
left: var(--particle-x);
top: var(--particle-y);
color: rgba(255,91,145,0.9);
font-size: var(--particle-font-size);
text-shadow: 0 2px 4px rgba(72,0,24,0.48), 0 0 9px rgba(255,160,194,0.62);
animation: article-image-heart-pulse var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-pulsing-hearts .article-image-overlay-particle:nth-child(3n + 2) {
color: rgba(255,176,205,0.9);
}
.article-image-overlay-celebration-confetti .article-image-overlay-particle {
left: var(--particle-x);
top: -12%;
width: var(--particle-size);
height: calc(var(--particle-size) + 5px);
border-radius: 2px;
background: #ff4f79;
animation: article-image-confetti-fall var(--particle-duration) linear var(--particle-delay) infinite;
}
.article-image-overlay-celebration-confetti .article-image-overlay-particle:nth-child(even) {
animation-name: article-image-confetti-fall-reverse;
}
.article-image-overlay-celebration-confetti .article-image-overlay-particle:nth-child(6n + 2) {
background: #ffd83d;
}
.article-image-overlay-celebration-confetti .article-image-overlay-particle:nth-child(6n + 3) {
height: var(--particle-size);
border-radius: 50%;
background: #38e0bd;
}
.article-image-overlay-celebration-confetti .article-image-overlay-particle:nth-child(6n + 4) {
background: #a66cff;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.article-image-overlay-celebration-confetti .article-image-overlay-particle:nth-child(6n + 5) {
background: #ff8ac5;
}
.article-image-overlay-celebration-confetti .article-image-overlay-particle:nth-child(6n) {
height: var(--particle-size);
background: #4db8ff;
}
.article-image-overlay-falling-snow .article-image-overlay-particle {
left: var(--particle-x);
top: -12%;
color: rgba(255,255,255,0.92);
font-size: var(--particle-font-size);
text-shadow: 0 0 4px rgba(255,255,255,0.98), 0 0 9px rgba(139,211,255,0.82);
animation: article-image-snow-fall var(--particle-duration) linear var(--particle-delay) infinite;
}
.article-image-overlay-soft-light {
background:
radial-gradient(circle at 17% 26%, rgba(255,213,151,0.62) 0%, transparent 35%),
radial-gradient(circle at 82% 70%, rgba(124,214,255,0.48) 0%, transparent 38%),
radial-gradient(circle at 58% 18%, rgba(255,151,208,0.35) 0%, transparent 30%);
background-position: 0% 10%, 100% 85%, 55% 0%;
background-size: 125% 125%;
opacity: 0.66;
mix-blend-mode: screen;
filter: blur(14px) saturate(1.12);
animation: article-image-soft-light 8s ease-in-out infinite alternate;
}
/* Location geofilter: intentionally shows only the author-approved place label. */
.article-image-overlay-location-sticker {
display: flex;
align-items: flex-end;
justify-content: center;
padding: clamp(14px, 4%, 34px);
z-index: 4;
}
.article-image-location-sticker {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.42em;
max-width: min(88%, 680px);
padding: 0.5em 0.88em 0.54em;
overflow: hidden;
color: #ffffff;
font-family: 'Arial Rounded MT Bold', 'Segoe UI', sans-serif;
font-size: clamp(18px, 4.2vw, 42px);
font-weight: 800;
line-height: 1;
letter-spacing: 0.055em;
text-align: center;
text-overflow: ellipsis;
text-shadow: 0 2px 3px rgba(0,0,0,0.68);
text-transform: uppercase;
white-space: nowrap;
background: rgba(12,18,24,0.58);
border: 2px solid rgba(255,255,255,0.92);
border-radius: 999px;
box-shadow: 0 7px 24px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(0,0,0,0.14);
backdrop-filter: blur(7px) saturate(1.2);
animation: article-image-location-float 4.2s ease-in-out infinite;
}
.article-image-location-sticker::after {
position: absolute;
top: -45%;
bottom: -45%;
left: -32%;
width: 24%;
content: '';
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
transform: skewX(-18deg);
animation: article-image-location-sheen 5.4s ease-in-out infinite;
}
.article-image-location-sticker > i,
.article-image-location-sticker > span {
position: relative;
z-index: 1;
}
.article-image-location-sticker > i {
color: #ffdf45;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
animation: article-image-location-pin 2.2s ease-in-out infinite;
}
.article-image-location-sticker > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Custom sticker text (article.imageStickerText) — its own layer above the
image effects so it combines with confetti, filters, etc. */
.article-image-sticker {
position: absolute;
left: 0;
right: 0;
z-index: 4;
display: flex;
justify-content: center;
padding: clamp(10px, 3%, 24px);
pointer-events: none;
user-select: none;
}
.article-image-sticker-top { top: 0; }
.article-image-sticker-bottom { bottom: 0; }
.article-image-sticker-text {
max-width: 92%;
color: #ffffff;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: clamp(22px, 6vw, 56px);
font-weight: 900;
line-height: 0.95;
letter-spacing: 0.04em;
text-align: center;
text-transform: uppercase;
overflow-wrap: anywhere;
-webkit-text-stroke: 2px #1c1c2e;
text-shadow: 3px 4px 0 rgba(20,4,40,0.72), 0 0 14px rgba(0,0,0,0.35);
animation: article-image-sticker-pop 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes article-image-sticker-pop {
0%, 100% { transform: scale(1) rotate(-1.5deg); }
50% { transform: scale(1.06) rotate(1.5deg); }
}
/* Story mode (article.textOverImage): the post text over the photo. The
layer reuses the background-post text rules (effects, patterns, animations,
decorations) — motion layers are not used over photos. */
.story-text-layer {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
font-size: clamp(9px, 2.6vw, 16px);
font-weight: 500;
overflow: hidden;
pointer-events: none;
}
.story-text-scrim {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.42) 100%);
}
.story-text-content {
width: 100%;
overflow: hidden;
}
.story-text-content p { margin: 0; }
/* Emoji sticker packs keep the centre of the photo mostly clear. */
.article-image-overlay-sticker-party .article-image-overlay-particle,
.article-image-overlay-sticker-cute .article-image-overlay-particle,
.article-image-overlay-sticker-paws .article-image-overlay-particle,
.article-image-overlay-sticker-footballs .article-image-overlay-particle,
.article-image-overlay-sticker-field-shooting .article-image-overlay-particle,
.article-image-overlay-sticker-fishing .article-image-overlay-particle,
.article-image-overlay-sticker-dog-mushing .article-image-overlay-particle {
left: var(--particle-x);
top: var(--particle-y);
font-size: clamp(24px, 4.5vw, var(--particle-font-size));
filter: drop-shadow(0 3px 2px rgba(0,0,0,0.45)) drop-shadow(0 0 5px rgba(255,255,255,0.34));
transform: translate(-50%, -50%);
}
.article-image-overlay-sticker-party .article-image-overlay-particle,
.article-image-overlay-sticker-cute .article-image-overlay-particle {
animation: article-image-sticker-float var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-sticker-cute .article-image-overlay-particle {
animation-name: article-image-sticker-pulse;
}
.article-image-overlay-sticker-paws .article-image-overlay-particle {
animation: article-image-paw-step var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-sticker-paws .article-image-overlay-particle:nth-child(even) {
animation-direction: reverse;
}
.article-image-overlay-sticker-footballs .article-image-overlay-particle {
animation: article-image-football-spin var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-sticker-field-shooting .article-image-overlay-particle {
animation: article-image-target-focus var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-sticker-field-shooting .article-image-overlay-particle:nth-child(even) {
animation-direction: reverse;
}
.article-image-overlay-sticker-dog-mushing .article-image-overlay-particle {
animation: article-image-trail-glide var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-sticker-fishing .article-image-overlay-particle {
animation: article-image-sticker-float var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-sticker-fishing .article-image-overlay-particle:nth-child(even) {
animation-direction: reverse;
}
/* Bold, ready-made text stickers. Text remains legible over both light and dark photos. */
.article-image-overlay-text-wow .article-image-overlay-particle,
.article-image-overlay-text-love .article-image-overlay-particle,
.article-image-overlay-text-yay .article-image-overlay-particle,
.article-image-overlay-text-goal .article-image-overlay-particle,
.article-image-overlay-text-bullseye .article-image-overlay-particle,
.article-image-overlay-text-maal .article-image-overlay-particle,
.article-image-overlay-text-heia .article-image-overlay-particle,
.article-image-overlay-text-gratulerer .article-image-overlay-particle,
.article-image-overlay-text-takk .article-image-overlay-particle,
.article-image-overlay-text-go-team .article-image-overlay-particle {
left: var(--particle-x);
top: var(--particle-y);
max-width: 90%;
color: #ffffff;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: clamp(34px, 8vw, 74px);
font-weight: 900;
line-height: 0.9;
letter-spacing: 0.04em;
text-align: center;
white-space: nowrap;
transform: translate(-50%, -50%);
}
.article-image-overlay-text-wow .article-image-overlay-particle {
color: #ffe33f;
-webkit-text-stroke: 2px #40106d;
text-shadow: 3px 4px 0 #ff3d8d, 6px 7px 0 rgba(20,4,40,0.72);
animation: article-image-text-pop var(--particle-duration) cubic-bezier(0.34, 1.56, 0.64, 1)
var(--particle-delay) infinite;
}
.article-image-overlay-text-love .article-image-overlay-particle {
color: #fff4f8;
font-family: 'Brush Script MT', 'Segoe Script', cursive;
font-size: clamp(42px, 9vw, 86px);
letter-spacing: 0.01em;
-webkit-text-stroke: 1px #8b123f;
text-shadow: 0 3px 0 #c51f5d, 0 0 10px #ff6da2, 0 0 24px rgba(255,45,119,0.92);
animation: article-image-text-love var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-text-yay .article-image-overlay-particle {
color: transparent;
background: linear-gradient(90deg, #ff4f87, #ffcf3f, #55e6bd, #58a8ff, #bd6cff, #ff4f87);
background-clip: text;
background-size: 220% 100%;
-webkit-background-clip: text;
-webkit-text-stroke: 2px #ffffff;
filter: drop-shadow(3px 4px 0 rgba(43,26,82,0.78));
animation: article-image-text-rainbow var(--particle-duration) linear var(--particle-delay) infinite;
}
.article-image-overlay-text-goal .article-image-overlay-particle {
color: #ffffff;
font-style: italic;
-webkit-text-stroke: 2px #0b3a22;
text-shadow: 3px 4px 0 #18b968, 6px 7px 0 rgba(0,20,10,0.7);
animation: article-image-text-goal var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-text-bullseye .article-image-overlay-particle {
color: #fff4dc;
font-size: clamp(30px, 7vw, 68px);
letter-spacing: 0.025em;
-webkit-text-stroke: 2px #4f1010;
text-shadow: 3px 4px 0 #d62424, 6px 7px 0 rgba(34,5,5,0.78), 0 0 16px rgba(255,210,80,0.62);
animation: article-image-text-bullseye var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-text-go-team .article-image-overlay-particle {
color: #f4fbff;
font-size: clamp(31px, 7.5vw, 70px);
font-style: italic;
-webkit-text-stroke: 2px #123852;
text-shadow: 3px 4px 0 #1789c9, 6px 7px 0 #f0642c, 0 0 18px rgba(190,235,255,0.68);
animation: article-image-text-trail var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-text-maal .article-image-overlay-particle {
color: #ffffff;
font-style: italic;
-webkit-text-stroke: 2px #0b3a22;
text-shadow: 3px 4px 0 #18b968, 6px 7px 0 rgba(0,20,10,0.7);
animation: article-image-text-goal var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-text-heia .article-image-overlay-particle {
color: #f4fbff;
font-size: clamp(31px, 7.5vw, 70px);
font-style: italic;
-webkit-text-stroke: 2px #123852;
text-shadow: 3px 4px 0 #ba0c2f, 6px 7px 0 #00205b, 0 0 18px rgba(190,235,255,0.68);
animation: article-image-text-trail var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.article-image-overlay-text-gratulerer .article-image-overlay-particle {
color: #ffe33f;
font-size: clamp(22px, 5.6vw, 52px);
letter-spacing: 0.03em;
-webkit-text-stroke: 2px #40106d;
text-shadow: 3px 4px 0 #ff3d8d, 6px 7px 0 rgba(20,4,40,0.72);
animation: article-image-text-pop var(--particle-duration) cubic-bezier(0.34, 1.56, 0.64, 1)
var(--particle-delay) infinite;
}
.article-image-overlay-text-takk .article-image-overlay-particle {
color: #fff4f8;
font-family: 'Brush Script MT', 'Segoe Script', cursive;
font-size: clamp(42px, 9vw, 86px);
letter-spacing: 0.01em;
-webkit-text-stroke: 1px #8b123f;
text-shadow: 0 3px 0 #c51f5d, 0 0 10px #ff6da2, 0 0 24px rgba(255,45,119,0.92);
animation: article-image-text-love var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
@keyframes article-image-sparkle {
0%, 100% { opacity: 0.12; transform: translate(-50%, -50%) scale(0.45) rotate(-9deg); }
46% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.16) rotate(8deg); }
68% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.74) rotate(3deg); }
}
@keyframes article-image-heart-pulse {
0%, 100% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.76); }
42% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.12); }
56% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.92); }
69% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes article-image-confetti-fall {
0% { top: -12%; opacity: 0; transform: translateX(0) rotate(0deg); }
9% { opacity: 0.78; }
48% { transform: translateX(var(--particle-drift)) rotate(190deg); }
90% { opacity: 0.78; }
100% { top: 112%; opacity: 0; transform: translateX(var(--particle-return-drift)) rotate(520deg); }
}
@keyframes article-image-confetti-fall-reverse {
0% { top: -12%; opacity: 0; transform: translateX(0) rotate(0deg); }
9% { opacity: 0.78; }
48% { transform: translateX(var(--particle-drift)) rotate(-175deg); }
90% { opacity: 0.78; }
100% { top: 112%; opacity: 0; transform: translateX(var(--particle-return-drift)) rotate(-500deg); }
}
@keyframes article-image-snow-fall {
0% { top: -12%; opacity: 0; transform: translateX(0) rotate(0deg); }
10% { opacity: 0.9; }
50% { transform: translateX(var(--particle-drift)) rotate(110deg); }
90% { opacity: 0.9; }
100% { top: 112%; opacity: 0; transform: translateX(var(--particle-return-drift)) rotate(220deg); }
}
@keyframes article-image-soft-light {
0% { background-position: 0% 10%, 100% 85%, 55% 0%; filter: blur(14px) saturate(1.08); }
100% { background-position: 18% 24%, 82% 66%, 42% 18%; filter: blur(18px) saturate(1.18); }
}
@keyframes article-image-location-float {
0%, 100% { transform: translateY(0) rotate(-0.4deg); }
50% { transform: translateY(-4px) rotate(0.4deg); }
}
@keyframes article-image-location-sheen {
0%, 68% { left: -32%; opacity: 0; }
74% { opacity: 1; }
90%, 100% { left: 118%; opacity: 0; }
}
@keyframes article-image-location-pin {
0%, 100% { transform: translateY(0) scale(1); }
46% { transform: translateY(-2px) scale(1.08); }
}
@keyframes article-image-sticker-float {
0%, 100% { opacity: 0.86; transform: translate(-50%, -50%) rotate(-8deg) scale(0.9); }
50% { opacity: 1; transform: translate(-50%, calc(-50% - 9px)) rotate(7deg) scale(1.08); }
}
@keyframes article-image-sticker-pulse {
0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) rotate(-5deg) scale(0.88); }
42% { opacity: 1; transform: translate(-50%, -50%) rotate(4deg) scale(1.14); }
58% { opacity: 0.94; transform: translate(-50%, -50%) rotate(-2deg) scale(0.98); }
}
@keyframes article-image-paw-step {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) rotate(-22deg) scale(0.88); }
45% { opacity: 1; transform: translate(-50%, calc(-50% - 5px)) rotate(-12deg) scale(1.08); }
}
@keyframes article-image-football-spin {
0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) rotate(-10deg) scale(0.9); }
50% { opacity: 1; transform: translate(-50%, calc(-50% - 7px)) rotate(18deg) scale(1.08); }
}
@keyframes article-image-target-focus {
0%, 100% { opacity: 0.76; transform: translate(-50%, -50%) rotate(-5deg) scale(0.9); }
42% { opacity: 1; transform: translate(-50%, -50%) rotate(3deg) scale(1.12); }
56% { transform: translate(-50%, -50%) rotate(-2deg) scale(0.98); }
}
@keyframes article-image-trail-glide {
0%, 100% { opacity: 0.82; transform: translate(calc(-50% - 5px), -50%) rotate(-4deg) scale(0.94); }
50% { opacity: 1; transform: translate(calc(-50% + 8px), calc(-50% - 5px)) rotate(4deg) scale(1.06); }
}
@keyframes article-image-text-pop {
0%, 72%, 100% { opacity: 0.96; transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
80% { opacity: 1; transform: translate(-50%, -50%) rotate(2deg) scale(1.16); }
88% { transform: translate(-50%, -50%) rotate(-1deg) scale(0.96); }
}
@keyframes article-image-text-love {
0%, 100% { opacity: 0.92; transform: translate(-50%, -50%) scale(0.96); filter: brightness(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.18); }
}
@keyframes article-image-text-rainbow {
0% { background-position: 0% 50%; transform: translate(-50%, -50%) rotate(-2deg); }
50% { transform: translate(-50%, calc(-50% - 4px)) rotate(2deg); }
100% { background-position: 220% 50%; transform: translate(-50%, -50%) rotate(-2deg); }
}
@keyframes article-image-text-goal {
0%, 70%, 100% { transform: translate(-50%, -50%) skewX(-7deg) scale(1); }
78% { transform: translate(-50%, calc(-50% - 8px)) skewX(-7deg) scale(1.13); }
86% { transform: translate(-50%, -50%) skewX(-7deg) scale(0.98); }
}
@keyframes article-image-text-bullseye {
0%, 68%, 100% { transform: translate(-50%, -50%) scale(1); }
76% { transform: translate(-50%, -50%) scale(1.15); }
84% { transform: translate(-50%, -50%) scale(0.96); }
90% { transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes article-image-text-trail {
0%, 100% { transform: translate(calc(-50% - 5px), -50%) skewX(-5deg) rotate(-1deg); }
50% { transform: translate(calc(-50% + 7px), calc(-50% - 4px)) skewX(-5deg) rotate(1deg); }
}
@keyframes background-text-wave {
0%, 100% { transform: translateY(0) rotate(0); }
22% { transform: translateY(-4px) rotate(-0.6deg); }
48% { transform: translateY(2px) rotate(0.5deg); }
74% { transform: translateY(-2px) rotate(-0.35deg); }
}
@keyframes background-text-flicker {
0%, 18%, 22%, 62%, 66%, 100% { opacity: 1; filter: brightness(1); }
20% { opacity: 0.62; filter: brightness(1.3); }
64% { opacity: 0.78; filter: brightness(0.92); }
}
@keyframes background-text-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.045); }
}
@keyframes background-text-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
@keyframes background-text-bounce {
0%, 20%, 55%, 100% { transform: translateY(0); }
35% { transform: translateY(-9px); }
44% { transform: translateY(-3px); }
}
@keyframes background-text-shimmer {
0% { background-position: 200% center; filter: brightness(0.96); }
50% { filter: brightness(1.28); }
100% { background-position: -100% center; filter: brightness(0.96); }
}
@keyframes background-text-pattern-shimmer {
0% { background-position: 200% center; }
100% { background-position: -100% center; }
}
@keyframes background-text-glitch {
0%, 88%, 100% { transform: translate(0) skewX(0); filter: none; }
89% { transform: translate(-3px, 1px) skewX(-2deg); filter: hue-rotate(35deg); }
91% { transform: translate(3px, -1px) skewX(2deg); filter: hue-rotate(-35deg); }
93% { transform: translate(-1px, 0) skewX(-1deg); filter: none; }
}
/* Off-screen feed cards (class toggled by gui/listFrontpage.js through
lib/feedCardVisibility.js) pause their animations to save CPU and battery. */
.feed-card-offscreen .background-motion-layer,
.feed-card-offscreen .background-motion-particle,
.feed-card-offscreen .box-line-content,
.feed-card-offscreen .feed-post-text,
.feed-card-offscreen .article-image-overlay,
.feed-card-offscreen .article-image-overlay-particle,
.feed-card-offscreen .article-image-location-sticker,
.feed-card-offscreen .article-image-location-sticker::after,
.feed-card-offscreen .article-image-location-sticker > i,
.feed-card-offscreen .article-image-sticker-text {
animation-play-state: paused !important;
}
/* Reduced motion: body.reduce-motion is set by lib/reduceMotion.js from the
user setting (settings.reduceMotion) or the OS preference
(prefers-reduced-motion), so there is one place that stops feed motion. */
.reduce-motion .background-composer-card[class*='background-text-animation-'] .background-composer-card-content,
.reduce-motion .background-post-display[class*='background-text-animation-'] .box-line-content {
animation: none !important;
filter: none !important;
transform: none !important;
}
/* The composer's story-mode preview lives in .story-text-layer, not
.background-composer-card (its inner element carries both
.story-text-content and .background-composer-card-content), so the rule
above never matches it. The feed's story layer is already covered above
via .background-post-display … .box-line-content. */
.reduce-motion .story-text-layer .story-text-content {
animation: none !important;
filter: none !important;
transform: none !important;
}
/* The pattern shimmer on the story preview's text wrapper is not covered by
.story-text-content above (it lives on the nested .background-composer-card-text
div), matching the composer/feed shimmer stop below. */
.reduce-motion .story-text-layer .background-composer-card-text {
animation: none !important;
}
/* The pattern shimmer runs on the inner text wrapper; its drop-shadow edge
is not motion and stays. */
.reduce-motion .background-composer-card[class*='background-text-animation-'] .background-composer-card-text,
.reduce-motion .background-post-display[class*='background-text-animation-'] .feed-post-text {
animation: none !important;
}
.reduce-motion .background-motion-layer {
animation: none !important;
transform: none !important;
}
.reduce-motion .background-motion-layer .background-motion-particle {
animation: none !important;
}
.reduce-motion .background-motion-twinkling-stars .background-motion-particle {
opacity: 0.58;
transform: scale(0.82);
}
.reduce-motion .background-motion-gentle-confetti .background-motion-particle {
top: var(--particle-y);
opacity: 0.42;
transform: rotate(18deg);
}
.reduce-motion .article-image-overlay,
.reduce-motion .article-image-overlay-particle {
animation: none !important;
}
.reduce-motion .article-image-location-sticker,
.reduce-motion .article-image-location-sticker::after,
.reduce-motion .article-image-location-sticker > i {
animation: none !important;
}
.reduce-motion .article-image-sticker-text {
animation: none !important;
transform: none !important;
}
.reduce-motion .article-image-overlay-sparkling-stars .article-image-overlay-particle,
.reduce-motion .article-image-overlay-pulsing-hearts .article-image-overlay-particle {
opacity: 0.7;
transform: translate(-50%, -50%) scale(0.85);
}
.reduce-motion .article-image-overlay-celebration-confetti .article-image-overlay-particle,
.reduce-motion .article-image-overlay-falling-snow .article-image-overlay-particle {
top: var(--particle-y);
opacity: 0.58;
transform: rotate(12deg);
}
.reduce-motion .article-image-overlay-sticker-party .article-image-overlay-particle,
.reduce-motion .article-image-overlay-sticker-cute .article-image-overlay-particle,
.reduce-motion .article-image-overlay-sticker-paws .article-image-overlay-particle,
.reduce-motion .article-image-overlay-sticker-footballs .article-image-overlay-particle,
.reduce-motion .article-image-overlay-sticker-field-shooting .article-image-overlay-particle,
.reduce-motion .article-image-overlay-sticker-dog-mushing .article-image-overlay-particle,
.reduce-motion .article-image-overlay-sticker-fishing .article-image-overlay-particle,
.reduce-motion .article-image-overlay-text-maal .article-image-overlay-particle,
.reduce-motion .article-image-overlay-text-heia .article-image-overlay-particle,
.reduce-motion .article-image-overlay-text-gratulerer .article-image-overlay-particle,
.reduce-motion .article-image-overlay-text-takk .article-image-overlay-particle,
.reduce-motion .article-image-overlay-text-wow .article-image-overlay-particle,
.reduce-motion .article-image-overlay-text-love .article-image-overlay-particle,
.reduce-motion .article-image-overlay-text-yay .article-image-overlay-particle,
.reduce-motion .article-image-overlay-text-goal .article-image-overlay-particle,
.reduce-motion .article-image-overlay-text-bullseye .article-image-overlay-particle,
.reduce-motion .article-image-overlay-text-go-team .article-image-overlay-particle {
opacity: 0.94;
transform: translate(-50%, -50%);
}
.background-composer-editor {
background: var(--bs-secondary-bg);
border-top: 1px solid var(--bs-border-color);
}
.background-composer-input {
display: block;
width: 100%;
min-height: 86px;
resize: vertical;
border: 0;
outline: 0;
padding: 8px 10px 12px;
background: transparent;
color: var(--bs-body-color);
font: inherit;
line-height: 1.45;
}
.background-composer-input::placeholder {
color: var(--bs-secondary-color);
opacity: 0.8;
}
.background-composer-toolbar {
border-top: 1px solid var(--bs-border-color);
background: var(--bs-tertiary-bg);
}
.background-composer-font {
width: auto;
min-width: 112px;
}
.background-composer-effect {
width: auto;
min-width: 128px;
}
.background-composer-text-style {
width: auto;
min-width: 128px;
}
.background-composer-animation {
width: auto;
min-width: 128px;
}
.background-composer-decoration,
.background-composer-motion {
width: auto;
min-width: 142px;
}
.background-composer-picker,
.background-composer-emoji {
max-height: 240px;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--bs-body-bg);
}
.background-composer-picker .colorGrid {
grid-template-columns: repeat(auto-fit, 36px) !important;
gap: 8px;
}
.background-composer-picker .colorSwatch {
width: 36px;
height: 36px;
}
@media (max-width: 576px) {
.background-composer-shell {
margin-left: 8px !important;
margin-right: 8px !important;
}
.background-composer-card {
min-height: 210px;
padding: 16px;
}
.background-composer-toolbar .btn {
min-height: 36px;
}
.background-composer-font,
.background-composer-effect,
.background-composer-text-style,
.background-composer-animation,
.background-composer-decoration,
.background-composer-motion {
flex: 1 1 112px;
}
}
.visuallyHidden {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.compact-form-container {
font-family: 'SF Pro Text', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-stretch: condensed;
}
.compact-section {
background: var(--compact-bg, #fff);
border-radius: var(--app-border-radius);
margin-bottom: 8px;
border: 1px solid var(--compact-border);
}
.compact-section.darkmode {
--compact-bg: #1c1c1e;
--compact-border: #38383a;
--compact-text: #fff;
--compact-text-muted: #8e8e93;
--compact-hover: #2c2c2e;
--compact-label-bg: #252528;
}
.compact-section:not(.darkmode) {
--compact-bg: #fff;
--compact-border: #e0e0e0;
--compact-text: #1c1c1e;
--compact-text-muted: #6e6e73;
--compact-hover: #f5f5f7;
--compact-label-bg: #f8f8f8;
}
.compact-section-header {
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
color: var(--compact-text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
background: var(--compact-label-bg);
border-bottom: 1px solid var(--compact-border);
border-radius: var(--app-border-radius) var(--app-border-radius) 0 0;
}
.compact-section-header:hover {
background: var(--compact-hover);
}
.compact-field-table {
display: table;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.compact-field-row {
display: table-row;
}
.compact-field-row:hover {
background: var(--compact-hover);
}
.compact-field-label-cell {
display: table-cell;
width: 175px;
max-width: 175px;
padding: 4px 8px;
font-size: 13px;
font-weight: 500;
color: var(--compact-text-muted);
background: var(--compact-label-bg);
border-bottom: 1px solid var(--compact-border);
border-right: 1px solid var(--compact-border);
vertical-align: middle;
white-space: normal;
word-break: break-word;
hyphens: auto;
-webkit-hyphens: auto;
}
.compact-field-row:last-child .compact-field-label-cell,
.compact-field-row:last-child .compact-field-input-cell {
border-bottom: none;
}
.compact-field-label-content {
display: flex;
align-items: center;
gap: 4px;
}
.compact-field-input-cell {
display: table-cell;
padding: 3px 4px;
font-size: 13px;
color: var(--compact-text);
border-bottom: 1px solid var(--compact-border);
vertical-align: middle;
position: relative;
}
.compact-field-input-cell.has-textarea {
padding: 6px 8px;
}
.compact-help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.4;
transition: opacity 0.15s ease;
position: relative;
flex-shrink: 0;
color: var(--compact-text-muted);
margin-left: 4px;
}
.compact-help-icon:hover,
.compact-help-icon.active {
opacity: 1;
color: #007bff;
}
.compact-help-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #1c1c1e;
color: #fff;
padding: 10px 14px;
padding-right: 30px;
border-radius: var(--app-border-radius);
font-size: 12px;
font-weight: 400;
white-space: normal;
width: max-content;
max-width: 280px;
min-width: 150px;
z-index: 10000;
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease, visibility 0.15s ease;
text-transform: none;
letter-spacing: normal;
line-height: 1.5;
}
.compact-help-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #1c1c1e;
}
.compact-help-tooltip.show,
.compact-help-icon:hover .compact-help-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.compact-help-close {
position: absolute;
top: 6px;
right: 6px;
background: none;
border: none;
color: rgba(255,255,255,0.6);
cursor: pointer;
padding: 2px 6px;
font-size: 12px;
line-height: 1;
border-radius: 4px;
transition: color 0.15s ease, background 0.15s ease;
}
.compact-help-close:hover {
color: #fff;
background: rgba(255,255,255,0.1);
}
/* Mobile: position tooltip to the right to avoid cutoff */
@media (max-width: 600px) {
.compact-help-tooltip {
left: auto;
right: 0;
transform: none;
max-width: 250px;
}
.compact-help-tooltip::after {
left: auto;
right: 10px;
transform: none;
}
}
.compact-field-input-cell input,
.compact-field-input-cell select,
.compact-field-input-cell textarea {
border: none;
background: transparent;
padding: 2px 0;
font-size: 13px;
font-family: inherit;
font-stretch: condensed;
color: var(--compact-text);
width: 100%;
flex: 1;
min-width: 0;
outline: none;
}
.compact-field-input-cell input:focus,
.compact-field-input-cell select:focus,
.compact-field-input-cell textarea:focus {
outline: none;
box-shadow: none;
}
.compact-field-input-cell input::placeholder,
.compact-field-input-cell textarea::placeholder {
color: var(--compact-text-muted);
opacity: 0.5;
}
.compact-field-input-cell textarea {
min-height: 60px;
resize: vertical;
}
.compact-field-value {
color: var(--compact-text);
font-size: 13px;
padding: 4px 6px;
display: block;
}
.compact-field-value-empty {
color: var(--compact-text-muted);
opacity: 0.4;
font-size: 13px;
padding: 4px 6px;
}
/* Color picker in compact form */
.compact-field-input-cell .colorGrid {
padding: 8px 6px;
gap: 6px;
}
.compact-field-input-cell .colorSwatch {
width: 36px;
height: 36px;
}
.compact-field-required {
color: #ff3b30;
font-size: 10px;
}
.compact-section-collapsed {
padding: 8px 10px;
text-align: center;
color: var(--compact-text-muted);
font-size: 12px;
cursor: pointer;
}
.compact-section-collapsed:hover {
background: var(--compact-hover);
}
.compact-admin-badge {
font-size: 8px;
background: #ff3b30;
color: #fff;
padding: 1px 4px;
border-radius: 3px;
margin-left: 4px;
text-transform: uppercase;
}
.compact-update-indicator {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #007aff;
animation: pulse 1s infinite;
margin-left: 6px;
vertical-align: middle;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@keyframes pulseRecording {
0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
50% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
.pulse-recording {
animation: pulseRecording 1.5s ease-in-out infinite;
}
.compact-text-template-actions {
position: absolute;
bottom: 2px;
right: 2px;
display: flex;
gap: 4px;
z-index: 2;
}
.compact-text-template-btn {
font-size: 10px;
color: #007aff;
background: rgba(255, 255, 255, 0.9);
border: none;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: background 0.15s ease;
white-space: nowrap;
}
.compact-text-template-btn:hover {
background: rgba(0, 122, 255, 0.15);
}
.compact-section.darkmode .compact-text-template-btn {
background: rgba(28, 28, 30, 0.9);
}
.compact-input-wrapper {
display: block;
width: 100%;
position: relative;
}
.compact-input-wrapper > .form-group,
.compact-input-wrapper > div:first-child {
flex: 1;
min-width: 0;
}
.compact-input-wrapper .form-group {
margin: 0 !important;
padding: 0 !important;
}
.compact-input-wrapper .form-group input,
.compact-input-wrapper .form-group select,
.compact-input-wrapper .form-group textarea {
width: 100%;
}
.compact-indicator {
position: absolute;
top: 2px;
right: 2px;
font-size: 12px;
color: var(--compact-text-muted);
pointer-events: none;
z-index: 1;
}
.compact-required-float {
position: absolute;
top: 1px;
right: 2px;
color: #ff3b30;
font-size: 10px;
font-weight: 600;
pointer-events: none;
z-index: 1;
}
.compact-indicator + .compact-required-float,
.compact-indicator:not(:empty) + .compact-required-float {
right: 16px;
}
.compact-recommended-float {
position: absolute;
top: 1px;
right: 12px;
color: #ff9500;
font-size: 8px;
font-weight: 600;
pointer-events: none;
z-index: 1;
}
.compact-indicator + .compact-recommended-float,
.compact-indicator:not(:empty) + .compact-recommended-float {
right: 26px;
}
/* When both required and recommended are present */
.compact-required-float + .compact-recommended-float {
right: 14px;
}
/* Hide floating labels in compact form input cells - we have labels in left column */
/* But preserve form-check-label which is needed for toggle/checkbox switches */
.compact-field-input-cell label:not(.form-check-label),
.compact-field-input-cell .form-label-inline {
display: none !important;
}
/* Override tag input styling */
.compact-field-input-cell .input-group {
width: auto !important;
flex-wrap: nowrap !important;
}
.compact-field-input-cell .d-flex.flex-row.justify-content-end {
justify-content: flex-start !important;
}
.compact-field-input-cell .input-group input.form-control {
background: var(--compact-hover) !important;
border: 1px solid var(--compact-border) !important;
min-width: 120px;
}
.compact-field-input-cell .input-group .input-group-text {
background: var(--compact-label-bg) !important;
border: 1px solid var(--compact-border) !important;
border-right: none !important;
}
.compact-field-input-cell .form-group > .mt-3 {
margin-top: 0 !important;
}
.compact-field-input-cell .d-flex.flex-wrap {
gap: 4px;
margin-bottom: 4px;
}
/* Adjust form-group styling for compact layout */
.compact-field-input-cell .form-group {
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Admin field row styling */
.compact-field-row.admin-field {
background: rgba(255, 59, 48, 0.08);
}
.compact-field-row.admin-field .compact-field-label-cell {
background: rgba(255, 59, 48, 0.12);
}
.compact-field-row.admin-field:hover {
background: rgba(255, 59, 48, 0.15);
}
/* TextareaEditor styling for compact form */
.compact-field-input-cell .rc-md-editor {
border: none !important;
background: transparent !important;
}
.compact-field-input-cell .rc-md-editor .rc-md-navigation {
background: var(--compact-label-bg) !important;
border-bottom: 1px solid var(--compact-border) !important;
padding: 2px 4px !important;
min-height: auto !important;
}
.compact-field-input-cell .rc-md-editor .editor-container {
background: transparent !important;
}
.compact-field-input-cell .rc-md-editor .editor-container .sec-md .input {
background: transparent !important;
color: var(--compact-text) !important;
padding: 6px 8px !important;
font-size: 15px !important;
}
.compact-field-input-cell .rc-md-editor .editor-container .sec-html {
background: transparent !important;
color: var(--compact-text) !important;
padding: 6px 8px !important;
}
.compact-section.darkmode .rc-md-editor .rc-md-navigation {
background: #252528 !important;
}
.compact-section.darkmode .rc-md-editor .rc-md-navigation .button-wrap .button {
color: #8e8e93 !important;
}
.compact-section.darkmode .rc-md-editor .editor-container .sec-md .input {
background: #1c1c1e !important;
}
/* Mobile responsive - narrower label column */
@media (max-width: 576px) {
.compact-form-container {
max-width: 100vw;
overflow-x: hidden;
}
.compact-section {
max-width: 100%;
overflow: hidden;
}
.compact-field-table {
max-width: 100%;
}
.compact-field-label-cell {
width: 80px;
max-width: 80px;
min-width: 80px;
font-size: 10px;
padding: 3px 4px;
}
.compact-field-input-cell {
font-size: 11px;
padding: 2px 3px;
overflow: hidden;
max-width: calc(100vw - 100px);
}
.compact-field-input-cell .rc-md-editor,
.compact-field-input-cell .rc-md-editor .editor-container,
.compact-field-input-cell canvas {
max-width: 100% !important;
width: 100% !important;
}
.compact-section-header {
font-size: 10px;
padding: 5px 8px;
}
.compact-admin-badge {
font-size: 7px;
padding: 1px 3px;
}
.compact-help-icon {
font-size: 9px;
}
.compact-help-icon i {
font-size: 9px !important;
}
.compact-input-wrapper {
max-width: 100%;
overflow: hidden;
}
}
/* Text-only feed posts - improved readability */
.drop-cap-text {
font-size: 1.05rem;
line-height: 1.65;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.drop-cap-text p {
margin-bottom: 1em;
}
/* Drop cap styling for text-only feed posts */
.drop-cap-text p:first-of-type::first-letter,
.drop-cap-text > div:first-child > p:first-of-type::first-letter {
float: left;
font-size: 3.2em;
line-height: 1;
padding-right: 0.1em;
margin-top: 0.05em;
font-weight: 700;
text-transform: uppercase;
color: inherit;
}
/* ============================================
Mobile Dyrejournal Styles
============================================ */
.mobile-journal {
max-width: 100vw;
min-height: 100vh;
padding-bottom: 80px;
background: #f5f5f7;
}
.mobile-journal-header {
background: #fff;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid #e5e5e5;
position: sticky;
top: 0;
z-index: 100;
}
.mobile-journal-header h1 {
font-size: 18px;
font-weight: 600;
margin: 0;
flex: 1;
}
.mobile-journal-content {
padding: 8px;
}
.mobile-search-container {
padding: 8px;
background: #fff;
margin-bottom: 8px;
}
.mobile-search {
padding: 0;
}
.mobile-search-input {
font-size: 16px;
padding: 14px 16px;
border-radius: 12px;
width: 100%;
border: 1px solid #ddd;
background: #f5f5f7;
}
.mobile-search-input:focus {
outline: none;
border-color: #007aff;
background: #fff;
}
.mobile-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.mobile-search-input-wrapper .mobile-search-input {
padding-left: 44px;
padding-right: 80px;
}
.mobile-search-icon {
position: absolute;
left: 14px;
color: #8e8e93;
font-size: 16px;
pointer-events: none;
}
.mobile-search-clear {
position: absolute;
right: 44px;
background: #c7c7cc;
border: none;
width: 20px;
height: 20px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
font-size: 12px;
}
.mobile-search-spinner {
position: absolute;
right: 14px;
}
.mobile-search-history {
margin-top: 12px;
}
.mobile-search-history-item {
display: block;
width: 100%;
padding: 12px 16px;
background: none;
border: none;
text-align: left;
font-size: 15px;
color: #333;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
}
.mobile-search-history-item:active {
background: #f5f5f7;
}
.mobile-search-section {
margin-bottom: 8px;
}
.mobile-search-section-title {
padding: 10px 16px 6px;
font-size: 13px;
font-weight: 600;
color: #8e8e93;
background: #f8f8f8;
display: flex;
align-items: center;
}
.mobile-search-no-results {
padding: 24px 16px;
text-align: center;
color: #8e8e93;
font-size: 15px;
}
.mobile-search-results {
background: #fff;
border-radius: 12px;
margin-top: 8px;
max-height: 300px;
overflow-y: auto;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.mobile-search-result-item {
display: block;
width: 100%;
padding: 14px 16px;
border: none;
border-bottom: 1px solid #f0f0f0;
background: #fff;
cursor: pointer;
min-height: 44px;
text-align: left;
}
.mobile-search-result-item:active {
background: #f5f5f7;
}
.mobile-search-result-item:last-child {
border-bottom: none;
}
.mobile-search-result-main {
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
}
.mobile-search-result-sub {
font-size: 13px;
color: #8e8e93;
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
}
.mobile-search-group-header {
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
color: #666;
background: #f5f5f7;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mobile-card {
background: #fff;
border-radius: 12px;
padding: 16px;
margin-bottom: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
min-height: 44px;
}
.mobile-card-header {
font-weight: 600;
font-size: 14px;
color: #666;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-section-title {
font-size: 12px;
font-weight: 600;
color: #8e8e93;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 16px 8px 8px;
}
.mobile-visitor-card {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-visitor-name {
font-size: 17px;
font-weight: 600;
}
.mobile-visitor-info {
font-size: 14px;
color: #666;
display: flex;
align-items: center;
gap: 6px;
}
.mobile-animal-card {
background: #fff;
border-radius: 12px;
padding: 16px;
margin-bottom: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.mobile-animal-card:last-child {
margin-bottom: 0;
}
.mobile-animal-icon {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 22px;
background: #e8f4fd;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #007aff;
}
.mobile-animal-info {
flex: 1;
}
.mobile-animal-name {
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.mobile-animal-number {
font-size: 14px;
color: #007aff;
font-weight: 500;
}
.mobile-animal-details {
font-size: 13px;
color: #666;
margin-top: 2px;
}
.mobile-animal-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
.mobile-animal-action-btn {
flex: 1;
padding: 10px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
border: none;
}
.mobile-animal-action-btn.btn-primary {
background: #007aff;
color: #fff;
}
.mobile-animal-action-btn.btn-outline-primary {
background: #fff;
color: #007aff;
border: 1px solid #007aff;
}
.mobile-animal-card-header {
display: flex;
align-items: flex-start;
gap: 12px;
}
.mobile-animal-chip {
font-size: 12px;
color: #8e8e93;
font-weight: normal;
}
.mobile-animal-detail {
display: inline;
}
.mobile-animal-detail:not(:last-child)::after {
content: ' · ';
color: #ccc;
}
.mobile-animal-remove {
background: none;
border: none;
color: #ff3b30;
padding: 8px;
cursor: pointer;
font-size: 16px;
}
.mobile-animal-journal-info {
font-size: 13px;
color: #8e8e93;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
}
.mobile-animal-today-badge {
background: #34c759;
color: #fff;
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
}
.mobile-animal-journals {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.mobile-animal-journal-header {
font-size: 13px;
color: #666;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.mobile-animal-journal-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-journal-entry {
background: #f8f9fa;
border-radius: 8px;
padding: 10px 12px;
border-left: 3px solid #007aff;
}
.mobile-journal-entry-date {
font-size: 12px;
color: #8e8e93;
font-weight: 500;
margin-bottom: 4px;
}
.mobile-journal-entry-complaint {
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
}
.mobile-journal-entry-diagnosis {
font-size: 13px;
color: #666;
margin-bottom: 4px;
}
.mobile-journal-entry-diagnoses {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 4px;
}
.mobile-journal-diagnose-tag {
background: #e8f4fd;
color: #007aff;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
}
.mobile-journal-entry-medicine {
font-size: 12px;
color: #856404;
background: #fff3cd;
padding: 4px 8px;
border-radius: 4px;
margin-top: 4px;
}
.mobile-journal-more {
font-size: 13px;
color: #007aff;
text-align: center;
padding: 8px;
}
/* Current Journals Section */
.mobile-current-journals-section {
margin-top: 12px;
}
.mobile-current-journals-header {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 600;
color: #2e7d32;
margin-bottom: 10px;
padding: 0 4px;
}
/* Current Journal - Prominent Display */
.mobile-current-journal {
margin-top: 12px;
padding: 14px;
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
border-radius: 12px;
border: 2px solid #4caf50;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}
.mobile-current-journal:active {
transform: scale(0.98);
}
.mobile-current-journal-header {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 600;
color: #2e7d32;
margin-bottom: 10px;
}
.mobile-current-badge {
background: #4caf50;
color: white;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
}
.mobile-current-journal-content {
margin-bottom: 10px;
}
.mobile-current-journal-date {
font-size: 13px;
font-weight: 500;
color: #1b5e20;
margin-bottom: 6px;
}
.mobile-current-journal-complaint {
font-size: 14px;
color: #333;
margin-bottom: 8px;
line-height: 1.4;
}
.mobile-current-journal-clinical {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.mobile-clinical-tag {
background: #e3f2fd;
color: #1565c0;
font-size: 12px;
padding: 3px 8px;
border-radius: 4px;
font-weight: 500;
}
.mobile-current-journal-field {
font-size: 13px;
color: #444;
margin-bottom: 6px;
line-height: 1.4;
}
.mobile-current-journal-diagnoses {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.mobile-diagnose-tag {
background: rgba(46, 125, 50, 0.15);
color: #2e7d32;
font-size: 12px;
padding: 4px 10px;
border-radius: 12px;
font-weight: 500;
}
.mobile-current-journal-medicine {
font-size: 13px;
color: #555;
}
.mobile-current-journal-edit {
display: flex;
align-items: center;
justify-content: center;
color: #2e7d32;
font-size: 13px;
font-weight: 600;
padding-top: 10px;
border-top: 1px solid rgba(46, 125, 50, 0.2);
}
/* Previous Journals - Compact List */
.mobile-previous-journals {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.mobile-previous-journals-header {
font-size: 12px;
color: #8e8e93;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.mobile-previous-journals-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-previous-journal-item {
display: flex;
align-items: center;
padding: 10px 12px;
background: #f8f9fa;
border-radius: 8px;
cursor: pointer;
transition: background 0.1s;
}
.mobile-previous-journal-item:active {
background: #e9ecef;
}
.mobile-previous-journal-date {
font-size: 12px;
color: #8e8e93;
min-width: 85px;
font-weight: 500;
}
.mobile-previous-journal-summary {
flex: 1;
font-size: 13px;
color: #555;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 8px;
}
.mobile-previous-journal-more {
font-size: 12px;
color: #007aff;
text-align: center;
padding: 8px;
}
.mobile-section {
margin-bottom: 16px;
}
.mobile-section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 8px 8px;
font-size: 14px;
font-weight: 600;
color: #333;
}
.mobile-card-title {
font-size: 17px;
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.mobile-card-subtitle {
font-size: 14px;
color: #666;
margin-top: 4px;
display: flex;
align-items: center;
}
.mobile-available-animals {
background: #f8f8f8;
border-radius: 8px;
padding: 12px;
margin-top: 8px;
}
.mobile-available-animals-header {
font-size: 13px;
color: #8e8e93;
margin-bottom: 8px;
}
.mobile-animal-chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: #fff;
border: 1px solid #ddd;
border-radius: 20px;
padding: 8px 14px;
font-size: 14px;
cursor: pointer;
margin: 4px;
}
.mobile-animal-chip:active {
background: #e8f4fd;
border-color: #007aff;
}
.mobile-panel-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
z-index: 999;
}
.mobile-journal-btn {
background: #007aff;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.mobile-journal-btn:active {
background: #0056b3;
}
.mobile-journal-badge {
background: #34c759;
color: #fff;
font-size: 11px;
padding: 2px 6px;
border-radius: 10px;
font-weight: 600;
}
.mobile-quick-inputs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.mobile-quick-input {
flex: 1;
min-width: 70px;
text-align: center;
}
.mobile-quick-input input {
width: 100%;
padding: 12px 8px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 18px;
text-align: center;
background: #fff;
}
.mobile-quick-input input:focus {
outline: none;
border-color: #007aff;
}
.mobile-quick-input label {
font-size: 11px;
color: #666;
display: block;
margin-bottom: 4px;
font-weight: 500;
}
.mobile-form-group {
margin-bottom: 16px;
}
.mobile-form-label {
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-form-textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
resize: vertical;
min-height: 80px;
background: #fff;
}
.mobile-form-textarea:focus {
outline: none;
border-color: #007aff;
}
.mobile-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-radius: 16px 16px 0 0;
box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
max-height: 90vh;
overflow-y: auto;
z-index: 1000;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.mobile-panel.open {
transform: translateY(0);
}
.mobile-panel-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.mobile-panel-overlay.open {
opacity: 1;
pointer-events: auto;
}
.mobile-panel-header {
padding: 16px;
border-bottom: 1px solid #e5e5e5;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
background: #fff;
border-radius: 16px 16px 0 0;
}
.mobile-panel-title {
font-size: 17px;
font-weight: 600;
}
.mobile-panel-close {
width: 30px;
height: 30px;
border-radius: 15px;
background: #f0f0f0;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
color: #666;
}
.mobile-panel-content {
padding: 16px;
padding-bottom: 100px;
}
.mobile-panel-footer {
position: sticky;
bottom: 0;
padding: 16px;
background: #fff;
border-top: 1px solid #e5e5e5;
}
.mobile-journal-form {
display: flex;
flex-direction: column;
height: 100%;
}
.mobile-form-input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
background: #fff;
}
.mobile-form-input:focus {
outline: none;
border-color: #007aff;
}
.mobile-form-select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
background: #fff;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
}
.mobile-form-select:focus {
outline: none;
border-color: #007aff;
}
.mobile-form-number-row {
display: flex;
align-items: center;
gap: 8px;
}
.mobile-form-number-row input {
flex: 1;
}
.mobile-form-unit {
color: #666;
font-size: 14px;
min-width: 60px;
white-space: nowrap;
}
.mobile-form-divider {
margin: 20px 0 12px 0;
padding: 8px 0;
color: #666;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #e5e5e5;
}
.mobile-form-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.mobile-inline-search {
margin-bottom: 12px;
}
.mobile-inline-results {
background: #f8f8f8;
border-radius: 8px;
margin-top: 8px;
max-height: 200px;
overflow-y: auto;
}
.mobile-inline-result-item {
display: block;
width: 100%;
padding: 12px;
background: none;
border: none;
border-bottom: 1px solid #eee;
text-align: left;
font-size: 14px;
cursor: pointer;
}
.mobile-inline-result-item:active {
background: #e8f4fd;
}
.mobile-inline-result-item:last-child {
border-bottom: none;
}
.mobile-chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.mobile-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #e8f4fd;
color: #007aff;
padding: 6px 12px;
border-radius: 16px;
font-size: 14px;
}
.mobile-chip-remove {
background: none;
border: none;
color: #007aff;
padding: 0;
cursor: pointer;
font-size: 12px;
opacity: 0.7;
}
.mobile-chip-remove:hover {
opacity: 1;
}
.mobile-medicine-form {
padding: 12px;
background: #f8f8f8;
border-radius: 8px;
margin-bottom: 12px;
}
.mobile-medicine-search {
margin-bottom: 12px;
}
.mobile-medicine-results {
background: #fff;
border-radius: 8px;
margin-top: 8px;
max-height: 250px;
overflow-y: auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.mobile-medicine-result-item {
display: block;
width: 100%;
padding: 12px;
background: #fff;
border: none;
border-bottom: 1px solid #f0f0f0;
text-align: left;
cursor: pointer;
}
.mobile-medicine-result-item:active {
background: #f5f5f7;
}
.mobile-medicine-result-item:last-child {
border-bottom: none;
}
.mobile-medicine-result-name {
font-size: 15px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
}
.mobile-medicine-result-details {
font-size: 13px;
color: #8e8e93;
}
.mobile-medicine-result-withdrawal {
display: flex;
gap: 8px;
margin-top: 6px;
}
.mobile-withdrawal-badge-small {
display: inline-flex;
align-items: center;
gap: 2px;
background: #fff3cd;
color: #856404;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
}
.mobile-medicine-selected {
padding: 0;
}
.mobile-medicine-selected-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.mobile-medicine-selected-info {
flex: 1;
}
.mobile-medicine-selected-name {
font-size: 16px;
font-weight: 600;
color: #333;
}
.mobile-medicine-selected-details {
font-size: 13px;
margin-top: 4px;
}
.mobile-medicine-withdrawal {
background: #fff3cd;
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
}
.mobile-medicine-withdrawal-title {
font-size: 13px;
font-weight: 600;
color: #856404;
margin-bottom: 8px;
}
.mobile-medicine-withdrawal-periods {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mobile-medicine-inputs {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
}
.mobile-medicine-input-group {
width: 100%;
}
.mobile-medicine-input-group label {
display: block;
font-size: 13px;
color: #666;
margin-bottom: 4px;
}
.mobile-medicine-list {
margin-top: 12px;
}
.mobile-medicine-info {
flex: 1;
}
.mobile-medicine-details {
font-size: 13px;
color: #666;
}
.mobile-medicine-remove {
background: none;
border: none;
color: #ff3b30;
padding: 8px;
cursor: pointer;
}
.mobile-medicine-item {
background: #f8f9fa;
border-radius: 8px;
padding: 12px;
margin-bottom: 8px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.mobile-medicine-name {
font-weight: 600;
font-size: 15px;
margin-bottom: 4px;
}
.mobile-medicine-dose {
font-size: 14px;
color: #666;
}
.mobile-withdrawal-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.mobile-withdrawal-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: #fff3cd;
color: #856404;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.mobile-withdrawal-badge i {
font-size: 10px;
}
.mobile-diagnose-item {
background: #e8f4fd;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 6px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-diagnose-name {
font-size: 14px;
font-weight: 500;
}
.mobile-diagnose-code {
font-size: 12px;
color: #666;
}
.mobile-bottom-button {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
background: #fff;
border-top: 1px solid #eee;
z-index: 999;
}
.mobile-bottom-button button {
width: 100%;
padding: 16px;
font-size: 17px;
font-weight: 600;
border-radius: 12px;
border: none;
cursor: pointer;
}
.mobile-btn-primary {
background: #007aff;
color: #fff;
}
.mobile-btn-primary:active {
background: #0056b3;
}
.mobile-btn-success {
background: #34c759;
color: #fff;
}
.mobile-btn-success:active {
background: #28a745;
}
.mobile-empty-state {
text-align: center;
padding: 40px 20px;
color: #8e8e93;
}
.mobile-empty-state i {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.mobile-empty-state p {
font-size: 15px;
margin: 0;
}
.mobile-add-btn {
background: none;
border: 2px dashed #ddd;
border-radius: 8px;
padding: 12px;
width: 100%;
color: #666;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.mobile-add-btn:active {
background: #f5f5f7;
border-color: #007aff;
color: #007aff;
}
.mobile-list-item {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-list-item:last-child {
border-bottom: none;
}
.mobile-remove-btn {
background: none;
border: none;
color: #ff3b30;
padding: 8px;
cursor: pointer;
}
/* DHP Picker Button */
.mobile-dhp-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 16px;
margin-top: 12px;
background: #f0f7ff;
border: 2px dashed #007aff;
border-radius: 12px;
color: #007aff;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.mobile-dhp-button:active {
background: #e0efff;
}
/* DHP Picker Component */
.mobile-dhp-picker {
display: flex;
flex-direction: column;
height: 100%;
}
.mobile-dhp-producer-info {
display: flex;
align-items: center;
padding: 12px;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 12px;
}
.mobile-dhp-search {
margin-bottom: 12px;
}
.mobile-dhp-actions {
display: flex;
align-items: center;
padding: 8px 0;
margin-bottom: 8px;
}
.mobile-dhp-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
color: #666;
}
.mobile-dhp-animal-list {
flex: 1;
overflow-y: auto;
max-height: calc(100vh - 350px);
}
.mobile-dhp-animal-row {
display: flex;
align-items: center;
padding: 12px;
border-bottom: 1px solid #eee;
cursor: pointer;
transition: background-color 0.15s;
}
.mobile-dhp-animal-row:active {
background: #f5f5f5;
}
.mobile-dhp-animal-row.selected {
background: #e8f5e9;
}
.mobile-dhp-animal-row.already-added {
background: #f5f5f5;
opacity: 0.7;
cursor: default;
}
.mobile-dhp-checkbox {
width: 22px;
height: 22px;
margin-right: 12px;
accent-color: #007aff;
}
.mobile-dhp-animal-info {
flex: 1;
min-width: 0;
}
.mobile-dhp-animal-number {
font-weight: 600;
font-size: 15px;
color: #333;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.mobile-dhp-animal-details {
font-size: 13px;
color: #666;
margin-top: 2px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.mobile-dhp-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
color: #8e8e93;
text-align: center;
}
/* Batch Journal Button */
.mobile-batch-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 16px;
margin-top: 12px;
background: #e8f5e9;
border: 2px solid #4caf50;
border-radius: 12px;
color: #2e7d32;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
}
.mobile-batch-button:active {
background: #c8e6c9;
}
.mobile-batch-count {
margin-left: 4px;
font-weight: 400;
}
/* Batch Journal Animal Chips */
.mobile-batch-animals {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px;
background: #f5f5f5;
border-radius: 8px;
margin-bottom: 16px;
}
.mobile-batch-animal-chip {
display: inline-flex;
align-items: center;
background: #fff;
border: 1px solid #ddd;
padding: 6px 12px;
border-radius: 16px;
font-size: 13px;
color: #333;
}
/* Compact Animal List for Production Animals */
.mobile-compact-animal-list {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.mobile-compact-animal-row {
display: flex;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.15s;
}
.mobile-compact-animal-row:last-child {
border-bottom: none;
}
.mobile-compact-animal-row:active {
background: #f5f5f5;
}
.mobile-compact-animal-row.has-journal {
background: #f0fdf4;
}
.mobile-compact-animal-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: #e8f4fd;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
flex-shrink: 0;
}
.mobile-compact-animal-icon i {
font-size: 14px;
color: #007aff;
}
.mobile-compact-animal-row.has-journal .mobile-compact-animal-icon {
background: #dcfce7;
}
.mobile-compact-animal-row.has-journal .mobile-compact-animal-icon i {
color: #16a34a;
}
.mobile-compact-animal-info {
flex: 1;
min-width: 0;
}
.mobile-compact-animal-name {
font-weight: 600;
font-size: 14px;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-compact-animal-details {
font-size: 12px;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-compact-animal-status {
margin-left: 8px;
flex-shrink: 0;
}
.mobile-compact-journal-badge {
display: inline-flex;
align-items: center;
background: #dcfce7;
color: #16a34a;
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.mobile-compact-journal-badge.batch {
background: #dbeafe;
color: #2563eb;
}
.mobile-compact-animal-row.is-batch {
border-left: 3px solid #2563eb;
}
.mobile-batch-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-batch-button.mobile-batch-edit {
background: #dbeafe;
border-color: #2563eb;
color: #2563eb;
}
/* Batch Journal Preview Card */
.mobile-batch-preview {
background: #f0fdf4;
border: 1px solid #86efac;
border-radius: 12px;
padding: 12px;
margin-top: 16px;
margin-bottom: 12px;
cursor: pointer;
}
.mobile-batch-preview:active {
background: #dcfce7;
}
.mobile-batch-preview-header {
display: flex;
align-items: center;
font-weight: 600;
color: #16a34a;
margin-bottom: 8px;
font-size: 14px;
}
.mobile-batch-preview-count {
font-weight: 400;
font-size: 12px;
margin-left: 4px;
color: #22c55e;
}
.mobile-batch-preview-content {
font-size: 13px;
color: #374151;
}
.mobile-batch-preview-row {
margin-bottom: 6px;
line-height: 1.4;
}
.mobile-batch-preview-label {
font-weight: 500;
color: #6b7280;
margin-right: 4px;
}
.mobile-batch-preview-value {
color: #111827;
}
.mobile-batch-preview-vitals {
display: flex;
gap: 16px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #d1fae5;
}
.mobile-batch-preview-vital {
display: inline-flex;
align-items: center;
font-size: 12px;
color: #16a34a;
font-weight: 500;
}
.mobile-batch-preview-empty {
color: #9ca3af;
font-style: italic;
font-size: 13px;
}
/* DHP Report Button */
.mobile-dhp-report {
margin-top: 12px;
}
.mobile-dhp-warnings {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.mobile-dhp-warning {
background: #fef3c7;
color: #92400e;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.mobile-dhp-token-expired {
background: #fee2e2;
color: #991b1b;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 8px;
text-align: center;
}
.mobile-dhp-report-button {
width: 100%;
padding: 14px;
border: 2px solid #3b82f6;
border-radius: 25px;
background: #eff6ff;
color: #1d4ed8;
font-weight: 600;
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-dhp-report-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mobile-dhp-report-button.sent {
background: #dcfce7;
border-color: #22c55e;
color: #16a34a;
}
.mobile-dhp-button-sent {
width: 100%;
padding: 14px;
border: 2px solid #22c55e;
border-radius: 25px;
background: #dcfce7;
color: #16a34a;
font-weight: 600;
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-compact-no-journal {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #f3f4f6;
color: #9ca3af;
border-radius: 50%;
font-size: 12px;
}
.mobile-compact-remove-btn {
background: none;
border: none;
color: #ef4444;
padding: 8px;
margin-left: 4px;
cursor: pointer;
flex-shrink: 0;
opacity: 0.6;
}
.mobile-compact-remove-btn:active {
opacity: 1;
}
/* Streaming Component - YouTube-like Layout */
.streaming-container {
max-width: 1280px;
margin: 0 auto;
overflow-x: hidden;
}
.video-player-wrapper {
background-color: #000;
max-width: 100%;
overflow: hidden;
}
.stream-thumbnail {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stream-thumbnail:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Responsive stream thumbnails - 2 columns on mobile, more on desktop */
@media (min-width: 768px) {
.stream-thumbnail {
width: calc(20% - 10px) !important;
flex: 0 0 calc(20% - 10px) !important;
}
}
@media (min-width: 1200px) {
.stream-thumbnail {
width: calc(16.666% - 10px) !important;
flex: 0 0 calc(16.666% - 10px) !important;
}
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* News ticker slide-in / slide-out animations */
@keyframes newsTickerEnter {
0% { transform: translateX(100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
@keyframes newsTickerExit {
0% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(-100%); opacity: 0; }
}
.news-ticker-item-enter {
animation: newsTickerEnter 0.5s ease-out forwards;
}
.news-ticker-item-visible {
transform: translateX(0);
opacity: 1;
}
.news-ticker-item-exit {
animation: newsTickerExit 0.5s ease-in forwards;
}
/* News expanded list styles */
.news-list-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.news-list-item:last-child {
border-bottom: none !important;
}
.news-expanded-list::-webkit-scrollbar {
width: 4px;
}
.news-expanded-list::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.news-expanded-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
}
.news-expanded-list {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3);
}
/* Streaming tracking overlay styles */
.stream-list-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.stream-list-item:last-child {
border-bottom: none !important;
}
.stream-expanded-list::-webkit-scrollbar {
width: 4px;
}
.stream-expanded-list::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.stream-expanded-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
}
.stream-expanded-list {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3);
}
/* Stream mini player - responsive sizing */
.stream-mini-player {
width: 240px;
height: 135px;
}
.stream-mini-player video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.stream-close-btn {
top: 4px;
right: 4px;
width: 18px;
height: 18px;
}
.stream-close-icon {
font-size: 9px;
}
.stream-label-bar {
padding: 1px 6px;
}
.stream-live-badge {
font-size: 0.5rem;
padding: 1px 3px;
}
.stream-label-text {
font-size: 0.6rem;
}
.stream-volume-icon-wrapper {
bottom: 6px;
right: 6px;
}
.stream-volume-icon-btn {
width: 24px;
height: 24px;
font-size: 10px;
cursor: pointer;
}
.stream-volume-icon-btn:hover {
background: rgba(0,0,0,0.8) !important;
}
.stream-volume-popup {
width: 32px;
height: 100px;
padding: 10px 0;
}
.stream-btn-icon {
margin-right: 0.25rem;
}
/* Medium screens: 50% of viewport */
@media (min-width: 992px) {
.stream-mini-player {
width: 50vw;
height: calc(50vw * 9 / 16);
}
.stream-close-btn {
top: 6px;
right: 6px;
width: 24px;
height: 24px;
}
.stream-close-icon {
font-size: 11px;
}
.stream-label-bar {
padding: 2px 8px;
}
.stream-live-badge {
font-size: 0.55rem;
padding: 2px 4px;
}
.stream-label-text {
font-size: 0.65rem;
}
.stream-volume-icon-wrapper {
bottom: 8px;
right: 8px;
}
.stream-volume-icon-btn {
width: 28px;
height: 28px;
font-size: 12px;
}
.stream-volume-popup {
width: 36px;
height: 110px;
}
}
/* Large screens: 40% of viewport */
@media (min-width: 1400px) {
.stream-mini-player {
width: 40vw;
height: calc(40vw * 9 / 16);
}
.stream-close-btn {
top: 8px;
right: 8px;
width: 28px;
height: 28px;
}
.stream-close-icon {
font-size: 13px;
}
.stream-label-bar {
padding: 3px 10px;
}
.stream-live-badge {
font-size: 0.6rem;
padding: 2px 5px;
}
.stream-label-text {
font-size: 0.7rem;
}
.stream-volume-icon-wrapper {
bottom: 10px;
right: 10px;
}
.stream-volume-icon-btn {
width: 32px;
height: 32px;
font-size: 14px;
}
.stream-volume-popup {
width: 38px;
height: 120px;
}
}
/* Small screens: 95% of viewport (portrait phones) */
@media (max-width: 576px) {
.stream-mini-player {
width: 95vw;
height: calc(95vw * 9 / 16);
}
.stream-btn-label {
display: none;
}
.stream-btn-icon {
margin-right: 0;
}
}
/* Bootstrap 4 embed-responsive classes (used by youtubeVideo utility) */
.embed-responsive {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.embed-responsive::before {
display: block;
content: "";
}
.embed-responsive-16by9::before {
padding-top: 56.25%;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-grid-item {
width: calc(50% - 6px);
}
@media (min-width: 768px) {
.video-grid-item {
width: calc(33.333% - 8px);
}
}
@media (min-width: 1200px) {
.video-grid-item {
width: calc(25% - 9px);
}
}
/* Video watch layout: player + sidebar */
.video-watch-layout {
display: flex;
flex-direction: column;
gap: 16px;
}
.video-watch-player {
width: 100%;
}
.video-watch-sidebar {
width: 100%;
}
@media (min-width: 768px) {
.video-watch-layout {
flex-direction: row;
}
.video-watch-player {
flex: 1 1 0;
min-width: 0;
}
.video-watch-sidebar {
width: 360px;
min-width: 360px;
max-height: calc(100vh - 160px);
overflow-y: auto;
}
}
/* =============================================
Video player fullscreen styles
============================================= */
/* When CSS fullscreen is active, hide all other content to avoid stacking context issues */
html.video-fullscreen-active body * {
visibility: hidden !important;
}
html.video-fullscreen-active .video-css-fullscreen,
html.video-fullscreen-active .video-css-fullscreen * {
visibility: visible !important;
}
/* CSS-based fullscreen for iOS Safari (no native Fullscreen API) */
.video-css-fullscreen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 99999 !important;
background-color: #000 !important;
display: flex !important;
flex-direction: column !important;
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Native fullscreen container styles (desktop browsers) */
.video-fullscreen-container:fullscreen {
background-color: #000;
display: flex;
flex-direction: column;
}
.video-fullscreen-container:-webkit-full-screen {
background-color: #000;
display: flex;
flex-direction: column;
}
/* Video sizing inside fullscreen */
.video-css-fullscreen video,
.video-fullscreen-container:fullscreen video,
.video-fullscreen-container:-webkit-full-screen video {
max-height: none !important;
flex: 1 1 auto;
min-height: 0;
object-fit: contain;
}
/* Control bar stays at bottom in fullscreen */
.video-css-fullscreen > div:last-child,
.video-fullscreen-container:fullscreen > div:last-child,
.video-fullscreen-container:-webkit-full-screen > div:last-child {
flex-shrink: 0;
}
/* ============================================================
Help center — responsive layout.
Desktop (>= lg) keeps the two-pane list + detail layout.
On phones / small tablets it becomes a single scrolling column.
============================================================ */
@media (max-width: 991.98px) {
.help-center-layout {
flex-direction: column !important;
height: 100% !important;
overflow-y: auto;
}
.help-center-layout .help-pane-nav,
.help-center-layout .help-pane-main {
width: 100% !important;
height: auto !important;
min-height: 0;
overflow: visible !important;
}
/* The right-pane landing hero + card grid duplicates the nav list,
so hide it on mobile and let the search + list be the landing. */
.help-center-layout .help-landing {
display: none !important;
}
/* While reading an article, focus it full-width and hide the list. */
.help-center-layout.help-reading .help-pane-nav {
display: none !important;
}
}
/* ============================================================
External links in the article view drawer.
Modern look: subtle underline, medium weight, small
"opens in new tab" icon. Inherits the Bootstrap link color
so it adapts to dark mode automatically.
============================================================ */
a.article-external-link {
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
/* Faint hairline underline; plain rgba fallback first, then
color-mix (follows the link color) where supported. */
text-decoration-color: rgba(128, 128, 128, 0.5);
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
word-break: break-word;
transition: text-decoration-color 0.15s ease-in-out;
}
a.article-external-link:hover {
text-decoration-color: currentColor;
}
a.article-external-link::after {
font-family: 'Font Awesome 6 Pro';
font-weight: 900;
content: '\f08e';
font-size: 0.65em;
margin-left: 0.35em;
display: inline-block;
text-decoration: none;
opacity: 0.7;
vertical-align: 0.15em;
}
/* ------------------------------------------------------------------ */
/* Hidden arcade easter egg (C): Space Invaders drawer */
/* ------------------------------------------------------------------ */
.arcade-screen {
position: relative;
display: block;
background: #000;
line-height: 0;
touch-action: none;
overflow: hidden;
}
.arcade-screen::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.28) 3px);
}
.arcade-canvas {
display: block;
image-rendering: pixelated;
image-rendering: crisp-edges;
touch-action: none;
}
.arcade-overlay {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem;
color: #33ff66;
background: rgba(0, 0, 0, 0.55);
font-family: 'Courier New', Courier, monospace;
text-align: center;
line-height: 1.4;
}
.arcade-hud {
font-family: 'Courier New', Courier, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #33ff66;
}
.arcade-touch-btn {
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
min-width: 5.5rem;
min-height: 3.5rem;
}
.arcade-leaderboard {
font-family: 'Courier New', Courier, monospace;
}