diff options
Diffstat (limited to 'css/v2.css')
| -rw-r--r-- | css/v2.css | 1085 |
1 files changed, 419 insertions, 666 deletions
@@ -1,346 +1,90 @@ -$blendbg: rgb( - (red($boxbg) * alpha($boxbg) + red($bodybg) * (1 - alpha($boxbg))), - (green($boxbg) * alpha($boxbg) + green($bodybg) * (1 - alpha($boxbg))), - (blue($boxbg) * alpha($boxbg) + blue($bodybg) * (1 - alpha($boxbg))) -); - -* { margin: 0; padding: 0; } -body, td { font: 13px "Tahoma", "Arial", sans-serif; } -body { @include bodybg; color: $maintext } +html { box-sizing: border-box } +*, *:before, *:after { box-sizing: inherit } +* { margin: 0; padding: 0; box-sizing: border-box; font: inherit; color: inherit; text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none } +body { font: 13px "Tahoma", "Arial", sans-serif; color: var(--maintext) } table { border-collapse: collapse; } table td, table th { vertical-align: top; padding: 3px; } -img { border: none; } +img { border: none; box-sizing: content-box } +svg { fill: currentColor; } +b,strong,h1,h2,h3,h4,h5{ font-weight: bold } +i,em { font-style: italic } +summary { cursor: pointer } a, -.fake_link { color: $link; text-decoration: none; cursor:pointer; border-bottom: 1px solid transparent } +.fake_link { color: var(--link); text-decoration: none; cursor:pointer; border-bottom: 1px solid transparent } a:hover, -.fake_link:hover { border-bottom: 1px dotted $maintext; } +.fake_link:hover { border-bottom: 1px dotted var(--maintext); } table tr.odd, table.stripe tbody tr:nth-child(odd):not(.nostripe), -.docs table tbody tr:nth-child(odd) { background: $boxbg; } - -#bgright { position: absolute; top: 0px; right: 0px; @include bgright } -#header { position: absolute; top: 80px; left: 400px; } -#header h1, #header h1 a { - font-family: "Futura", "Century New Gothic", "Arial", Serif; - font-size: 24px; - font-style: italic; - border: none!important; - color: $maintitle; -} -#footer { margin: 15px auto 0 auto; text-align: center; color: $footer; } -#footer a { color: $footer; text-decoration: underline; } +.docs table tbody tr:nth-child(odd) { background: var(--boxbg); } -/* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ -.visuallyhidden, .linkradio input { - position: absolute !important; - left: 0; - height: 1px; width: 1px; - border: 0; padding: 0; - overflow: hidden; - clip: rect(1px 1px 1px 1px); -} /* Warning/Notice Box */ -div.warning, div.notice { margin: 5px 10%; padding: 15px; background-color: $warnbg; border: 1px solid $warnborder; } -div.notice { background-color: $noticebg; border: 1px solid $noticeborder; } +div.warning, div.notice { margin: 5px 10%; padding: 15px; background-color: var(--warnbg); border: 1px solid var(--warnborder); } +div.notice { background-color: var(--noticebg); border: 1px solid var(--noticeborder); } div.warning ul, div.notice ul { margin-left: 0; } div.warning li, div.notice li { margin-left: 20px; } -div.warning h2, div.notice h2 { font-size: 13px; font-weight: bold; margin: 0; } - -/* dropdown box */ -#dd_box { position: absolute; left: 0px; border: 1px solid $border; background-color: $secbg; z-index: 2 } -#dd_box ul { list-style-type: none; margin: 0; padding: 0 } -#dd_box li b { display: block; font-weight: normal; padding-left: 5px; } -#dd_box li i { display: block; font-style: normal; padding-left: 10px; padding-right: 5px } -#dd_box li a { display: block; padding-left: 10px; border: 0; padding: 3px 5px 3px 3px } -#dd_box li a:hover { background: $boxbg } - -/* dropdown search */ -#ds_box { - position: absolute; - top: 0; - border: 1px solid $border; - border-top: none; - background-color: $secbg; - cursor: pointer; - z-index: 2 -} -#ds_box b { padding: 2px 0 0 10px; } -#ds_box tr.selected { background: $boxbg; } -#ds_box table { width: 100%; } - -/* Elm dropdowns (also in perl: VNWeb::Releases::Lib) */ -.elm_dd > a { color: $maintext; display: block; border: none; padding-right: 15px; position: relative } -.elm_dd > a > span:last-child { position: absolute; right: 5px; top: 0; width: 16px; text-align: right; display: block } -.elm_dd > a > span:last-child i { visibility: hidden; font-style: normal } -.elm_dd > a .nowrap { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.elm_dd > a:hover > span:last-child > i, -.elm_dd > a:focus > span:last-child > i { visibility: visible } -.elm_dd > div { position: relative; float: right; width: 0; height: 0 } -.elm_dd > div > div { position: absolute; right: -10px; top: 0; border: 1px solid $border; background-color: $secbg; z-index: 1000; margin: 0; padding: 0; max-width: 400px } -.elm_dd.search > div { float: left } -.elm_dd.search > div > div { right: auto; left: 0; top: 23px } -.elm_dd ul { width: 100%; list-style-type: none; margin: 0; padding: 0 } -.elm_dd ul li { white-space: nowrap } -.elm_dd ul li a { display: block; border: 0; padding: 3px 5px 3px 3px } -.elm_dd ul li a.active, -.elm_dd ul li a:hover { background: $boxbg } -.elm_dd ul li p { white-space: normal; padding: 3px 5px 3px 3px } -.elm_dd ul li.separator { margin-bottom: 22px } - -.maintabs .elm_dd > a { box-sizing: border-box; height: 21px; padding: 1px 15px 0 7px; border: 1px solid $border; border-bottom: none; background-color: $tabbg; color: $maintext } -.elm_votedd .elm_dd ul li { text-align: left } -.elm_dd_input .elm_dd > a { background-color: $secbg; color: $maintext; border: 1px solid $secborder; font: 14px "Tahoma", "Arial", sans-serif; padding: 1px 15px 1px 2px; margin: -1px } -.elm_dd_button .elm_dd > a { background-color: $boxbg; color: $maintext; border: 1px solid $secborder; font: 14px "Tahoma", "Arial", sans-serif; padding: 1px 15px 1px 5px; margin: -1px } -.elm_dd_input.elm_dd_noarrow .elm_dd > a { padding-right: 2px } -.elm_dd_noarrow .elm_dd > a { padding-right: 0 } -.elm_dd_noarrow .elm_dd > a > span:last-child { display: none } -.elm_dd_hover .elm_dd > div { display: none } -.elm_dd_hover .elm_dd:hover > div { display: block } -.elm_dd_left .elm_dd > div { float: left } -.elm_dd_left .elm_dd > div > div { right: 0; top: -20px } -.elm_dd_relextlink .elm_dd > a { padding-left: 4px; color: $link } -.elm_dd_relextlink ul a { text-align: right } -.elm_dd_relextlink ul span { color: $maintext; padding-right: 10px } +div.warning h2, div.notice h2 { font-size: inherit; margin: 0; } +a.addnew, p.addnew { float: right; margin: 0 } +a.mainopts, p.mainopts { float: right; margin: 0 } +p.mainopts a, p.mainopts label { margin: 0 5px } /* general text formatting */ ul, ol { margin-left: 35px; } -p.itemmsg { float: right; color: $standout; font-style: italic; margin: 0!important } -.grayedout { color: $grayedout } -b.grayedout { font-weight: normal } -i.grayedout { font-style: normal } +p.itemmsg { float: right; color: var(--standout); font-style: italic; margin: 0!important } +small, .grayedout { color: var(--grayedout) } .underline { text-decoration: underline } -#maincontent h2 b { font: 13px "Tahoma", "Arial", sans-serif; font-weight: normal; } -p.description, div.description { margin: 10px 100px!important; } -b.done { font-weight: normal; color: $statok } -b.todo { font-weight: normal; color: $statnok } -b.neutral { font-weight: normal } +.monospace { font-family: monospace!important } +p.description, div.description { margin: 10px auto!important; max-width: 800px; } +.done { color: var(--statok) } +.todo { color: var(--statnok) } p.center { text-align: center; } -.standout { color: $standout!important } -b.future, -b.standout { font-weight: normal; color: $standout; } +b, .standout { font-weight: normal; color: var(--standout)!important } .clearfloat { clear: both; height: 0; } .hidden { display: none!important } .invisible { visibility: hidden } .linethrough { text-decoration: line-through } -b.spoiler, b.spoiler a { color: #000!important; background-color: #000; font-weight: normal; } -b.spoiler:hover, b.spoiler:focus { color: $maintext!important; background-color: transparent } -b.spoiler:hover a, b.spoiler:focus a { color: $link!important; background-color: transparent } - -#maincontent div.quote { +.nowrap { white-space: nowrap } +.spoiler, .spoiler a { color: #000!important; background-color: #000 } +.spoiler:hover, .spoiler:focus { color: var(--maintext)!important; background-color: inherit } +.spoiler:hover a, .spoiler:focus a { color: var(--link)!important; background-color: inherit } +.small { font-size: 11px } +main p { margin: 3px 20px; } +main div p, +main fieldset p, +main table p { margin: 0; } + + +.quote { padding: 1px 5px; margin: 0px 10px; - color: $grayedout; + color: var(--grayedout); border: none; - border-left: 1px dotted $border; + border-left: 1px dotted var(--border); text-align: left; } pre { padding:1px 5px; margin: 5px 15px; - border: 1px dotted $border; + border: 1px dotted var(--border); border-right: none; - border-left: 1px solid $border; - background: $boxbg; + border-left: 1px solid var(--border); + background: var(--boxbg); overflow-x: auto; } -/***** general form markup *****/ - -input.text, input.submit, select, textarea, button { - background-color: $secbg; - color: $maintext; - border: 1px solid $secborder; - font: 14px "Tahoma", "Arial", sans-serif; - padding: 0 1px 1px 1px; - margin: 1px; -} -form, fieldset { border: 0; display: block } -legend { display: none; } -optgroup option { padding-left: 10px; font-style: normal; } -input.submit, button { background: $boxbg; padding: 1px 5px; cursor: pointer } -input.text, select { width: 200px; } -input[type=number] { -moz-appearance:textfield } -input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 } -fieldset.submit { width: 100%; text-align: center; margin: 5px; } -fieldset.submit input[type=submit] { width: 150px; } -fieldset.submit input[type=checkbox] { margin: 0 5px 0 15px; } -fieldset.submit h2 { font-size: 13px!important; } -td.label, td.label label { width: 130px; } -td.label label { display: block; } -td.field label { margin: 0 5px 0 5px; } -table.formtable { margin: 0 20px 20px 20px; } -table.formtable td { padding: 0; } -table.formtable tr.newfield > td { padding-top: 5px; } -table.formtable tr.newpart td { padding-top: 20px; font-weight: bold; } -table.formtable td table td { padding: 1px 15px 1px 0px } -table.formtable td table { margin-bottom: 5px } - -table.formimage > tr > td:nth-child(1) { width: 300px; height: 300px; text-align: center } -table.formimage > tr > td:nth-child(1) img { max-width: 290px; max-height: 500px } -table.formimage h2 { margin: 0 } - -/* Format checkboxes and radio buttons as if they were normal links with unicode icons. - * Usage: - * - * <container class="linkradio"> - * <input type="checkbox|radio" id="xyz"> - * <label for="xyz">Text</label> - * <em>(optional option separator)</em> - * </container> - */ -p.linkradio { padding: 2px } -.linkradio label { color: $link; cursor: pointer } -.linkradio label:before { content: '✗' } -.linkradio input:checked + label { color: $maintext } -.linkradio input:checked + label:before { content: '✓' } -.linkradio input:focus + label { outline: 1px dotted $link } -.linkradio input:focus:checked + label { outline: 1px dotted $maintext } -.linkradio em { font-weight: normal; font-style: normal; color: $grayedout } - -/* Same styling, but for regular links. - * Usage: - * - * <a href="#" class="linkradio">Unchecked option</a> - * <a href="#" class="linkradio checked">Checked option</a> - */ -a.linkradio:before { content: '✗' } -a.linkradio.checked:before { content: '✓' } -a.checked { color: $maintext } - -/* Spinner, <div class="spinner"></div> for a large one, <span> for a smaller inline-text version */ -.spinner { content: ''; box-sizing: border-box; border: 3px solid #9eaebd; border-bottom-color: transparent; border-radius: 100%; animation: spin 1s infinite linear; width: 16px; height: 16px; display: inline-block; margin: auto } -span.spinner { width: 1em; height: 1em } -@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } - -.textpreview > span { display: flex; justify-content: space-between; width: 100% } -.textpreview > span > p { align-self: flex-end; text-align: left } -.textpreview > span > p.right > * { margin-left: 10px; font-style: normal } -.textpreview textarea { width: 100%; box-sizing: border-box } -.textpreview .preview { width: 100%; box-sizing: border-box; border: 1px solid $secborder; margin: 1px; padding: 5px; text-align: left } -fieldset.submit .textpreview { margin: 0 auto } - -/* .compact input elements are smaller and can be embedded in tables/inline text - * .stealth input elements pretend to be just regular text, but turn into visibile input elements on mouse-over */ -.compact input.text, .compact select, .compact textarea { margin: -2px -1px; padding: 1px 0 } -.compact input.submit { margin: -2px -1px; padding: 1px 3px } -.stealth input, .stealth select { font: inherit; background: none; border: 1px solid transparent; -moz-appearance: none; -webkit-appearance: none; appearance: none } -.stealth input:hover, .stealth input:focus, -.stealth select:hover, .stealth select:focus { border: 1px solid $secborder; background: $secbg } - - -/***** menu *****/ - - -#menulist a { color: $maintext; text-decoration: none; } -#menulist a:hover { border-bottom: 1px dotted $maintext; } -#menulist { position: absolute; left: 30px; top: 190px; width: 160px; } -#menulist div.menubox { margin: 0 0 10px 0; border: 1px solid $border; background: $boxbg; } -#menulist div.menubox div { padding: 2px 7px; } -#menulist h2 { border-bottom: 1px solid $border; background: $boxbg; padding: 1px 3px; } -#menulist h2, #menulist h2 a { font-size: 13px; color: $maintext; } -#menulist h2 #lang_select { float: right; padding-top: 1px; } -#menulist dt { display: block; float: left; width: 97px; font-style: italic; } -#menulist dd { width: 45px; float: left; text-align: right; } -#menulist p { text-align: center; } -#menulist #search input.text { width: 141px; margin: 0 0 3px 7px } -#menulist #search input.submit { display: none; } -#dd_box abbr { margin: 2px 5px 2px 0!important; } -#menulist .notifyget { display: inline-block; width: 135px; padding: 4px; background: $warnbg; border: 1px solid $warnborder; } -#menulist .logout { border: 0; background: none; color: $maintext; cursor: pointer } -#menulist .logout:hover { text-decoration: underline } - -#support { background: $boxbg; font-size: 12px; padding: 4px; margin-bottom: 5px; text-align: center } -#support p { display: flex; justify-content: space-between } - - - - -/***** main content *****/ - -#maincontent { - position: absolute; - top: 169px; - left: 200px; - right: 30px; - margin: 0; - padding-bottom: 50px!important; -} -.mainbox h1, .mainbox h2 { - font-family: "Futura", "Century New Gothic", "Arial", Serif; - font-weight: normal; - font-size: 14px; -} -div.mainbox, div.threelayout > div { - border: 1px solid $border; - margin: 21px 0 -10px 0; - padding: 5px; - background: $boxbg; -} -div.mainbox-overflow-hack { overflow: hidden; width: 100%; box-sizing: border-box } -.mainbox h1 { color: $boxtitle; font-size: 24px; margin: -5px 0 15px 0; } -.mainbox h2.alttitle { color: $alttitle; margin: -17px 0 15px 15px; font-weight: normal; } -.mainbox p { margin: 3px 20px; } -.mainbox div p, -.mainbox table p { margin: 0; } -.mainbox h2 { font-weight: bold; font-size: 16px; margin: 10px 0 0 5px; } -a.addnew, p.addnew { float: right; margin: 0 } -a.mainopts, p.mainopts { float: right; margin: 0 } -p.mainopts a, p.mainopts label { margin: 0 5px } - -div.threelayout { display: flex } -div.threelayout > div { flex: 1; padding: 0 2px 10px 2px; margin-left: 5px; margin-right: 5px } -div.threelayout > div:first-child { margin-left: 0 } -div.threelayout > div:last-child { margin-right: 0 } -.threelayout h1 { margin: 0; font-size: 18px; font-weight: bold; color: $boxtitle } -.threelayout h2 { font-size: 14px; margin-top: 3px; } -.threelayout a.right { float: right; } -.threelayout ul { list-style-type: none; margin-left: 10px; } -.threelayout h1 a { color: $boxtitle; } - - - - -/***** main tabs *****/ - -div.maintabs { display: flex; justify-content: space-between; position: relative; width: 100%; height: 22px; margin: 20px 0 -22px 0; padding: 0 } -#maincontent > div:nth-child(1).maintabs { margin-top: 0 } -div.maintabs.right { justify-content: flex-end } -div.maintabs.left { justify-content: flex-start } -div.maintabs > ul { margin: 0; padding: 0; list-style-type: none } -div.maintabs > ul > li { display: inline-block; margin: 0 0 0 10px } -div.maintabs > ul > li:nth-child(1) { margin-left: 0!important } -div.maintabs > ul > li > a, -div.maintabs > ul > li > div > a { display: inline-block; box-sizing: border-box; height: 21px; padding: 1px 7px 0 7px; border: 1px solid $border; border-bottom: none; background-color: $tabbg; color: $grayedout; } -div.maintabs > ul > li.tabselected > a, -div.maintabs > ul > li.tabselected > div > a, -div.maintabs > ul > li > div > a:hover, -div.maintabs > ul > li > a:hover { background: $blendbg; color: $maintext; height: 22px } -div.maintabs.browsetabs > ul li a { color: $maintext } -div.maintabs.browsetabs > ul li { margin-left: 5px } -div.maintabs.bottom { margin-top: 10px; /* WHY!? */ margin-bottom: -10px } -div.maintabs.bottom > ul li a { padding: 4px 7px 2px 7px; border-bottom: 1px solid $border; border-top: none } -div.maintabs.bottom > ul li.tabselected a, -div.maintabs.bottom > ul li a:hover { padding-top: 5px; height: 22px; margin-top: -1px } - -h1.boxtitle, h1.boxtitle a, div.maintabs h1 { - font-family: "Futura", "Century New Gothic", "Arial", Serif; - font-weight: bold; - font-style: italic; - color: $grayedout; - font-size: 17px; -} -h1.boxtitle, h1.boxtitle a { margin: 20px 0 -20px 0 } - +@import "css/layout"; +@import "css/forms"; +@import "css/vngraph"; +@import "css/staffedit"; @@ -349,9 +93,16 @@ h1.boxtitle, h1.boxtitle a { margin: 20px 0 -20px 0 } p.screenshots { text-align: center; margin-top: 10px; padding: 0; height: 105px; overflow: hidden } p.screenshots img { margin: 2px; } li.announcement { margin-bottom: 3px; margin-top: 3px } -li.announcement a { font-weight: bold; font-size: 15px; color: $maintext } -.homepage h1 { margin-bottom: 5px } -.homepage > div { overflow: hidden } +li.announcement a { font-weight: bold; font-size: 15px; color: var(--maintext) } + +.homepage { display: flex; flex-wrap: wrap; column-gap: 10px } +.homepage article { flex: 1 1 0; min-width: 30%; padding: 0 2px 10px 2px; } +@media (max-width: 1300px) { .homepage article { min-width: 45% } } +@media (max-width: 900px) { .homepage article { min-width: 90% } } +.homepage h1 { margin: 0 0 5px 0; font-size: 18px; font-weight: bold; color: var(--boxtitle) } +.homepage h1 a { color: inherit; } +.homepage h2 { margin-top: 3px; } +.homepage ul { list-style-type: none; margin-left: 10px; } .homepage li { display: flex; line-height: 1.1 } .homepage li span { white-space: nowrap; padding-right: 4px; padding-bottom: 3px } .homepage li span:first-child { overflow: hidden; text-overflow: ellipsis } @@ -363,8 +114,8 @@ li.announcement a { font-weight: bold; font-size: 15px; color: $maintext } .browseopts a, .browseopts button { padding: 1px 3px; - color: $maintext; - border: 1px solid $border; + color: inherit; + border: 1px solid var(--border); margin: 0 2px; white-space: nowrap; } @@ -373,20 +124,25 @@ span.browseopts { text-align: center; padding: 10px; display: in .browseopts .optselected, .browseopts a:hover, .browseopts button:hover { border: 0; padding: 2px 4px; } -div.mainbox.browse { padding: 0; } -div.mainbox.browse table { width: 100%; } -div.mainbox.browse table td.tc1 { padding-left: 25px; } -table thead td, table thead th { font-weight: bold; background-color: $secbg; } +.browse table td.tc1 { padding-left: 25px; } +table thead td, table thead th { font-weight: bold; background-color: var(--secbg); } table thead th { text-align: left } fieldset.search { display: block; width: 100%; text-align: center; margin: 0 0 10px 0; } fieldset.search .submit { padding: 0 1px; } -p#searchtabs { height: 13px; padding-right: 70px; } -p#searchtabs a { padding: 2px 6px 2px 6px; margin: 0 2px; color: $maintext; } -p#searchtabs a:hover, p#searchtabs a.sel { - border: 1px solid $secborder; - border-bottom: none; - padding: 1px 5px 2px 5px; - background: $boxbg; +#searchtabs { + display: flex; align-items: flex-end; justify-content: center; padding-right: 70px; + a { + padding: 2px 6px 0px 6px; + border: 1px solid transparent; + border-bottom: none; + margin: 0 2px; + color: inherit; + } + a:hover, a.sel { + border: 1px solid var(--secborder); + border-bottom: none; + background: var(--boxbg); + } } #q { width: 600px } #bq { width: 300px } @@ -395,16 +151,18 @@ p#searchtabs a:hover, p#searchtabs a.sel { /* history browser */ -table.histoptions { margin: 0 auto } -table.histoptions select { width: 150px; scrollbar-width: none } -table.histoptions select::-webkit-scrollbar { display: none } +.histoptions { margin: 0 auto } +.histoptions select { width: 150px; scrollbar-width: none } +.histoptions select::-webkit-scrollbar { display: none } -div.history td { white-space: nowrap; padding-left: 15px } -div.history td.tc1_1 { width: 70px; padding-right: 0; text-align: right } -div.history td.tc1_2 { width: 30px; padding-left: 0 } -div.history td.tc2 { width: 140px } -div.history td.tc4 { width: 100% } -div.history td.tc4 b { margin-left: 10px } +.history td { white-space: nowrap; padding-left: 15px } +.history td.tc1_0 { padding-right: 0; padding-left: 0 } +.history td.tc1_0 a { color: inherit; display: inline-block; width: 15px; border-bottom: 0; text-align: center } +.history td.tc1_1 { width: 70px; padding-right: 0; text-align: right } +.history td.tc1_2 { width: 30px; padding-left: 0 } +.history td.tc2 { width: 140px } +.history td.tc4 { width: 100% } +.history td.tc4 small { margin-left: 10px } @@ -412,54 +170,63 @@ div.history td.tc4 b { margin-left: 10px } /***** Discussions ******/ /* threads page */ -#maincontent div.thread { padding: 0; } -div.thread table { width: 100%; table-layout: fixed } -div.thread tr:not(:last-child) td { border-bottom: 1px solid $border; } -div.thread td.tc1 { width: 170px; padding: 5px 10px; border-right: 1px solid $border; } -div.thread td.tc2 { padding: 10px 20px 10px 10px; } -div.thread tr.deleted td { padding: 1px 10px; } -div.thread tr:target, div.thread tr.target { outline: 1px dotted $standout } -div.thread i.deleted { font-style: normal; color: $grayedout; } -div.thread i.lastmod { float: right; font-size: 11px; color: $grayedout; margin: 0 -10px -5px 0; } -div.thread i.edit { float: right; color: $grayedout; font-style: normal; margin: -10px -10px 0 0; visibility: hidden } -div.thread td:hover i.edit, -div.thread td:active i.edit { visibility: visible } +.thread { padding: 0; } +.thread table { width: 100%; table-layout: fixed } +.thread tr:not(:last-child) td { border-bottom: 1px solid var(--border); } +.thread td.tc1 { width: 190px; padding: 5px 10px; border-right: 1px solid var(--border); } +.thread td.tc2 { padding: 10px 20px 10px 10px; } +.thread tr.deleted td { padding: 1px 10px; } +.thread tr:target, .thread tr.target { outline: 1px dotted var(--standout) } +.thread .lastmod { float: right; font-size: 11px; color: var(--grayedout); margin: 0 -10px -5px 0; } +.thread .edit { float: right; color: var(--grayedout); margin: -10px -10px 0 0; visibility: hidden } +.thread td:hover .edit, +.thread td:active .edit { visibility: visible } /* threads browser */ -div.mainbox.discussions td.tc4 { text-align: right; } -div.mainbox.discussions a.locked { text-decoration: line-through; } -div.mainbox.discussions b.boards { padding-left: 10px; font-weight: normal; } -div.mainbox.discussions b.boards a { color: $grayedout; } -div.discussions td.tc2 { width: 60px; text-align: right } -div.discussions td.tc3 { width: 110px; } -div.discussions td.tc4 { width: 250px; } -div.discussions .pollflag { color: $grayedout; padding-right: 6px; } -div.postsearch td.tc1_1 { width: 60px; padding-left: 0; padding-right: 0; text-align: right } -div.postsearch td.tc1_2 { width: 25px; padding-left: 0 } -div.postsearch td.tc2 { width: 65px; } -div.postsearch td.tc3 { width: 90px; } +.discussions td.tc4 { text-align: right; } +.discussions a.locked { text-decoration: line-through; } +.discussions .boards { padding-left: 10px } +.discussions .boards a { color: var(--grayedout) } +.discussions td.tc2 { width: 66px; text-align: right } +.discussions td.tc3 { width: 116px; } +.discussions td.tc4 { width: 256px; } +.discussions .pollflag { color: var(--grayedout); padding-right: 6px; } +.boardsearchoptions { + margin: 0 auto; + td { padding: 10px } + select { width: 150px; scrollbar-width: none } + select::-webkit-scrollbar { display: none } +} +.postsearch td.tc1_1 { width: 60px; padding-left: 0; padding-right: 0; text-align: right } +.postsearch td.tc1_2 { width: 25px; padding-left: 0 } +.postsearch td.tc2 { width: 65px; } +.postsearch td.tc3 { width: 90px; } /***** Release listings on VN & producer pages */ .releases { width: 100%; } -.releases tr.vn > td { background: $boxbg; font-weight: bold; } +.releases tr.vn > td { background: var(--boxbg); font-weight: bold; } .releases tr.vn .ulist-widget-icon { padding-right: 10px } -.releases td.tc1 { padding-left: 30px; width: 80px; white-space: nowrap } -.releases td.tc2 { text-align: center; width: 50px; white-space: nowrap } +.releases td.tc1 { padding-left: 30px; width: 110px; white-space: nowrap } +.releases td.tc2 { width: 46px; white-space: nowrap } .releases td.tc3 { text-align: right; padding: 0; width: 120px; } -.releases td.tc_icons { padding: 0 4px } -.releases td.tc_prod { color: $grayedout; white-space: nowrap; width: 50px } -.releases td.tc5 { width: 70px; text-align: right } +.releases td.tc_icons { text-align: right; padding: 0 4px } +.releases td.tc_prod { color: var(--grayedout); white-space: nowrap; width: 56px } +.releases td.tc5 { width: 76px; text-align: right } .releases td.tc6 { text-align: right; width: 35px; padding: 0; white-space: nowrap } .releases tr.mtl a, -.releases tr.mtl b, -.releases tr.mtl td { color: $grayedout } +.releases tr.mtl td { color: var(--grayedout) } +.releaseero { cursor: default; color: transparent; opacity: 0.7 } +.releaseero_no { text-shadow: 0 0 var(--grayedout) } +.releaseero_yes { text-shadow: 0 0 var(--maintext) } +.releaseero_cen { text-shadow: 0 0 var(--statnok) } +.releaseero_unc { text-shadow: 0 0 var(--statok) } .vnreleases details { margin: 7px 0 3px 0 } -.vnreleases details[open] summary b.grayedout { display: none } -.vnreleases summary { background: $boxbg; font-weight: bold; width: 100%; cursor: pointer } -.vnreleases summary.mtl { color: $grayedout; } +.vnreleases details[open] summary small { display: none } +.vnreleases summary { background: var(--boxbg); font-weight: bold; width: 100% } +.vnreleases summary.mtl { color: var(--grayedout); } /***** VN page *******/ @@ -468,38 +235,46 @@ div.vnimg { float: left; width: 250px; margin: 0 10px; } div.vnimg p { text-align: center; padding: 0px; margin: 0; } div.vndetails h2 { margin: 5px 0 0 0; } .vndesc p { padding: 0 0 0 5px; } -div.vndetails > table { float: left; width: 500px; } -div.vndetails > table td.key { width: 90px; } +div.vndetails > table { float: left; width: 100%; max-width: 500px; } +div.vndetails td.key, +div.vndetails > table > tbody > tr > td:first-child { width: 96px; } div.vndetails > table dt { float: left; font-style: italic; } div.vndetails > table dd { margin-left: 90px; } -div.vndetails td.title abbr { float: right } +div.vndetails td.titles div { display: inline-block } +div.vndetails td.titles summary table { margin-top: -18px } +div.vndetails td.titles table { margin-left: 96px } +div.vndetails tr.title td { padding: 0 0px } div.vndetails td.relations dt { float: none; font-style: normal; } div.vndetails td.relations dd { margin-left: 15px; } -div.vndetails td.anime b { font-size: 10px; font-weight: normal; padding-right: 4px; } +div.vndetails td.relations label { float: right } +div.vndetails td.relations input:not(:checked) ~ dl .unofficial { display: none } +#buynow .ad { float: right } +div.vndetails td.anime span { font-size: 10px; padding-right: 4px; } div.vndetails .lengthvotefrm { margin-top: -18px; text-align: right; - > form { text-align: left } - > form div > div { - display: flex; - select { flex: 1 } - input { flex: 0 0 30px } + form { text-align: left } + td { + padding: 0; + input[type=button] { width: 25px; margin-right: -2px } } + table, select { width: 100% } } .ulistvn { padding: 5px 0 0 0 } -.ulistvn > b { font-size: 14px } +.ulistvn > strong { font-size: 14px } .ulistvn > span { float: right } .ulistvn textarea { width: 100% } .ulistvn .date span:not(.spinner) { display: none } -div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $border; padding: 3px 5% 0 5%; text-align: center; } +div#vntags { margin: 0 30px 0 30px; border-top: 1px solid var(--border); padding: 3px 5% 0 5%; text-align: center; } #vntags span { white-space: nowrap; margin-left: 15px; } -#vntags b { color: $grayedout; font-weight: normal; font-size: 10px } +#vntags small { font-size: 10px } +#vntags .lieo { text-decoration: line-through } #tagops { text-align: right; width: auto; } -#tagops label { margin: 0 0 0 10px; border: 0; outline: none; color: $link; cursor: pointer; } -#tagops label.sec { border-left: 1px solid $border; padding-left: 10px } +#tagops label { margin: 0 0 0 10px; border: 0; outline: none; color: var(--link); cursor: pointer; } +#tagops label.sec { border-left: 1px solid var(--border); padding-left: 10px } #tagops label.lst { margin: 0 30px 0 10px; } -#tagops input:checked + label { color: $maintext; } +#tagops input:checked + label { color: var(--maintext); } /* tag filter machinery; the order of declarations is important */ @@ -517,30 +292,32 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo #tag_spoil_none:checked ~ #vntags .tagspl2 { display: none; } #tag_spoil_some:checked ~ #vntags .tagspl2 { display: none; } +#tag_spoil_all:checked ~ #vntags .lie { text-decoration: line-through } + /* end of tag filter machinery */ #screenshots table { width: 100%; } -#screenshots tr.rel td { background: $boxbg; font-weight: bold; } +#screenshots tr.rel td { background: var(--boxbg); font-weight: bold; } #screenshots p.rel { - background: $boxbg; + background: var(--boxbg); margin: 0; padding: 2px; font-weight: bold; text-align: center; } #screenshots a.scrlnk { margin: 2px; border: none } -#screenshots div.scr { display: block; padding-left: 30px; text-align: center } +#screenshots div.scr { display: block; padding: 0 15px; text-align: center } #screenshots a img { border: 3px solid transparent; } -#screenshots a.nsfw img { border: 3px solid $statnok; } -#screenshots a:hover img { border: 3px solid $border; } +#screenshots a.nsfw img { border: 3px solid var(--statnok); } +#screenshots a:hover img { border: 3px solid var(--border); } #scrhide_s0:checked ~ #screenshots label[for=scrhide_s0], #scrhide_s1:checked ~ #screenshots label[for=scrhide_s1], #scrhide_s2:checked ~ #screenshots label[for=scrhide_s2], #scrhide_v0:checked ~ #screenshots label[for=scrhide_v0], #scrhide_v1:checked ~ #screenshots label[for=scrhide_v1], -#scrhide_v2:checked ~ #screenshots label[for=scrhide_v2] { color: $maintext } +#scrhide_v2:checked ~ #screenshots label[for=scrhide_v2] { color: var(--maintext) } #screenshots .scrlnk { display: none } #scrhide_s0:checked ~ #screenshots .scrlnk_s0 { display: inline } @@ -549,28 +326,40 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo #scrhide_v0:checked ~ #screenshots .scrlnk_v0 { display: none } #scrhide_v1:checked ~ #screenshots .scrlnk_v1 { display: none } -.summarize_more { - margin-top: 9px; margin-bottom: -10px; padding: 0; height: 15px; - border: 1px solid $border; border-top: none; - background: $boxbg; - text-align: center +.reviews { + display: flex; column-gap: 10px; flex-wrap: wrap; + > article { + flex: 1 1 0; flex-basis: 450px; padding: 0; + display: flex; flex-direction: column; + > div:nth-child(3) > span:first-child { float: right; color: var(--grayedout); font-style: normal; margin: -5px 0 0 0; visibility: hidden } + > div:nth-child(3):hover > span:first-child, + > div:nth-child(3):active > span:first-child { visibility: visible } + .review_spoil input:checked ~ span { display: none } + .review_spoil input:not(:checked) ~ div { display: none } + > div:first-child { padding: 3px 5px; display: flex; justify-content: space-between; background: var(--secbg); font-weight: bold } + > div:first-child > span:first-child { font-weight: bold } + > div:nth-child(2) { background: var(--secbg) } + > div:nth-child(2) p { padding: 2px; text-align: center } + > div:nth-child(3) { flex: 1; padding: 10px } + > div:last-child { padding: 2px 5px; display: flex; justify-content: space-between; background: var(--boxbg) } + .myvote { font-weight: bold; text-decoration: underline } + } } -.reviews { display: flex; justify-content: center; flex-wrap: wrap } -.reviewbox { margin: 10px 12px 30px 12px; flex: 1 1; flex-basis: 450px } -.reviewbox > div:nth-child(3) > span:first-child { float: right; color: $grayedout; font-style: normal; margin: -5px 0 0 0; visibility: hidden } -.reviewbox > div:nth-child(3):hover > span:first-child, -.reviewbox > div:nth-child(3):active > span:first-child { visibility: visible } -.reviewbox .review_spoil input:checked ~ span { display: none } -.reviewbox .review_spoil input:not(:checked) ~ div { display: none } -.reviewbox > div:first-child { display: flex; justify-content: space-between; background: $secbg; font-weight: bold } -.reviewbox > div:first-child > span:first-child { font-weight: bold } -.reviewbox > div:nth-child(2) { background: $secbg } -.reviewbox > div:nth-child(2) p { padding: 2px; text-align: center } -.reviewbox > div:nth-child(3) { box-sizing: border-box; padding: 10px; background: $boxbg } -.reviewbox > div:last-child { display: flex; justify-content: space-between; border-top: 1px solid $border } -.reviewbox .myvote { font-weight: bold; text-decoration: underline } +.quote-score { + white-space: nowrap; + a { border: 0!important; color: var(--grayedout) } + a:hover, a.active { color: var(--maintext) } + svg { width: 14px; height: 14px } +} +.browse.quotes { + .tc1, .tc2, .tc3 { white-space: nowrap } + .tc1 { width: 90px } + .tc2 { width: 130px } + .tc3 { width: 140px } + .setfil { font-size: 10px; padding-right: 3px } +} /***** VN tags tab (/v+/tags) *******/ @@ -578,10 +367,11 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo .vntaglist { list-style-type: none; column-width: 400px } .vntaglist li.tagvnlist-top:not(:first-child) { margin-top: 30px } .vntaglist li.tagvnlist-parent { margin: 5px 0 3px 0 } -.vntaglist li.tagvnlist-parent a { color: $maintext; font-weight: bold } -.vntaglist li.tagvnlist-inherited a { color: $grayedout } -.vntaglist li:not(.tagvnlist-inherited) b.grayedout { color: $link } -.vntaglist h3 a { color: $maintext } +.vntaglist li.tagvnlist-parent a:not(.grayedout) { color: var(--maintext); font-weight: bold } +.vntaglist li.tagvnlist-inherited a { color: var(--grayedout) } +.vntaglist li:not(.tagvnlist-inherited) small { color: var(--link) } +.vntaglist h3 a { color: var(--maintext) } +.vntaglist .lie { text-decoration: line-through } .vntaglist li { list-style-type: none; padding-right: 30px } .vntaglist li .tagscore { margin-right: 10px } @@ -589,17 +379,17 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo /***** Vote stats ****/ -.votestats { width: 630px; margin: 0 auto; } +.votestats { width: 100%; max-width: 630px; margin: 0 auto; } .votegraph { float: left; margin-right: 20px } .votegraph td { padding: 0 2px } .votegraph td.number { text-align: right } -.votegraph td div { float: left; height: 16px; background-color: $border; margin-right: 2px; padding: 0; } +.votegraph td div { float: left; height: 16px; background-color: var(--border); margin-right: 2px; padding: 0; } .votestats thead td { background: transparent; text-align: center; padding: 2px; } .votestats tfoot td { text-align: right } .votestats div { text-align: center; padding-top: 5px; } .recentvotes { width: 300px } -.recentvotes thead tr td b { font-weight: normal; padding-left: 5px } +.recentvotes thead tr td span { font-weight: normal; padding-left: 5px } @@ -612,7 +402,7 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo .votebooth td.tc1 { padding-right: 20px } .votebooth td.tc2 { min-width: 240px } .votebooth td.tc2 div { margin: 2px; } -.votebooth td.tc2 div.graph { float: left; height: 14px; background-color: $border; padding: 0; } +.votebooth td.tc2 div.graph { float: left; height: 14px; background-color: var(--border); padding: 0; } .votebooth td.tc3 { text-align: right; padding-right: 16px; } .votebooth .submit { width: 100px } .votebooth .option { margin-left: 8px } @@ -623,8 +413,8 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo /***** VN edit *****/ .vnedit_scr { width: 95%; margin: auto } -.vnedit_scr > tr:nth-child(odd) > td { background: $boxbg } -.vnedit_scr > tr > td { border-bottom: 1px solid $border } +.vnedit_scr > tr:nth-child(odd) > td { background: var(--boxbg) } +.vnedit_scr > tr > td { border-bottom: 1px solid var(--border) } .vnedit_scr > tr > td:nth-child(1) { padding: 10px; width: 136px } .vnedit_scr > tr > td:nth-child(2) { width: 10px; padding-top: 20px } @@ -632,10 +422,10 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo /***** VN Release tab *****/ .releases_compare table { margin: 0 auto; } -.releases_compare td { margin: 0 auto; border: 1px solid $border; } -.releases_compare td.bg { background: $boxbg; } +.releases_compare td { margin: 0 auto; border: 1px solid var(--border); } +.releases_compare td.bg { background: var(--boxbg); } .releases_compare td.multi { vertical-align:middle; } -.releases_compare .key { background: $boxbg; } +.releases_compare .key { background: var(--boxbg); } /****** VN browse ********/ @@ -646,12 +436,12 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo .vnbrowse .tc_title { padding-left: 30px } .vnbrowse .tc_plat { text-align: right; padding: 0; } .vnbrowse .tc_lang { padding: 0; } -.vnbrowse .tc_pop { text-align: right; padding-right: 10px } -.vnbrowse .tc_rating, .vnbrowse .tc_average { width: 80px; white-space: nowrap } +.vnbrowse .tc_rating { width: 100px; white-space: nowrap } +.vnbrowse .tc_average { width: 80px; white-space: nowrap } .vncards { padding: 0; display: flex; flex-wrap: wrap } .vncards > div { padding: 2px 2px 10px 2px; display: flex; flex: 1; min-width: 380px } -.vncards > div:hover { background-color: $secbg } +.vncards > div:hover { background-color: var(--secbg) } .vncards > div > div:first-child { flex-shrink: 0; width: 90px; height: 120px; text-align: center } .vncards > div > div:nth-child(2) { height: 120px; padding-left: 5px; overflow-y: hidden; width: 100% } .vncards table td { padding: 0 5px 0 0 } @@ -661,20 +451,20 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo .vngrid > div { margin: 5px 10px 15px 10px; flex: 1 0 200px; max-width: 256px; height: 300px; background-size: cover; background-repeat: no-repeat; background-position: top } .vngrid > div > a { display: none } .vngrid > div > a:hover { border-bottom: none } -.vngrid > div:hover > a, .vngrid > div.noimage > a { box-sizing: border-box; padding: 5px; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); color: $maintext } +.vngrid > div:hover > a, .vngrid > div.noimage > a { padding: 5px; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); color: var(--maintext) } .vngrid > div > a > span:first-child { display: block; font-weight: bold } .vngrid table { margin: 10px 0 } .vngrid table td { padding: 0 5px 0 0 } -.vngrid .ulist-widget-icon { float: right; margin: 280px 0 -300px -20px!important; padding: 3px; width: 20px; height: 20px } /* Horrible hacks everywhere */ +.vngrid .ulist-widget-icon { float: right; margin: 273px 0 -300px 0px!important; padding: 10px 5px 0 10px; background-color: rgba(0,0,0,0.8); border-radius: 15px 0 0 0 } /* Horrible hacks everywhere */ /***** Producer page *******/ .prodvns { list-style-type: none } -.prodvns li > span:first-child { display: inline-block; width: 80px; text-align: right; padding-right: 15px } -.prodvns li > span:last-child { color: $grayedout; padding-left: 15px } -.prodvns .ulist-widget-icon { padding-right: 5px; width: 14px; height: 14px } +.prodvns li > span:first-child { display: inline-block; width: 95px; text-align: right; padding-right: 15px } +.prodvns li > span:last-child { color: var(--grayedout); padding-left: 15px } +.prodvns .ulist-widget-icon { padding-right: 5px } /***** Producer list ******/ @@ -688,9 +478,13 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo /***** Release page *****/ -.release table { width: 400px; margin: 0 auto; } -.release .key { width: 90px; } - +.release table { width: 500px; margin: 0 auto; } +.release td.titles table { margin-left: 96px } +.release tr.title td { padding: 0 0px } +.release tr.title td:first-child { width: 20px } +.release .key { width: 110px; } +.release dt { float: none; font-style: normal; } +.release dd { margin-left: 15px; } /***** Review page *****/ @@ -706,13 +500,13 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo /***** Review browser *****/ -.reviewlist td.tc1 { width: 90px } +.reviewlist td.tc1 { width: 120px } .reviewlist td.tc2 { width: 110px; } .reviewlist td.tc3 { width: 50px; text-align: right } .reviewlist td.tc4 { width: 50px } .reviewlist td.tc6 { width: 140px } .reviewlist td.tc7 { width: 30px; text-align: right } -.reviewlist td.tc8 { width: 250px; text-align: right } +.reviewlist td.tc8 { width: 260px; text-align: right } /***** Release browser *****/ @@ -722,6 +516,9 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo .relbrowse .tc3 { width: 85px; text-align: right; padding: 0; } +/***** DRM List ****/ + +.drmlist > div { margin: 3px 20px 10px 20px } /***** Image hover thingy (VNWeb::Images::Lib::images_) ****/ @@ -731,8 +528,8 @@ div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $bo .imghover div.imghover--visible { position: relative } .imghover div.imghover--visible > a { border-bottom: 0 } .imghover div.imghover--visible .imghover--overlay { display: none; white-space: nowrap; font-size: 11px } -.imghover:hover div.imghover--visible .imghover--overlay { display: block; position: absolute; right: 0; bottom: 0; padding: 5px 10px; background: $secbg; border: 0 } -.imghover div.imghover--warning { border: 1px solid $border; background: $secbg; box-sizing: border-box; padding: 10px 5px } +.imghover:hover div.imghover--visible .imghover--overlay { display: block; position: absolute; right: 0; bottom: 0; padding: 5px 10px; background: var(--secbg); border: 0 } +.imghover div.imghover--warning { border: 1px solid var(--border); background: var(--secbg); padding: 10px 5px } @@ -747,8 +544,10 @@ div.charimg p { text-align: center; padding: 0px; margin: 0; } .chardesc h2 { margin: 0; } .chardesc p { padding: 0 0 0 5px; } div.chardetails table { float: left; width: 525px; } -div.chardetails table td.key { width: 100px; } +div.chardetails table td.key { width: 106px; } div.chardetails.charsep { margin-top: 30px } +div.chardetails .lie { text-decoration: line-through } +div.charquotes { margin: 0 auto; width: 800px; } @@ -756,45 +555,47 @@ div.chardetails.charsep { margin-top: 30px } table.chare_traits .buts { padding: 0 20px } -table.chare_traits .buts a { box-sizing: border-box; display: block; width: 15px; height: 14px; border: 1px solid $border; margin: 0; float: left } +table.chare_traits .buts a { display: block; width: 15px; height: 14px; border: 1px solid var(--border); margin: 0; float: left } table.chare_traits .buts a.s0 { border: none; background-color: #0f0 } table.chare_traits .buts a.s1 { border: none; background-color: #f80 } table.chare_traits .buts a.s2 { border: none; background-color: #f40 } +table.chare_traits .buts a:nth-child(4) { margin-left: 20px } +table.chare_traits .buts a.sl { border: none; background-color: #f40 } /***** Char browse *****/ -div.charb table { table-layout: fixed } -div.charb td { white-space: nowrap } -div.charb td.tc1 { text-align: right; width: 40px; padding-left: 0!important; padding-bottom: 0 } -div.charb td.tc2 { overflow: hidden } -div.charb td.tc2 b { margin-left: 10px } -div.charb td.tc2 b a { color: $grayedout!important } +.charb table { table-layout: fixed } +.charb td { white-space: nowrap } +.charb td.tc1 { text-align: right; width: 40px; padding-left: 0!important; padding-bottom: 0 } +.charb td.tc2 { overflow: hidden } +.charb td.tc2 small { margin-left: 10px } +.charb td.tc2 small a { color: inherit } -div.charbcard { padding: 0; display: flex; flex-wrap: wrap } -div.charbcard > div { padding: 2px 2px 10px 2px; display: flex; flex: 1; min-width: 280px } -div.charbcard > div:hover { background-color: $secbg } -div.charbcard > div > div:first-child { flex-shrink: 0; width: 90px; height: 120px; text-align: center } -div.charbcard > div > div:nth-child(2) { height: 120px; padding-left: 5px; overflow-y: hidden } -div.charbcard b a { color: $grayedout!important } +.charbcard { padding: 0; display: flex; flex-wrap: wrap } +.charbcard > div { padding: 2px 2px 10px 2px; display: flex; flex: 1; min-width: 280px } +.charbcard > div:hover { background-color: var(--secbg) } +.charbcard > div > div:first-child { flex-shrink: 0; width: 90px; height: 120px; text-align: center } +.charbcard > div > div:nth-child(2) { height: 120px; padding-left: 5px; overflow-y: hidden } +.charbcard small a { color: inherit } -div.charbgrid { padding: 10px; display: flex; flex-wrap: wrap; justify-content: space-evenly } -div.charbgrid a { margin: 5px 10px 15px 10px; flex: 1 0 200px; max-width: 256px; height: 300px; background-size: cover; background-repeat: no-repeat; background-position: top; text-align: center; opacity: 0.9 } -div.charbgrid a:hover { border-bottom: none; opacity: 1 } -div.charbgrid span { display: block; margin: 0 auto; padding: 2px; font-size: 15px; font-weight: bold; background-color: rgba(0,0,0,0.4); color: $maintext } +.charbgrid { padding: 10px; display: flex; flex-wrap: wrap; justify-content: space-evenly } +.charbgrid a { margin: 5px 10px 15px 10px; flex: 1 0 200px; max-width: 256px; height: 300px; background-size: cover; background-repeat: no-repeat; background-position: top; text-align: center; opacity: 0.9 } +.charbgrid a:hover { border-bottom: none; opacity: 1 } +.charbgrid span { display: block; margin: 0 auto; padding: 2px; font-size: 15px; font-weight: bold; background-color: rgba(0,0,0,0.4); color: var(--maintext) } /***** Staff browse *****/ -div.staffbrowse { padding-bottom: 10px } +.staffbrowse { padding-bottom: 10px } .staffbrowse ul { margin-top: -5px; margin-left: 3%; column-width: 300px } .staffbrowse ul li { list-style-type: none; margin-bottom: 2px; } .staffbrowse ul li abbr { margin-right: 5px; margin-top: 1px; } .staffpage table.stripe { width: 450px; margin: 0 auto; } -.staffpage .key { width: 70px; } -.staffroles td.tc_ulist { padding-left: 15px; width: 25px } +.staffpage .key { width: 76px; } +.staffroles td.tc_ulist { padding-left: 15px; width: 40px } .staffroles td.tc_ulist + td { padding-left: 0!important } -.staffroles td.tc2 { white-space: nowrap; width: 80px } +.staffroles td.tc2 { white-space: nowrap; width: 100px } .staffroles td.tc3 { white-space: nowrap; width: 100px } .staffroles td.tc4 { white-space: nowrap; padding-right: 10px } table.aliases td { padding: 0 5px; } @@ -803,14 +604,17 @@ table.aliases td.key { padding: 0 5px 0 0; width: auto } /***** Staff display on VN pages *****/ -.vnstaff { width: 97%; margin: -15px auto 5px auto; justify-content: space-between } +.vnstaff div { width: 97%; margin: 0 auto 5px auto; justify-content: space-between } .vnstaff ul { list-style: none; margin: 0 } .vnstaff-2 ul { width: 100% } .vnstaff-2 { flex-wrap: wrap } .vnstaff-3 ul { width: 32% } .vnstaff-4 ul { width: 24% } -.vnstaff li { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; padding-bottom: 1px } -.vnstaff li.vnstaff_head { font-weight: bold; margin-top: 15px } -.vnstaff li b.grayedout { margin-left: 10px } +.vnstaff li { padding-bottom: 1px; padding-left: 10px; } +.vnstaff li a { display: inline-block; margin-left: -10px } +.vnstaff li small { padding-left: 10px } +.vnstaff li.vnstaff_head { font-weight: bold; padding-left: 0 } +.vnstaff li:not(:first-child).vnstaff_head { margin-top: 15px } +.vnstaff summary { background: var(--boxbg); font-weight: bold; width: 100% } @media(min-width: 0px) { .vnstaff-2{display:flex} .vnstaff-3{display:none} .vnstaff-4{display:none} } @media(min-width: 850px) { .vnstaff-2{display:flex} .vnstaff-3{display:none} .vnstaff-4{display:none} .vnstaff-2 ul {width:49%} .vnstaff-2{flex-wrap:nowrap} } @media(min-width:1000px) { .vnstaff-2{display:none} .vnstaff-3{display:flex} .vnstaff-4{display:none} } @@ -820,37 +624,27 @@ div.charsum_list { text-align: center } div.charsum_list .name { white-space: nowrap; display: flex; justify-content: space-between } div.charsum_list .name span { overflow: hidden; text-overflow: ellipsis; padding-bottom: 1px } div.charsum_list .name a { font-weight: bold } -div.charsum_list .actor { border-top: 1px solid $border; padding-top: 3px } -div.charsum_list .actor b.grayedout { margin-left: 10px } +div.charsum_list .actor { border-top: 1px solid var(--border); padding-top: 3px } +div.charsum_list .actor small { margin-left: 10px } div.charsum_list .charsum_bubble { - background: $boxbg; + background: var(--boxbg); display: inline-block; text-align: left; vertical-align: top; - width: 320px; + width: 100%; + max-width: 340px; margin: 3px; padding: 3px 10px; } -/***** Staff edit *****/ - -.staffedit td.tc_name, -.staffedit td.tc_original { width: 200px } -.staffedit td.tc_name input, -.staffedit td.tc_original input { width: 200px } -.staffedit td.tc_add { width: 40px; text-align: left; white-space: nowrap } -.staffedit table.names td { padding: 1px 2px; vertical-align: middle; } -.staffedit table.names tr.alias_new td { padding-top: 8px } - - /***** Documentation pages *****/ .docs { padding: 0 15% 20px 15%; line-height: 1.4 } .docs h3 { margin: 30px 0 5px; font-size: 16px } .docs h4 { margin-top: 15px; font-size: 14px } .docs h3 a:target, -.docs h4 a:target { color: $standout } +.docs h4 a:target { color: var(--standout) } .docs dd { margin: 5px 0 5px 120px } .docs dt { float: left } .docs ul, .docs ol { margin: 5px 0 5px 20px } @@ -862,7 +656,7 @@ div.charsum_list .charsum_bubble { .docs td[colspan]+td, .docs td[colspan]+td+td { white-space: normal } .docs p + p { padding-top: 10px } -.docs ul.index { display: block; float: right; width: 190px; padding: 2px; margin: 0 0 10px 5px; background: $boxbg; border: 1px solid $border; } +.docs ul.index { display: block; float: right; width: 190px; padding: 2px; margin: 0 0 10px 5px; background: var(--boxbg); border: 1px solid var(--border); } .docs ul.index li { list-style-type: none; } .docs ul.index li a { margin: 0 0 0 10px; } .docs img { margin: 5px } @@ -871,15 +665,15 @@ div.charsum_list .charsum_bubble { /* vote lists */ -div.votelist td.tc1 { width: 100px; padding-top: 0; padding-bottom: 0 } -div.votelist td.tc2 { width: 50px; text-align: right; padding-right: 10px } +.votelist td.tc1 { width: 100px; padding-top: 0; padding-bottom: 0 } +.votelist td.tc2 { width: 50px; text-align: right; padding-right: 10px } /* vn/user length vote list */ -div.lengthlist { - .tc1 { width: 100px } +.lengthlist { + .tc1 { width: 120px } .tc3 { width: 60px; white-space: nowrap } .tc4 { width: 100px; padding-left: 10px } .tc5 { width: 70px; white-space: nowrap } @@ -888,16 +682,11 @@ div.lengthlist { } -/***** Wishlist browser ******/ - -.wishlist .tc1 { padding-top: 0; padding-bottom: 0; } -.wishlist tfoot td { padding: 0 0 0 25px } - - -/***** New User's VN list *****/ +/***** User's VN list *****/ .labelfilters { text-align: center } -.labelfilters input.submit { margin-top: 5px } +.labelfilters .xsearch { text-align: left } +.labelfilters .linkradio { padding: 5px } .managelabels > div { width: 600px; margin: 10px auto } .managelabels table { margin: 0 auto } @@ -909,12 +698,12 @@ div.lengthlist { .savedefault { width: 600px; margin: 10px auto } .exportlist { width: 600px; margin: 10px auto } -.ulist .tc1 { white-space: nowrap; width: 70px } +.ulist .tc1 { white-space: nowrap; width: 100px } .ulist .tc1 label { cursor: pointer } .ulist .tc1 input { display: none } .ulist .tc1 label:before { content: '▸ ' } .ulist .tc1 input:checked + label:before { content: '▾ ' } -.ulist .tc_title b { margin-left: 10px } +.ulist .tc_title small { margin-left: 10px } .ulist .tc_vote { white-space: nowrap; width: 60px; text-align: right; padding-right: 10px } .ulist .tc_vote input { width: 55px; text-align: right } .ulist .tc_voted, @@ -933,7 +722,7 @@ div.lengthlist { .ulist .tc_opt { padding: 0 0 5px 70px } .ulist .tc_opt textarea { width: 500px; height: 18px; border: none } -.ulist .tc_opt textarea:focus { height: 50px; border: 1px solid $secborder } +.ulist .tc_opt textarea:focus { height: 50px; border: 1px solid var(--secborder) } .ulist .tc_opt textarea + div { display: inline-block; padding-left: 10px } .ulist .tc_opt .tco1 { white-space: nowrap; width: 100px } .ulist .tc_opt .tco2 { white-space: nowrap; width: 100px } @@ -944,14 +733,14 @@ div.lengthlist { .ulist-widget-icon { cursor: pointer } .ulist-widget { - z-index: 100; position: fixed; height: 100%; width: 100%; top: 0; right: 0; display: flex; align-items: center; justify-content: center; text-align: left; white-space: normal; background: $boxbg; overflow: auto; font-weight: normal; + z-index: 100; position: fixed; height: 100%; width: 100%; top: 0; right: 0; display: flex; align-items: center; justify-content: center; text-align: left; white-space: normal; background: var(--boxbg); overflow: auto; font-weight: normal; > div { - background: $blendbg; width: 600px; min-height: 300px; border: 2px solid $border; padding: 10px; + background: var(--blendbg); width: 624px; min-height: 324px; border: 2px solid var(--border); padding: 10px; > div.spinner { position: absolute; top: unquote('calc(50% - 8px)'); right: unquote('calc(50% - 8px)'); } } table { width: 100% } table tr { background: none!important } - table td:first-child { width: 100px } + table td:first-child { width: 106px } textarea, select { margin: 0 -1px; width: 100% } .date span:not(.spinner) { display: none } .tco1 { white-space: nowrap; width: 100px } @@ -959,27 +748,44 @@ div.lengthlist { .tco3 { width: 60px; text-align: right; padding-bottom: 0 } } +/* Just kill me already */ +[id^=ulist_labeledit] li > a { + padding-right: 30px!important; + abbr, .spinner { float: right; margin-right: -26px; margin-top: 2px } +} + /***** User notifications *****/ .browse.notifies td.tc1 { width: 14px } .browse.notifies td.tc3 { width: 100px } .browse.notifies td.tc4 { width: 75px } -.browse.notifies tbody td.tc5 a { color: $grayedout } -.browse.notifies td.tc5 i { font-style: normal; color: $maintext } +.browse.notifies tbody td.tc5 a { color: var(--grayedout) } +.browse.notifies td.tc5 span { color: var(--maintext) } .browse.notifies .unread td { font-weight: bold } .browse.notifies tfoot td { padding: 0 0 0 25px } -/***** Subscription tab thiny (HTML::_maintabs_subscribe_() + elm/Subscribe) ****/ -#subscribe .inactive { color: transparent; text-shadow: 0 0 $grayedout } -#subscribe .active { color: transparent; text-shadow: 0 0 $maintext } +/***** Maintabs dropdown thingy used by js Subscribe & TableOpts ****/ -#subscribe > div > a { height: 21px!important /* override :hover change */ } -#subscribe > div > div { position: absolute; width: 1px } -#subscribe > div > div > div { box-sizing: border-box; padding: 10px; width: 500px; border: 1px solid $border; background: $secbg; position: relative; bottom: 0; left: -470px; z-index: 100 } -#subscribe p, #subscribe h4, #subscribe label { display: block; margin-bottom: 3px } +.maintabs-dd p, .maintabs-dd h4, .maintabs-dd label { display: block; margin-bottom: 3px } +.maintabs-dd h4 { text-align: center } +.maintabs-dd > div { position: absolute; width: 1px } +.maintabs-dd > div > div { width: 500px; border: 1px solid var(--border); background: var(--secbg); position: relative; bottom: 0; left: -470px; z-index: 100 } +.tableopts > li > a > svg { width: 14px; height: 14px } +.tableopts-results > div > div { width: 180px; left: -140px; text-align: center } +.tableopts-save > div > div { width: 250px; left: -210px; text-align: center } +.tableopts-save input { width: 97% } +.tableopts-save input:nth-of-type(2) { margin-top: 15px } +.tableopts-cols > div > div { width: 150px; left: -110px; text-align: right; padding: 0 10px } +.tableopts-sort > div > div { width: 250px; left: -210px; text-align: right; padding: 0 10px } +.tableopts-sort table { margin: 0 0 0 auto } +.tableopts-sort td { padding: 0 0 0 15px } + +.subscribe .inactive { color: transparent; text-shadow: 0 0 var(--grayedout) } +.subscribe .active { color: transparent; text-shadow: 0 0 var(--maintext) } +.subscribe > div > div { padding: 10px } /***** User list *****/ .browse.userlist .tc3, @@ -993,17 +799,17 @@ div.lengthlist { /***** Userpage *****/ .userpage table { width: 600px; margin: 0 auto; } -.userpage .key { width: 100px; } +.userpage .key { width: 106px; } /***** User posts browser ****/ -div.uposts table { table-layout: fixed } -div.uposts td { white-space: nowrap } -div.uposts td.tc1 { width: 60px; padding-left: 0!important; padding-right: 0; text-align: right } -div.uposts td.tc2 { width: 40px; padding-left: 0 } -div.uposts td.tc3 { width: 80px; } -div.uposts td.tc4 { overflow: hidden } -div.uposts td.tc4 b { margin-left: 10px } +.uposts table { table-layout: fixed } +.uposts td { white-space: nowrap } +.uposts td.tc1 { width: 60px; padding-left: 0!important; padding-right: 0; text-align: right } +.uposts td.tc2 { width: 40px; padding-left: 0 } +.uposts td.tc3 { width: 80px; } +.uposts td.tc4 { overflow: hidden } +.uposts td.tc4 small { margin-left: 10px } @@ -1030,7 +836,7 @@ div.uposts td.tc4 b { margin-left: 10px } /***** Tag links *****/ -.browse.taglinks .tc1 { width: 70px } +.browse.taglinks .tc1 { width: 100px } .browse.taglinks .tc3 { width: 80px } .browse.taglinks .setfil { font-size: 10px; padding-right: 3px } @@ -1038,9 +844,9 @@ div.uposts td.tc4 b { margin-left: 10px } .tagscore > span { display: inline-block; width: 25px; text-align: right; padding-right: 3px; font-size: 11px } .tagscore > div { display: inline-block; height: 13px; background: linear-gradient(90deg, #cf0 0px, #0f0 30px) } .tagscore.negative > div { background: #f00 } -.tagscore.negative > span { color: $standout } +.tagscore.negative > span { color: var(--standout) } .tagscore.ignored > div { background: #222 } -.tagscore.ignored > span { color: $grayedout } +.tagscore.ignored > span { color: var(--grayedout) } /***** VN tagmod *****/ @@ -1048,28 +854,35 @@ div.uposts td.tc4 b { margin-left: 10px } table.tgl { margin: 10px 0 0 20px } table.tgl td { padding: 1px 5px } table.tgl tfoot td { padding-top: 20px } -table.tgl .tc_you { border-right: 1px solid $border; border-left: 1px solid $border; text-align: center } -table.tgl .tc_others { border-left: 1px solid $border; text-align: center } -table.tgl .tc_tagname { min-width: 200px; border-right: 1px solid $border } +table.tgl .tc_you { border-right: 1px solid var(--border); border-left: 1px solid var(--border); text-align: center } +table.tgl .tc_others { border-left: 1px solid var(--border); text-align: center } +table.tgl .tc_tagname { min-width: 200px; border-right: 1px solid var(--border) } table.tgl tbody .tc_tagname { padding-left: 15px } -table.tgl .tc_myvote { padding: 0 0 0 30px; min-width: 100px } +table.tgl .tc_myvote { padding: 0 0 0 10px; min-width: 90px } +table.tgl .tc_mynote { min-width: 25px } table.tgl .tc_mynote span { cursor: pointer } -table.tgl .noteview { position: absolute; max-width: 400px; padding: 0 5px 5px 5px; background: $blendbg } -table.tgl .buts a { box-sizing: border-box; display: block; width: 15px; height: 14px; border: 1px solid $border; margin: 0; float: left } -table.tgl .buts a.l0 { border: none; background-color: $border } +table.tgl .noteview { position: absolute; max-width: 410px; padding: 0 5px 5px 5px; background: var(--blendbg) } +table.tgl .buts a { display: block; width: 15px; height: 14px; border: 1px solid var(--border); margin: 0; float: left } +table.tgl .buts a.l0 { border: none; background-color: var(--border) } table.tgl .buts a.l1 { border: none; background-color: #cf0 } table.tgl .buts a.l2 { border: none; background-color: #8f0 } table.tgl .buts a.l3 { border: none; background-color: #0f0 } table.tgl .buts a.ld { border: none; background-color: #f00 } -table.tgl tbody .tc_myover { padding: 0 5px } -table.tgl .tc_myspoil { padding: 0 30px; min-width: 60px } -table.tgl .buts a.sn { border: none; background-color: $border } +table.tgl tbody .tc_myover { padding: 0 } +table.tgl .buts a.ov { border: none; background-color: #f00 } +table.tgl .tc_myspoil { padding: 0; min-width: 75px } +table.tgl .buts a.sn { border: none; background-color: var(--border) } table.tgl .buts a.s0 { border: none; background-color: #0f0 } table.tgl .buts a.s1 { border: none; background-color: #f80 } table.tgl .buts a.s2 { border: none; background-color: #f40 } -table.tgl .tc_allvote { border-left: 1px solid $border; padding: 1px 0 0 30px; } +table.tgl .buts a.s3 { border: none; background-color: #cf0 } +table.tgl .tc_mylie { padding: 0; min-width: 55px } +table.tgl .buts a.fn { border: none; background-color: var(--border) } +table.tgl .buts a.f0 { border: none; background-color: #0f0 } +table.tgl .buts a.f1 { border: none; background-color: #f00 } +table.tgl .tc_allvote { border-left: 1px solid var(--border); padding: 1px 0 0 30px; } table.tgl .tc_allvote i { font-style: normal; font-size: 10px } -table.tgl .tc_allspoil { text-align: right; padding-right: 15px } +table.tgl .tc_allspoil { text-align: right; padding-right: 5px } table.tgl .tagmod_cat td { font-weight: bold; padding-top: 10px } @@ -1077,23 +890,23 @@ table.tgl .tagmod_cat td { font-weight: bold; padding-top: 10px } /****** Revision information ******/ -div.revision div.rev, div.revision table { - border: 1px solid $border; +.revision div.rev, .revision table { + border: 1px solid var(--border); margin: 0 auto; width: 90%; - background-color: $secbg; + background-color: var(--secbg); clear: both; } -div.revision { padding-bottom: 10px; } -div.revision table thead tr td { background-color: transparent!important; text-align: center; font-weight: normal; } -div.revision table td { border-right: 1px solid $border; padding: 5px; } -div.revision td.tcval { width: 44%; } -div.revision div.rev { padding: 5px; text-align: center; } -.diff_add { font-weight: normal; background-color: $diffadd; } -.diff_del { font-weight: normal; background-color: $diffdel; } -div.revision .next { float: right; margin-right: 5%; } -div.revision .prev { float: left; margin-left: 5%; } -div.revision .item { text-align: center; } +.revision { padding-bottom: 10px; } +.revision table thead tr td { background-color: transparent!important; text-align: center; font-weight: normal; } +.revision table td { border-right: 1px solid var(--border); padding: 5px; } +.revision td.tcval { width: 44%; } +.revision div.rev { padding: 5px; text-align: center; } +.diff_add { background-color: var(--diffadd); } +.diff_del { background-color: var(--diffdel); } +.revision .next { float: right; margin-right: 5%; } +.revision .prev { float: left; margin-left: 5%; } +.revision .item { text-align: center; } @@ -1103,8 +916,8 @@ div#iv_view { position: absolute; top: 0px; left: 0px; - background: $boxbg; - border: 1px solid $border; + background: var(--boxbg); + border: 1px solid var(--border); padding: 5px; text-align: center; } @@ -1136,7 +949,7 @@ div#iv_view { * 3 a -> next * 4 a -> flagging */ -.ivview { position: fixed; background: $boxbg; border: 2px solid $border; padding: 5px; text-align: center } +.ivview { position: fixed; background: var(--boxbg); border: 2px solid var(--border); padding: 5px; text-align: center; box-sizing: content-box } .ivview img { cursor: pointer } .ivview > div:nth-child(1) { position: absolute; left: 48%; top: 48%; width: 30px; height: 30px } .ivview > div:nth-child(2) { position: relative } @@ -1174,84 +987,40 @@ div#iv_view { .ivview > div:nth-child(3) > a:nth-child(4) { text-align: right; font-size: 11px; font-weight: normal } -/****** filter selector *****/ - -.fil_div { - position: absolute; - top: 0px; - left: 0px; - background: $tabbg; - border: 1px solid $border; - padding: 5px; - width: 600px; - text-align: center; -} -.fil_div a.close { float: right; border: 0; font-weight: bold } -.fil_div p.browseopts { padding: 2px 20px; line-height: 23px } -.fil_div .browseopts a { outline: none; color: $maintext } -.fil_div .browseopts a.active { font-weight: bold } -.fil_div b.ruler { display: block; margin: auto; width: 93%; height: 1px; border-bottom: 1px solid $border; margin-bottom: 5px } -.fil_div h3 { width: 100%; text-align: center; font-size: 13px } -.fil_div table { width: 93%; text-align: left; margin: 0 auto 5px auto } -.fil_div table td.label label { width: 120px } -.fil_div table td.label b { display: block; font-weight: normal; padding: 10px 5px 0 0 } -.fil_div table td.check { width: 15px } -.fil_div label.active { font-weight: bold } -.fil_div .opts a { border: 0; outline: none } -.fil_div .opts b { margin: 0 7px; font-weight: normal } -.fil_div .opts a.tsel { color: $maintext; } -.fil_div table ul { margin: 0 0 0 15px } -.fil_div .slider p { margin: 1px; } -.fil_div .slider div { margin: 1px; border: 1px solid $secborder; float: left; height: 12px; } -.fil_div .slider div div { border-top: none; border-bottom: none; cursor: default; position: relative; height: 10px; margin: 1px; } -.fil_div .slider span { margin-left: 5px } - -p.filselect { - text-align: center; - display: block; - margin: 10px auto 3px auto; - border: none; - outline: none; -} -p.filselect a { margin: 0 5px } -p.filselect i { font-style: normal } +/****** Advanced Search *******/ +/* The classes are called 'xsearch' instead of 'advsearch' because the latter triggers some ad blockers. :( */ +.xsearch { max-width: 850px; margin: 0 auto; display: flex; flex-direction: row; justify-content: center } +.xsearch .advrow > tr > td { padding: 0 2px 0 0 } +.xsearch .advrow > tr > td:first-child { text-align: right; white-space: nowrap; } +.xsearch .advrow > tr > td:first-child > div { width: auto } +.xsearch .advnest > tr > td { padding: 0 2px 0 0 } +.xsearch .advnest > tr > td:first-child { text-align: right; white-space: nowrap; } +.xsearch .advnest > tr > td:first-child > div { width: auto } +.xsearch .advnest > tr > td:first-child > b { display: block; margin: 6px 3px 0 0 } -/****** Advanced Search *******/ +/* Line drawing. This is awful */ +.xsearch .advnest > tr > td:nth-child(2) { position: relative; width: 15px; padding: 0 } +.xsearch .advnest > tr > td:nth-child(2) div { border-left: 1px solid var(--border); width: 15px; position: absolute; left: 5px; top: 0; bottom: 0 } +.xsearch .advnest > tr > td:nth-child(2).start { top: 13px } +.xsearch .advnest > tr > td:nth-child(2).start div { border-top: 1px solid var(--border) } +.xsearch .advnest > tr > td:nth-child(2).start span { display: block; position: absolute; left: -5px; top: 0; width: 15px; border-top: 1px solid var(--border); height: 1px } +.xsearch .advnest > tr > td:nth-child(2).end div { bottom: 13px; border-bottom: 1px solid var(--border) } +.xsearch .advnest > tr > td:nth-child(2).mid span { display: block; position: absolute; left: 5px; top: 13px; width: 15px; border-top: 1px solid var(--border); height: 1px } -.advsearch { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center } -.advsearch .advrow > tr > td { padding: 0 2px 0 0 } -.advsearch .advrow > tr > td:first-child { text-align: right; white-space: nowrap; } -.advsearch .advrow > tr > td:first-child > div { width: auto } -.advsearch .advnest > tr > td { padding: 0 2px 0 0 } -.advsearch .advnest > tr > td:first-child { text-align: right; white-space: nowrap; } -.advsearch .advnest > tr > td:first-child > div { width: auto } -.advsearch .advnest > tr > td:first-child > b { display: block; margin: 6px 3px 0 0 } +.xsearch .elm_dd_input { display: inline-block; margin: 5px 4px; width: 150px; vertical-align: middle } +.xsearch .elm_dd_input.short { width: auto } +.xsearch .advbut { width: 100%; background-color: var(--blendbg); text-align: right; white-space: nowrap } +.xsearch .advbut > * { display: inline-block; height: 20px; padding: 3px 5px 0 2px; cursor: pointer; border-bottom: none; font-size: 16px } +.xsearch .advheader { background-color: var(--blendbg); padding: 3px; width: 100%; margin-bottom: 2px } +.xsearch .advheader > h3 { text-align: center; font-weight: bold; font-size: inherit; margin-bottom: 3px } +.xsearch .advheader .opts { display: flex; justify-content: space-between; align-items: flex-end; min-width: 170px } +.xsearch .advheader .opts > * { margin: 0; white-space: nowrap } +.xsearch .advheader .opselect > * { display: inline-block; font-size: 18px; padding: 0 5px } -/* Line drawing. This is awful */ -.advsearch .advnest > tr > td:nth-child(2) { position: relative; width: 15px; padding: 0 } -.advsearch .advnest > tr > td:nth-child(2) div { border-left: 1px solid $border; width: 15px; position: absolute; left: 5px; top: 0; bottom: 0 } -.advsearch .advnest > tr > td:nth-child(2).start { top: 13px } -.advsearch .advnest > tr > td:nth-child(2).start div { border-top: 1px solid $border } -.advsearch .advnest > tr > td:nth-child(2).start span { display: block; position: absolute; left: -5px; top: 0; width: 15px; border-top: 1px solid $border; height: 1px } -.advsearch .advnest > tr > td:nth-child(2).end div { bottom: 13px; border-bottom: 1px solid $border } -.advsearch .advnest > tr > td:nth-child(2).mid span { display: block; position: absolute; left: 5px; top: 13px; width: 15px; border-top: 1px solid $border; height: 1px } - -.advsearch .elm_dd_input { display: inline-block; margin: 5px 4px; width: 150px; vertical-align: middle } -.advsearch .elm_dd_input.short { width: auto } -.advsearch .advbut { width: 100%; background-color: $blendbg; text-align: right; white-space: nowrap } -.advsearch .advbut > * { display: inline-block; box-sizing: border-box; height: 20px; padding: 3px 5px 0 2px; cursor: pointer; border-bottom: none; font-size: 16px } -.advsearch .advbut > b { color: $grayedout; font-style: normal } -.advsearch .advheader { box-sizing: border-box; background-color: $blendbg; padding: 3px; width: 100%; margin-bottom: 2px } -.advsearch .advheader > h3 { text-align: center; font-weight: bold; font-size: inherit; margin-bottom: 3px } -.advsearch .advheader .opts { display: flex; justify-content: space-between; align-items: flex-end; min-width: 170px } -.advsearch .advheader .opts > * { margin: 0; white-space: nowrap } -.advsearch .advheader .opselect > * { display: inline-block; font-size: 18px; padding: 0 5px } - -.advsearch .optbuttons { margin-top: 5px } -.advsearch .optbuttons > .elm_dd_button { margin-top: 5px; margin-right: 10px; width: 120px; display: inline-block; } +.xsearch svg { width: 15px; height: 15px; margin: 2px 0 -2px 0 } @@ -1267,84 +1036,68 @@ p.filselect i { font-style: normal } .imageflag > ul:nth-child(1) { margin-left: 15px } .imageflag > div:nth-child(1) { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2px } .imageflag > div:nth-child(1) span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 20px } -.imageflag > div:nth-child(2) { border: 1px solid $border; padding: 5px; display: flex; justify-content: center; align-items: center; background: #000 } +.imageflag > div:nth-child(2) { border: 1px solid var(--border); padding: 5px; display: flex; justify-content: center; align-items: center; background: #000 } .imageflag > div:nth-child(2) a { border: none; display: inline-block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center } .imageflag > div:nth-child(3) { display: flex; justify-content: space-between; } .imageflag > div:nth-child(4) { display: flex; margin-bottom: 5px } .imageflag > div:nth-child(4) p { flex: 1 0; padding-top: 15px } .imageflag > div:nth-child(4) ul { list-style-type: none; margin: 0 5px 0 0 } .imageflag > div:nth-child(4) ul li:first-child { text-align: center } -.imageflag > div:nth-child(4) ul li label { display: inline-block; border: 1px solid $secborder; padding: 7px; width: 100px; white-space: nowrap; margin: 2px 0; cursor: pointer } +.imageflag > div:nth-child(4) ul li label { display: inline-block; border: 1px solid var(--secborder); padding: 7px; width: 116px; white-space: nowrap; margin: 2px 0; cursor: pointer } .imageflag > div:nth-child(4) ul li.sel label, -.imageflag > div:nth-child(4) ul li label:hover { background-color: $secbg } +.imageflag > div:nth-child(4) ul li label:hover { background-color: var(--secbg) } .imageflag > div:nth-child(4) ul li.overrule label { position: relative; left: 80px; border: none; padding: 0 } .imageflag > div:nth-child(6) { min-height: 200px; padding: 15px 0 } .imageflag > div:nth-child(6) table { margin: 0 auto } .imageflag > div:nth-child(6) table tr.ignored td:nth-child(2), -.imageflag > div:nth-child(6) table tr.ignored td:nth-child(3) { text-decoration: line-through; color: $grayedout } +.imageflag > div:nth-child(6) table tr.ignored td:nth-child(3) { text-decoration: line-through; color: var(--grayedout) } .imageflag > div:nth-child(6) table td { min-width: 50px } .imageflag .fullscreen { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; background-color: #000 } /****** Image browser (/img/browse) ******/ -div.imagebrowse { padding: 0; display: flex; flex-wrap: wrap } +.imagebrowse { padding: 0; display: flex; flex-wrap: wrap } .imagebrowse .imagecard { padding: 2px; display: flex; flex: 1 } -.imagebrowse .imagecard:hover { background-color: $secbg } +.imagebrowse .imagecard:hover { background-color: var(--secbg) } .imagebrowse .imagecard > a { flex-shrink: 0; display: block; width: 150px; height: 120px; background-size: contain; background-repeat: no-repeat; background-position: top right; border: none } .imagebrowse .imagecard > div { padding: 0 0 0 4px } .imagebrowse .imagecard > div svg { font-size: 11px } -.imagebrowse .imagecard > div svg .errorbar { stroke: $standout; stroke-width: 2 } -.imagebrowse .imagecard > div svg .ruler { stroke: $border; stroke-width: 1; stroke-dasharray: 3 } -.imagebrowse .imagecard > div svg rect { fill: $maintext } +.imagebrowse .imagecard > div svg .errorbar { stroke: var(--standout); stroke-width: 2 } +.imagebrowse .imagecard > div svg .ruler { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 } +.imagebrowse .imagecard > div svg rect { fill: var(--maintext) } /****** Icons *******/ -.platicon { width: 16px; height: 16px; margin: -1px 2px -1px 0; border: 0; padding: 0; object-fit: contain } -/* XXX: Not a fan of this filtering solution. Also, these don't work on light skins */ -.liststatus_icon { width: 15px; height: 15px; margin: -1px 0; object-fit: contain; filter: invert(100%); opacity: 0.9 } -.liststatus_icon.add { opacity: 0.4 } -.liststatus_icon.l1 { filter: invert(60%) sepia(28%) saturate(6308%) hue-rotate(157deg) brightness(98%) contrast(102%); } -.liststatus_icon.l2 { opacity: 1; filter: invert(48%) sepia(23%) saturate(3672%) hue-rotate(86deg) brightness(103%) contrast(116%) } -.liststatus_icon.l3 { filter: invert(49%) sepia(95%) saturate(1315%) hue-rotate(348deg) brightness(101%) contrast(101%); } -.liststatus_icon.l4 { filter: invert(17%) sepia(74%) saturate(7213%) hue-rotate(357deg) brightness(89%) contrast(121%); } -.liststatus_icon.l5 { filter: invert(88%) sepia(10%) saturate(6134%) hue-rotate(359deg) brightness(104%) contrast(106%); } -.liststatus_icon.l6 { opacity: 1; filter: invert(10%) sepia(96%) saturate(5309%) hue-rotate(359deg) brightness(96%) contrast(113%) } - -.icons { - background: url(/g/icons.png?#{$icons-version}) no-repeat; - width: 16px; - height: 14px; - margin: 0 2px 0 0; - margin-top: 0px!important; - overflow: hidden; - display:-moz-inline-stack; - display: inline-block; - padding: 0; - border: 0; - text-decoration: none; -} -.icons.lang { width: 13px; height: 11px; opacity: 0.5 } -.icons.lang.mtl { filter: grayscale(1); opacity: 0.4 } -.icons.gen { width: 14px; height: 14px } -.icons.gen.b { width: 28px } -.icons.rtcomplete, .icons.rtpartial, .icons.rttrial { width: 11px; } -abbr.icons { cursor: default; } -a .icons { cursor: pointer } -@import 'data/icons/icons'; - -.release_icons { width: 16px; height: 16px; float: right; margin-left: 4px; } -.release_icon_voiced2, .release_icon_anim2 { filter: hue-rotate(30deg); } -.release_icon_voiced3, .release_icon_anim3 { filter: invert(100%) hue-rotate(240deg); } -.release_icon_voiced4, .release_icon_anim4 { filter: hue-rotate(80deg); } - -/* Relation graph colors */ -svg .border { fill: none; stroke: $border } -svg .edge polygon.border { fill: $border } -svg .nodebg { fill: $tabbg; stroke: $tabbg } -svg text { fill: $maintext } -svg .edge text { font: 8px "Tahoma", "Arial", sans-serif } -#graph_current .border { stroke: $warnborder } -#graph_current .nodebg { stroke: $warnborder; fill: $warnbg } +/* XXX: Icon elements MUST have their 'icon-*' class as the first in the list */ +[class^=icon-] { cursor: inherit; margin: 0 2px 0 0; display: inline-block; text-decoration: none; margin: 0 2px 0 0 } +[class^=icon-lang-], +[class^=icon-gen-], +.icon-external, +.icon-rtcomplete, .icon-rtpartial, .icon-rttrial { background-image: url(/icons.png?#{$png-version}) } +[class^=icon-plat-], +[class^=icon-drm-], +[class^=icon-rel-], +[class^=icon-list-], +.icon-rss { background-image: url(/icons.svg?#{$svg-version}) } + +[class^=icon-lang-] { opacity: 0.5 } +[class^=icon-lang-].mtl { filter: grayscale(1); opacity: 0.4 } +[class^=icon-plat-] { margin: -1px 2px -1px 0 } +[class^=icon-list-] { margin: -1px 0 } + +.icon-rel-v2, .icon-rel-a2 { filter: hue-rotate(30deg); } +.icon-rel-v3, .icon-rel-a3 { filter: invert(100%) hue-rotate(240deg); } +.icon-rel-v4, .icon-rel-a4 { filter: hue-rotate(80deg); } + + +/* Relation graph */ +svg .border { fill: none; stroke: var(--border) } +svg .edge polygon.border { fill: var(--border) } +svg .nodebg { fill: var(--tabbg); stroke: var(--tabbg) } +svg text { fill: var(--maintext); font: 8px "Tahoma", "Arial", sans-serif } +svg .title { font-size: 9px } +#graph_current .border { stroke: var(--warnborder) } +#graph_current .nodebg { stroke: var(--warnborder); fill: var(--warnbg) } |