Containers overhaul (#363)

src/.vuepress/components/Carousel.vue

@@ -35,6 +35,7 @@ export default {
 .agile {
 	background: #f0f4f8;
 	border-radius: 1em;
+	margin-bottom: 1rem;
 }
 
 .agile__nav-button {

src/.vuepress/components/Navigation.vue

@@ -123,5 +123,5 @@ blockquote
 	.app-navigation
 		.app-icon,
 		.app-label
-			color inherit
+			color inherit !important
 </style>

src/.vuepress/config/plugins.js

@@ -61,6 +61,33 @@ module.exports = [
 		},
 	],
 	["vuepress-plugin-element-ui"],
+	[
+		"vuepress-plugin-container",
+		{
+			type: "c-tip",
+			before: (info) => `<div class="custom-block c-tip"><h4 class="c-title">${info}</h4>`,
+			after: "</div>",
+			defaultTitle: "",
+		},
+	],
+	[
+		"vuepress-plugin-container",
+		{
+			type: "c-warning",
+			before: (info) => `<div class="custom-block c-warning"><h4 class="c-title">${info}</h4>`,
+			after: "</div>",
+			defaultTitle: "",
+		},
+	],
+	[
+		"vuepress-plugin-container",
+		{
+			type: "c-danger",
+			before: (info) => `<div class="custom-block c-danger"><h4 class="c-title">${info}</h4>`,
+			after: "</div>",
+			defaultTitle: "",
+		},
+	],
 	[
 		"vuepress-plugin-container",
 		{

src/.vuepress/public/assets/icon_danger.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.82 17.59"><defs><style>.cls-1{fill:none;stroke:#e5422b;stroke-miterlimit:10;}.cls-2{fill:#e5422b;}</style></defs><title>icon-danger</title><g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M9.06,2,.73,16.39A1.09,1.09,0,0,0,1.67,18H18.33a1.09,1.09,0,0,0,.94-1.63L10.94,2A1.08,1.08,0,0,0,9.06,2Z" transform="translate(-0.09 -0.92)"/></g><g id="Layer_3" data-name="Layer 3"><rect class="cls-2" x="9.09" y="13.63" width="1.66" height="1.66" rx="0.26"/><path class="cls-2" d="M8.66,6.65,9.13,13a.29.29,0,0,0,.29.28h1.17a.29.29,0,0,0,.29-.28l.47-6.39a.3.3,0,0,0-.3-.33H9A.3.3,0,0,0,8.66,6.65Z" transform="translate(-0.09 -0.92)"/></g></svg>

src/.vuepress/public/assets/icon_tip.svg

@@ -0,0 +1 @@
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.57 18.64"><defs><style>.cls-1,.cls-2{fill:none;stroke:#184cef;stroke-linecap:round;stroke-miterlimit:10;}.cls-1{stroke-width:1.2px;}.cls-2{stroke-width:1.1px;}</style></defs><title>bulb-icon</title><path class="cls-1" d="M12.5,12.76V11.65a1.84,1.84,0,0,1,.72-1.45,5.19,5.19,0,1,0-6.43,0,1.86,1.86,0,0,1,.71,1.45v1" transform="translate(-4.21 -0.37)"/><line class="cls-2" x1="2.99" y1="14.13" x2="8.58" y2="14.13"/><line class="cls-2" x1="3.56" y1="16.13" x2="8.01" y2="16.13"/><line class="cls-2" x1="5.17" y1="18.09" x2="6.41" y2="18.09"/><path class="cls-2" d="M10.36,3.25A2.31,2.31,0,0,1,12,4a2.46,2.46,0,0,1,.71,1.67" transform="translate(-4.21 -0.37)"/></svg>

src/.vuepress/public/assets/icon_warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.82 17.59"><defs><style>.cls-1{fill:none;stroke:#b29400;stroke-miterlimit:10;}.cls-2{fill:#b29400;}</style></defs><title>icon-danger-shit-colour</title><g id="Layer_2" data-name="Layer 2"><path class="cls-1" d="M9.06,2,.73,16.39A1.09,1.09,0,0,0,1.67,18H18.33a1.09,1.09,0,0,0,.94-1.63L10.94,2A1.08,1.08,0,0,0,9.06,2Z" transform="translate(-0.09 -0.92)"/></g><g id="Layer_3" data-name="Layer 3"><rect class="cls-2" x="9.09" y="13.63" width="1.66" height="1.66" rx="0.26"/><path class="cls-2" d="M8.66,6.65,9.13,13a.29.29,0,0,0,.29.28h1.17a.29.29,0,0,0,.29-.28l.47-6.39a.3.3,0,0,0-.3-.33H9A.3.3,0,0,0,8.66,6.65Z" transform="translate(-0.09 -0.92)"/></g></svg>

src/.vuepress/styles/index.styl

@@ -15,22 +15,87 @@ font-feature-settings()
 html,
 body,
 .theme-container
-	background-color #fdfdfd
+	background-color $backgroundColor
+
+.navbar
+	background-color $backgroundColor
+	.links
+		background-color transparent !important
+
+.sidebar
+	background-color $backgroundColorSecondary
 
 // Custom block containers
 .custom-block
-	&.tip
+	padding-left 1.25rem
-	&.warning
+	padding-right 1rem
-	&.error
+	border-radius .125rem
-	&.danger
+	overflow hidden
-		border-radius $containerBorderRadius
+	position relative
+	background-color $backgroundColorSecondary
+	border 1px solid #e4e8ef
+	border-radius 6px
+	margin-bottom .5rem
+	.c-title
+		margin-top 1rem
+		margin-bottom -0.75rem
+		&:empty
+			display none
+	&.c-
+		&tip
+		&warning
+		&danger
+			padding-left 3.75rem
+			&:before
+				content ""
+				display block
+				position absolute
+				top 0
+				left 0
+				margin-top 1rem
+				margin-left 1rem
+				width 1.75rem
+				height 1.75rem
+				background-size contain
+		&tip
+			background-color alpha($customTip, 2%)
+			border 1px solid alpha($customTip, 20%)
+			&:before
+				background transparent url(/assets/icon_tip.svg) no-repeat 0 0
+			a
+				color $customTip
+			h4
+				color darken($customTip, 60%)
+		&warning
+			background-color alpha($customWarning, 2%)
+			border 1px solid alpha($customWarning, 20%)
+			&:before
+				background transparent url(/assets/icon_warning.svg) no-repeat 0 0
+			a
+				color $customWarning
+			h4
+				color darken($customWarning, 40%)
+		&danger
+			background-color alpha($customDanger, 2%)
+			border 1px solid alpha($customDanger, 20%)
+			&:before
+				background transparent url(/assets/icon_danger.svg) no-repeat 0 0
+			a
+				color $customDanger
+			h4
+				color darken($customDanger, 40%)
 	&.aside
+		background-color transparent
+		border none
 		color transparentify($textColor, 0.4)
 		font-size 0.9rem
 		text-align right
 	&.aside-guide
+		background-color transparent
+		border none
 		font-size 0.9rem
 		text-align left
+		padding-left unset
 		p
 			margin-top: 0
 		a
@@ -38,7 +103,7 @@ body,
 
 // Guide container
 .guide
-	background-color $containerBackgroundColor
+	background-color $containerBackground
 	border-radius $containerBorderRadius
 	margin 1rem 0
 	padding 0.1rem 1.5rem
@@ -49,7 +114,7 @@ body,
 
 // Expander container
 .expander
-	background-color $containerBackgroundColor
+	background-color $containerBackground
 	border-radius $containerBorderRadius
 	margin 1rem 0
 	padding 1rem 1.5rem

src/.vuepress/styles/palette.styl

@@ -9,8 +9,9 @@ $badgeTipColor = $accentColor
 $badgeWarningColor = darken(#ffe564, 35%)
 $badgeErrorColor = #DA5961
 $badgeVersionColor = #000000
-$containerBackgroundColor = #f0f4f8
 $backgroundColor = #FDFDFD
+$backgroundColorSecondary = #FAFBFE
+$containerBackground = #f0f4f8
 // Layout
 $navbarHeight = 3.6rem
 $sidebarWidth = 20rem
@@ -26,6 +27,10 @@ $MQMobileNarrow = 419px
 // Fonts
 $buttonFontFamily = "Open Sans", Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif
 $codeFontFamily = source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
+// Custom blocks
+$customTip = #184cef
+$customWarning = #b29400
+$customDanger = #e5422b
 // Forks
 $nekoAccentColor = #3DDA83
 $j2kAccentColor = $accentColor

src/help/guides/getting-started.md

@@ -21,10 +21,8 @@ Now that **Tachiyomi** is installed, open the app and navigate to <Navigation it
 
 Find the extension that you'd like to use then press the <Navigation item="install"/> button next to your desired extension and then accept the installation prompt.
 
-::: guide Security prompt
+::: c-warning
-You *might* be stopped by a security prompt while attempting to install an extension. If that were to happen then you need to allow **Tachiyomi** the permission to *install unknown apps*.
+You *might* need to give **Tachiyomi** the permission to *install unknown apps*, you can read how to do so [here](/help/faq/#how-do-i-allow-third-party-installations).
-::: aside
-Learn how you can do so [here](/help/faq/#how-do-i-allow-third-party-installations)
 :::
 
 ## Adding manga to your library

src/help/guides/reader-settings.md

@@ -22,8 +22,8 @@ This setting sets the reader's default direction when you open a manga.
 **Webtoon**
 - Webtoon is like vertical but stitches all the images together into one stream.
 
-::: tip
+::: c-tip
-You can have different Viewer for different series. You can do this by going to the series, opening a chapter, tapping the middle of the screen, pressing the gear icon, and selecting a different viewer in **Viewer for this series**
+You can change viewer for different series by going to the series, opening a chapter, tapping the middle of the screen, pressing the gear icon, and selecting a different viewer in **Viewer for this series**.
 :::
 
 ## Scale type <Badge text="Fit screen" type="default-indicator" vertical="middle" />
@@ -75,7 +75,7 @@ All examples are illustrations and may not reflect what actually happens.
 </CarouselItem>
 </Carousel>
 
-::: tip
+::: c-tip
 You can change scale type when reading a chapter. Tap the middle of the screen, press the gear icon at the top, select a different scale type under **Scale type**. This will change Scale type for all series.
 :::
 
@@ -158,8 +158,8 @@ This settings shows the page number at the bottom of the page in current page/to
 ## 32-bit color <Badge text="False" type="default-indicator" vertical="middle" />
 This setting decodes images in `ARGB888` format to allow the reader to display more colors.
 
-::: warning
+::: c-warning
-This setting will only show up on smartphones running Android 8.0 Oreo and later versions.
+This setting will only show up on smartphones running **Android 8.0** or higher.
 :::
 
 ## Page transitions <Badge text="True" type="default-indicator" vertical="middle" />
@@ -196,6 +196,6 @@ This setting allows you to flip pages using the volume keys, with the volume up
 
 Reverses the Volume keys function of volume up going to the next page and volume down going to the last page.
 
-::: warning
+::: c-warning
 This setting can only be used when Volume keys setting is enabled.
 :::

src/help/guides/reading-local-manga.md

@@ -15,7 +15,10 @@ Follow the steps below to create local manga.
 If you add more chapters then you'll have to manually refresh the chapter list (by pulling down the list).
 
 Supported chapter formats are folder with pictures inside (such as `.jpg`, `.png`, etc), `ZIP`/`CBZ`, `RAR`/`CBR` and `EPUB`. But expect better performance with directories and `ZIP`/`CBZ`.
-<el-alert type="warning" title="Warning!" show-icon :closable="false">Remember to give the app storage permissions on <strong>Android 6</strong> and newer.</el-alert>
+
+::: c-warning
+Remember to give the app storage permissions on **Android 6** and newer.
+:::
 
 ## Folder Structure
 

src/help/guides/source-migration.md

@@ -8,7 +8,9 @@ lang: en-US
 
 Migration is the process of moving manga between sources without losing progress. This is most often used when a source is no longer accessible or another source is more up-to-date.
 
-<el-alert type="warning" title="Warning!" show-icon :closable="false">Always make sure to have a <el-link href="/help/guides/creating-backups/" :underline="false">backup</el-link> in case anything unexpected occurs.</el-alert>
+::: c-warning
+Always make sure to have a [backup](/help/guides/creating-backups/) in case anything unexpected occurs.
+:::
 
 ## Migrating on Stable/Preview
 
@@ -38,7 +40,7 @@ Migration is the process of moving manga between sources without losing progress
 1. Choose which data you want to transfer over, and you're done.
 ::::
 
-::: tip Searching only pinned sources
+::: c-tip Searching only pinned sources
 You can restrict global searching to pinned sources if you wish to declutter your search.</br>To do this, go to <Navigation item="more"/> → <Navigation item="settings"/> →  <Navigation item="browse"/> then toggle the **Only include pinned sources** setting.
 
 Pin sources in <Navigation item="browse"/> using the <MaterialIcon icon="push_pin" /> pin icon next to the source name.

src/help/guides/troubleshooting-problems.md

@@ -8,15 +8,15 @@ lang: en-US
 
 **This page is for when you encounter a problem with a source extension.**
 
-::: danger It can be accompanied by these error messages:
+::: c-danger Common error messages
-+ HTTP Error 5xx
 - HTTP Error 4xx
-+ java.security.cert.CertPathValidatorException
+- HTTP Error 5xx
+- Unexpected URL
 - Page List is empty
-+ Unable to resolve host
+- Unable to resolve host
-- unexpected url
-+ Attempt to invoke virtual method 'java.lang.String org.jsoup.nodes.Node.attr(java.lang.String)' on a null object reference
 - Failed to bypass Cloudflare
+- java.security.cert.CertPathValidatorException
+- Attempt to invoke virtual method 'java.lang.String org.jsoup.nodes.Node.attr(java.lang.String)' on a null object reference
 :::
 
 ## Diagnosis
@@ -34,8 +34,8 @@ lang: en-US
 * If your downloads are getting stuck, try deleting the queue and trying again.
 * Force close **Tachiyomi** and reopen it.
 
-::: tip Bonus step
+::: c-tip
-Try the latest Preview version, your issue may have been fixed.
+Your issue may have been fixed in the Preview version already, just wait for a new Stable release.
 :::
 
 If any of these help, go to [it only happens to me](#it-only-happens-to-me).
@@ -50,7 +50,7 @@ You may be getting a **CAPTCHA**, may have been IP-banned, or encountered some o
 * Don't use downloads with the source.
 * Have less manga in library from the source.
 
-::: tip
+::: c-warning
 All of the above are very imprecise and fuzzy rules, because each site has their own, non-public limits and triggers.
 :::
 
@@ -117,7 +117,7 @@ If **WebView** doesn't work for you, please update the [Android System WebView](
 
 When you've updated go to [Developer Options](https://developer.android.com/studio/debug/dev-options) in your phone's settings and set **WebView Implementation** to `Android System WebView`.
 
-::: guide Still not working?
+::: c-tip
 If `Android System WebView` doesn't work, try setting `Google Chrome` as the default **WebView Implementation** instead.
 :::