PHP - Reader View - CIID by belfie13

/* ==UserStyle==
@name         PHP - Reader View - CIID
@version      20221006.18.27
@namespace    userstyles.world/user/belfie13
@description  A few things to make example code easier to read.
Moved side menu to bottom of content.
@author       belfie13
@license      No License
==/UserStyle== */

@-moz-document domain("php.net") {
/* #layout -> [ #layout-content, .layout-menu ] */
#layout
{
    width: auto;
    clear: none;
}

#intro .blurb, #layout-content, #layout-content
{
    width: 100% !important;
}

.layout-menu
{
    width: 25%;
}

/* defaults.css | https://shared.php.net/styles/defaults.css?filemtime=1630005818 */
body section.mainscreen
{
    width: auto;
    float: none;
}

strong, em
{
    text-rendering: optimizeLegibility;
}

code, pre.info, .docs .classsynopsis, .docs .classsynopsis code
{
    line-height: 1.2em;
}
}

@-moz-document domain("php.net") {
/* MDC 200
 EF9A9A R | F48FB1 M | CE93D8   | B39DDB P | 9FA8DA 
 90CAF9 B | 81D4FA   | 84DEEA C | 80CBC4   | A5D6A7 G
 C5E1A5   | E6EE9C   | FFF59D Y | FFE082   | FFCC80 O | FFAB91
 */
@media screen and (prefers-color-scheme: dark) {
    html
     {
    	background-color: #121212;
    	color: #FFF;
     }
    body
    {
    	background-color: #121212;
    	background-color: RGBA(255,255,255,0.05);
    	color: #FFF;
    }
    .foreground 
    	{ color: #FFFFFF; }
    .red { color: #EF9A9A; }
    .green 		
    	{ color: #A5D6A7; }
    .blue 		
    	{ color: #90CAF9; }
    .orange 	
    	{ color: #FFCC80; }
    .cyan 		
    	{ color: #84DEEA; }
    .magenta 	
    	{ color: #F48FB1; }
    .yellow 	
    	{ color: #FFF59D; }
    .title a, .title, 
    h1, h2, h3, h4, h5, h6  
    	{ color: #CE93D8; }
    #layout-content a:link,
    a:link 		
    	{ color: #9fa8da; }
    #layout-content a:visited,
    a:visited 	
    	{ color: #9fa8da; }
    a:hover 	
    	{ color: #B39DDB; }

	#layout-content,
    .example-contents > .phpcode,
    .htmlcode,
    .shellcode,
    .apache-confcode,
    .nginx-confcode,
    .inicode,
    .example-contents,
    .screen, 
    .informalexample .literallayout,
    .note,
    .para var, .simpara var,
    .table,
    .doctable,
    .doctable th,
    .segmentedlist th,
    .doctable tbody.tbody tr
    /*
    .doctable tbody tr:nth-child(odd),
    .segmentedlist tbody tr:nth-child(odd),
    .doctable tbody tr:nth-child(even),
    .segmentedlist tbody tr:nth-child(even)
    */
    {
    	background-color: #121212;
    	background-color: RGBA(255,255,255,0.05) !important;
    	color: #FFF !important;
    }
    .example-contents > .phpcode
    {
    	background-color: #FFFFFF !important;
        background-color: RGBA(255,255,255,0.08) !important;
    	color: #121212 !important;
    }
    #flash-message .error, 
    .warning
    {
    	background-color: #EF9A9A;
    	background-color: rgba(240,154,154,0.09) !important;
    	border-color: #FFAB91;
    }
    div.caution, .caution .para
    {
    	background-color: #FFF59D;
    	background-color: rgba(255,244,158,0.09) !important;
    	border-color: #FFF59D;
    	color: #121212 !important;
    }
}
@media (prefers-color-scheme: light) {
    html
    {
    	background-color: #FFF;
    	color: rgba(255,255,255,0.8);
    }
    body
    {
/*     	background-color: #FFF; */
    	background-color: #F5F5F5;
/*     	background-color: RGBA(0,0,0,0.01); */
    	color: #212121;
    }
    .foreground { color: #212121; }
    .red { color: #B71C1C; }
    .green { color: #1B5E20; }
    .blue { color: #0D47A1; }
    .orange { color: #E65100; }
    .cyan { color: #006064; }
    .magenta { color: #880E4F; }
    .yellow { color: #F57F17; }
    .title a, .title, h1, h2, h3, h4, h5, h6
    	{ color: #4A148C; }
    #layout-content a:link, a:link
    	{ color: #4A148C; }
    #layout-content a:visited, a:visited
    	{ color: #1A237E; }
    a:hover
    	{ color: #01579B; }

    .example-contents > .phpcode,
    .htmlcode,
    .shellcode,
    .apache-confcode,
    .nginx-confcode,
    .inicode,
    .example-contents,
    .screen, 
    .informalexample .literallayout,
    .note,
    .para var,
    .simpara var,
    .table,
    .doctable,
    .doctable th,
    .segmentedlist th,
    .doctable tbody.tbody tr
    /*
    .doctable tbody tr:nth-child(odd),
    .segmentedlist tbody tr:nth-child(odd),
    .doctable tbody tr:nth-child(even),
    .segmentedlist tbody tr:nth-child(even)
    */
    {
    	background-color: #FAFAFA;
/*     	background-color: RGBA(0,0,0,0.01) !important; */
    	color: #212121 !important;
    }
    #flash-message .error, 
    .warning
    {
    	background-color: #FF8A80;
	/* background-color: rgba(240,154,154,0.09) !important; */
    	border-color: #FF9E80;
    }
    div.caution, .caution .para
    {
    	background-color: #FFFF8D;
		/* background-color: rgba(255,244,158,0.09) !important; */
    	border-color: #FFE57F;
    	color: #212121 !important;
    }
}

html
{
    width: 100%;
    height: 100%;
}
body
{
    box-sizing: border-box;
    width: 100%;
	/* margin: 0.5em 1em 0.5em 0.5em; */
    padding: 0.5em;
    font-size: 16px;
    line-height: 1.2em !important;
}
li
{
margin-top: 0.2em;
margin-bottom: 0.2em;
}
:any-link, a:link, a:visited, a:active
{
    cursor: pointer;
    text-decoration: none;
}
.title
{
    font-family: serif;
}
body, input, textarea
{
    font-family: sans-serif;
}
.refentry .refsect1 {
    margin-bottom: 1rem;
}
.para var, .simpara var
{
    border-radius: 0.5em;
}
.warning
{
    border-radius: 0.25em;
    padding: 0 0.25em;
}
div.warning
{
    border-radius: 0.25em;
    padding: 0.5em;
}
table.doctable.table
{
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}
#flash-message .error, 
.warning,
div.caution, 
.caution .para
{
    border-width: 2px !important;
}
a[href*="class"],
a[href*="interface"],
a[href*="trait"],
a[href*="control-structures"],
a[href*="function"],
code, pre.info, .docs .classsynopsis, .docs .classsynopsis code, .chunklist.chunklist_book.chunklist_children a:any-link
{
	font-family: monospace;
}
span[style*="#FF8000"]
{ color: #F57C00 !important; }
span[style*="#DD0000"]
{ color: #D32F2F !important; }
span[style*="#007700"]
{ color: #388E3C !important; }
span[style*="#0000BB"]
{ color: #1976D2 !important; }
/* #breadcrumbs ul
{
	position: fixed;
    top: 1em;
    left: 1em;
    right:1em;
	z-index:2000;
} */
#intro .blurb, #layout-content
 {
 	margin: auto;
 	width: 100% !important;
 }
}