Paul Schneider
ca98af1611
La disposition des elements de la page est maintenant commune à tous les thèmes. On pourra la spécialiser, mais le depart se fait sur une base agréable, en couleurs non spécifiées (les couleurs par défaut du navigateur), sauf pour les messages d'erreur qui sont définis en rouge, et ala responsive design. * style.css: * style.css: Ne contient plus que ce qui concerne les couleurs et images * font-awesome.css: Il parait plus sage de spécifier des Url absolues vers les polices de caractère. * style.css: Réccupère du thème sombre tout ce qui ne concerne pas la couleur, pour en faire profiter tous les thèmes. * Web.csproj: Ajoute le style du thème clair au projet. * style.tablesorter.css: ce fichier est obsolete et va disparaitre.
430 lines
7.3 KiB
CSS
430 lines
7.3 KiB
CSS
|
|
body {
|
|
font-family: 'Arial', cursive;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
body.loading {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body.loading .modal {
|
|
display: block;
|
|
}
|
|
.rate {
|
|
border-radius:1em;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
header {
|
|
transition: margin 2s, padding 2s;
|
|
padding: 0;
|
|
margin: 0;
|
|
padding-top: 2em;
|
|
padding-bottom:2em;
|
|
display: block;
|
|
}
|
|
|
|
header h1, header a {
|
|
transition:padding 2s;
|
|
margin:0; padding:1em;
|
|
}
|
|
|
|
nav {
|
|
transition: margin 2s, padding 2s;
|
|
margin: 2em;
|
|
padding: 2em;
|
|
display: block;
|
|
border-radius:1em;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
main {
|
|
transition: margin 2s, padding 2s;
|
|
margin: 2em;
|
|
padding: 2em;
|
|
display: block;
|
|
border-radius:1em;
|
|
}
|
|
main video, main img {
|
|
max-width:100%;
|
|
max-height:75%;
|
|
padding: 1em;
|
|
}
|
|
|
|
footer {
|
|
transition: margin 2s, padding 2s;
|
|
margin: 0;
|
|
margin-top: 2em;
|
|
padding: 2em;
|
|
display: block;
|
|
clear: both;
|
|
font-size: smaller;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
footer p { display:inline-block; }
|
|
|
|
footer img { max-height: 3em; vertical-align: middle; }
|
|
|
|
a img, h1 img, .menuitem img { vertical-align: middle; }
|
|
|
|
fieldset {
|
|
border-radius:5px; border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
aside {
|
|
display: inline-block;
|
|
}
|
|
|
|
ul.preview li:nth-child(-n+10) {
|
|
display:inline;
|
|
font-size:xx-small;
|
|
}
|
|
|
|
ul.preview li:nth-child(n) {
|
|
display:none;
|
|
}
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: rgba( 255, 255, 255, .8 )
|
|
url('/App_Themes/images/FhHRx.gif')
|
|
50% 50%
|
|
no-repeat;
|
|
overflow: auto;
|
|
}
|
|
|
|
.dispmodal {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.postpreview {
|
|
display: inline-block;
|
|
max-width: 40em;
|
|
padding: 1em;
|
|
border-radius:1em;
|
|
}
|
|
.postpreview video, .postpreview img {
|
|
max-width: 100%;
|
|
padding: 1em;
|
|
}
|
|
.post {
|
|
display:block;
|
|
padding: 1em;
|
|
border-radius:1em;
|
|
}
|
|
|
|
.fullwidth { width: 100%; }
|
|
textarea.fullwidth { min-height:10em; }
|
|
|
|
.thanks {
|
|
max-width: 10%;
|
|
text-align: center;
|
|
font-size:smaller;
|
|
display:inline;
|
|
bottom:0;
|
|
}
|
|
.panel {
|
|
display:inline-block;
|
|
}
|
|
.panel,.bshpanel, aside {
|
|
border-radius: 1em;
|
|
padding: 1em;
|
|
}
|
|
.spanel {
|
|
max-width: 18em;
|
|
display: inline-block;
|
|
padding: .3em;
|
|
}
|
|
.xspanel {
|
|
max-width:13em;
|
|
display: inline-block;
|
|
padding:.2em;
|
|
}
|
|
.xxspanel {
|
|
max-width:7em;
|
|
display: inline-block;
|
|
padding:.1em;
|
|
}
|
|
|
|
.hint {
|
|
display: inline;
|
|
font-style: italic;
|
|
font-size: smaller;
|
|
}
|
|
.hint::before {
|
|
content: "(";
|
|
}
|
|
.hint::after {
|
|
content: ")";
|
|
}
|
|
|
|
.usertitleref {
|
|
border-radius: 1em;
|
|
font-family: 'Arial', cursive;
|
|
padding: 1em;
|
|
}
|
|
.editable {
|
|
margin: .5em;
|
|
min-height:1em;
|
|
border-radius: 1em;
|
|
border-style: dashed;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.notification {
|
|
font-size: large;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
padding: 1em;
|
|
border-radius:1em;
|
|
margin:1em;
|
|
padding:1em;
|
|
}
|
|
.error, #error {
|
|
font-size: large;
|
|
}
|
|
.hidden { display:none; }
|
|
|
|
|
|
|
|
.iconsmall { max-height: 1.3em; max-width: 1.3em; }
|
|
|
|
.photo { width: 100%; }
|
|
.blogbanner { float: left; top:0; }
|
|
.subtitle { font-size:small; font-style: italic; }
|
|
|
|
nav li { display: inline-block; }
|
|
|
|
footer a {
|
|
border-radius:1em;
|
|
padding:1em;
|
|
}
|
|
|
|
footer p { display:inline-block; }
|
|
|
|
footer img { max-height: 3em; vertical-align: middle; }
|
|
a img, h1 img, .menuitem img { vertical-align: middle; }
|
|
|
|
|
|
legend {
|
|
border-radius:5px;
|
|
padding:.5em;
|
|
}
|
|
|
|
#copyr { text-align: center; display: block; }
|
|
|
|
#gspacer {
|
|
border-radius:1em;
|
|
margin:1em; padding:1em;
|
|
display: inline-block }
|
|
|
|
.actionlink, .menuitem, a {
|
|
display:inline-block;
|
|
border-radius:1em;
|
|
border-style: solid;
|
|
border-width:1px;
|
|
cursor: pointer;
|
|
font-family: 'Arial', cursive;
|
|
padding: 1em;
|
|
}
|
|
|
|
input, select, textarea {
|
|
border-radius:1em;
|
|
border-style: solid;
|
|
border-width:1px;
|
|
font-family: 'Arial', cursive;
|
|
}
|
|
|
|
.code {
|
|
font-family: "monospace";
|
|
border-radius:25px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
#avatar {
|
|
float: left;
|
|
margin:1em;
|
|
}
|
|
|
|
.comment {
|
|
border-radius:25px;
|
|
font-size: smaller;
|
|
}
|
|
|
|
.onhover {
|
|
display:none;
|
|
position: absolute;
|
|
}
|
|
|
|
.ohafter:hover + .onhover, .ohinside:hover > .onhover {
|
|
display:block;
|
|
z-index:2;
|
|
padding:5px; margin:5px;
|
|
background-color: rgba(0,0,40,.8);
|
|
}
|
|
.skillname {
|
|
padding:.5em;
|
|
margin:.25em;
|
|
max-width: 24em;
|
|
text-align: center;
|
|
display: inline-block;
|
|
border-radius:1em;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.input-validation-error { border: solid 1px red; background-color: rgba(180,256,256,.5); }
|
|
|
|
.field-validation-error { color: red; background-color: rgba(180,256,256,.5); }
|
|
|
|
.c2 { font-size: small; font-style: italic; }
|
|
|
|
.c3 { font-size: x-small; font-style: italic; }
|
|
|
|
.rate {
|
|
display:inline-bloc; width:5em; cursor: pointer; text-align:center;
|
|
}
|
|
h2 select { font-size: large; }
|
|
|
|
ul.editablelist {
|
|
display: inline;
|
|
}
|
|
ul.editablelist>li {
|
|
display: inline;
|
|
margin:.5em;
|
|
padding:.2em;
|
|
border: solid grey 1px;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
ul.editablelist>li:before {
|
|
font-family: 'FontAwesome';
|
|
content: "\f007";
|
|
}
|
|
|
|
ul.editablelist>li:hover {
|
|
background-color: rgba(128,0,0,0.5);
|
|
cursor:pointer;
|
|
}
|
|
|
|
ul.editablelist>li:hover:before {
|
|
font-family: 'FontAwesome';
|
|
content: "\f00d";
|
|
}
|
|
|
|
@media print {
|
|
body {background-color:white;color:black;}
|
|
.control, .actionlink, .menuitem, nav { display:none;}
|
|
}
|
|
|
|
.bshpanel { display: inline-block; }
|
|
.bsh { display: none; }
|
|
.c3 { display:initial; }
|
|
.c3-alt { display:none; }
|
|
|
|
@media all and (max-width: 640px) {
|
|
header {
|
|
padding-top:1em;
|
|
padding-bottom:1em;
|
|
background: url("/App_Themes/images/star-939235_1280.s.jpg") 0 0 no-repeat fixed;
|
|
}
|
|
|
|
#avatar {
|
|
margin:.5em;
|
|
}
|
|
|
|
header h1, header a , .actionlink, .menuitem, a { padding:.5em;}
|
|
|
|
nav {
|
|
margin: 1em;
|
|
padding: 1em;
|
|
background: url("/App_Themes/images/helix-nebula-1400x1400.s.jpg") 50% 10% repeat fixed ;
|
|
}
|
|
main {
|
|
margin: 1em;
|
|
padding: 1em;
|
|
background: url("/App_Themes/images/p8-av4.s.jpg") 50% 20em no-repeat fixed ;
|
|
}
|
|
footer {
|
|
background: url("/App_Themes/images/helix-nebula-1400x1400.s.jpg") 50% 90% repeat fixed ;
|
|
}
|
|
footer a {
|
|
border-radius:.5em;
|
|
margin:.5em;
|
|
padding:.5em;
|
|
}
|
|
|
|
.notification {
|
|
padding: .5em;
|
|
border-radius:.5em;
|
|
margin:.5em;
|
|
padding:.5em;
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
.menuitem {
|
|
display: block;
|
|
}
|
|
.post {
|
|
margin:.3em;
|
|
padding:.3em;
|
|
}
|
|
.usertitleref{
|
|
padding:.3em;
|
|
}
|
|
.bshpanel { cursor:zoom-in; }
|
|
|
|
.c2 { display:initial; }
|
|
.c2-alt { display:none; }
|
|
.c3 { display:none; }
|
|
.c3-alt { display:initial; }
|
|
}
|
|
|
|
@media all and (max-width: 350px) {
|
|
header {
|
|
padding-top:.5em;
|
|
padding-bottom:.5em;
|
|
background: url("/App_Themes/images/star-939235_1280.xxs.jpg") 0 0 no-repeat fixed;
|
|
}
|
|
|
|
header h1, header a { padding:.2em;}
|
|
|
|
nav {
|
|
margin: .5em;
|
|
padding: .5em;
|
|
background: url("/App_Themes/images/helix-nebula-1400x1400.xxs.jpg") 50% 10% repeat fixed ;
|
|
}
|
|
main {
|
|
margin: .5em;
|
|
padding: .5em;
|
|
background: url("/App_Themes/images/p8-av4.xxs.jpg") 50% 20em repeat fixed ;
|
|
}
|
|
footer {
|
|
background: url("/App_Themes/images/helix-nebula-1400x1400.xxs.jpg") 50% 10% repeat fixed ;
|
|
}
|
|
footer a {
|
|
border-radius:.2em;
|
|
margin:.2em;
|
|
padding:.2em;
|
|
}
|
|
.c2 { display:none; }
|
|
.c2-alt { display:initial; }
|
|
}
|
|
|
|
|