:root { --main-color: #1eb35a; } /* Generic parameters */ * { font-family: Helvetica, Verdana, Arial, sans-serif; } body { min-width: 300px; } /* Components definition */ a { text-decoration: none; color: #111; border-radius: 5px; } a:hover { background-color: #ddd; } select, input[type=text], input[type=password] { margin: 0.2rem; display: block; } input[type=submit] { cursor: pointer; } .primary { margin: 1rem 0rem 0.5rem 0rem; padding: 0.2rem 0.5rem 0.4rem 0.5rem; display: block; text-align: center; color: #fff; background-color: var(--main-color); border: none; width: 100%; border-radius: 5px; } legend { background-color: #000; color: #fff; padding: 3px 6px; } fieldset { margin-top: 1.5rem; } textarea { font-family: monospace; margin: 1rem 0rem; resize: none; box-sizing: border-box; width: 100%; height: 300px; padding: 0.5rem; line-height: 1.5; border-radius: 5px; border: 1px solid #ccc; /*box-shadow: 1px 1px 1px #999;*/ } /* form group */ form .group { display: flex; width: 100%; } form .group input[type="text"], form .group input[type="password"] { flex-grow: 1; } form .group select { flex-shrink: 1; } /* Menu interface */ .menu-elem, .menu-title { display: block; padding: 0.2rem 0.5rem 0.4rem 0.5rem; margin: 0.3rem; user-select: none; } .menu-title { font-weight: bold; border-bottom: 2px solid var(--main-color); } .menu-title > a { padding: 0.2rem 0.5rem 0.4rem 0.5rem; margin: 0.3rem; } .menu-elem:after { content: ">"; text-align: right; float:right; } hr { border: none; border-bottom: 1px solid #ccc; }