Skip to content
Snippets Groups Projects
Commit 0032448f authored by Vincent Nivoliers's avatar Vincent Nivoliers
Browse files

improved styling for css breakpoints

parent 2522fde8
No related branches found
No related tags found
No related merge requests found
......@@ -299,6 +299,12 @@ script {
resize : vertical ;
}
@media(max-width:1200px){
.note {
height : 15em ;
}
}
#local-notes-panel .panel-title {
padding-top : 9px ;
padding-bottom : 8px ;
......@@ -343,6 +349,46 @@ script {
border-bottom : 0 ;
}
@media(min-width:768px){
#tab_mv,
#tab_var,
#tab_ctrl,
#tab_test,
#tab_arth,
#tab_str
{
padding-left : 5px ;
padding-right : 5px ;
}
}
@media(min-width:992px){
#tab_mv,
#tab_var,
#tab_ctrl,
#tab_test,
#tab_arth,
#tab_str
{
padding-left : 10px ;
padding-right : 10px ;
}
}
@media(min-width:1200px){
#tab_mv,
#tab_var,
#tab_ctrl,
#tab_test,
#tab_arth,
#tab_str
{
padding-left : 15px ;
padding-right : 15px ;
}
}
.no-top-border-lists > .list-group > .list-group-item:first-child {
border-top : 0 ;
}
......
body {
font-family: arial;
font-size: 10pt;
text-align: center;
min-width: 1076px;
}
.shadow {
-moz-box-shadow: 0px 0px 4px #b4b4c4;
-webkit-box-shadow: 0px 0px 4px #b4b4c4;
box-shadow: 0px 0px 4px #b4bac3;
border: 1px solid #acacac;
}
.gradient {
background-color: rgb(222,222,222) ;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(222,222,222)),
color-stop(1, rgb(245,245,245))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(222,222,222) 0%,
rgb(245,245,245) 100%
);
}
.rounded {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.log {
clear: left;
text-align: left;
padding: 20px;
width: auto;
display: none;
}
.explorer {
margin: auto ;
min-width: 1024px ;
display: table ;
}
ul.Map {
margin-top: 5px ;
margin-right: 5px ;
padding: 5px;
list-style: none ;
width: 768px;
margin-bottom: 5px;
float: left ;
display: table-cell ;
}
.Map li {
float: left;
}
.Map li a {
width: 256px ;
height: 256px ;
position: relative;
display: block;
}
.Map li a .tile, .Map li a .empty_tile {
width: 256px;
height: 256px;
border: 0px;
display: block;
position: relative ;
}
.Map li a .tile {
background-color: #000;
}
.Map li a #tile_top,
.Map li a #tile_left,
.Map li a #tile_right,
.Map li a #tile_bottom
{
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
z-index: 0 ;
}
.Map li a #tile_center {
z-index: 1 ;
}
.Map li a #tile_top {
border-top-right-radius: 50px ;
border-top-left-radius: 50px ;
}
.Map li a #tile_left {
border-top-left-radius: 50px ;
border-bottom-left-radius: 50px ;
}
.Map li a #tile_right {
border-top-right-radius: 50px ;
border-bottom-right-radius: 50px ;
}
.Map li a #tile_bottom {
border-bottom-right-radius: 50px ;
border-bottom-left-radius: 50px ;
}
.arrow, .boussole {
-moz-border-radius: 32px ;
-webkit-border-radius: 32px ;
border-radius: 32px ;
position: absolute ;
left: 96px ;
bottom: 96px ;
width: 64px ;
height: 64px ;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
z-index: 2 ;
}
.boussole:after {
content: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_overlay.png') ;
}
.boussole[transform=r0] {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_all.png') 0 0 ;
}
.boussole[transform=r1] {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_all.png') -64px 0 ;
}
.boussole[transform=r2] {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_all.png') -128px 0;
}
.boussole[transform=r3] {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_all.png') -192px 0;
}
.boussole[transform="r0_flip"] {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_all.png') 0 -64px;
}
.boussole[transform="r1_flip"] {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_all.png') -64px -64px;
}
.boussole[transform="r2_flip"] {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_all.png') -128px -64px;
}
.boussole[transform="r3_flip"] {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_all.png') -192px -64px;
}
.Map li a:hover .arrow_top,
.Map li a:hover .arrow_left,
.Map li a:hover .arrow_right,
.Map li a:hover .arrow_bottom
{
-moz-box-shadow: 0px 0px 30px #7abfe7;
-webkit-box-shadow: 0px 0px 30px #7abfe7;
box-shadow: 0px 0px 30px #7abfe7;
}
.arrow_top {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/arrow_all.png') -64px -64px;
}
.arrow_left {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/arrow_all.png') -192px -64px;
}
.arrow_right {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/arrow_all.png') -128px -64px;
}
.arrow_bottom {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/arrow_all.png') 0 -64px;
}
.Map li a:hover .arrow_top {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/arrow_all.png') -64px 0;
}
.Map li a:hover .arrow_left {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/arrow_all.png') -192px 0;
}
.Map li a:hover .arrow_right {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/arrow_all.png') -128px 0;
}
.Map li a:hover .arrow_bottom {
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/arrow_all.png') 0 0;
}
.notes {
margin-top: 5px ;
margin-bottom: 5px ;
text-align: left ;
width: 200px ;
height: 758px ;
padding-left: 10px ;
padding-right: 10px ;
padding-bottom: 10px ;
display: table ;
float: left ;
}
.note {
resize: horizontal ;
width: 200px ;
min-width: 200px ;
height: 702px ;
}
.notes h3 {
float: left ;
color: #0c4b8f ;
}
.button {
cursor: pointer ;
-moz-box-shadow: inset 0px 0px 2px #000;
-webkit-box-shadow: inset 0px 0px 2px #000;
box-shadow: inset 0px 0px 2px #000;
background-color: #5fb1e1 ;
background: -moz-linear-gradient(top, #5fb1e1, #2f82c8);
background: -webkit-gradient(linear,left top, left bottom, from(#5fb1e1), to(#2f82c8));
}
#erase_notes {
margin-top: 10px ;
margin-bottom: 10px ;
height: 20px ;
padding-top: 4px ;
padding-bottom: 2px ;
padding-left: 10px ;
padding-right: 10px ;
border-radius: 5px ;
float: right ;
}
.help {
width: 1035px ;
padding: 20px ;
text-align: left ;
display: none ;
}
.help p {
width: auto ;
text-indent: 1em ;
}
.help h1 {
text-align: center ;
color: #000 ;
}
.help h2 {
clear: left ;
color: #0c4b8f ;
}
.example {
float: left ;
margin-bottom: 1em ;
margin-right: 1em ;
clear: left ;
}
.boussole_fake {
width: 64px ;
height: 64px ;
background: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_all.png') 0 0 ;
}
.boussole_fake:after {
content: url('http://alice.loria.fr/~nivoliev/Explosurf/Images/boussole_overlay.png') ;
}
.tile_example {
width: 532px ;
margin: auto ;
clear: left ;
}
.tile_fake {
width: 256px ;
height: 256px ;
position: relative ;
float: left ;
margin-left: 10px ;
margin-bottom: 10px ;
}
.arrow_fake {
width: 64px ;
height: 64px ;
float: left ;
}
......@@ -524,22 +524,22 @@
<div class="panel-heading tabbed-heading">
<ul class="nav nav-tabs">
<li class="active">
<a class="glyphicon glyphicon-move" data-toggle="tab" href=#mv_cmds></a>
<a id="tab_mv" class="glyphicon glyphicon-move" data-toggle="tab" href=#mv_cmds></a>
</li>
<li>
<a class="glyphicon glyphicon-pencil" data-toggle="tab" href=#var_cmds></a>
<a id="tab_var" class="glyphicon glyphicon-pencil" data-toggle="tab" href=#var_cmds></a>
</li>
<li>
<a class="glyphicon glyphicon-random" data-toggle="tab" href=#ctrl_cmds></a>
<a id="tab_ctrl" class="glyphicon glyphicon-random" data-toggle="tab" href=#ctrl_cmds></a>
</li>
<li>
<a class="glyphicon glyphicon-ok" data-toggle="tab" href=#test_cmds></a>
<a id="tab_test" class="glyphicon glyphicon-ok" data-toggle="tab" href=#test_cmds></a>
</li>
<li>
<a class="glyphicon glyphicon-plus" data-toggle="tab" href=#arth_cmds></a>
<a id="tab_arth" class="glyphicon glyphicon-plus" data-toggle="tab" href=#arth_cmds></a>
</li>
<li>
<a class="glyphicon glyphicon-font" data-toggle="tab" href=#txt_cmds></a>
<a id="tab_str" class="glyphicon glyphicon-font" data-toggle="tab" href=#txt_cmds></a>
</li>
</ul>
<a class="glyphicon glyphicon-remove hidden"
......
No preview for this file type
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment