Template:Paired list stack: Difference between revisions

m fix background color overflow at corners
added label and label id parameters
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly><dl style="margin: 5px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-radius: 3px; overflow: hidden; text-align: center;">
<includeonly>{{#if:{{{label|}}}|<div id="{{{label id|{{anchorencode:{{{label}}}}}}}}" style="text-align: center; font-weight: bold;">{{{label}}}</div>}}<dl {{#if:{{{label|}}}|aria-labelledby="{{{label id|{{anchorencode:{{{label}}}}}}}}"}} style="margin: 5px; border-top: 1px solid {{{border color|#c8ccd1}}}; border-left: 1px solid {{{border color|#c8ccd1}}}; border-right: 1px solid {{{border color|#c8ccd1}}}; border-radius: 3px; padding-bottom: 1px; overflow: hidden; text-align: center;">
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid black;">
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
         <dt style="flex: 1 0 20ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 1|}}}
         <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 1|}}}
         <dd style="flex: 3 1 60ch; margin: 0; padding: 2px;">{{{value 1|}}}
         <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 1|}}}
     </div>
     </div>
{{#if:{{{key 2|}}}|
{{#if:{{{key 2|}}}|
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid black;">
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
         <dt style="flex: 1 0 20ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 2}}}
         <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 2}}}
         <dd style="flex: 3 1 60ch; margin: 0; padding: 2px;">{{{value 2|}}}
         <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 2|}}}
     </div>
     </div>
}}{{#if:{{{key 3|}}}|
}}{{#if:{{{key 3|}}}|
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid black;">
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
         <dt style="flex: 1 0 20ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 3}}}
         <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 3}}}
         <dd style="flex: 3 1 60ch; margin: 0; padding: 2px;">{{{value 3|}}}
         <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 3|}}}
     </div>
     </div>
}}{{#if:{{{key 4|}}}|
}}{{#if:{{{key 4|}}}|
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid black;">
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
         <dt style="flex: 1 0 20ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 4}}}
         <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 4}}}
         <dd style="flex: 3 1 60ch; margin: 0; padding: 2px;">{{{value 4|}}}
         <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 4|}}}
     </div>
     </div>
}}{{#if:{{{key 5|}}}|
}}{{#if:{{{key 5|}}}|
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid black;">
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
         <dt style="flex: 1 0 20ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 5}}}
         <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 5}}}
         <dd style="flex: 3 1 60ch; margin: 0; padding: 2px;">{{{value 5|}}}
         <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 5|}}}
     </div>
     </div>
}}{{#if:{{{key 6|}}}|
}}{{#if:{{{key 6|}}}|
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid black;">
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
         <dt style="flex: 1 0 20ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 6}}}
         <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 6}}}
         <dd style="flex: 3 1 60ch; margin: 0; padding: 2px;">{{{value 6|}}}
         <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 6|}}}
     </div>
     </div>
}}{{#if:{{{key 7|}}}|
}}{{#if:{{{key 7|}}}|
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid black;">
     <div style="display: flex; flex-wrap: wrap; border-bottom: 1px solid {{{border color|#c8ccd1}}};">
         <dt style="flex: 1 0 20ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}};">{{{key 7}}}
         <dt style="flex: 1 0 15ch; margin: 0; padding: 2px; line-height: inherit; font-family: inherit; background-color: {{{key background color|#eaecf0}}}; color: {{{key color|black}}};">{{{key 7}}}
         <dd style="flex: 3 1 60ch; margin: 0; padding: 2px;">{{{value 7|}}}
         <dd style="flex: 3 1 45ch; margin: 0; padding: 2px;">{{{value 7|}}}
     </div>
     </div>
}}
}}
Line 43: Line 43:
{{paired list stack
{{paired list stack
  | key background color = lightblue
  | key background color = lightblue
| border color = darkblue
  | key 1  = 1986
  | key 1  = 1986
  | value 1 = Dragon Quest Suite
  | value 1 = Dragon Quest Suite
Line 54: Line 55:
{{paired list stack
{{paired list stack
  | key background color = lightblue
  | key background color = lightblue
| border color = darkblue
  | key 1  = 1986
  | key 1  = 1986
  | value 1 = Dragon Quest Suite
  | value 1 = Dragon Quest Suite
Line 66: Line 68:
{{paired list stack
{{paired list stack
  | key background color = lightblue
  | key background color = lightblue
| border color = darkblue
  | key 1  = 1986
  | key 1  = 1986
  | value 1 = Dragon Quest Suite
  | value 1 = Dragon Quest Suite