CSS
#table_chess {
width: 100%;
max-width: 400px;
border: 2px solid #9A9A4E;
border-collapse: collapse;
}
#table_chess td {
width: 12.5%;
height: 46px;
text-align: center;
font-size: 28px;
text-shadow: 1px 1px 1px #999;
cursor: default;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.table_letters {
border: 2px solid transparent;
border-collapse: collapse;
}
.table_letters td {
width: 46px;
text-align: center;
font-size: 16px;
}
.table_numbers {
border: 2px solid transparent;
border-collapse: collapse;
margin-right: 6px;
}
.table_numbers td {
height: 46px;
font-size: 16px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.selected {
box-shadow: 0px 0px 6px rgb(170,210,183) inset;
background-color: #EEFDE3;
}
.b1 {
background-color:#ffffff;
}
.n1 {
background-color: rgba(192, 192, 192, 0.5);
}
.coronacion {
width: 100%;
text-align: center;
font-size: 24px;
text-shadow: 1px 1px 1px #999;
cursor: default;
user-select: none;
}
.coronacion td {
cursor: pointer;
}
.jugadas {
text-align: center;
margin: 4px;
border-bottom: 1px solid #ccc;
color: #757575;
font-weight: bold;
}
#movimientos {
height: 75px;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
color: #616161;
overflow-y: auto;
background-color: #fafafa;
padding: 4px;
column-count: 2;
}
HTML
El tablero de Ajedrez es una tabla
JAVASCRIPT
CSS
#div_editor {
padding: 5px;
border: 1px solid #999;
width: 300px;
height: 200px;
overflow-y: auto;
}
HTML
JAVASCRIPT
(este código es usado
aquí)
HTML
JAVASCRIPT
CSS
.nr_btn_add{
float: left;
font-weight: bold;
color: #000;
cursor: pointer;
font-size: 18px;
padding-left: 5px;
}
.nr_btn_add:hover{
text-shadow: 1px 1px 2px #999;
}
.nr_btn_close{
float: right;
font-weight: bold;
color: #000;
cursor: pointer;
font-size: 18px;
padding-right: 5px;
}
.nr_btn_close:hover{
text-shadow: 1px 1px 2px #999;
}
.textarea_nr{
width: 150px;
min-width: 150px;
max-width: 380px;
height: 150px;
min-height: 150px;
max-height: 400px;
border: none;
padding: 3px;
margin: 0px;
background-color: #FFFFCC;
}
JAVASCRIPT
CSS
.slides {
font-family: Helvetica, sans-serif;
display: none;
vertical-align: middle;
}
.dots {
cursor: pointer;
height: 13px;
width: 13px;
margin-top: 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dots:hover {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
HTML
JAVASCRIPT
CSS
.nav_panel {
vertical-align: top;
padding-top: 40px;
padding-left: 15px;
}
.nav_panel div {
padding: 6px 0 6px 6px;
}
#div_nav_panel {
border-left: 5px solid #ccc;
position: fixed;
cursor: pointer;
}
#div_nav_panel div:hover {
color: blue;
}
.active {
font-weight: bold;
color: #123456;
}
HTML
JAVASCRIPT