diff --git a/docs/custom.css b/docs/custom.css index a480350..32492ac 100644 --- a/docs/custom.css +++ b/docs/custom.css @@ -54,6 +54,22 @@ div.share-links { background-color: #222 !important; } +.light-mode :not(pre)>code[class*=language-], pre[class*=language-] { + background-color: unset !important; +} + +.line-numbers .line-numbers-rows { + left: -10em !important; +} + +.light-mode code[class*=language-], .light-mode pre[class*=language-] { + text-shadow: none; +} + +.light-mode .token.punctuation { + color: #222; +} + .title { display: block; font-size: 12vmax; @@ -224,6 +240,15 @@ div.share-links { box-shadow: 0 3px 10px rgba(0,0,0,0.3); } +.light-mode .modal { + background: #d6d6d6; + color: #222; +} + +.light-mode .crypto-address { + border-color: #222; +} + @media (max-width: 768px) { .modal { top: 80px; diff --git a/docs/finder.js b/docs/finder.js index 41d70ec..1619d41 100644 --- a/docs/finder.js +++ b/docs/finder.js @@ -25,6 +25,10 @@ const meshkiUtil = { TRange: null, search (event, str) { if (event.keyCode === 13 || event.type === 'click') { + if (!str && str === "" && str.trim().length <= 0) { + alert(`Nothing to search for. Please enter a text.`) + return + } if (parseInt(navigator.appVersion) < 4) { return } let strFound if (window.find) { diff --git a/docs/index.html b/docs/index.html index 6f477a4..192538e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -39,8 +39,8 @@ + - @@ -86,6 +86,7 @@
RTL Mode (Persian) Extra Button Colors + Light Mode
  • GitHub
    • @@ -124,13 +125,16 @@ function toggleDark() { var toggleButton = document.getElementById('toggle-dark') var htmlElement = document.documentElement + var colorModeTitle = document.getElementById('color-mode-title') var isLight = htmlElement.classList.contains('light-mode') if (isLight) { htmlElement.classList.remove('light-mode') toggleButton.innerHTML = 'Dark' + colorModeTitle.innerText = 'Dark' } else { htmlElement.classList.add('light-mode') toggleButton.innerHTML = 'Light' + colorModeTitle.innerText = 'Light' } } @@ -139,10 +143,10 @@ -
    +

    Meshki

    -

    Stylish. Dark. Responsive.

    +

    Stylish. Dark. Responsive.

    @@ -163,14 +167,6 @@

    Stylish. Dark. Responsive.

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/meshki@2.5.1/dist/js/meshki.min.js"></script> -
    -
    - Meshki's birthday! -
    -
    - Meshki is 8 years old! Thank you for your everlasting support. -
    -
    @@ -212,7 +208,7 @@

    Stable

    What is Meshki?

    - Meshki is a simple, dark-colored, responsive boilerplate to kickstart any responsive project. It is only ~20 KiB (minified) and ~30 KiB (normal), including both CSS and JS files, which makes it superb for small to medium projects. It's easy to use, clean and is just beautiful. + Meshki is a simple, dark-colored, responsive css library to kickstart any web UI project. It is only ~20 KiB (minified) and ~30 KiB (normal), including both CSS and JS files, which makes it superb for small to medium projects. It's easy to use, clean and is just beautiful. It was started as a fork of Skeleton project, and it still uses the same logic. Though Meshki is considered to be a totally different project than Skeleton, and it barely resembles it when you take a look at it. Don't be afraid to check out Meshki's source code! If you've spotted any bugs, or you want to ask for some improvements, head to our GitHub repository and open an issue or a pull request!

    @@ -239,7 +235,7 @@

    Why Meshki?

    Getting Started

    - Meshki uses a fixed structure to lessen the burden of setting extra ids and classes. So you always need to create the same structure for all your apps. Don't worry, this structure is very basic and it does not limit you in any ways.
    + Meshki uses a fixed structure to lessen the burden of setting extra ids and classes. So you always need to create the same structure for all your apps. Don't worry, this structure is very basic and it does not limit you in any ways. You can check out the Boilerplate's source code to get started quickly.
    First of all, you need to have a <div> with the sidenav class, just after the beginning of the body. Your sidenav's links will reside in here. Then, you need to create a <div> after the sidenav's div, with the container class. The rest of your body should be created inside the "container" div. Inspect the elements on this page to understand the structure. Ah! Here's a sample code:

    @@ -729,10 +725,48 @@ 
    Form Elements
    - +
    +
    + Simple switch + +
    + +
    + Primary switch + +
    + +
    + Success switch + +
    +
    +
    +
    + Warning switch + +
    + +
    + Error switch + +
    +
    @@ -1160,13 +1194,40 @@

    [Plugin] Extra Button Colors

    + +
    +
    +

    [Plugin] Light-mode

    +
    +

    + Since Meshki v3.0.0, you can take advantage of the light-mode in your designs. All you need to do is to add the following <link> tag and apply "light-mode" class to your <html> tag. + 

    +            
+            
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/meshki@2.5.1/dist/plugins/meshki-light-mode.min.css">
+            
+
    +

    +

    Important Notes

    -

    - Meshki v2.x.x is a major release and has introduced some breaking changes, which means that it's not backwards-compatible with previous versions. Make sure you read the Changelog, so you can understand the latest important changes in Meshki. -

    +
    @@ -1188,10 +1249,10 @@

    This webpage uses...

    -
    +
    -

    Created with by Reza Hajianpour (Borderliner)

    +

    Created with by Reza Hajianpour (Borderliner)

    2016-2024, Licensed under Apache-2.0

    @@ -1239,6 +1300,7 @@

    Thank you for your support!

    + - + - - + + + + + @@ -86,6 +92,7 @@
    چپ-به-راست (انگلیسی) دکمه‌های رنگی بیشتر + حالت روشن
  • گیت‌هاب
    • @@ -104,16 +111,48 @@
  • حمایت
  • - - + + +
    • +
  • + + +
    • +
  • + +
    • -
    • -
    +
    - -

    زیبا.  مشکی.  واکنش‌گرا.

    +

    مشکی

    +

    زیبا.  مشکی.  واکنش‌گرا.

    @@ -136,14 +175,6 @@

    زیبا.  مشکی.  واکنش‌گرا.

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/meshki@2.5.1/dist/js/meshki-rtl.min.css"> -
    -
    - تولد مشکی! -
    -
    - مشکی اکنون ۸ ساله شده است. از حمایت همیشگی شما ممنونیم. -
    -
    @@ -216,6 +247,7 @@

    شروع به کار

    مشکی از یک ساختار ثابت، برای کاهش دردسرهای مربوط به کلاس‌ها و idها استفاده می‌نماید. برای همین، کافیست تا از همین ساختار برای تمامی برنامه‌هایتان استفاده کنید. نگران نباشید، این ساختار بسیار ابتدایی و پایه می‌باشد و شما را به هیچ عنوان محدود نمی‌کند.

    +

    برای شروع می‌توانید سورس کد قالب ابتدایی را بررسی کنید.

    ابتدا، یک div که شامل کلاس sidenav است را بلافاصله بعد از شروع تگ body بسازید. لینک‌های کشو در اینجا سکونت خواهند داشت. سپس، یک div دیگر بعد از div کشو بسازید، که شامل کلاس content باشد. تمامی مطالب اصلی شما باید درون این div قرار بگیرد. اجزای این صفحه را با مرورگر خود مشاهده کنید تا ساختار دقیق را متوجه شوید. کد زیر هم نمونه‌ای از این ساختار است:

    @@ -708,6 +740,51 @@

    فرم‌ها

    + +
    +
    +
    + کلید ساده + +
    + +
    + کلید اصلی + +
    + +
    + کلید موفقیت + +
    +
    +
    +
    + کلید اخطار + +
    + +
    + کلید خطا + +
    +
    +
    @@ -1140,13 +1217,42 @@

    [افزونه] دکمه‌های رنگی بیشتر

    + +
    +
    +

    [افزونه] حالت روشن

    +
    +

    + در نسخه ۳ مشکی، قابلیت پوسته‌ی روشن اضافه شده است. تنها کاری که باید بکنید این است که تگ <link> زیر را به قسمت سربرگ صفحه خود اضافه کرده و کلاس "light-mode" را به تگ <html> خود بیافزایید. + 

    +            
+            
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/meshki@2.5.1/dist/plugins/meshki-light-mode.min.css">
+            
+
    +

    +

    نکات مهم

    -

    - مشکی نسخه 2 تغییراتی را اعمال کرده که باعث می‌شود با نسخه‌های قبلی مشکی سازگار نباشد. برای مطلع شدن از تغییرات نسخه‌های مشکی، حتما Changelog را مطالعه کنید تا به اشتباه از مشکی استفاده نکنید. -

    +
      +
    • +

      + مشکی نسخه ۳ تغییراتی را اعمال کرده که باعث می‌شود با نسخه‌های قبلی مشکی کاملا سازگار نباشد، هرچند نسخه‌ی جدید تا ۸۰٪ با نسخه‌ی ۲ سازگار است. برای مطلع شدن از تغییرات نسخه‌های مشکی، حتما Changelog را مطالعه کنید تا اشتباه از مشکی استفاده نکنید. +

      +
      • +
    • +

      + مشکی نسخه ۲ تغییراتی را اعمال کرده که باعث می‌شود با نسخه‌های قبلی مشکی سازگار نباشد. برای مطلع شدن از تغییرات نسخه‌های مشکی، حتما Changelog را مطالعه کنید تا اشتباه از مشکی استفاده نکنید. +

      +
      • +
    + +
    @@ -1168,10 +1274,10 @@

    این صفحه شامل...

    -
    +
    -

    ساخته شده با توسط محمدرضا حاجیانپور (Borderliner)

    +

    ساخته شده با توسط محمدرضا حاجیانپور (Borderliner)

    2016-2024، تحت مجوز Apache-2.0