Alexander/WebtreesBockenTheme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Bocken theme for webtrees

Browse Source 
Nord-themed dark/light mode family tree theme with:
- Floating glass-morphism header bar
- Auto/light/dark theme toggle with Lucide icons
- Smart SVG logo with theme-aware fill colors
- Active page highlighting with per-menu Nord icon colors
- Language button showing 2-letter abbreviation
- Start page search form
- Mobile responsive icon-only nav
- Custom views inherited from ArgonLight
This commit is contained in:
Alexander Bocken
2026-03-14 09:53:43 +01:00
commit ce11b25da4
54 changed files with 5426 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/img/favicon.svg
+221
View File
@@ -0,0 +1,221 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="44.976448mm"
height="47.592033mm"
viewBox="0 0 44.976448 47.592033"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1167">
<g
id="g1171"
transform="translate(-839.26546,-1493.2693)">
<path
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
id="path1169" />
</g>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1161">
<g
id="g1165"
transform="translate(-870.22246,-1471.759)">
<path
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
id="path1163" />
</g>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1155">
<g
id="g1159"
transform="translate(-879.11756,-1418.6585)">
<path
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
id="path1157" />
</g>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1125">
<g
id="g1129"
transform="translate(-985.61606,-1491.5374)">
<path
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
id="path1127" />
</g>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1119">
<g
id="g1123"
transform="translate(-984.96026,-1455.9641)">
<path
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
id="path1121" />
</g>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1113">
<g
id="g1117"
transform="translate(-945.76396,-1416.9275)">
<path
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
id="path1115" />
</g>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1107">
<g
id="g1111"
transform="translate(-898.03256,-1543.4085)">
<path
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
id="path1109" />
</g>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1101">
<g
id="g1105"
transform="translate(-916.79086,-1510.9075)">
<path
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
id="path1103" />
</g>
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1083">
<g
id="g1087"
transform="translate(-941.26306,-1493.7234)">
<path
d="M -77.063638,2283.1277 H 1922.9364 V 283.12772 H -77.063638 Z"
id="path1085" />
</g>
</clipPath>
</defs>
<g
id="layer1"
transform="translate(-96.294406,-113.9353)">
<g
id="g70"
transform="matrix(0.35277777,0,0,-0.35277777,100.41097,127.47916)"
clip-path="url(#clipPath1167)"
style="fill:#2e3440;fill-opacity:1">
<path
d="M 0,0 C 6.633,-3.91 14.348,-4.302 20.992,-1.732 20.009,5.333 15.93,11.893 9.31,15.795 2.69,19.697 -5.025,20.088 -11.669,17.519 -10.7,10.462 -6.62,3.901 0,0"
style="fill:#2e3440;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path72" />
</g>
<g
id="g74"
transform="matrix(0.35277777,0,0,-0.35277777,106.63384,133.21363)"
clip-path="url(#clipPath1161)"
style="fill:#2e3440;fill-opacity:1">
<path
d="m 0,0 c -6.62,3.901 -14.335,4.293 -20.979,1.724 0.97,-7.058 5.049,-13.618 11.669,-17.519 6.633,-3.91 14.348,-4.301 20.992,-1.732 C 10.699,-10.462 6.62,-3.902 0,0"
style="fill:#2e3440;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path76" />
</g>
<g
id="g78"
transform="matrix(0.35277777,0,0,-0.35277777,107.19786,150.50755)"
clip-path="url(#clipPath1155)"
style="fill:#2e3440;fill-opacity:1">
<path
d="M 0,0 C 6.633,-3.909 14.348,-4.301 20.992,-1.731 20.009,5.333 15.93,11.894 9.31,15.795 2.69,19.697 -5.026,20.088 -11.669,17.52 -10.7,10.461 -6.62,3.902 0,0"
style="fill:#2e3440;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path80" />
</g>
<g
id="g98"
transform="matrix(0.35277777,0,0,-0.35277777,129.16573,138.05504)"
clip-path="url(#clipPath1125)"
style="fill:#2e3440;fill-opacity:1">
<path
d="M 0,0 C 6.644,-2.57 14.358,-2.178 20.992,1.732 27.612,5.633 31.691,12.194 32.661,19.25 26.017,21.82 18.302,21.429 11.682,17.527 5.062,13.625 0.982,7.065 0,0"
style="fill:#2e3440;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path100" />
</g>
<g
id="g102"
transform="matrix(0.35277777,0,0,-0.35277777,132.036,149.80546)"
clip-path="url(#clipPath1119)"
style="fill:#2e3440;fill-opacity:1">
<path
d="M 0,0 C 6.62,3.901 10.699,10.461 11.669,17.519 5.025,20.088 -2.689,19.696 -9.31,15.795 -15.93,11.893 -20.009,5.333 -20.992,-1.732 -14.348,-4.301 -6.633,-3.91 0,0"
style="fill:#2e3440;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path104" />
</g>
<g
id="g106"
transform="matrix(0.35277777,0,0,-0.35277777,139.41553,131.41004)"
clip-path="url(#clipPath1113)"
style="fill:#2e3440;fill-opacity:1">
<path
d="m -27.40181,13.441787 c 6.644,-2.57 14.359,-2.178 20.9920004,1.731 6.62000002,3.902 10.699,10.461 11.669,17.519 -6.644,2.569 -14.359,2.178 -20.9790004,-1.724 -6.62,-3.901 -10.7,-10.462 -11.682,-17.526"
style="fill:#2e3440;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path108" />
</g>
<g
id="g110"
transform="matrix(0.35277777,0,0,-0.35277777,116.37715,121.06317)"
clip-path="url(#clipPath1107)"
style="fill:#2e3440;fill-opacity:1">
<path
d="m 0,0 c 1.271,7.579 -1.125,14.922 -5.904,20.205 -6.242,-3.433 -10.906,-9.591 -12.178,-17.169 -1.275,-7.594 1.123,-14.937 5.902,-20.22 C -5.936,-13.736 -1.273,-7.578 0,0"
style="fill:#2e3440;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path112" />
</g>
<g
id="g114"
transform="matrix(0.35277777,0,0,-0.35277777,123.25775,134.69217)"
clip-path="url(#clipPath1101)"
style="fill:#2e3440;fill-opacity:1">
<path
d="m 0,0 c 1.271,7.579 -1.125,14.922 -5.904,20.206 -6.242,-3.434 -10.906,-9.592 -12.178,-17.17 -1.275,-7.593 1.123,-14.937 5.902,-20.22 C -5.937,-13.736 -1.273,-7.578 0,0"
style="fill:#2e3440;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path116" />
</g>
<g
id="g126"
transform="matrix(0.35277777,0,0,-0.35277777,125.36425,127.9867)"
clip-path="url(#clipPath1083)"
style="fill:#2e3440;fill-opacity:1">
<path
d="M 0,0 C 4.779,5.283 7.176,12.627 5.901,20.22 4.629,27.798 -0.035,33.956 -6.277,37.39 -11.055,32.106 -13.453,24.763 -12.18,17.184 -10.908,9.606 -6.244,3.448 0,0"
style="fill:#2e3440;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path128" />
</g>
<g
id="g10"
transform="translate(54.26113,76.790102)"
style="fill:#2e3440;fill-opacity:1;stroke:#2e3440;stroke-opacity:1">
<path
style="fill:#2e3440;fill-opacity:1;stroke:#2e3440;stroke-width:3;stroke-linecap:butt;stroke-dasharray:none;stroke-opacity:1"
d="m 65.113709,84.638921 c -0.346049,-9.794303 8.85917,-32.693347 8.85917,-32.693347"
id="path9" />
<path
style="fill:#2e3440;fill-opacity:1;stroke:#2e3440;stroke-width:3;stroke-linecap:butt;stroke-dasharray:none;stroke-opacity:1"
d="m 65.108044,84.684262 c 0.346049,-9.794303 -8.85917,-32.693347 -8.85917,-32.693347"
id="path9-7" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

resources/img/logo.svg
+89
View File
@@ -0,0 +1,89 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 45.742326 80.310542"
version="1.1"
id="svg12"
width="45.742325"
height="80.310539"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs12" />
<style id="style1">
svg {
--fill: #2E3440;
}
@media (prefers-color-scheme: dark) {
svg {
--fill: #D8DEE9;
}
}
</style>
<g
class="stroke"
id="branches"
transform="translate(-42.033271,-37.145192)">
<path
d="m 65.113709,84.638921 c -0.346049,-9.794303 8.85917,-32.693347 8.85917,-32.693347"
id="path1"
style="fill:none;stroke:var(--fill);stroke-width:3;stroke-dasharray:none;stroke-opacity:1" />
<path
d="m 65.108044,84.684262 c 0.346049,-9.794303 -8.85917,-32.693347 -8.85917,-32.693347"
id="path2"
style="fill:none;stroke:var(--fill);stroke-width:3;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
class="leaf"
id="g1"
style="fill:var(--fill);fill-opacity:1">
<path
d="M 0,0 C 6.633,-3.91 14.348,-4.302 20.992,-1.732 20.009,5.333 15.93,11.893 9.31,15.795 2.69,19.697 -5.025,20.088 -11.669,17.519 -10.7,10.462 -6.62,3.901 0,0"
transform="matrix(0.35277777,0,0,-0.35277777,4.116564,13.543871)"
id="path3"
style="fill:var(--fill);fill-opacity:1" />
<path
d="m 0,0 c -6.62,3.901 -14.335,4.293 -20.979,1.724 0.97,-7.058 5.049,-13.618 11.669,-17.519 6.633,-3.91 14.348,-4.301 20.992,-1.732 C 10.699,-10.462 6.62,-3.902 0,0"
transform="matrix(0.35277777,0,0,-0.35277777,10.339434,19.278333)"
id="path4"
style="fill:var(--fill);fill-opacity:1" />
<path
d="M 0,0 C 6.633,-3.909 14.348,-4.301 20.992,-1.731 20.009,5.333 15.93,11.894 9.31,15.795 2.69,19.697 -5.026,20.088 -11.669,17.52 -10.7,10.461 -6.62,3.902 0,0"
transform="matrix(0.35277777,0,0,-0.35277777,10.903454,36.572256)"
id="path5"
style="fill:var(--fill);fill-opacity:1" />
<path
d="M 0,0 C 6.644,-2.57 14.358,-2.178 20.992,1.732 27.612,5.633 31.691,12.194 32.661,19.25 26.017,21.82 18.302,21.429 11.682,17.527 5.062,13.625 0.982,7.065 0,0"
transform="matrix(0.35277777,0,0,-0.35277777,32.871328,24.119748)"
id="path6"
style="fill:var(--fill);fill-opacity:1" />
<path
d="M 0,0 C 6.62,3.901 10.699,10.461 11.669,17.519 5.025,20.088 -2.689,19.696 -9.31,15.795 -15.93,11.893 -20.009,5.333 -20.992,-1.732 -14.348,-4.301 -6.633,-3.91 0,0"
transform="matrix(0.35277777,0,0,-0.35277777,35.741597,35.870171)"
id="path7"
style="fill:var(--fill);fill-opacity:1" />
<path
d="m -27.40181,13.441787 c 6.644,-2.57 14.359,-2.178 20.9920004,1.731 6.62000002,3.902 10.699,10.461 11.669,17.519 -6.644,2.569 -14.359,2.178 -20.9790004,-1.724 -6.62,-3.901 -10.7,-10.462 -11.682,-17.526"
transform="matrix(0.35277777,0,0,-0.35277777,43.12113,17.474745)"
id="path8"
style="fill:var(--fill);fill-opacity:1" />
<path
d="m 0,0 c 1.271,7.579 -1.125,14.922 -5.904,20.205 -6.242,-3.433 -10.906,-9.591 -12.178,-17.169 -1.275,-7.594 1.123,-14.937 5.902,-20.22 C -5.936,-13.736 -1.273,-7.578 0,0"
transform="matrix(0.35277777,0,0,-0.35277777,20.082753,7.127875)"
id="path9"
style="fill:var(--fill);fill-opacity:1" />
<path
d="m 0,0 c 1.271,7.579 -1.125,14.922 -5.904,20.206 -6.242,-3.434 -10.906,-9.592 -12.178,-17.17 -1.275,-7.593 1.123,-14.937 5.902,-20.22 C -5.937,-13.736 -1.273,-7.578 0,0"
transform="matrix(0.35277777,0,0,-0.35277777,26.963346,20.756878)"
id="path10"
style="fill:var(--fill);fill-opacity:1" />
<path
d="M 0,0 C 4.779,5.283 7.176,12.627 5.901,20.22 4.629,27.798 -0.035,33.956 -6.277,37.39 -11.055,32.106 -13.453,24.763 -12.18,17.184 -10.908,9.606 -6.244,3.448 0,0"
transform="matrix(0.35277777,0,0,-0.35277777,29.06985,14.051408)"
id="path11"
style="fill:var(--fill);fill-opacity:1" />
</g>
<path
class="fill"
d="m 23.308833,63.179301 -3.288947,-3.831872 2.16535,-2.433461 1.123597,-1.262592 1.119364,1.257653 2.169936,2.4384 z M 37.853155,39.714993 c -0.02117,0.08396 -0.9652,3.0988 -3.220508,5.991225 -1.128536,1.453444 -2.574573,2.872317 -4.37515,3.93065 -1.617486,0.947914 -3.517195,1.617839 -5.820481,1.786467 l -1.128183,-1.267531 -1.127125,1.266825 C 19.838911,51.249415 17.912391,50.557971 16.276561,49.58254 13.551705,47.957293 11.640003,45.483263 10.434208,43.388115 9.8309581,42.34354 9.4048026,41.401624 9.134222,40.732051 8.9991081,40.397265 8.902447,40.131271 8.8414165,39.954529 8.8107248,39.865982 8.7892053,39.800013 8.7761526,39.75909 l -0.013053,-0.04233 -0.00212,-0.006 L 8.374688,38.405835 H 0.87287218 v 3.653366 H 5.7302693 c 0.5323417,1.327503 1.5515166,3.495323 3.2441444,5.720645 1.3409083,1.757539 3.1143223,3.553177 5.4257223,4.937477 1.423105,0.854428 3.055761,1.541992 4.884914,1.960034 l -1.365956,1.534936 -2.751314,3.091744 4.069998,4.741686 c -1.8415,0.426861 -3.481212,1.128536 -4.909256,1.995664 -3.439936,2.087739 -5.6744305,5.06095 -7.0735472,7.485944 -0.7094361,1.234017 -1.2043833,2.33292 -1.5250583,3.129845 H 0.87287218 v 3.653366 H 8.3746915 l 0.3869972,-1.306689 c 0.017992,-0.07479 0.9574388,-3.071988 3.1996943,-5.959122 1.120775,-1.448505 2.556934,-2.865966 4.343753,-3.928886 1.594908,-0.94615 3.464983,-1.623483 5.726994,-1.814336 l 1.276703,1.486959 1.276703,-1.486959 c 2.304697,0.193675 4.202641,0.89147 5.8166,1.865136 2.703336,1.631245 4.598811,4.097514 5.794022,6.182431 0.597605,1.039283 1.01988,1.975908 1.288344,2.640894 0.134056,0.33267 0.229658,0.597253 0.289983,0.772583 0.02999,0.08784 0.05151,0.153459 0.06456,0.194028 l 0.01305,0.04198 0.0014,0.0056 0.385939,1.306336 h 7.502877 V 76.657176 H 40.885985 C 40.357172,75.336729 39.347522,73.18549 37.673944,70.973573 36.344677,69.222384 34.586433,67.430273 32.294788,66.041387 30.865333,65.173554 29.224563,64.47082 27.3813,64.044312 L 31.450238,59.304037 28.698572,56.21194 27.33438,54.679121 c 1.829153,-0.417336 3.461456,-1.104195 4.884208,-1.957917 3.46957,-2.081036 5.72135,-5.0673 7.129639,-7.505347 0.716845,-1.244953 1.216025,-2.353733 1.538111,-3.156656 h 4.855986 v -3.653366 h -7.502877 z"
id="path12"
style="fill:var(--fill);fill-opacity:1;stroke-width:0.352778" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB