From 013a04a7d2a3bcc153f9c72764052b9f509002a7 Mon Sep 17 00:00:00 2001 From: towards-a-new-leftypol Date: Mon, 15 Jan 2024 15:40:52 -0500 Subject: [PATCH] Display most recent catalog --- chandlr.cabal | 2 +- index.html | 11 +- src/Action.hs | 5 +- src/Component/CatalogGrid.hs | 93 +- src/Main.hs | 6 +- src/Network/CatalogPostType.hs | 29 + src/Network/Client.hs | 8 +- static/style.css | 2003 ++++++++++++++++++++++++++++++++ 8 files changed, 2107 insertions(+), 50 deletions(-) create mode 100644 src/Network/CatalogPostType.hs create mode 100644 static/style.css diff --git a/chandlr.cabal b/chandlr.cabal index c4e7ba9..8df84b7 100644 --- a/chandlr.cabal +++ b/chandlr.cabal @@ -66,8 +66,8 @@ executable chandlr Action Network.Http Network.Client + Network.CatalogPostType Routes - Common.PostsType -- LANGUAGE extensions used by modules in this package. -- other-extensions: diff --git a/index.html b/index.html index fc78657..6ed6bcb 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,20 @@ - + Chandlr + + diff --git a/src/Action.hs b/src/Action.hs index 487d979..ecbc81a 100644 --- a/src/Action.hs +++ b/src/Action.hs @@ -2,9 +2,8 @@ module Action where import Component.CatalogGrid as Grid import Network.Client as Client -import Data.Text (Text) -import Common.PostsType (Post) +import Network.CatalogPostType (CatalogPost) data Action = GridAction Grid.Action @@ -14,6 +13,6 @@ data Action , board :: String , board_thread_id :: Int } - | HaveLatest (Client.HttpResult [Post]) + | HaveLatest (Client.HttpResult [CatalogPost]) | ClientAction Client.Action | NoAction diff --git a/src/Component/CatalogGrid.hs b/src/Component/CatalogGrid.hs index 768c117..443b376 100644 --- a/src/Component/CatalogGrid.hs +++ b/src/Component/CatalogGrid.hs @@ -3,37 +3,34 @@ module Component.CatalogGrid ( Model , initialModel -, Action +, Action (..) , Interface (..) , view , update ) where +import Data.List (intercalate) +import Data.Maybe (maybeToList) +import Data.JSString (append) import Miso - ( View - , div_ - , class_ - , img_ - , href_ - , a_ - , src_ - , alt_ - , title_ - , strong_ - , span_ - , p_ - , br_ - , id_ - , Effect - , noEff + ( View , div_ , class_ , img_ , href_ , a_ + , src_ , alt_ , title_ , strong_ , span_ + , p_ , br_ , id_ , Effect , noEff + , text, rawHtml ) -type Model = () +import Network.CatalogPostType (CatalogPost) +import qualified Network.CatalogPostType as CatalogPost +import Miso.String (toMisoString, MisoString) + +data Model = Model + { displayItems :: [ CatalogPost ] + } deriving Eq initialModel :: Model -initialModel = () +initialModel = Model { displayItems = [] } -type Action = () +data Action = DisplayItems [ CatalogPost ] data Interface a = Interface { passAction :: Action -> a @@ -45,43 +42,63 @@ update -> Action -> Model -> Effect a Model -update = const $ const noEff +update _ (DisplayItems xs) m = noEff (m { displayItems = xs }) +update _ _ m = noEff m view :: Interface a -> Model -> View a view iface model = div_ - [ class_ "threads" ] + [ class_ "theme-catalog" ] [ div_ - [ id_ "Grid" ] - [ gridItem | _ <- [0..10] :: [ Int ] ] + [ class_ "threads" ] + [ div_ + [ id_ "Grid" ] + (map gridItem (displayItems model)) + ] ] -gridItem :: View a -gridItem = +gridItem :: CatalogPost -> View a +gridItem post = div_ [ class_ "mix" ] [ div_ [ class_ "thread grid-li grid-size-small" ] [ a_ - [ href_ "/a/res/1.html" ] + [ href_ thread_url ] [ img_ [ class_ "thread-image" , src_ "/a/thumb/1111111111111.png" , alt_ "Opening post image" - , title_ "Dec 18 23:12" + , title_ ( toMisoString $ show $ CatalogPost.bump_time post ) ] ] , div_ [ class_ "replies" ] - [ strong_ [][ "R: 517 / I: 204" ] - , p_ - [ class_ "intro" ] - [ span_ - [ class_ "subject" ][ "This is the thread subject, usually a brief description." ] - ] - , "Hello World" - , br_ [] - , "Hello World2" - ] + ( + [ strong_ [][ text post_count_str ] + , p_ + [ class_ "intro" ] + [ span_ + [ class_ "subject" ]subject + ] + ] ++ body + ) ] ] + + where + subject :: [ View a ] + subject = map (text . toMisoString) $ maybeToList $ CatalogPost.subject post + + body :: [ View a ] + body = map (rawHtml . toMisoString) $ maybeToList $ CatalogPost.body post + + post_count_str :: MisoString + post_count_str = "R: " `append` (toMisoString $ CatalogPost.post_count post) + + thread_url :: MisoString + thread_url = toMisoString $ intercalate "/" + [ CatalogPost.site_name post + , CatalogPost.pathpart post + , show $ CatalogPost.board_thread_id post + ] diff --git a/src/Main.hs b/src/Main.hs index 813646f..d8ecc55 100644 --- a/src/Main.hs +++ b/src/Main.hs @@ -127,14 +127,14 @@ mainUpdate (HaveLatest Client.Error) m = m <# do consoleLog "Getting Latest failed!" return NoAction -mainUpdate (HaveLatest (Client.HttpResponse {..})) m = m <# do +mainUpdate (HaveLatest (Client.HttpResponse {..})) m = m <# case body of Nothing -> do consoleLog "Didn't get anything back from API" + return NoAction Just posts -> do mapM_ (consoleLog . toJSString . show) posts - - return NoAction + return $ GridAction $ Grid.DisplayItems posts mainUpdate GetLatest m = m <# Client.fetchLatest (clientModel m) iClient diff --git a/src/Network/CatalogPostType.hs b/src/Network/CatalogPostType.hs new file mode 100644 index 0000000..92808d0 --- /dev/null +++ b/src/Network/CatalogPostType.hs @@ -0,0 +1,29 @@ +{-# LANGUAGE DeriveGeneric #-} +{-# LANGUAGE DeriveAnyClass #-} + +module Network.CatalogPostType + ( CatalogPost (..) ) + where + +import GHC.Generics +import Data.Aeson (FromJSON, ToJSON) +import Data.Time.Clock (UTCTime) -- Required for timestamp with time zone +import Data.Int (Int64) +import Data.Text (Text) + +data CatalogPost = CatalogPost + { post_id :: Maybe Int64 + , board_post_id :: Int64 + , board_thread_id :: Int64 + , creation_time :: UTCTime + , bump_time :: UTCTime + , body :: Maybe Text + , name :: Maybe Text + , subject :: Maybe Text + , email :: Maybe Text + , thread_id :: Int + , post_count :: Int + , site_name :: String + , pathpart :: String + --, site_id :: Int + } deriving (Show, Generic, FromJSON, ToJSON, Eq) diff --git a/src/Network/Client.hs b/src/Network/Client.hs index 13e8be3..df7017f 100644 --- a/src/Network/Client.hs +++ b/src/Network/Client.hs @@ -26,15 +26,15 @@ import GHCJS.DOM.Types (JSString) import Miso (effectSub, Effect) import qualified Network.Http as Http -import Common.PostsType (Post) +import Network.CatalogPostType (CatalogPost) -data Action = Connect (Http.HttpActionResult [Post]) +data Action = Connect (Http.HttpActionResult [CatalogPost]) data Interface a = Interface { passAction :: Action -> a - , returnResult :: Http.HttpResult [Post] -> a + , returnResult :: Http.HttpResult [CatalogPost] -> a } data Model = Model @@ -50,7 +50,7 @@ update -> Effect a Model update iface (Connect (abort, resultVar)) m = effectSub m $ \sink -> void $ forkIO $ do - result :: Http.HttpResult [Post] <- takeMVar resultVar + result :: Http.HttpResult [CatalogPost] <- takeMVar resultVar sink $ (returnResult iface) result data FetchCatalogArgs = FetchCatalogArgs diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..d89d0cc --- /dev/null +++ b/static/style.css @@ -0,0 +1,2003 @@ +/*Lainchan*/ + +div.sidearrows{ + display:none; +} + +img { + image-orientation: from-image; +} + +/* boardlist gets all scrunched on small screens */ +@media screen and (max-width: 600px) { + header, img.board_image { + margin-top: 5em; + } +} + +@media screen and (min-width: 700px) { + header, img.board_image { + margin-top: 3em; + } +} + +html, body { + max-width: 100%!important; + margin: 0; + box-sizing: border-box; +} + +.post-image{ + max-width: 94%!important; +} +select{ + float:right; +} + +div.pages{ + + margin:0!important; + padding: 0!important; +} + +div.boardlist.bottom { + + text-align: center!important; + display: none!important; +} + +img.banner, img.board_image { + + max-width: 100vw; + +} + +.pintro{ + width: 98%!important; +} + +.bar { + + display: table!important; + position: fixed; + width: 100%; + left: 0px; + z-index: 3; + background-color: #D6DAF0; + border-color: #B7C5D9; +} +.bar > :not(script) { + display: table-cell; + vertical-align: middle; +} +.bar.top { + text-align: center; + top: 0px; + border-bottom: 1px solid #B7C5D9; +} + +.bar.bottom { + bottom: 0px; + border-top: 1px solid #333333; + /*background-color: #333333 ;*/ +} + + +/*homepage banner*/ +div.lain_banner{ + margin:auto; + position: absolute; +} + + +/* === GENERAL TAG SETTINGS === */ + +/* Page Layouts */ +body { + background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%; + color: black; + font-family: arial,helvetica,sans-serif; + font-size: 10pt; + padding-left: 4px; + padding-right: 4px; +} + +main, +aside, +section { + display: block; + margin: 0 auto; + width: 100%; +} + +main { + max-width: 1110px; +} + +/* Tables */ +table { + margin: auto; + +} +table.board-list-table { + width: 100%; +} +table tbody td { + margin: 0; + padding: 4px 15px 4px 4px; + + text-align: left; +} +table thead th { + border: 1px solid #000333; + padding: 4px 15px 5px 5px; + + background: #98E; + color: #000333; + text-align: left; + white-space: nowrap; +} +table tbody tr:nth-of-type( even ) { + background-color: transparent!important; +} + +tr{ + +} + +td.minimal,th.minimal { + width: 1%; + white-space: nowrap; +} + +table.mod.config-editor { + font-size: 9pt; + width: 100%; +} + +table.mod.config-editor td { + text-align: left; + padding: 5px; + border-bottom: 1px solid #98e; +} + +table.mod.config-editor input[type="text"] { + width: 98%; +} + +.longtable p { + margin: 0; +} + +/* Uncategorized */ +#post-form-outer { + text-align: center; +} + +#post-form-inner { + display: inline-block; +} + +.post-table, .post-table-options, textarea { + width: 100%; +} + +#post-form-inner .post-table tr { + background-color: transparent; +} + +.post-table th, .post-table-options th { + width: 85px; +} + +.post-table-options { + display: none; +} + +.required-field-cell { + vertical-align: top; +} + +.show-options-cell { + text-align: right; +} + +.hidden { + display:none; +} + +a,a:visited { + text-decoration: underline; + color: #34345C; +} + +a:hover,.intro a.post_no:hover { + color: #ff0000; +} + +a.post_no { + text-decoration: none; + margin: 0; + padding: 0; +} + +.intro a.post_no { + color: inherit; +} + +.intro a.post_no,p.intro a.email,p.intro a.post_anchor { + margin: 0; +} + +.intro a.email span.name { + color: #34345C; +} + +.intro a.email:hover span.name { + color: #ff0000; +} + +.intro label { + display: inline; +} + +.intro time,p.intro a.ip-link,p.intro a.capcode { + direction: ltr; + unicode-bidi: embed; +} + +h2 { + color: #AF0A0F; + font-size: 11pt; + margin: 0; + padding: 0; +} + +header { + margin: 3em 0; +} + +h1 { + font-family: tahoma; + letter-spacing: -2px; + font-size: 20pt; + margin: 0; +} + +header div.subtitle,h1 { + color: #AF0A0F; + text-align: center; +} + +header div.subtitle { + font-size: 8pt; +} + +form table { + margin: auto; +} + +form table input { + height: auto; +} + +input[type="text"],input[type="password"],textarea { + border: 1px solid #a9a9a9; + text-indent: 0; + text-shadow: none; + text-transform: none; + word-spacing: normal; + font-size: inherit; + font-family: sans-serif; + + padding:0px!important; +} + + + +#upload input[type="file"] { + max-width: 270px; +} + +form table tr td { + text-align: left; + margin: 0; + padding: 0; +} + +form table.mod tr td { + padding: 2px; +} + +form table tr th { + text-align: left; + padding: 4px; +} + +form table tr th { + background: #98E; +} + +form table tr td div.center { + text-align: center; + float: left; + padding: 3px; + padding-top: 0px; + border: 1px dashed black; + margin: 2px +} + +/*form table tr td div input { + display: block; + margin: 2px auto 0 auto; +} +form table tr td div label { + font-size: 10px; +}*/ + +.unimportant,.unimportant * { + font-size: 10px; +} + +.file { + float: left; + margin-right: 2px; +} + +.file:not(.multifile) .post-image { + float: left; +} + +/* + * Party Hats + */ + +/* +.thread { + position: relative; +} + +[data-board] > .files > :nth-child(1):not(.multifile) > a:before { + content: url('/static/partyhat.png'); + position: absolute; + top: -120px; + left: 0px; + +} +[data-board] > .files > :nth-child(1).multifile > a:before { + content: url('/static/partyhat.png'); + position: absolute; + top: -120px; + left: -20px; + +} +*/ + +.file:not(.multifile) { + float: none; +} + +p.fileinfo { + display: block; + margin: 0 0 0 20px; +} + +div.post p.fileinfo { + padding-left: 5px; +} + +div.banner { + background-color: #E04000; + font-size: 12pt; + font-weight: bold; + text-align: center; + margin: 1em 0; +} + +div.banner,div.banner a { + color: white; +} + +div.banner a:hover { + color: #EEF2FF; + text-decoration: none; +} + +img.banner,img.board_image { + display: block; + margin: 3em auto 0 auto; +} + +.post-image { + display: block; + float: left; + margin: 5px 20px 10px 20px; + border: none; +} + +.full-image { + float: left; + padding: 5px; + margin: 0 20px 0 0; + max-width: 98%; +} + +div.post .post-image { + padding: 5px; + margin: 0 20px 0 0; +} + +div.post img.icon { + display: inline; + margin: 0 5px; + padding: 0; +} + +div.post i.fa, div.thread i.fa { + margin: 0 4px; + font-size: 16px; +} + +div.post.op { + margin-right: 20px; + margin-bottom: 5px; +} + +div.post.op hr { + border-color: #D9BFB7; +} + +.intro { + margin: 0.5em 0; + padding: 0; + padding-bottom: 0.2em; +} + +input.delete { + float: left; + margin: 1px 6px 0 0; +} + +.intro span.subject { + color: #0F0C5D; + font-weight: bold; +} + +.intro span.name { + color: #117743; + font-weight: bold; +} + +.intro span.capcode,p.intro a.capcode,p.intro a.nametag { + color: #F00000; + margin-left: 0; +} + +.intro a { + margin-left: 5px; +} + +.sage { + color: red; + font-weight: bold; +} + +.required-star { + color: maroon; +} + +div.post p { + display: block; + margin: 0; + + line-height: 1.16em; + font-size: 13px; + min-height: 1.16em; +} + +div.post div.body { + margin-top: 0.8em; + padding-right: 3em; + padding-bottom: 0.3em; +} + +div.post.reply div.body { + margin-left: 1.8em; +} + +div.post.reply.highlighted { + background: #D6BAD0; +} + +div.post.reply div.body a { + color: #D00; +} + +div.post div.body { + word-wrap: break-word; + white-space: pre-wrap; +} + +div.post.reply { + background: #D6DAF0; + margin: 0.2em 4px; + padding: 0.5em 0.3em 0.5em 0.6em; + border-width: 1px; + border-style: none solid solid none; + border-color: #B7C5D9; + display: inline-block; + max-width: 94%!important; +} + +div.post.reply.has-file.body-not-empty { + min-width: 33%; +} + +div.post_modified { + margin-left: 1.8em; +} +div.post_modified div.content-status { + margin-top: 0.5em; + padding-bottom: 0em; + font-size: 72%; +} +div.post_modified div.content-status:first-child { + margin-top: 1.3em; +} + +div.post_modified div.content-status:first-child { + margin-top: 1.3em; +} + +a.dashed-underline { + text-decoration: none; + border-bottom: 1px dashed; +} + +span.trip { + color: #228854; +} + +.quote { + color: #789922; +} + +span.omitted { + display: block; + margin-top: 1em; +} + +br.clear { + clear: left; + display: block; +} + +span.controls { + float: right; + margin: 0; + padding: 0; + font-size: 80%; +} + +span.controls.op { + float: none; + margin-left: 10px; +} + +span.controls a { + margin: 0; +} + +div#wrap { + width: 900px; + margin: 0 auto; +} + +div.module, +div.ban { + background: white; + border: 1px solid #98E; + max-width: 700px; + margin: 30px auto; +} + +div.ban p, +div.ban h2 { + padding: 3px 7px; +} + +div.ban h2 { + background: #98E; + color: black; + font-size: 12pt; +} + +div.ban p { + font-size: 12px; + margin-bottom: 12px; +} + +div.ban p.reason { + font-weight: bold; +} + +span.heading { + color: #AF0A0F; + font-size: 11pt; + font-weight: bold; +} + +span.spoiler { + background: black; + color: black; + padding: 0 1px; +} + +div.post.reply div.body span.spoiler a { + color: black; +} + +span.spoiler:hover,div.post.reply div.body span.spoiler:hover a { + color: white; +} + +div.styles { + float: right; + padding-bottom: 20px; +} + +div.styles a { + margin: 0 10px; +} + +div.styles a.selected { + text-decoration: none; +} + +table.test { + width: 100%; +} + +table.test td,table.test th { + text-align: left; + padding: 5px; +} + +table.test tr.h th { + background: #98E; +} + +table.test td img { + margin: 0; +} + +fieldset label { + display: block; +} + +div.pages { + /*! color: #89A; */ + /*! background: #D6DAF0; */ + display: inline-block; + padding: 8px; + /*! margin: 8px 0 4px 0; */ + /*! border-right: 1px solid #B7C5D9; */ + /*! border-bottom: 1px solid #B7C5D9; */ +} + +div.pages.top { + display: block; + padding: 5px 8px; + margin-bottom: 5px; + position: fixed; + top: 0; + right: 0; + opacity: 0.9; +} + +@media screen and (max-width: 800px) { + div.pages.top { + display: none!important; + } +} + +div.pages a.selected { + color: black; + font-weight: bolder; +} + +div.pages a { + text-decoration: none; +} + +div.pages form { + margin: 0; + padding: 0; + display: inline; +} + +div.pages form input { + margin: 0 5px; + display: inline; +} + +hr { + border: none; + border-top: 1px solid #B7C5D9; + height: 0; + clear: left; +} + +div.report { + color: #333; +} + +div.top_notice { + text-align: center; + margin: 5px auto; +} + +span.public_ban { + display: block; + color: red; + font-weight: bold; + margin-top: 15px; +} + +span.public_warning { + display: block; + color: steelblue; + font-weight: bold; + margin-top: 15px; +} + +span.toolong { + display: block; + margin-top: 15px; +} + +div.blotter { + color: red; + font-weight: bold; + text-align: center; +} + +.desktop-style div.boardlist:not(.bottom) { + position: fixed; + top: 0; + left: 0; + right: 0; + margin-top: 0; + z-index: 30; + box-shadow: 0 1px 2px rgba(0, 0, 0, .15); + border-bottom: 1px solid; + background-color: #D6DAF0; +} + +/*.desktop-style body { + padding-top: 20px; +}*/ + +.desktop-style .sub { + background: inherit; +} + +.desktop-style .sub .sub { + display: inline-block; + text-indent: -9000px; + width: 7px; + background: url('img/arrow.png') right center no-repeat; +} + +.desktop-style .sub .sub:hover,.desktop-style .sub .sub.hover { + display: inline; + text-indent: 0; + background: inherit; +} + +#attention_bar { + height: 1.5em; + max-height: 1.5em; + width: 100%; + max-width: 100%; + text-align: center; + overflow: hidden; +} + +#attention_bar_form { + display: none; + padding: 0; + margin: 0; +} + +#attention_bar_input { + width: 100%; + padding: 0; + margin: 0; + text-align: center; +} + +#attention_bar:hover { + background-color: rgba(100%,100%,100%,0.2); +} + +.intro.thread-hidden { + margin: 0; + padding: 0; +} + +form.ban-appeal { + margin: 9px 20px; +} + +form.ban-appeal textarea { + display: block; +} + +.MathJax_Display { + display:inline!important; +} +pre { + margin:0 + display: inline!important; +} + +.theme-catalog div.thread img { + float: none!important; + margin: auto; + max-height: 150px; + max-width: 200px; + box-shadow: 0 0 4px rgba(0,0,0,0.55); + border: 2px solid rgba(153,153,153,0); +} + +.theme-catalog div.thread { + display: inline-block; + vertical-align: top; + text-align: center; + font-weight: normal; + margin-top: 2px; + margin-bottom: 2px; + padding: 2px; + height: 300px; + width: 205px; + overflow: hidden; + position: relative; + font-size: 11px; + max-height: 300px; + background: rgba(182, 182, 182, 0.12); + border: 2px solid rgba(111, 111, 111, 0.34); + max-height:300px; +} + +.theme-catalog div.thread strong { + display: block; +} + +.theme-catalog div.threads { + text-align: center; +} + +.theme-catalog div.thread:hover { + background: #D6DAF0; + border-color: #B7C5D9; +} + +.theme-catalog div.grid-size-vsmall img { + max-height: 33%; + max-width: 95% +} + +.theme-catalog div.grid-size-vsmall { + min-width:90px; max-width: 90px; + max-height: 148px; +} + +.theme-catalog div.grid-size-small img { + max-height: 33%; + max-width: 95% +} + +.theme-catalog div.grid-size-small { + min-width:140px; max-width: 140px; + max-height: 192px; +} + +.theme-catalog div.grid-size-medium img { + max-height: 33%; + max-width: 95% +} + +.theme-catalog div.grid-size-medium { + min-width:200px; max-width: 200px; + max-height: 274px; +} + +.theme-catalog div.grid-size-large img { + max-height: 40%; + max-width: 95% +} + +.theme-catalog div.grid-size-large { + min-width: 256px; max-width: 256px; + max-height: 384px; +} + +.theme-catalog img.thread-image { + height: auto; + max-width: 100%; +} + +@media (max-width: 420px) { + header, img.board_image { + margin-top: 5em; + } + div.boardlist { + word-spacing:-3px; + } + + .theme-catalog ul#Grid { + padding-left: 18px; + } + + .theme-catalog div.thread { + width: auto; + margin-left: 0; + margin-right: 0; + } + + .theme-catalog div.threads { + overflow: hidden; + } + div.post .body { + clear: both; + } +} + +.compact-boardlist { + /*padding: 3px;*/ + padding-bottom: 0; +} + +.compact-boardlist .cb-item { + display: inline-block; + vertical-align: middle; +} + +.compact-boardlist .cb-icon { + padding-bottom: 1px; +} + +.compact-boardlist .cb-fa { + font-size: 16px; +} + +.compact-boardlist .cb-cat { + padding: 0px 6px 0px 6px; +} + +.cb-menuitem { + display: table-row; +} + +.cb-menuitem span { + padding: 5px; + display: table-cell; + text-align: left; + border-top: 1px solid rgba(0,0,0,0.5); +} + +.cb-menuitem span.cb-uri { + text-align: right; +} + +.boardlist:not(.compact-boardlist) #watch-pinned::before { + content: " [ "; +} + +.boardlist:not(.compact-boardlist) #watch-pinned::after { + content: " ] "; +} + +.boardlist:not(.compact-boardlist) #watch-pinned { + display: inline; +} + +.boardlist:not(.compact-boardlist) #watch-pinned a { + margin-left: 3pt; +} + +.boardlist:not(.compact-boardlist) #watch-pinned a:first-child { + margin-left: 0pt; +} + +.compact-boardlist #watch-pinned { + display: inline-block; + vertical-align: middle; +} + +.new-posts { + opacity: 0.6; + margin-top: 1em; +} + +.new-threads, .board-settings { + text-align: center; +} + +#options_handler, #alert_handler { + position: fixed; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + width: 100%; + height: 100%; + text-align: center; + z-index: 9900; +} + +#options_background, #alert_background { + background: black; + opacity: 0.5; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + width: 100%; + height: 100%; + z-index: -1; +} + +#options_div, #alert_div { + background-color: #d6daf0; + border: 1px solid black; + display: inline-block; + position: relative; + margin-top: 20px; +} + +#options_div { + width: 600px; + height: 360px; +/* width: 620px; + height: 400px; + resize: both; + overflow: auto;*/ +} + + + +#alert_div { + width: 500px; +} + +#alert_message { + text-align: center; + margin: 13px; + font-size: 110%; +} + +.alert_button { + margin-bottom: 13px; +} + +#options_div textarea { + max-width: 100%; +} + +#options_close, #alert_close { + top: 0px; + right: 0px; + position: absolute; + margin-right: 3px; + font-size: 20px; + z-index: 100; +} + +#options_tablist { + padding: 0px 5px; + left: 0px; + width: 90px; + top: 0px; + bottom: 0px; + height: 100%; + border-right: 1px solid black; +} + +.options_tab_icon { + padding: 5px; + color: black; + cursor: pointer; +} + +.options_tab_icon.active { + color: red; +} + +.options_tab_icon i { + font-size: 20px; +} + +.options_tab_icon div { + font-size: 11px; +} + +.options_tab { + padding: 10px; + position: absolute; + top: 0px; + bottom: 10px; + left: 101px; + right: 0px; + text-align: left; + font-size: 12px; + overflow-y: auto; +} + +.options_tab h2 { + text-align: center; + margin-bottom: 5px; +} + +.mobile-style #options_div, .mobile-style #alert_div { + display: block; + width: 100%; + height: 100%; + margin-top: 0px; +} + +.mentioned { + word-wrap: break-word; +} + +.poster_id { + cursor: pointer; + white-space:nowrap; + display: inline-block; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} +.poster_id:hover { + color: #800000!important; +} +.poster_id::before { + content: " ID: "; +} + +pre { +/* Better code tags */ + max-width:inherit; + word-wrap:normal; + overflow:auto; + display: block!important; + font-size:9pt; + font-family:monospace; +} + +span.pln { + color:grey; +} + +@media screen and (min-width: 768px) { + .intro { + clear: none; + } + + div.post div.body { + clear: none; + } +} + +/* === SITE-WIDE ASSETS === */ +#logo { + display: block; + width: 100%; + padding: 0; + margin: 0 0 0 0; + text-align: center; +} +#logo-link { + display: inline; +} +#logo-img { + display: inline-block; + height: 128px; + width: auto; +} + +/* === GENERAL CLASSES === */ +.loading { + background: none; + background-color: none; + background-image: url('/static/infinity.gif'); + background-position: center center; + background-repeat: no-repeat; + min-height: 76px; + min-width: 128px; +} +.loading-small { + background: none; + background-color: none; + background-image: url('/static/infinity-small.gif'); + background-position: center center; + background-repeat: no-repeat; + min-height: 24px; + min-width: 48px; +} + +/* Text and accessibility */ +.ltr { + direction: ltr; +} +.rtl { + direction: rtl; + font-family: Tahoma; +} + +/* Responsive helpers */ +.col { + box-sizing: border-box; + float: left; +} + +.col-12 { width: 100%; } +.col-11 { width: 91.66666667%; } +.col-10 { width: 83.33333333%; } +.col-9 { width: 75%; } +.col-8 { width: 66.66666667%; } +.col-7 { width: 58.33333333%; } +.col-6 { width: 50%; } +.col-5 { width: 41.66666667%; } +.col-4 { width: 33.33333333%; } +.col-3 { width: 25%; } +.col-2 { width: 16.66666667%; } +.col-1 { width: 8.33333333%; } + +.left-push { + float: left; +} +.right-push { + float: right; +} + +/* Layout design */ +.box { + background: #D6DAF0; + border: 1px solid #000333; + color: #000333; + margin: 0 0 12px 0; +} +.box-title { + background: #98E; + color: #000333; + font-size: 120%; + font-weight: bold; + padding: 4px 8px; +} +.box-content { + padding: 0 8px; + margin: 4px 0; +} + + +.clearfix { + display: block; + clear: both; + visibility: hidden; + overflow: hidden; + + font-size: 0px; + line-height: 0px; + + box-sizing: border-box; + border: none; + height: 0; + margin: 0; + padding: 0; + width: 100%; + zoom: 1; +} + +/* === SPECIFIC PAGES & FEATURES === */ + +/* Board List */ +div.boardlist { + margin-top: 3px; + + color: #89A; + font-size: 9pt; + word-spacing:-3px; +} +div.boardlist.bottom { + margin-top: 12px; + clear: both; +} +div.boardlist a { + text-decoration: none; +} + +@-moz-document url-prefix() { + +div.boardlist { + word-spacing:-3px; +} + +} + +/* Threads */ +/* Thread Footer */ +#thread-interactions { + margin: 8px 0; + clear: both; +} +#thread-links { + float: left; +} +#thread-links > a { + padding-left: none; + padding-right: 10px; +} +#thread-quick-reply { + display: none; + position: absolute; + left: 50%; + right: 50%; + text-align: center; + width: 100px; + margin-left: -50px; +} +#thread_stats { + float: right; +} + +#post-moderation-fields { + float: right; + text-align: right; +} +#delete-fields { +} +#report-fields { +} + +/* threadwatcher */ +#watchlist { + display: none; + max-height: 250px; + overflow: auto; + border: 1px solid; + border-style: none solid solid none; + width: 50%; + margin: 0 auto; + margin-bottom: 10px; +} + +#watchlist { + font-size: 8pt; + width: 15%; + position: fixed; + right: 0pt; + top: 20pt; + margin: 0pt; + padding: 0pt; +} + +.watchlist-inner, .watchlist-controls { + margin: 0pt; + text-align: center; +} + +#watchlist-toggle, .watchThread, .watchlist-remove, #clearList, #clearGhosts { + cursor: pointer; +} +.own_post { + font-style: italic; + font-weight: normal; + opacity: .666; +} +li.mix { + display: inline-block; +} + +/* Mona Font */ +.aa { + font-family: Mona, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif; + display: block!important; + font-size: 12pt; + line-height: 1.1; +} +.dx, +.dy, +.dz { + width: 30px; + text-align: right; + display: inline-block; +} + +/* Dice */ +.dice-option table { + border: 1px dotted black; + margin: 0; + border-collapse: collapse; +} +.dice-option table td { + text-align: center; + border-left: 1px dotted black; + padding-left: 2px; + padding-right: 2px; + padding-bottom: 2px; +} + +/* Quick reply (why was most of this ever in the script?) */ +#quick-reply { + position: fixed; + right: 5%; + top: 5%; + float: right; + display: block; + padding: 0 0 0 0; + width: 300px; + z-index: 100; +} +#quick-reply #post-form-inner { + min-width: 300px; +} +#quick-reply .post-table tr td:nth-child(2) { + width: 33%; + text-align: right; + padding-right: 4px; +} +#quick-reply tr td:nth-child(2) input[type="submit"] { + width: 99%; +} +#quick-reply th, #quick-reply td { + margin: 0; + padding: 0; +} +#quick-reply th { + text-align: center; + padding: 2px 0; + border: 1px solid #222; +} +#quick-reply th .handle { + float: left; + width: 100%; + display: inline-block; +} +#quick-reply th .close-btn { + float: right; + padding: 0 5px; +} +#quick-reply input[type="text"], #quick-reply select { + width: 100%; + padding: 2px; + font-size: 10pt; + box-sizing: border-box; + -webkit-box-sizing:border-box; + -moz-box-sizing: border-box; +} +#quick-reply textarea { + min-width: 100%; + box-sizing: border-box; + -webkit-box-sizing:border-box; + -moz-box-sizing: border-box; + font-size: 10pt; + resize: both; +} +#quick-reply input, #quick-reply select, #quick-reply textarea { + margin: 0 0 1px 0; +} +#quick-reply input[type="file"] { + padding: 5px 2px; +} +#quick-reply .nonsense { + display: none; +} +#quick-reply td.recaptcha { + text-align: center; + padding: 0 0 1px 0; +} +#quick-reply td.recaptcha span { + display: inline-block; + width: 100%; + background: white; + border: 1px solid #ccc; + cursor: pointer; +} +#quick-reply td.recaptcha-response { + padding: 0 0 1px 0; +} +@media screen and (max-width: 600px) { + #quick-reply { + display: none !important; + } +} + +#youtube-size input { + width: 50px; +} + +/* File selector */ +.dropzone { + color: #000; + cursor: default; + margin: auto; + padding: 0px 4px; + text-align: center; + min-height: 50px; + max-height: 140px; + transition: 0.2s; + background-color: rgba(200, 200, 200, 0.5); + overflow-y: auto; +} +.dropzone-wrap { + width: 100%; +} +.dropzone .file-hint { + color: rgba(0, 0, 0, 0.5); + cursor: pointer; + position: relative; + margin-bottom: 5px; + padding: 10px 0px; + top: 5px; + transition: 0.2s; + border: 2px dashed rgba(125, 125, 125, 0.4); +} +.file-hint:hover, .dropzone.dragover .file-hint { + color: rgba(0, 0, 0, 1); + border-color: rgba(125, 125, 125, 0.8); +} +.dropzone.dragover { + background-color: rgba(200, 200, 200, 1); +} +.dropzone .file-thumbs { + text-align: left; + width: 100%; +} +.dropzone .tmb-container { + padding: 3px; + overflow-x: hidden; + white-space: nowrap; +} +.dropzone .file-tmb { + height: 40px; + width: 70px; + cursor: pointer; + display: inline-block; + text-align: center; + background-color: rgba(187, 187, 187, 0.5); + background-size: cover; + background-position: center; +} +.dropzone .file-tmb span { + font-weight: 600; + position: relative; + top: 13px; +} +.dropzone .tmb-filename { + display: inline-block; + vertical-align: bottom; + bottom: 12px; + position: relative; + margin-left: 5px; +} +.dropzone .remove-btn { + cursor: pointer; + color: rgba(10, 43, 175, 0.89); + display: inline-block; + vertical-align: bottom; + bottom: 10px; + position: relative; + margin-right: 5px; + font-size: 20px +} +.dropzone .remove-btn:hover { + color: rgba(125, 125, 125, 1); +} + +table.board-list-table { + display: table; + margin: -2px; + margin-bottom: 10px; + overflow: hidden; + table-layout: fixed; +} + +table.board-list-table .board-cell { + position: static; + margin: 0; + padding: 0; + box-sizing: border-box; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +table.board-list-table .board-cell::after { + content: ' '; + clear: both; +} + +table.board-list-table .board-meta { + padding-right: 4px; + width: 70px; +} +table.board-list-table .board-uri { + max-width: 196px; +} +table.board-list-table .board-title { + width: auto; +} +table.board-list-table .board-pph { + width: 55px; + padding: 4px; +} +table.board-list-table .board-max { + width: 90px; + padding: 4px; +} +table.board-list-table .board-unique { + width: 100px; + padding: 4px; +} +table.board-list-table .board-tags { + position: relative; + height: 15px; + width: auto; + padding: 0 15px 0 4px; +} +table.board-list-table .board-tags .tag-link { + display: inline; +} +table.board-list-table .board-tags .board-cell:hover { + position: absolute; + background: #EEF2FF; + line-height: 23px; + top: 0; + bottom: 0; + width: 310px; +} +table.board-list-table tr:nth-of-type( even ) .board-tags .board-cell { + background: #D6DAF0; +} +table.board-list-table .board-uri a { + display: inline-block; + float: left; +} +table.board-list-table .board-uri .board-nsfw { + color: rgb(230,0,0); + margin: 0 0 0 0.6em; + float: right; +} +table.board-list-table .board-uri .board-sfw { + color: #34345C; + margin: 0 0 0 0.6em; + float: right; +} + +table.board-list-table div.board-cell { + max-width: 100%; + overflow: hidden; +} + +tbody.board-list-loading { + display: none; +} +tbody.board-list-loading .loading { + height: 80px; +} + +tbody.board-list-omitted td { + background: #98E; + border-top: 1px solid #000333; + padding: 8px; + font-size: 125%; + text-align: center; +} +tbody.board-list-omitted #board-list-more { + cursor: default; +} +tbody.board-list-omitted #board-list-more.board-list-hasmore { + cursor: pointer; +} +tbody.board-list-omitted .board-page-loadmore { + display: none; +} +tbody.board-list-omitted .board-list-hasmore .board-page-loadmore { + display: inline; +} + +aside.search-container { + margin-bottom: 12px; +} +aside.search-container .box { + margin-right: 12px; +} + +.board-search { + margin: 8px 0; +} +.search-item { + margin: 8px 0; +} +.search-sfw { + display: block; + cursor: pointer; + font-size: 110%; + line-height: 120%; +} +#search-sfw-input { + margin: 0; + padding: 0; + transform: scale(1.20); +} +#search-lang-input, +#search-title-input, +#search-tag-input { + box-sizing: border-box; + font-size: 110%; + line-height: 120%; + vertical-align: top; + padding: 2px 0 2px 4px; + max-width: 100%; + min-width: 100%; + width: 100%: +} +#search-loading { + display: inline-block; + vertical-align: bottom; +} + +ul.tag-list { + display: block; + list-style: none; + margin: 8px 8px -9px 8px; + padding: 8px 0 0 0; + border-top: 1px solid #000333; +} +ul.tag-list::after { + content: ' '; + display: block; + clear: both; +} +li.tag-item { + display: inline-block; + float: left; + font-size: 100%; + list-style: none; + margin: 0; + padding: 0 4px 0 0; +} +li.tag-item:last-child { + padding-bottom: 17px; +} +a.tag-link { + overflow: hidden; + white-space: nowrap; +} +li.tag-item a.tag-link { +} +td.board-tags a.tag-link { + display: inline-block; + margin: 0 0.4em 0 0; +} + +@media screen and (max-width: 1100px) { + aside.search-container { + width: 100%; + margin-bottom: 12px; + } + aside.search-container .box { + margin-right: 0; + } + + section.board-list { + margin-top: 12px; + width: 100%; + } + + table.board-list-table .board-meta, + table.board-list-table .board-pph, + table.board-list-table .board-tags { + padding: 0; + margin: 0; + font-size: 0; + width: 0; + } +} + +#post-moderation-fields { + display: block; +} + +.announcement { + font-size: 75%; + padding-bottom: 1%; + margin-left: 5%; + margin-right: 5%; +} + +/* Gallery view */ +#gallery_images { + position: absolute; + right: 0px; + bottom: 0px; + top: 0px; + width: 12%; + background-color: rgba(0, 0, 0, 0.4); + overflow: auto; +} +#gallery_toolbar { + position: absolute; + right: 12%; + left: 0px; + bottom: 0px; + height: 32px; + background-color: rgba(0, 0, 0, 0.4); + text-align: right; +} +#gallery_images img { + width: 100%; +} +#gallery_toolbar a { + font-size: 28px; + padding-right: 5px; +} +#gallery_main { + position: absolute; + left: 0px; + right: 12%; + bottom: 32px; + top: 0px; + padding: 10px; +} + +#gallery_images img { + opacity: 0.6; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +#gallery_images img:hover, #gallery_images img.active { + opacity: 1; +} +#gallery_images img.active { + -webkit-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + -moz-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + z-index: 1; +} +#gallery_main img, #gallery_main video { + max-width: 100%; + max-height: 100%; + position: absolute; +} + +/* Fileboard */ +table.fileboard th, table.fileboard td { + padding: 2px; + text-align: center; +} +table.fileboard .intro a { + margin-left: 0px; +} + +/* Rules Popup */ +#rules-popup { + width: 80%; + height: 80%; + position: fixed; + z-index: 9999; + left: 50%; + margin-left: -40%; + top: 50%; + margin-top: -40vh; + background: #000000; + text-align: center; + font-family: sans-serif; + font-size: 14px; + color: #FFFFFF; +} +#rules-popup .rules-popup-top { + font-size: 40px; + line-height: 60px; + position: absolute; + top: 0px; + height: 60px; + width: 100%; +} +#rules-popup .rules-popup-content-wrapper { + text-align: left; + position: absolute; + bottom: 80px; + top: 60px; + width: 100%; + overflow: auto; +} +#rules-popup #rules-popup-content { + padding: 10px; + font-size: 12px; +} +#rules-popup .rules-popup-bottom { + bottom: 0px; + height: 80px; + width: 100%; + position: absolute; +} +#rules-popup .rules-popup-bottom-instructions { + line-height: 40px; +} +#rules-popup .rules-popup-captcha-wrapper { + height: 40px; +} +#rules-popup .rules-popup-captcha { + display: inline-block; + border: 1px solid white; + font-family: serif; + padding: 3px; +} +#rules-popup .rules-popup-form { + display: inline-block; +} +#rules-popup .rules-popup-form-input { + width: 100px; +} + +/* dropdown for boardlist. */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Alter details as needed, I'm not a designer. */ +.dropdown-content { + display: none; + position: absolute; + background-color: #666666; + min-width: 130px; + padding: 2px 6px; + color: #DCA1F5; +} + +.dropdown:hover .dropdown-content { + display: block; + } + +.own_post { + font-style: italic; + font-weight: normal; + opacity: .666; +} +div.mix { + display: inline-block; +} + +footer { + margin-bottom: 50px; +} + +span.underline { + text-decoration: underline; +} + +span.strikethrough { + text-decoration: line-through; +} + +span.orangeQuote { + color: #FF8C00; +} + +.options_general_tab--select_opt { + height: 2.5em; +} + +.options_general_tab--select_opt span { + line-height: 2.5em; +} + +.options_general_tab--select_opt select { + float: none; +}