Skip to content

Old Ficbook Design | Старый дизайн Ficbook by Gladiator7G

Screenshot of Old Ficbook Design | Старый дизайн Ficbook
Write a review Install Get Stylus

Details

AuthorGladiator7G

LicenseNo License

Categoryficbook.net

Created

Updated

Size11 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

Сразу прошу прощения у witchhouse17 (если вы читаете это) за то, что использовал ваш стиль в своем без спроса. Не смог найти как с вами связаться, однако оставил ваш ник в том числе и в стиле. Изначально изменял под себя. но решил залить на публику.
Список улучшений/исправлений от меня:

  1. Исправил, что стиль работал не только на фикбуке, отчего мог возникнуть сдвиг некоторых элементов на других сайтах (у меня немного сдвигалась вправо лента в ВК)
  2. Добавил эффект подложенных страниц под основную ленту контента фикбука, убрал скругление у ленты
    alt text
  3. Улучшил темную тему - цвет обложки книги меняется также как на старом фикбуке
    alt text
  4. Переместил навигацию по страницам фэндома в середину страницы (раньше там вообще можно было ввести на какую страницу перейти), а также увеличил размер некоторых элементов)
    alt text
  5. Подправил косяк с отсутствием фона у ошибки 404 (не адаптировал для темной темы)
    alt text

Для связи со мной - gladiator7gst@bk.ru

P.S. Заметил, что Markdown здесь почему-то не отображает картинки, поэтому залил скрины примеров в архив: https://www.sendspace.com/file/rrgqzk

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           ficbook.net/home/news
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Old ficbool design
@author         Credit for witchhouse17
==/UserStyle== */

@-moz-document domain("ficbook.net") {
body {
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        text-size-adjust: none;
        background: #e5dacc url(https://web.archive.org/web/20240327205612im_/https://assets.ficbook.net/assets/dist/images/bg-pattern.e19bb1033abaf457954f.jpg);
        min-width: 320px;
    }


    .book-container {
        position: relative;
        border-radius: 0;
        z-index: 0;
        /* Должен быть ниже .book-inner::before */
    }

    .book-inner {
        position: relative;
        border-radius: 0 !important;
        box-shadow: 6px 0 0 -3px #E7D6B6, -6px 0 0 -3px #E7D6B6, /* Первая подложка */
        12px 0 0 -6px #D3BE97, -12px 0 0 -6px #D3BE97, /* Вторая подложка */
        18px 0 0 -9px #BAA47D, -18px 0 0 -9px #BAA47D, /* Третья подложка */
        24px 0 0 -12px #A98D5B, -24px 0 0 -12px #A98D5B, /* Четвертая подложка */
        30px 0 0 -15px #897248, -30px 0 0 -15px #897248;
        /* Пятая подложка */
    }

.dark-theme .book-inner {
    box-shadow: 
        6px 0 0 -3px #444, -6px 0 0 -3px #444,
        12px 0 0 -6px #333, -12px 0 0 -6px #333,
        18px 0 0 -9px #222, -18px 0 0 -9px #222,
        24px 0 0 -12px #111, -24px 0 0 -12px #111,
        30px 0 0 -15px #000, -30px 0 0 -15px #000;
}

.dark-theme    .book-container {
        background: #e5dacc url(https://sun9-24.userapi.com/s/v1/ig2/o-kMGMJ5Lx5QlhsKgKNLn69s01Zb262P_decrkRlBjVdFUi7vYF8bYBdQocI1IGkEYnml0A7X6J2_ovAnxPsX1g0.jpg?quality=95&as=32x32,48x48,72x72,108x108,160x161,240x241,300x301&from=bu&u=ZLSLKvlyu65pnXoH6FNA_5Nht37GIuCRD6Eq-FRobIY&cs=300x301) repeat;
    }


nav.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.comment-header-user {
    transform: scale(1.4); /* Увеличивает содержимое на 40% */
     padding-left: 25px;
}

.comment-footer {
    transform: scale(1.4);
    padding-right: 160px;
         padding-left: 160px;
}



.quoted {
 font-size: 16px;
}

.txt-side {
    background: #FAF5EA
}

    .book-container {
        background: #e5dacc url(https://web.archive.org/web/20240327205612im_/https://assets.ficbook.net/assets/dist/images/pattern.7769d569e87602d7336b.jpg) repeat;
        border-radius: 10px;
        padding: 15px 60px;
        position: relative;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }

    .book-container .book-inner .pages {
        bottom: 0;
        position: absolute;
        top: 0;
    }


    .book-container .book-stiches-horizontal:before {
        top: 5px;
    }
    .book-container .book-stiches-horizontal:before,
    .book-container .book-stiches-horizontal:after {
        content: "";
        background-image: linear-gradient(90deg, #c69e6b50, #c69e6b50 70%, #0000 70% 100%);
        background-size: 7px 1px;
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }

    .book-container .book-stiches-horizontal:after {
        bottom: 5px;
    }
    .book-container .book-stiches-horizontal:before,
    .book-container .book-stiches-horizontal:after {
        content: "";
        background-image: linear-gradient(90deg, #c69e6b50, #c69e6b50 70%, #0000 70% 100%);
        background-size: 7px 1px;
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }

    .book-container .book-stiches-vertical:before {
        left: 5px;
    }
    .book-container .book-stiches-vertical:before,
    .book-container .book-stiches-vertical:after {
        content: "";
        background-image: linear-gradient(#0000 0% 30%, #c69e6b50 30%, #c69e6b50);
        background-size: 1px 7px;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    .book-container .book-stiches-vertical:after {
        right: 5px;
    }
    .book-container .book-stiches-vertical:before,
    .book-container .book-stiches-vertical:after {
        content: "";
        background-image: linear-gradient(#0000 0% 30%, #c69e6b50 30%, #c69e6b50);
        background-size: 1px 7px;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }

    .book-container .book-corner-top:before {
        top: -2px;
        left: -2px;
    }

    .book-container .book-corner-bottom:after,
    .book-container .book-corner-bottom:before,
    .book-container .book-corner-top:after,
    .book-container .book-corner-top:before {
        content: "";
        background: url(https://web.archive.org/web/20240327205612im_/https://assets.ficbook.net/assets/dist/images/corner-lt.c3ea5e603ad595db0f22.png) 0 0 no-repeat;
        width: 62px;
        height: 63px;
        position: absolute;
    }

    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    .book-container .book-corner-top:after {
        top: -2px;
        right: -2px;
        transform: scaleX(-1);
    }
    .book-container .book-corner-bottom:after,
    .book-container .book-corner-bottom:before,
    .book-container .book-corner-top:after,
    .book-container .book-corner-top:before {
        content: "";
        background: url(https://web.archive.org/web/20240327205612im_/https://assets.ficbook.net/assets/dist/images/corner-lt.c3ea5e603ad595db0f22.png) 0 0 no-repeat;
        width: 62px;
        height: 63px;
        position: absolute;
    }

    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }

    .book-container .book-corner-bottom:after,
    .book-container .book-corner-bottom:before,
    .book-container .book-corner-top:after,
    .book-container .book-corner-top:before {
        content: "";
        background: url(https://web.archive.org/web/20240327205612im_/https://assets.ficbook.net/assets/dist/images/corner-lt.c3ea5e603ad595db0f22.png) 0 0 no-repeat;
        width: 62px;
        height: 63px;
        position: absolute;
    }
    .book-container .book-corner-bottom:after,
    .book-container .book-corner-bottom:before,
    .book-container .book-corner-top:after,
    .book-container .book-corner-top:before {
        content: "";
        background: url(https://web.archive.org/web/20240327205612im_/https://assets.ficbook.net/assets/dist/images/corner-lt.c3ea5e603ad595db0f22.png) 0 0 no-repeat;
        width: 62px;
        height: 63px;
        position: absolute;
    }
    .book-container .book-corner-bottom:before {
        bottom: -2px;
        left: -2px;
        transform: scaleY(-1);
    }
    .book-container .book-corner-bottom:after,
    .book-container .book-corner-bottom:before,
    .book-container .book-corner-top:after,
    .book-container .book-corner-top:before {
        content: "";
        background: url(https://web.archive.org/web/20240327205612im_/https://assets.ficbook.net/assets/dist/images/corner-lt.c3ea5e603ad595db0f22.png) 0 0 no-repeat;
        width: 62px;
        height: 63px;
        position: absolute;
    }

    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }
    *,
    :before,
    :after {
        box-sizing: border-box;
    }

    .book-container .book-corner-bottom:after,
    .book-container .book-corner-bottom:before,
    .book-container .book-corner-top:after,
    .book-container .book-corner-top:before {
        content: "";
        background: url(https://web.archive.org/web/20240327205612im_/https://assets.ficbook.net/assets/dist/images/corner-lt.c3ea5e603ad595db0f22.png) 0 0 no-repeat;
        width: 62px;
        height: 63px;
        position: absolute;
    }
    .book-container .book-corner-bottom:after,
    .book-container .book-corner-bottom:before,
    .book-container .book-corner-top:after,
    .book-container .book-corner-top:before {
        content: "";
        background: url(https://web.archive.org/web/20240327205612im_/https://assets.ficbook.net/assets/dist/images/corner-lt.c3ea5e603ad595db0f22.png) 0 0 no-repeat;
        width: 62px;
        height: 63px;
        position: absolute;
    }
    .book-container .book-corner-bottom:after {
        bottom: -2px;
        right: -2px;
        transform: scale(-1);
    }
    .book-container .book-corner-bottom:after,
    .book-container .book-corner-bottom:before,
    .book-container .book-corner-top:after,
    .book-container .book-corner-top:before {
        content: "";
        background: url(https://web.archive.org/web/20240327205612im_/https://asse...

Reviews

No reviews yet.