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.
194 lines
4.2 KiB
CSS
194 lines
4.2 KiB
CSS
|
|
body {
|
|
background-color: grey;
|
|
color: #303030;
|
|
}
|
|
.tagname { color: #D0FFD0; }
|
|
.tagname:hover { background-color: red; }
|
|
|
|
/* Start by setting display:none to make this hidden.
|
|
Then we position it in relation to the viewport window
|
|
with position:fixed. Width, height, top and left speak
|
|
for themselves. Background we set to 80% white with
|
|
our animation centered, and no-repeating */
|
|
.modal {
|
|
background: rgba( 255, 255, 255, .8 )
|
|
url('/App_Themes/images/FhHRx.gif')
|
|
50% 50%
|
|
no-repeat;
|
|
}
|
|
|
|
input, textarea, checkbox {
|
|
color: #FFA0A0;
|
|
background-color: black;
|
|
}
|
|
|
|
header {
|
|
background: url("/App_Themes/images/live-concert-388160_1280.jpg") 50% 0 repeat fixed;
|
|
}
|
|
|
|
#logo {
|
|
background: url("/App_Themes/images/logo.s.png") 1em 1em no-repeat fixed;
|
|
}
|
|
|
|
h1, h2, h3 { background-color: rgba(256,256,256,.5); }
|
|
|
|
nav {
|
|
background: url("/App_Themes/images/live-concert-388160_1280.jpg") 50% 10em repeat fixed ;
|
|
}
|
|
nav li { display: inline-block; }
|
|
main {
|
|
background: url("/App_Themes/images/musician-923526_1.nbbi.jpg") 50% 20em repeat fixed ;
|
|
}
|
|
|
|
footer {
|
|
background: url("/App_Themes/images/live-concert-388160_1280.jpg") 50% 30em repeat fixed ;
|
|
}
|
|
|
|
legend {
|
|
background-color: rgba(240,240,240,.5);
|
|
}
|
|
#copyr { background-color: rgba(250,250,250,.8); }
|
|
|
|
#gspacer {
|
|
background-color: rgba(209,209,209,.8); }
|
|
|
|
form {
|
|
background-color: rgba(150,150,256,0.8);
|
|
}
|
|
|
|
fieldset {
|
|
background-color: rgba(216,216,256,0.8);
|
|
}
|
|
|
|
|
|
|
|
.postpreview {
|
|
background-color: rgba(233,233,233,0.8);
|
|
}
|
|
|
|
.post {
|
|
background-color: rgba(256,256,256,0.8);
|
|
}
|
|
.hiddenpost { background-color: rgba(160,160,160,0.5); }
|
|
|
|
a { color: rgb(0,56,0); }
|
|
|
|
a:hover { background-color: rgba(160,160,160,.7); }
|
|
|
|
footer a {
|
|
color: black;
|
|
background-color: rgba(220,220,220,.8);
|
|
}
|
|
.panel,.bshpanel, aside {
|
|
background-color: rgba(200,200,200,.8);
|
|
}
|
|
|
|
.usertitleref {
|
|
background-color:rgba(256,256,212,0.6);
|
|
}
|
|
.editable {
|
|
border: dashed rgb(200,200,256) 2px;
|
|
}
|
|
|
|
.notification {
|
|
background-color: rgba(264,264,128,0.5);
|
|
border: solid green 1px;
|
|
}
|
|
.dirty {
|
|
background-color: rgba(256,228,128,0.5);
|
|
}
|
|
.error, #error {
|
|
color: #f88;
|
|
background-color: rgba(256,.5);
|
|
}
|
|
.validation-summary-errors{
|
|
color: #f88;
|
|
background-color: rgba(256,256,139,0.5);
|
|
}
|
|
|
|
|
|
ul.preview li:nth-child(n) {
|
|
display:none;
|
|
}
|
|
|
|
.validation-summary-errors{
|
|
color: #f88;
|
|
}
|
|
|
|
a.menuitem {
|
|
color: black;
|
|
border: solid black 1px;
|
|
background-color: rgba(220,220,220,.8);
|
|
}
|
|
|
|
.actionlink {
|
|
color: black;
|
|
border: solid black 1px;
|
|
background-color: rgba(220,220,220,.8);
|
|
}
|
|
|
|
input, select, textarea {
|
|
color: black;
|
|
background-color:rgba(256,256,256,0.8);
|
|
border: solid 1px rgb(128,128,128);
|
|
}
|
|
|
|
a:active {
|
|
background-color:rgba(184,180,132,0.9);
|
|
}
|
|
|
|
input:hover, textarea:hover {
|
|
color: white;
|
|
background-color:rgba(164,164,164,0.8);
|
|
}
|
|
.code {
|
|
background-color: rgba(230,230,230,0.5);
|
|
}
|
|
|
|
.ohafter:hover + .onhover, .ohinside:hover > .onhover {
|
|
background-color: rgba(240,240,250,.8);
|
|
}
|
|
|
|
.input-validation-error { border: solid 1px red; }
|
|
.field-validation-error { color: red; }
|
|
|
|
|
|
@media all and (max-width: 640px) {
|
|
#logo {
|
|
background: url("/App_Themes/images/logo.xs.png") 0 0 no-repeat fixed;
|
|
}
|
|
|
|
header {
|
|
background: url("/App_Themes/images/live-concert-388160_1280.s.jpg") 50% 0 repeat fixed;
|
|
}
|
|
nav {
|
|
background: url("/App_Themes/images/live-concert-388160_1280.s.jpg") 50% 10% repeat fixed ;
|
|
}
|
|
main {
|
|
background: url("/App_Themes/images/musician-923526_1.nbbi.xs.jpg") 50% 20em repeat fixed ;
|
|
}
|
|
footer {
|
|
background: url("/App_Themes/images/live-concert-388160_1280.s.jpg") 50% 90% repeat fixed ;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 350px) {
|
|
#logo {
|
|
background: url("/App_Themes/images/logo.xxs.png") 0 0 no-repeat fixed;
|
|
}
|
|
header {
|
|
background: url("/App_Themes/images/live-concert-388160_1280.xxs.jpg") -1em -1em repeat fixed;
|
|
}
|
|
|
|
nav {
|
|
background: url("/App_Themes/images/live-concert-388160_1280.xxs.jpg") 50% 10% repeat fixed ;
|
|
}
|
|
main {
|
|
background: url("/App_Themes/images/musician-923526_1.nbbi.xxs.jpg") 50% 20em repeat fixed ;
|
|
}
|
|
footer {
|
|
background: url("/App_Themes/images/live-concert-388160_1280.xxs.jpg") 50% 90% repeat fixed ;
|
|
}
|
|
}
|
|
|