Jump to content

Main Page: Difference between revisions

← Older editNewer edit →
VisualWikitext
No edit summary
Tag: Manual revert
Tag: Reverted
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">
<div class="products-grid" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">


<div class="product-item" style="text-align: center; width: 220px; display: inline-block; vertical-align: top;">
    <div class="product-item" style="text-align: center; width: 220px; 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 style="margin-top: 10px;">
     <div class="product-item" style="text-align: center; width: 220px; vertical-align: top;">
        '''[[Dissolved Oxygen]]'''
        [[File:Conductivity.svg|center|frameless|106x106px|class=product-image|link=Low Conductivity Probe AT-SB-PROBE-LC-P-C1]]
        <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="mw-customtoggle-1 variations-toggle">
     <div class="product-item" style="text-align: center; width: 220px; vertical-align: top;">
        <div style="display: flex; flex-direction: row;justify-content: center;">
        [[File:Multiparameter.svg|center|frameless|106x106px|class=product-image|link=Multiparameter Probe AT-SB-PROBE-MP-P-C1]]
        Variations  
        <div style="margin-top: 10px;">'''[[Multiparameter]]'''</div>
            <span class="material-symbols-rounded">
        <div class="mw-customtoggle-3 variations-toggle" style="cursor: pointer;">
                  keyboard_arrow_down
            <div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
            </span>
                Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</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="mw-collapsible mw-collapsed" id="mw-customcollapsible-1" style="line-height: 1.8em; ">
     <div class="product-item" style="text-align: center; width: 220px; vertical-align: top;">
          <div class="variations-list">
        [[File:NO3-.svg|center|frameless|106x106px|class=product-image|link=RS-485 Nitrates (NO3) Probe AT-SB-PROBENO3-P]]
         [[Dissolved Oxygen Probe AT-SB-PROBE-DO-P-C1|DO Probe C1]]
        <div style="margin-top: 10px;">'''[[Nitrates(NO3-)]]'''</div>
         [[Link_Pagina_2|DO Probe C2]]
        <div class="mw-customtoggle-4 variations-toggle" style="cursor: pointer;">
         [[Link_Pagina_3|DO Probe C3]]
            <div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
          </div>
                Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
            </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 class="product-item">[[File:Conductivity.svg|center|frameless|106x106px|class=product-image|link=Low Conductivity Probe AT-SB-PROBE-LC-P-C1]]'''[[Conductivity]]'''
</div> </div> ```
<span class="product-subtitle">Probes</span>
 
</div>
---


<div class="product-item">[[File:Multiparameter.svg|center|frameless|106x106px|class=product-image|link=Multiparameter Probe AT-SB-PROBE-MP-P-C1]]'''[[Multiparameter]]'''
### 2. O CSS Final (Common.css)
<span class="product-subtitle">Probes</span>
Para que a seta rode em todos os itens e o fundo cinzento desapareça de vez, usa este bloco:
</div>


<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-)]]'''
```css
<span class="product-subtitle">Probes</span>
/* Limpeza de estilos padrão do MediaWiki */
</div>
.product-item .mw-collapsible,
.product-item .mw-collapsible-content {
    background: transparent !important;
    border: none !important;
}


<div class="product-item">[[File:PH.svg|center|frameless|106x106px|class=product-image|link=RS-485 pH Probe AT-SB-PROBE-pH-P
/* Estilo da Seta */
]]'''[[pH Probe]]'''
.arrow-icon {
<span class="product-subtitle">Probes</span>
    transition: transform 0.3s ease;
</div>
    display: inline-block;
    vertical-align: middle;
}


</div>
/* Rotação da seta baseada no estado do toggle */
/* 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);
}


</div>
/* Estilo opcional para os links da lista */
.variations-list {
    padding-top: 5px;
    font-size: 0.95em;
    line-height: 1.6em;
}


== Accessories ==
== Accessories ==
Retrieved from "https://wiki.atronia.eu/index.php?title=Main_Page"