MastodonHelp/web/site/css/custard.css
pezcurrel a89d7dafb1 ...
2020-10-26 16:44:18 +01:00

440 lines
6.9 KiB
CSS

*:focus {
outline: none;
}
img {
max-width: 100%;
}
.intro, .introe {
margin: 0;
/* serve solo per gli schermi piccoli, definiti sotto */
}
.introe {
margin-bottom: 20px;
}
.statd {
color: magenta;
}
.ihead {
width: 100%;
text-align: center;
font-size: 14pt;
font-weight: bold;
background-color: black;/*#6f8a91;*/
color: white;
padding: 3px;
border-radius: 5px 5px 0 0;
}
.ihead a {
color: white;
text-decoration: none;
}
.ihead a:hover {
text-decoration: underline;
}
.ibody {
width: 100%;
font-size: 11pt;
line-height: 1.6;
background-color: #b7bec8;
color: black;
border-radius: 0 0 5px 5px;
margin-bottom: 20pt;
padding: 5px;
text-align: left;
}
.icol {
display: inline-block;
vertical-align: top;
width: 300px;
}
.idesc, .inote, .istat {
width: 100%;
max-height: 205px;
overflow: auto;
border: 1px solid #dbdee3;
border-radius: 0 3px 3px;
margin: 0;
margin-bottom: 1px;
padding: 6px;
padding-top: 2px;
line-height: 1.4;
}
.istat {
padding: 6px;
}
.inote {
width: 360px;
height: 148px;
}
.idesc p, .inote p {
margin: 0;
padding: 0;
}
.idesc ul, .idesc ol, .inote ul, .inote ol {
margin: 0;
}
.ilab, .idlab, .iblack, .iwarn, .igood, .ivgood, .ibad {
display: inline;
border-radius: 3px;
background-color: #dbdee3;
color: white;
padding: 0 6px 0 6px;
}
.idlab {
margin-top: 2px;
display: inline-block;
color: black;
border-radius: 3px 3px 0 0;
}
.ilab {
color: black;
}
.iblack {
background-color: black;
}
.iwarn {
background-color: orange;
}
.igood {
background-color: green;
}
.ivgood {
background-color: magenta;
}
.ibad {
background-color: darkred;
}
.null {
color: #777777;
}
.iimgc {
position: relative;
display: table;
margin-left: auto;
margin-right: auto;
margin-bottom: 3px;
}
.ifeat {
position: absolute;
top: 1px;
right: 1px;
}
.iimg {
display: block;
max-width: 100%;
max-height: 340px;
border-radius: 3px;
}
.aimg {
max-width: 240px;
max-height: 240px;
float: right;
border-radius: 3px;
/*padding: 3px;
border: 1px solid #dbdee3;*/
margin-top: 1px;
}
.abox {
margin-top: 3px;
overflow: auto;
}
.alab {
font-weight: bold;
}
.sdbox {
display: table;
border-spacing: 0;
border: 1px solid #cccccc;
margin-left: auto;
margin-right: auto;
margin-bottom: 20pt;
background-color: transparent;
border-radius: 5px;
padding: 3px;
}
.sdtit, .sdtitb {
text-align: center;
font-size: 13pt;
font-weight: bold;
height: 32px;
line-height: 32px;
background-color: #bbbbbb;
margin-bottom: 3px;
border-radius: 3px 3px 0 0;
}
.sdtitb {
border-radius: 0;
}
.sdrow, .sdcrow, .sdlrow, .sdlcrow {
display: block;
font-size: 0;
margin-bottom: 3px;
/*border: 1px solid black;*/
text-align: right;
}
.sdcrow, .sdlrow {
text-align: center;
}
.sdlrow {
height: 32px;
}
.sdlcrow {
margin: 0;
}
.sdlabel {
display: inline-block;
font-size: 11pt;
font-weight: bold;
/*min-width: 228px;*/
text-align: right;
padding-right: 3px;
height: 24px;
line-height: 24px;
vertical-align: middle;
white-space: nowrap;
}
.sdnolabel {
display: inline-block;
height: 24px;
line-height: 24px;
/*width: 228px;*/
}
.sdinput {
display: inline-block;
width: 200px;
text-align: left;
vertical-align: middle;
}
.sselect, .sselect100, .sinput, .ssubmit, .sbutton, .litbut, .litbuta {
background-color: white;
border: 1px solid darkgrey;
border-radius: 3px;
padding: 0;
padding-left: 2px;
font-size: 9pt;
height: 24px;
width: 200px;
}
.sselect, .sselect100 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: white url('../imgs/seldownarr.svg') 100% no-repeat;
}
.sselect100 {
width: 100%;
}
.ssubmit, .sbutton, .litbut {
background-color: #dddddd;
}
.ssubmit:hover, .sbutton:hover, .litbut:hover {
background-color: #eeeeee;
}
.ssubmit:active, .sbutton:active, .litbut:active {
background-color: #bbbbbb;
}
.litbuta { background-color: #bbbbbb }
.litbuta:hover { background-color: #cccccc }
.litbuta:active { background-color: #aaaaaa }
.ssubmit {
width: 100%;
height: 32px;
}
.litbut, .litbuta {
/*width: 32.746%;*/
width: 100%;
padding: 0 4px 0 4px;
height: 20px;
font-size: 6.5pt;
margin: 0;
}
.sckbox {
margin: 0;
top: 1px;
left: 1px;
position: relative;
}
.dida {
float: left;
border-radius: 3px 3px 0 0;
background-color: black;
color: white;
font-size: 10pt;
padding: 0 10px 0 10px;
}
.cbar, .abar {
width: 100%;
background-color: black;
border-collapse: collapse;
table-layout: fixed;
height: 16px;
font-size: 8.5pt;
line-height: 1.1;
}
.abar {
margin-bottom: 6px;
}
.cbar tr {
background-color: darkred;
}
.abar tr {
background-color: lightgrey;
}
.cbar td, .abar td {
text-align: center;
height: 32px;
color: white;
padding: 2px;
border: 1px solid black;
}
.abar td {
color: black;
}
.cbarok {
background-color: green;
}
#pagesel {
position: fixed;
top: 9px;
right: 9px;
z-index: 3;
}
.ghost {
display: block;
}
#bmenu {
display: none;
background-color: rgba(0,0,0,0.85);
color: white;
position: fixed;
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
margin: 0;
padding: 0;
z-index: 3;
}
#mctrl {
display: none;
}
.helpb {
position: absolute;
top: 20px;
right: 20px;
}
.helpb:hover {
cursor: pointer;
}
#debug {
display: none;
width: 100%;
height: 240px;
border: 1px solid #cccccc;
border-radius: 5px;
padding: 3px;
margin-bottom: 20pt;
}
#debug textarea {
width: 100%;
height: 234px;
border: 0;
padding: 6px;
background-color: transparent;
font-size: 9pt;
}
@media only screen and (max-width:540pt) {
.intro, .introe {
margin-left: 20px;
margin-right: 20px;
}
.sdbox {
width: 280px;
}
.sectcontm {
margin-top: 40px;
margin-bottom: 40px;
padding: 5px;
}
.sdnolabel {
display: none;
}
.sdlabel {
display: block;
width: 100%;
text-align: center;
height: auto;
line-height: normal;
vertical-align: middle;
}
.sdinput {
display: block;
width: 100%;
text-align: center;
height: auto;
line-height: normal;
vertical-align: middle;
}
.sselect, .sinput, .ssubmit, .sbutton, .litbut, .litbuta {
width: 100%;
}
.litbut, .litbuta {
margin: 0;
/*margin-bottom: 3px;*/
}
.ghost {
display: none;
}
.inote {
width: 100%;
height: auto;
max-height: 184px;
}
.aimg {
display: block;
float: none;
margin-bottom: 2px;
margin-left: auto;
margin-right: auto;
border: 0;
padding: 0;
}
#bmenu {
display: block;
}
#pagesel {
position: fixed;
top: auto;
right: auto;
left: 50%;
transform: translateX(-50%);
bottom: 9px;
text-align: center;
z-index: 4;
}
}
@media only screen and (max-width:400pt) {
}
@media (hover: none) {
/* questi 2 devon essere uguali a quelli nel blocco @media max-width:540pt
servono per evitare che su schermi touch GROSSI il pagesel venga mostrato
in alto a destra, sopra (o sotto?) il titolo nel menu*/
#bmenu {
display: block;
}
#pagesel {
position: fixed;
top: auto;
right: auto;
left: 50%;
transform: translateX(-50%);
bottom: 9px;
text-align: center;
z-index: 4;
}
}