11
2+
23: root {
34 /* Typography */
4- --font-primary : 'Source Sans Pro ' , Helvetica, Arial, sans-serif;
5- --font-secondary : 'Source Sans Pro ' , Helvetica, Arial, sans-serif;
5+ --font-primary : 'Open Sans' , Helvetica, Arial, sans-serif;
6+ --font-secondary : 'Open Sans' , Helvetica, Arial, sans-serif;
67 --font-monospace : 'Source Code Pro' , monospace;
78 --line-height--primary : 1.6 ;
89 --letter-spacing--primary : .05rem ;
2021 --text-xxxxl : calc (var (--text-base-size ) * var (--text-scale-ratio ) * var (--text-scale-ratio ) * var (--text-scale-ratio ) * var (--text-scale-ratio ) * var (--text-scale-ratio ));
2122 --text-xxxxxl : calc (var (--text-base-size ) * var (--text-scale-ratio ) * var (--text-scale-ratio ) * var (--text-scale-ratio ) * var (--text-scale-ratio ) * var (--text-scale-ratio ) * var (--text-scale-ratio ));
2223
24+ --color-hue-red : 4 ;
25+ --color-hue-pink : 340 ;
26+ --color-hue-purple : 291 ;
27+ --color-hue-deep-purple : 262 ;
28+ --color-hue-indigo : 231 ;
29+ --color-hue-blue : 207 ;
30+ --color-hue-light-blue : 199 ;
31+ --color-hue-cyan : 187 ;
32+ --color-hue-teal : 174 ;
33+ --color-hue-green : 122 ;
34+ --color-hue-phpdocumentor-green : 96 ;
35+ --color-hue-light-green : 88 ;
36+ --color-hue-lime : 66 ;
37+ --color-hue-yellow : 54 ;
38+ --color-hue-amber : 45 ;
39+ --color-hue-orange : 36 ;
40+ --color-hue-deep-orange : 14 ;
41+ --color-hue-brown : 16 ;
42+
2343 /* Colors */
24- --primary-color : hsl (96 , 57% , 60% );
25- --primary-color-darken : hsl (96 , 57% , 40% );
26- --primary-color-darker : hsl (96 , 57% , 20% );
27- --primary-color-darkest : hsl (96 , 57% , 10% );
28- --primary-color-lighten : hsl (96 , 57% , 80% );
29- --primary-color-lighter : hsl (96 , 57% , 99% );
44+ --primary-color-hue : var (--color-hue-phpdocumentor-green , --color-hue-phpdocumentor-green );
45+ --primary-color-saturation : 57% ;
46+ --primary-color : hsl (var (--primary-color-hue ), var (--primary-color-saturation ), 60% );
47+ --primary-color-darken : hsl (var (--primary-color-hue ), var (--primary-color-saturation ), 40% );
48+ --primary-color-darker : hsl (var (--primary-color-hue ), var (--primary-color-saturation ), 25% );
49+ --primary-color-darkest : hsl (var (--primary-color-hue ), var (--primary-color-saturation ), 10% );
50+ --primary-color-lighten : hsl (var (--primary-color-hue ), calc (var (--primary-color-saturation ) - 20% ), 85% );
51+ --primary-color-lighter : hsl (var (--primary-color-hue ), calc (var (--primary-color-saturation ) - 45% ), 97.5% );
3052 --dark-gray : # d1d1d1 ;
3153 --light-gray : # f0f0f0 ;
3254
3355 --text-color : var (--primary-color-darkest );
3456
3557 --header-height : var (--spacing-xxxxl );
3658 --header-bg-color : var (--primary-color );
37- --code-background-color : # f7faf5 ;
38- --code-border-color : # d6e7cb ;
59+ --code-background-color : var ( --primary-color-lighter ) ;
60+ --code-border-color : --primary-color-lighten ;
3961 --button-border-color : var (--primary-color-darken );
4062 --button-color : transparent;
4163 --button-color-primary : var (--primary-color );
4264 --button-text-color : # 555 ;
4365 --button-text-color-primary : white;
4466 --popover-background-color : rgba (255 , 255 , 255 , 0.75 );
45- --link-color-primary : var (--primary-color-darken );
46- --link-hover-color-primary : var (--primary-color-darker );
67+ --link-color-primary : var (--primary-color-darker );
68+ --link-hover-color-primary : var (--primary-color-darkest );
4769 --form-field-border-color : var (--dark-gray );
4870 --form-field-color : # fff ;
4971 --admonition-success-color : var (--primary-color );
7799/* Base Styles
78100-------------------------------------------------- */
79101body {
102+ background-color : # fff ;
80103 color : var (--text-color );
81104 font-family : var (--font-primary );
82105 font-size : var (--text-md );
83106 letter-spacing : var (--letter-spacing--primary );
84107 line-height : var (--line-height--primary );
108+ width : 100% ;
85109}
86110
87111.phpdocumentor h1 ,
@@ -136,29 +160,39 @@ body {
136160 margin-bottom : var (--spacing-md );
137161 margin-top : var (--spacing-md );
138162}
139-
140163.phpdocumentor h1 .headerlink ,
141164.phpdocumentor h2 .headerlink ,
142165.phpdocumentor h3 .headerlink ,
143166.phpdocumentor h4 .headerlink ,
144167.phpdocumentor h5 .headerlink ,
145168.phpdocumentor h6 .headerlink
146169{
147- transition : all .3s ease-in-out;
148- opacity : 0 ;
149- text-decoration : none;
150- color : silver;
151- font-size : 80% ;
170+ display : none;
152171}
153172
154- .phpdocumentor h1 : hover .headerlink ,
155- .phpdocumentor h2 : hover .headerlink ,
156- .phpdocumentor h3 : hover .headerlink ,
157- .phpdocumentor h4 : hover .headerlink ,
158- .phpdocumentor h5 : hover .headerlink ,
159- .phpdocumentor h6 : hover .headerlink
160- {
161- opacity : 1 ;
173+ @media (min-width : 550px ) {
174+ .phpdocumentor h1 .headerlink ,
175+ .phpdocumentor h2 .headerlink ,
176+ .phpdocumentor h3 .headerlink ,
177+ .phpdocumentor h4 .headerlink ,
178+ .phpdocumentor h5 .headerlink ,
179+ .phpdocumentor h6 .headerlink {
180+ display : inline;
181+ transition : all .3s ease-in-out;
182+ opacity : 0 ;
183+ text-decoration : none;
184+ color : silver;
185+ font-size : 80% ;
186+ }
187+
188+ .phpdocumentor h1 : hover .headerlink ,
189+ .phpdocumentor h2 : hover .headerlink ,
190+ .phpdocumentor h3 : hover .headerlink ,
191+ .phpdocumentor h4 : hover .headerlink ,
192+ .phpdocumentor h5 : hover .headerlink ,
193+ .phpdocumentor h6 : hover .headerlink {
194+ opacity : 1 ;
195+ }
162196}
163197.phpdocumentor p {
164198 margin-top : 0 ;
@@ -173,6 +207,11 @@ body {
173207 font-style : italic;
174208 font-size : 80% ;
175209}
210+
211+ .phpdocumentor-uml-diagram svg {
212+ max-width : 100% ;
213+ height : auto !important ;
214+ }
176215.phpdocumentor-line {
177216 border-top : 1px solid # E1E1E1 ;
178217 border-width : 0 ;
@@ -183,11 +222,17 @@ body {
183222 box-sizing : border-box;
184223 margin : 0 auto;
185224 max-width : var (--container-width );
186- padding : 0 var (--spacing-lg );
225+ padding : 0 var (--spacing-sm );
187226 position : relative;
188227 width : 100% ;
189228}
190229
230+ @media (min-width : 550px ) {
231+ .phpdocumentor-section {
232+ padding : 0 var (--spacing-lg );
233+ }
234+ }
235+
191236@media (min-width : 1200px ) {
192237 .phpdocumentor-section {
193238 padding : 0 ;
@@ -418,7 +463,7 @@ textarea {
418463 outline : 0 ;
419464}
420465
421- .phpdocumentor-label {
466+ label .phpdocumentor-label {
422467 display : block;
423468 margin-bottom : var (--spacing-xs );
424469}
@@ -432,38 +477,52 @@ input[type="checkbox"].phpdocumentor-field,
432477input [type = "radio" ].phpdocumentor-field {
433478 display : inline;
434479}
480+ .phpdocumentor-column ul ,
435481div .phpdocumentor-list > ul ,
436482ul .phpdocumentor-list {
437- list-style : circle inside ;
483+ list-style : circle;
438484}
439485
486+ .phpdocumentor-column ol ,
487+ div .phpdocumentor-list > ol ,
440488ol .phpdocumentor-list {
441- list-style : decimal inside ;
489+ list-style : decimal;
442490}
443491
492+
493+ .phpdocumentor-column ul ,
444494div .phpdocumentor-list > ul ,
445495ol .phpdocumentor-list ,
446496ul .phpdocumentor-list {
447497 margin-top : 0 ;
498+ padding-left : var (--spacing-lg );
499+ margin-bottom : var (--spacing-sm );
500+ }
501+
502+ .phpdocumentor-column ul .-clean ,
503+ div .phpdocumentor-list > ul .-clean ,
504+ ul .phpdocumentor-list .-clean {
505+ list-style : none;
448506 padding-left : 0 ;
449- margin-bottom : var (--spacing-md );
450507}
451508
452509dl {
453510 margin-bottom : var (--spacing-md );
454511}
455512
513+ .phpdocumentor-column ul ul ,
456514div .phpdocumentor-list > ul ul ,
457515ul .phpdocumentor-list ul .phpdocumentor-list ,
458516ul .phpdocumentor-list ol .phpdocumentor-list ,
459517ol .phpdocumentor-list ol .phpdocumentor-list ,
460518ol .phpdocumentor-list ul .phpdocumentor-list {
461519 font-size : var (--text-sm );
462- margin : var ( --spacing-xs ) 0 var ( --spacing-xs ) calc (var (--spacing-xs ) * 2 );
520+ margin : 0 0 0 calc (var (--spacing-xs ) * 2 );
463521}
464522
465- li .phpdocumentor-list {
466- margin-bottom : var (--spacing-md );
523+ .phpdocumentor-column ul li ,
524+ .phpdocumentor-list li {
525+ padding-bottom : var (--spacing-xs );
467526}
468527
469528.phpdocumentor dl dt {
@@ -529,6 +588,36 @@ th.phpdocumentor-heading:last-child,
529588td .phpdocumentor-cell : last-child {
530589 padding-right : 0 ;
531590}
591+ .phpdocumentor-label-line {
592+ display : flex;
593+ flex-direction : row;
594+ gap : 1rem
595+ }
596+
597+ .phpdocumentor-label {
598+ background : # f6f6f6 ;
599+ border-radius : .25rem ;
600+ font-size : 80% ;
601+ display : inline-block;
602+ overflow : hidden
603+ }
604+
605+ /*
606+ It would be better if the phpdocumentor-element class were to become a flex element with a gap, but for #3337 that
607+ is too big a fix and needs to be done in a new design iteration.
608+ */
609+ .phpdocumentor-signature + .phpdocumentor-label-line .phpdocumentor-label {
610+ margin-top : var (--spacing-sm );
611+ }
612+
613+ .phpdocumentor-label span {
614+ display : inline-block;
615+ padding : .125rem .5rem ;
616+ }
617+
618+ .phpdocumentor-label--success span : last-of-type {
619+ background : # abe1ab ;
620+ }
532621
533622.phpdocumentor-header {
534623 display : flex;
@@ -613,7 +702,7 @@ td.phpdocumentor-cell:last-child {
613702
614703@media (min-width : 1000px ) {
615704 .phpdocumentor-title {
616- width : 30.6666666667 % ;
705+ width : 22 % ;
617706 border-right : var (--sidebar-border-color ) solid 1px ;
618707 }
619708
@@ -732,7 +821,8 @@ td.phpdocumentor-cell:last-child {
732821 transition : padding-left .4s ease-out;
733822}
734823
735- .phpdocumentor .phpdocumentor-sidebar a : hover {
824+ .phpdocumentor .phpdocumentor-sidebar a : hover ,
825+ .phpdocumentor .phpdocumentor-sidebar a .-active {
736826 padding-left : 5px ;
737827 font-weight : 600 ;
738828}
@@ -747,6 +837,7 @@ td.phpdocumentor-cell:last-child {
747837
748838.phpdocumentor .phpdocumentor-sidebar__category-header {
749839 font-size : var (--text-md );
840+ margin-top : 0 ;
750841 margin-bottom : var (--spacing-xs );
751842 color : var (--link-color-primary );
752843 font-weight : 600 ;
@@ -917,10 +1008,6 @@ td.phpdocumentor-cell:last-child {
9171008 margin : 0 0 0 auto;
9181009 }
9191010}
920- .phpdocumentor-content {
921- position : relative;
922- }
923-
9241011.phpdocumentor-search-results {
9251012 backdrop-filter : blur (5px );
9261013 background : var (--popover-background-color );
@@ -1037,6 +1124,7 @@ td.phpdocumentor-cell:last-child {
10371124 display : flex;
10381125 align-items : center;
10391126 justify-content : center;
1127+ z-index : 1 ;
10401128}
10411129
10421130.phpdocumentor-modal__open {
@@ -1058,6 +1146,8 @@ td.phpdocumentor-cell:last-child {
10581146 background : # fff ;
10591147 position : relative;
10601148 padding : 2em ;
1149+ box-sizing : border-box;
1150+ max-width : 100vw ;
10611151}
10621152
10631153.phpdocumentor-modal__close {
@@ -1072,6 +1162,65 @@ td.phpdocumentor-cell:last-child {
10721162 font-weight : bold;
10731163 cursor : pointer;
10741164}
1165+ .phpdocumentor-on-this-page__sidebar {
1166+ display : none;
1167+ }
1168+
1169+ .phpdocumentor-on-this-page__title {
1170+ display : block;
1171+ font-weight : bold;
1172+ margin-bottom : var (--spacing-sm );
1173+ color : var (--link-color-primary );
1174+ }
1175+
1176+ @media (min-width : 1000px ) {
1177+ .phpdocumentor-on-this-page__sidebar {
1178+ display : block;
1179+ position : relative;
1180+ }
1181+
1182+ .phpdocumentor-on-this-page__content ::-webkit-scrollbar ,
1183+ [scrollbars ]::-webkit-scrollbar {
1184+ height : 8px ;
1185+ width : 8px ;
1186+ }
1187+
1188+ .phpdocumentor-on-this-page__content ::-webkit-scrollbar-corner ,
1189+ [scrollbars ]::-webkit-scrollbar-corner {
1190+ background : 0 ;
1191+ }
1192+
1193+ .phpdocumentor-on-this-page__content ::-webkit-scrollbar-thumb ,
1194+ [scrollbars ]::-webkit-scrollbar-thumb {
1195+ background : rgba (128 , 134 , 139 , 0.26 );
1196+ border-radius : 8px ;
1197+ }
1198+
1199+ .phpdocumentor-on-this-page__content {
1200+ position : sticky;
1201+ height : calc (100vh - var (--header-height ));
1202+ overflow-y : auto;
1203+ border-left : 1px solid var (--sidebar-border-color );
1204+ padding-left : var (--spacing-lg );
1205+ font-size : 90% ;
1206+ top : -1px ; /* Needed for the javascript to make the .-stuck trick work */
1207+ flex : 0 1 auto;
1208+ width : 15vw ;
1209+ }
1210+
1211+ .phpdocumentor-on-this-page__content .-stuck {
1212+ height : 100vh ;
1213+ }
1214+
1215+ .phpdocumentor-on-this-page__content li {
1216+ word-break : break-all;
1217+ line-height : normal;
1218+ }
1219+
1220+ .phpdocumentor-on-this-page__content li .-deprecated {
1221+ text-decoration : line-through;
1222+ }
1223+ }
10751224
10761225/* Used for screen readers and such */
10771226.visually-hidden {
0 commit comments