diff options
author | Yorhel <git@yorhel.nl> | 2021-01-17 10:49:57 +0100 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2021-01-17 14:01:47 +0100 |
commit | 692ef20253a202d4eeb04d4a6491669dc6c30cb5 (patch) | |
tree | 6c55208710bdb0b422da090fa722768b42b39f64 /data | |
parent | c940802c172654efa6669cf2ff3161c8588f15b0 (diff) |
Use SASS for CSS + static asset reoganization
Had been planning to use a more powerful preprocessor for CSS for a
while, so that I can also reorganize and clean up the CSS a bit. The
cleanup will come later, this is the first step to reorganize the build
system a bit and remove skingen.pl.
I moved all generated static assets to static/g/ (for _g_enerated),
including icons.png and js files. This simplifies management of
static/f/ and static/s/, which are fully in git.
Skins are now defined as sass files in css/skins/ with their images in
static/s/ using plain directory structure.
Diffstat (limited to 'data')
-rw-r--r-- | data/style.css | 1261 |
1 files changed, 0 insertions, 1261 deletions
diff --git a/data/style.css b/data/style.css deleted file mode 100644 index 8303a4ae..00000000 --- a/data/style.css +++ /dev/null @@ -1,1261 +0,0 @@ -* { margin: 0; padding: 0; } -body, td { font: 13px "Tahoma", "Arial", sans-serif; } -body { $_bodybg$; color: $maintext$ } -table { border-collapse: collapse; } -table td, -table th { vertical-align: top; padding: 3px; } -img { border: none; } - -a, -.fake_link { color: $link$; text-decoration: none; cursor:pointer; border-bottom: 1px solid transparent } - -a:hover, -.fake_link:hover { border-bottom: 1px dotted $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; $_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; } - -/* 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 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 } - - -/* 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 } -.underline { text-decoration: underline } -#maincontent h2 b { font: 13px "Tahoma", "Arial", sans-serif; font-weight: normal; } -p.description { margin: 10px 100px!important; } -b.done { font-weight: normal; color: $statok$ } -b.todo { font-weight: normal; color: $statnok$ } -b.neutral { font-weight: normal } -p.center { text-align: center; } -.standout { color: $standout$!important } -b.future, -b.standout { font-weight: normal; color: $standout$; } -.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 { - padding: 1px 5px; - margin: 0px 10px; - color: $grayedout$; - border: none; - border-left: 1px dotted $border$; - text-align: left; -} -pre { - padding:1px 5px; - margin: 5px 15px; - border: 1px dotted $border$; - border-right: none; - border-left: 1px solid $border$; - background: $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 { line-height: 0; height: 41px } -#support img { height: 19px; object-fit: none } -#support a { opacity: 0.7; border-bottom: none!important; display: inline-block } -#support a:hover { opacity: 1 } -#support a:hover img { position: absolute; left: 0; top: 0; height: 38px; z-index: 99 } - - - - -/***** 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 } - - - - -/***** Homepage ******/ - -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 } -.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 } - - - - -/***** Browsing ******/ - -.browseopts a, .browseopts button { - padding: 1px 3px; - color: $maintext$; - border: 1px solid $border$; - margin: 0 2px; - white-space: nowrap; -} -p.browseopts { text-align: center; padding: 2px; } -span.browseopts { text-align: center; padding: 10px; display: inline-block } -.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$; } -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$; -} -#q { width: 600px } -#bq { width: 300px } - - - -/* history browser */ - -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 } - - - - -/***** 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 } - -/* 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; } - - -/***** Release listings on VN & producer pages */ - -.releases { width: 100%; } -.releases tr.lang td, -.releases tr.vn td { background: $boxbg$; font-weight: bold; } -.releases td.tc1 { padding-left: 30px; width: 80px; white-space: nowrap } -.releases td.tc2 { text-align: center; width: 50px; 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.tc6 { text-align: right; width: 25px; padding: 0; white-space: nowrap } - - -/***** VN page *******/ - -div.vndetails { margin: 0 auto; max-width: 820px; } -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 dt { float: left; font-style: italic; } -div.vndetails table dd { margin-left: 90px; } -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; } -.ulistvn { padding: 5px 0 0 0 } -.ulistvn > b { font-size: 14px } -.ulistvn > span { float: right } -.ulistvn textarea { width: 100% } - -div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $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 } -#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.lst { margin: 0 30px 0 10px; } -#tagops input:checked + label { color: $maintext$; } - -/* tag filter machinery; the order of declarations is important */ - -#tag_spoil_all:checked ~ #vntags .cut2 { display: none; } -#tag_spoil_some:checked ~ #vntags .cut1 { display: none; } -#tag_spoil_none:checked ~ #vntags .cut0 { display: none; } - -#tag_toggle_all:checked ~ #vntags .cut { display: inline } - -#cat_cont:not(:checked) ~ #vntags .cat_cont { display: none; } -#cat_tech:not(:checked) ~ #vntags .cat_tech { display: none; } -#cat_ero:not(:checked) ~ #vntags .cat_ero { display: none; } - -#tag_spoil_none:checked ~ #vntags .tagspl1 { display: none; } -#tag_spoil_none:checked ~ #vntags .tagspl2 { display: none; } -#tag_spoil_some:checked ~ #vntags .tagspl2 { display: none; } - -/* end of tag filter machinery */ - -#screenshots table { width: 100%; } -#screenshots tr.rel td { background: $boxbg$; font-weight: bold; } - -#screenshots p.rel { - background: $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 img { border: 3px solid transparent; } -#screenshots a.nsfw img { border: 3px solid $statnok$; } -#screenshots a:hover img { border: 3px solid $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$ } - -#screenshots .scrlnk { display: none } -#scrhide_s0:checked ~ #screenshots .scrlnk_s0 { display: inline } -#scrhide_s1:checked ~ #screenshots .scrlnk_s1 { display: inline } -#scrhide_s2:checked ~ #screenshots .scrlnk { display: inline } -#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; justify-content: center; flex-wrap: wrap } -.reviewbox { margin: 10px 12px 30px 12px; flex: 1 1; flex-basis: 450px } -.reviewbox > div:nth-child(2) > span:first-child { float: right; color: $grayedout$; font-style: normal; margin: -5px 0 0 0; visibility: hidden } -.reviewbox > div:nth-child(2):hover > span:first-child, -.reviewbox > div:nth-child(2):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) { 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 } - - - -/***** VN tags tab (/v+/tags) *******/ - -.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 { list-style-type: none; padding-right: 30px } -.vntaglist li .tagscore { margin-right: 10px } - - - -/***** Vote stats ****/ - -.votestats { 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; } -.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 } - - - -/***** Polls ****/ - -.votebooth thead td { font-weight: normal; background: transparent; padding-bottom: 5px; } -.votebooth tfoot td { padding-top: 5px } -.votebooth td { vertical-align: middle; padding: 0 8px; } -.votebooth { margin: 0 30px } -.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.tc3 { text-align: right; padding-right: 16px; } -.votebooth .submit { width: 100px } -.votebooth .option { margin-left: 8px } -.votebooth .option.own { font-weight: bold } - - - -/***** 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 > td:nth-child(1) { padding: 10px; width: 136px } -.vnedit_scr > tr > td:nth-child(2) { width: 10px; padding-top: 20px } - - -/***** 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.multi { vertical-align:middle; } -.releases_compare .key { background: $boxbg$; } - -/****** VN browse ********/ - -.vnbrowse .tc_s { padding-left: 30px; width: 70px } -.vnbrowse .tc2 { text-align: right; padding: 0; } -.vnbrowse .tc3 { padding: 0; } -.vnbrowse .tc5 { text-align: right; padding-right: 10px } -.vnbrowse .tc6 { width: 80px } -.vnbrowse .tc7 { text-align: right; width: 8px; white-space: nowrap } -.vnbrowse .tc7 abbr { display: inline-block; width: 20px; } - - - -/***** 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 } - - -/***** Producer list ******/ - -.producerbrowse ul { -webkit-column-width: 250px; -moz-column-width: 250px; column-width: 250px; margin-bottom: 10px } -.producerbrowse ul li { list-style-type: none; } -.producerbrowse ul li abbr { margin-right: 5px; margin-top: 1px; } - - - - -/***** Release page *****/ - -.release table { width: 400px; margin: 0 auto; } -.release .key { width: 90px; } - - - -/***** Review page *****/ - -.fullreview td { padding: 0 0 15px 10px } -.fullreview tr > td:first-child { width: 140px; text-align: right; font-weight: bold } -.fullreview tr > td:last-child { max-width: 700px } -.fullreview .myvote { font-weight: bold; text-decoration: underline } - -#reviewspoil:not(:checked) ~ .fullreview .reviewspoil { display: none } -#reviewspoil:checked ~ .fullreview .reviewnotspoil { display: none } - - -/***** Review browser *****/ - -.reviewlist td.tc1 { width: 90px } -.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 } - - -/***** Release browser *****/ - -.relbrowse .tc1 { width: 80px } -.relbrowse .tc2 { width: 60px; text-align: center; } -.relbrowse .tc3 { width: 85px; text-align: right; padding: 0; } - - - -/***** Image hover thingy (VNWeb::Images::Lib::images_) ****/ - -.imghover { margin: 0 auto; display: block; text-align: center } -.imghover input:checked ~ div.imghover--warning { display: none } -.imghover input:not(:checked) ~ div.imghover--visible { display: none } -.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 } - - - -/***** Char page (also used on VN page) *****/ - -p.chardetailopts { margin: -10px auto 7px auto; width: 800px; text-align: right } -p.chardetailopts a { margin: 0 5px } -p.chardetailopts a:last-child { margin: 0 0 0 5px } -div.chardetails { margin: 0 auto; width: 800px; } -div.charimg { float: left; width: 250px; margin: 0 10px; text-align: center } -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: 530px; } -div.chardetails table td.key { width: 100px; } -div.chardetails.charsep { margin-top: 30px } - - - -/***** Char edit *****/ - - -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.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 } - - -/***** 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 } - - -/***** Staff browse *****/ - -div.staffbrowse { padding-bottom: 10px } -.staffbrowse ul { float: left; margin-top: -5px; margin-left: 3%; width: 28%; } -.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.tc2 { white-space: nowrap; width: 80px } -.staffroles td.tc3 { white-space: nowrap; width: 100px } -.staffroles td.tc4 { white-space: nowrap; padding-right: 10px } -table.aliases td { padding: 0 5px; } -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 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 } -@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} } -@media(min-width:1250px) { .vnstaff-2{display:none} .vnstaff-3{display:none} .vnstaff-4{display:flex} } - -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 .charsum_bubble { - background: $boxbg$; - display: inline-block; - text-align: left; - vertical-align: top; - width: 320px; - 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 dd { margin: 5px 0 5px 120px } -.docs dt { float: left } -.docs ul, .docs ol { margin: 5px 0 5px 20px } -.docs table { margin: 10px; width: 95% } -.docs td { white-space: nowrap } -.docs td { white-space: nowrap } -.docs td+td+td+td, -.docs td[colspan], -.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 li { list-style-type: none; } -.docs ul.index li a { margin: 0 0 0 10px; } -.docs img { margin: 5px } - - - -/* 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 } - - -/***** Wishlist browser ******/ - -.wishlist .tc1 { padding-top: 0; padding-bottom: 0; } -.wishlist tfoot td { padding: 0 0 0 25px } - - -/***** New User's VN list *****/ - -.labelfilters { text-align: center } -.labelfilters input.submit { margin-top: 5px } - -.managelabels > div { width: 600px; margin: 10px auto } -.managelabels table { margin: 0 auto } -.managelabels tbody td:nth-child(1) { text-align: right } -.managelabels tbody td:nth-child(4) { padding-left: 10px; width: 300px} -.managelabels select { width: 100% } -.managelabels tfoot div { float: right; text-align: right } - -.savedefault { width: 600px; margin: 10px auto } -.exportlist { width: 600px; margin: 10px auto } - -.ulist .tc1 { white-space: nowrap; width: 70px } -.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_vote { white-space: nowrap; width: 60px; text-align: right; padding-right: 10px } -.ulist .tc_vote input { width: 55px; text-align: right } -.ulist .tc_voted, -.ulist .tc_added, -.ulist .tc_modified, -.ulist .tc_started, -.ulist .tc_finished, -.ulist .tc_rdate { white-space: nowrap; width: 100px } -.ulist .tc_rating { white-space: nowrap; width: 80px } - -.ulist .tc_started div, .ulist .tc_finished div { height: 1em; padding-bottom: 4px } -.ulist .tc_started div span, .ulist .tc_finished div span { position: absolute; z-index: 0 } -.ulist .tc_started div input, .ulist .tc_finished div input { position: absolute; z-index: 900; width: 110px; visibility: hidden } -.ulist .tc_started div:hover input, .ulist .tc_finished div:hover input, -.ulist .tc_started div input:focus, .ulist .tc_finished div input:focus { visibility: visible } - -.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 + 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 } -.ulist .tc_opt .tco3 { white-space: nowrap; width: 60px; text-align: right; padding-bottom: 0 } - - -/***** User VN list browser ******/ - -#expandall, .collapse_but { cursor: pointer } -.browse.rlist .tc1 { width: 16px; padding-bottom: 0 } -.browse.rlist .tc2 { width: 16px; padding-bottom: 0 } -.browse.rlist .tc3 { width: 60px } -.browse.rlist .tc3_5 b { margin-left: 10px } -.browse.rlist .tc4 { width: 60px; text-align: right; padding-top: 0; padding-bottom: 0 } -.browse.rlist .tc6 { width: 100px } -.browse.rlist .tc7 { width: 90px } -.browse.rlist .tc8 { width: 70px } -.browse.rlist tfoot select { width: 200px } -.browse.rlist .relhid .tc6 { padding-left: 15px; width: auto } - - -/***** 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 .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$ } - -#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 } - - -/***** User list *****/ -.browse.userlist .tc3, -.browse.userlist .tc4, -.browse.userlist .tc5, -.browse.userlist .tc6, -.browse.userlist .tc7, -.browse.userlist .tc8 { text-align: right; padding-right: 10px; padding-left: 0 } - - -/***** Userpage *****/ - -.userpage table { width: 600px; margin: 0 auto; } -.userpage .key { width: 100px; } - - -/***** 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 } - - - - -/***** Tag page *****/ - -.tagtree { margin-left: 20px; margin-top: -20px; list-style-type: none; } -.tagtree li { float: left; width: 230px; margin-top: 10px; } -.tagtree li li { float: none; width: auto; margin-top: 0; } -.tagtree ul { margin-left: 10px; list-style-type: none; } -.tagvnlist .tc1 { width: 105px; } -.tagvnlist .tc1 i { font-style: normal; font-size: 10px } -.tagvnlist .tc3 { text-align: right; padding: 0; } -.tagvnlist .tc4 { padding: 0; } -.tagvnlist .tc6 { text-align: right; padding-right: 10px; } - - -/***** Tag list (/g/list) *****/ - -.browse.taglist .tc1 { width: 120px; white-space: nowrap } -.browse.taglist .tc2 { width: 50px; white-space: nowrap } -.browse.taglist tbody .tc3 a { margin-right: 10px } - - -/***** Tag links *****/ - -.browse.taglinks .tc1 { width: 70px } -.browse.taglinks .tc3 { width: 80px } -.browse.taglinks .setfil { font-size: 10px; padding-right: 3px } - -.tagscore { white-space: nowrap; display: inline-block; width: 58px; } -.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.ignored > div { background: #222 } -.tagscore.ignored > span { color: $grayedout$ } - - -/***** VN tagmod *****/ - -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 tbody .tc_tagname { padding-left: 15px } -table.tgl .tc_myvote { padding: 0 0 0 30px; min-width: 100px } -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 .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 .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 .tc_allvote i { font-style: normal; font-size: 10px } -table.tgl .tc_allspoil { text-align: right; padding-right: 15px } -table.tgl .tagmod_cat td { font-weight: bold; padding-top: 10px } - - - - -/****** Revision information ******/ - -div.revision div.rev, div.revision table { - border: 1px solid $border$; - margin: 0 auto; - width: 90%; - background-color: $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; } - - - -/****** Image Viewer *****/ - -div#iv_view { - position: absolute; - top: 0px; - left: 0px; - background: $boxbg$; - border: 1px solid $border$; - padding: 5px; - text-align: center; -} -#iv_view a { border: 0; font-weight: bold; font-size: 14px } -#iv_view img { cursor: pointer } -#ivclose { float: right; padding-left: 10px } -#ivnext { padding-left: 5px; } -#ivprev { padding-right: 5px; } -#ivfull { float: left; padding-right: 10px; } -#ivimgload { - position: absolute; - display: block; - left: 0; - top: 0; - width: 100px; - padding: 3px; - background-color: #f5f5f5; /* no real need to skin this */ - text-align: center; - border: 1px solid #ccc; - color: #000; -} - -/* ivview childs: - * 1 div -> loading - * 2 div -> img - * 3 div -> links - * 1 a -> full - * 2 a -> prev - * 3 a -> next - * 4 a -> flagging - */ -.ivview { position: fixed; background: $boxbg$; border: 2px solid $border$; padding: 5px; text-align: center } -.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 } -.ivview > div:nth-child(2) .left-pane { - position: absolute; - border: none; - height: 100%; - width: 25%; - top: 0; - transition: opacity 0.25s ease-in-out; - opacity: 0; - background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); -} -.ivview > div:nth-child(2) .left-pane:hover { - opacity: 1; -} -.ivview > div:nth-child(2) .right-pane { - position: absolute; - border: none; - height: 100%; - width: 25%; - top: 0; - right: 0; - transition: opacity 0.25s ease-in-out; - opacity: 0; - background: linear-gradient(270deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); -} -.ivview > div:nth-child(2) .right-pane:hover { - opacity: 1; -} -.ivview > div:nth-child(3) { width: 100%; display: flex } -.ivview > div:nth-child(3) > a { flex: 1; text-align: left; border: 0; font-weight: bold; font-size: 14px; white-space: nowrap } -.ivview > div:nth-child(3) > a:nth-child(2) { text-align: right; padding-right: 5px } -.ivview > div:nth-child(3) > a:nth-child(3) { padding-left: 5px } -.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 *******/ - -.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 } - -/* 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; } - - - -/****** Image flagging *******/ - -/* divs: - * 1: header - * 2: image - * 3: metadata - * 4: vote box - * 6: other user's votes */ -.imageflag { margin: auto } -.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) 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.sel label, -.imageflag > div:nth-child(4) ul li label:hover { background-color: $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 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 .imagecard { padding: 2px; display: flex; flex: 1 } -.imagebrowse .imagecard:hover { background-color: $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$ } - - -/****** Icons *******/ - -.icons { - background: url(/f/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 } -.icons.feed { width: 12px; height: 12px } -.icons.gen { width: 14px; height: 14px } -.icons.gen.b { width: 28px } -.icons.rtcomplete, .icons.rtpartial, .icons.rttrial { width: 11px; } -abbr.icons, abbr.uicons { cursor: default; } -a .icons { cursor: pointer } -.icons.oth { background: none; } -$iconcss$ - - -.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$ } - |