update postbox und zen_postbox
This commit is contained in:
oldkid
parent
9c2fef6cf9
commit
54a4990b09
30 changed files with 2594 additions and 164 deletions
|
|
@ -12,12 +12,14 @@ _**NOTE:** Support for Postbox is built into Bookface 1.6+. This adddon adds sup
|
|||
2. Go to the Main _Menu > Admin > Addons_ and enable "Postbox"
|
||||
3. Any posts using Postbox will now display the colorful backgrounds.
|
||||
|
||||
## Using Zen Postbox
|
||||
## Using Postbox
|
||||
|
||||
1. Open the message Compose modal or Page
|
||||
2. Type `[class=postbox-red]Wrapped text goes here[/class]` (substitute "-red" with any of the available styles)
|
||||
3. Press the "Preview" tab to see what it will look like.
|
||||
|
||||
There is a visual reference of available styles at: _/addon/postbox/view/sampler.htm_
|
||||
|
||||
While Postbox allows more content than the Facebook version (which is text only), there are limitations due to how Friendica parses BBcode.
|
||||
|
||||
**It is STRONGLY recommended you only use Postboxes with text and emoji.**
|
||||
|
|
@ -57,44 +59,119 @@ If you are using Markdown formatting what you can and can’t put in a Postbox i
|
|||
|
||||
### Available Postbox styles
|
||||
|
||||
Old names are in parenthesis next to the new names to which they've been mapped.
|
||||
|
||||
**Solid Color Backgrounds:**
|
||||
|
||||
- .postbox-black
|
||||
- .postbox-red
|
||||
- .postbox-green
|
||||
- .postbox-blue
|
||||
- .postbox-orange
|
||||
- .postbox-purple
|
||||
- .postbox-forest
|
||||
- .postbox-ocean
|
||||
- .postbox-cornflowerblue (.postbox-blue)
|
||||
- .postbox-darkblue (.postbox-ocean)
|
||||
- .postbox-darkgray
|
||||
- .postbox-darkorange (.postbox-orange)
|
||||
- .postbox-darkred
|
||||
- .postbox-darkslateblue
|
||||
- .postbox-forestgreen (.postbox-forest)
|
||||
- .postbox-gold
|
||||
- .postbox-goldenrod
|
||||
- .postbox-honeydew
|
||||
- .postbox-hotpink
|
||||
- .postbox-lavender
|
||||
- .postbox-lightpink
|
||||
- .postbox-lightyellow
|
||||
- .postbox-limegreen (.postbox-green)
|
||||
- .postbox-lightsalmon (.postbox-salmon)
|
||||
- .postbox-mediumaquamarine
|
||||
- .postbox-mediumslateblue
|
||||
- .postbox-mediumvioletred
|
||||
- .postbox-mintcream
|
||||
- .postbox-olivedrab
|
||||
- .postbox-palegreen
|
||||
- .postbox-peachpuff
|
||||
- .postbox-pink
|
||||
- .postbox-salmon
|
||||
- .postbox-purple
|
||||
- .postbox-red
|
||||
- .postbox-seagreen
|
||||
- .postbox-sienna
|
||||
- .postbox-skyblue
|
||||
- .postbox-thistle
|
||||
- .postbox-violet
|
||||
- .postbox-whitesmoke
|
||||
- .postbox-yellowgreen
|
||||
|
||||
|
||||
**Gradient Backgrounds:**
|
||||
|
||||
- .postbox-darkgray
|
||||
- .postbox-aurora
|
||||
- .postbox-bluegray
|
||||
- .postbox-graygrey (.postbox-darkgray)
|
||||
- .postbox-grayblack
|
||||
- .postbox-greengray
|
||||
- .postbox-lavendergray
|
||||
- .postbox-minty
|
||||
- .postbox-mintgray
|
||||
- .postbox-rainbow
|
||||
- .postbox-redblue
|
||||
- .postbox-violets
|
||||
- .postbox-grayblack
|
||||
- .postbox-tealblue
|
||||
- .postbox-greengray
|
||||
- .postbox-tealgray
|
||||
- .postbox-bluegray
|
||||
- .postbox-lavendergray
|
||||
- .postbox-sherbet (.postbox-sherbert)
|
||||
- .postbox-spectrum
|
||||
- .postbox-strawberrycream
|
||||
- .postbox-sunset
|
||||
- .postbox-sherbert
|
||||
- .postbox-tealblue
|
||||
- .postbox-tealgray
|
||||
- .postbox-violets
|
||||
- .postbox-violetblue
|
||||
|
||||
**Pattern Backgrounds:**
|
||||
|
||||
- .postbox-blueprint
|
||||
- .postbox-birds
|
||||
- .postbox-checkered
|
||||
- .postbox-cubes
|
||||
- .postbox-lemonlime
|
||||
- .postbox-gingham
|
||||
- .postbox-grid
|
||||
- .postbox-hearts
|
||||
- .postbox-honeycomb
|
||||
- .postbox-notebook
|
||||
- .postbox-plaid
|
||||
- .postbox-polkadots
|
||||
- .postbox-shadedots
|
||||
- .postbox-shadowbox
|
||||
- .postbox-stars
|
||||
- .postbox-warpgrid
|
||||
- .postbox-wavy
|
||||
|
||||
**Animated Backgrounds:**
|
||||
These are ONLY available on servers with the _Postbox_ or _Zen Postbox_ add-on installed.
|
||||
|
||||
- .postbox-anigradient
|
||||
- .postbox-blob
|
||||
- .postbox-colorfade
|
||||
- .postbox-gridrunner
|
||||
- .postbox-heartbeat
|
||||
- .postbox-moonrise
|
||||
- .postbox-rainy
|
||||
- .postbox-rocket
|
||||
- .postbox-snowy
|
||||
- .postbox-sunrise
|
||||
- .postbox-waves
|
||||
|
||||
|
||||
## Known Issues
|
||||
|
||||
- Postboxes are not shown on other platforms when your post is shared.
|
||||
- Postboxes are not shown in third-party apps (at least none do yet)
|
||||
- Some of the animated backgrounds have glitches in older WebKit browsers
|
||||
- Currently Postbox BBcode is not parsed correctly by either Diaspora or Hubzilla
|
||||
|
||||
## Changelog
|
||||
1.1 (28 April 2025)
|
||||
* Changed names of solid colors to match HTML named colors
|
||||
* Added 24 new solid colors.
|
||||
* Added 5 new gradient backgrounds.
|
||||
* Added 17 new pattern and 11 animated backgrounds.
|
||||
* Fixed conflict between Postbox and Zen Postbox add-ons [Issue #1]
|
||||
* Fixed load-order for main stylesheet [Issue #2]
|
||||
|
||||
1.0 (25 March 2025)
|
||||
* Initial Release for Friendica 'Interrupted Fern' 2024.12
|
||||
|
||||
|
|
|
|||
0
postbox/images/.gitkeep
Normal file
0
postbox/images/.gitkeep
Normal file
1
postbox/images/rain.svg
Normal file
1
postbox/images/rain.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M157.825,0c0,0 5.786,10.915 5.991,15.691c0.127,2.929 -2.149,5.409 -5.077,5.534c-2.928,0.127 -5.409,-2.148 -5.535,-5.077c-0.206,-4.775 4.621,-16.148 4.621,-16.148Z" style="fill:#0d79f2;fill-opacity:0.75;"/><path d="M302.088,161.706c-0,-0 5.785,10.915 5.991,15.691c0.127,2.928 -2.149,5.408 -5.078,5.534c-2.928,0.127 -5.409,-2.149 -5.534,-5.077c-0.206,-4.776 4.621,-16.148 4.621,-16.148Z" style="fill:#1ac2e6;fill-opacity:0.75;"/><path d="M455.865,169.602c-0,-0 5.786,10.915 5.992,15.691c0.126,2.928 -2.149,5.408 -5.078,5.534c-2.929,0.127 -5.409,-2.149 -5.535,-5.077c-0.205,-4.776 4.621,-16.148 4.621,-16.148Z" style="fill:#0d28f2;fill-opacity:0.75;"/><path d="M443.746,294.481c0,0 5.787,10.916 5.992,15.692c0.127,2.929 -2.149,5.409 -5.077,5.534c-2.929,0.126 -5.41,-2.149 -5.535,-5.078c-0.206,-4.776 4.62,-16.148 4.62,-16.148Z" style="fill:#420df2;fill-opacity:0.75;"/><path d="M155.102,239.61c0,0 5.787,10.916 5.992,15.691c0.127,2.93 -2.149,5.41 -5.077,5.535c-2.929,0.126 -5.41,-2.149 -5.535,-5.078c-0.207,-4.775 4.62,-16.148 4.62,-16.148Z" style="fill:#0d28f2;fill-opacity:0.75;"/><path d="M108.816,331.162c0,-0 5.787,10.915 5.993,15.69c0.126,2.929 -2.15,5.409 -5.079,5.535c-2.928,0.126 -5.408,-2.149 -5.534,-5.077c-0.207,-4.777 4.62,-16.148 4.62,-16.148Z" style="fill:#0dcaf2;fill-opacity:0.75;"/><path d="M314.083,421.784c-0,0 5.785,10.915 5.991,15.691c0.126,2.929 -2.149,5.409 -5.078,5.535c-2.928,0.126 -5.408,-2.149 -5.534,-5.078c-0.206,-4.775 4.621,-16.148 4.621,-16.148Z" style="fill:#0d79f2;fill-opacity:0.75;"/><path d="M244.147,449.608c0,-0 5.786,10.915 5.992,15.691c0.126,2.928 -2.149,5.408 -5.079,5.534c-2.928,0.127 -5.408,-2.148 -5.534,-5.078c-0.206,-4.775 4.621,-16.147 4.621,-16.147Z" style="fill:#420df2;fill-opacity:0.75;"/></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
1
postbox/images/rocketship.svg
Normal file
1
postbox/images/rocketship.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.2 KiB |
1
postbox/images/snow.svg
Normal file
1
postbox/images/snow.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M65.184,12l3.995,3.119l-1.998,2.955l3.232,1.129l-1.526,5.047l-3.231,-1.129l-0,3.652l-4.937,0l-0,-3.652l-3.232,1.129l-1.525,-5.047l3.231,-1.129l-1.997,-2.955l3.994,-3.119l1.997,2.955l1.997,-2.955Z" style="fill:#fff;fill-opacity:0.75;"/><path d="M267.64,90.107l3.994,3.119l-1.997,2.955l3.232,1.128l-1.526,5.048l-3.232,-1.129l0,3.652l-4.937,0l0,-3.652l-3.231,1.129l-1.526,-5.048l3.232,-1.128l-1.997,-2.955l3.994,-3.119l1.997,2.954l1.997,-2.954Z" style="fill:#fff;fill-opacity:0.75;"/><path d="M408.564,26.773l3.994,3.12l-1.997,2.954l3.231,1.129l-1.525,5.047l-3.232,-1.128l0,3.652l-4.937,-0l0,-3.652l-3.231,1.128l-1.526,-5.047l3.232,-1.129l-1.997,-2.954l3.994,-3.12l1.997,2.955l1.997,-2.955Z" style="fill:#fff;fill-opacity:0.75;"/><path d="M455.198,142.769l3.994,3.119l-1.997,2.955l3.232,1.129l-1.526,5.047l-3.231,-1.129l-0,3.652l-4.937,0l-0,-3.652l-3.232,1.129l-1.526,-5.047l3.232,-1.129l-1.997,-2.955l3.994,-3.119l1.997,2.955l1.997,-2.955Z" style="fill:#fff;fill-opacity:0.75;"/><path d="M174.052,227.922l3.994,3.119l-1.997,2.955l3.232,1.129l-1.526,5.047l-3.231,-1.129l-0,3.653l-4.937,-0l-0,-3.653l-3.232,1.129l-1.526,-5.047l3.232,-1.129l-1.997,-2.955l3.994,-3.119l1.997,2.955l1.997,-2.955Z" style="fill:#fff;fill-opacity:0.75;"/><path d="M399.817,315.898l3.994,3.12l-1.997,2.954l3.232,1.129l-1.526,5.047l-3.231,-1.128l-0,3.652l-4.937,-0l-0,-3.652l-3.232,1.128l-1.525,-5.047l3.231,-1.129l-1.997,-2.954l3.994,-3.12l1.997,2.955l1.997,-2.955Z" style="fill:#fff;fill-opacity:0.75;"/><path d="M350.593,373.546l3.994,3.12l-1.997,2.954l3.232,1.129l-1.526,5.047l-3.231,-1.128l-0,3.652l-4.938,-0l0,-3.652l-3.231,1.128l-1.526,-5.047l3.232,-1.129l-1.997,-2.954l3.994,-3.12l1.997,2.955l1.997,-2.955Z" style="fill:#fff;fill-opacity:0.75;"/><path d="M175.296,329.757l3.994,3.119l-1.997,2.955l3.231,1.128l-1.525,5.048l-3.232,-1.129l0,3.652l-4.937,0l0,-3.652l-3.231,1.129l-1.526,-5.048l3.231,-1.128l-1.997,-2.955l3.995,-3.119l1.997,2.955l1.997,-2.955Z" style="fill:#fff;fill-opacity:0.75;"/><path d="M289.907,468.331l3.994,3.12l-1.997,2.954l3.231,1.129l-1.525,5.047l-3.232,-1.129l0,3.653l-4.937,-0l0,-3.653l-3.231,1.129l-1.526,-5.047l3.231,-1.129l-1.997,-2.954l3.994,-3.12l1.998,2.955l1.997,-2.955Z" style="fill:#fff;fill-opacity:0.75;"/><path d="M48.734,471.502l3.994,3.12l-1.997,2.954l3.231,1.129l-1.526,5.047l-3.231,-1.129l0,3.653l-4.937,-0l-0,-3.653l-3.231,1.129l-1.526,-5.047l3.231,-1.129l-1.997,-2.954l3.994,-3.12l1.997,2.955l1.998,-2.955Z" style="fill:#fff;fill-opacity:0.75;"/></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
1
postbox/images/stars.svg
Normal file
1
postbox/images/stars.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M63.221,12l1.94,5.97l6.277,0l-5.078,3.69l1.94,5.97l-5.079,-3.69l-5.078,3.69l1.939,-5.97l-5.078,-3.69l6.277,0l1.94,-5.97Z" style="fill:#0dcaf2;fill-opacity:0.77;"/><path d="M265.633,88.298l1.94,5.97l6.278,0l-5.079,3.69l1.94,5.97l-5.079,-3.689l-5.078,3.689l1.94,-5.97l-5.079,-3.69l6.277,0l1.94,-5.97Z" style="fill:#fff;fill-opacity:0.77;"/><path d="M172.2,226.97l1.94,5.97l6.277,0l-5.078,3.69l1.94,5.97l-5.079,-3.69l-5.078,3.69l1.939,-5.97l-5.078,-3.69l6.277,0l1.94,-5.97Z" style="fill:#491ae6;fill-opacity:0.77;"/><path d="M453.074,142.117l1.94,5.97l6.277,-0l-5.078,3.69l1.939,5.97l-5.078,-3.69l-5.079,3.69l1.94,-5.97l-5.078,-3.69l6.277,-0l1.94,-5.97Z" style="fill:#1a7ae6;fill-opacity:0.77;"/><path d="M398.084,314.091l1.94,5.97l6.278,-0l-5.079,3.69l1.94,5.97l-5.079,-3.69l-5.078,3.69l1.94,-5.97l-5.079,-3.69l6.278,-0l1.939,-5.97Z" style="fill:#e6a91a;fill-opacity:0.77;"/><path d="M347.984,370.647l1.94,5.97l6.277,0l-5.078,3.69l1.939,5.97l-5.078,-3.689l-5.079,3.689l1.94,-5.97l-5.078,-3.69l6.277,0l1.94,-5.97Z" style="fill:#dae61a;fill-opacity:0.77;"/><path d="M173.373,327.782l1.94,5.971l6.278,-0l-5.079,3.689l1.94,5.971l-5.079,-3.69l-5.078,3.69l1.94,-5.971l-5.079,-3.689l6.278,-0l1.939,-5.971Z" style="fill:#fff;fill-opacity:0.77;"/><path d="M47.673,470.212l1.94,5.97l6.277,0l-5.078,3.69l1.94,5.97l-5.079,-3.69l-5.079,3.69l1.94,-5.97l-5.078,-3.69l6.277,0l1.94,-5.97Z" style="fill:#e6611a;fill-opacity:0.77;"/><path d="M287.994,467.36l1.94,5.971l6.277,-0l-5.078,3.689l1.94,5.971l-5.079,-3.69l-5.079,3.69l1.94,-5.971l-5.078,-3.689l6.277,-0l1.94,-5.971Z" style="fill:#1ae6c1;fill-opacity:0.77;"/><path d="M406.12,24.81l1.939,5.971l6.278,-0l-5.079,3.689l1.94,5.971l-5.078,-3.69l-5.079,3.69l1.94,-5.971l-5.079,-3.689l6.278,-0l1.94,-5.971Z" style="fill:#bf4040;fill-opacity:0.77;"/></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
1
postbox/images/wave.svg
Normal file
1
postbox/images/wave.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1280 129" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M0,129l1280,0l-0,-84.282c-0,0 -322.747,92.92 -640,0c-322.681,-94.51 -640,0 -640,0l0,84.282Z" style="fill:#fff;fill-opacity:0.25;"/></svg>
|
||||
|
After Width: | Height: | Size: 616 B |
|
|
@ -2,7 +2,7 @@
|
|||
/**
|
||||
* Name: Postbox
|
||||
* Description: Adds support for showing Postbox backgrounds but does NOT add an interface for making them (but users can still make them with BBcode)
|
||||
* Version: 1.0
|
||||
* Version: 1.1
|
||||
* Author: Random Penguin <https://gitlab.com/randompenguin>
|
||||
*/
|
||||
|
||||
|
|
@ -14,8 +14,17 @@ function postbox_install()
|
|||
Hook::register('head', __FILE__, 'postbox_head');
|
||||
}
|
||||
function postbox_head(string &$b)
|
||||
{
|
||||
// Add Postbox Styling to Header
|
||||
$box_styles = __DIR__ . '/postbox.min.css';
|
||||
DI::page()->registerStylesheet($box_styles);
|
||||
{
|
||||
/* Check if zen_postbox is active first, only do this if it is not */
|
||||
if (!function_exists('zen_postbox_install')){
|
||||
/* Add Postbox Styling to Header
|
||||
DI::page()->registerStylesheet($path) might load before theme
|
||||
so we will append to $b to make it load much much later
|
||||
*/
|
||||
$path = __DIR__ . '/view/postbox.min.css?v=' . DI::app()::VERSION;
|
||||
if (mb_strpos($path, DI::basePath() . DIRECTORY_SEPARATOR) === 0) {
|
||||
$path = mb_substr($path, mb_strlen(DI::basePath() . DIRECTORY_SEPARATOR));
|
||||
}
|
||||
$b .= '<link rel="stylesheet" href="'.$path.'" media="screen"/>';
|
||||
}
|
||||
}
|
||||
0
postbox/view/.gitkeep
Normal file
0
postbox/view/.gitkeep
Normal file
1
postbox/view/postbox.min.css
vendored
Normal file
1
postbox/view/postbox.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
152
postbox/view/sampler.htm
Normal file
152
postbox/view/sampler.htm
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Friendica Postboxes</title>
|
||||
<link rel="stylesheet" href="postbox.min.css"/>
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
clear: both;
|
||||
}
|
||||
body > div {
|
||||
height: 300px !important;
|
||||
width: 300px !important;
|
||||
border-radius: 50px;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
div > div {
|
||||
height: 300px !important;
|
||||
}
|
||||
.code {
|
||||
background-color: black;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
color: lime;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Friendica Postboxes</h1>
|
||||
|
||||
<p><strong>What are "Postboxes"?</strong> Facebook has a feature offering colorful backgrounds
|
||||
for short, text-only posts. Postboxes for Friendica offers something similar, but it is not
|
||||
limited to short or text-only posts (though it still works best with those). Friendica's gradient and
|
||||
pattern backgrounds, however, are accomplished with pure CSS (no images), and are
|
||||
therefore very fast and lightweight.</p>
|
||||
|
||||
<p><strong>How to use:</strong> Put your text/content inside the "class" BBcode like so:
|
||||
<span class="code">[class=postbox-name]Your Text Here[/class]</span><br/>
|
||||
Type the name in all lowercase letters with no spaces. Each sample below shows the name.
|
||||
Some also show the old names in parenthesis, which are still valid and have been mapped
|
||||
to the new styles. If a style is not available on a given server, or if you misspell the name,
|
||||
the "default" style will be used.</p>
|
||||
|
||||
<p><strong>Limitations:</strong> Requires either using the "Frio" theme with the "Bookface" scheme, or
|
||||
the "Postbox" add-on be installed, or the "Zen Postbox" add-on be installed. Postboxes shared to servers
|
||||
without them see only the un-styled content fo the Postbox, this includes other platforms like Mastodon,
|
||||
Bluesky, Tumblr, etc. <strong>Note that there are currently issues with how Postboxes display
|
||||
in posts shared to Diaspora and Hubzilla.</strong></p>
|
||||
|
||||
<p><strong style="color:red;">The animated backgrounds shown below are only available if either the "Postbox" or "Zen Postbox"
|
||||
add-on is installed on the server.</strong></p>
|
||||
|
||||
<h2>Solid Colors</h2>
|
||||
<div><div class="postbox-undefined">Default</div></div>
|
||||
<div><div class="postbox-black">Black</div></div>
|
||||
<div><div class="postbox-cornflowerblue">CornflowerBlue (Blue)</div></div>
|
||||
<div><div class="postbox-darkblue">DarkBlue (Ocean)</div></div>
|
||||
<div><div class="postbox-darkgrey">DarkGrey</div></div>
|
||||
<div><div class="postbox-darkorange">DarkOrange (Orange)</div></div>
|
||||
<div><div class="postbox-darkred">DarkRed</div></div>
|
||||
<div><div class="postbox-darkslateblue">DarkSlateBlue</div></div>
|
||||
<div><div class="postbox-forestgreen">ForestGreen (Forest)</div></div>
|
||||
<div><div class="postbox-gold">Gold</div></div>
|
||||
<div><div class="postbox-goldenrod">Goldenrod</div></div>
|
||||
<div><div class="postbox-honeydew">Honeydew</div></div>
|
||||
<div><div class="postbox-hotpink">Hotpink</div></div>
|
||||
<div><div class="postbox-lavender">Lavender</div></div>
|
||||
<div><div class="postbox-lightpink">LightPink</div></div>
|
||||
<div><div class="postbox-lightyellow">LightYellow</div></div>
|
||||
<div><div class="postbox-limegreen">LimeGreen (Green)</div></div>
|
||||
<div><div class="postbox-lightsalmon">LightSalmon (Salmon)</div></div>
|
||||
<div><div class="postbox-mediumaquamarine">MediumAquaMarine</div></div>
|
||||
<div><div class="postbox-mediumslateblue">MediumSlateBlue</div></div>
|
||||
<div><div class="postbox-mediumvioletred">MediumVioletRed</div></div>
|
||||
<div><div class="postbox-mintcream">MintCream</div></div>
|
||||
<div><div class="postbox-olivedrab">OliveDrab</div></div>
|
||||
<div><div class="postbox-palegreen">PaleGreen</div></div>
|
||||
<div><div class="postbox-peachpuff">PeachPuff</div></div>
|
||||
<div><div class="postbox-pink">Pink</div></div>
|
||||
<div><div class="postbox-purple">Purple</div></div>
|
||||
<div><div class="postbox-red">Red</div></div>
|
||||
<div><div class="postbox-seagreen">SeaGreen</div></div>
|
||||
<div><div class="postbox-sienna">Sienna</div></div>
|
||||
<div><div class="postbox-skyblue">SkyBlue</div></div>
|
||||
<div><div class="postbox-thistle">Thistle</div></div>
|
||||
<div><div class="postbox-violet">Violet</div></div>
|
||||
<div><div class="postbox-whitesmoke">WhiteSmoke</div></div>
|
||||
<div><div class="postbox-yellowgreen">YellowGreen</div></div>
|
||||
|
||||
<h2>Gradients</h2>
|
||||
<div><div class="postbox-aurora">Aurora</div></div>
|
||||
<div><div class="postbox-bluegray">BlueGray</div></div>
|
||||
<div><div class="postbox-graygrey">GrayGrey (DarkGray)</div></div>
|
||||
<div><div class="postbox-grayblack">GrayBlack</div></div>
|
||||
<div><div class="postbox-greengray">GreenGray</div></div>
|
||||
<div><div class="postbox-lavendergray">LavenderGray</div></div>
|
||||
<div><div class="postbox-minty">Minty</div></div>
|
||||
<div><div class="postbox-mintgray">MintGray</div></div>
|
||||
<div><div class="postbox-rainbow">Rainbow</div></div>
|
||||
<div><div class="postbox-redblue">RedBlue</div></div>
|
||||
<div><div class="postbox-sherbet">Sherbet (Sherbert)</div></div>
|
||||
<div><div class="postbox-spectrum">Spectrum</div></div>
|
||||
<div><div class="postbox-strawberrycream">StrawberryCream</div></div>
|
||||
<div><div class="postbox-sunset">Sunset</div></div>
|
||||
<div><div class="postbox-tealblue">TealBlue</div></div>
|
||||
<div><div class="postbox-tealgray">TealGray</div></div>
|
||||
<div><div class="postbox-violets">Violets</div></div>
|
||||
<div><div class="postbox-violetblue">VioletBlue</div></div>
|
||||
|
||||
<h2>Patterns</h2>
|
||||
<div><div class="postbox-blueprint">Blueprint</div></div>
|
||||
<div><div class="postbox-birds">Birds</div></div>
|
||||
<div><div class="postbox-checkered">Checkered</div></div>
|
||||
<div><div class="postbox-cubes">Cubes</div></div>
|
||||
<div><div class="postbox-lemonlime">LemonLime</div></div>
|
||||
<div><div class="postbox-gingham">Gingham</div></div>
|
||||
<div><div class="postbox-grid">Grid</div></div>
|
||||
<div><div class="postbox-hearts">Hearts</div></div>
|
||||
<div><div class="postbox-honeycomb">Honeycomb</div></div>
|
||||
<div><div class="postbox-notebook">Notebook</div></div>
|
||||
<div><div class="postbox-plaid">Plaid</div></div>
|
||||
<div><div class="postbox-polkadots">Polkadots</div></div>
|
||||
<div><div class="postbox-shadedots">ShadeDots</div></div>
|
||||
<div><div class="postbox-shadowbox">Shadowbox</div></div>
|
||||
<div><div class="postbox-stars">Stars</div></div>
|
||||
<div><div class="postbox-warpgrid">WarpGrid</div></div>
|
||||
<div><div class="postbox-wavy">Wavy</div></div>
|
||||
|
||||
<h2>Animated</h2>
|
||||
<p style="clear:both;">These are only available if either the "Postbox" or "Zen Postbox"
|
||||
add-on is installed on the Friendica server.</p>
|
||||
<div><div class="postbox-anigradient">Anigradient</div></div>
|
||||
<div><div class="postbox-blob">Blob</div></div>
|
||||
<div><div class="postbox-colorfade">ColorFade</div></div>
|
||||
<div><div class="postbox-gridrunner">GridRunner</div></div>
|
||||
<div><div class="postbox-heartbeat">Heartbeat</div></div>
|
||||
<div><div class="postbox-moonrise">Moonrise</div></div>
|
||||
<div><div class="postbox-rainy">Rainy</div></div>
|
||||
<div><div class="postbox-rocket">Rocket</div></div>
|
||||
<div><div class="postbox-snowy">Snowy</div></div>
|
||||
<div><div class="postbox-sunrise">Sunrise</div></div>
|
||||
<div><div class="postbox-waves">Waves</div></div>
|
||||
</body>
|
||||
</html>
|
||||
0
postbox/view/src/.gitkeep
Normal file
0
postbox/view/src/.gitkeep
Normal file
991
postbox/view/src/postbox.css
Normal file
991
postbox/view/src/postbox.css
Normal file
|
|
@ -0,0 +1,991 @@
|
|||
/* Post Backgrounds
|
||||
================
|
||||
Solid and Gradient backgrounds with larger text
|
||||
to grab reader attention
|
||||
*/
|
||||
[class^="postbox-"]{
|
||||
display: table-cell;
|
||||
height: 350px;
|
||||
width: 1000px;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
padding: 50px 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
[class^="postbox-"] a {
|
||||
color: inherit !important;
|
||||
}
|
||||
[class^="postbox-"]:hover a,
|
||||
[class^="postbox-"]:focus a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
[class^="postbox-"]:hover,
|
||||
[class^="postbox-"]:hover::before,
|
||||
[class^="postbox-"]:hover::after,
|
||||
[class^="postbox-"]:active,
|
||||
[class^="postbox-"]:active::before,
|
||||
[class^="postbox-"]:active::after {
|
||||
animation: none;
|
||||
}
|
||||
/* SOLID COLOR BACKGROUNDS
|
||||
=======================
|
||||
*/
|
||||
.postbox-black {
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
}
|
||||
.postbox-cornflowerblue, .postbox-blue {
|
||||
background-color: #6495ed;
|
||||
color: white;
|
||||
}
|
||||
.postbox-darkblue, .postbox-ocean {
|
||||
background-color: #00008b;
|
||||
color: white;
|
||||
}
|
||||
.postbox-darkgrey {
|
||||
background-color: #a9a9a9;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.postbox-darkorange, .postbox-orange {
|
||||
background-color: #ff8c00;
|
||||
color: black;
|
||||
}
|
||||
.postbox-darkred {
|
||||
background-color: #8b0000;
|
||||
color: white;
|
||||
}
|
||||
.postbox-darkslateblue {
|
||||
background-color: #483d8b;
|
||||
color: white;
|
||||
}
|
||||
.postbox-forestgreen, .postbox-forest {
|
||||
background-color: #228b22;
|
||||
color: white;
|
||||
}
|
||||
.postbox-gold {
|
||||
background-color: #ffd700;
|
||||
color: black;
|
||||
}
|
||||
.postbox-goldenrod {
|
||||
background-color: #daa520;
|
||||
color: white;
|
||||
}
|
||||
.postbox-honeydew {
|
||||
background-color: #f0fff0;
|
||||
color: black;
|
||||
}
|
||||
.postbox-hotpink {
|
||||
background-color: #ff69b4;
|
||||
color: white;
|
||||
}
|
||||
.postbox-lavender {
|
||||
background-color: #e6e6fa;
|
||||
color: purple;
|
||||
}
|
||||
.postbox-lightpink {
|
||||
background-color: #ffb6c1;
|
||||
color: black;
|
||||
}
|
||||
.postbox-lightyellow {
|
||||
background-color: #ffffe0;
|
||||
color: black;
|
||||
}
|
||||
.postbox-limegreen, .postbox-green {
|
||||
background-color: #32cd32;
|
||||
color: white;
|
||||
}
|
||||
.postbox-lightsalmon, .postbox-salmon {
|
||||
background-color: #ffa07a;
|
||||
color: black;
|
||||
}
|
||||
.postbox-mediumaquamarine {
|
||||
background-color: #66CDAA;
|
||||
color: white;
|
||||
}
|
||||
.postbox-mediumslateblue {
|
||||
background-color: #7b68ee;
|
||||
color: white;
|
||||
}
|
||||
.postbox-mediumvioletred {
|
||||
background-color: #c71585;
|
||||
color: white;
|
||||
}
|
||||
.postbox-mintcream {
|
||||
background-color: #f5fffa;
|
||||
color: black;
|
||||
}
|
||||
.postbox-olivedrab {
|
||||
background-color: #6b8e23;
|
||||
color: white;
|
||||
}
|
||||
.postbox-palegreen {
|
||||
background-color: #98fb98;
|
||||
color: black;
|
||||
}
|
||||
.postbox-peachpuff {
|
||||
background-color: #ffdab9;
|
||||
color: black;
|
||||
}
|
||||
.postbox-pink {
|
||||
background-color: #ffc0cb;
|
||||
color: black;
|
||||
}
|
||||
.postbox-purple {
|
||||
background-color: #800080;
|
||||
color: white;
|
||||
}
|
||||
.postbox-red {
|
||||
background-color: #ff0000;
|
||||
color: white;
|
||||
}
|
||||
.postbox-seagreen {
|
||||
background-color: #2e8b57;
|
||||
color: white;
|
||||
}
|
||||
.postbox-sienna {
|
||||
background-color: #a0522d;
|
||||
color: white;
|
||||
}
|
||||
.postbox-skyblue {
|
||||
background-color: #87ceeb;
|
||||
color: black;
|
||||
}
|
||||
.postbox-thistle {
|
||||
background-color: #d8bfd8;
|
||||
color: black;
|
||||
}
|
||||
.postbox-violet {
|
||||
background-color: #ee82ee;
|
||||
color: lavender;
|
||||
}
|
||||
.postbox-whitesmoke {
|
||||
background-color: #f5f5f5;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.postbox-yellowgreen {
|
||||
background-color: #9acd32;
|
||||
color: white;
|
||||
}
|
||||
/* GRADIENT BACKGROUNDS
|
||||
====================
|
||||
*/
|
||||
.postbox-aurora {
|
||||
background-size: 100% 100%;
|
||||
background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
|
||||
background-image:
|
||||
radial-gradient(18% 28% at 24% 50%, #CEFAFFFF 7%, #073AFF00 100%),
|
||||
radial-gradient(18% 28% at 18% 71%, #FFFFFF59 6%, #073AFF00 100%),
|
||||
radial-gradient(70% 53% at 36% 76%, #73F2FFFF 0%, #073AFF00 100%),
|
||||
radial-gradient(42% 53% at 15% 94%, #FFFFFFFF 7%, #073AFF00 100%),
|
||||
radial-gradient(42% 53% at 34% 72%, #FFFFFFFF 7%, #073AFF00 100%),
|
||||
radial-gradient(18% 28% at 35% 87%, #FFFFFFFF 7%, #073AFF00 100%),
|
||||
radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%, #073AFF00 100%),
|
||||
radial-gradient(21% 37% at 72% 23%, #D3FF6D9C 24%, #073AFF00 100%),
|
||||
radial-gradient(35% 56% at 91% 74%, #8A4FFFF5 9%, #073AFF00 100%),
|
||||
radial-gradient(74% 86% at 67% 38%, #6DFFAEF5 24%, #073AFF00 100%),
|
||||
linear-gradient(125deg, #4EB5FFFF 1%, #4C00FCFF 100%);
|
||||
}
|
||||
.postbox-bluegray {
|
||||
background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%);
|
||||
color: black;
|
||||
}
|
||||
.postbox-graygrey, .postbox-darkgray {
|
||||
background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102));
|
||||
color: white;
|
||||
}
|
||||
.postbox-grayblack {
|
||||
background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29));
|
||||
color: white;
|
||||
}
|
||||
.postbox-greengray {
|
||||
background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%);
|
||||
color: black;
|
||||
}
|
||||
.postbox-lavendergray {
|
||||
background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%);
|
||||
color: black;
|
||||
}
|
||||
.postbox-minty {
|
||||
background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169));
|
||||
color: black;
|
||||
}
|
||||
.postbox-mintgray {
|
||||
background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169));
|
||||
color: black;
|
||||
}
|
||||
.postbox-rainbow {
|
||||
background: linear-gradient(135deg, #ff0000 0%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 100%);
|
||||
color: white;
|
||||
text-shadow: 0 0 3px black, 3px 3px 3px black;
|
||||
}
|
||||
.postbox-redblue {
|
||||
background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199));
|
||||
color: white;
|
||||
}
|
||||
.postbox-sherbert, .postbox-sherbet {
|
||||
background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);
|
||||
color: black;
|
||||
}
|
||||
.postbox-spectrum {
|
||||
background: linear-gradient(to right, darkred 0%,#ff0000 5%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 95%, darkmagenta 100%);
|
||||
color: white;
|
||||
text-shadow: 0 0 3px black, 3px 3px 3px black;
|
||||
}
|
||||
.postbox-strawberrycream {
|
||||
background: linear-gradient(to bottom, #fff2cd 0%,#ffa0ac 20%,#fea1ac 20%,#ff84a3 28%,#fd4f8c 40%,#d91b65 79%,#d61a64 79%,#c11a5f 100%);
|
||||
color: white;
|
||||
}
|
||||
.postbox-sunset {
|
||||
background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%);
|
||||
color: white;
|
||||
}
|
||||
.postbox-tealblue {
|
||||
background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%);
|
||||
color: white;
|
||||
}
|
||||
.postbox-tealgray {
|
||||
background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%);
|
||||
color: black;
|
||||
}
|
||||
.postbox-violets {
|
||||
background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253));
|
||||
color: white;
|
||||
}
|
||||
.postbox-violetblue {
|
||||
background: linear-gradient(to bottom, #cc258f 0%,#9643b5 25%,#626cdd 48%,#629aed 71%,#80ebff 100%);
|
||||
color: white;
|
||||
}
|
||||
/* PATTERN BACKGROUNDS
|
||||
===================
|
||||
*/
|
||||
.postbox-blueprint {
|
||||
background-color: blue;
|
||||
background-image:
|
||||
linear-gradient(lightblue 2px, transparent 2px),
|
||||
linear-gradient(90deg, lightblue 2px, transparent 2px),
|
||||
linear-gradient(lightblue 1px, transparent 1px),
|
||||
linear-gradient(90deg, lightblue 1px, transparent 1px);
|
||||
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
|
||||
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
font-family: 'Bradley Hand', 'Comic-Sans MS', sans-serif !important;
|
||||
text-shadow: -2px 2px 2px midnightblue, 2px 2px 2px blue, 0 0 20px blue;
|
||||
box-shadow: inset 0 50px 100px black;
|
||||
}
|
||||
.postbox-birds {
|
||||
background:
|
||||
radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(2*50px) calc(-1*calc(1.5*50px + 18.75px)),
|
||||
radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(-1*50px) calc(calc(1.5*50px + 18.75px)/-2),
|
||||
radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 0 calc(1.5*50px + 18.75px),
|
||||
radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 50px calc(calc(1.5*50px + 18.75px)/ 2),
|
||||
linear-gradient(#BCE4FE 50%,#FEE993 0);
|
||||
background-size: calc(4*50px) calc(1.5*50px + 18.75px);
|
||||
}
|
||||
.postbox-checkered {
|
||||
background-image: repeating-conic-gradient(#000000 0% 25%, #AD0505 0% 50%);
|
||||
background-position: 0 0, 32px 32px;
|
||||
background-size: 64px 64px;
|
||||
background-color: #AD0505;
|
||||
color: white;
|
||||
}
|
||||
.postbox-cubes {
|
||||
background-image: linear-gradient(30deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(150deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(30deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(150deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(60deg, #B6AEE580 25%, transparent 25.5%, transparent 75%, #B6AEE580 75%, #B6AEE580), linear-gradient(60deg, #B6AEE580 25%, transparent 25.5%, transparent 75%, #B6AEE580 75%, #B6AEE580);
|
||||
background-size: 100px 175px;
|
||||
background-position: 0 0, 0 0, 50px 87.5px, 50px 87.5px, 0 0, 50px 87.5px;
|
||||
background-color: #E4E4ED;
|
||||
text-shadow: -1px -1px 2px white, 1px 1px 2px white;
|
||||
}
|
||||
|
||||
.postbox-lemonlime {
|
||||
background:
|
||||
radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px), #E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(-1*calc(1.8 * 42px + 10.5px)) 42px,
|
||||
radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px), #04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(1.8 * 42px + 10.5px) calc(-1*42px),
|
||||
radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px), #04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/-2) calc(-1*42px),
|
||||
radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px), #E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/ 2) 42px,
|
||||
linear-gradient(90deg, #E5E500 50%, #04E164 0);
|
||||
background-size: calc(1.8 * 42px + 10.5px) 168px;
|
||||
text-shadow: 1px 1px 5px white, -1px -1px 5px white;
|
||||
font-size: 52px !important;
|
||||
font-size: 42px !important;
|
||||
}
|
||||
.postbox-gingham {
|
||||
background-image: linear-gradient(0deg, rgba(226, 9, 4, 0.6) 0% 25%, rgba(251, 248, 239, 0.6) 25% 75%, rgba(226, 9, 4, 0.6) 75% 100%), linear-gradient(90deg, rgba(226, 9, 4, 0.6) 0% 25%, rgba(251, 248, 239, 0.6) 25% 75%, rgba(226, 9, 4, 0.6) 75% 100% );
|
||||
background-size: 64px 64px,64px 64px;
|
||||
color: white;
|
||||
text-shadow: 0 0 2px black, 3px 3px 5px black;
|
||||
}
|
||||
.postbox-grid {
|
||||
background-image: linear-gradient(#027816 2px, transparent 2px), linear-gradient(to right, #027816 2px, transparent 2px);
|
||||
background-size: 24px 24px;
|
||||
background-color: #000000;
|
||||
color: lime;
|
||||
text-shadow: 0 0 3px black, 3px 3px 5px black, -3px -3px 5px black;
|
||||
}
|
||||
.postbox-hearts {
|
||||
background:
|
||||
radial-gradient(at 80% 80%,#FF6969 25.4%,#0000 26%),
|
||||
radial-gradient(at 20% 80%,#FF6969 25.4%,#0000 26%),
|
||||
conic-gradient(from -45deg at 50% 41%,#FF6969 90deg,#FFACAC 0)
|
||||
21px 0;
|
||||
background-size: 42px 42px;
|
||||
color: white;
|
||||
font-size: 42px !important;
|
||||
text-shadow: 2px 2px 3px darkred;
|
||||
}
|
||||
.postbox-honeycomb {
|
||||
background:
|
||||
radial-gradient(circle farthest-side at 0% 50%,#FBEB00 23.5%,#0000 0)33.6px 48px,
|
||||
radial-gradient(circle farthest-side at 0% 50%,#EDBE03 24%,#0000 0)30.4px 48px,
|
||||
linear-gradient(#FBEB00 14%,#0000 0, #0000 85%,#FBEB00 0)0 0,
|
||||
linear-gradient(150deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,
|
||||
linear-gradient(30deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,
|
||||
linear-gradient(90deg,#EDBE03 2%,#FBEB00 0,#FBEB00 98%,#EDBE03 0%)0 0 #FBEB00;
|
||||
background-size: 64px 96px;
|
||||
background-color: #FBEB00;
|
||||
}
|
||||
.postbox-notebook {
|
||||
background: linear-gradient(to right, transparent 10%, #f7c1c1 10% 10.2%, transparent 10.5%), repeating-linear-gradient(#ebf8e1a2 10%, #b5def0 10%, #b5def0 10.2%, #ebf8e1a2 11%, #ebf8e1a2 18.5%);
|
||||
background-color: #ebf8e1;
|
||||
background-size: 100% 25px, 100% 100%;
|
||||
background-repeat: repeat-y, repeat;
|
||||
font-family: 'Bradley Hand', 'Comic-Sans MS', sans-serif !important;
|
||||
color: #333;
|
||||
}
|
||||
.postbox-plaid {
|
||||
background: repeating-linear-gradient(transparent, transparent 8px, #A19100 8px, #A19100 12px, transparent 12px, transparent 16px, #A19100 12px, #A19100 32px, transparent 32px, transparent 36px, #A19100 36px, #A19100 40px, transparent 40px, transparent 64px), repeating-linear-gradient(90deg, transparent, transparent 8px, #A19100 8px, #A19100 12px, transparent 12px, transparent 16px, #A19100 12px, #A19100 32px, transparent 32px, transparent 36px, #A19100 36px, #A19100 40px, transparent 40px, transparent 64px), #A50000;
|
||||
background-blend-mode: multiply;
|
||||
background-color: #A50000;
|
||||
color: white;
|
||||
text-shadow: 0 0 2px black, 3px 3px 5px black;
|
||||
}
|
||||
.postbox-polkadots {
|
||||
background-image: radial-gradient(#87D9E5 2px, transparent 2px), radial-gradient(#87D9E5 2px, transparent 2px);
|
||||
background-size: 32px 32px;
|
||||
background-position: 0 0, 16px 16px;
|
||||
background-color: #1A8FE5;
|
||||
color: white;
|
||||
text-shadow: 3px 3px 5px darkblue;
|
||||
}
|
||||
.postbox-shadedots {
|
||||
background:
|
||||
conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(2*50px) calc(50px/9.5),
|
||||
conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(50px/9.5) calc(2*50px),
|
||||
repeating-conic-gradient(#0000 0 25%,#0CBEFE 0 50%)
|
||||
50px 0 /calc(2*50px) calc(2*50px),
|
||||
radial-gradient(50% 50%,#1872A2 98%,#0CBEFE)
|
||||
0 0/50px 50px;
|
||||
color: white;
|
||||
text-shadow: 3px 3px 3px darkblue;
|
||||
}
|
||||
.postbox-shadowbox {
|
||||
background-image: radial-gradient(rgba(0,0,0,.2) 5px, transparent 2px), radial-gradient(ellipse at center, #969faa 0%,#6d7782 35%,#6c7680 35%,#28343b 99%);
|
||||
background-size: 40px 40px, 100% 100%;
|
||||
font-family: Impact, sans-serif !important;
|
||||
text-transform: uppercase;
|
||||
font-size: 42px !important;
|
||||
line-height: 52px !important;
|
||||
color: #ddd;
|
||||
text-shadow: 0px 5px 2px rgba(0,0,0,.5), 0px -1px 0px white;
|
||||
}
|
||||
.postbox-stars {
|
||||
background:
|
||||
conic-gradient(from 162deg at calc(42px * .5) calc(42px * .68), #0D4975 36deg, #0000 0),
|
||||
conic-gradient(from 18deg at calc(42px * .19) calc(42px * .59), #0D4975 36deg, #0000 0),
|
||||
conic-gradient(from 306deg at calc(42px * .81) calc(42px * .59), #0D4975 36deg, #0000 0),
|
||||
#000000;
|
||||
background-position: 0 calc(42px * 0.35);
|
||||
background-size: calc(42px + 1.7px) calc(42px + 1.7px);
|
||||
color: white;
|
||||
}
|
||||
.postbox-warpgrid {
|
||||
background:
|
||||
radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%) 0 calc(128px/2),
|
||||
radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#027816 54% 57%,#0000 59%) calc(128px/2) 0,
|
||||
radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%),
|
||||
radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#027816 54% 57%,#0000 59%),
|
||||
#000000;
|
||||
background-size: calc(128px/4.667) 128px,128px calc(128px/4.667);
|
||||
color: lime;
|
||||
text-shadow: 0 0 3px black, 3px 3px 5px black, -3px -3px 5px black;
|
||||
}
|
||||
.postbox-wavy {
|
||||
background: radial-gradient(at bottom right, #57D2FF 0, #57D2FF 12.5px, #57D2FF33 12.5px, #57D2FF33 25px, #57D2FFBF 25px, #57D2FFBF 37.5px, #57D2FF40 37.5px, #57D2FF40 50px, #57D2FF4D 50px, #57D2FF4D 62.5px, #57D2FFBF 62.5px, #57D2FFBF 75px, #57D2FF33 75px, #57D2FF33 87.5px, transparent 87.5px, transparent 100px), radial-gradient(at top left, transparent 0, transparent 12.5px, #57D2FF33 12.5px, #57D2FF33 25px, #57D2FFBF 25px, #57D2FFBF 37.5px, #57D2FF4D 37.5px, #57D2FF4D 50px, #57D2FF40 50px, #57D2FF40 62.5px, #57D2FFBF 62.5px, #57D2FFBF 75px, #57D2FF33 75px, #57D2FF33 87.5px, #57D2FF 87.5px, #57D2FF 100px, transparent 100px, transparent 250px);
|
||||
background-blend-mode: multiply;
|
||||
background-size: 100px 100px, 100px 100px;
|
||||
background-color: #E4E4ED;
|
||||
color: darkblue;
|
||||
}
|
||||
|
||||
/* ANIMATED */
|
||||
|
||||
.postbox-anigradient {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: 300% 300%;
|
||||
background-image: linear-gradient(-45deg, yellow 0%, yellow 25%, yellow 51%, #ff357f 100%);
|
||||
-webkit-animation: anigrad 20s ease infinite;
|
||||
animation: anigrad 20s ease infinite;
|
||||
}
|
||||
@-webkit-keyframes anigrad {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
@keyframes anigrad {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-blob {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: red;
|
||||
z-index: 0;
|
||||
color: white;
|
||||
}
|
||||
.postbox-blob::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 50%;
|
||||
top: -5%;
|
||||
width: 90%;
|
||||
height: 120%;
|
||||
margin-left: -45%;
|
||||
background: rgba(120, 60, 240, 0.35);
|
||||
box-shadow: inset 0 0 50px rgb(120,60,240);
|
||||
border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
|
||||
will-change: border-radius, transform, opacity;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
animation: blobby 5s linear infinite;
|
||||
}
|
||||
@keyframes blobby {
|
||||
0%,100%{
|
||||
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
|
||||
transform: translate3d(0,0,0) rotateZ(0.01deg);
|
||||
}
|
||||
34%{
|
||||
border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
|
||||
transform: translate3d(0,5px,0) rotateZ(0.01deg);
|
||||
}
|
||||
50%{
|
||||
transform: translate3d(0,0,0) rotateZ(0.01deg);
|
||||
}
|
||||
67%{
|
||||
border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
|
||||
transform: translate3d(0,-3px,0) rotateZ(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-colorfade {
|
||||
background: #33CCCC; /* Fallback */
|
||||
animation: colorfade 9s infinite linear;
|
||||
}
|
||||
@keyframes colorfade {
|
||||
0% { background: #33CCCC; }
|
||||
20% { background: #33CC36; }
|
||||
40% { background: #B8CC33; }
|
||||
60% { background: #FCCA00; }
|
||||
80% { background: #33CC36; }
|
||||
100% { background: #33CCCC; }
|
||||
}
|
||||
|
||||
.postbox-gridrunner {
|
||||
background-image: linear-gradient(rgb(93, 63, 218), rgb(252, 54, 253));
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
transform: perspective;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
}
|
||||
.postbox-gridrunner::after{
|
||||
content: '';
|
||||
background-image:
|
||||
linear-gradient(blue 2px, transparent 2px),
|
||||
linear-gradient(to right,blue 2px, transparent 2px);
|
||||
background-size: 24px 24px;
|
||||
background-color: transparent;
|
||||
color: lime;
|
||||
text-shadow: 0 0 3px black, 3px 3px 5px black, -3px -3px 5px black;
|
||||
display: block;
|
||||
-webkit-transform: perspective(300px) rotate3d(0,1,.5,3.142rad);
|
||||
transform: perspective(300px) rotate3d(0,1,.5,3.142rad);
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background-position: 0px 100px;
|
||||
animation: gridrun 120s linear infinite;
|
||||
}
|
||||
@keyframes gridrun {
|
||||
from {
|
||||
background-position: 0px 100px;
|
||||
}
|
||||
to {
|
||||
background-position: 0px 10000px;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-heartbeat {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
background-color: hotpink;
|
||||
color: white;
|
||||
}
|
||||
.postbox-heartbeat::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: -12px 0 0 -12px;
|
||||
background: red;
|
||||
-webkit-clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 10 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
|
||||
clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
|
||||
transform: scale(5);
|
||||
box-shadow: inset 0 0 10px darkred;
|
||||
z-index: -1;
|
||||
animation: heartbeat 5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes heartbeat {
|
||||
0% {
|
||||
transform: scale(5);
|
||||
}
|
||||
50% {
|
||||
transform: scale(8);
|
||||
}
|
||||
100% {
|
||||
transform: scale(5);
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-moonrise {
|
||||
background: url('../images/stars.svg');
|
||||
background-color: black;
|
||||
background-repeat: repeat;
|
||||
background-position: 0px 100%;
|
||||
background-size: 200px 200px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
color: yellow;
|
||||
text-shadow: 0 0 3px blue;
|
||||
animation: moonrise 20s linear infinite;
|
||||
}
|
||||
.postbox-moonrise::before {
|
||||
content: '';
|
||||
animation: moonrise1 20s linear infinite;
|
||||
animation-delay: 0s;
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
bottom: 75%;
|
||||
left: 75%;
|
||||
margin-left: -50px;
|
||||
z-index: -1;
|
||||
border-radius: 100%;
|
||||
box-shadow: 20px 20px 0px #eee;
|
||||
}
|
||||
.postbox-moonrise::after {
|
||||
animation: moonrise2 20s linear infinite;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 150%;
|
||||
height: 25%;
|
||||
bottom: -12%;
|
||||
position: absolute;
|
||||
background-color: #333;
|
||||
left: -25%;
|
||||
z-index: -1;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 -50px 200px #8589bf;
|
||||
}
|
||||
@keyframes moonrise {
|
||||
0% {
|
||||
background-color: midnightblue;
|
||||
background-position: 0px 100%;
|
||||
}
|
||||
100% {
|
||||
background-color: black;
|
||||
background-position: 100px 0%;
|
||||
}
|
||||
}
|
||||
@keyframes moonrise1 {
|
||||
0% {
|
||||
bottom: -25%;
|
||||
left: 5%;
|
||||
}
|
||||
100% {
|
||||
bottom: 100%;
|
||||
left: 75%;
|
||||
}
|
||||
}
|
||||
@keyframes moonrise2 {
|
||||
0% {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
50% {
|
||||
background-color: #01530e;
|
||||
}
|
||||
100% {
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-rainy {
|
||||
position: relative;
|
||||
color: white;
|
||||
background: none;
|
||||
background-color: black;
|
||||
background-image: url("../images/rain.svg"), url("../images/rain.svg");
|
||||
background-size: 500px 500px, 250px 250px;
|
||||
-webkit-animation: rainy 5s linear infinite;
|
||||
-moz-animation: rainy 5s linear infinite;
|
||||
-o-animation: rainy 5s linear infinite;
|
||||
-ms-animation: rainy 5s linear infinite;
|
||||
animation: rainy 5s linear infinite;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
.postbox-rainy::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 1;
|
||||
background-image: url("../images/rain.svg");
|
||||
background-size: 900px 900px;
|
||||
background-position: top left;
|
||||
-webkit-animation: rainy 5s linear infinite;
|
||||
-moz-animation: rainy 5s linear infinite;
|
||||
-o-animation: rainy 5s linear infinite;
|
||||
-ms-animation: rainy 5s linear infinite;
|
||||
animation: rainy 5s linear infinite;
|
||||
}
|
||||
.postbox-rainy:hover::after,
|
||||
.postbox-rainy:active::after {
|
||||
z-index: -1;
|
||||
}
|
||||
@-moz-keyframes rainy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 0px 750px, 0px 600px;
|
||||
}
|
||||
100% {
|
||||
background-position: 0px 1000px, 0px 800px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rainy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 0px 750px, 0px 600px;
|
||||
}
|
||||
100% {
|
||||
background-position: 0px 1000px, 0px 800px;
|
||||
}
|
||||
}
|
||||
@-o-keyframes rainy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 0px 750px, 0px 600px;
|
||||
}
|
||||
100% {
|
||||
background-position: 0px 1000px, 0px 800px;
|
||||
}
|
||||
}
|
||||
@keyframes rainy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 0px 750px, 0px 600px;
|
||||
}
|
||||
100% {
|
||||
background-position: 0px 1000px, 0px 800px;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-rocket {
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background: url("../images/stars.svg"),url("../images/stars.svg");
|
||||
background-color:black;
|
||||
background-size: 200px, 400px;
|
||||
background-position: 0px 0px, 100px 100px;
|
||||
animation: starfield 100s linear infinite;
|
||||
overflow: hidden;
|
||||
}
|
||||
.postbox-rocket::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0; left: 0;
|
||||
background: url("../images/rocketship.svg");
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
animation: rocket 15s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
@keyframes starfield {
|
||||
from {
|
||||
background-position: 0px 0px, 100px 100px;
|
||||
}
|
||||
to {
|
||||
background-position: -1000px 1000px, -10000px 10000px;
|
||||
}
|
||||
}
|
||||
@keyframes rocket {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
z-index: 1;
|
||||
}
|
||||
50% {
|
||||
z-index: 1;
|
||||
}
|
||||
51% {
|
||||
z-index: -1;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-snowy {
|
||||
color: white;
|
||||
position: relative;
|
||||
background: none;
|
||||
background-color: darkblue;
|
||||
background-image: url("../images/snow.svg"),url("../images/snow.svg");
|
||||
background-size: 500px 500px, 250px 250px, 125px 125px;
|
||||
-webkit-animation: snowy 9s linear infinite;
|
||||
-moz-animation: snowy 9s linear infinite;
|
||||
-o-animation: snowy 9s linear infinite;
|
||||
-ms-animation: snowy 9s linear infinite;
|
||||
animation: snowy 9s linear infinite;
|
||||
}
|
||||
@-moz-keyframes snowy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 325px 750px, 275px 600px, -5px 150px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 1000px, 400px 800px, 0px 300px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes snowy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 325px 750px, 275px 600px, -5px 150px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 1000px, 400px 800px, 0px 300px;
|
||||
}
|
||||
}
|
||||
@-o-keyframes snowy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 325px 750px, 275px 600px, -5px 150px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 1000px, 400px 800px, 0px 300px;
|
||||
}
|
||||
}
|
||||
@keyframes snowy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 325px 750px, 275px 600px, -5px 150px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 1000px, 400px 800px, 0px 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-sunrise {
|
||||
background: lightblue;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
text-shadow: 0 0 3px black;
|
||||
}
|
||||
.postbox-sunrise::before {
|
||||
content: '';
|
||||
animation: sunrise 30s linear infinite;
|
||||
animation-delay: 0s;
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
bottom: -25%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
z-index: -1;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 20px white;
|
||||
}
|
||||
.postbox-sunrise::after {
|
||||
animation: sunrise2 30s linear infinite;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 150%;
|
||||
height: 25%;
|
||||
bottom: -12%;
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
left: -25%;
|
||||
z-index: -1;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 -50px 400px orange, 0 -100px 300px yellow;
|
||||
}
|
||||
@keyframes sunrise {
|
||||
0% {
|
||||
bottom: -50%;
|
||||
background-color: gold;
|
||||
box-shadow: 0 0 20px gold;
|
||||
}
|
||||
50% {
|
||||
background-color: yellow;
|
||||
box-shadow: 0 0 20px yellow;
|
||||
}
|
||||
100% {
|
||||
bottom: 100%;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 20px white;
|
||||
}
|
||||
}
|
||||
@keyframes sunrise2 {
|
||||
0% {
|
||||
background-color: darkgreen;
|
||||
box-shadow: 0 -50px 400px red, 0 -100px 300px orange;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
box-shadow: 0 -50px 300px orange, 0 -100px 200px yellow;
|
||||
}
|
||||
100% {
|
||||
background-color: lightgreen;
|
||||
box-shadow: 0 -50px 200px white, 0 -100px 100px lightblue;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-waves {
|
||||
position: relative;
|
||||
background: url('../images/wave.svg'), url('../images/wave.svg');
|
||||
background-size: 100% 15%, 100% 20%;
|
||||
background-color: #3586ff;
|
||||
background-position: 0px 100%, 500px 100%;
|
||||
background-repeat: repeat-x;
|
||||
animation: wave 30s linear infinite;
|
||||
animation-delay: 5s;
|
||||
z-index: 0;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
.postbox-waves::before, .postbox-waves::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
background: url('../images/wave.svg');
|
||||
background-repeat: repeat-x;
|
||||
background-position: bottom left;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.postbox-waves::before {
|
||||
animation: wave1 40s linear infinite;
|
||||
}
|
||||
.postbox-waves::after {
|
||||
animation: wave2 60s linear infinite;
|
||||
bottom: -20px;
|
||||
}
|
||||
@keyframes wave {
|
||||
0% {
|
||||
background-position: 0px 100%, 500px 100%;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 100%, -1000px 100%;
|
||||
}
|
||||
}
|
||||
@keyframes wave1 {
|
||||
0% {
|
||||
background-position-x: 0px;
|
||||
bottom: 0;
|
||||
}
|
||||
50% {
|
||||
bottom: -20px;
|
||||
}
|
||||
100% {
|
||||
background-position-x: 1000px;
|
||||
bottom: 0px
|
||||
}
|
||||
}
|
||||
@keyframes wave2 {
|
||||
0% {
|
||||
background-position-x: 0px;
|
||||
bottom: -20px;
|
||||
}
|
||||
50% {
|
||||
bottom: 0px;
|
||||
}
|
||||
100% {
|
||||
background-position-x: -1000px;
|
||||
bottom: -20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,8 @@ Postbox color backgrounds are similar to a Facebook feature for text-only posts,
|
|||
|
||||
This add-on also adds support for displaying Postbox content in all feeds no matter what theeme is in use.
|
||||
|
||||
**Animated backgrounds are ONLY available on servers that have either the _Postbox_ or _Zen Postbox_ add-on installed**
|
||||
|
||||
_**Note**: It has "zen" on the beginning of the name just to make the add-on load AFTER other Jot Plugins. In particular the "Smileybutton" add-on which has a typo that clears any Jot Plugins that load before it._
|
||||
|
||||
## Getting started
|
||||
|
|
@ -24,6 +26,8 @@ _**Note**: It has "zen" on the beginning of the name just to make the add-on loa
|
|||
|
||||
If no text is selected in the editor a Postbox will be appeneded to the text area with "..." for content. Replace the "..." with your text, etc.
|
||||
|
||||
There is a visual reference of available styles at: _/addon/postbox/view/sampler.htm_
|
||||
|
||||
While Postbox allows more content than the Facebook version (which is text only), there are limitations due to how Friendica parses BBcode.
|
||||
|
||||
**It is STRONGLY recommended you only use Postboxes with text and emoji.**
|
||||
|
|
@ -64,8 +68,18 @@ If you are using Markdown formatting what you can and can’t put in a Postbox i
|
|||
|
||||
- Postboxes are not shown on other platforms when your post is shared.
|
||||
- Postboxes are not shown in third-party apps (at least none do yet)
|
||||
- Some of the animated backgrounds have glitches in older WebKit browsers
|
||||
- Currently Postbox BBcode is not parsed correctly by either Diaspora or Hubzilla
|
||||
|
||||
## Changelog
|
||||
1.1 (28 April 2025)
|
||||
* Changed names of solid colors to match HTML named colors
|
||||
* Added 24 new solid colors.
|
||||
* Added 5 new gradient backgrounds.
|
||||
* Added 17 new pattern and 11 animated backgrounds.
|
||||
* Fixed load-order for main stylesheet [Issue #1]
|
||||
|
||||
|
||||
1.0 (25 March 2025)
|
||||
* Initial Release for Friendica 'Interrupted Fern' 2024.12
|
||||
|
||||
|
|
|
|||
2
zen_postbox/view/default.min.css
vendored
2
zen_postbox/view/default.min.css
vendored
|
|
@ -1 +1 @@
|
|||
#profile-postbox-wrapper{display:block}#postboxbutton{display:none}.postbox_button>img{height:32px;width:32px;cursor:pointer}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}
|
||||
#profile-postbox-wrapper{display:block}#postboxbutton{display:none;margin-left:10px}.postbox_button>img{height:32px;width:32px;cursor:pointer}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:1px solid #ccc;padding:0;overflow:hidden}div.preview-postbox>button:focus,div.preview-postbox>button:hover{position:relative;z-index:10;transform-origin:center;transform:scale(2)}div.pick-postbox{height:320px!important;width:320px!important;transform-origin:top left;transform:scale(.1)}div.pick-postbox,div.pick-postbox::after,div.pick-postbox::before{animation-play-state:paused}button:focus div.pick-postbox,button:focus div.pick-postbox::after,button:focus div.pick-postbox::before,div.pick-postbox:hover,div.pick-postbox:hover::after,div.pick-postbox:hover::before{animation-play-state:running}
|
||||
2
zen_postbox/view/duepuntozero.min.css
vendored
2
zen_postbox/view/duepuntozero.min.css
vendored
|
|
@ -1 +1 @@
|
|||
#profile-postbox-wrapper{display:block}#postboxbutton{display:none}.postbox_button{height:18px;width:18px;position:relative;left:285px;top:-62px;padding:0;border:0;background:0 0}.postbox_button>img{height:100%;width:100%}div.preview-postbox{border:1px solid #aaa;-moz-border-radius:3px;border-radius:3px;position:relative;left:285px;top:-62px;padding:5px;width:fit-content}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}#profile-jot-plugin-wrapper>div,.jotplugins>div{float:left}#profile-jot-plugin-wrapper::after,.jotplugins::after{content:'';display:block;clear:both}
|
||||
#profile-postbox-wrapper{display:block}#postboxbutton{display:none;margin-left:10px}.postbox_button{height:18px;width:18px;position:relative;left:285px;top:-62px;padding:0;border:0;background:0 0}.postbox_button>img{height:100%;width:100%}div.preview-postbox{border:1px solid #aaa;-moz-border-radius:3px;border-radius:3px;position:relative;padding:5px;width:100%}div.preview-postbox::after{content:'';display:block;clear:both}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}#profile-jot-plugin-wrapper>div,.jotplugins>div{float:left}#profile-jot-plugin-wrapper::after,.jotplugins::after{content:'';display:block;clear:both}div.preview-postbox>button:focus,div.preview-postbox>button:hover{position:relative;z-index:10;transform-origin:center;transform:scale(2)}div.pick-postbox{height:320px!important;width:320px!important;transform-origin:top left;transform:scale(.1)}div.pick-postbox,div.pick-postbox::after,div.pick-postbox::before{animation-play-state:paused}button:focus div.pick-postbox,button:focus div.pick-postbox::after,button:focus div.pick-postbox::before,div.pick-postbox:hover,div.pick-postbox:hover::after,div.pick-postbox:hover::before{animation-play-state:running}
|
||||
2
zen_postbox/view/frio.min.css
vendored
2
zen_postbox/view/frio.min.css
vendored
|
|
@ -1 +1 @@
|
|||
#profile-postbox-wrapper{display:block}#postboxbutton{display:none;position:fixed;background-color:#eee;width:auto;border-radius:8px;padding:10px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.jotplugins #postboxbutton{position:absolute}.postbox_button{border:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.postbox_button>img{height:18px;width:18px;cursor:pointer}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}div.preview-postbox>button:focus>div,div.preview-postbox>button:hover>div{box-shadow:inset 0 0 100px rgba(255,255,255,.2)}#profile-jot-plugin-wrapper>div,.jotplugins>div{float:left}#profile-jot-plugin-wrapper::after,.jotplugins::after{content:'';display:block;clear:both}
|
||||
#profile-postbox-wrapper{display:block}#postboxbutton{display:none;position:fixed;background-color:#eee;width:auto;border-radius:8px;padding:10px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.jotplugins #postboxbutton{position:absolute}.postbox_button{border:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.postbox_button>img{height:18px;width:18px;cursor:pointer}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}div.preview-postbox>button:focus>div,div.preview-postbox>button:hover>div{box-shadow:inset 0 0 100px rgba(255,255,255,.2)}#profile-jot-plugin-wrapper>div,.jotplugins>div{float:left}#profile-jot-plugin-wrapper::after,.jotplugins::after{content:'';display:block;clear:both}div.preview-postbox>button:focus,div.preview-postbox>button:hover{position:relative;z-index:10;transform-origin:center;transform:scale(2)}div.pick-postbox{height:320px!important;width:320px!important;transform-origin:top left;transform:scale(.1)}div.pick-postbox,div.pick-postbox::after,div.pick-postbox::before{animation-play-state:paused}button:focus div.pick-postbox,button:focus div.pick-postbox::after,button:focus div.pick-postbox::before,div.pick-postbox:hover,div.pick-postbox:hover::after,div.pick-postbox:hover::before{animation-play-state:running}
|
||||
2
zen_postbox/view/postbox.min.css
vendored
2
zen_postbox/view/postbox.min.css
vendored
File diff suppressed because one or more lines are too long
2
zen_postbox/view/quattro.min.css
vendored
2
zen_postbox/view/quattro.min.css
vendored
|
|
@ -1 +1 @@
|
|||
#profile-postbox-wrapper{display:block;margin-bottom:-50px}#postboxbutton{position:absolute;margin-top:12px;z-index:99;display:none;padding:10px;background-color:#fff;box-shadow:0 5px 10px rgba(0,0,0,.7)}.postbox_button{border:none;background:0 0;height:24px;width:24px;box-shadow:none;padding:0;position:relative;top:8px}.postbox_button>img{height:24px;width:24px}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}
|
||||
#profile-postbox-wrapper{display:block;margin-bottom:-50px}#postboxbutton{position:absolute;margin-top:12px;z-index:99;display:none;padding:10px;background-color:#fff;box-shadow:0 5px 10px rgba(0,0,0,.7)}.postbox_button{border:none;background:0 0;height:24px;width:24px;box-shadow:none;padding:0;position:relative;top:8px}.postbox_button>img{height:24px;width:24px}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}div.preview-postbox>button:focus,div.preview-postbox>button:hover{position:relative;z-index:10;transform-origin:center;transform:scale(2)}div.pick-postbox{height:320px!important;width:320px!important;transform-origin:top left;transform:scale(.1)}div.pick-postbox,div.pick-postbox::after,div.pick-postbox::before{animation-play-state:paused}button:focus div.pick-postbox,button:focus div.pick-postbox::after,button:focus div.pick-postbox::before,div.pick-postbox:hover,div.pick-postbox:hover::after,div.pick-postbox:hover::before{animation-play-state:running}
|
||||
152
zen_postbox/view/sampler.htm
Normal file
152
zen_postbox/view/sampler.htm
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Friendica Postboxes</title>
|
||||
<link rel="stylesheet" href="postbox.min.css"/>
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
clear: both;
|
||||
}
|
||||
body > div {
|
||||
height: 300px !important;
|
||||
width: 300px !important;
|
||||
border-radius: 50px;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
div > div {
|
||||
height: 300px !important;
|
||||
}
|
||||
.code {
|
||||
background-color: black;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
color: lime;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Friendica Postboxes</h1>
|
||||
|
||||
<p><strong>What are "Postboxes"?</strong> Facebook has a feature offering colorful backgrounds
|
||||
for short, text-only posts. Postboxes for Friendica offers something similar, but it is not
|
||||
limited to short or text-only posts (though it still works best with those). Friendica's gradient and
|
||||
pattern backgrounds, however, are accomplished with pure CSS (no images), and are
|
||||
therefore very fast and lightweight.</p>
|
||||
|
||||
<p><strong>How to use:</strong> Put your text/content inside the "class" BBcode like so:
|
||||
<span class="code">[class=postbox-name]Your Text Here[/class]</span><br/>
|
||||
Type the name in all lowercase letters with no spaces. Each sample below shows the name.
|
||||
Some also show the old names in parenthesis, which are still valid and have been mapped
|
||||
to the new styles. If a style is not available on a given server, or if you misspell the name,
|
||||
the "default" style will be used (inherited font color against theme's post background color).</p>
|
||||
|
||||
<p><strong>Limitations:</strong> Requires either using the "Frio" theme with the "Bookface" scheme, or
|
||||
the "Postbox" add-on be installed, or the "Zen Postbox" add-on be installed. Postboxes shared to servers
|
||||
without them see only the un-styled content fo the Postbox, this includes other platforms like Mastodon,
|
||||
Bluesky, Tumblr, etc. <strong>Note that there are currently issues with how Postboxes display
|
||||
in posts shared to Diaspora and Hubzilla.</strong></p>
|
||||
|
||||
<p><strong style="color:red;">The animated backgrounds shown below are only available if either the "Postbox" or "Zen Postbox"
|
||||
add-on is installed on the server.</strong></p>
|
||||
|
||||
<h2>Solid Colors</h2>
|
||||
<div><div class="postbox-undefined">Default</div></div>
|
||||
<div><div class="postbox-black">Black</div></div>
|
||||
<div><div class="postbox-cornflowerblue">CornflowerBlue (Blue)</div></div>
|
||||
<div><div class="postbox-darkblue">DarkBlue (Ocean)</div></div>
|
||||
<div><div class="postbox-darkgrey">DarkGrey</div></div>
|
||||
<div><div class="postbox-darkorange">DarkOrange (Orange)</div></div>
|
||||
<div><div class="postbox-darkred">DarkRed</div></div>
|
||||
<div><div class="postbox-darkslateblue">DarkSlateBlue</div></div>
|
||||
<div><div class="postbox-forestgreen">ForestGreen (Forest)</div></div>
|
||||
<div><div class="postbox-gold">Gold</div></div>
|
||||
<div><div class="postbox-goldenrod">Goldenrod</div></div>
|
||||
<div><div class="postbox-honeydew">Honeydew</div></div>
|
||||
<div><div class="postbox-hotpink">Hotpink</div></div>
|
||||
<div><div class="postbox-lavender">Lavender</div></div>
|
||||
<div><div class="postbox-lightpink">LightPink</div></div>
|
||||
<div><div class="postbox-lightyellow">LightYellow</div></div>
|
||||
<div><div class="postbox-limegreen">LimeGreen (Green)</div></div>
|
||||
<div><div class="postbox-lightsalmon">LightSalmon (Salmon)</div></div>
|
||||
<div><div class="postbox-mediumaquamarine">MediumAquaMarine</div></div>
|
||||
<div><div class="postbox-mediumslateblue">MediumSlateBlue</div></div>
|
||||
<div><div class="postbox-mediumvioletred">MediumVioletRed</div></div>
|
||||
<div><div class="postbox-mintcream">MintCream</div></div>
|
||||
<div><div class="postbox-olivedrab">OliveDrab</div></div>
|
||||
<div><div class="postbox-palegreen">PaleGreen</div></div>
|
||||
<div><div class="postbox-peachpuff">PeachPuff</div></div>
|
||||
<div><div class="postbox-pink">Pink</div></div>
|
||||
<div><div class="postbox-purple">Purple</div></div>
|
||||
<div><div class="postbox-red">Red</div></div>
|
||||
<div><div class="postbox-seagreen">SeaGreen</div></div>
|
||||
<div><div class="postbox-sienna">Sienna</div></div>
|
||||
<div><div class="postbox-skyblue">SkyBlue</div></div>
|
||||
<div><div class="postbox-thistle">Thistle</div></div>
|
||||
<div><div class="postbox-violet">Violet</div></div>
|
||||
<div><div class="postbox-whitesmoke">WhiteSmoke</div></div>
|
||||
<div><div class="postbox-yellowgreen">YellowGreen</div></div>
|
||||
|
||||
<h2>Gradients</h2>
|
||||
<div><div class="postbox-aurora">Aurora</div></div>
|
||||
<div><div class="postbox-bluegray">BlueGray</div></div>
|
||||
<div><div class="postbox-graygrey">GrayGrey (DarkGray)</div></div>
|
||||
<div><div class="postbox-grayblack">GrayBlack</div></div>
|
||||
<div><div class="postbox-greengray">GreenGray</div></div>
|
||||
<div><div class="postbox-lavendergray">LavenderGray</div></div>
|
||||
<div><div class="postbox-minty">Minty</div></div>
|
||||
<div><div class="postbox-mintgray">MintGray</div></div>
|
||||
<div><div class="postbox-rainbow">Rainbow</div></div>
|
||||
<div><div class="postbox-redblue">RedBlue</div></div>
|
||||
<div><div class="postbox-sherbet">Sherbet (Sherbert)</div></div>
|
||||
<div><div class="postbox-spectrum">Spectrum</div></div>
|
||||
<div><div class="postbox-strawberrycream">StrawberryCream</div></div>
|
||||
<div><div class="postbox-sunset">Sunset</div></div>
|
||||
<div><div class="postbox-tealblue">TealBlue</div></div>
|
||||
<div><div class="postbox-tealgray">TealGray</div></div>
|
||||
<div><div class="postbox-violets">Violets</div></div>
|
||||
<div><div class="postbox-violetblue">VioletBlue</div></div>
|
||||
|
||||
<h2>Patterns</h2>
|
||||
<div><div class="postbox-blueprint">Blueprint</div></div>
|
||||
<div><div class="postbox-birds">Birds</div></div>
|
||||
<div><div class="postbox-checkered">Checkered</div></div>
|
||||
<div><div class="postbox-cubes">Cubes</div></div>
|
||||
<div><div class="postbox-lemonlime">LemonLime</div></div>
|
||||
<div><div class="postbox-gingham">Gingham</div></div>
|
||||
<div><div class="postbox-grid">Grid</div></div>
|
||||
<div><div class="postbox-hearts">Hearts</div></div>
|
||||
<div><div class="postbox-honeycomb">Honeycomb</div></div>
|
||||
<div><div class="postbox-notebook">Notebook</div></div>
|
||||
<div><div class="postbox-plaid">Plaid</div></div>
|
||||
<div><div class="postbox-polkadots">Polkadots</div></div>
|
||||
<div><div class="postbox-shadedots">ShadeDots</div></div>
|
||||
<div><div class="postbox-shadowbox">Shadowbox</div></div>
|
||||
<div><div class="postbox-stars">Stars</div></div>
|
||||
<div><div class="postbox-warpgrid">WarpGrid</div></div>
|
||||
<div><div class="postbox-wavy">Wavy</div></div>
|
||||
|
||||
<h2>Animated</h2>
|
||||
<p style="clear:both;">These are only available if either the "Postbox" or "Zen Postbox"
|
||||
add-on is installed on the Friendica server.</p>
|
||||
<div><div class="postbox-anigradient">Anigradient</div></div>
|
||||
<div><div class="postbox-blob">Blob</div></div>
|
||||
<div><div class="postbox-colorfade">ColorFade</div></div>
|
||||
<div><div class="postbox-gridrunner">GridRunner</div></div>
|
||||
<div><div class="postbox-heartbeat">Heartbeat</div></div>
|
||||
<div><div class="postbox-moonrise">Moonrise</div></div>
|
||||
<div><div class="postbox-rainy">Rainy</div></div>
|
||||
<div><div class="postbox-rocket">Rocket</div></div>
|
||||
<div><div class="postbox-snowy">Snowy</div></div>
|
||||
<div><div class="postbox-sunrise">Sunrise</div></div>
|
||||
<div><div class="postbox-waves">Waves</div></div>
|
||||
</body>
|
||||
</html>
|
||||
2
zen_postbox/view/smoothly.min.css
vendored
2
zen_postbox/view/smoothly.min.css
vendored
|
|
@ -1 +1 @@
|
|||
#profile-postbox-wrapper{display:block}#postboxbutton{display:none;position:fixed;background-color:#eee;width:auto;width:fit-content;border-radius:8px;padding:10px;z-index:99;box-shadow:0 0 5px rgba(0,0,0,.7)}.postbox_button>img{height:22px;width:22px;position:relative;margin:4px;-moz-border-radius:0;border-radius:0}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}#profile-jot-plugin-wrapper{padding:10px 1px}#profile-jot-plugin-wrapper>div,.jotplugins>div{float:left}#profile-jot-plugin-wrapper::after,.jotplugins::after{content:'';display:block;clear:both}
|
||||
#profile-postbox-wrapper{display:block}#postboxbutton{display:none;position:fixed;background-color:#eee;width:auto;width:fit-content;border-radius:8px;padding:10px;z-index:99;box-shadow:0 0 5px rgba(0,0,0,.7)}.postbox_button>img{height:22px;width:22px;position:relative;margin:4px;-moz-border-radius:0;border-radius:0}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}#profile-jot-plugin-wrapper{padding:10px 1px}#profile-jot-plugin-wrapper>div,.jotplugins>div{float:left}#profile-jot-plugin-wrapper::after,.jotplugins::after{content:'';display:block;clear:both}div.preview-postbox>button:focus,div.preview-postbox>button:hover{position:relative;z-index:10;transform-origin:center;transform:scale(2)}div.pick-postbox{height:320px!important;width:320px!important;transform-origin:top left;transform:scale(.1)}div.pick-postbox,div.pick-postbox::after,div.pick-postbox::before{animation-play-state:paused}button:focus div.pick-postbox,button:focus div.pick-postbox::after,button:focus div.pick-postbox::before,div.pick-postbox:hover,div.pick-postbox:hover::after,div.pick-postbox:hover::before{animation-play-state:running}
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
#postboxbutton {
|
||||
display: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.postbox_button > img {
|
||||
|
|
@ -31,7 +32,30 @@ div.preview-postbox > button {
|
|||
border-radius: 8px;
|
||||
margin: 0 5px 5px 0;
|
||||
background: none;
|
||||
border: none;
|
||||
border: 1px solid #ccc;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* handle patterns and animations */
|
||||
div.preview-postbox > button:hover,
|
||||
div.preview-postbox > button:focus {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transform-origin: center;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
div.pick-postbox {
|
||||
height: 320px !important;
|
||||
width: 320px !important;;
|
||||
transform-origin: top left;
|
||||
transform: scale(.1);
|
||||
}
|
||||
div.pick-postbox, div.pick-postbox::before, div.pick-postbox::after {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
div.pick-postbox:hover, div.pick-postbox:hover::before, div.pick-postbox:hover::after,
|
||||
button:focus div.pick-postbox, button:focus div.pick-postbox::before, button:focus div.pick-postbox::after {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
#postboxbutton {
|
||||
display: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.postbox_button {
|
||||
|
|
@ -26,11 +27,14 @@ div.preview-postbox {
|
|||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
left: 285px;
|
||||
top: -62px;
|
||||
padding: 5px;
|
||||
width: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
div.preview-postbox::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
div.preview-postbox div.pick-postbox {
|
||||
height: 100%;
|
||||
|
|
@ -65,4 +69,27 @@ div.preview-postbox > button {
|
|||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
/* handle patterns and animations */
|
||||
div.preview-postbox > button:hover,
|
||||
div.preview-postbox > button:focus {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transform-origin: center;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
div.pick-postbox {
|
||||
height: 320px !important;
|
||||
width: 320px !important;;
|
||||
transform-origin: top left;
|
||||
transform: scale(.1);
|
||||
}
|
||||
div.pick-postbox, div.pick-postbox::before, div.pick-postbox::after {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
div.pick-postbox:hover, div.pick-postbox:hover::before, div.pick-postbox:hover::after,
|
||||
button:focus div.pick-postbox, button:focus div.pick-postbox::before, button:focus div.pick-postbox::after {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
|
@ -66,4 +66,28 @@ div.preview-postbox > button {
|
|||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/* handle patterns and animations */
|
||||
div.preview-postbox > button:hover,
|
||||
div.preview-postbox > button:focus {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transform-origin: center;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
div.pick-postbox {
|
||||
height: 320px !important;
|
||||
width: 320px !important;;
|
||||
transform-origin: top left;
|
||||
transform: scale(.1);
|
||||
}
|
||||
div.pick-postbox, div.pick-postbox::before, div.pick-postbox::after {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
div.pick-postbox:hover, div.pick-postbox:hover::before, div.pick-postbox:hover::after,
|
||||
button:focus div.pick-postbox, button:focus div.pick-postbox::before, button:focus div.pick-postbox::after {
|
||||
animation-play-state: running;
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -51,4 +51,27 @@ div.preview-postbox > button {
|
|||
border: none;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* handle patterns and animations */
|
||||
div.preview-postbox > button:hover,
|
||||
div.preview-postbox > button:focus {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transform-origin: center;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
div.pick-postbox {
|
||||
height: 320px !important;
|
||||
width: 320px !important;;
|
||||
transform-origin: top left;
|
||||
transform: scale(.1);
|
||||
}
|
||||
div.pick-postbox, div.pick-postbox::before, div.pick-postbox::after {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
div.pick-postbox:hover, div.pick-postbox:hover::before, div.pick-postbox:hover::after,
|
||||
button:focus div.pick-postbox, button:focus div.pick-postbox::before, button:focus div.pick-postbox::after {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
|
@ -60,4 +60,27 @@ div.preview-postbox > button {
|
|||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
/* handle patterns and animations */
|
||||
div.preview-postbox > button:hover,
|
||||
div.preview-postbox > button:focus {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transform-origin: center;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
div.pick-postbox {
|
||||
height: 320px !important;
|
||||
width: 320px !important;;
|
||||
transform-origin: top left;
|
||||
transform: scale(.1);
|
||||
}
|
||||
div.pick-postbox, div.pick-postbox::before, div.pick-postbox::after {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
div.pick-postbox:hover, div.pick-postbox:hover::before, div.pick-postbox:hover::after,
|
||||
button:focus div.pick-postbox, button:focus div.pick-postbox::before, button:focus div.pick-postbox::after {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
z-index: 99;
|
||||
display: none;
|
||||
padding: 10px;
|
||||
margin-left: 10px;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
|
@ -57,4 +58,27 @@ div.preview-postbox > button {
|
|||
border: none;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* handle patterns and animations */
|
||||
div.preview-postbox > button:hover,
|
||||
div.preview-postbox > button:focus {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transform-origin: center;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
div.pick-postbox {
|
||||
height: 320px !important;
|
||||
width: 320px !important;;
|
||||
transform-origin: top left;
|
||||
transform: scale(.1);
|
||||
}
|
||||
div.pick-postbox, div.pick-postbox::before, div.pick-postbox::after {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
div.pick-postbox:hover, div.pick-postbox:hover::before, div.pick-postbox:hover::after,
|
||||
button:focus div.pick-postbox, button:focus div.pick-postbox::before, button:focus div.pick-postbox::after {
|
||||
animation-play-state: running;
|
||||
}
|
||||
2
zen_postbox/view/vier.min.css
vendored
2
zen_postbox/view/vier.min.css
vendored
|
|
@ -1 +1 @@
|
|||
#profile-postbox-wrapper{float:left;margin-left:15px;cursor:pointer;height:10px;display:inline-block}#profile-postbox-wrapper .btn{padding:1px;margin:0;border:0;background:0 0;width:20px;height:20px;line-height:inherit;display:inline-block;overflow:hidden;color:#999;vertical-align:text-top}#postboxbutton{position:absolute;z-index:99;display:none;padding:10px;background-color:#fff;box-shadow:0 5px 10px rgba(0,0,0,.7)}.postbox_button>img{height:18px;width:18px;margin-right:18px}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}
|
||||
#profile-postbox-wrapper{float:left;margin-left:15px;cursor:pointer;height:10px;display:inline-block}#profile-postbox-wrapper .btn{padding:1px;margin:0;border:0;background:0 0;width:20px;height:20px;line-height:inherit;display:inline-block;overflow:hidden;color:#999;vertical-align:text-top}#postboxbutton{position:absolute;z-index:99;display:none;padding:10px;margin-left:10px;background-color:#fff;box-shadow:0 5px 10px rgba(0,0,0,.7)}.postbox_button>img{height:18px;width:18px;margin-right:18px}div.preview-postbox div.pick-postbox{height:100%;width:100%;display:block}div.preview-postbox>button{ms-appearance:none;moz-appearance:none;webkit-appearance:none;appearance:none;cursor:pointer;height:32px;width:32px;margin:0 5px 5px 0;float:left;border-radius:8px;background:0 0;border:none;padding:0;overflow:hidden}div.preview-postbox>button:focus,div.preview-postbox>button:hover{position:relative;z-index:10;transform-origin:center;transform:scale(2)}div.pick-postbox{height:320px!important;width:320px!important;transform-origin:top left;transform:scale(.1)}div.pick-postbox,div.pick-postbox::after,div.pick-postbox::before{animation-play-state:paused}button:focus div.pick-postbox,button:focus div.pick-postbox::after,button:focus div.pick-postbox::before,div.pick-postbox:hover,div.pick-postbox:hover::after,div.pick-postbox:hover::before{animation-play-state:running}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
/**
|
||||
* Name: Zen Postbox
|
||||
* Description: Adds a button to editor to insert color background. Called Zen to load last.
|
||||
* Version: 1.0
|
||||
* Version: 1.1
|
||||
* Author: Random Penguin <https://gitlab.com/randompenguin>
|
||||
*/
|
||||
|
||||
|
|
@ -20,88 +20,95 @@ function zen_postbox_jot_tool(string &$body)
|
|||
{
|
||||
|
||||
$labels = [
|
||||
'Black',
|
||||
'Red',
|
||||
'Green',
|
||||
'Blue',
|
||||
'Orange',
|
||||
'Purple',
|
||||
'Forest',
|
||||
'Ocean',
|
||||
'Pink',
|
||||
'Salmon',
|
||||
'Dark Gray',
|
||||
'Minty',
|
||||
'Mint Gray',
|
||||
'Red-Blue',
|
||||
'Violets',
|
||||
'Gray-Black',
|
||||
'Teal Blue',
|
||||
'Green Gray',
|
||||
'Teal Gray',
|
||||
'Blue Gray',
|
||||
'Lavender Gray',
|
||||
'Sunset',
|
||||
'Sherbert',
|
||||
['White Smoke', 'whitesmoke'],
|
||||
['Dark Grey', 'darkgrey'],
|
||||
['Black', 'black'],
|
||||
['Pink', 'pink'],
|
||||
['Red', 'red'],
|
||||
['Dark Red', 'darkred'],
|
||||
['Light Pink', 'lightpink'],
|
||||
['Hot Pink', 'hotpink'],
|
||||
['Medium Violet Red', 'mediumvioletred'],
|
||||
['Peach Puff', 'peachpuff'],
|
||||
['Dark Orange (Orange)', 'darkorange'],
|
||||
['Sienna', 'sienna'],
|
||||
['Light Yellow', 'lightyellow'],
|
||||
['Gold', 'gold'],
|
||||
['Goldenrod', 'goldenrod'],
|
||||
['Honeydew', 'honeydew'],
|
||||
['Yellow Green', 'yellowgreen'],
|
||||
['Olive Drab', 'olivedrab'],
|
||||
['Pale Green', 'palegreen'],
|
||||
['Lime Green (Green)', 'limegreen'],
|
||||
['Forest Green (Forest)', 'forestgreen'],
|
||||
['Mint Cream', 'mintcream'],
|
||||
['Medium Aquamarine', 'mediumaquamarine'],
|
||||
['Sea Green', 'seagreen'],
|
||||
['Sky Blue', 'skyblue'],
|
||||
['Cornflower Blue (Blue)', 'cornflowerblue'],
|
||||
['Dark Slate Blue', 'darkslateblue'],
|
||||
['Lavender', 'lavender'],
|
||||
['Medium Slate Blue', 'mediumslateblue'],
|
||||
['Dark Blue (Ocean)', 'darkblue'],
|
||||
['Thistle', 'thistle'],
|
||||
['Violet', 'violet'],
|
||||
['Purple', 'purple'],
|
||||
['Light Salmon (Salmon)', 'lightsalmon'],
|
||||
|
||||
['Aurora', 'aurora'],
|
||||
['Blue-Gray', 'bluegray'],
|
||||
['Gray-Grey', 'graygrey'],
|
||||
['Gray-Black', 'grayblack'],
|
||||
['Green-Gray', 'greengray'],
|
||||
['Lavender-Gray', 'lavendergray'],
|
||||
['Minty', 'minty'],
|
||||
['Mint-Gray', 'mintgray'],
|
||||
['Rainbow', 'rainbow'],
|
||||
['Red-Blue', 'redblue'],
|
||||
['Sherbet', 'sherbet'],
|
||||
['Spectrum', 'spectrum'],
|
||||
['Strawberry-Cream', 'strawberrycream'],
|
||||
['Sunset', 'sunset'],
|
||||
['Teal-Blue', 'tealblue'],
|
||||
['Teal-Gray', 'tealgray'],
|
||||
['Violets', 'violets'],
|
||||
['Violet-Blue', 'violetblue'],
|
||||
|
||||
['Blueprint', 'blueprint'],
|
||||
['Birds', 'birds'],
|
||||
['Checkered', 'checkered'],
|
||||
['Cubes', 'cubes'],
|
||||
['Lemon-Lime', 'lemonlime'],
|
||||
['Gingham', 'gingham'],
|
||||
['Grid', 'grid'],
|
||||
['Hearts', 'hearts'],
|
||||
['Honeycomb', 'honeycomb'],
|
||||
['Notebook', 'notebook'],
|
||||
['Plaid', 'plaid'],
|
||||
['Polkadots', 'polkadots'],
|
||||
['Shade Dots', 'shadedots'],
|
||||
['Shadowbox', 'shadowbox'],
|
||||
['Stars', 'stars'],
|
||||
['Warp Grid', 'warpgrid'],
|
||||
['Wavy', 'wavy'],
|
||||
|
||||
['Ani-Gradient', 'anigradient'],
|
||||
['Blob', 'blob'],
|
||||
['Color Fade', 'colorfade'],
|
||||
['Grid Runner', 'gridrunner'],
|
||||
['Heartbeat', 'heartbeat'],
|
||||
['Moonrise', 'moonrise'],
|
||||
['Rainy', 'rainy'],
|
||||
['Rocket', 'rocket'],
|
||||
['Snowy', 'snowy'],
|
||||
['Sunrise', 'sunrise'],
|
||||
['Waves', 'waves'],
|
||||
];
|
||||
|
||||
$texts = [
|
||||
'[class=postbox-black]',
|
||||
'[class=postbox-red]',
|
||||
'[class=postbox-green]',
|
||||
'[class=postbox-blue]',
|
||||
'[class=postbox-orange]',
|
||||
'[class=postbox-purple]',
|
||||
'[class=postbox-forest]',
|
||||
'[class=postbox-ocean]',
|
||||
'[class=postbox-pink]',
|
||||
'[class=postbox-salmon]',
|
||||
'[class=postbox-darkgray]',
|
||||
'[class=postbox-minty]',
|
||||
'[class=postbox-mintgray]',
|
||||
'[class=postbox-redblue]',
|
||||
'[class=postbox-violets]',
|
||||
'[class=postbox-grayblack]',
|
||||
'[class=postbox-tealblue]',
|
||||
'[class=postbox-greengray]',
|
||||
'[class=postbox-tealgray]',
|
||||
'[class=postbox-bluegray]',
|
||||
'[class=postbox-lavendergray]',
|
||||
'[class=postbox-sunset]',
|
||||
'[class=postbox-sherbert]',
|
||||
];
|
||||
|
||||
$icons = [
|
||||
'<div class="pick-postbox postbox-black"></div>',
|
||||
'<div class="pick-postbox postbox-red"></div>',
|
||||
'<div class="pick-postbox postbox-green"></div>',
|
||||
'<div class="pick-postbox postbox-blue"></div>',
|
||||
'<div class="pick-postbox postbox-orange"></div>',
|
||||
'<div class="pick-postbox postbox-purple"></div>',
|
||||
'<div class="pick-postbox postbox-forest"></div>',
|
||||
'<div class="pick-postbox postbox-ocean"></div>',
|
||||
'<div class="pick-postbox postbox-pink"></div>',
|
||||
'<div class="pick-postbox postbox-salmon"></div>',
|
||||
'<div class="pick-postbox postbox-darkgray"></div>',
|
||||
'<div class="pick-postbox postbox-minty"></div>',
|
||||
'<div class="pick-postbox postbox-mintgray"></div>',
|
||||
'<div class="pick-postbox postbox-redblue"></div>',
|
||||
'<div class="pick-postbox postbox-violets"></div>',
|
||||
'<div class="pick-postbox postbox-grayblack"></div>',
|
||||
'<div class="pick-postbox postbox-tealblue"></div>',
|
||||
'<div class="pick-postbox postbox-greengray"></div>',
|
||||
'<div class="pick-postbox postbox-tealgray"></div>',
|
||||
'<div class="pick-postbox postbox-bluegray"></div>',
|
||||
'<div class="pick-postbox postbox-lavendergray"></div>',
|
||||
'<div class="pick-postbox postbox-sunset"></div>',
|
||||
'<div class="pick-postbox postbox-sherbert"></div>',
|
||||
];
|
||||
$params = ['texts' => $texts, 'icons' => $icons, 'string' => '', 'labels' => $labels];
|
||||
//Generate html for smiley list
|
||||
// Generate Postbox Buttons
|
||||
$s = '<div class="preview-postbox"><tr>';
|
||||
for ($x = 0; $x < count($params['texts']); $x++) {
|
||||
$icon = $params['icons'][$x];
|
||||
$s .= '<button type="button" title="' . $params['labels'][$x] . '" onclick="postbox_addbox(\'' . $params['texts'][$x] . '\')">' . $icon . '</button>';
|
||||
for ($x = 0; $x < count($labels); $x++){
|
||||
$s .= '<button type="button" title="' . $labels[$x][0] . '" onclick="postbox_addbox(\'[class=postbox-' . $labels[$x][1] . ']\')"><div class="pick-postbox postbox-' . $labels[$x][1] . '"></div></button>';
|
||||
}
|
||||
$s .= '</div>';
|
||||
|
||||
|
|
@ -113,10 +120,16 @@ function zen_postbox_jot_tool(string &$body)
|
|||
|
||||
DI::page()->registerStylesheet($css_file);
|
||||
|
||||
// Add zen_postbox Styling to Header
|
||||
$box_styles = __DIR__ . '/view/postbox.min.css';
|
||||
DI::page()->registerStylesheet($box_styles);
|
||||
|
||||
/* Add Postbox Styling to Header
|
||||
DI::page()->registerStylesheet($path) might load before theme
|
||||
so we will append with DI::page()['htmlhead'] to make it load much much later
|
||||
*/
|
||||
$path = __DIR__ . '/view/postbox.min.css?v=' . DI::app()::VERSION;
|
||||
if (mb_strpos($path, DI::basePath() . DIRECTORY_SEPARATOR) === 0) {
|
||||
$path = mb_substr($path, mb_strlen(DI::basePath() . DIRECTORY_SEPARATOR));
|
||||
}
|
||||
DI::page()['htmlhead'] .= '<link rel="stylesheet" href="'.$path.'" media="screen"/>';
|
||||
|
||||
//Get the correct image for the theme
|
||||
$image = 'addon/zen_postbox/view/default.png';
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue