From 84e453e798a5b5406979b7caf93b6d88472c000d Mon Sep 17 00:00:00 2001 From: "me@ow.nekobit.net" Date: Tue, 12 Apr 2022 02:48:45 +0000 Subject: [PATCH] 4.0 theme FossilOrigin-Name: 6c44570c07385cc554b57dd939a8c2e4f9857be69dba0f229feb582e078bedc9 --- dist/treebird20.css | 60 +- dist/treebird30.css | 432 ------------- dist/treebird40.css | 1141 +++++++++++++++++++++++++++++++++ static/config_appearance.html | 3 +- static/index.html | 80 +-- static/post.html | 6 +- 6 files changed, 1228 insertions(+), 494 deletions(-) delete mode 100644 dist/treebird30.css create mode 100644 dist/treebird40.css diff --git a/dist/treebird20.css b/dist/treebird20.css index 141ec1e..f7959e1 100644 --- a/dist/treebird20.css +++ b/dist/treebird20.css @@ -14,6 +14,10 @@ body { background-color: unset; font-family: Arial, Helvetica, sans-serif; +} + +#main-page +{ width: 1000px; border-top: 0 !important; margin-left: auto; @@ -60,6 +64,7 @@ table.ui-table td #content { + overflow: hidden; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } @@ -71,49 +76,57 @@ table.ui-table td border-top: 2px solid #fff; background: linear-gradient(#fafafa, #f3f3f3); width: 1000px; - display: flex; - align-items: center; border-bottom: 2px solid #cacaca; z-index: 999; } #navbar img { + vertical-align: middle; display: inline-block; - margin: 4px 3px 2px 10px; + margin: 4px 3px 5px 14px; } #navbar span.info { + vertical-align: middle; margin-left: 15px; color: #202020; /* font-variant: small-caps; */ font-size: 28px; } +#navbar-right-container +{ + width: 800px; + display: inline-block; + position: relative; + top: 9px; + padding-right: 8px; + align-items: center; +} + +#navbar-right form +{ + float: right; +} + #navbar-right { - padding-right: 8px; - flex: 1; - flex-direction: row; - align-items: center; + display: inline-block; + float: right; } #login-header { + vertical-align: middle; + float: left; + position: relative; + top: 4px; margin-right: 15px; text-decoration: none; } -.alignend -{ - flex: 1; - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: flex-end; -} - #main { width: 608px; @@ -801,27 +814,36 @@ svg.in-reply-to-icon ****************/ .statusbox { - display: flex; + display: block; flex-direction: column; padding: 5px; } .statusbox textarea { + display: block; + width: 592px; margin-bottom: 5px; } .statusbox .statusfooter { - display: flex; + display: block; flex-direction: row; } .statusbox .statusfooter-left { - flex: 1; + display: inline-block; } +.statusbox .statusfooter-right +{ + + float: right; +} + + .status-interact label { display: block; diff --git a/dist/treebird30.css b/dist/treebird30.css deleted file mode 100644 index 8a2223a..0000000 --- a/dist/treebird30.css +++ /dev/null @@ -1,432 +0,0 @@ -/* Basic elements */ -body -{ - font-family: Arial, Helvetica, sans-serif; - background-color: #fafafa; -} - -a -{ - color: #aa0000; -} - -/* Divs and wrappers */ -#display-wrapper -{ - display: flex; - justify-content: center; -} - -#display -{ - overflow: hidden; - background-color: #fdfdfd; - width: 1000px; - border-radius: 5px; - border: 1px solid #dadada; - box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); -} - -#navbar -{ - background-color: #fff; - display: flex; - align-items: center; - padding: 5px 8px; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); -} - -#navbar img -{ - display: inline-block; - margin: 2px 2px 2px 8px; -} - -#navbar span.info -{ - margin-left: 15px; - color: #202020; - font-variant: small-caps; - font-size: 28px; -} - -#navbar-right -{ - padding-right: 8px; -} - -.alignend -{ - flex: 1; - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: flex-end; -} - -div#content -{ - display: flex; -} - -div#content main -{ - flex: 1; - min-width: 0; - min-height: 600px; -} - -div#content aside -{ - width: 180px; - max-width: 180px; - min-width: 180px; -} - -#leftbar -{ - border-right: 1px solid #cacaca; -} - -#leftbar ul -{ - margin: 0 3px; - padding: 5px 0; -} - -#leftbar ul:not(:last-child) -{ - border-bottom: 1px solid #e4e4e4; -} - -#leftbar ul li -{ - list-style-type: none; -} - -/************************************************* - * BUTTONS * - *************************************************/ -input[type=button], input[type=submit], .sidebarbtn, .btn -{ - background: transparent; - margin: 4px; - border-radius: 3px; - border: 1px solid #fcfcfc00; - color: #000; - text-decoration: none; -} - -input[type=button]:hover, input[type=submit]:hover, .sidebarbtn:hover, .btn:hover, -input[type=button]:active, input[type=submit]:active, .sidebarbtn:active, .btn:active, -input[type=button]:focus, input[type=submit]:focus, .sidebarbtn:focus, .btn:focus -{ - background: #ececec; - border: 1px solid #dadada; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05); - cursor: pointer; -} - -input[type=button], input[type=submit] -{ - border: 1px solid #cacaca; - padding: 3px 15px; -} - -.sidebarbtn -{ - transition: .2s; - display: block; - padding: 8px 8px 8px 16px; -} - -.sidebarbtn:hover, -.sidebarbtn:focus, -.sidebarbtn:active -{ - transform: translate(0px, -2px); -} - -#rightbar -{ - border-left: 1px solid #cacaca; -} - -/*************************** - * Statuses * - **************************/ -.status -{ - display: flex; - margin: 7px; -} - -.status:not(:last-child) -{ - border-bottom: 2px dotted #cacaca; -} - -.status .profile-picture -{ - display: inline-block; - width: 52px; - min-width: 52px; - height: 52px; - background-position: center center; - background-repeat: no-repeat; - background-size: cover; - border-radius: 4px; - margin-bottom: 5px; -} - -.status .status-info -{ - flex: 1; - display: flex; - margin: 0 5px 5px; - min-width: 0; - flex-direction: column; -} - -.status .instance-info -{ - font-style: italic; - text-decoration: none; - margin: 0 3px; -} - -.status .poster-stats -{ - display: flex; -} - -.status .username -{ - font-weight: bold; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.status .status-content -{ - margin: 2px 0 0 0; - overflow-wrap: break-word; -} - -.status .status-content p -{ - margin: 2px 0 0 0; -} - -.status-visibility -{ - color: #808080; -} - -/*************************** - * Element Grouping * - **************************/ -.group -{ - padding: 0; - margin: 0 !important; - height: 28px; - -} - -/* These are a pain for some reason */ -.group-inputbox -{ - border: 1px solid #cacaca; - padding-left: 5px; - border-right: 0px; - height: 26px; -} - -.group-left -{ - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; -} - -.group-right -{ - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; -} - -/************************* - * Config * - ************************/ -#config-page -{ - padding: 0 12px; -} - -#config-page h1 -{ - padding-left: 12px; - padding-bottom: 6px; - border-bottom: 1px solid #cacaca; -} - -#config-page h3 -{ - margin-left: 15px; -} - -#config-page ul -{ - list-style-type: none; - padding-left: 15px; -} - - -/********************** - * Profiles * - **********************/ -.header-btn -{ - text-decoration: none; - color: #606060; - font-size: 14px; -} - -.header-btn .btn-content -{ - color: #000; -} - -.btn.header-btn:hover span -{ - color: #fff; -} - -.header-btn span -{ - display: block; - text-align: center; -} - -.acct-banner -{ - width: 100%; - display: flex; - background-position: center center; - background-repeat: no-repeat; - background-size: cover; - height: 256px; - align-items: end; -} - -.acct-pfp -{ - position: relative; - z-index: 1; - border: 3px solid #cacaca; - background-color: #fff; - border-radius: 8px; - width: 100px; - height: 100px; - top: 38px; - left: 150px; - margin-top: -108px; - margin-left: -108px; - background-position: center center; - background-repeat: no-repeat; - background-size: cover; -} - -.acct-header -{ - display: flex; - padding-left: 160px; - background: linear-gradient(#fff, #f1f1f1); - border-bottom: 1px solid #cacaca; - background-color: #e8e8e8; -} - -.acct-info-data -{ - position: relative; - left: 160px; - top: -10px; - font-weight: bold; - text-shadow: 0px 2px 6px #000; -} - -.acct-displayname -{ - font-size: 26px; - display: block; - color: #fff; -} - -.acct-username -{ - font-size: 14px; - color: #dadada; - display: block; - font-weight: bold; - text-shadow: 0px 0px 5px #000; -} - -.header-btn -{ - display: inline-block; - padding: 8px 15px; - margin: 0; - -} - -.nobutton -{ - background-color: transparent !important; - border: 0 !important; - border-radius: 0 !important; - margin: 0 !important; - padding: 8px 14px !important; - transition: .05s background-color, .05s color; - border-top-right-radius: 8px !important; -} - -.status-interact form:not(:last-child) .nobutton -{ - border-right: 1px solid #cacaca !important; - border-top-right-radius: 0px !important; - -} - -.status-interact form:first-child .nobutton -{ - border-top-left-radius: 8px !important; -} - - -.nobutton:hover, -.nobutton:active, -.nobutton:focus -{ - background-color: #cc5555 !important; - border: 0 !important; - color: #fff !important; - border-right: 1px solid #cacaca !important; - -} - -.status:not(:last-child) -{ - border-bottom: 1px solid #cacaca; -} - -.status .status-info -{ - margin-bottom: 0; -} - -.status-interact -{ - margin-top: 8px; - margin-bottom: 0; -} diff --git a/dist/treebird40.css b/dist/treebird40.css new file mode 100644 index 0000000..0f99876 --- /dev/null +++ b/dist/treebird40.css @@ -0,0 +1,1141 @@ +/* Look, I tried my best to make this theme compatible with browsers like Netsurf and stuff, I HATE + the modern web and flexboxes and stuff, so as a result, you WILL see some fugly things in here + that you will probably want to cleanup or throw out completely, this CSS is a big hack. + + Other themes do not need to be compatible with Netsurf and older browsers or use tables, + I just wanted this to be as compatible as possible, go wild with your own themes */ + +html +{ + background-color: #f6f6f6; +} + +body +{ + background-color: unset; + font-family: Arial, Helvetica, sans-serif; +} + +#main-page +{ + width: 1000px; + margin-left: auto; + margin-right: auto; + box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.3); + border-width: 0; + border-radius: 5px; +} + +.hidden +{ + display: none; +} + +.pointer +{ + cursor: pointer; +} + +a, a:visited, a:hover, a:active +{ + color: inherit; +} + +.mention +{ + color: #cc0000; + text-decoration: none; + background-color: #ffcccc; + border-radius: 3px; + padding-left: 2px; + padding-right: 2px; +} + +/* Cleans up most of the tables */ +table.ui-table td +{ + padding: 0; + margin: 0; + border-collapse: collapse !important; + vertical-align: top; +} + +#content +{ + overflow: hidden; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} + +#navbar +{ + border-top-left-radius: 5px; + border-top-right-radius: 5px; + background: rgba(245, 245, 245, 0.8); + backdrop-filter: blur(12px); + width: 1000px; + border-bottom: 1px solid #dadada; + z-index: 999; + position: sticky; + top: 0px; +} + +#navbar img +{ + vertical-align: middle; + display: inline-block; + margin: 8px 3px 10px 14px; +} + +#navbar span.info +{ + vertical-align: middle; + margin-left: 15px; + color: #202020; + /* font-variant: small-caps; */ + font-size: 28px; +} + +#navbar-right-container +{ + width: 800px; + display: inline-block; + position: relative; + top: 11px; + padding-right: 8px; + align-items: center; +} + +#navbar-right form +{ + float: right; +} + +#navbar-right +{ + display: inline-block; + float: right; +} + +#login-header +{ + vertical-align: middle; + float: left; + position: relative; + top: 4px; + margin-right: 15px; + text-decoration: none; +} + +#main +{ + width: 608px; + max-width: 608px !important; + min-width: 608px; + border-collapse: collapse !important; + background-color: #fafafa; + padding: 0; +} + +#content +{ + border-collapse: collapse !important; + min-height: 600px; +} + +.sidebar +{ + width: 180px; + min-height: 600px; + max-width: 180px; + min-width: 180px; + background-color: #fcfcfc; +} + +#leftbar +{ + border-right: 1px solid #cacaca; +} + +#leftbar ul +{ + margin: 0; + padding: 0; +} + +#leftbar ul li +{ + list-style-type: none; +} + + +#rightbar +{ + border-left: 1px solid #cacaca; + min-width: 210px; + max-width: 210px; +} + + +/************************************************* + * COMMON ELEMENTS * + *************************************************/ + +table.present +{ + border: 1px solid #cacaca; +} + +table.present th, table.present td +{ + padding: 2px 5px; +} + +#env-table +{ + margin-top: 5px; +} + +.e-error +{ + display: block; + background-color: #fcb0b0; + color: #000; + border: 1px solid #bb1c1f; + padding: 15px; + font-weight: bold; +} + +.error-pad +{ + margin: 5px; + border-radius: 4px; +} + +.e-notice +{ + display: block; + background-color: #ddeeff; + color: #000; + border: 1px solid #66ccff; + padding: 15px; + font-weight: bold; +} + +/************************************************* + * BUTTONS * + *************************************************/ +.sidebarbtn, .btn +{ + background-color: #fff; + color: #000; + border-bottom: 1px solid #dadada; + text-decoration: none; + transition: background-color .15s, border .15s; +} + +.sidebarbtn:hover, .btn:hover +{ + background-color: #ffcccc; + border-bottom: 1px solid #aa4040; + color: #000; + cursor: pointer; +} + +.sidebarbtn:active, .btn:active +{ + background: linear-gradient(#600000, #aa0000); + border-color: #400000; + color: #fff; + cursor: pointer; +} + +.btn-disabled +{ + color: #cacaca !important; + background: #f3f3f3 !important; +} + +.btn-disabled:hover +{ + background: #f3f3f3; +} + +.btn-disabled:active +{ + background: #f3f3f3; +} + + +input[type=button], input[type=submit] +{ + border: 1px solid #cacaca; + padding: 3px 15px; +} + +.sidebarbtn +{ + display: block; + padding: 10px 8px 10px 16px; + margin: 4px; + border-radius: 3px; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05); +} + +.sidebarbtn.focused +{ + border-right: 3px solid #aa0000; +} + +.sidebarbtn-sub +{ + display: block; + color: #000; + padding: 8px; + padding-left: 32px; + text-decoration: none; +} + +.sidebar-config +{ + background-color: #efefef; + border-left: 3px solid #aa0000; + box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1); +} + +.sidebarbtn-sub.focused +{ + font-weight: bold; +} + +.sidebarbtn-sub:active, .sidebarbtn-sub:hover +{ + background-color: #dadada; +} + +/**************************** + * Notifications * + ***************************/ +.notification +{ + border-bottom: 1px solid #dadada; + width: 100%; +} + +.pfp-compact-td +{ + width: 16px; +} + +.pfp-compact-td img +{ + border-radius: 3px; + width: 24px; + height: 24px; + object-fit: cover; +} + +.notification-compact +{ + min-width: 100%; +} + +.notification-compact p +{ + margin: 0; +} +.notification-compact .notification-info +{ + font-size: 12px; + padding-left: 2px; + padding-right: 2px; + margin-top: 0; + font-weight: bold; +} + +.notification-info svg, +.notification-info-format svg +{ + width: 16px; + height: 16px; + stroke: #aa0000; +} + +.notification-table-bit +{ + width: auto; +} + +/* Only move up if SVG is next to it, the SVG moves the text */ +.notification .notification-text-group-with-icon +{ + vertical-align: middle; +} + +.notification-info svg.like, +.notification-info-format svg.like +{ + fill: #aa0000; + +} + +svg.like, svg.repeat, svg.follow, svg.reply, svg.in-reply-to-icon +{ + vertical-align: middle; +} + +svg.in-reply-to-icon +{ + position: relative; + top: -3px; + stroke: #606060; +} + +.in-reply-to +{ + color: #606060; +} + +.in-reply-to-id +{ + text-decoration: none; + line-height: 23px; +} + +.notification-compact .notification-content +{ + color: #808080; + font-size: 12px; + padding: 2px 0 2px 0; +} + +.notification-compact .notification-stats +{ + color: #500000; + font-size: 10px; +} + +.notification-info +{ + margin-top: 7px; +} + +.notification-info img, +.notification-info-format img +{ + margin-left: 38px; + width: 24px; + height: 24px; + object-fit: cover; +} + +.notification-info .notification-user, +.notification-info-format .notification-user +{ + display: inline; + vertical-align: middle; + position: relative; + top: -8px; + left: 2px; +} + +/*************************** + * Statuses * + **************************/ +.status, +.notification-regular +{ + padding: 6px 2px 0 6px; + border-bottom: 1px solid #cacaca !important; + width: 100%; + border-spacing: 0px; +} + +.status.focused +{ + background-color: #ffdddd; + border-left: 3px solid #aa0000; +} + +.notification-info + .status, +.notification-info-format + .status +{ + padding-top: 0; +} + +.status .profile-picture +{ + display: inline-block; + width: 52px; + min-width: 52px; + height: 52px; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + border-radius: 4px; + margin-bottom: 5px; +} + +.pfp-td +{ + width: 56px; + border-collapse: collapse !important; + padding: 6px; +} + +.pfp-td img +{ + border-radius: 3px; + width: 56px; + height: 56px; + object-fit: cover; +} + +.status tr +{ + width: auto; +} + + +.status .status-info, +.notification-info-format, +.notification-content +{ + min-width: 0; + width: auto; + padding: 0 0 0 10px; +} + +.status .status-info > table.ui-table +{ + width: 100%; +} + +.status .status-info table.ui-table, .status .status-info table.ui-table td, .status .status-info table.ui-table tr +{ + border-collapse: collapse !important; + border-spacing: 0px; + padding: 0; + margin: 0; +} + +.status .instance-info +{ + font-style: italic; + text-decoration: none; + margin: 0 4px 0 6px; + font-size: 14px; + padding-top: 1px; +} + +.status .poster-stats +{ + /* To maintain compatibility while keeping it a flexbox, we have to + * hardcode the width, sorry! Tables are just weird and I hate CSS */ + max-width: 520px; +} + +.status .username, +.notification-regular .username +{ + display: inline-block; + font-weight: bold; + text-overflow: ellipsis; + overflow: hidden; + max-width: 350px; + white-space: nowrap; + vertical-align: middle; +} + +.status .status-content +{ + margin: 2px 0 0 0; + overflow-wrap: break-word; + width: 520px; + display: block; +} + +.status .status-content p +{ + margin: 2px 0 0 0; +} + +.status-visibility +{ + color: #808080; + display: inline; + float: right; + font-size: 12px; + margin: 3px 0 0 3px; +} + +.status-interact +{ + margin: 8px 0 0 0; +} + +.status-interact table.ui-table +{ + border-collapse: collapse !important; + padding: 0; +} + +.status-interact table.ui-table tr +{ + border-collapse: collapse !important; + padding: 0; +} + +/*************************** + * Element Grouping * + **************************/ +.group +{ + padding: 0; + margin: 0 !important; + height: 28px; + +} + +/* These are a pain for some reason */ +.group-inputbox +{ + border: 1px solid #cacaca; + padding-left: 5px; + border-right: 0px; + height: 26px; +} + +.group-left +{ + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.group-right +{ + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +/************************* + * Config * + ************************/ +#config-page +{ + padding: 0 12px; +} + +#config-page h1 +{ + padding-left: 12px; + padding-bottom: 6px; + border-bottom: 1px solid #cacaca; +} + +#config-page h3 +{ + margin-left: 15px; +} + +#config-page ul +{ + list-style-type: none; + padding-left: 15px; +} + +/********************** + * Profiles * + **********************/ +.header-btn +{ + display: inline-block; + padding: 8px 15px; + margin: 0; + background: inherit; + text-decoration: none; + color: #606060; + font-size: 14px; +} + +.header-btn .btn-content +{ + color: #000; +} + +.btn.header-btn:hover span +{ + color: #fff; +} + +.header-btn span +{ + display: block; + text-align: center; +} + +.acct-banner +{ + width: 100%; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + height: 256px; +} + +.account +{ + position: relative; +} + +.acct-badge +{ + position: absolute; + left: 8px; + top: 8px; + font-size: 12px; + padding: 4px 8px; + color: #dadada; + text-transform: uppercase; + background-color: rgba(0, 0, 0, 0.7); + border-radius: 5px; +} + +.account-note +{ + word-break: break-all; + text-align: center; +} + +.account-info +{ + background: linear-gradient(#e4e4e4, #efefef); + color: #000; + padding: 15px 50px; + border-bottom: 1px solid #cacaca; + max-height: 360px; + overflow: auto; +} + +.acct-pfp +{ + position: absolute; + display: inline; + z-index: 100; + border: 3px solid #cacaca; + background-color: #fff; + border-radius: 8px; + width: 100px; + height: 100px; + top: 190px; + left: 42px; + object-fit: cover; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +.acct-header +{ + z-index: 1; + padding-left: 160px; + background: linear-gradient(#fff, #f1f1f1); + border-bottom: 1px solid #cacaca; + background-color: #e8e8e8; +} + +.acct-info-data +{ + display: inline-block; + position: relative; + left: 155px; + top: 185px; + font-weight: bold; + text-shadow: 0px 2px 6px #000; +} + +.acct-banner +{ + overflow: hidden; +} + + +.acct-displayname +{ + font-size: 26px; + display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + padding: 6px 6px 8px; + overflow: hidden; + max-width: 420px !important; + color: #fff; +} + +.acct-username +{ + font-size: 14px; + color: #dadada; + display: block; + padding-left: 6px; + font-weight: bold; + text-shadow: 0px 0px 5px #000; +} + +.follow-btn +{ + margin-left: auto; + position: relative; + float: right; + top: 10px; + margin: 0px 15px 15px 0px; + padding: 5px 20px; + border-radius: 24px; + background: inherit; + box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2); +} + +.follow-btn.active +{ + box-shadow: unset; + color: #fff; + background: linear-gradient(#aa0000, #600000); +} + +/**************** + * Statusbox * + ****************/ +.statusbox +{ + display: block; + flex-direction: column; + padding: 5px; +} + +.statusbox textarea +{ + display: block; + width: 592px; + margin-bottom: 5px; +} + +.statusbox .statusfooter +{ + display: block; + flex-direction: row; +} + +.statusbox .statusfooter-left +{ + display: inline-block; +} + +.statusbox .statusfooter-right +{ + + float: right; +} + + +.status-interact label +{ + display: block; + padding: 3px 8px; +} + +.status-interact svg.repeat.active +{ + stroke: #08d345; +} + +.status-interact svg.like.active +{ + fill: #fcd202; + stroke: #fcd202; +} + +.status-interact svg.like:hover, +.status-interact svg.like:active, +.status-interact svg.like:focus +{ + stroke: #08d3a5; + pointer: select; +} + +.status-interact svg.like:hover, +.status-interact svg.like:active, +.statis-interact svg.like:focus +{ + stroke: #fcd202; + pointer: select; +} + +.status-interact svg.repeat:hover, +.status-interact svg.repeat:active, +.statis-interact svg.repeat:focus +{ + stroke: #08d345; +} + +.status-interact .count +{ + font-size: 14px; + padding-bottom: 3px; +} + +/* Emoji reacts */ +.emoji-react-box +{ + border-radius: 4px; + border: 1px solid #cacaca; +} + +.form-group +{ + padding: 5px; + display: block; +} + +/* Simple page layout */ +.simple-page +{ + padding: 0 12px; +} + +.simple-page h1 +{ + padding-left: 12px; + padding-bottom: 6px; + border-bottom: 1px solid #cacaca; +} + +.simple-page h3 +{ + margin-left: 15px; +} + +.simple-page ul +{ + list-style-type: none; + padding-left: 15px; +} + +.simple-page p +{ + margin-left: 10px; + margin-right: 10px; +} + +/* Attachments */ +.attachments img +{ + min-width: 100px; +} + +.attachments +{ + margin: 10px 0 3px 0; +} + +.attachment-container +{ + z-index: 3; + display: inline-block; + overflow: hidden; +} + +.sensitive +{ + z-index: 2; + filter: blur(16px); + transition: filter .4s; +} + +.sensitive:hover +{ + filter: none; +} + +.statusbox textarea +{ + border: 1px solid #cacaca; +} + +/* Emoji reacts */ +.emoji-reactions +{ + display: block; + padding: 0; + margin-top: 8px; + padding-left: 0px !important; + margin-bottom: 6px; +} + +.emoji-react-box +{ + display: inline-block; + list-style-type: none; + padding: 3px 7px; + margin: 0 4px; +} + +.emoji +{ + font-family: Emoji; +} + +/************************************************* + * LISTS * + *************************************************/ +ul.large-list +{ + width: 500px; + border-radius: 15px; + background-color: #f8f8f8; + border: 1px solid #cacaca; + padding: 0; + overflow: hidden; +} + +ul.large-list li +{ + list-style-type: none; + margin: 0; +} + +ul.large-list li a +{ + display: block; + padding: 15px; + list-style-type: none; +} + +.lists-view-header +{ + text-align: center; +} + +.lists-view-container ul +{ + margin-left: auto; + margin-right: auto; +} + +.lists-view-container ul li:not(:last-child) +{ + border-bottom: 1px solid #dadada; +} + +/* Navigation */ +.navigation, +.tabs +{ + table-layout: fixed; + background-color: #f3f3f3; + color: #000; + width: 100%; + border-spacing: 0px; + box-shadow: 0px 1px 0px #dadada; +} + +.navigation .nav-btn, +.tabs .tab-btn +{ + display: block; + padding: 8px !important; +} + +.tabs .tab-btn +{ + width: 100%; + border: 0; +} + +.tabs .tab-btn.focused +{ + border-bottom: 3px solid #aa0000; +} + +.tabs .tab-btn:hover, +.tabs .tab-btn:active +{ + border-bottom: 3px solid #600000; +} + +.navigation tr td:not(:last-child), +.tabs tr td:not(:last-child) +{ + border-right: 1px solid #dadada; +} + +.ui-table tr td a +{ + text-decoration: none; +} + +/* MENUS */ + +.menu-container:hover .menu, +.menu-container:hover + .menu +{ + position: absolute; + display: block; +} + +.menu +{ + z-index: 5; + display: none; + background: #fafafa; + color: #000; + border-radius: 4px; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); +} + +.menu ul +{ + margin: 0; + padding: 4px 0 4px 0; +} + +.menu ul li +{ + list-style-type: none; + display: block; +} + +.menu .btn-menu +{ + background: unset; + background-color: unset; + display: block; + padding: 6px 12px; + width: 100%; + border: 0; + cursor: pointer; + text-align: left; + box-sizing: border-box; +} + +.user-options-btn +{ + padding: 4px; + border-radius: 64px; + margin: 8px; + float: right; + font-size: 12px; + color: #dadada; + text-transform: uppercase; + background-color: rgba(0, 0, 0, .7); +} + +.menu .btn-menu:hover +{ + background-color: #eaeaea; + color: #000; +} + +.nolink +{ + text-decoration: none; +} diff --git a/static/config_appearance.html b/static/config_appearance.html index 97dca06..dd39bef 100644 --- a/static/config_appearance.html +++ b/static/config_appearance.html @@ -8,8 +8,7 @@ diff --git a/static/index.html b/static/index.html index 40c8874..e372534 100644 --- a/static/index.html +++ b/static/index.html @@ -7,44 +7,48 @@ - - - - - - - - +
+ +
- %s -
+ + + + + + - - - -
+ %s +
+ + + %s + + + + diff --git a/static/post.html b/static/post.html index 9d643c3..d56a41e 100644 --- a/static/post.html +++ b/static/post.html @@ -1,14 +1,14 @@
%s
- +
- +
- +