1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
| .theme-container { display: flex; flex-wrap: wrap; }
.theme-container .theme-item { margin: 0 var(--padding); }
.mockup { text-align: left; margin: auto; width: 166px; height: 126px; font-size: 80%; }
.mockup .mock-link:hover, .mockup .mock-link-visited:hover, .mockup .mock-link-selected:hover { text-decoration: underline; cursor: pointer; }
.mockup .mock-nav { height: 18px; }
.mockup .mock-nav .icon { margin-left: 2px; }
.mockup .mock-muted { margin: 2px 6px; padding: 2px; }
.mockup .mock-menu { float: left; width: 30px; height: 102px; } .mockup .mock-menu .mock-link, .mockup .mock-menu .mock-link-selected { padding-left: 4px; }
.mockup .mock-main { padding: 4px 4px 4px 30px; height: 102px; } .mockup .mock-main ul { margin-top: var(--padding-small); }
.mockup .mock-list { margin-left: 2px; padding-left: 4px; }
.icon-container { margin: var(--padding); width: 80px; text-align: center; } .icon-container svg { width: 64px; height: 64px }
.choice label { display: block; float: left; margin-right: var(--padding); }
.choice input { display: none; }
.choice .title { text-align: center; cursor: pointer; }
.choice input ~ * { border: 3px solid transparent; } .choice input:checked ~ * { border: 3px solid var(--color-background-muted); background-color: var(--color-background-muted); }
|