Ajout de custom scroll bar

This commit is contained in:
Ambulance Clerc
2022-10-15 23:30:35 +02:00
parent b5ba0d5391
commit 02085c46f7
2 changed files with 65 additions and 18 deletions

View File

@@ -1,3 +1,25 @@
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #ffffff #ffffff;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: black;
}
*::-webkit-scrollbar-thumb {
background-color: #ffffff;
border-radius: 15px;
border: 3px solid #ffffff;
}
:root{
--main-text-color: white;
--main-text-family: 'Source Sans Pro', sans-serif;

View File

@@ -1,6 +1,27 @@
<html>
<style>
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #ffffff #ffffff;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: black;
}
*::-webkit-scrollbar-thumb {
background-color: #ffffff;
border-radius: 15px;
border: 3px solid #ffffff;
}
body span{
color:white;
font-family: Quicksand, sans-serif;
@@ -28,6 +49,9 @@
margin: 5px;
}
.div_item ifram{
overflow: auto;
}
.div_item .vertical_content_item{
display: flex;
flex-direction: column;
@@ -44,7 +68,7 @@
}
.main_div{
height: 440px;
padding: 10px;
padding: 10px 10px 0px 10px;
width: 30%;
}
.main_div p{
@@ -80,11 +104,11 @@
<div class="div_container">
<div style="" class="div_item main_div">
<p style=""><a href="team_pdf" target="_blank">Équipages</a></p>
<iframe style="border:0;width:100%;height:100%;color:white" src="team"></iframe>
<iframe style="border:0;width:100%;height:350px;color:white" src="team"></iframe>
</div>
<div style="" class="div_item main_div">
<p style="">Communications importantes</p>
<iframe scrolling="no" style="border:0;width:100%;height:100%" src="op"></iframe>
<iframe style="border:0;width:100%;height:350px" src="op"></iframe>
</div>
<div style="" class="div_item main_div">
@@ -93,34 +117,35 @@
Agenda véhicules
</a>
</p>
<iframe style="border:0;width:100%;height:100%" src="vhc"></iframe>
<iframe style="border:0;width:100%;height:350px" src="vhc"></iframe>
</div>
<div style="" class="div_item main_div">
<p style="">
<div style="" class="div_item main_div vertical_content_item">
<div style="height: 170px;flex-grow: 1;">
<p style="">
<a href="https://calendar.infomaniak.com/?view=week" target="_blank">
Accueil
</a>
</p>
<iframe scrolling="no" style="border:0;width:100%;height:100%" src="rh"></iframe>
<iframe style="border:0;width:100%; height:175px" src="rh"></iframe>
</div>
<div style="height: 170px;flex-grow: 1;">
<p style="">Manifestations</p>
<iframe style="border:0;width:100%;height:175px;color:white" src="manif"></iframe>
</div>
</div>
<div style="" class="div_item main_div">
<p style="">
<a href="https://calendar.infomaniak.com/?view=week" target="_blank">
Tâches à faire
</a>
</p>
<iframe scrolling="no" style="border:0;width:100%;height:100%" src="task"></iframe>
<iframe style="border:0;width:100%;height:350px" src="task"></iframe>
</div>
<div style="" class="div_item main_div vertical_content_item">
<div style="height: 170px;flex-grow: 1;">
<p style=""><a href="https://www.google.com/maps/d/u/0/viewer?mid=1DJaPnRr_suT6vDo-YZ73PDbcVKKn4sqV&ll=46.25882553072212%2C6.971057708051243&z=14" target="_blank">Restrictions routières</a></p>
<iframe scrolling="no" style="border:0;width:100%;height:100%" src="road"></iframe>
</div>
<div style="height: 170px;flex-grow: 1;">
<p style="">Manifestations</p>
<iframe style="border:0;width:100%;height:100%;color:white" src="manif"></iframe>
</div>
<div style="" class="div_item main_div">
<p style=""><a href="https://www.google.com/maps/d/u/0/viewer?mid=1DJaPnRr_suT6vDo-YZ73PDbcVKKn4sqV&ll=46.25882553072212%2C6.971057708051243&z=14" target="_blank">Restrictions routières</a></p>
<iframe style="border:0;width:100%;height:350px;" src="road"></iframe>
</div>
</div>