Redo mascot positioning to be less dumb.
This commit is contained in:
Zixaphir
parent
8144b38023
commit
04efddaa9b
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -514,19 +514,19 @@ Settings =
|
||||
$.add nodes, fs
|
||||
|
||||
$.get items, (items) ->
|
||||
cb = Settings.cb
|
||||
cb = Settings.cb.style
|
||||
for key, val of items
|
||||
input = inputs[key]
|
||||
if input.type is 'checkbox'
|
||||
input.checked = val
|
||||
$.on input, 'change', cb.style.checked
|
||||
$.on input, 'change', cb.checked
|
||||
else if input.nodeName is 'SELECT'
|
||||
input.value = val
|
||||
$.on input, 'change', cb.style.select
|
||||
input.value = val
|
||||
$.on input, 'change', cb.select
|
||||
else
|
||||
input.value = val
|
||||
$.on input, 'change', cb.style.value
|
||||
|
||||
input.value = val
|
||||
$.on input, 'change', cb.value
|
||||
|
||||
if key is 'Icon Orientation'
|
||||
$.on input, 'change', Style.iconPositions
|
||||
|
||||
@ -805,9 +805,11 @@ Settings =
|
||||
$.cb.checked.call @
|
||||
hyphenated = @name.toLowerCase().replace(/^4/, 'four').replace /\s+/g, '-'
|
||||
(if @checked then $.addClass else $.rmClass) doc, hyphenated
|
||||
|
||||
value: ->
|
||||
$.cb.value.call @
|
||||
Style.dynamicCSS = Style.dynamic()
|
||||
Style.dynamicCSS.textContent = Style.dynamic()
|
||||
|
||||
select: ->
|
||||
$.cb.value.call @
|
||||
for option in @options
|
||||
|
||||
@ -207,7 +207,7 @@ th {
|
||||
}
|
||||
.sidebar-location-left.sidebar-normal:not(.pagination-on-side) .pagelist,
|
||||
.sidebar-location-left #header-bar {
|
||||
left: 248px;
|
||||
left: 252px;
|
||||
}
|
||||
.sidebar-location-left.sidebar-minimal:not(.pagination-on-side):not(.fourchan-ss-navigation) .pagelist,
|
||||
.sidebar-location-left.sidebar-minimal:not(.fourchan-ss-navigation) #header-bar {
|
||||
@ -219,7 +219,7 @@ th {
|
||||
}
|
||||
.sidebar-location-right.sidebar-normal:not(.pagination-on-side) .pagelist,
|
||||
.sidebar-location-right #header-bar {
|
||||
right: 248px;
|
||||
right: 252px;
|
||||
}
|
||||
.sidebar-location-right.sidebar-minimal:not(.pagination-on-side):not(.fourchan-ss-navigation) .pagelist,
|
||||
.sidebar-location-right.sidebar-minimal:not(.fourchan-ss-navigation) #header-bar {
|
||||
@ -438,20 +438,20 @@ th {
|
||||
border: 0 none !important;
|
||||
text-align: right;
|
||||
}
|
||||
.pagination-on-side..post-form-style-fixed.show-post-form-header.post-form-decorations .pagelist,
|
||||
.pagination-on-side..post-form-style-transparent-fade.show-post-form-header.post-form-decorations .pagelist {
|
||||
.pagination-on-side.post-form-style-fixed.show-post-form-header.post-form-decorations .pagelist,
|
||||
.pagination-on-side.post-form-style-transparent-fade.show-post-form-header.post-form-decorations .pagelist {
|
||||
bottom: 23.3em;
|
||||
}
|
||||
.pagination-on-side..post-form-style-fixed.show-post-form-header .pagelist,
|
||||
.pagination-on-side..post-form-style-transparent-fade.show-post-form-header .pagelist {
|
||||
.pagination-on-side.post-form-style-fixed.show-post-form-header .pagelist,
|
||||
.pagination-on-side.post-form-style-transparent-fade.show-post-form-header .pagelist {
|
||||
bottom: 23.1em;
|
||||
}
|
||||
.pagination-on-side..post-form-style-fixed.post-form-decorations .pagelist,
|
||||
.pagination-on-side...post-form-style-transparent-fade.post-form-decorations .pagelist {
|
||||
.pagination-on-side.post-form-style-fixed.post-form-decorations .pagelist,
|
||||
.pagination-on-side.post-form-style-transparent-fade.post-form-decorations .pagelist {
|
||||
bottom: 21.8em;
|
||||
}
|
||||
.pagination-on-side..post-form-style-fixed .pagelist,
|
||||
.pagination-on-side..post-form-style-transparent-fade .pagelist {
|
||||
.pagination-on-side.post-form-style-fixed .pagelist,
|
||||
.pagination-on-side.post-form-style-transparent-fade .pagelist {
|
||||
bottom: 21.6em;
|
||||
}
|
||||
.sidebar-location-left.pagination-on-side .pagelist {
|
||||
@ -1224,6 +1224,8 @@ input:checked + .rice {
|
||||
padding: 1px;
|
||||
border: 1px solid transparent;
|
||||
min-width: 248px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.sidebar-large #qr {
|
||||
min-width: 299px;
|
||||
@ -1244,11 +1246,11 @@ input:checked + .rice {
|
||||
left: auto !important;
|
||||
}
|
||||
:root:not(.post-form-style-float) #qr {
|
||||
bottom: 0;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
.fourchan-ss-navigation:not(.post-form-style-float).fixed.bottom #qr,
|
||||
.fourchan-ss-navigation.fixed.bottom:not(.post-form-style-float) #qr,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-float) #qr {
|
||||
bottom: 1.5em;
|
||||
bottom: 1.5em !important;
|
||||
}
|
||||
.post-form-style-slideout #qr {
|
||||
top: auto !important;
|
||||
@ -1324,14 +1326,14 @@ input:checked + .rice {
|
||||
opacity: 1;
|
||||
<%= agent %>transition: opacity .3s linear;
|
||||
}
|
||||
:root:not(.show-post-form-header):not(.post-form-style-tabbed-slideout) #qrtab,
|
||||
:root:not(.show-post-form-header):not(.post-form-style-tabbed-slideout):not(.post-form-style-float) #qrtab,
|
||||
.post-form-style-float .autohide:not(:hover):not(.has-focus) > form,
|
||||
.show-post-form-header.post-form-style-fixed .autohide:not(:hover):not(.has-focus) > form,
|
||||
.show-post-form-header.post-form-style-transparent-fade .autohide:not(:hover):not(.has-focus) > form {
|
||||
display: none !important;
|
||||
}
|
||||
:root:not(.post-form-style-tabbed-slideout) #qrtab {
|
||||
margin-bottom: 1px;
|
||||
margin-bottom: .1em;
|
||||
}
|
||||
.post-form-slideout-transitions.post-form-style-slideout #qr,
|
||||
.post-form-slideout-transitions.post-form-style-tabbed-slideout #qr {
|
||||
@ -1380,7 +1382,10 @@ input:checked + .rice {
|
||||
.compact-post-form-inputs .persona input.field {
|
||||
width: 33%;
|
||||
}
|
||||
.compact-post-form-inputs .persona input.field:not(:first-child) {
|
||||
.compact-post-form-inputs .persona input.field:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
.compact-post-form-inputs .persona input.field {
|
||||
margin: 0 0 0 0.5%;
|
||||
}
|
||||
.compact-post-form-inputs #qr textarea.field {
|
||||
@ -1406,7 +1411,7 @@ input:checked + .rice {
|
||||
resize: none;
|
||||
}
|
||||
.captcha-img {
|
||||
margin: 1px 0 0;
|
||||
margin: .1em 0 0;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
@ -1417,7 +1422,7 @@ input:checked + .rice {
|
||||
}
|
||||
.captcha-input {
|
||||
width: 100%;
|
||||
margin: 1px 0 0;
|
||||
margin: .1em 0 0;
|
||||
}
|
||||
.field,
|
||||
.selectrice,
|
||||
@ -1425,7 +1430,7 @@ button,
|
||||
input:not([type=radio]) {
|
||||
<%= sizing %>: border-box;
|
||||
height: 1.6em;
|
||||
margin: 1px 0 0;
|
||||
margin: .1em 0 0;
|
||||
vertical-align: bottom;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
108
src/General/css/mascot.css
Normal file
108
src/General/css/mascot.css
Normal file
@ -0,0 +1,108 @@
|
||||
#mascot {
|
||||
display: none;
|
||||
}
|
||||
.mascots #mascot {
|
||||
display: block;
|
||||
}
|
||||
.sidebar-location-left #mascot img {
|
||||
<%= sizing %>transform: scaleX(-1);
|
||||
}
|
||||
.sidebar-location-right.mascot-location-sidebar #mascot img,
|
||||
.sidebar-location-left #mascot img {
|
||||
right: 0;
|
||||
left: auto;
|
||||
margin-right: #{mascot.hOffset}px;
|
||||
}
|
||||
.sidebar-location-right.sidebar-large.mascot-location-sidebar #mascot img,
|
||||
.sidebar-location-left.sidebar-large #mascot img {
|
||||
right: #{if mascot.center then 25 else 0}px;
|
||||
}
|
||||
.sidebar-location-left.mascot-location-sidebar #mascot img,
|
||||
.sidebar-location-right #mascot img {
|
||||
left: 0;
|
||||
right: auto;
|
||||
margin-left: #{mascot.hOffset}px;
|
||||
}
|
||||
.sidebar-location-left.sidebar-large.mascot-location-sidebar #mascot img,
|
||||
.sidebar-location-right.sidebar-large #mascot img {
|
||||
left: #{if mascot.center then 25 else 0}px;
|
||||
}
|
||||
#mascot img {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
bottom: 18.5em;
|
||||
height: #{
|
||||
if mascot.height and isNaN parseFloat mascot.height
|
||||
mascot.height
|
||||
else if mascot.height
|
||||
parseInt(mascot.height, 10) + 'px'
|
||||
else
|
||||
'auto'
|
||||
};
|
||||
width: #{
|
||||
if mascot.width and isNaN parseFloat mascot.width
|
||||
mascot.width
|
||||
else if mascot.width
|
||||
parseInt(mascot.width, 10) + 'px'
|
||||
else
|
||||
'auto'
|
||||
};
|
||||
margin-bottom: #{mascot.vOffset or 0}px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fourchan-ss-navigation.bottom.fixed.posting-disabled #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img {
|
||||
bottom: 1.5em;
|
||||
}
|
||||
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade #mascot img {
|
||||
bottom: 20.1em;
|
||||
}
|
||||
.post-form-style-fixed.show-post-form-header #mascot img,
|
||||
.post-form-style-transparent-fade.show-post-form-header #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations #mascot img {
|
||||
bottom: 20.3em;
|
||||
}
|
||||
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img {
|
||||
bottom: 21.6em;
|
||||
}
|
||||
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img {
|
||||
bottom: 21.8em;
|
||||
}
|
||||
.post-form-style-fixed.post-form-decorations #mascot img,
|
||||
.post-form-style-transparent-fade.post-form-decorations #mascot img {
|
||||
bottom: 18.8em;
|
||||
}
|
||||
.mascot-position-default:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
|
||||
.mascot-position-bottom #mascot img,
|
||||
.mascot-position-default.posting-disabled #mascot img {
|
||||
bottom: 0;
|
||||
}
|
||||
.mascots-overlap-posts #mascot img {
|
||||
z-index: 3;
|
||||
}
|
||||
.mascot-position-middle #mascot img {
|
||||
bottom: 50%;
|
||||
<%= sizing %>transform: translateY(50%);
|
||||
}
|
||||
.mascot-position-top #mascot img {
|
||||
bottom: auto !important;
|
||||
top: 17px;
|
||||
}
|
||||
.grayscale-mascots #mascot img {
|
||||
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filters"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg>#filters');
|
||||
}
|
||||
@ -58,16 +58,14 @@ html {
|
||||
.captcha-img img {
|
||||
#{Style.filter theme["Text"], theme["Input Background"]}
|
||||
}
|
||||
#boardTitle,
|
||||
:root:not(.post-form-decorations) #spoilerLabel {
|
||||
#boardTitle {
|
||||
text-shadow:
|
||||
1px 1px #{backgroundC},
|
||||
-1px -1px #{backgroundC},
|
||||
1px -1px #{backgroundC},
|
||||
-1px 1px #{backgroundC};
|
||||
}
|
||||
.sidebar-glow #boardTitle,
|
||||
:root.sidebar-glow:not(.post-form-decorations) #spoilerLabel {
|
||||
.sidebar-glow #boardTitle {
|
||||
text-shadow:
|
||||
1px 1px 1px #{backgroundC},
|
||||
-1px -1px 1px #{backgroundC},
|
||||
@ -100,6 +98,7 @@ html {
|
||||
#appchanx-settings,
|
||||
#qrtab,
|
||||
.post-form-decorations #qr,
|
||||
.post-form-style-float #qr,
|
||||
input[type="submit"],
|
||||
input[value="Report"],
|
||||
span[style="left: 5px; position: absolute;"] a {
|
||||
|
||||
@ -8,7 +8,7 @@ MascotTools =
|
||||
|
||||
unless @el
|
||||
@el = $ '#mascot img', d.body
|
||||
|
||||
|
||||
el = @el
|
||||
|
||||
if !Conf['Mascots'] or (Conf['Hide Mascots on Catalog'] and g.VIEW is 'catalog')
|
||||
@ -20,7 +20,7 @@ MascotTools =
|
||||
else
|
||||
$.addClass doc, 'mascot-position-default'
|
||||
$.rmClass doc, 'mascot-position-bottom'
|
||||
|
||||
|
||||
unless mascot
|
||||
if name and not mascot = Mascots[name]
|
||||
if el then el.src = "" else null
|
||||
@ -29,105 +29,7 @@ MascotTools =
|
||||
|
||||
MascotTools.addMascot mascot
|
||||
|
||||
Style.mascot.textContent = """
|
||||
#mascot {
|
||||
display: none;
|
||||
}
|
||||
.mascots #mascot {
|
||||
display: block;
|
||||
}
|
||||
.sidebar-location-left #mascot img {
|
||||
<%= sizing %>transform: scaleX(-1);
|
||||
}
|
||||
.sidebar-location-right.mascot-location-sidebar #mascot img,
|
||||
.sidebar-location-left #mascot img {
|
||||
right: 0;
|
||||
left: auto;
|
||||
margin-right: #{mascot.hOffset}px;
|
||||
}
|
||||
.sidebar-location-right.sidebar-large.mascot-location-sidebar #mascot img,
|
||||
.sidebar-location-left.sidebar-large #mascot img {
|
||||
right: #{if mascot.center then 25 else 0}px;
|
||||
}
|
||||
.sidebar-location-left.mascot-location-sidebar #mascot img,
|
||||
.sidebar-location-right #mascot img {
|
||||
left: 0;
|
||||
right: auto;
|
||||
margin-left: #{mascot.hOffset}px;
|
||||
}
|
||||
.sidebar-location-left.sidebar-large.mascot-location-sidebar #mascot img,
|
||||
.sidebar-location-right.sidebar-large #mascot img {
|
||||
left: #{if mascot.center then 25 else 0}px;
|
||||
}
|
||||
#mascot img {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
bottom: 20.1em;
|
||||
height: #{
|
||||
if mascot.height and isNaN parseFloat mascot.height
|
||||
mascot.height
|
||||
else if mascot.height
|
||||
parseInt(mascot.height, 10) + 'px'
|
||||
else
|
||||
'auto'
|
||||
};
|
||||
width: #{
|
||||
if mascot.width and isNaN parseFloat mascot.width
|
||||
mascot.width
|
||||
else if mascot.width
|
||||
parseInt(mascot.width, 10) + 'px'
|
||||
else
|
||||
'auto'
|
||||
};
|
||||
margin-bottom: #{mascot.vOffset or 0}px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fourchan-ss-navigation.bottom.fixed.posting-disabled #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img {
|
||||
bottom: 1.5em;
|
||||
}
|
||||
.fourchan-ss-navigation.bottom.fixed #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom #mascot img {
|
||||
bottom: 21.6em;
|
||||
}
|
||||
.fourchan-ss-navigation.bottom.fixed.post-form-decorations #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-decorations #mascot img {
|
||||
bottom: 21.8em;
|
||||
}
|
||||
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img {
|
||||
bottom: 22.9em;
|
||||
}
|
||||
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed.post-form-decorations #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed.post-form-decorations #mascot img,
|
||||
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade.post-form-decorations #mascot img,
|
||||
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade.post-form-decorations #mascot img {
|
||||
bottom: 23.1em;
|
||||
}
|
||||
.mascot-position-bottom #mascot img,
|
||||
.mascot-position-default.posting-disabled #mascot img {
|
||||
bottom: 0;
|
||||
}
|
||||
.mascots-overlap-posts #mascot img {
|
||||
z-index: 3;
|
||||
}
|
||||
.mascot-position-middle #mascot img {
|
||||
bottom: 50%;
|
||||
<%= sizing %>transform: translateY(50%);
|
||||
}
|
||||
.mascot-position-top #mascot img {
|
||||
bottom: auto !important;
|
||||
top: 17px;
|
||||
}
|
||||
.grayscale-mascots #mascot img {
|
||||
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filters"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg>#filters');
|
||||
}
|
||||
"""
|
||||
Style.mascot.textContent = """<%= grunt.file.read('src/General/css/mascot.css') %>"""
|
||||
|
||||
categories: [
|
||||
'Anime'
|
||||
@ -334,8 +236,8 @@ MascotTools =
|
||||
reader.readAsDataURL file
|
||||
|
||||
addMascot: (mascot) ->
|
||||
image =
|
||||
if Array.isArray mascot.image
|
||||
image =
|
||||
if Array.isArray mascot.image
|
||||
if Style.lightTheme
|
||||
mascot.image[1]
|
||||
else
|
||||
@ -349,7 +251,7 @@ MascotTools =
|
||||
innerHTML: "<img src='#{image}'>"
|
||||
|
||||
@el = div.firstElementChild
|
||||
|
||||
|
||||
$.on @el, 'mousedown', MascotTools.click
|
||||
|
||||
$.add d.body, div
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user