Danbooru

Custom CSS Thread

Posted under General

Nameless_Contributor said:

@jhs_master something like this? It will be bad for very tall images.

/* Single-column full-width post thumbnails regardless of size */
@media screen and (max-width: 660px) {
    #c-posts .post-preview-image {
        width: 100vw;
        max-height: unset;
    }
    #c-posts .posts-container {
        grid-template-columns: unset;
    }
}

Yes, that's it! Thank you very much for the help!

Add animation to preview images border

Add blink animation or flow animation to any preview images with a colored border.
Compatible with Chrome. May be compatible with Safari 16.4+.
At least preview images with a single colored border work on both Firefox and Safari.
Some animaiton needs hover to show except pending and flagged posts.
Find and replace all :hover to make animation always show.

Show
:root {
    --angle: 0deg;
    --flow-animation: rotate 4s linear infinite;
    --current-flagged-color: var(--preview-pending-color);
}

body[data-current-user-is-approver=true] {
    --current-flagged-color: var(--preview-flagged-color);
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes blink {
    to {
        border-color: transparent;
    }
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

.post-status-has-children img:hover,
.post-status-has-parent img:hover,
.post-status-deleted img:hover,
.post-status-pending img,
.post-status-flagged img {
    animation: blink 1.0s infinite alternate;
}

/* CSS Specificity: https://www.w3schools.com/css/css_specificity.asp */
article[data-tags~="loli"] img.post-preview-image,
article[data-tags~="shota"] img.post-preview-image {
    border-color: pink;
}

article[data-tags~="loli"] img:hover,
article[data-tags~="shota"] img:hover {
    border-image: conic-gradient(from var(--angle), transparent 50%, pink) 1;
    animation: var(--flow-animation);
}

/* 2 colors */
.post-status-pending[data-tags~="loli"] img.post-preview-image,
.post-status-pending[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-pending-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged[data-tags~="loli"] img.post-preview-image,
.post-status-flagged[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--current-flagged-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-parent img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--preview-pending-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-parent img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--current-flagged-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 12% 38%, transparent, var(--preview-pending-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 12% 38%, transparent, var(--current-flagged-color) 62% 88%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--preview-has-children-color) 62% 88%, transparent) 1;
}

.post-status-deleted.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 12% 38%, transparent, var(--preview-deleted-color) 62% 88%, transparent) 1;
}

.post-status-deleted.post-status-has-parent img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 12% 38%, transparent, var(--preview-deleted-color) 62% 88%, transparent) 1;
}

.post-status-has-parent[data-tags~="loli"] img.post-preview-image,
.post-status-has-parent[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-has-parent-color) 62% 88%, transparent) 1;
}

.post-status-has-children[data-tags~="loli"] img.post-preview-image,
.post-status-has-children[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-has-children-color) 62% 88%, transparent) 1;
}

.post-status-deleted[data-tags~="loli"] img.post-preview-image,
.post-status-deleted[data-tags~="shota"] img.post-preview-image {
    border-image: conic-gradient(from var(--angle), transparent, pink 12% 38%, transparent, var(--preview-deleted-color) 62% 88%, transparent) 1;
}

/* 3 colors */
.post-status-pending.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-pending-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--current-flagged-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-children[data-tags~="loli"] img,
.post-status-pending.post-status-has-children[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-children-color) 30% 45%, transparent, var(--preview-pending-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-children[data-tags~="loli"] img,
.post-status-flagged.post-status-has-children[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-children-color) 30% 45%, transparent, var(--current-flagged-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-pending.post-status-has-parent[data-tags~="loli"] img,
.post-status-pending.post-status-has-parent[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-pending-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-flagged.post-status-has-parent[data-tags~="loli"] img,
.post-status-flagged.post-status-has-parent[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--current-flagged-color) 55% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-has-parent.post-status-has-children[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children[data-tags~="shota"] img {
    /* Shorter loli/shota border?
     * 5% 32.5%, 42.5% 70%, 80% 95% */
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, pink 55% 95%, transparent) 1;
}

.post-status-deleted.post-status-has-parent.post-status-has-children img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-deleted-color) 55% 95%, transparent) 1;
}

.post-status-deleted.post-status-has-children[data-tags~="loli"] img,
.post-status-deleted.post-status-has-children[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-deleted-color) 55% 95%, transparent) 1;
}

.post-status-deleted.post-status-has-parent[data-tags~="loli"] img,
.post-status-deleted.post-status-has-parent[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-deleted-color) 55% 95%, transparent) 1;
}

/* 4 colors */
.post-status-has-parent.post-status-has-children.post-status-pending[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-pending[data-tags~="shota"] img {
    /* Longer pending/flagged border?
     * 10% 22.5%, 32.5% 42.5%, 52.5% 65%, 80% 95% */
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-parent-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-has-children-color) 55% 70%, transparent, var(--preview-pending-color) 80% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-has-parent.post-status-has-children.post-status-flagged[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-flagged[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, var(--preview-has-children-color) 5% 20%, transparent, pink 30% 45%, transparent, var(--preview-has-parent-color) 55% 70%, transparent, var(--current-flagged-color) 80% 95%, transparent) 1;
    animation: var(--flow-animation);
}

.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="shota"] img {
    border-image: conic-gradient(from var(--angle), transparent, pink 5% 20%, transparent, var(--preview-has-parent-color) 30% 45%, transparent, var(--preview-has-children-color) 55% 70%, transparent, var(--preview-deleted-color) 80% 95%, transparent) 1;
}

.post-status-has-parent.post-status-has-children img:hover,
.post-status-deleted.post-status-has-children img:hover,
.post-status-deleted.post-status-has-parent img:hover,
.post-status-has-parent[data-tags~="loli"] img:hover,
.post-status-has-parent[data-tags~="shota"] img:hover,
.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted[data-tags~="loli"] img:hover,
.post-status-deleted[data-tags~="shota"] img:hover,
.post-status-has-parent.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-has-parent.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted.post-status-has-parent.post-status-has-children img:hover,
.post-status-deleted.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-deleted.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted.post-status-has-parent[data-tags~="loli"] img:hover,
.post-status-deleted.post-status-has-parent[data-tags~="shota"] img:hover,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="loli"] img:hover,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="shota"] img:hover {
    animation: var(--flow-animation);
}
Only blink animation + gradient border

Works on Chrome. Gradient border only snippet is here: forum #239804

Show
:root {
  --current-flagged-color: var(--preview-pending-color);
}

body[data-current-user-is-approver=true] {
  --current-flagged-color: var(--preview-flagged-color);
}

/* Border settings */
article[data-tags~="loli"] img.post-preview-image,
article[data-tags~="shota"] img.post-preview-image {
  border-color: pink;
}

/* 2 colors */
.post-status-pending.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-children-color), var(--preview-pending-color)) 1;
}

.post-status-flagged.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-children-color), var(--current-flagged-color)) 1;
}

.post-status-pending.post-status-has-parent img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--preview-pending-color)) 1;
}

.post-status-flagged.post-status-has-parent img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--current-flagged-color)) 1;
}

.post-status-has-parent.post-status-has-children img,
.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--preview-has-children-color)) 1;
}

.post-status-deleted.post-status-has-children img {
  border-image: linear-gradient(to right, var(--preview-has-children-color), var(--preview-deleted-color)) 1;
}

.post-status-deleted.post-status-has-parent img {
  border-image: linear-gradient(to right, var(--preview-has-parent-color), var(--preview-deleted-color)) 1;
}

.post-status-has-children[data-tags~="loli"] img,
.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-has-children-color)) 1;
}

.post-status-has-parent[data-tags~="loli"] img,
.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-has-parent-color)) 1;
}

.post-status-pending[data-tags~="loli"] img,
.post-status-pending[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-pending-color)) 1;
}

.post-status-flagged[data-tags~="loli"] img,
.post-status-flagged[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--current-flagged-color)) 1;
}

.post-status-deleted[data-tags~="loli"] img,
.post-status-deleted[data-tags~="shota"] img {
  border-image: linear-gradient(to right, pink, var(--preview-deleted-color)) 1;
}

/* 3 colors */
.post-status-has-parent.post-status-has-children[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--preview-has-children-color) 90%) 1;
}

.post-status-pending.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, var(--preview-has-parent-color) 30% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-flagged.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, var(--preview-has-parent-color) 30% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-pending.post-status-has-children[data-tags~="loli"] img,
.post-status-pending.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, pink 30% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-flagged.post-status-has-children[data-tags~="loli"] img,
.post-status-flagged.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, pink 30% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-pending.post-status-has-parent[data-tags~="loli"] img,
.post-status-pending.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-flagged.post-status-has-parent[data-tags~="loli"] img,
.post-status-flagged.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-deleted.post-status-has-children[data-tags~="loli"] img,
.post-status-deleted.post-status-has-children[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, pink 30% 70%, var(--preview-deleted-color) 90%) 1;
}

.post-status-deleted.post-status-has-parent[data-tags~="loli"] img,
.post-status-deleted.post-status-has-parent[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 30% 70%, var(--preview-deleted-color) 90%) 1;
}

.post-status-deleted.post-status-has-parent.post-status-has-children img {
  border-image: linear-gradient(135deg, var(--preview-has-children-color) 10%, var(--preview-has-parent-color) 30% 70%, var(--preview-deleted-color) 90%) 1;
}

/* 4 colors */
.post-status-has-parent.post-status-has-children.post-status-pending[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-pending[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 20% 45%, var(--preview-has-children-color) 55% 70%, var(--preview-pending-color) 90%) 1;
}

.post-status-has-parent.post-status-has-children.post-status-flagged[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-flagged[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 20% 45%, var(--preview-has-children-color) 55% 70%, var(--current-flagged-color) 90%) 1;
}

.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="loli"] img,
.post-status-has-parent.post-status-has-children.post-status-deleted[data-tags~="shota"] img {
  border-image: linear-gradient(135deg, var(--preview-has-parent-color) 10%, pink 20% 45%, var(--preview-has-children-color) 55% 70%, var(--preview-deleted-color) 90%) 1;
}

@keyframes blinkColor {
  to {
    border-color: transparent;
  }
}

article[data-tags~="loli"] img:hover,
article[data-tags~="shota"] img:hover,
.post-status-has-children img:hover,
.post-status-has-parent img:hover,
.post-status-deleted img:hover,
.post-status-pending img,
.post-status-flagged img {
  animation: blinkColor 1.0s infinite alternate;
}

@keyframes blink {
  to {
    border-image: linear-gradient(to right, transparent, transparent) 1;
  }
}

.post-status-pending.post-status-has-children img,
.post-status-pending.post-status-has-parent img,
.post-status-flagged.post-status-has-children img,
.post-status-flagged.post-status-has-parent img,
.post-status-has-parent.post-status-has-children img:hover,
.post-status-deleted.post-status-has-children img:hover,
.post-status-deleted.post-status-has-parent img:hover,
.post-status-has-parent[data-tags~="loli"] img:hover,
.post-status-has-parent[data-tags~="shota"] img:hover,
.post-status-has-children[data-tags~="loli"] img:hover,
.post-status-has-children[data-tags~="shota"] img:hover,
.post-status-deleted[data-tags~="loli"] img:hover,
.post-status-deleted[data-tags~="shota"] img:hover {
  animation: blink 1.0s infinite alternate;
}

I use shades of pink to discern Contributors and Approvers without making the site too colorful on dark mode. Simple and kinda pointless, but sharing it anyway.

.user-contributor {color: #e684e9 !important}
.user-approver {color: #f5cdf6 !important}

Additionaly, I highlight my username a tiny bit with a glowing effect:

a[href="/users/825936"] {animation: glow 1s ease-in-out infinite alternate !important;}

@keyframes glow {
  from {text-shadow: 0 0 2px var(--user-member-color), 0 0 3px var(--user-builder-color);}
  to {text-shadow: 0 0 3px #f5cdf6, 0 0 2px #e684e9;}
}

Maiden_in_Orange said:

Hello there. Is there any CSS code that removes the forum activity indicator (as in, makes it not italicize when there's unread forum posts) for me?

    .forum-updated a {
        font-style: unset !important;
    }

Sharing for dumbos like me. If someone didn't use the wiki tab before the recent change and/or won't use it now, this can remove it:

.current-tag-wiki {display: none}

I only use the related, translated, suggested and frequent tabs when I tag posts, so additionaly, this is to remove the recent tags tab:

.recent-related-tags-column {display: none}

I wanted the "highlight posts with dangerous tags in the modqueue grid view" to work in the list view. I wanted the entire card to be red, but you know the drill, Idk how and if it's possible with CSS only. This is what I've been using for months now:

#c-modqueue .post-preview[data-tags~='md5_mismatch']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='third-party_edit']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='screenshot']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='anime_screencap']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='duplicate']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='image_sample']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='resized']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='ai-generated']  .mod-queue-preview,
#c-modqueue .post-preview[data-tags~='ai-assisted']  .mod-queue-preview{
   background-color: var(--modqueue-tag-warning-color)
}

I also tried using an edit of the "blur E and Q rated posts" CSS before that was somewhat like this:

#c-modqueue .post-preview[data-tags~='anime_screencap']  .post-preview-image{
   filter: invert(9%) sepia(93%) saturate(3822%) hue-rotate(6deg) brightness(35%) contrast(122%) opacity(0.2) blur(10px)
}
#c-modqueue .post-preview[data-tags~='anime_screencap']  .post-preview-image:hover{
   filter: none
}

It works on every page with a post preview if you remove #c-modqueue and it can be used along with the other code, but it was obviously bad to look at the thumbnails on mobile.

EDIT: I love you, thanks!

Updated

Sessyoin_Kiara said:

...I wanted the entire card to be red...

Try:

#c-modqueue div.mod-queue-preview[data-tags~='third-party_edit'],
#c-modqueue div.mod-queue-preview[data-tags~='screenshot'],
#c-modqueue div.mod-queue-preview[data-tags~='anime_screencap'],
#c-modqueue div.mod-queue-preview[data-tags~='duplicate'],
#c-modqueue div.mod-queue-preview[data-tags~='image_sample'],
#c-modqueue div.mod-queue-preview[data-tags~='md5_mismatch'],
#c-modqueue div.mod-queue-preview[data-tags~='resized'],
#c-modqueue div.mod-queue-preview[data-tags~='ai-generated']
{
    background-color: var(--modqueue-tag-warning-color) !important;
}

Not sure if this is the right place to ask but I can't seem to get the OLED black theme (from the about:custom css style page) to work:

/* Custom theme. OLED dark-mode theme */
body.dark, body[data-current-user-theme="dark"] {
    --grey-0: #e8e8e8;
    --grey-1: #d1d1d1;
    --grey-2: #ababab;
    --grey-3: #919191;
    --grey-4: #777777;
    --grey-5: #5b5b5b;
    --grey-6: #3f3f3f;
    --grey-7: #2c2c2c;
    --grey-8: #191919;
    --grey-9: #000000;
    
    --link-color: #ff4500;
    --link-hover-color: #f47464;

    --collection-pool-color: var(--link-color);
    --collection-pool-hover-color: var(--link-hover-color);
    
    --text-color: var(--grey-2);
    --header-color: var(--grey-1);
    
    --post-resized-notice-background: var(--post-search-notice-background);
    --notice-info-background: var(--post-search-notice-background);
    --post-child-notice-background: var(--post-search-notice-background);
    --post-parent-notice-background: var(--post-search-notice-background);

    --notice-info-border-color: var(--grey-5);
    
    --form-input-background: var(--grey-8);
    --form-input-text-color: var(--grey-3);
    --form-input-border-color: var(--grey-6);
    
    --form-button-background: var(--grey-3);
    --form-button-border-color: var(--grey-5);
}

alphashitlord said:

Not sure if this is the right place to ask but I can't seem to get the OLED black theme (from the about:custom css style page) to work:

You have to set the site theme to dark in user settings, this CSS replaces the regular dark theme.

1 15 16 17 18 19