├── README.md ├── pom.xml ├── screenshot.png └── src ├── main ├── java │ └── dev │ │ └── anthonybruno │ │ └── htmx │ │ └── Server.java └── resources │ ├── log4j.properties │ └── public │ └── style │ └── pico.min.css └── test └── java └── dev └── anthonybruno └── htmx └── ServerTest.java /README.md: -------------------------------------------------------------------------------- 1 | # HTMX Java example 2 | 3 | ## WTF is this? 4 | 5 | This is a groundbreaking piece of technology. 6 | This application combines blockchain, AI and secrets stolen from Area 51 to bring you wealth beyond 7 | your wildest dreams. 8 | 9 | ## Really? 10 | 11 | Nah, it's just a todo list app. 12 | 13 | ![A beautiful TODO app](/screenshot.png) 14 | 15 | ## Great, we need more of them. 16 | 17 | I agree! This one has a bit of a unique stack, it uses: 18 | 19 | - Java (Yes, people still use this!) 20 | - [HTMX](https://htmx.org/): Frontend """framework""" 21 | - [picocss](https://picocss.com/): Minimal CSS library (the first result for "minimal css") 22 | - [Javalin](https://javalin.io/): Backend web server. 23 | - [j2html](https://j2html.com/): Html builder library. 24 | 25 | Which allows the whole thing to be written a [single Java file](https://github.com/AussieGuy0/java-htmx-todo/blob/e8c174b8bfd3173e2b392601b460dc75411db7c5/src/main/java/dev/anthonybruno/htmx/Server.java). 26 | There is not a single line of Javascript in this whole project!^ 27 | 28 | ^ Yes, technically HTMX does bring in Javascript but ya know what I'm saying. 29 | 30 | ## Wow...there is an awful lot of inline styling in this project. 31 | 32 | This is just an example application, not a fully fledged deploy-on-prod thing! 33 | 34 | If you were doing it properly, maybe you would write it in css files, import tailwind or something. 35 | 36 | ## Alright alright, how do I run this? 37 | 38 | Load it in your favourite Java IDE (like IntelliJ or....uh...) and run the main method in `Server`. 39 | Access it via `localhost:8080` in a web browser. 40 | 41 | In the root directory, we can also run it by: 42 | 43 | 1. `mvn package` 44 | 2. `java -jar target/htmx-1.0-SNAPSHOT.jar` 45 | -------------------------------------------------------------------------------- /pom.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 4.0.0 6 | 7 | dev.anthonybruno.htmx 8 | htmx 9 | 1.0-SNAPSHOT 10 | 11 | 12 | 20 13 | 20 14 | UTF-8 15 | 16 | 17 | 18 | 19 | 20 | org.apache.maven.plugins 21 | maven-shade-plugin 22 | 3.4.1 23 | 24 | 25 | package 26 | 27 | shade 28 | 29 | 30 | 31 | 32 | dev.anthonybruno.htmx.Server 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | io.javalin 45 | javalin 46 | 5.5.0 47 | 48 | 49 | org.webjars.npm 50 | htmx.org 51 | 1.9.2 52 | 53 | 54 | org.slf4j 55 | slf4j-api 56 | 2.0.5 57 | 58 | 59 | org.slf4j 60 | slf4j-reload4j 61 | 2.0.5 62 | 63 | 64 | com.j2html 65 | j2html 66 | 1.6.0 67 | 68 | 69 | org.junit.jupiter 70 | junit-jupiter 71 | 5.9.2 72 | test 73 | 74 | 75 | org.assertj 76 | assertj-core 77 | 3.24.2 78 | test 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AussieGuy0/java-htmx-todo/b257f0b35499016407ae8bd6b5f88b3cd19e0b35/screenshot.png -------------------------------------------------------------------------------- /src/main/java/dev/anthonybruno/htmx/Server.java: -------------------------------------------------------------------------------- 1 | package dev.anthonybruno.htmx; 2 | 3 | import io.javalin.Javalin; 4 | import io.javalin.http.HandlerType; 5 | import j2html.tags.specialized.LiTag; 6 | import j2html.tags.specialized.UlTag; 7 | import org.slf4j.Logger; 8 | import org.slf4j.LoggerFactory; 9 | 10 | import java.util.LinkedHashMap; 11 | import java.util.Map; 12 | import java.util.UUID; 13 | import java.util.stream.Collectors; 14 | 15 | import static j2html.TagCreator.*; 16 | 17 | public class Server implements AutoCloseable { 18 | 19 | private static final Logger log = LoggerFactory.getLogger(Server.class); 20 | 21 | /** 22 | * Represents a single todo item. 23 | */ 24 | public record Todo(String id, String content, boolean completed) { 25 | } 26 | 27 | private final Javalin javalin; 28 | 29 | 30 | public Server() { 31 | // In-memory 'todo' store. 32 | var exampleTodo = new Todo(UUID.randomUUID().toString(), "Buy milk", false); 33 | var idToTodo = new LinkedHashMap(); 34 | idToTodo.put(exampleTodo.id, exampleTodo); 35 | 36 | // Set up Javalin server. 37 | javalin = Javalin.create(config -> { 38 | config.staticFiles.enableWebjars(); 39 | config.staticFiles.add("public"); 40 | }); 41 | 42 | javalin.addHandler(HandlerType.GET, "/", ctx -> { 43 | var content = html( 44 | head( 45 | script().withSrc("/webjars/htmx.org/1.9.2/dist/htmx.min.js"), 46 | link().withRel("stylesheet").withHref("/style/pico.min.css") 47 | ), 48 | body( 49 | div( 50 | h1("Todo App"), 51 | createTodoList(idToTodo) 52 | ).withClass("container") 53 | ) 54 | ); 55 | var rendered = "\n" + content.render(); 56 | ctx.header("Cache-Control", "no-store"); 57 | ctx.html(rendered); 58 | }); 59 | 60 | // Create new todo item. 61 | javalin.addHandler(HandlerType.POST, "/todos", ctx -> { 62 | var newContent = ctx.formParam("content"); 63 | var newTodo = new Todo(UUID.randomUUID().toString(), newContent, false); 64 | idToTodo.put(newTodo.id, newTodo); 65 | ctx.html(createTodoList(idToTodo).render()); 66 | }); 67 | 68 | // Update the content of a todo item. 69 | javalin.addHandler(HandlerType.POST, "/todos/{id}", ctx -> { 70 | var id = ctx.pathParam("id"); 71 | var newContent = ctx.formParam("value"); 72 | 73 | var updatedTodo = idToTodo.computeIfPresent(id, (_id, oldTodo) -> new Todo(id, newContent, oldTodo.completed)); 74 | 75 | ctx.html(createTodoItem(updatedTodo, false).render()); 76 | }); 77 | 78 | // Toggle the completed status of a specified todo item. 79 | javalin.addHandler(HandlerType.POST, "/todos/{id}/toggle", ctx -> { 80 | var id = ctx.pathParam("id"); 81 | 82 | var updatedTodo = idToTodo.computeIfPresent(id, (_id, oldTodo) -> new Todo(id, oldTodo.content, !oldTodo.completed)); 83 | 84 | ctx.html(createTodoItem(updatedTodo, false).render()); 85 | }); 86 | 87 | // Returns an 'edit' view of a todo item. 88 | javalin.addHandler(HandlerType.POST, "/todos/{id}/edit", ctx -> { 89 | var id = ctx.pathParam("id"); 90 | 91 | var todo = idToTodo.get(id); 92 | 93 | ctx.html(createTodoItem(todo, true).render()); 94 | }); 95 | 96 | // Basic logging of requests/responses. 97 | javalin.after((ctx) -> { 98 | log.info("{} {} {}", ctx.req().getMethod(), ctx.path(), ctx.status()); 99 | }); 100 | } 101 | 102 | private UlTag createTodoList(Map idToTodo) { 103 | return ul() 104 | .withId("todo-list") 105 | .with( 106 | idToTodo.values().stream() 107 | .map(todo -> createTodoItem(todo, false)) 108 | ) 109 | .with( 110 | li( 111 | form( 112 | input() 113 | .isRequired() 114 | .withType("text") 115 | .withName("content"), 116 | input() 117 | .withValue("Add") 118 | .withType("submit") 119 | ) 120 | .withStyle("display: flex;") 121 | .attr("hx-swap", "outerHTML") 122 | .attr("hx-target", "#todo-list") 123 | .attr("hx-post", "/todos") 124 | ) 125 | .withStyle("list-style-type: none") 126 | ); 127 | } 128 | 129 | public static LiTag createTodoItem(Todo todo, boolean editing) { 130 | var text = div(todo.content) 131 | .attr("hx-post", "/todos/" + todo.id + "/edit") 132 | .withStyle("flex-grow: 1; cursor: text;") 133 | .withCondStyle(todo.completed, "text-decoration: line-through; flex-grow: 1; cursor: text;"); 134 | var editInput = input() 135 | .withValue(todo.content) 136 | .withName("value") 137 | .withType("text") 138 | .withStyle("flex-grow: 2;") 139 | .isAutofocus() 140 | .attr("hx-post", "/todos/" + todo.id) 141 | .attr("hx-target", "#todo-" + todo.id); 142 | var completeCheckbox = (todo.completed ? 143 | input() 144 | .isChecked() : 145 | input()) 146 | .withStyle("flex-basis: 0; min-width: 20px") 147 | .withType("checkbox") 148 | .withCondDisabled(editing) 149 | .attr("hx-post", "/todos/" + todo.id + "/toggle"); 150 | return li( 151 | completeCheckbox, 152 | editing ? editInput : text 153 | ) 154 | .attr("hx-target", "#todo-" + todo.id) 155 | .attr("hx-swap", "outerHTML") 156 | .withId("todo-" + todo.id) 157 | .withStyle("display: flex; align-items: center;"); 158 | } 159 | 160 | public void start() { 161 | javalin.start(); 162 | } 163 | 164 | @Override 165 | public void close() throws Exception { 166 | javalin.close(); 167 | } 168 | 169 | // Run the thing! 170 | public static void main(String[] args) { 171 | var server = new Server(); 172 | server.start(); 173 | } 174 | } 175 | -------------------------------------------------------------------------------- /src/main/resources/log4j.properties: -------------------------------------------------------------------------------- 1 | log4j.rootLogger=INFO, STDOUT 2 | log4j.logger.deng=INFO 3 | log4j.appender.STDOUT=org.apache.log4j.ConsoleAppender 4 | log4j.appender.STDOUT.layout=org.apache.log4j.PatternLayout 5 | log4j.appender.STDOUT.layout.ConversionPattern=%5p [%t] (%F:%L) - %m%n 6 | -------------------------------------------------------------------------------- /src/main/resources/public/style/pico.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | * Pico CSS v1.5.10 (https://picocss.com) 4 | * Copyright 2019-2023 - Licensed under MIT 5 | */:root { 6 | --font-family:system-ui, 7 | -apple-system, 8 | "Segoe UI", 9 | "Roboto", 10 | "Ubuntu", 11 | "Cantarell", 12 | "Noto Sans", 13 | sans-serif, 14 | "Apple Color Emoji", 15 | "Segoe UI Emoji", 16 | "Segoe UI Symbol", 17 | "Noto Color Emoji"; 18 | --line-height:1.5; 19 | --font-weight:400; 20 | --font-size:16px; 21 | --border-radius:0.25rem; 22 | --border-width:1px; 23 | --outline-width:3px; 24 | --spacing:1rem; 25 | --typography-spacing-vertical:1.5rem; 26 | --block-spacing-vertical:calc(var(--spacing) * 2); 27 | --block-spacing-horizontal:var(--spacing); 28 | --grid-spacing-vertical:0; 29 | --grid-spacing-horizontal:var(--spacing); 30 | --form-element-spacing-vertical:0.75rem; 31 | --form-element-spacing-horizontal:1rem; 32 | --nav-element-spacing-vertical:1rem; 33 | --nav-element-spacing-horizontal:0.5rem; 34 | --nav-link-spacing-vertical:0.5rem; 35 | --nav-link-spacing-horizontal:0.5rem; 36 | --form-label-font-weight:var(--font-weight); 37 | --transition:0.2s ease-in-out; 38 | --modal-overlay-backdrop-filter:blur(0.25rem) 39 | } 40 | @media (min-width:576px) { 41 | :root { 42 | --font-size:17px 43 | } 44 | } 45 | @media (min-width:768px) { 46 | :root { 47 | --font-size:18px 48 | } 49 | } 50 | @media (min-width:992px) { 51 | :root { 52 | --font-size:19px 53 | } 54 | } 55 | @media (min-width:1200px) { 56 | :root { 57 | --font-size:20px 58 | } 59 | } 60 | @media (min-width:576px) { 61 | body>footer, 62 | body>header, 63 | body>main, 64 | section { 65 | --block-spacing-vertical:calc(var(--spacing) * 2.5) 66 | } 67 | } 68 | @media (min-width:768px) { 69 | body>footer, 70 | body>header, 71 | body>main, 72 | section { 73 | --block-spacing-vertical:calc(var(--spacing) * 3) 74 | } 75 | } 76 | @media (min-width:992px) { 77 | body>footer, 78 | body>header, 79 | body>main, 80 | section { 81 | --block-spacing-vertical:calc(var(--spacing) * 3.5) 82 | } 83 | } 84 | @media (min-width:1200px) { 85 | body>footer, 86 | body>header, 87 | body>main, 88 | section { 89 | --block-spacing-vertical:calc(var(--spacing) * 4) 90 | } 91 | } 92 | @media (min-width:576px) { 93 | article { 94 | --block-spacing-horizontal:calc(var(--spacing) * 1.25) 95 | } 96 | } 97 | @media (min-width:768px) { 98 | article { 99 | --block-spacing-horizontal:calc(var(--spacing) * 1.5) 100 | } 101 | } 102 | @media (min-width:992px) { 103 | article { 104 | --block-spacing-horizontal:calc(var(--spacing) * 1.75) 105 | } 106 | } 107 | @media (min-width:1200px) { 108 | article { 109 | --block-spacing-horizontal:calc(var(--spacing) * 2) 110 | } 111 | } 112 | dialog>article { 113 | --block-spacing-vertical:calc(var(--spacing) * 2); 114 | --block-spacing-horizontal:var(--spacing) 115 | } 116 | @media (min-width:576px) { 117 | dialog>article { 118 | --block-spacing-vertical:calc(var(--spacing) * 2.5); 119 | --block-spacing-horizontal:calc(var(--spacing) * 1.25) 120 | } 121 | } 122 | @media (min-width:768px) { 123 | dialog>article { 124 | --block-spacing-vertical:calc(var(--spacing) * 3); 125 | --block-spacing-horizontal:calc(var(--spacing) * 1.5) 126 | } 127 | } 128 | a { 129 | --text-decoration:none 130 | } 131 | a.contrast, 132 | a.secondary { 133 | --text-decoration:underline 134 | } 135 | small { 136 | --font-size:0.875em 137 | } 138 | h1, 139 | h2, 140 | h3, 141 | h4, 142 | h5, 143 | h6 { 144 | --font-weight:700 145 | } 146 | h1 { 147 | --font-size:2rem; 148 | --typography-spacing-vertical:3rem 149 | } 150 | h2 { 151 | --font-size:1.75rem; 152 | --typography-spacing-vertical:2.625rem 153 | } 154 | h3 { 155 | --font-size:1.5rem; 156 | --typography-spacing-vertical:2.25rem 157 | } 158 | h4 { 159 | --font-size:1.25rem; 160 | --typography-spacing-vertical:1.874rem 161 | } 162 | h5 { 163 | --font-size:1.125rem; 164 | --typography-spacing-vertical:1.6875rem 165 | } 166 | [type=checkbox], 167 | [type=radio] { 168 | --border-width:2px 169 | } 170 | [type=checkbox][role=switch] { 171 | --border-width:3px 172 | } 173 | tfoot td, 174 | tfoot th, 175 | thead td, 176 | thead th { 177 | --border-width:3px 178 | } 179 | :not(thead, 180 | tfoot)>*>td { 181 | --font-size:0.875em 182 | } 183 | code, 184 | kbd, 185 | pre, 186 | samp { 187 | --font-family:"Menlo","Consolas","Roboto Mono","Ubuntu Monospace","Noto Mono","Oxygen Mono","Liberation Mono",monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" 188 | } 189 | kbd { 190 | --font-weight:bolder 191 | } 192 | :root:not([data-theme=dark]), 193 | [data-theme=light] { 194 | --background-color:#fff; 195 | --color:hsl(205, 20%, 32%); 196 | --h1-color:hsl(205, 30%, 15%); 197 | --h2-color:#24333e; 198 | --h3-color:hsl(205, 25%, 23%); 199 | --h4-color:#374956; 200 | --h5-color:hsl(205, 20%, 32%); 201 | --h6-color:#4d606d; 202 | --muted-color:hsl(205, 10%, 50%); 203 | --muted-border-color:hsl(205, 20%, 94%); 204 | --primary:hsl(195, 85%, 41%); 205 | --primary-hover:hsl(195, 90%, 32%); 206 | --primary-focus:rgba(16, 149, 193, 0.125); 207 | --primary-inverse:#fff; 208 | --secondary:hsl(205, 15%, 41%); 209 | --secondary-hover:hsl(205, 20%, 32%); 210 | --secondary-focus:rgba(89, 107, 120, 0.125); 211 | --secondary-inverse:#fff; 212 | --contrast:hsl(205, 30%, 15%); 213 | --contrast-hover:#000; 214 | --contrast-focus:rgba(89, 107, 120, 0.125); 215 | --contrast-inverse:#fff; 216 | --mark-background-color:#fff2ca; 217 | --mark-color:#543a26; 218 | --ins-color:#388e3c; 219 | --del-color:#c62828; 220 | --blockquote-border-color:var(--muted-border-color); 221 | --blockquote-footer-color:var(--muted-color); 222 | --button-box-shadow:0 0 0 rgba(0, 0, 0, 0); 223 | --button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0); 224 | --form-element-background-color:transparent; 225 | --form-element-border-color:hsl(205, 14%, 68%); 226 | --form-element-color:var(--color); 227 | --form-element-placeholder-color:var(--muted-color); 228 | --form-element-active-background-color:transparent; 229 | --form-element-active-border-color:var(--primary); 230 | --form-element-focus-color:var(--primary-focus); 231 | --form-element-disabled-background-color:hsl(205, 18%, 86%); 232 | --form-element-disabled-border-color:hsl(205, 14%, 68%); 233 | --form-element-disabled-opacity:0.5; 234 | --form-element-invalid-border-color:#c62828; 235 | --form-element-invalid-active-border-color:#d32f2f; 236 | --form-element-invalid-focus-color:rgba(211, 47, 47, 0.125); 237 | --form-element-valid-border-color:#388e3c; 238 | --form-element-valid-active-border-color:#43a047; 239 | --form-element-valid-focus-color:rgba(67, 160, 71, 0.125); 240 | --switch-background-color:hsl(205, 16%, 77%); 241 | --switch-color:var(--primary-inverse); 242 | --switch-checked-background-color:var(--primary); 243 | --range-border-color:hsl(205, 18%, 86%); 244 | --range-active-border-color:hsl(205, 16%, 77%); 245 | --range-thumb-border-color:var(--background-color); 246 | --range-thumb-color:var(--secondary); 247 | --range-thumb-hover-color:var(--secondary-hover); 248 | --range-thumb-active-color:var(--primary); 249 | --table-border-color:var(--muted-border-color); 250 | --table-row-stripped-background-color:#f6f8f9; 251 | --code-background-color:hsl(205, 20%, 94%); 252 | --code-color:var(--muted-color); 253 | --code-kbd-background-color:var(--contrast); 254 | --code-kbd-color:var(--contrast-inverse); 255 | --code-tag-color:hsl(330, 40%, 50%); 256 | --code-property-color:hsl(185, 40%, 40%); 257 | --code-value-color:hsl(40, 20%, 50%); 258 | --code-comment-color:hsl(205, 14%, 68%); 259 | --accordion-border-color:var(--muted-border-color); 260 | --accordion-close-summary-color:var(--color); 261 | --accordion-open-summary-color:var(--muted-color); 262 | --card-background-color:var(--background-color); 263 | --card-border-color:var(--muted-border-color); 264 | --card-box-shadow:0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),0 0 0 0.0625rem rgba(27, 40, 50, 0.015); 265 | --card-sectionning-background-color:#fbfbfc; 266 | --dropdown-background-color:#fbfbfc; 267 | --dropdown-border-color:#e1e6eb; 268 | --dropdown-box-shadow:var(--card-box-shadow); 269 | --dropdown-color:var(--color); 270 | --dropdown-hover-background-color:hsl(205, 20%, 94%); 271 | --modal-overlay-background-color:rgba(213, 220, 226, 0.7); 272 | --progress-background-color:hsl(205, 18%, 86%); 273 | --progress-color:var(--primary); 274 | --loading-spinner-opacity:0.5; 275 | --tooltip-background-color:var(--contrast); 276 | --tooltip-color:var(--contrast-inverse); 277 | --icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 278 | --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 279 | --icon-chevron-button:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 280 | --icon-chevron-button-inverse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 281 | --icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); 282 | --icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); 283 | --icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 284 | --icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); 285 | --icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); 286 | --icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); 287 | --icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 288 | color-scheme:light 289 | } 290 | @media only screen and (prefers-color-scheme:dark) { 291 | :root:not([data-theme]) { 292 | --background-color:#11191f; 293 | --color:hsl(205, 16%, 77%); 294 | --h1-color:hsl(205, 20%, 94%); 295 | --h2-color:#e1e6eb; 296 | --h3-color:hsl(205, 18%, 86%); 297 | --h4-color:#c8d1d8; 298 | --h5-color:hsl(205, 16%, 77%); 299 | --h6-color:#afbbc4; 300 | --muted-color:hsl(205, 10%, 50%); 301 | --muted-border-color:#1f2d38; 302 | --primary:hsl(195, 85%, 41%); 303 | --primary-hover:hsl(195, 80%, 50%); 304 | --primary-focus:rgba(16, 149, 193, 0.25); 305 | --primary-inverse:#fff; 306 | --secondary:hsl(205, 15%, 41%); 307 | --secondary-hover:hsl(205, 10%, 50%); 308 | --secondary-focus:rgba(115, 130, 140, 0.25); 309 | --secondary-inverse:#fff; 310 | --contrast:hsl(205, 20%, 94%); 311 | --contrast-hover:#fff; 312 | --contrast-focus:rgba(115, 130, 140, 0.25); 313 | --contrast-inverse:#000; 314 | --mark-background-color:#d1c284; 315 | --mark-color:#11191f; 316 | --ins-color:#388e3c; 317 | --del-color:#c62828; 318 | --blockquote-border-color:var(--muted-border-color); 319 | --blockquote-footer-color:var(--muted-color); 320 | --button-box-shadow:0 0 0 rgba(0, 0, 0, 0); 321 | --button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0); 322 | --form-element-background-color:#11191f; 323 | --form-element-border-color:#374956; 324 | --form-element-color:var(--color); 325 | --form-element-placeholder-color:var(--muted-color); 326 | --form-element-active-background-color:var(--form-element-background-color); 327 | --form-element-active-border-color:var(--primary); 328 | --form-element-focus-color:var(--primary-focus); 329 | --form-element-disabled-background-color:hsl(205, 25%, 23%); 330 | --form-element-disabled-border-color:hsl(205, 20%, 32%); 331 | --form-element-disabled-opacity:0.5; 332 | --form-element-invalid-border-color:#b71c1c; 333 | --form-element-invalid-active-border-color:#c62828; 334 | --form-element-invalid-focus-color:rgba(198, 40, 40, 0.25); 335 | --form-element-valid-border-color:#2e7d32; 336 | --form-element-valid-active-border-color:#388e3c; 337 | --form-element-valid-focus-color:rgba(56, 142, 60, 0.25); 338 | --switch-background-color:#374956; 339 | --switch-color:var(--primary-inverse); 340 | --switch-checked-background-color:var(--primary); 341 | --range-border-color:#24333e; 342 | --range-active-border-color:hsl(205, 25%, 23%); 343 | --range-thumb-border-color:var(--background-color); 344 | --range-thumb-color:var(--secondary); 345 | --range-thumb-hover-color:var(--secondary-hover); 346 | --range-thumb-active-color:var(--primary); 347 | --table-border-color:var(--muted-border-color); 348 | --table-row-stripped-background-color:rgba(115, 130, 140, 0.05); 349 | --code-background-color:#18232c; 350 | --code-color:var(--muted-color); 351 | --code-kbd-background-color:var(--contrast); 352 | --code-kbd-color:var(--contrast-inverse); 353 | --code-tag-color:hsl(330, 30%, 50%); 354 | --code-property-color:hsl(185, 30%, 50%); 355 | --code-value-color:hsl(40, 10%, 50%); 356 | --code-comment-color:#4d606d; 357 | --accordion-border-color:var(--muted-border-color); 358 | --accordion-active-summary-color:var(--primary); 359 | --accordion-close-summary-color:var(--color); 360 | --accordion-open-summary-color:var(--muted-color); 361 | --card-background-color:#141e26; 362 | --card-border-color:var(--card-background-color); 363 | --card-box-shadow:0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),0 0 0 0.0625rem rgba(0, 0, 0, 0.015); 364 | --card-sectionning-background-color:#18232c; 365 | --dropdown-background-color:hsl(205, 30%, 15%); 366 | --dropdown-border-color:#24333e; 367 | --dropdown-box-shadow:var(--card-box-shadow); 368 | --dropdown-color:var(--color); 369 | --dropdown-hover-background-color:rgba(36, 51, 62, 0.75); 370 | --modal-overlay-background-color:rgba(36, 51, 62, 0.8); 371 | --progress-background-color:#24333e; 372 | --progress-color:var(--primary); 373 | --loading-spinner-opacity:0.5; 374 | --tooltip-background-color:var(--contrast); 375 | --tooltip-color:var(--contrast-inverse); 376 | --icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 377 | --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 378 | --icon-chevron-button:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 379 | --icon-chevron-button-inverse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 380 | --icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); 381 | --icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); 382 | --icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 383 | --icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); 384 | --icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); 385 | --icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); 386 | --icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 387 | color-scheme:dark 388 | } 389 | } 390 | [data-theme=dark] { 391 | --background-color:#11191f; 392 | --color:hsl(205, 16%, 77%); 393 | --h1-color:hsl(205, 20%, 94%); 394 | --h2-color:#e1e6eb; 395 | --h3-color:hsl(205, 18%, 86%); 396 | --h4-color:#c8d1d8; 397 | --h5-color:hsl(205, 16%, 77%); 398 | --h6-color:#afbbc4; 399 | --muted-color:hsl(205, 10%, 50%); 400 | --muted-border-color:#1f2d38; 401 | --primary:hsl(195, 85%, 41%); 402 | --primary-hover:hsl(195, 80%, 50%); 403 | --primary-focus:rgba(16, 149, 193, 0.25); 404 | --primary-inverse:#fff; 405 | --secondary:hsl(205, 15%, 41%); 406 | --secondary-hover:hsl(205, 10%, 50%); 407 | --secondary-focus:rgba(115, 130, 140, 0.25); 408 | --secondary-inverse:#fff; 409 | --contrast:hsl(205, 20%, 94%); 410 | --contrast-hover:#fff; 411 | --contrast-focus:rgba(115, 130, 140, 0.25); 412 | --contrast-inverse:#000; 413 | --mark-background-color:#d1c284; 414 | --mark-color:#11191f; 415 | --ins-color:#388e3c; 416 | --del-color:#c62828; 417 | --blockquote-border-color:var(--muted-border-color); 418 | --blockquote-footer-color:var(--muted-color); 419 | --button-box-shadow:0 0 0 rgba(0, 0, 0, 0); 420 | --button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0); 421 | --form-element-background-color:#11191f; 422 | --form-element-border-color:#374956; 423 | --form-element-color:var(--color); 424 | --form-element-placeholder-color:var(--muted-color); 425 | --form-element-active-background-color:var(--form-element-background-color); 426 | --form-element-active-border-color:var(--primary); 427 | --form-element-focus-color:var(--primary-focus); 428 | --form-element-disabled-background-color:hsl(205, 25%, 23%); 429 | --form-element-disabled-border-color:hsl(205, 20%, 32%); 430 | --form-element-disabled-opacity:0.5; 431 | --form-element-invalid-border-color:#b71c1c; 432 | --form-element-invalid-active-border-color:#c62828; 433 | --form-element-invalid-focus-color:rgba(198, 40, 40, 0.25); 434 | --form-element-valid-border-color:#2e7d32; 435 | --form-element-valid-active-border-color:#388e3c; 436 | --form-element-valid-focus-color:rgba(56, 142, 60, 0.25); 437 | --switch-background-color:#374956; 438 | --switch-color:var(--primary-inverse); 439 | --switch-checked-background-color:var(--primary); 440 | --range-border-color:#24333e; 441 | --range-active-border-color:hsl(205, 25%, 23%); 442 | --range-thumb-border-color:var(--background-color); 443 | --range-thumb-color:var(--secondary); 444 | --range-thumb-hover-color:var(--secondary-hover); 445 | --range-thumb-active-color:var(--primary); 446 | --table-border-color:var(--muted-border-color); 447 | --table-row-stripped-background-color:rgba(115, 130, 140, 0.05); 448 | --code-background-color:#18232c; 449 | --code-color:var(--muted-color); 450 | --code-kbd-background-color:var(--contrast); 451 | --code-kbd-color:var(--contrast-inverse); 452 | --code-tag-color:hsl(330, 30%, 50%); 453 | --code-property-color:hsl(185, 30%, 50%); 454 | --code-value-color:hsl(40, 10%, 50%); 455 | --code-comment-color:#4d606d; 456 | --accordion-border-color:var(--muted-border-color); 457 | --accordion-active-summary-color:var(--primary); 458 | --accordion-close-summary-color:var(--color); 459 | --accordion-open-summary-color:var(--muted-color); 460 | --card-background-color:#141e26; 461 | --card-border-color:var(--card-background-color); 462 | --card-box-shadow:0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),0 0 0 0.0625rem rgba(0, 0, 0, 0.015); 463 | --card-sectionning-background-color:#18232c; 464 | --dropdown-background-color:hsl(205, 30%, 15%); 465 | --dropdown-border-color:#24333e; 466 | --dropdown-box-shadow:var(--card-box-shadow); 467 | --dropdown-color:var(--color); 468 | --dropdown-hover-background-color:rgba(36, 51, 62, 0.75); 469 | --modal-overlay-background-color:rgba(36, 51, 62, 0.8); 470 | --progress-background-color:#24333e; 471 | --progress-color:var(--primary); 472 | --loading-spinner-opacity:0.5; 473 | --tooltip-background-color:var(--contrast); 474 | --tooltip-color:var(--contrast-inverse); 475 | --icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 476 | --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 477 | --icon-chevron-button:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 478 | --icon-chevron-button-inverse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 479 | --icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); 480 | --icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); 481 | --icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 482 | --icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); 483 | --icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); 484 | --icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); 485 | --icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 486 | color-scheme:dark 487 | } 488 | [type=checkbox], 489 | [type=radio], 490 | [type=range], 491 | progress { 492 | accent-color:var(--primary) 493 | } 494 | *, 495 | ::after, 496 | ::before { 497 | box-sizing:border-box; 498 | background-repeat:no-repeat 499 | } 500 | ::after, 501 | ::before { 502 | text-decoration:inherit; 503 | vertical-align:inherit 504 | } 505 | :where(:root) { 506 | -webkit-tap-highlight-color:transparent; 507 | -webkit-text-size-adjust:100%; 508 | -moz-text-size-adjust:100%; 509 | text-size-adjust:100%; 510 | background-color:var(--background-color); 511 | color:var(--color); 512 | font-weight:var(--font-weight); 513 | font-size:var(--font-size); 514 | line-height:var(--line-height); 515 | font-family:var(--font-family); 516 | text-rendering:optimizeLegibility; 517 | overflow-wrap:break-word; 518 | cursor:default; 519 | -moz-tab-size:4; 520 | -o-tab-size:4; 521 | tab-size:4 522 | } 523 | main { 524 | display:block 525 | } 526 | body { 527 | width:100%; 528 | margin:0 529 | } 530 | body>footer, 531 | body>header, 532 | body>main { 533 | width:100%; 534 | margin-right:auto; 535 | margin-left:auto; 536 | padding:var(--block-spacing-vertical) 0 537 | } 538 | .container, 539 | .container-fluid { 540 | width:100%; 541 | margin-right:auto; 542 | margin-left:auto; 543 | padding-right:var(--spacing); 544 | padding-left:var(--spacing) 545 | } 546 | @media (min-width:576px) { 547 | .container { 548 | max-width:510px; 549 | padding-right:0; 550 | padding-left:0 551 | } 552 | } 553 | @media (min-width:768px) { 554 | .container { 555 | max-width:700px 556 | } 557 | } 558 | @media (min-width:992px) { 559 | .container { 560 | max-width:920px 561 | } 562 | } 563 | @media (min-width:1200px) { 564 | .container { 565 | max-width:1130px 566 | } 567 | } 568 | section { 569 | margin-bottom:var(--block-spacing-vertical) 570 | } 571 | .grid { 572 | grid-column-gap:var(--grid-spacing-horizontal); 573 | grid-row-gap:var(--grid-spacing-vertical); 574 | display:grid; 575 | grid-template-columns:1fr; 576 | margin:0 577 | } 578 | @media (min-width:992px) { 579 | .grid { 580 | grid-template-columns:repeat(auto-fit,minmax(0%,1fr)) 581 | } 582 | } 583 | .grid>* { 584 | min-width:0 585 | } 586 | figure { 587 | display:block; 588 | margin:0; 589 | padding:0; 590 | overflow-x:auto 591 | } 592 | figure figcaption { 593 | padding:calc(var(--spacing) * .5) 0; 594 | color:var(--muted-color) 595 | } 596 | b, 597 | strong { 598 | font-weight:bolder 599 | } 600 | sub, 601 | sup { 602 | position:relative; 603 | font-size:.75em; 604 | line-height:0; 605 | vertical-align:baseline 606 | } 607 | sub { 608 | bottom:-.25em 609 | } 610 | sup { 611 | top:-.5em 612 | } 613 | address, 614 | blockquote, 615 | dl, 616 | figure, 617 | form, 618 | ol, 619 | p, 620 | pre, 621 | table, 622 | ul { 623 | margin-top:0; 624 | margin-bottom:var(--typography-spacing-vertical); 625 | color:var(--color); 626 | font-style:normal; 627 | font-weight:var(--font-weight); 628 | font-size:var(--font-size) 629 | } 630 | [role=link], 631 | a { 632 | --color:var(--primary); 633 | --background-color:transparent; 634 | outline:0; 635 | background-color:var(--background-color); 636 | color:var(--color); 637 | -webkit-text-decoration:var(--text-decoration); 638 | text-decoration:var(--text-decoration); 639 | transition:background-color var(--transition),color var(--transition),box-shadow var(--transition),-webkit-text-decoration var(--transition); 640 | transition:background-color var(--transition),color var(--transition),text-decoration var(--transition),box-shadow var(--transition); 641 | transition:background-color var(--transition),color var(--transition),text-decoration var(--transition),box-shadow var(--transition),-webkit-text-decoration var(--transition) 642 | } 643 | [role=link]:is([aria-current], 644 | :hover, 645 | :active, 646 | :focus), 647 | a:is([aria-current], 648 | :hover, 649 | :active, 650 | :focus) { 651 | --color:var(--primary-hover); 652 | --text-decoration:underline 653 | } 654 | [role=link]:focus, 655 | a:focus { 656 | --background-color:var(--primary-focus) 657 | } 658 | [role=link].secondary, 659 | a.secondary { 660 | --color:var(--secondary) 661 | } 662 | [role=link].secondary:is([aria-current], 663 | :hover, 664 | :active, 665 | :focus), 666 | a.secondary:is([aria-current], 667 | :hover, 668 | :active, 669 | :focus) { 670 | --color:var(--secondary-hover) 671 | } 672 | [role=link].secondary:focus, 673 | a.secondary:focus { 674 | --background-color:var(--secondary-focus) 675 | } 676 | [role=link].contrast, 677 | a.contrast { 678 | --color:var(--contrast) 679 | } 680 | [role=link].contrast:is([aria-current], 681 | :hover, 682 | :active, 683 | :focus), 684 | a.contrast:is([aria-current], 685 | :hover, 686 | :active, 687 | :focus) { 688 | --color:var(--contrast-hover) 689 | } 690 | [role=link].contrast:focus, 691 | a.contrast:focus { 692 | --background-color:var(--contrast-focus) 693 | } 694 | h1, 695 | h2, 696 | h3, 697 | h4, 698 | h5, 699 | h6 { 700 | margin-top:0; 701 | margin-bottom:var(--typography-spacing-vertical); 702 | color:var(--color); 703 | font-weight:var(--font-weight); 704 | font-size:var(--font-size); 705 | font-family:var(--font-family) 706 | } 707 | h1 { 708 | --color:var(--h1-color) 709 | } 710 | h2 { 711 | --color:var(--h2-color) 712 | } 713 | h3 { 714 | --color:var(--h3-color) 715 | } 716 | h4 { 717 | --color:var(--h4-color) 718 | } 719 | h5 { 720 | --color:var(--h5-color) 721 | } 722 | h6 { 723 | --color:var(--h6-color) 724 | } 725 | :where(address, 726 | blockquote, 727 | dl, 728 | figure, 729 | form, 730 | ol, 731 | p, 732 | pre, 733 | table, 734 | ul)~:is(h1, 735 | h2, 736 | h3, 737 | h4, 738 | h5, 739 | h6) { 740 | margin-top:var(--typography-spacing-vertical) 741 | } 742 | .headings, 743 | hgroup { 744 | margin-bottom:var(--typography-spacing-vertical) 745 | } 746 | .headings>*, 747 | hgroup>* { 748 | margin-bottom:0 749 | } 750 | .headings>:last-child, 751 | hgroup>:last-child { 752 | --color:var(--muted-color); 753 | --font-weight:unset; 754 | font-size:1rem; 755 | font-family:unset 756 | } 757 | p { 758 | margin-bottom:var(--typography-spacing-vertical) 759 | } 760 | small { 761 | font-size:var(--font-size) 762 | } 763 | :where(dl, 764 | ol, 765 | ul) { 766 | padding-right:0; 767 | padding-left:var(--spacing); 768 | -webkit-padding-start:var(--spacing); 769 | padding-inline-start:var(--spacing); 770 | -webkit-padding-end:0; 771 | padding-inline-end:0 772 | } 773 | :where(dl, 774 | ol, 775 | ul) li { 776 | margin-bottom:calc(var(--typography-spacing-vertical) * .25) 777 | } 778 | :where(dl, 779 | ol, 780 | ul) :is(dl, 781 | ol, 782 | ul) { 783 | margin:0; 784 | margin-top:calc(var(--typography-spacing-vertical) * .25) 785 | } 786 | ul li { 787 | list-style:square 788 | } 789 | mark { 790 | padding:.125rem .25rem; 791 | background-color:var(--mark-background-color); 792 | color:var(--mark-color); 793 | vertical-align:baseline 794 | } 795 | blockquote { 796 | display:block; 797 | margin:var(--typography-spacing-vertical) 0; 798 | padding:var(--spacing); 799 | border-right:none; 800 | border-left:.25rem solid var(--blockquote-border-color); 801 | -webkit-border-start:0.25rem solid var(--blockquote-border-color); 802 | border-inline-start:0.25rem solid var(--blockquote-border-color); 803 | -webkit-border-end:none; 804 | border-inline-end:none 805 | } 806 | blockquote footer { 807 | margin-top:calc(var(--typography-spacing-vertical) * .5); 808 | color:var(--blockquote-footer-color) 809 | } 810 | abbr[title] { 811 | border-bottom:1px dotted; 812 | text-decoration:none; 813 | cursor:help 814 | } 815 | ins { 816 | color:var(--ins-color); 817 | text-decoration:none 818 | } 819 | del { 820 | color:var(--del-color) 821 | } 822 | ::-moz-selection { 823 | background-color:var(--primary-focus) 824 | } 825 | ::selection { 826 | background-color:var(--primary-focus) 827 | } 828 | :where(audio, 829 | canvas, 830 | iframe, 831 | img, 832 | svg, 833 | video) { 834 | vertical-align:middle 835 | } 836 | audio, 837 | video { 838 | display:inline-block 839 | } 840 | audio:not([controls]) { 841 | display:none; 842 | height:0 843 | } 844 | :where(iframe) { 845 | border-style:none 846 | } 847 | img { 848 | max-width:100%; 849 | height:auto; 850 | border-style:none 851 | } 852 | :where(svg:not([fill])) { 853 | fill:currentColor 854 | } 855 | svg:not(:root) { 856 | overflow:hidden 857 | } 858 | button { 859 | margin:0; 860 | overflow:visible; 861 | font-family:inherit; 862 | text-transform:none 863 | } 864 | [type=button], 865 | [type=reset], 866 | [type=submit], 867 | button { 868 | -webkit-appearance:button 869 | } 870 | button { 871 | display:block; 872 | width:100%; 873 | margin-bottom:var(--spacing) 874 | } 875 | [role=button] { 876 | display:inline-block; 877 | text-decoration:none 878 | } 879 | [role=button], 880 | button, 881 | input[type=button], 882 | input[type=reset], 883 | input[type=submit] { 884 | --background-color:var(--primary); 885 | --border-color:var(--primary); 886 | --color:var(--primary-inverse); 887 | --box-shadow:var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); 888 | padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); 889 | border:var(--border-width) solid var(--border-color); 890 | border-radius:var(--border-radius); 891 | outline:0; 892 | background-color:var(--background-color); 893 | box-shadow:var(--box-shadow); 894 | color:var(--color); 895 | font-weight:var(--font-weight); 896 | font-size:1rem; 897 | line-height:var(--line-height); 898 | text-align:center; 899 | cursor:pointer; 900 | transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition) 901 | } 902 | [role=button]:is([aria-current], 903 | :hover, 904 | :active, 905 | :focus), 906 | button:is([aria-current], 907 | :hover, 908 | :active, 909 | :focus), 910 | input[type=button]:is([aria-current], 911 | :hover, 912 | :active, 913 | :focus), 914 | input[type=reset]:is([aria-current], 915 | :hover, 916 | :active, 917 | :focus), 918 | input[type=submit]:is([aria-current], 919 | :hover, 920 | :active, 921 | :focus) { 922 | --background-color:var(--primary-hover); 923 | --border-color:var(--primary-hover); 924 | --box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); 925 | --color:var(--primary-inverse) 926 | } 927 | [role=button]:focus, 928 | button:focus, 929 | input[type=button]:focus, 930 | input[type=reset]:focus, 931 | input[type=submit]:focus { 932 | --box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--outline-width) var(--primary-focus) 933 | } 934 | :is(button, 935 | input[type=submit], 936 | input[type=button], 937 | [role=button]).secondary, 938 | input[type=reset] { 939 | --background-color:var(--secondary); 940 | --border-color:var(--secondary); 941 | --color:var(--secondary-inverse); 942 | cursor:pointer 943 | } 944 | :is(button, 945 | input[type=submit], 946 | input[type=button], 947 | [role=button]).secondary:is([aria-current], 948 | :hover, 949 | :active, 950 | :focus), 951 | input[type=reset]:is([aria-current], 952 | :hover, 953 | :active, 954 | :focus) { 955 | --background-color:var(--secondary-hover); 956 | --border-color:var(--secondary-hover); 957 | --color:var(--secondary-inverse) 958 | } 959 | :is(button, 960 | input[type=submit], 961 | input[type=button], 962 | [role=button]).secondary:focus, 963 | input[type=reset]:focus { 964 | --box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--outline-width) var(--secondary-focus) 965 | } 966 | :is(button, 967 | input[type=submit], 968 | input[type=button], 969 | [role=button]).contrast { 970 | --background-color:var(--contrast); 971 | --border-color:var(--contrast); 972 | --color:var(--contrast-inverse) 973 | } 974 | :is(button, 975 | input[type=submit], 976 | input[type=button], 977 | [role=button]).contrast:is([aria-current], 978 | :hover, 979 | :active, 980 | :focus) { 981 | --background-color:var(--contrast-hover); 982 | --border-color:var(--contrast-hover); 983 | --color:var(--contrast-inverse) 984 | } 985 | :is(button, 986 | input[type=submit], 987 | input[type=button], 988 | [role=button]).contrast:focus { 989 | --box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--outline-width) var(--contrast-focus) 990 | } 991 | :is(button, 992 | input[type=submit], 993 | input[type=button], 994 | [role=button]).outline, 995 | input[type=reset].outline { 996 | --background-color:transparent; 997 | --color:var(--primary) 998 | } 999 | :is(button, 1000 | input[type=submit], 1001 | input[type=button], 1002 | [role=button]).outline:is([aria-current], 1003 | :hover, 1004 | :active, 1005 | :focus), 1006 | input[type=reset].outline:is([aria-current], 1007 | :hover, 1008 | :active, 1009 | :focus) { 1010 | --background-color:transparent; 1011 | --color:var(--primary-hover) 1012 | } 1013 | :is(button, 1014 | input[type=submit], 1015 | input[type=button], 1016 | [role=button]).outline.secondary, 1017 | input[type=reset].outline { 1018 | --color:var(--secondary) 1019 | } 1020 | :is(button, 1021 | input[type=submit], 1022 | input[type=button], 1023 | [role=button]).outline.secondary:is([aria-current], 1024 | :hover, 1025 | :active, 1026 | :focus), 1027 | input[type=reset].outline:is([aria-current], 1028 | :hover, 1029 | :active, 1030 | :focus) { 1031 | --color:var(--secondary-hover) 1032 | } 1033 | :is(button, 1034 | input[type=submit], 1035 | input[type=button], 1036 | [role=button]).outline.contrast { 1037 | --color:var(--contrast) 1038 | } 1039 | :is(button, 1040 | input[type=submit], 1041 | input[type=button], 1042 | [role=button]).outline.contrast:is([aria-current], 1043 | :hover, 1044 | :active, 1045 | :focus) { 1046 | --color:var(--contrast-hover) 1047 | } 1048 | :where(button, 1049 | [type=submit], 1050 | [type=button], 1051 | [type=reset], 1052 | [role=button])[disabled], 1053 | :where(fieldset[disabled]) :is(button, 1054 | [type=submit], 1055 | [type=button], 1056 | [type=reset], 1057 | [role=button]), 1058 | a[role=button]:not([href]) { 1059 | opacity:.5; 1060 | pointer-events:none 1061 | } 1062 | input, 1063 | optgroup, 1064 | select, 1065 | textarea { 1066 | margin:0; 1067 | font-size:1rem; 1068 | line-height:var(--line-height); 1069 | font-family:inherit; 1070 | letter-spacing:inherit 1071 | } 1072 | input { 1073 | overflow:visible 1074 | } 1075 | select { 1076 | text-transform:none 1077 | } 1078 | legend { 1079 | max-width:100%; 1080 | padding:0; 1081 | color:inherit; 1082 | white-space:normal 1083 | } 1084 | textarea { 1085 | overflow:auto 1086 | } 1087 | [type=checkbox], 1088 | [type=radio] { 1089 | padding:0 1090 | } 1091 | ::-webkit-inner-spin-button, 1092 | ::-webkit-outer-spin-button { 1093 | height:auto 1094 | } 1095 | [type=search] { 1096 | -webkit-appearance:textfield; 1097 | outline-offset:-2px 1098 | } 1099 | [type=search]::-webkit-search-decoration { 1100 | -webkit-appearance:none 1101 | } 1102 | ::-webkit-file-upload-button { 1103 | -webkit-appearance:button; 1104 | font:inherit 1105 | } 1106 | ::-moz-focus-inner { 1107 | padding:0; 1108 | border-style:none 1109 | } 1110 | :-moz-focusring { 1111 | outline:0 1112 | } 1113 | :-moz-ui-invalid { 1114 | box-shadow:none 1115 | } 1116 | ::-ms-expand { 1117 | display:none 1118 | } 1119 | [type=file], 1120 | [type=range] { 1121 | padding:0; 1122 | border-width:0 1123 | } 1124 | input:not([type=checkbox], 1125 | [type=radio], 1126 | [type=range]) { 1127 | height:calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2) 1128 | } 1129 | fieldset { 1130 | margin:0; 1131 | margin-bottom:var(--spacing); 1132 | padding:0; 1133 | border:0 1134 | } 1135 | fieldset legend, 1136 | label { 1137 | display:block; 1138 | margin-bottom:calc(var(--spacing) * .25); 1139 | font-weight:var(--form-label-font-weight,var(--font-weight)) 1140 | } 1141 | input:not([type=checkbox], 1142 | [type=radio]), 1143 | select, 1144 | textarea { 1145 | width:100% 1146 | } 1147 | input:not([type=checkbox], 1148 | [type=radio], 1149 | [type=range], 1150 | [type=file]), 1151 | select, 1152 | textarea { 1153 | -webkit-appearance:none; 1154 | -moz-appearance:none; 1155 | appearance:none; 1156 | padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal) 1157 | } 1158 | input, 1159 | select, 1160 | textarea { 1161 | --background-color:var(--form-element-background-color); 1162 | --border-color:var(--form-element-border-color); 1163 | --color:var(--form-element-color); 1164 | --box-shadow:none; 1165 | border:var(--border-width) solid var(--border-color); 1166 | border-radius:var(--border-radius); 1167 | outline:0; 1168 | background-color:var(--background-color); 1169 | box-shadow:var(--box-shadow); 1170 | color:var(--color); 1171 | font-weight:var(--font-weight); 1172 | transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition) 1173 | } 1174 | :where(select, 1175 | textarea):is(:active, 1176 | :focus), 1177 | input:not([type=submit], 1178 | [type=button], 1179 | [type=reset], 1180 | [type=checkbox], 1181 | [type=radio], 1182 | [readonly]):is(:active, 1183 | :focus) { 1184 | --background-color:var(--form-element-active-background-color) 1185 | } 1186 | :where(select, 1187 | textarea):is(:active, 1188 | :focus), 1189 | input:not([type=submit], 1190 | [type=button], 1191 | [type=reset], 1192 | [role=switch], 1193 | [readonly]):is(:active, 1194 | :focus) { 1195 | --border-color:var(--form-element-active-border-color) 1196 | } 1197 | input:not([type=submit], 1198 | [type=button], 1199 | [type=reset], 1200 | [type=range], 1201 | [type=file], 1202 | [readonly]):focus, 1203 | select:focus, 1204 | textarea:focus { 1205 | --box-shadow:0 0 0 var(--outline-width) var(--form-element-focus-color) 1206 | } 1207 | :where(fieldset[disabled]) :is(input:not([type=submit], 1208 | [type=button], 1209 | [type=reset]), 1210 | select, 1211 | textarea), 1212 | input:not([type=submit], 1213 | [type=button], 1214 | [type=reset])[disabled], 1215 | select[disabled], 1216 | textarea[disabled] { 1217 | --background-color:var(--form-element-disabled-background-color); 1218 | --border-color:var(--form-element-disabled-border-color); 1219 | opacity:var(--form-element-disabled-opacity); 1220 | pointer-events:none 1221 | } 1222 | :where(input, 1223 | select, 1224 | textarea):not([type=checkbox], 1225 | [type=radio], 1226 | [type=date], 1227 | [type=datetime-local], 1228 | [type=month], 1229 | [type=time], 1230 | [type=week])[aria-invalid] { 1231 | padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important; 1232 | padding-left:var(--form-element-spacing-horizontal); 1233 | -webkit-padding-start:var(--form-element-spacing-horizontal)!important; 1234 | padding-inline-start:var(--form-element-spacing-horizontal)!important; 1235 | -webkit-padding-end:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important; 1236 | padding-inline-end:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important; 1237 | background-position:center right .75rem; 1238 | background-size:1rem auto; 1239 | background-repeat:no-repeat 1240 | } 1241 | :where(input, 1242 | select, 1243 | textarea):not([type=checkbox], 1244 | [type=radio], 1245 | [type=date], 1246 | [type=datetime-local], 1247 | [type=month], 1248 | [type=time], 1249 | [type=week])[aria-invalid=false] { 1250 | background-image:var(--icon-valid) 1251 | } 1252 | :where(input, 1253 | select, 1254 | textarea):not([type=checkbox], 1255 | [type=radio], 1256 | [type=date], 1257 | [type=datetime-local], 1258 | [type=month], 1259 | [type=time], 1260 | [type=week])[aria-invalid=true] { 1261 | background-image:var(--icon-invalid) 1262 | } 1263 | :where(input, 1264 | select, 1265 | textarea)[aria-invalid=false] { 1266 | --border-color:var(--form-element-valid-border-color) 1267 | } 1268 | :where(input, 1269 | select, 1270 | textarea)[aria-invalid=false]:is(:active, 1271 | :focus) { 1272 | --border-color:var(--form-element-valid-active-border-color)!important; 1273 | --box-shadow:0 0 0 var(--outline-width) var(--form-element-valid-focus-color)!important 1274 | } 1275 | :where(input, 1276 | select, 1277 | textarea)[aria-invalid=true] { 1278 | --border-color:var(--form-element-invalid-border-color) 1279 | } 1280 | :where(input, 1281 | select, 1282 | textarea)[aria-invalid=true]:is(:active, 1283 | :focus) { 1284 | --border-color:var(--form-element-invalid-active-border-color)!important; 1285 | --box-shadow:0 0 0 var(--outline-width) var(--form-element-invalid-focus-color)!important 1286 | } 1287 | [dir=rtl] :where(input, 1288 | select, 1289 | textarea):not([type=checkbox], 1290 | [type=radio]):is([aria-invalid], 1291 | [aria-invalid=true], 1292 | [aria-invalid=false]) { 1293 | background-position:center left .75rem 1294 | } 1295 | input::-webkit-input-placeholder, 1296 | input::placeholder, 1297 | select:invalid, 1298 | textarea::-webkit-input-placeholder, 1299 | textarea::placeholder { 1300 | color:var(--form-element-placeholder-color); 1301 | opacity:1 1302 | } 1303 | input:not([type=checkbox], 1304 | [type=radio]), 1305 | select, 1306 | textarea { 1307 | margin-bottom:var(--spacing) 1308 | } 1309 | select::-ms-expand { 1310 | border:0; 1311 | background-color:transparent 1312 | } 1313 | select:not([multiple], 1314 | [size]) { 1315 | padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem); 1316 | padding-left:var(--form-element-spacing-horizontal); 1317 | -webkit-padding-start:var(--form-element-spacing-horizontal); 1318 | padding-inline-start:var(--form-element-spacing-horizontal); 1319 | -webkit-padding-end:calc(var(--form-element-spacing-horizontal) + 1.5rem); 1320 | padding-inline-end:calc(var(--form-element-spacing-horizontal) + 1.5rem); 1321 | background-image:var(--icon-chevron); 1322 | background-position:center right .75rem; 1323 | background-size:1rem auto; 1324 | background-repeat:no-repeat 1325 | } 1326 | [dir=rtl] select:not([multiple], 1327 | [size]) { 1328 | background-position:center left .75rem 1329 | } 1330 | :where(input, 1331 | select, 1332 | textarea, 1333 | .grid)+small { 1334 | display:block; 1335 | width:100%; 1336 | margin-top:calc(var(--spacing) * -.75); 1337 | margin-bottom:var(--spacing); 1338 | color:var(--muted-color) 1339 | } 1340 | label>:where(input, 1341 | select, 1342 | textarea) { 1343 | margin-top:calc(var(--spacing) * .25) 1344 | } 1345 | [type=checkbox], 1346 | [type=radio] { 1347 | -webkit-appearance:none; 1348 | -moz-appearance:none; 1349 | appearance:none; 1350 | width:1.25em; 1351 | height:1.25em; 1352 | margin-top:-.125em; 1353 | margin-right:.375em; 1354 | margin-left:0; 1355 | -webkit-margin-start:0; 1356 | margin-inline-start:0; 1357 | -webkit-margin-end:.375em; 1358 | margin-inline-end:.375em; 1359 | border-width:var(--border-width); 1360 | font-size:inherit; 1361 | vertical-align:middle; 1362 | cursor:pointer 1363 | } 1364 | [type=checkbox]::-ms-check, 1365 | [type=radio]::-ms-check { 1366 | display:none 1367 | } 1368 | [type=checkbox]:checked, 1369 | [type=checkbox]:checked:active, 1370 | [type=checkbox]:checked:focus, 1371 | [type=radio]:checked, 1372 | [type=radio]:checked:active, 1373 | [type=radio]:checked:focus { 1374 | --background-color:var(--primary); 1375 | --border-color:var(--primary); 1376 | background-image:var(--icon-checkbox); 1377 | background-position:center; 1378 | background-size:.75em auto; 1379 | background-repeat:no-repeat 1380 | } 1381 | [type=checkbox]~label, 1382 | [type=radio]~label { 1383 | display:inline-block; 1384 | margin-right:.375em; 1385 | margin-bottom:0; 1386 | cursor:pointer 1387 | } 1388 | [type=checkbox]:indeterminate { 1389 | --background-color:var(--primary); 1390 | --border-color:var(--primary); 1391 | background-image:var(--icon-minus); 1392 | background-position:center; 1393 | background-size:.75em auto; 1394 | background-repeat:no-repeat 1395 | } 1396 | [type=radio] { 1397 | border-radius:50% 1398 | } 1399 | [type=radio]:checked, 1400 | [type=radio]:checked:active, 1401 | [type=radio]:checked:focus { 1402 | --background-color:var(--primary-inverse); 1403 | border-width:.35em; 1404 | background-image:none 1405 | } 1406 | [type=checkbox][role=switch] { 1407 | --background-color:var(--switch-background-color); 1408 | --border-color:var(--switch-background-color); 1409 | --color:var(--switch-color); 1410 | width:2.25em; 1411 | height:1.25em; 1412 | border:var(--border-width) solid var(--border-color); 1413 | border-radius:1.25em; 1414 | background-color:var(--background-color); 1415 | line-height:1.25em 1416 | } 1417 | [type=checkbox][role=switch]:focus { 1418 | --background-color:var(--switch-background-color); 1419 | --border-color:var(--switch-background-color) 1420 | } 1421 | [type=checkbox][role=switch]:checked { 1422 | --background-color:var(--switch-checked-background-color); 1423 | --border-color:var(--switch-checked-background-color) 1424 | } 1425 | [type=checkbox][role=switch]:before { 1426 | display:block; 1427 | width:calc(1.25em - (var(--border-width) * 2)); 1428 | height:100%; 1429 | border-radius:50%; 1430 | background-color:var(--color); 1431 | content:""; 1432 | transition:margin .1s ease-in-out 1433 | } 1434 | [type=checkbox][role=switch]:checked { 1435 | background-image:none 1436 | } 1437 | [type=checkbox][role=switch]:checked::before { 1438 | margin-left:calc(1.125em - var(--border-width)); 1439 | -webkit-margin-start:calc(1.125em - var(--border-width)); 1440 | margin-inline-start:calc(1.125em - var(--border-width)) 1441 | } 1442 | [type=checkbox]:checked[aria-invalid=false], 1443 | [type=checkbox][aria-invalid=false], 1444 | [type=checkbox][role=switch]:checked[aria-invalid=false], 1445 | [type=checkbox][role=switch][aria-invalid=false], 1446 | [type=radio]:checked[aria-invalid=false], 1447 | [type=radio][aria-invalid=false] { 1448 | --border-color:var(--form-element-valid-border-color) 1449 | } 1450 | [type=checkbox]:checked[aria-invalid=true], 1451 | [type=checkbox][aria-invalid=true], 1452 | [type=checkbox][role=switch]:checked[aria-invalid=true], 1453 | [type=checkbox][role=switch][aria-invalid=true], 1454 | [type=radio]:checked[aria-invalid=true], 1455 | [type=radio][aria-invalid=true] { 1456 | --border-color:var(--form-element-invalid-border-color) 1457 | } 1458 | [type=color]::-webkit-color-swatch-wrapper { 1459 | padding:0 1460 | } 1461 | [type=color]::-moz-focus-inner { 1462 | padding:0 1463 | } 1464 | [type=color]::-webkit-color-swatch { 1465 | border:0; 1466 | border-radius:calc(var(--border-radius) * .5) 1467 | } 1468 | [type=color]::-moz-color-swatch { 1469 | border:0; 1470 | border-radius:calc(var(--border-radius) * .5) 1471 | } 1472 | input:not([type=checkbox], 1473 | [type=radio], 1474 | [type=range], 1475 | [type=file]):is([type=date], 1476 | [type=datetime-local], 1477 | [type=month], 1478 | [type=time], 1479 | [type=week]) { 1480 | --icon-position:0.75rem; 1481 | --icon-width:1rem; 1482 | padding-right:calc(var(--icon-width) + var(--icon-position)); 1483 | background-image:var(--icon-date); 1484 | background-position:center right var(--icon-position); 1485 | background-size:var(--icon-width) auto; 1486 | background-repeat:no-repeat 1487 | } 1488 | input:not([type=checkbox], 1489 | [type=radio], 1490 | [type=range], 1491 | [type=file])[type=time] { 1492 | background-image:var(--icon-time) 1493 | } 1494 | [type=date]::-webkit-calendar-picker-indicator, 1495 | [type=datetime-local]::-webkit-calendar-picker-indicator, 1496 | [type=month]::-webkit-calendar-picker-indicator, 1497 | [type=time]::-webkit-calendar-picker-indicator, 1498 | [type=week]::-webkit-calendar-picker-indicator { 1499 | width:var(--icon-width); 1500 | margin-right:calc(var(--icon-width) * -1); 1501 | margin-left:var(--icon-position); 1502 | opacity:0 1503 | } 1504 | [dir=rtl] :is([type=date], 1505 | [type=datetime-local], 1506 | [type=month], 1507 | [type=time], 1508 | [type=week]) { 1509 | text-align:right 1510 | } 1511 | @-moz-document url-prefix() { 1512 | [type=date], 1513 | [type=datetime-local], 1514 | [type=month], 1515 | [type=time], 1516 | [type=week] { 1517 | padding-right:var(--form-element-spacing-horizontal)!important; 1518 | background-image:none!important 1519 | } 1520 | } 1521 | [type=file] { 1522 | --color:var(--muted-color); 1523 | padding:calc(var(--form-element-spacing-vertical) * .5) 0; 1524 | border:0; 1525 | border-radius:0; 1526 | background:0 0 1527 | } 1528 | [type=file]::file-selector-button { 1529 | --background-color:var(--secondary); 1530 | --border-color:var(--secondary); 1531 | --color:var(--secondary-inverse); 1532 | margin-right:calc(var(--spacing)/ 2); 1533 | margin-left:0; 1534 | -webkit-margin-start:0; 1535 | margin-inline-start:0; 1536 | -webkit-margin-end:calc(var(--spacing)/ 2); 1537 | margin-inline-end:calc(var(--spacing)/ 2); 1538 | padding:calc(var(--form-element-spacing-vertical) * .5) calc(var(--form-element-spacing-horizontal) * .5); 1539 | border:var(--border-width) solid var(--border-color); 1540 | border-radius:var(--border-radius); 1541 | outline:0; 1542 | background-color:var(--background-color); 1543 | box-shadow:var(--box-shadow); 1544 | color:var(--color); 1545 | font-weight:var(--font-weight); 1546 | font-size:1rem; 1547 | line-height:var(--line-height); 1548 | text-align:center; 1549 | cursor:pointer; 1550 | transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition) 1551 | } 1552 | [type=file]::file-selector-button:is(:hover, 1553 | :active, 1554 | :focus) { 1555 | --background-color:var(--secondary-hover); 1556 | --border-color:var(--secondary-hover) 1557 | } 1558 | [type=file]::-webkit-file-upload-button { 1559 | --background-color:var(--secondary); 1560 | --border-color:var(--secondary); 1561 | --color:var(--secondary-inverse); 1562 | margin-right:calc(var(--spacing)/ 2); 1563 | margin-left:0; 1564 | -webkit-margin-start:0; 1565 | margin-inline-start:0; 1566 | -webkit-margin-end:calc(var(--spacing)/ 2); 1567 | margin-inline-end:calc(var(--spacing)/ 2); 1568 | padding:calc(var(--form-element-spacing-vertical) * .5) calc(var(--form-element-spacing-horizontal) * .5); 1569 | border:var(--border-width) solid var(--border-color); 1570 | border-radius:var(--border-radius); 1571 | outline:0; 1572 | background-color:var(--background-color); 1573 | box-shadow:var(--box-shadow); 1574 | color:var(--color); 1575 | font-weight:var(--font-weight); 1576 | font-size:1rem; 1577 | line-height:var(--line-height); 1578 | text-align:center; 1579 | cursor:pointer; 1580 | -webkit-transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition); 1581 | transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition) 1582 | } 1583 | [type=file]::-webkit-file-upload-button:is(:hover, 1584 | :active, 1585 | :focus) { 1586 | --background-color:var(--secondary-hover); 1587 | --border-color:var(--secondary-hover) 1588 | } 1589 | [type=file]::-ms-browse { 1590 | --background-color:var(--secondary); 1591 | --border-color:var(--secondary); 1592 | --color:var(--secondary-inverse); 1593 | margin-right:calc(var(--spacing)/ 2); 1594 | margin-left:0; 1595 | margin-inline-start:0; 1596 | margin-inline-end:calc(var(--spacing)/ 2); 1597 | padding:calc(var(--form-element-spacing-vertical) * .5) calc(var(--form-element-spacing-horizontal) * .5); 1598 | border:var(--border-width) solid var(--border-color); 1599 | border-radius:var(--border-radius); 1600 | outline:0; 1601 | background-color:var(--background-color); 1602 | box-shadow:var(--box-shadow); 1603 | color:var(--color); 1604 | font-weight:var(--font-weight); 1605 | font-size:1rem; 1606 | line-height:var(--line-height); 1607 | text-align:center; 1608 | cursor:pointer; 1609 | -ms-transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition); 1610 | transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition) 1611 | } 1612 | [type=file]::-ms-browse:is(:hover, 1613 | :active, 1614 | :focus) { 1615 | --background-color:var(--secondary-hover); 1616 | --border-color:var(--secondary-hover) 1617 | } 1618 | [type=range] { 1619 | -webkit-appearance:none; 1620 | -moz-appearance:none; 1621 | appearance:none; 1622 | width:100%; 1623 | height:1.25rem; 1624 | background:0 0 1625 | } 1626 | [type=range]::-webkit-slider-runnable-track { 1627 | width:100%; 1628 | height:.25rem; 1629 | border-radius:var(--border-radius); 1630 | background-color:var(--range-border-color); 1631 | -webkit-transition:background-color var(--transition),box-shadow var(--transition); 1632 | transition:background-color var(--transition),box-shadow var(--transition) 1633 | } 1634 | [type=range]::-moz-range-track { 1635 | width:100%; 1636 | height:.25rem; 1637 | border-radius:var(--border-radius); 1638 | background-color:var(--range-border-color); 1639 | -moz-transition:background-color var(--transition),box-shadow var(--transition); 1640 | transition:background-color var(--transition),box-shadow var(--transition) 1641 | } 1642 | [type=range]::-ms-track { 1643 | width:100%; 1644 | height:.25rem; 1645 | border-radius:var(--border-radius); 1646 | background-color:var(--range-border-color); 1647 | -ms-transition:background-color var(--transition),box-shadow var(--transition); 1648 | transition:background-color var(--transition),box-shadow var(--transition) 1649 | } 1650 | [type=range]::-webkit-slider-thumb { 1651 | -webkit-appearance:none; 1652 | width:1.25rem; 1653 | height:1.25rem; 1654 | margin-top:-.5rem; 1655 | border:2px solid var(--range-thumb-border-color); 1656 | border-radius:50%; 1657 | background-color:var(--range-thumb-color); 1658 | cursor:pointer; 1659 | -webkit-transition:background-color var(--transition),transform var(--transition); 1660 | transition:background-color var(--transition),transform var(--transition) 1661 | } 1662 | [type=range]::-moz-range-thumb { 1663 | -webkit-appearance:none; 1664 | width:1.25rem; 1665 | height:1.25rem; 1666 | margin-top:-.5rem; 1667 | border:2px solid var(--range-thumb-border-color); 1668 | border-radius:50%; 1669 | background-color:var(--range-thumb-color); 1670 | cursor:pointer; 1671 | -moz-transition:background-color var(--transition),transform var(--transition); 1672 | transition:background-color var(--transition),transform var(--transition) 1673 | } 1674 | [type=range]::-ms-thumb { 1675 | -webkit-appearance:none; 1676 | width:1.25rem; 1677 | height:1.25rem; 1678 | margin-top:-.5rem; 1679 | border:2px solid var(--range-thumb-border-color); 1680 | border-radius:50%; 1681 | background-color:var(--range-thumb-color); 1682 | cursor:pointer; 1683 | -ms-transition:background-color var(--transition),transform var(--transition); 1684 | transition:background-color var(--transition),transform var(--transition) 1685 | } 1686 | [type=range]:focus, 1687 | [type=range]:hover { 1688 | --range-border-color:var(--range-active-border-color); 1689 | --range-thumb-color:var(--range-thumb-hover-color) 1690 | } 1691 | [type=range]:active { 1692 | --range-thumb-color:var(--range-thumb-active-color) 1693 | } 1694 | [type=range]:active::-webkit-slider-thumb { 1695 | transform:scale(1.25) 1696 | } 1697 | [type=range]:active::-moz-range-thumb { 1698 | transform:scale(1.25) 1699 | } 1700 | [type=range]:active::-ms-thumb { 1701 | transform:scale(1.25) 1702 | } 1703 | input:not([type=checkbox], 1704 | [type=radio], 1705 | [type=range], 1706 | [type=file])[type=search] { 1707 | -webkit-padding-start:calc(var(--form-element-spacing-horizontal) + 1.75rem); 1708 | padding-inline-start:calc(var(--form-element-spacing-horizontal) + 1.75rem); 1709 | border-radius:5rem; 1710 | background-image:var(--icon-search); 1711 | background-position:center left 1.125rem; 1712 | background-size:1rem auto; 1713 | background-repeat:no-repeat 1714 | } 1715 | input:not([type=checkbox], 1716 | [type=radio], 1717 | [type=range], 1718 | [type=file])[type=search][aria-invalid] { 1719 | -webkit-padding-start:calc(var(--form-element-spacing-horizontal) + 1.75rem)!important; 1720 | padding-inline-start:calc(var(--form-element-spacing-horizontal) + 1.75rem)!important; 1721 | background-position:center left 1.125rem,center right .75rem 1722 | } 1723 | input:not([type=checkbox], 1724 | [type=radio], 1725 | [type=range], 1726 | [type=file])[type=search][aria-invalid=false] { 1727 | background-image:var(--icon-search),var(--icon-valid) 1728 | } 1729 | input:not([type=checkbox], 1730 | [type=radio], 1731 | [type=range], 1732 | [type=file])[type=search][aria-invalid=true] { 1733 | background-image:var(--icon-search),var(--icon-invalid) 1734 | } 1735 | [type=search]::-webkit-search-cancel-button { 1736 | -webkit-appearance:none; 1737 | display:none 1738 | } 1739 | [dir=rtl] :where(input):not([type=checkbox], 1740 | [type=radio], 1741 | [type=range], 1742 | [type=file])[type=search] { 1743 | background-position:center right 1.125rem 1744 | } 1745 | [dir=rtl] :where(input):not([type=checkbox], 1746 | [type=radio], 1747 | [type=range], 1748 | [type=file])[type=search][aria-invalid] { 1749 | background-position:center right 1.125rem,center left .75rem 1750 | } 1751 | :where(table) { 1752 | width:100%; 1753 | border-collapse:collapse; 1754 | border-spacing:0; 1755 | text-indent:0 1756 | } 1757 | td, 1758 | th { 1759 | padding:calc(var(--spacing)/ 2) var(--spacing); 1760 | border-bottom:var(--border-width) solid var(--table-border-color); 1761 | color:var(--color); 1762 | font-weight:var(--font-weight); 1763 | font-size:var(--font-size); 1764 | text-align:left; 1765 | text-align:start 1766 | } 1767 | tfoot td, 1768 | tfoot th { 1769 | border-top:var(--border-width) solid var(--table-border-color); 1770 | border-bottom:0 1771 | } 1772 | table[role=grid] tbody tr:nth-child(odd) { 1773 | background-color:var(--table-row-stripped-background-color) 1774 | } 1775 | code, 1776 | kbd, 1777 | pre, 1778 | samp { 1779 | font-size:.875em; 1780 | font-family:var(--font-family) 1781 | } 1782 | pre { 1783 | -ms-overflow-style:scrollbar; 1784 | overflow:auto 1785 | } 1786 | code, 1787 | kbd, 1788 | pre { 1789 | border-radius:var(--border-radius); 1790 | background:var(--code-background-color); 1791 | color:var(--code-color); 1792 | font-weight:var(--font-weight); 1793 | line-height:initial 1794 | } 1795 | code, 1796 | kbd { 1797 | display:inline-block; 1798 | padding:.375rem .5rem 1799 | } 1800 | pre { 1801 | display:block; 1802 | margin-bottom:var(--spacing); 1803 | overflow-x:auto 1804 | } 1805 | pre>code { 1806 | display:block; 1807 | padding:var(--spacing); 1808 | background:0 0; 1809 | font-size:14px; 1810 | line-height:var(--line-height) 1811 | } 1812 | code b { 1813 | color:var(--code-tag-color); 1814 | font-weight:var(--font-weight) 1815 | } 1816 | code i { 1817 | color:var(--code-property-color); 1818 | font-style:normal 1819 | } 1820 | code u { 1821 | color:var(--code-value-color); 1822 | text-decoration:none 1823 | } 1824 | code em { 1825 | color:var(--code-comment-color); 1826 | font-style:normal 1827 | } 1828 | kbd { 1829 | background-color:var(--code-kbd-background-color); 1830 | color:var(--code-kbd-color); 1831 | vertical-align:baseline 1832 | } 1833 | hr { 1834 | height:0; 1835 | border:0; 1836 | border-top:1px solid var(--muted-border-color); 1837 | color:inherit 1838 | } 1839 | [hidden], 1840 | template { 1841 | display:none!important 1842 | } 1843 | canvas { 1844 | display:inline-block 1845 | } 1846 | details { 1847 | display:block; 1848 | margin-bottom:var(--spacing); 1849 | padding-bottom:var(--spacing); 1850 | border-bottom:var(--border-width) solid var(--accordion-border-color) 1851 | } 1852 | details summary { 1853 | line-height:1rem; 1854 | list-style-type:none; 1855 | cursor:pointer; 1856 | transition:color var(--transition) 1857 | } 1858 | details summary:not([role]) { 1859 | color:var(--accordion-close-summary-color) 1860 | } 1861 | details summary::-webkit-details-marker { 1862 | display:none 1863 | } 1864 | details summary::marker { 1865 | display:none 1866 | } 1867 | details summary::-moz-list-bullet { 1868 | list-style-type:none 1869 | } 1870 | details summary::after { 1871 | display:block; 1872 | width:1rem; 1873 | height:1rem; 1874 | -webkit-margin-start:calc(var(--spacing,1rem) * 0.5); 1875 | margin-inline-start:calc(var(--spacing,1rem) * .5); 1876 | float:right; 1877 | transform:rotate(-90deg); 1878 | background-image:var(--icon-chevron); 1879 | background-position:right center; 1880 | background-size:1rem auto; 1881 | background-repeat:no-repeat; 1882 | content:""; 1883 | transition:transform var(--transition) 1884 | } 1885 | details summary:focus { 1886 | outline:0 1887 | } 1888 | details summary:focus:not([role=button]) { 1889 | color:var(--accordion-active-summary-color) 1890 | } 1891 | details summary[role=button] { 1892 | width:100%; 1893 | text-align:left 1894 | } 1895 | details summary[role=button]::after { 1896 | height:calc(1rem * var(--line-height,1.5)); 1897 | background-image:var(--icon-chevron-button) 1898 | } 1899 | details summary[role=button]:not(.outline).contrast::after { 1900 | background-image:var(--icon-chevron-button-inverse) 1901 | } 1902 | details[open]>summary { 1903 | margin-bottom:calc(var(--spacing)) 1904 | } 1905 | details[open]>summary:not([role]):not(:focus) { 1906 | color:var(--accordion-open-summary-color) 1907 | } 1908 | details[open]>summary::after { 1909 | transform:rotate(0) 1910 | } 1911 | [dir=rtl] details summary { 1912 | text-align:right 1913 | } 1914 | [dir=rtl] details summary::after { 1915 | float:left; 1916 | background-position:left center 1917 | } 1918 | article { 1919 | margin:var(--block-spacing-vertical) 0; 1920 | padding:var(--block-spacing-vertical) var(--block-spacing-horizontal); 1921 | border-radius:var(--border-radius); 1922 | background:var(--card-background-color); 1923 | box-shadow:var(--card-box-shadow) 1924 | } 1925 | article>footer, 1926 | article>header { 1927 | margin-right:calc(var(--block-spacing-horizontal) * -1); 1928 | margin-left:calc(var(--block-spacing-horizontal) * -1); 1929 | padding:calc(var(--block-spacing-vertical) * .66) var(--block-spacing-horizontal); 1930 | background-color:var(--card-sectionning-background-color) 1931 | } 1932 | article>header { 1933 | margin-top:calc(var(--block-spacing-vertical) * -1); 1934 | margin-bottom:var(--block-spacing-vertical); 1935 | border-bottom:var(--border-width) solid var(--card-border-color); 1936 | border-top-right-radius:var(--border-radius); 1937 | border-top-left-radius:var(--border-radius) 1938 | } 1939 | article>footer { 1940 | margin-top:var(--block-spacing-vertical); 1941 | margin-bottom:calc(var(--block-spacing-vertical) * -1); 1942 | border-top:var(--border-width) solid var(--card-border-color); 1943 | border-bottom-right-radius:var(--border-radius); 1944 | border-bottom-left-radius:var(--border-radius) 1945 | } 1946 | :root { 1947 | --scrollbar-width:0px 1948 | } 1949 | dialog { 1950 | display:flex; 1951 | z-index:999; 1952 | position:fixed; 1953 | top:0; 1954 | right:0; 1955 | bottom:0; 1956 | left:0; 1957 | align-items:center; 1958 | justify-content:center; 1959 | width:inherit; 1960 | min-width:100%; 1961 | height:inherit; 1962 | min-height:100%; 1963 | padding:var(--spacing); 1964 | border:0; 1965 | -webkit-backdrop-filter:var(--modal-overlay-backdrop-filter); 1966 | backdrop-filter:var(--modal-overlay-backdrop-filter); 1967 | background-color:var(--modal-overlay-background-color); 1968 | color:var(--color) 1969 | } 1970 | dialog article { 1971 | max-height:calc(100vh - var(--spacing) * 2); 1972 | overflow:auto 1973 | } 1974 | @media (min-width:576px) { 1975 | dialog article { 1976 | max-width:510px 1977 | } 1978 | } 1979 | @media (min-width:768px) { 1980 | dialog article { 1981 | max-width:700px 1982 | } 1983 | } 1984 | dialog article>footer, 1985 | dialog article>header { 1986 | padding:calc(var(--block-spacing-vertical) * .5) var(--block-spacing-horizontal) 1987 | } 1988 | dialog article>header .close { 1989 | margin:0; 1990 | margin-left:var(--spacing); 1991 | float:right 1992 | } 1993 | dialog article>footer { 1994 | text-align:right 1995 | } 1996 | dialog article>footer [role=button] { 1997 | margin-bottom:0 1998 | } 1999 | dialog article>footer [role=button]:not(:first-of-type) { 2000 | margin-left:calc(var(--spacing) * .5) 2001 | } 2002 | dialog article p:last-of-type { 2003 | margin:0 2004 | } 2005 | dialog article .close { 2006 | display:block; 2007 | width:1rem; 2008 | height:1rem; 2009 | margin-top:calc(var(--block-spacing-vertical) * -.5); 2010 | margin-bottom:var(--typography-spacing-vertical); 2011 | margin-left:auto; 2012 | background-image:var(--icon-close); 2013 | background-position:center; 2014 | background-size:auto 1rem; 2015 | background-repeat:no-repeat; 2016 | opacity:.5; 2017 | transition:opacity var(--transition) 2018 | } 2019 | dialog article .close:is([aria-current], 2020 | :hover, 2021 | :active, 2022 | :focus) { 2023 | opacity:1 2024 | } 2025 | dialog:not([open]), 2026 | dialog[open=false] { 2027 | display:none 2028 | } 2029 | .modal-is-open { 2030 | padding-right:var(--scrollbar-width,0); 2031 | overflow:hidden; 2032 | pointer-events:none; 2033 | touch-action:none 2034 | } 2035 | .modal-is-open dialog { 2036 | pointer-events:auto 2037 | } 2038 | :where(.modal-is-opening, 2039 | .modal-is-closing) dialog, 2040 | :where(.modal-is-opening, 2041 | .modal-is-closing) dialog>article { 2042 | animation-duration:.2s; 2043 | animation-timing-function:ease-in-out; 2044 | animation-fill-mode:both 2045 | } 2046 | :where(.modal-is-opening, 2047 | .modal-is-closing) dialog { 2048 | animation-duration:.8s; 2049 | animation-name:modal-overlay 2050 | } 2051 | :where(.modal-is-opening, 2052 | .modal-is-closing) dialog>article { 2053 | animation-delay:.2s; 2054 | animation-name:modal 2055 | } 2056 | .modal-is-closing dialog, 2057 | .modal-is-closing dialog>article { 2058 | animation-delay:0s; 2059 | animation-direction:reverse 2060 | } 2061 | @keyframes modal-overlay { 2062 | from { 2063 | -webkit-backdrop-filter:none; 2064 | backdrop-filter:none; 2065 | background-color:transparent 2066 | } 2067 | } 2068 | @keyframes modal { 2069 | from { 2070 | transform:translateY(-100%); 2071 | opacity:0 2072 | } 2073 | } 2074 | :where(nav li)::before { 2075 | float:left; 2076 | content:"​" 2077 | } 2078 | nav, 2079 | nav ul { 2080 | display:flex 2081 | } 2082 | nav { 2083 | justify-content:space-between 2084 | } 2085 | nav ol, 2086 | nav ul { 2087 | align-items:center; 2088 | margin-bottom:0; 2089 | padding:0; 2090 | list-style:none 2091 | } 2092 | nav ol:first-of-type, 2093 | nav ul:first-of-type { 2094 | margin-left:calc(var(--nav-element-spacing-horizontal) * -1) 2095 | } 2096 | nav ol:last-of-type, 2097 | nav ul:last-of-type { 2098 | margin-right:calc(var(--nav-element-spacing-horizontal) * -1) 2099 | } 2100 | nav li { 2101 | display:inline-block; 2102 | margin:0; 2103 | padding:var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal) 2104 | } 2105 | nav li>* { 2106 | --spacing:0 2107 | } 2108 | nav :where(a, 2109 | [role=link]) { 2110 | display:inline-block; 2111 | margin:calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1); 2112 | padding:var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); 2113 | border-radius:var(--border-radius); 2114 | text-decoration:none 2115 | } 2116 | nav :where(a, 2117 | [role=link]):is([aria-current], 2118 | :hover, 2119 | :active, 2120 | :focus) { 2121 | text-decoration:none 2122 | } 2123 | nav[aria-label=breadcrumb] { 2124 | align-items:center; 2125 | justify-content:start 2126 | } 2127 | nav[aria-label=breadcrumb] ul li:not(:first-child) { 2128 | -webkit-margin-start:var(--nav-link-spacing-horizontal); 2129 | margin-inline-start:var(--nav-link-spacing-horizontal) 2130 | } 2131 | nav[aria-label=breadcrumb] ul li:not(:last-child) ::after { 2132 | position:absolute; 2133 | width:calc(var(--nav-link-spacing-horizontal) * 2); 2134 | -webkit-margin-start:calc(var(--nav-link-spacing-horizontal)/ 2); 2135 | margin-inline-start:calc(var(--nav-link-spacing-horizontal)/ 2); 2136 | content:"/"; 2137 | color:var(--muted-color); 2138 | text-align:center 2139 | } 2140 | nav[aria-label=breadcrumb] a[aria-current] { 2141 | background-color:transparent; 2142 | color:inherit; 2143 | text-decoration:none; 2144 | pointer-events:none 2145 | } 2146 | nav [role=button] { 2147 | margin-right:inherit; 2148 | margin-left:inherit; 2149 | padding:var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal) 2150 | } 2151 | aside li, 2152 | aside nav, 2153 | aside ol, 2154 | aside ul { 2155 | display:block 2156 | } 2157 | aside li { 2158 | padding:calc(var(--nav-element-spacing-vertical) * .5) var(--nav-element-spacing-horizontal) 2159 | } 2160 | aside li a { 2161 | display:block 2162 | } 2163 | aside li [role=button] { 2164 | margin:inherit 2165 | } 2166 | [dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after { 2167 | content:"\\" 2168 | } 2169 | progress { 2170 | display:inline-block; 2171 | vertical-align:baseline 2172 | } 2173 | progress { 2174 | -webkit-appearance:none; 2175 | -moz-appearance:none; 2176 | display:inline-block; 2177 | appearance:none; 2178 | width:100%; 2179 | height:.5rem; 2180 | margin-bottom:calc(var(--spacing) * .5); 2181 | overflow:hidden; 2182 | border:0; 2183 | border-radius:var(--border-radius); 2184 | background-color:var(--progress-background-color); 2185 | color:var(--progress-color) 2186 | } 2187 | progress::-webkit-progress-bar { 2188 | border-radius:var(--border-radius); 2189 | background:0 0 2190 | } 2191 | progress[value]::-webkit-progress-value { 2192 | background-color:var(--progress-color) 2193 | } 2194 | progress::-moz-progress-bar { 2195 | background-color:var(--progress-color) 2196 | } 2197 | @media (prefers-reduced-motion:no-preference) { 2198 | progress:indeterminate { 2199 | background:var(--progress-background-color) linear-gradient(to right,var(--progress-color) 30%,var(--progress-background-color) 30%) top left/150% 150% no-repeat; 2200 | animation:progress-indeterminate 1s linear infinite 2201 | } 2202 | progress:indeterminate[value]::-webkit-progress-value { 2203 | background-color:transparent 2204 | } 2205 | progress:indeterminate::-moz-progress-bar { 2206 | background-color:transparent 2207 | } 2208 | } 2209 | @media (prefers-reduced-motion:no-preference) { 2210 | [dir=rtl] progress:indeterminate { 2211 | animation-direction:reverse 2212 | } 2213 | } 2214 | @keyframes progress-indeterminate { 2215 | 0% { 2216 | background-position:200% 0 2217 | } 2218 | 100% { 2219 | background-position:-200% 0 2220 | } 2221 | } 2222 | details[role=list], 2223 | li[role=list] { 2224 | position:relative 2225 | } 2226 | details[role=list] summary+ul, 2227 | li[role=list]>ul { 2228 | display:flex; 2229 | z-index:99; 2230 | position:absolute; 2231 | top:auto; 2232 | right:0; 2233 | left:0; 2234 | flex-direction:column; 2235 | margin:0; 2236 | padding:0; 2237 | border:var(--border-width) solid var(--dropdown-border-color); 2238 | border-radius:var(--border-radius); 2239 | border-top-right-radius:0; 2240 | border-top-left-radius:0; 2241 | background-color:var(--dropdown-background-color); 2242 | box-shadow:var(--card-box-shadow); 2243 | color:var(--dropdown-color); 2244 | white-space:nowrap 2245 | } 2246 | details[role=list] summary+ul li, 2247 | li[role=list]>ul li { 2248 | width:100%; 2249 | margin-bottom:0; 2250 | padding:calc(var(--form-element-spacing-vertical) * .5) var(--form-element-spacing-horizontal); 2251 | list-style:none 2252 | } 2253 | details[role=list] summary+ul li:first-of-type, 2254 | li[role=list]>ul li:first-of-type { 2255 | margin-top:calc(var(--form-element-spacing-vertical) * .5) 2256 | } 2257 | details[role=list] summary+ul li:last-of-type, 2258 | li[role=list]>ul li:last-of-type { 2259 | margin-bottom:calc(var(--form-element-spacing-vertical) * .5) 2260 | } 2261 | details[role=list] summary+ul li a, 2262 | li[role=list]>ul li a { 2263 | display:block; 2264 | margin:calc(var(--form-element-spacing-vertical) * -.5) calc(var(--form-element-spacing-horizontal) * -1); 2265 | padding:calc(var(--form-element-spacing-vertical) * .5) var(--form-element-spacing-horizontal); 2266 | overflow:hidden; 2267 | color:var(--dropdown-color); 2268 | text-decoration:none; 2269 | text-overflow:ellipsis 2270 | } 2271 | details[role=list] summary+ul li a:hover, 2272 | li[role=list]>ul li a:hover { 2273 | background-color:var(--dropdown-hover-background-color) 2274 | } 2275 | details[role=list] summary::after, 2276 | li[role=list]>a::after { 2277 | display:block; 2278 | width:1rem; 2279 | height:calc(1rem * var(--line-height,1.5)); 2280 | -webkit-margin-start:0.5rem; 2281 | margin-inline-start:.5rem; 2282 | float:right; 2283 | transform:rotate(0); 2284 | background-position:right center; 2285 | background-size:1rem auto; 2286 | background-repeat:no-repeat; 2287 | content:"" 2288 | } 2289 | details[role=list] { 2290 | padding:0; 2291 | border-bottom:none 2292 | } 2293 | details[role=list] summary { 2294 | margin-bottom:0 2295 | } 2296 | details[role=list] summary:not([role]) { 2297 | height:calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2); 2298 | padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); 2299 | border:var(--border-width) solid var(--form-element-border-color); 2300 | border-radius:var(--border-radius); 2301 | background-color:var(--form-element-background-color); 2302 | color:var(--form-element-placeholder-color); 2303 | line-height:inherit; 2304 | cursor:pointer; 2305 | transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition) 2306 | } 2307 | details[role=list] summary:not([role]):active, 2308 | details[role=list] summary:not([role]):focus { 2309 | border-color:var(--form-element-active-border-color); 2310 | background-color:var(--form-element-active-background-color) 2311 | } 2312 | details[role=list] summary:not([role]):focus { 2313 | box-shadow:0 0 0 var(--outline-width) var(--form-element-focus-color) 2314 | } 2315 | details[role=list][open] summary { 2316 | border-bottom-right-radius:0; 2317 | border-bottom-left-radius:0 2318 | } 2319 | details[role=list][open] summary::before { 2320 | display:block; 2321 | z-index:1; 2322 | position:fixed; 2323 | top:0; 2324 | right:0; 2325 | bottom:0; 2326 | left:0; 2327 | background:0 0; 2328 | content:""; 2329 | cursor:default 2330 | } 2331 | nav details[role=list] summary, 2332 | nav li[role=list] a { 2333 | display:flex; 2334 | direction:ltr 2335 | } 2336 | nav details[role=list] summary+ul, 2337 | nav li[role=list]>ul { 2338 | min-width:-moz-fit-content; 2339 | min-width:fit-content; 2340 | border-radius:var(--border-radius) 2341 | } 2342 | nav details[role=list] summary+ul li a, 2343 | nav li[role=list]>ul li a { 2344 | border-radius:0 2345 | } 2346 | nav details[role=list] summary, 2347 | nav details[role=list] summary:not([role]) { 2348 | height:auto; 2349 | padding:var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal) 2350 | } 2351 | nav details[role=list][open] summary { 2352 | border-radius:var(--border-radius) 2353 | } 2354 | nav details[role=list] summary+ul { 2355 | margin-top:var(--outline-width); 2356 | -webkit-margin-start:0; 2357 | margin-inline-start:0 2358 | } 2359 | nav details[role=list] summary[role=link] { 2360 | margin-bottom:calc(var(--nav-link-spacing-vertical) * -1); 2361 | line-height:var(--line-height) 2362 | } 2363 | nav details[role=list] summary[role=link]+ul { 2364 | margin-top:calc(var(--nav-link-spacing-vertical) + var(--outline-width)); 2365 | -webkit-margin-start:calc(var(--nav-link-spacing-horizontal) * -1); 2366 | margin-inline-start:calc(var(--nav-link-spacing-horizontal) * -1) 2367 | } 2368 | li[role=list] a:active~ul, 2369 | li[role=list] a:focus~ul, 2370 | li[role=list]:hover>ul { 2371 | display:flex 2372 | } 2373 | li[role=list]>ul { 2374 | display:none; 2375 | margin-top:calc(var(--nav-link-spacing-vertical) + var(--outline-width)); 2376 | -webkit-margin-start:calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)); 2377 | margin-inline-start:calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)) 2378 | } 2379 | li[role=list]>a::after { 2380 | background-image:var(--icon-chevron) 2381 | } 2382 | label>details[role=list] { 2383 | margin-top:calc(var(--spacing) * .25); 2384 | margin-bottom:var(--spacing) 2385 | } 2386 | [aria-busy=true] { 2387 | cursor:progress 2388 | } 2389 | [aria-busy=true]:not(input, 2390 | select, 2391 | textarea, 2392 | html)::before { 2393 | display:inline-block; 2394 | width:1em; 2395 | height:1em; 2396 | border:.1875em solid currentColor; 2397 | border-radius:1em; 2398 | border-right-color:transparent; 2399 | content:""; 2400 | vertical-align:text-bottom; 2401 | vertical-align:-.125em; 2402 | animation:spinner .75s linear infinite; 2403 | opacity:var(--loading-spinner-opacity) 2404 | } 2405 | [aria-busy=true]:not(input, 2406 | select, 2407 | textarea, 2408 | html):not(:empty)::before { 2409 | margin-right:calc(var(--spacing) * .5); 2410 | margin-left:0; 2411 | -webkit-margin-start:0; 2412 | margin-inline-start:0; 2413 | -webkit-margin-end:calc(var(--spacing) * .5); 2414 | margin-inline-end:calc(var(--spacing) * .5) 2415 | } 2416 | [aria-busy=true]:not(input, 2417 | select, 2418 | textarea, 2419 | html):empty { 2420 | text-align:center 2421 | } 2422 | a[aria-busy=true], 2423 | button[aria-busy=true], 2424 | input[type=button][aria-busy=true], 2425 | input[type=reset][aria-busy=true], 2426 | input[type=submit][aria-busy=true] { 2427 | pointer-events:none 2428 | } 2429 | @keyframes spinner { 2430 | to { 2431 | transform:rotate(360deg) 2432 | } 2433 | } 2434 | [data-tooltip] { 2435 | position:relative 2436 | } 2437 | [data-tooltip]:not(a, 2438 | button, 2439 | input) { 2440 | border-bottom:1px dotted; 2441 | text-decoration:none; 2442 | cursor:help 2443 | } 2444 | [data-tooltip]::after, 2445 | [data-tooltip]::before, 2446 | [data-tooltip][data-placement=top]::after, 2447 | [data-tooltip][data-placement=top]::before { 2448 | display:block; 2449 | z-index:99; 2450 | position:absolute; 2451 | bottom:100%; 2452 | left:50%; 2453 | padding:.25rem .5rem; 2454 | overflow:hidden; 2455 | transform:translate(-50%,-.25rem); 2456 | border-radius:var(--border-radius); 2457 | background:var(--tooltip-background-color); 2458 | content:attr(data-tooltip); 2459 | color:var(--tooltip-color); 2460 | font-style:normal; 2461 | font-weight:var(--font-weight); 2462 | font-size:.875rem; 2463 | text-decoration:none; 2464 | text-overflow:ellipsis; 2465 | white-space:nowrap; 2466 | opacity:0; 2467 | pointer-events:none 2468 | } 2469 | [data-tooltip]::after, 2470 | [data-tooltip][data-placement=top]::after { 2471 | padding:0; 2472 | transform:translate(-50%,0); 2473 | border-top:.3rem solid; 2474 | border-right:.3rem solid transparent; 2475 | border-left:.3rem solid transparent; 2476 | border-radius:0; 2477 | background-color:transparent; 2478 | content:""; 2479 | color:var(--tooltip-background-color) 2480 | } 2481 | [data-tooltip][data-placement=bottom]::after, 2482 | [data-tooltip][data-placement=bottom]::before { 2483 | top:100%; 2484 | bottom:auto; 2485 | transform:translate(-50%,.25rem) 2486 | } 2487 | [data-tooltip][data-placement=bottom]:after { 2488 | transform:translate(-50%,-.3rem); 2489 | border:.3rem solid transparent; 2490 | border-bottom:.3rem solid 2491 | } 2492 | [data-tooltip][data-placement=left]::after, 2493 | [data-tooltip][data-placement=left]::before { 2494 | top:50%; 2495 | right:100%; 2496 | bottom:auto; 2497 | left:auto; 2498 | transform:translate(-.25rem,-50%) 2499 | } 2500 | [data-tooltip][data-placement=left]:after { 2501 | transform:translate(.3rem,-50%); 2502 | border:.3rem solid transparent; 2503 | border-left:.3rem solid 2504 | } 2505 | [data-tooltip][data-placement=right]::after, 2506 | [data-tooltip][data-placement=right]::before { 2507 | top:50%; 2508 | right:auto; 2509 | bottom:auto; 2510 | left:100%; 2511 | transform:translate(.25rem,-50%) 2512 | } 2513 | [data-tooltip][data-placement=right]:after { 2514 | transform:translate(-.3rem,-50%); 2515 | border:.3rem solid transparent; 2516 | border-right:.3rem solid 2517 | } 2518 | [data-tooltip]:focus::after, 2519 | [data-tooltip]:focus::before, 2520 | [data-tooltip]:hover::after, 2521 | [data-tooltip]:hover::before { 2522 | opacity:1 2523 | } 2524 | @media (hover:hover) and (pointer:fine) { 2525 | [data-tooltip]:hover::after, 2526 | [data-tooltip]:hover::before, 2527 | [data-tooltip][data-placement=bottom]:focus::after, 2528 | [data-tooltip][data-placement=bottom]:focus::before, 2529 | [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, 2530 | [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before { 2531 | animation-duration:.2s; 2532 | animation-name:tooltip-slide-top 2533 | } 2534 | [data-tooltip]:hover::after, 2535 | [data-tooltip][data-placement=bottom]:focus::after, 2536 | [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after { 2537 | animation-name:tooltip-caret-slide-top 2538 | } 2539 | [data-tooltip][data-placement=bottom]:focus::after, 2540 | [data-tooltip][data-placement=bottom]:focus::before, 2541 | [data-tooltip][data-placement=bottom]:hover::after, 2542 | [data-tooltip][data-placement=bottom]:hover::before { 2543 | animation-duration:.2s; 2544 | animation-name:tooltip-slide-bottom 2545 | } 2546 | [data-tooltip][data-placement=bottom]:focus::after, 2547 | [data-tooltip][data-placement=bottom]:hover::after { 2548 | animation-name:tooltip-caret-slide-bottom 2549 | } 2550 | [data-tooltip][data-placement=left]:focus::after, 2551 | [data-tooltip][data-placement=left]:focus::before, 2552 | [data-tooltip][data-placement=left]:hover::after, 2553 | [data-tooltip][data-placement=left]:hover::before { 2554 | animation-duration:.2s; 2555 | animation-name:tooltip-slide-left 2556 | } 2557 | [data-tooltip][data-placement=left]:focus::after, 2558 | [data-tooltip][data-placement=left]:hover::after { 2559 | animation-name:tooltip-caret-slide-left 2560 | } 2561 | [data-tooltip][data-placement=right]:focus::after, 2562 | [data-tooltip][data-placement=right]:focus::before, 2563 | [data-tooltip][data-placement=right]:hover::after, 2564 | [data-tooltip][data-placement=right]:hover::before { 2565 | animation-duration:.2s; 2566 | animation-name:tooltip-slide-right 2567 | } 2568 | [data-tooltip][data-placement=right]:focus::after, 2569 | [data-tooltip][data-placement=right]:hover::after { 2570 | animation-name:tooltip-caret-slide-right 2571 | } 2572 | } 2573 | @keyframes tooltip-slide-top { 2574 | from { 2575 | transform:translate(-50%,.75rem); 2576 | opacity:0 2577 | } 2578 | to { 2579 | transform:translate(-50%,-.25rem); 2580 | opacity:1 2581 | } 2582 | } 2583 | @keyframes tooltip-caret-slide-top { 2584 | from { 2585 | opacity:0 2586 | } 2587 | 50% { 2588 | transform:translate(-50%,-.25rem); 2589 | opacity:0 2590 | } 2591 | to { 2592 | transform:translate(-50%,0); 2593 | opacity:1 2594 | } 2595 | } 2596 | @keyframes tooltip-slide-bottom { 2597 | from { 2598 | transform:translate(-50%,-.75rem); 2599 | opacity:0 2600 | } 2601 | to { 2602 | transform:translate(-50%,.25rem); 2603 | opacity:1 2604 | } 2605 | } 2606 | @keyframes tooltip-caret-slide-bottom { 2607 | from { 2608 | opacity:0 2609 | } 2610 | 50% { 2611 | transform:translate(-50%,-.5rem); 2612 | opacity:0 2613 | } 2614 | to { 2615 | transform:translate(-50%,-.3rem); 2616 | opacity:1 2617 | } 2618 | } 2619 | @keyframes tooltip-slide-left { 2620 | from { 2621 | transform:translate(.75rem,-50%); 2622 | opacity:0 2623 | } 2624 | to { 2625 | transform:translate(-.25rem,-50%); 2626 | opacity:1 2627 | } 2628 | } 2629 | @keyframes tooltip-caret-slide-left { 2630 | from { 2631 | opacity:0 2632 | } 2633 | 50% { 2634 | transform:translate(.05rem,-50%); 2635 | opacity:0 2636 | } 2637 | to { 2638 | transform:translate(.3rem,-50%); 2639 | opacity:1 2640 | } 2641 | } 2642 | @keyframes tooltip-slide-right { 2643 | from { 2644 | transform:translate(-.75rem,-50%); 2645 | opacity:0 2646 | } 2647 | to { 2648 | transform:translate(.25rem,-50%); 2649 | opacity:1 2650 | } 2651 | } 2652 | @keyframes tooltip-caret-slide-right { 2653 | from { 2654 | opacity:0 2655 | } 2656 | 50% { 2657 | transform:translate(-.05rem,-50%); 2658 | opacity:0 2659 | } 2660 | to { 2661 | transform:translate(-.3rem,-50%); 2662 | opacity:1 2663 | } 2664 | } 2665 | [aria-controls] { 2666 | cursor:pointer 2667 | } 2668 | [aria-disabled=true], 2669 | [disabled] { 2670 | cursor:not-allowed 2671 | } 2672 | [aria-hidden=false][hidden] { 2673 | display:initial 2674 | } 2675 | [aria-hidden=false][hidden]:not(:focus) { 2676 | clip:rect(0,0,0,0); 2677 | position:absolute 2678 | } 2679 | [tabindex], 2680 | a, 2681 | area, 2682 | button, 2683 | input, 2684 | label, 2685 | select, 2686 | summary, 2687 | textarea { 2688 | -ms-touch-action:manipulation 2689 | } 2690 | [dir=rtl] { 2691 | direction:rtl 2692 | } 2693 | @media (prefers-reduced-motion:reduce) { 2694 | :not([aria-busy=true]), 2695 | :not([aria-busy=true])::after, 2696 | :not([aria-busy=true])::before { 2697 | background-attachment:initial!important; 2698 | animation-duration:1ms!important; 2699 | animation-delay:-1ms!important; 2700 | animation-iteration-count:1!important; 2701 | scroll-behavior:auto!important; 2702 | transition-delay:0s!important; 2703 | transition-duration:0s!important 2704 | } 2705 | } 2706 | /*# sourceMappingURL=pico.min.css.map */ 2707 | -------------------------------------------------------------------------------- /src/test/java/dev/anthonybruno/htmx/ServerTest.java: -------------------------------------------------------------------------------- 1 | package dev.anthonybruno.htmx; 2 | 3 | import org.junit.jupiter.api.Test; 4 | 5 | import static org.assertj.core.api.Assertions.assertThat; 6 | 7 | public class ServerTest { 8 | 9 | @Test 10 | void testHtml() { 11 | var todo = new Server.Todo("id", "content", false); 12 | var tag = Server.createTodoItem(todo, false); 13 | assertThat(tag.getTagName()).isEqualTo("li"); 14 | } 15 | } 16 | --------------------------------------------------------------------------------