diff options
Diffstat (limited to 'docs')
-rw-r--r-- | docs/reference/gtk/coordinates.md | 5 | ||||
-rw-r--r-- | docs/reference/gtk/gtk4.toml.in | 2 | ||||
-rw-r--r-- | docs/reference/gtk/images/box-model-dark.png | bin | 0 -> 24729 bytes | |||
-rw-r--r-- | docs/reference/gtk/images/box-model-light.png | bin | 0 -> 23380 bytes | |||
-rw-r--r-- | docs/reference/gtk/images/box-model.svg | 193 |
5 files changed, 199 insertions, 1 deletions
diff --git a/docs/reference/gtk/coordinates.md b/docs/reference/gtk/coordinates.md index 4ca85d5890..96f5f50aeb 100644 --- a/docs/reference/gtk/coordinates.md +++ b/docs/reference/gtk/coordinates.md @@ -16,7 +16,10 @@ ignored. The section will explain the details for the few cases when it is impor When it comes to rendering, GTK follows the CSS box model as far as practical. -![](https://www.w3.org/TR/css-box-3/images/box.png) +<picture> + <source srcset="box-model-dark.png" media="(prefers-color-scheme: dark)"> + <img alt="Box Model" src="box-model-light.png"> +</picture> The CSS stylesheet that is in use determines the sizes (and appearance) of the margin, border and padding areas for each widget. The size of the content area diff --git a/docs/reference/gtk/gtk4.toml.in b/docs/reference/gtk/gtk4.toml.in index 477c618f76..3404a419a1 100644 --- a/docs/reference/gtk/gtk4.toml.in +++ b/docs/reference/gtk/gtk4.toml.in @@ -242,5 +242,7 @@ content_images = [ "images/rich-list.png", "images/data-table.png", "images/navigation-sidebar.png", + "images/box-model-light.png", + "images/box-model-dark.png", ] urlmap_file = "urlmap.js" diff --git a/docs/reference/gtk/images/box-model-dark.png b/docs/reference/gtk/images/box-model-dark.png Binary files differnew file mode 100644 index 0000000000..eaf0c79beb --- /dev/null +++ b/docs/reference/gtk/images/box-model-dark.png diff --git a/docs/reference/gtk/images/box-model-light.png b/docs/reference/gtk/images/box-model-light.png Binary files differnew file mode 100644 index 0000000000..dd54a1526d --- /dev/null +++ b/docs/reference/gtk/images/box-model-light.png diff --git a/docs/reference/gtk/images/box-model.svg b/docs/reference/gtk/images/box-model.svg new file mode 100644 index 0000000000..dddc0c7b6e --- /dev/null +++ b/docs/reference/gtk/images/box-model.svg @@ -0,0 +1,193 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="210mm" + height="297mm" + viewBox="0 0 210 297" + version="1.1" + id="svg5" + inkscape:version="1.2.2 (b0a8486541, 2022-12-01)" + sodipodi:docname="box-model.svg" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview7" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" + inkscape:showpageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" + showgrid="false" + inkscape:zoom="0.84096521" + inkscape:cx="265.76605" + inkscape:cy="312.14133" + inkscape:window-width="1920" + inkscape:window-height="1123" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="layer1" /> + <defs + id="defs2"> + <marker + style="overflow:visible" + id="Arrow2" + refX="0" + refY="0" + orient="auto-start-reverse" + inkscape:stockid="Arrow2" + markerWidth="7.6999998" + markerHeight="5.5999999" + viewBox="0 0 7.7 5.6" + inkscape:isstock="true" + inkscape:collect="always" + preserveAspectRatio="xMidYMid"> + <path + transform="scale(0.7)" + d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" + style="fill:context-stroke;fill-rule:evenodd;stroke:none" + id="arrow2L" /> + </marker> + <marker + style="overflow:visible" + id="Arrow2-4" + refX="0" + refY="0" + orient="auto-start-reverse" + inkscape:stockid="Arrow2" + markerWidth="7.6999998" + markerHeight="5.5999999" + viewBox="0 0 7.7 5.6" + inkscape:isstock="true" + inkscape:collect="always" + preserveAspectRatio="xMidYMid"> + <path + transform="scale(0.7)" + d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" + style="fill:context-stroke;fill-rule:evenodd;stroke:none" + id="arrow2L-7" /> + </marker> + </defs> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"> + <rect + style="fill:none;stroke:#000000;stroke-width:10.58333333;stroke-dasharray:none" + id="rect234-0" + width="112.51476" + height="70.089249" + x="38.634876" + y="49.512993" /> + <rect + style="fill:none;stroke:#000000;stroke-width:0.487868;stroke-dasharray:none" + id="rect234" + width="146.21118" + height="103.37679" + x="21.283342" + y="33.173706" /> + <rect + style="fill:none;stroke:#000000;stroke-width:0.54387;stroke-dasharray:none" + id="rect234-3" + width="79.543648" + height="37.520485" + x="55.724121" + y="65.367287" /> + <text + xml:space="preserve" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none" + x="76.878265" + y="100.819" + id="text3935"><tspan + sodipodi:role="line" + id="tspan3933" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.264583" + x="76.878265" + y="100.819">content</tspan></text> + <text + xml:space="preserve" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none" + x="77.072464" + y="111.58885" + id="text4767"><tspan + sodipodi:role="line" + id="tspan4765" + style="fill:#000000;fill-opacity:1;stroke-width:0.264583" + x="77.072464" + y="111.58885">padding</tspan><tspan + sodipodi:role="line" + style="fill:#000000;fill-opacity:1;stroke-width:0.264583" + x="77.072464" + y="124.8181" + id="tspan4769" /></text> + <text + xml:space="preserve" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none" + x="77.337868" + y="133.01045" + id="text4767-1"><tspan + sodipodi:role="line" + id="tspan8053" + x="77.337868" + y="133.01045">margin</tspan><tspan + sodipodi:role="line" + id="tspan8055" + x="77.337868" + y="146.2397"></tspan></text> + <text + xml:space="preserve" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1" + x="77.311295" + y="123.22021" + id="text7028"><tspan + sodipodi:role="line" + id="tspan7026" + style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1" + x="77.311295" + y="123.22021">border</tspan></text> + <path + style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow2)" + d="M 58.115912,67.846321 71.79645,67.813301" + id="path9563" /> + <path + style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow2-4)" + d="m 58.054931,67.806272 -0.03031,13.680545" + id="path9563-6" + inkscape:transform-center-x="0.99122989" + inkscape:transform-center-y="-10.282891" /> + <text + xml:space="preserve" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1" + x="74.660751" + y="69.01046" + id="text10129"><tspan + sodipodi:role="line" + id="tspan10127" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:0.264583" + x="74.660751" + y="69.01046">X</tspan></text> + <text + xml:space="preserve" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1" + x="56.974892" + y="86.498825" + id="text10133"><tspan + sodipodi:role="line" + id="tspan10131" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:0.264583" + x="56.974892" + y="86.498825">Y</tspan></text> + <circle + style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1" + id="path10187" + cx="58.076889" + cy="67.895195" + r="0.2" /> + </g> +</svg> |