/* Common stylesheet for most of the site */ /* Adjusting wrapper */ div.wrapper { padding-top: 26pt; } /* Navigation block */ nav.main { background-color: transparent; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; } nav.main ul { position: relative; margin: 0; margin-left: 10px; margin-right: 10px; padding: 7px; backdrop-filter: blur(6px); background-color: #094e5970; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 0 0 5px #000; text-shadow: 0 0 2px black, 0 0 6px black; text-align: center; display: flex; flex-flow: row wrap; justify-content: space-around; } nav.main ul li { display: inline-block; } nav.main ul li a { color: #00c07c; text-decoration: none; transition: all 0.2s; } nav.main ul li a:hover { color: #49f49f; } nav.main ul li.current a { font-weight: bold; text-decoration: underline; } nav.main ul span { color: #00c07c; padding: 0; margin: 0; } /* Table */ table, tr, th, td { border: 2px solid #009049; } table { border-collapse: collapse; } th, td { padding: 4px; } th { padding-left: 8px; padding-right: 8px; } td { padding-left: 16px; padding-right: 16px; } /* Other */ /* Basic form for login and registration */ form.basicform div { margin-bottom: 14px; } form.basicform a { font-size: 80%; } /* Additionals for form */ form.basicform label[for="tos_check"] { cursor: pointer; } div.loginmisc { margin-top: 4px; margin-bottom: 4px; } div.loginmisc p { font-style: italic; font-size: 80%; } /* Paginator */ menu.paginator { text-align: center; margin: 2px auto; } menu.paginator li { display: inline-block; margin: 0 8px; } menu.paginator li a { text-decoration: none; } menu.paginator li p { color: gray; } /* Post search column styling */ div.postsearchcolumn { display: block; float: left; width: 15em; } div.postsearchcolumn form input[type="text"] { width: 10em; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-right: 1px solid gray; display: inline-block; } div.postsearchcolumn form input[type="submit"] { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 1px solid gray; display: inline-block; margin-left: -4px; } /* Posts list styling */ div.postlist { display: block; margin-left: 15em; overflow: visible; padding-left: 1em; text-align: center; } div.postlist a.entry { display: inline-block; text-align: center; vertical-align: text-top; width: 150px; max-width: 150px; /* TODO: must be relative or at least tunable through profile settings */ background-color: #00904910; border-radius: 2px; box-shadow: 0 0 5px #0006; transition: all 0.2s; margin: 5px; text-decoration: none; font-size: 10px; text-shadow: none; } div.postlist a.entry:hover { background-color: #00904920; box-shadow: 0 0 8px #000a; scale: 1.015; } div.postlist a.entry img { object-fit: contain; max-width: 150px; max-height: 150px; /* TODO: same as stated higher */ } div.postlist a.entry div.stats { width: 100%; border-top: 1px solid #00c07c20; } div.postlist a.entry div.stats p { color: #00c07c; font-size: 12px; text-shadow: none; margin: 3px 0; transition: all 0.2s; } div.postlist a.entry:hover div.stats p { color: #49f49f; } /* Post viewer */ div.postviewer div.stats { margin-bottom: 0.5em; } div.postviewer div.stats * { display: inline-block; } div.postviewer div.stats div { margin-right: 1em; } div.postviewer div.stats img { width: 1em; height: 1em; } div.postviewer div.picture { background-color: #aaa3; border-radius: 3px; text-align: center; overflow: clip; } div.postviewer div.picture img { max-width: 100%; min-width: 50px; vertical-align: center; margin-bottom: -4.5px; } div.postviewer div.tags { /* background-color: #aaa3; background-color: #0002; border: 2px solid #aaa7; border-bottom: 2px solid #aaa7; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; */ } div.postviewer div.tags ul { text-align: center; padding: 0 0 4px 0; margin: 0; } div.postviewer div.tags ul li { background-color: #009049a0; color: #00c07c; text-shadow: 0 0 2px #000c, 0 0 2px #000c; box-shadow: 0 0 3px #0005; border-radius: 2px; padding: 4px; margin: 4px 0 0 0; display: inline-block; transition: all 0.2s; cursor: default; } div.postviewer div.tags ul li:hover { color: #49f49f; box-shadow: 0 0 5px #0007; } div.postviewer div.comments {} div.postviewer div.comments p { margin: 8px 0 8px 0; } div.postviewer div.comments div.entry { margin-top: 8px; padding: 5px; border: 1px solid #009049; border-radius: 3px; align-items: center; } div.postviewer div.comments div.entry p { display: inline-block; vertical-align: top; margin: 0 0 0 0; } div.postviewer div.comments div.entry div.meta { display: inline-block; width: 12%; text-align: center; border-right: 1px solid #009049; } div.postviewer div.comments div.entry div.meta img { display: inline-block; vertical-align: middle; width: 64px; height: 64px; margin: 0 8px 0 0; } div.postviewer div.comments div.entry div.meta p { display: inline-block; vertical-align: top; }