Files
agility-maps-2-judge-edition/static/ui/app/css/interface.css
T
2026-05-08 19:50:22 +02:00

664 lines
14 KiB
CSS

body {
background: #555555;
margin: 0;
padding: 0;
font-size: 10px;
font-family: Tahoma;
color: #dddddd;
background-image: url("/static/public/fondu.png");
background-repeat: repeat-x;
}
#logo {
position: absolute;
top: 0px;
left: 16px;
z-index: 100;
}
#titreLogo {
position: absolute;
top: 7px;
left: 700px;
z-index: 100;
}
#medaille {
position: absolute;
top: 55px;
left: 53px;
z-index: 100;
}
.barreTitre {
font-family: Georgia;
height: 5px;
width: 100%;
position: absolute;
color: #99ddff;
padding-left: 80px;
font-size: 20px;
z-index: 10;
}
.titleText {
float: left;
font-size: 20px;
}
.subtitle {
float: left;
font-size: 10px;
}
.barreOptions {
height: 61px;
/*width: 900px;*/
width: 830px;
position: absolute;
float: left;
left: 0px;
padding-left: 120px;
top: 26px;
font-size: 11px;
z-index: 10;
}
#blocOParam {
text-align: center;
}
#contentBlocOParam {
margin-top: -3px;
text-align: center;
}
#blocOObst {
text-align: center;
}
#contentBlocOObst {
margin-top: -3px;
text-align: center;
}
#blocOTrj {
text-align: center;
}
#contentBlocOTrj {
margin-top: -3px;
text-align: center;
}
#blocOCon {
text-align: center;
}
#contentBlocOCon {
margin-top: -3px;
text-align: center;
}
#blocOCou {
text-align: center;
}
#contentBlocOColor {
margin-top: -3px;
text-align: center;
}
#blocOSav {
text-align: center;
}
#contentBlocOSav {
margin-top: -3px;
text-align: center;
}
#blocOImp {
text-align: center;
}
#contentBlocOImp {
margin-top: -3px;
text-align: center;
}
#blocOLangue {
text-align: center;
}
#contentBlocOLangue {
margin-top: -3px;
text-align: center;
}
.blocOptions:hover,
.blocOptionsSel {
color: #99ddff;
border-left: solid #444444 1px;
border-right: solid #444444 1px;
border-top: solid #444444 1px;
float: left;
position: relative;
height: 55px;
margin-top: -5px;
padding-top: 5px;
width: 85px;
background-image: -webkit-linear-gradient(top, #aaaaaa 0%, #727272 100%);
background-image: -moz-linear-gradient(top, #aaaaaa 0%, #727272 100%);
background-image: -ms-linear-gradient(top, #aaaaaa 0%, #727272 100%);
background-image: -o-linear-gradient(top, #aaaaaa 0%, #727272 100%);
background-image: linear-gradient(top, #aaaaaa 0%, #727272 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAAAAA',endColorstr='#777777', GradientType=0);
}
.blocOptions {
border-left: solid #444444 1px;
border-right: solid #444444 1px;
border-top: solid #444444 1px;
float: left;
position: relative;
height: 55px;
width: 85px;
padding-top: 5px;
background-image: -webkit-linear-gradient(top, #888888 0%, #555555 100%);
background-image: -moz-linear-gradient(top, #888888 0%, #555555 100%);
background-image: -ms-linear-gradient(top, #888888 0%, #555555 100%);
background-image: -o-linear-gradient(top, #888888 0%, #555555 100%);
background-image: linear-gradient(top, #888888 0%, #555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555',endColorstr='#888888', GradientType=0);
}
.barreInfo {
height: 30px;
width: 900px;
background: #777777;
position: absolute;
float: left;
left: 0px;
top: 58px;
z-index: 12;
padding-left: 120px;
background-image: -webkit-linear-gradient(top, #777777 0%, #555555 100%);
background-image: -moz-linear-gradient(top, #777777 0%, #555555 100%);
background-image: -ms-linear-gradient(top, #777777 0%, #555555 100%);
background-image: -o-linear-gradient(top, #777777 0%, #555555 100%);
background-image: linear-gradient(top, #777777 0%, #555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555',endColorstr='#727272', GradientType=0);
}
.barreOutil {
position: absolute;
bottom: 0px;
top: 88px;
width: 120px;
left: 0px;
background: #777777;
height: 600px;
z-index: 8;
background-image: -webkit-linear-gradient(
right top,
#555555 0%,
#727272 100%
);
background-image: -moz-linear-gradient(right top, #555555 0%, #727272 100%);
background-image: -ms-linear-gradient(right top, #555555 0%, #727272 100%);
background-image: -o-linear-gradient(right top, #555555 0%, #727272 100%);
background-image: linear-gradient(right top, #555555 0%, #727272 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#727272',endColorstr='#555555', GradientType=1);
}
#barreOutilCache {
position: absolute;
bottom: 0px;
top: 88px;
width: 15px;
left: 95px;
background: #777777;
z-index: 8;
color: white;
background-image: -webkit-linear-gradient(
right top,
#555555 0%,
#727272 100%
);
background-image: -moz-linear-gradient(right top, #555555 0%, #727272 100%);
background-image: -ms-linear-gradient(right top, #555555 0%, #727272 100%);
background-image: -o-linear-gradient(right top, #555555 0%, #727272 100%);
background-image: linear-gradient(right top, #555555 0%, #727272 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#727272',endColorstr='#555555', GradientType=1);
}
#barreTitreCache {
height: 15px;
width: 100%;
background: #777777;
position: absolute;
float: left;
left: 0px;
top: 88px;
z-index: 1000;
background-image: -webkit-linear-gradient(top, #777777 0%, #555555 100%);
background-image: -moz-linear-gradient(top, #777777 0%, #555555 100%);
background-image: -ms-linear-gradient(top, #777777 0%, #555555 100%);
background-image: -o-linear-gradient(top, #777777 0%, #555555 100%);
background-image: linear-gradient(top, #777777 0%, #555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555',endColorstr='#727272', GradientType=0);
}
.blocOutil {
margin: 5px;
}
.blocInfo {
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: solid #444444 1px;
float: top;
position: relative;
}
.blocInfo:hover {
background: #999999;
}
.titreBloc {
width: 100%;
float: top;
text-align: center;
border-top: solid #444444 1px;
}
.contenu {
position: relative;
float: left;
}
.boutonOutil {
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
color: white;
font-size: 10px;
background: #999999;
border: solid #444444 1px;
/*text-decoration: none;*/
margin: 1px;
height: 50px;
width: 50px;
}
.ligneBarreOutil {
width: 100%;
}
.checkboxTable {
float: left;
text-align: left;
}
.boutonOutil:hover {
border: solid #99ddff 1px;
}
.haie {
background-image: url("/static/public/icons/obstacles/jump.png");
}
.poubelle {
background-image: url("/static/public/icons/trash.png");
background-repeat: no-repeat;
}
.num {
background-image: url("/static/public/icons/numbers/num1.png");
background-repeat: no-repeat;
}
.num2 {
background-image: url("/static/public/icons/numbers/num2.png");
background-repeat: no-repeat;
}
.num3 {
background-image: url("/static/public/icons/numbers/num3.png");
background-repeat: no-repeat;
}
.oxer {
background-image: url("/static/public/icons/obstacles/double-jump.png");
}
.mur {
background-image: url("/static/public/icons/obstacles/wall.png");
}
.longueur {
background-image: url("/static/public/icons/obstacles/long-jump.png");
}
.table {
background-image: url("/static/public/icons/obstacles/table.png");
}
.tunnel {
background-image: url("/static/public/icons/obstacles/tunnel.png");
}
.tunnel3 {
background-image: url("/static/public/icons/obstacles/tunnel3.png");
}
.cho {
background-image: url("/static/public/icons/obstacles/sock.png");
}
.slalom {
background-image: url("/static/public/icons/obstacles/slalom.png");
}
.slalom6 {
background-image: url("/static/public/icons/obstacles/slalom6.png");
}
.pne {
background-image: url("/static/public/icons/obstacles/tire.png");
}
.pal {
background-image: url("/static/public/icons/obstacles/A.png");
}
.bal {
background-image: url("/static/public/icons/obstacles/balance.png");
}
.pas {
background-image: url("/static/public/icons/obstacles/run.png");
}
.zoomP {
background-image: url("/static/public/icons/zoom/plus.png");
background-repeat: no-repeat;
background-position: center;
}
.zoomM {
background-image: url("/static/public/icons/zoom/minus.png");
background-repeat: no-repeat;
background-position: center;
}
.newTrj {
background-image: url("/static/public/icons/newtrj.png");
background-repeat: no-repeat;
background-position: center;
}
.dMilieu {
background-image: url("/static/public/icons/driver/mr.png");
background-repeat: no-repeat;
}
.gMilieu {
background-image: url("/static/public/icons/driver/ml.png");
background-repeat: no-repeat;
}
.dLong {
background-image: url("/static/public/icons/driver/lr.png");
background-repeat: no-repeat;
}
.gLong {
background-image: url("/static/public/icons/driver/ll.png");
background-repeat: no-repeat;
}
.dAvant {
background-image: url("/static/public/icons/driver/fr.png");
background-repeat: no-repeat;
}
.gAvant {
background-image: url("/static/public/icons/driver/fl.png");
background-repeat: no-repeat;
}
.neutre {
background-image: url("/static/public/icons/driver/neutral.png");
background-repeat: no-repeat;
}
.chien {
background-image: url("/static/public/icons/driver/dog.png");
background-repeat: no-repeat;
}
option {
font-size: 12px;
font-family: Tahoma;
background-color: #666666;
border: solid #444444 1px;
color: #dddddd;
}
select {
font-size: 12px;
font-family: Tahoma;
background-color: #666666;
border: solid #444444 1px;
color: #dddddd;
width: 105px;
}
input {
font-size: 12px;
font-family: Tahoma;
}
input[type="text"] {
background-color: #666666;
border: solid #111111 1px;
color: #dddddd;
float: left;
position: relative;
width: 100px;
margin-bottom: 3px;
}
.ligneCheckboxTable:hover {
background-color: grey;
}
.txtOption {
font-size: 10px;
font-family: Tahoma;
float: top;
position: relative;
padding-left: 4px;
padding-right: 4px;
}
.txtCheckbox {
float: left;
text-align: left;
}
.boutonImage {
font-size: 10px;
font-family: Tahoma;
float: top;
position: relative;
width: 100%;
padding: 4px;
margin-top: 4px;
}
.txtFb {
background-color: #ccc;
padding: 5px;
margin: 5px;
border: solid #444444 1px;
color: #dddddd;
}
#blocInfoLangueFr {
display: none;
}
#blocInfoLanguePt {
display: none;
}
#blocInfoLangueEn {
display: none;
}
#blocInfoLangueEs {
display: none;
}
#blocInfoLangueDe {
display: none;
}
#blocInfoLangueIt {
display: none;
}
#blocInfoLanguePl {
display: none;
}
#blocInfoLangueCt {
display: none;
}
#blocInfoLangueJp {
display: none;
}
#blocInfoLangueSe {
display: none;
}
#blocInfoLangueFi {
display: none;
}
#blocInfoLangueDa {
display: none;
}
#blocInfoLangueNo {
display: none;
}
#blocInfoLangueHu {
display: none;
}
#blocInfoLangueRu {
display: none;
}
#blocInfoColor {
display: none;
}
#blocInfoColorPerso {
display: none;
}
#blocInfoTraj {
display: none;
}
#blocInfoParam {
display: none;
}
#blocInfoDim2 {
display: none;
}
#blocInfoDim1 {
display: none;
}
#blocInfoSauvegarde {
display: none;
}
#blocInfoCon {
display: none;
}
.noStyle {
margin: 0;
padding: 0;
float: left;
display: block;
}
#contentCanvas {
position: absolute;
top: 90px;
left: 120px;
z-index: 340;
/*padding-top: 90px;
padding-left: 120px;*/
}
#canvas {
background: #ffffff;
z-index: 350;
}
.imageExport {
position: absolute;
left: 0px;
top: 0px;
visibility: visible;
z-index: 200;
}
#canvasimg {
visibility: hidden;
position: absolute;
left: 0px;
top: 40px;
z-index: 1000;
}
.imageNotExport {
display: none;
}
.fondExport {
color: white;
text-align: center;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
visibility: visible;
/* z-index: 400; */
z-index: 150;
}
.fondNoExport {
visibility: hidden;
}
.exempleCouleur {
width: 20px;
height: 15px;
background-color: white;
float: left;
display: block;
position: relative;
margin-left: 6px;
margin-right: 6px;
}
#texte {
position: relative;
float: left;
}
.colorSample {
width: 20px;
height: 15px;
float: left;
margin-right: 5px;
margin-left: 5px;
border: solid black 1px;
}
.miniColorSample {
width: 10px;
height: 15px;
float: left;
}
#color-white, #color-white-2 {
background-color: rgba(255, 255, 255, 1);
}
#color-blue, #color-blue-2 {
background-color: rgba(211, 228, 240, 1);
}
#color-green, #color-green-2 {
background-color: rgba(204, 255, 204, 1);
}
#color-blueObst {
background-color: rgba(34, 170, 255, 1);
}
#color-redObst {
background-color: rgba(204, 51, 0, 1);
}
#color-greyObst {
background-color: rgba(221, 221, 221, 1);
}
#color-black {
background-color: rgba(30, 30, 30, 1);
}
#color-pink {
background-color: rgba(249, 141, 228, 1);
}
#color-grey-con {
background-color: rgba(221, 221, 221, 1);
}
#color-red-con {
background-color: rgba(204, 51, 0, 1);
}
#color-blue-con {
background-color: rgba(34, 170, 255, 1);
}
#outils {
display: block;
}
#contentCanvas-col1 {
float:left;
}
#contentCanvas-col2 {
/* position: absolute; */
/* top: 0px; */
/* left: 870px; */
/* z-index: 340; */
width: 150px;
/*border: 1px solid white;*/
padding-left:10px;
overflow: hidden;
}