251 lines
8.1 KiB
CSS
251 lines
8.1 KiB
CSS
/* Globinours — structure visuelle commune */
|
|
.coat-swatch {
|
|
display:inline-block;
|
|
width:1rem;
|
|
height:1rem;
|
|
flex:0 0 1rem;
|
|
border:1px solid rgba(98,105,118,.35);
|
|
border-radius:50%;
|
|
box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
|
|
vertical-align:-.15rem;
|
|
}
|
|
|
|
body,
|
|
.page {
|
|
background:
|
|
radial-gradient(circle at 10% 10%, rgba(205, 167, 98, .14), transparent 32rem),
|
|
radial-gradient(circle at 90% 90%, rgba(180, 139, 78, .09), transparent 28rem),
|
|
#f7f3eb;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.page > .navbar {
|
|
position: relative;
|
|
z-index: 1050;
|
|
overflow: visible;
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
padding-top: .75rem;
|
|
}
|
|
|
|
.topbar-surface {
|
|
height: 80px;
|
|
background: rgba(255, 255, 255, .94);
|
|
border: 1px solid rgba(98, 105, 118, .14);
|
|
border-radius: .75rem;
|
|
box-shadow: 0 3px 14px rgba(31, 42, 68, .06);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
overflow: visible;
|
|
}
|
|
|
|
.settings-dropdown {
|
|
position: relative;
|
|
z-index: 1060;
|
|
}
|
|
|
|
.search-trigger-wrap {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-right: .65rem;
|
|
}
|
|
|
|
.search-trigger {
|
|
width: 42px;
|
|
height: 42px;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--tblr-secondary, #626976);
|
|
background: rgba(98, 105, 118, .06);
|
|
border: 0;
|
|
border-radius: 50%;
|
|
transition: color .15s ease, background-color .15s ease, transform .15s ease;
|
|
}
|
|
|
|
.search-trigger:hover,
|
|
.search-trigger:focus-visible {
|
|
color: var(--tblr-primary, #206bc4);
|
|
background: rgba(32, 107, 196, .12);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.search-trigger .icon {
|
|
width: 21px;
|
|
height: 21px;
|
|
margin: 0;
|
|
}
|
|
|
|
.settings-trigger {
|
|
width: 48px;
|
|
height: 48px;
|
|
min-height: 48px;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--tblr-dark, #1d273b);
|
|
background: transparent;
|
|
border-color: var(--tblr-dark, #1d273b);
|
|
}
|
|
|
|
.settings-trigger:focus {
|
|
color: var(--tblr-dark, #1d273b);
|
|
background: transparent;
|
|
border-color: var(--tblr-dark, #1d273b);
|
|
}
|
|
|
|
.settings-trigger:hover,
|
|
.settings-trigger.show,
|
|
.settings-trigger.show:focus {
|
|
color: #fff;
|
|
background: var(--tblr-dark, #1d273b);
|
|
border-color: var(--tblr-dark, #1d273b);
|
|
}
|
|
|
|
.settings-dropdown .dropdown-menu {
|
|
z-index: 2000;
|
|
min-width: 220px;
|
|
}
|
|
.settings-dropdown .dropdown-menu.settings-menu-wide {
|
|
width: min(560px, calc(100vw - 1.5rem));
|
|
}
|
|
.settings-menu-columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0;
|
|
padding: .25rem .5rem;
|
|
}
|
|
.settings-menu-column {
|
|
min-width: 0;
|
|
padding: 0 .35rem;
|
|
}
|
|
.settings-menu-column + .settings-menu-column {
|
|
border-left: 1px solid rgba(98,105,118,.16);
|
|
padding-left: .85rem;
|
|
}
|
|
.settings-menu-group + .settings-menu-group {
|
|
margin-top: .65rem;
|
|
padding-top: .55rem;
|
|
border-top: 1px solid rgba(98,105,118,.12);
|
|
}
|
|
.settings-menu-group .dropdown-header {
|
|
padding-inline: .65rem;
|
|
}
|
|
.settings-menu-group .dropdown-item {
|
|
border-radius: var(--tblr-border-radius);
|
|
white-space: normal;
|
|
}
|
|
|
|
.settings-section-nav .btn {
|
|
min-height: 48px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-inline: 1rem;
|
|
}
|
|
.settings-nav-group{padding-right:1rem;border-right:1px solid rgba(98,105,118,.16)}.settings-nav-group:last-child{padding-right:0;border-right:0}
|
|
|
|
.paw-footer {
|
|
height: 130px;
|
|
flex: 0 0 130px;
|
|
margin-top: 1.5rem;
|
|
pointer-events: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='84' viewBox='0 0 120 84'%3E%3Cg fill='%23a97f45' opacity='.22' transform='translate(12 9) rotate(-12 22 22)'%3E%3Cellipse cx='21' cy='31' rx='13' ry='10'/%3E%3Cellipse cx='8' cy='17' rx='5' ry='7'/%3E%3Cellipse cx='19' cy='10' rx='5' ry='7'/%3E%3Cellipse cx='31' cy='12' rx='5' ry='7'/%3E%3Cellipse cx='39' cy='23' rx='5' ry='7'/%3E%3C/g%3E%3Cg fill='%23a97f45' opacity='.14' transform='translate(72 43) rotate(14 18 18) scale(.78)'%3E%3Cellipse cx='21' cy='31' rx='13' ry='10'/%3E%3Cellipse cx='8' cy='17' rx='5' ry='7'/%3E%3Cellipse cx='19' cy='10' rx='5' ry='7'/%3E%3Cellipse cx='31' cy='12' rx='5' ry='7'/%3E%3Cellipse cx='39' cy='23' rx='5' ry='7'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-repeat: repeat;
|
|
background-position: center bottom;
|
|
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%, #000);
|
|
mask-image: linear-gradient(to bottom, transparent, #000 45%, #000);
|
|
}
|
|
|
|
.globinours-footer { margin-top: 2rem; }
|
|
.footer-surface { position: relative; z-index: 1; padding: .85rem 1rem; border: 1px solid rgba(169,127,69,.2); border-radius: .8rem; background: rgba(255,255,255,.78); box-shadow: 0 .2rem .8rem rgba(75,57,36,.05); backdrop-filter: blur(5px); }
|
|
.globinours-footer .paw-footer { margin-top: -1.5rem; }
|
|
.footer-meta { font-size: .78rem; color: var(--tblr-secondary); }
|
|
.footer-version { background: rgba(169,127,69,.12); color: #76552d; border: 1px solid rgba(169,127,69,.2); }
|
|
.footer-source { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; }
|
|
.footer-source:hover { color: var(--tblr-primary); text-decoration: none; }
|
|
.footer-source .icon { width: 16px; height: 16px; margin: 0; }
|
|
.breton-flag { position: relative; display: inline-block; width: 23px; height: 15px; overflow: hidden; border: 1px solid rgba(0,0,0,.3); border-radius: 2px; vertical-align: middle; box-shadow: 0 1px 2px rgba(0,0,0,.12); background: repeating-linear-gradient(to bottom,#111 0,#111 1.66px,#fff 1.66px,#fff 3.32px); }
|
|
.breton-flag::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 9px; height: 8.3px; background-color: #fff; background-image: radial-gradient(circle,#111 0,#111 .8px,transparent .9px); background-size: 3px 3px; }
|
|
|
|
.page-header {
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.page-header::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -.35rem 0 -.75rem;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
opacity: .42;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='84' viewBox='0 0 120 84'%3E%3Cg fill='%23a97f45' opacity='.22' transform='translate(12 9) rotate(-12 22 22)'%3E%3Cellipse cx='21' cy='31' rx='13' ry='10'/%3E%3Cellipse cx='8' cy='17' rx='5' ry='7'/%3E%3Cellipse cx='19' cy='10' rx='5' ry='7'/%3E%3Cellipse cx='31' cy='12' rx='5' ry='7'/%3E%3Cellipse cx='39' cy='23' rx='5' ry='7'/%3E%3C/g%3E%3Cg fill='%23a97f45' opacity='.14' transform='translate(72 43) rotate(14 18 18) scale(.78)'%3E%3Cellipse cx='21' cy='31' rx='13' ry='10'/%3E%3Cellipse cx='8' cy='17' rx='5' ry='7'/%3E%3Cellipse cx='19' cy='10' rx='5' ry='7'/%3E%3Cellipse cx='31' cy='12' rx='5' ry='7'/%3E%3Cellipse cx='39' cy='23' rx='5' ry='7'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-repeat: repeat;
|
|
background-position: 37px top;
|
|
-webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%);
|
|
mask-image: linear-gradient(to bottom, #000, transparent 90%);
|
|
}
|
|
|
|
.page-header > .container-xl {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* pins custom façon “pastille” */
|
|
.twix-pin{
|
|
width:18px; height:18px;
|
|
border-radius:50%;
|
|
border:3px solid #fff;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.25);
|
|
}
|
|
.twix-pin.rescue{ background:#1e88e5; } /* bleu */
|
|
.twix-pin.current{ background:#43a047; } /* vert */
|
|
|
|
.leaflet-div-icon{
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
/* petite légende dans la carte */
|
|
.twix-map-legend{
|
|
background: rgba(255,255,255,.92);
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,.12);
|
|
font-size: 12px;
|
|
}
|
|
.twix-map-legend .row{
|
|
display:flex; align-items:center; gap:8px; margin:4px 0;
|
|
}
|
|
.twix-map-legend .dot{
|
|
width:20px; height:20px; border-radius:50%;
|
|
border:2px solid #fff;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,.2);
|
|
}
|
|
.twix-map-legend .dot.rescue{ background:#1e88e5; }
|
|
.twix-map-legend .dot.current{ background:#43a047; }
|
|
.twix-map-legend .line{
|
|
width:18px; height:0; border-top:3px dashed #1e88e5;
|
|
opacity:.8;
|
|
}
|
|
|
|
/****** CUSTOM *****/
|
|
|
|
.nav-tabs-alt .nav-link {
|
|
font-weight: 500;
|
|
padding: 0.75rem 1.1rem;
|
|
}
|
|
|
|
.nav-tabs-alt .nav-link.active {
|
|
border-bottom: 3px solid var(--tblr-primary);
|
|
background: #fff;
|
|
}
|
|
|
|
/****** END CUSTOM *****/
|
|
|