[Resuelto] Ayuda para personalizar este CSS

[Eleкtro]

Buenas

Hace poco descubrí la extensión Stylish para firefox. Existen muchas extensiones parecidas pero esta me gustó mucho por su recopilación de user-scripts sobre todo de themes oscuros.
➢ http://addons.mozilla.org/en-us/firefox/addon/stylish/
➢ http://userstyles.org/

Estoy usando este script para modificar el aspecto de la MSDN:
➢ https://userstyles.org/styles/107229/msdn-dark-docs https://userstyles.org/styles/96523/msdn-black-background-theme

El problema que tengo es que el aspecto que le han aplicado a los bloques de código es horrible, tanto por el gusto de colorización como para la lectura del código:


He conseguido personalizarlo un poco usando colores menos brillantes y más adecuados para la lectura:


Y ahora quiero modificar también el color de fondo de los bloques de código (para que no sea tan oscuro), pero no encuentro la propiedad correspndiente en el script, o a lo mejor es que debo añadirla yo.

¿Podrían ayudarme a conseguirlo?.

Este es el script (sin modificar):

Código (css) [Seleccionar] Expandir

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("msdn.microsoft.com") {

ul#srv_shellHeaderNav
 {
   /* complete the silly border and make it a bit fleshier
   */
   border-bottom: 1px solid black;
   /*
   adjust for that 12px overhang on the right,
   which was a concequence of using a linked border of our own
   */
   /*margin-right: -11px;*/
   /* use above method, if you dont have firefox
      this will have a greater chance of  interfering
   with future modifications by microsoft, also it does not
   seem to like the right margin as much (1px overhang persistent) */
   -moz-margin-start: -11px;
   -moz-margin-end: -11px;
 }
 
*[role="menu"], .top-level-link-text
 {
   background-color: white !important;
   filter: invert(100%) !important;
 }

#body,#ux-header,#headerContainer
{
   width: auto  !important;
   margin-left: 10px  !important;    
   margin-right: 10px  !important;
   
}
#body
{


}


#content,#leftNav
{
margin-top: 25px !important;
border-top: 1px solid gray !important;
}    
#content>div, #leftNav>div
{
margin-top: 35px;
}

img[title="Visit the Windows Store"]
{
 border-radius: 20px !important;
}

#BodyBackground,body,p,a
{
background: #252525 !important;
color: #FFFFFF !important;
}




input
{
color: white !important;
}

/* just images that are in table definitions, usually spaced out  as big buttons */
tr>td>img,
td a>img
{
border-radius: 4px !important;
border: white solid !important;
}
td a>img:hover
{
border: white outset !important;
}
td a>img:active
{
border: white inset !important;
}

body *
{
 border-color: gray !important;
 outline-color: gray !important;
 background-color: transparent !important;
}

#VideoHowTo
{
width:0px;
height: 100px;
padding-left: 300px;
background-color: transparent !important;

}

h1,h2,th, li.linksTitle a,
td span[style="font-family:'Segoe UI',Verdana,Arial;font-size:1.385em;color:#5e5e5e;font-weight:bold;"],
div dl dt span span a,
div a,
.HeaderContainerRefinement
{
color: #C0C0C0 !important;
}
h3,h4,.ResultDescription
{

color: #A0A0A8 !important;
}
td
{
color: #A0A0A8 !important;
}
#rcA
{
color: #707070 !important;
}
/* code editor-like colors */


pre
{
color: rgb(214,222,212) !important;
font-family: terminal !important;
font-weight: normal !important;
font-style: normal !important;
}
/*COMMENT*/
pre span[style="color:Green;"]
{
color: lime !important;
}

pre span[style="color:Blue;"]
{
color: cyan !important;
}

pre span[style="color:#A31515;"]
{
color: rgb(70,222,230)!important;
background-color: rgb(37,71,70)!important;
}
/*
unfortunately, the syntax highlighting in the code container tabs
is somewhat limited. There's no way to change the colors of some of
the elements (like identifiers, operators, numbers, etc) So until
CSS adds the ability to modify content better than it does now, this
will have to suffice

and finally, the little tag on the code container and the borders

*/

div.codeSnippetContainerTabs>div>a
{
color: #34c6f3 !important;
font-size: 12px;
background-color: black !important;
padding: 3px !important;
padding-left: 8px !important;
padding-right: 6px !important;
border-radius: 10px !important;
border: white 1px solid !important;
font-weight: bold;
text-shadow: 3px 3px 4px rgba(255,255,255,0.4);
}
div.codeSnippetContainerCodeContainer
{
border-radius: 10px !important;
border-color: white !important;
}
div.FeedbackTitleContainer
{
color: silver !important;
text-align: center;
padding-top: 0px !important;
padding-bottom: 6px !important;
text-transform: uppercase !important;
font-family: lucida console !important;
font-size: x-small !important;
}
.BrandLogoImage.msdn
{
background-image: none !important;
background-size: 136px 24px !important;
}
#SearchFlyoutContainer, #vsPanel
{
background: #252525 !important;
color: white !important;

}
#SearchFlyoutContainer div ul li
{
font-size: small !important;
color: white !important;
}
#SearchFlyoutContainer div *
{
font-size: small !important;
color: white !important;
padding-right: 0px;
text-shadow: gray 0 0 4px;
}

#SearchFlyoutContainer a
{
color: white !important;
font-size: x-small !important;
text-transform: uppercase;
text-shadow: gray 0 0 4px;
}
#SearchFlyoutContainer a:after
{
content: " This Flyout";
}
#feedBackImg
{
opacity: 0.55;
}
#FooterLogo, #FooterCopyright, #footerLeft
{
opacity: 0.50;
}
#HeaderSearchButton
{
/*disabled for the 2015 page
 background-image: url("http://paradisim.uuuq.com/foldericons/find.png") !important;*/
}
.Divide
{
opacity: 1.0 !important;
color: #999 !important;

}


#contentFeedback,#contentFeedback *
{
border-style: none !important;
color: #909090 !important;
}

body script+script+script+div
{
border-radius: 10px;
background-color: grey !important;
color: black !important;
}

.MetroButton
{
padding: 0px !important;
margin: 0px !important;
background-position: center !important;
background-size: 19px !important;
border: 1px white outset !important;
border-radius: 5px;
}
.ResultMetaDataValue  { color: #bbb !important; }
.ResultMetaDataName  { color: #999 !important; }
.ResultUrl { color: #888 !important; }

body script+script+script+div img
{
border-radius: 10px;
}
body script+script+script+div a
{
color: gray !important;
font-size: small !important;
}
#static
{
background-attachment: local !important;
/*disabled for the 2015 page
 background: url("http://paradisim.uuuq.com/foldericons/server.png") 2px 2px !important; */


}
 
 #shell-header,
 .shell-header-nav,
 .shell-header-dropdown-tab,
 .shell-header-dropdown-tab-label,
 .shell-header,
span.LW_CollapsibleArea_Title
{
color: #aeaeae !important;
}

span.cl_CollapsibleArea_collapsing
{
/*disabled for the 2015 page
 background-image: url("http://paradisim.uuuq.com/foldericons/Minus Red Button.png") !important; */
background-size: 16px !important;
background-position: center !important;
width: 16px !important;
height: 16px !important;
opacity: 0.5;
}

span.cl_CollapsibleArea_expanding
{
/*disabled for the 2015 page
 background-image: url("http://paradisim.uuuq.com/foldericons/Add Green Button.png") !important; */
background-size: 16px !important;
background-position: center !important;
width: 16px !important;
height: 16px !important;
opacity: 0.5;
}

/**HIDDEN OBJECTS**/

.ResultStatusIcon
{
display: none !important;
}

}


Saludos!

[#!drvy]

Lo que buscas es la propiedad div.codeSnippetContainerCodeContainer, linea 175 del código que has puesto.

Ahora mismo estaria asi:

Código (css) [Seleccionar] Expandir

div.codeSnippetContainerCodeContainer
{
border-radius: 10px !important;
border-color: white !important;
}

Solo tienes que aplicarle un background: #elcolor !important;

Saludos

[Eleкtro]

Lo que buscas es la propiedad div.codeSnippetContainerCodeContainer, linea 175 del código que has puesto.

Solo tienes que aplicarle un background: #elcolor !important;

Muxas gracias #!drvy, todavía no lo he probado pero confio en que funcionará xD.

PD: Mis dotes de CSS son muy tristes, pero al menos la intuición no me falló ...del todo.

Saludos!