Line 80:
Line 80:
<div class="mw-collapsible" data-collapsetext="Collapse" data-expandtext="Expand">
<div class="mw-collapsible" data-collapsetext="Collapse" data-expandtext="Expand">
<div class="products-grid" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">
<div class="products-grid">
<div class="product-item" style="text-align: center; width: 220px; vertical-align: top;">
<div class="product-item" style="text-align: center; width: 220px; display: inline-block ; vertical-align: top;">
[[File:Dissolved Oxygen.svg|center|frameless|106x106px|class=product-image|link=Dissolved Oxygen]]
[[File:Dissolved Oxygen.svg|center|frameless|106x106px|class=product-image|link=Dissolved Oxygen]]
<div style="margin-top: 10px;">'''[[Dissolved Oxygen]]'''</div>
<div class="mw-customtoggle-1 variations-toggle" style="cursor: pointer;">
<div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
</div>
</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-1">
<div class="variations-list">
[[Dissolved Oxygen Probe AT-SB-PROBE-DO-P-C1|DO Probe C1]]<br>
[[Link_Pagina_2|DO Probe C2]]<br>
[[Link_Pagina_3|DO Probe C3]]
</div>
</div>
</div>
<div class="product-item" style="text-align: center; width: 220px; vertical-align: top;">
<div style="margin-top: 10px;">
[[File:Conductivity.svg|center|frameless|106x106px|class=product-image|link=Low Conductivity Probe AT-SB-PROBE-LC-P-C1]]
'''[[Dissolved Oxygen ]]'''
<div style="margin-top: 10px;">'''[[Conductivity]]'''</div>
<div class="mw-customtoggle-2 variations-toggle" style="cursor: pointer;">
<div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
</div>
</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-2">
<div class="variations-list">
[[Low Conductivity Probe AT-SB-PROBE-LC-P-C1|LC Probe C1]]<br>
[[Outra_Variacao|LC Probe C2]]
</div>
</div>
</div>
</div>
<div class="product-item" style="text-align: center; width: 220px; vertical-align: top;">
<div class="mw-customtoggle-1 variations-toggle">
[[File:Multiparameter.svg|center|frameless|106x106px|class=product-image|link=Multiparameter Probe AT-SB-PROBE-MP-P-C1]]
<div style="display: flex; flex -direction : row ;justify-content: center;">
<div style="margin-top: 10px;">'''[[Multiparameter]]'''</div>
Variations
<div class="mw-customtoggle-3 variations-toggle" style="cursor: pointer;">
<span class="material-symbols-rounded">
<div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
keyboard_arrow_down
Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
</span>
</div>
</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-3">
<div class="variations-list">
[[Multiparameter Probe AT-SB-PROBE-MP-P-C1|MP Probe C1]]
</div>
</div>
</div>
</div>
</div>
<div class="product-item" style="text-align: center; width: 220px; vertical-align: top;">
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-1 " style ="line -height: 1.8em; ">
[[File:NO3-.svg|center|frameless|106x106px|class=product-image|link=RS-485 Nitrates (NO3) Probe AT-SB-PROBENO3-P]]
<div class="variations -list ">
<div style="margin-top: 10px;">'''[[Nitrates(NO3-)]]'''</div>
[[Dissolved Oxygen Probe AT-SB-PROBE-DO -P-C1|DO Probe C1 ]]
<div class="mw-customtoggle-4 variations-toggle" style="cursor: pointer;">
[[Link_Pagina_2|DO Probe C2 ]]
<div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
[[Link_Pagina_3 |DO Probe C3 ]]
Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
</div>
</div>
</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-4">
<div class="variations-list">
[[RS-485 Nitrates (NO3) Probe AT-SB-PROBENO3-P|NO3 Probe]]
</div>
</div>
</div>
<div class="product-item" style="text-align: center; width: 220px; vertical-align: top;">
[[File:PH.svg|center|frameless|106x106px|class=product-image|link=RS-485 pH Probe AT-SB-PROBE-pH-P]]
<div style="margin-top: 10px;">'''[[pH Probe]]'''</div>
<div class="mw-customtoggle-5 variations-toggle" style="cursor: pointer;">
<div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
</div>
</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-5">
<div class="variations-list">
[[RS-485 pH Probe AT-SB-PROBE-pH-P|pH Probe P]]
</div>
</div>
</div>
</div>
</div>
</div> </div> ```
<div class="product-item">[[File:Conductivity.svg|center|frameless|106x106px|class=product-image|link=Low Conductivity Probe AT-SB-PROBE-LC-P-C1]]'''[[Conductivity]]'''
<span class="product-subtitle">Probes </span >
---
</div>
### 2. O CSS Final (Common.css)
<div class="product-item">[[File:Multiparameter .svg|center|frameless|106x106px|class=product-image|link=Multiparameter Probe AT-SB-PROBE-MP-P-C1]]'''[[Multiparameter]]'''
Para que a seta rode em todos os itens e o fundo cinzento desapareça de vez, usa este bloco:
<span class="product-subtitle">Probes</span>
</div>
```css
<div class=" product-item">[[File:NO3 -.svg|center|frameless|106x106px|class= product-image|link=RS-485 Nitrates (NO3) Probe AT-SB-PROBENO3 -P]]'''[[Nitrates(NO3 -)]]'''
/* Limpeza de estilos padrão do MediaWiki */
<span class="product-subtitle">Probes</span>
.product-item .mw-collapsible,
</div>
.product-item .mw-collapsible-content {
background: transparent !important;
border: none !important;
}
/* Estilo da Seta */
<div class="product -item">[[File :PH .svg|center|frameless|106x106px|class=product-image|link=RS-485 pH Probe AT-SB-PROBE-pH-P
.arrow-icon {
]]'''[[pH Probe]]'''
transition: transform 0.3s ease;
<span class="product -subtitle">Probes</span>
display: inline-block;
</div>
vertical-align: middle;
}
/* Rotação da seta baseada no estado do toggle */
< /div>
/* Este seletor atinge o toggle quando ele está "ativo" */
.variations-toggle.mw-collapsible-toggle-expanded .arrow-icon,
[aria-expanded="true"] .arrow-icon {
transform: rotate(180deg);
}
/* Estilo opcional para os links da lista */
< /div>
.variations-list {
padding-top: 5px;
font-size: 0.95em;
line-height: 1.6em;
}
== Accessories ==
== Accessories ==
Welcome to the ATRONIA´s Wiki
This is where tech makes sense.
Here you will find our product´s datasheets, manuals, integration architectures, firmware releases, and engineering insights that will help you better understand what we do.
We document with purpose. We design with clarity.
Gateways & Single Board Computers
Probes
Variations
keyboard_arrow_down
Accessories