platoo/public/css/platoo.css

1001 lines
12 KiB
CSS
Raw Normal View History

2020-05-19 17:14:33 +00:00
/*Généralité*/
html, button, input
{
color : rgb(40,50,80);
font-size : 0.8em;
font-family : Georgia, sans-serif;
}
input[value=button]
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
img
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
*{
box-sizing:border-box;
}
html
{
height : 99%;
margin:0px;
}
body
{
background-color : rgb(230,230,210);
margin: 0px;
height : 100%;
}
./*drag-allowed
{
display : flex;
align-content : space-between;
justify-content : space-between;
margin:0px;
position:relative;
width: 85%;
height : 100%;
}*/
/*.menu-chat
{
display : flex;
flex-direction : column;
align-content : space-between;
width : 15%;
position:fixed;
background-color:rgb(200,250,200);
background-attachment: fixed;
min-width: 150px;
}*/
/*.spinner
{
border:none;
background:none;
outline:none;
display:block;
font-size: 35px;
padding:0px;
}*/
/* Boxes */
.boxes
{
display : flex;
flex-direction : column;
flex-wrap : wrap;
align-content : space-between;
margin-right : 10px;
}
.box.actif
{
background-color: rgb(150,150,150);
border-radius: 12px;
max-height: 45px;
max-width:45px;
display: flex;
margin: 3px;
padding: 3px;
justify: space-between;
justify-content: top;
}
.pion-onbox
{
max-height: 90%;
margin: 3px;
z-index:1;
max-width : 90%;
}
/*
.pion-onbox:hover
{
height: 43px;
margin: 0px;
}*/
/*
.del-box
{
height: 15px;
margin-right: 0px;
}
.del-box:hover
{
height:17px;
margin-right:-2px
}*/
/* Boards */
.boards
{
display : flex;
flex-wrap: wrap;
justify-content:space-between;
}
.board-content.actif
{
max-width:100%;
max-height:100%;
margin: 0px;
padding: 0px;
display:flex;
align-items:flex-start;
}
.board
{
max-width:calc(100% - 20px);
max-height:100%;
margin:0px;
padding:0px;
position:relative;
overflow:invisible;
}
.board-svg.actif
{
position:relative;
min-width : 200px;
min-height : 200px;
max-width:100%;
max-height:100%;
top:0px;
left:0px;
}
.pion-onboard.actif
{
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index:1;
display:block;
/*overflow:scroll;*/
}
.board-action
{
width : 20px;
}
.bouton-board
{
height:15px;
margin-left:2px;
}
.bouton-board:hover
{
height:17px;
margin-left:0px;
}
.fleche:hover
{
height:15px;
margin-left:2px;
}
/* Bacs */
.bacs
{
display : flex;
flex-direction : column;
align-content : space-between;
}
.trash
{
border : 3px solid rgb(130,20,20);
height : 50px;
margin : 10px;
min-width : 90px;
min-height:50px;
}
.bac
{
margin : 10px;
margin-top:0px;
}
.bacBordure
{
border : 3px solid rgb(40,50,80);
min-height : 50px;
min-width : 90px;
display: flex;
flex-wrap: wrap;
}
.del-groupe, .edit-groupe, .edit-bac
{
height:15px;
margin-left:2px;
}
.del-groupe:hover, .edit-groupe:hover, .edit-bac:hover
{
height:17px;
margin-left:0px;
}
.pion-onbac
{
height: 35px;
z-index:1;
}
/*
.pion-onbac:hover
{
height: 38px;
margin-right:-3px;
}*/
.groupe-onbac.actif
{
background-color: rgb(150,150,150);
border-radius: 12px;
height: 40px;
max-width:100%;
display: flex;
align-items: center;
margin: 3px;
padding: 3px;
justify: space-between;
justify-content: center;
}
.nb-pions-onbac
{
font-size: 35px;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-left: 3px;
margin-top: 23px;
}
.inputN input
{
font-size: 35px;
background-color: rgba(0,0,0,0);
border: solid 0px rgb(200,0,0);
}
.inputLabelBac input
{
background-color: rgba(0,0,0,0);
border: solid 0px rgb(200,0,0);
}
.inputN, .inputLabelBac
{
display:none;
}
.boutons-groupe
{
display: flex;
flex-direction : column;
height: 100%;
justify-content: space-between;
}
/* arbre*/
.noeudAutre
{
fill:black;
r:7px;
}
.noeudCourant
{
fill:rgb(255,0,0);
r:7px;
}
.noeudAutre:hover
{
r:9px;
}
/* actif inactif*/
.inactif
{
display:none;
}
/* Barre de choix */
.barre-choix
{
display : flex;
margin-bottom : -3px;
padding: 2px;
justify-content: space-around;
}
.bouton-barre
{
display:none;
}
/* Chat */
.chat
{
border : 1px solid rgb(0,0,0);
}
#formChat
{
display:block;
height:20px;
margin:3px;
width:100%;
}
#texte-chat
{
display : block;
height: calc(100% - 30px);
overflow-y:scroll;
}
#texteChat
{
width:90%;
}
.message-chat
{
font-size:10px;
margin:0px;
padding:3px;
}
.head-chat
{
width:100%;
margin:0px;
}
.date-chat
{
font-style:italic;
text-align:right;
float:right;
}
.auteur-chat
{
font-weight:bold;
text-align:left;
float:left;
}
.texte-chat
{
margin:0px;
}
/* Menu */
.menu-rang1
{
display : flex;
justify-content: flex-start;
align-items : center;
flex-direction : row;
background-color:rgb(40,50,80);
justify-content:space-between;
}
.GpeOption
{
height:95%;
display:flex;
align-content:center;
align-items:center;
border: solid 1px rgb(255,255,255);
border-top:none;
border-bottom:none;
}
.button-menu
{
display:flex;
height:100%;
background-color:transparent;
border:none;
-moz-appearance:none;
margin:0px;
cursor:pointer;
align-items:center;
}
.button-menu:hover
{
background-color : rgb(255,255,255);
}
.img-menu
{
display:block;
height:100%;
color:rgb(204,204,204);
font-size:15px;
margin:0px;
font-weight:bold;
}
.button-menu > p
{
margin-top:0px;
height:30px;
}
#Btn-chatmenu > p > span
{
border:solid 5px rgb(204,204,204);
}
#Btn-annuler_delete_element
{
display:none;
}
/*.menu-rang2
{
display:none;
}*/
.sous-menu
{
display:none;
/*display:flex;*/
border:solid 1px rgb(0,0,0);
z-index:10;
background-color:rgb(255,255,255);
align-items:center;
justify-content:space-around;
padding:5px;
flex-wrap:wrap;
max-width:100%;
}
#add2>form
{
display:flex;
flex-direction:column;
}
#add2>form>*
{
margin-top:3px;
margin-bottom:3px;
}
.sous-menu > *
{
margin:5px;
}
.sous-menu > input[type=text]
{
height:20px;
}
#erase2, #raz2, #delete2, #menuchat2
{
flex-direction:row;
justify-content:flex-start;
}
#add2
{
flex-direction:row;
justify-content:space-around;
}
/***************************************************************************************************************************/
body
{
}
.barre-choix
{
display:flex;
flex-wrap:wrap;
position:fixed;
right:0px;
top:50px;
width:200px;
height:48px;
margin-bottom:2px;
background-color:rgb(200,10,80);
}
.menu-rang1
{
height:48px;
width:100%;
position:fixed;
top:0px;
left:0px;
margin-bottom:2px;
}
img.img-menu
{
height:48px;
width:48px;
}
.sous-menu
{
position:fixed;
top:48px;
left:0px;
min-height:50px;
}
.chat
{
position:fixed;
right:0px;
width:150px;
height:calc(100% - 75px);
top:75px;
}
.arbre
{
display:none;
position:fixed;
right:0px;
width:150px;
height:calc(100% - 75px);
top:75px;
overflow-y:scroll;
overflow-x:scroll;
}
.drag
{
position:relative;
left:0px;
top:50px;
height:calc(100% - 50px);
width:calc(100% - 150px);
display:flex;
flex-direction:row;
align-content : space-between;
justify-content : space-between;
}
.boxes
{
/*position:relative;*/
overflow-y:auto;
/*left:0px;*/
/*top:0px;*/
height:100%;
width:70px;
}
.bacs
{
/*right:0px;*/
overflow-y:auto;
width:200px;
height:100%;
min-width:200px;
/*top:0px;*/
}
.boards
{
/*position:relative;*/
overflow-y:auto;
/*left:70px;*/
/*width:calc(100% - 270px);*/
height:100%;
/*top:0px;*/
}
.board-content
{
max-height:98%;
}
#BB-arbre, #BB-chat
{
display:block;
}
/***************************************************************************************************************************/
@media (max-width:800px)
{
.chat
{
display:none;
position:fixed;
right:0px;
width:200px;
height:calc(100% - 100px);
top:100px;
}
.drag
{
width:100%;
}
.bacs
{
margin-top:50px;
width:200px;
height:calc(100% - 50px);
min-width:200px;
}
.barre-choix
{
display:flex;
flex-wrap:wrap;
position:fixed;
right:0px;
top:50px;
width:200px;
height:48px;
margin-bottom:2px;
background-color:rgb(200,10,80);
}
/*#BB-bacs2, #BB-chat2
{
display:block;
}*/
#BB-bacs, #BB-chat, #BB-arbre
{
display:block;
}
}
/***************************************************************************************************************************/
@media (max-width:700px)
{
.menu-rang1
{
height:23px;
}
img.img-menu
{
height:21px;
width:21px;
}
.sous-menu
{
position:fixed;
top:23px;
left:0px;
min-height:24px;
}
.chat
{
height:calc(100% - 50px);
top:50px;
}
.drag
{
top:25px;
height:calc(100% - 25px);
}
.barre-choix
{
top:25px;
height:23px;
}
.bacs
{
margin-top:25px;
height:calc(100% - 25px);
}
p.img-menu
{
font-size:10px;
padding-top:5px;
}
}
/***************************************************************************************************************************/
@media (max-width:600px)
{
.boxes
{
display:none;
width:200px;
flex-direction:column;
flex-wrap:wrap;
order:3;
margin-top:50px;
height:calc(100% - 50px);
width:150px;
}
.barre-choix
{
width:150px;
}
.bacs
{
width:150px;
min-width:150px;
}
.chat
{
width:150px;
}
.trash
{
height : 28px;
margin : 7px;
min-width : 50px;
min-height:28px;
}
.bac
{
margin : 7px;
margin-top:0px;
}
.bacBordure
{
min-height : 28px;
min-width : 50px;
}
.del-groupe, .edit-groupe, .edit-bac
{
height:10px;
margin-left:2px;
}
.del-groupe:hover, .edit-groupe:hover, .edit-bac:hover
{
height:12px;
margin-left:0px;
}
.pion-onbac
{
height: 20px;
}
.groupe-onbac
{
border-radius: 8px;
height: 25px;
max-width:100%;
margin: 2px;
padding: 2px;
}
.nb-pions-onbac
{
font-size: 20px;
margin-left: 2px;
margin-top: 15px;
}
.inputN input
{
font-size: 20px;
}
/*#BB-boxes3, #BB-bacs3, #BB-chat3
{
display:block;
}
#BB-bacs2, #BB-chat2
{
display:none;
}*/
#BB-boxes
{
display:block;
}
}
/***************************************************************************************************************************/
@media (max-width:400px)
{
.box
{
border-radius: 8px;
max-height: 30px;
max-width:30px;
display: flex;
margin: 2px;
padding: 2px;
}
.barre-choix
{
height:23px;
width:100%;
position:fixed;
top:0px;
left:0px;
margin-bottom:2px;
}
.drag
{
position:relative;
left:0px;
top:25px;
height:calc(100% - 25px);
width:100%;
flex-direction:column;
justify-content : flex-start;
}
.boxes
{
/*display:flex;*/
width:100%;
max-height:75px;
flex-direction:row;
order:0;
margin-top:0px;
display:none;
}
.bacs
{
width:100%;
max-height:75px;
margin-top:0px;
min-width:0px;
flex-direction:row;
flex-wrap:wrap;
/*display:none;*/
}
.bacBordure
{
min-width : 50px;
}
.trash
{
min-width : 50px;
}
.boards
{
order:2;
}
.chat
{
position:fixed;
width:150px;
top:auto;
bottom:0px;
right:0px;
height:200px;
/*display:block;*/
z-index:30;
background-color: rgb(230,230,210);
}
.menu-rang1
{
display:none;
top:25px;
height:auto;
max-height:50px;
flex-wrap:wrap;
margin:0px;
}
.GpeOption
{
height:23px;
margin-bottom:1px;
margin-top:1px;
border-top: solid 1px rgb(255,255,255);
border-bottom: solid 1px rgb(255,255,255);
}
.sous-menu
{
top:75px;
}
/*#BB-menu4, #BB-boxes4, #BB-bacs4, #BB-chat4
{
display:block;
}
#BB-boxes3, #BB-bacs3, #BB-chat3
{
display:none;
}*/
#BB-menu, #BB-chat4
{
display:block;
}
#BB-chat
{
display:none;
}
}