shiori/internal/view/less/bookmark-item.less

.bookmark {
    display         : flex;
    flex-flow       : column nowrap;
    min-width       : 0;
    border          : 1px solid var(--border);
    background-color: var(--contentBg);
    height          : 100%;
    position        : relative;

    &:hover,
    &:focus {
        .bookmark-menu>a {
            display: block;
        }
    }

    &.selected {
        background-color: var(--selectedBg);
    }

    .bookmark-selector {
        position: absolute;
        top     : 0;
        left    : 0;
        width   : 100%;
        height  : 100%;
        z-index : 9;
    }

    .bookmark-link {
        display: block;
        cursor : default;

        &[href] {
            cursor: pointer;

            &:hover,
            &:focus {
                .title {
                    color: var(--main);
                }
            }
        }

        span.thumbnail {
            width              : 100%;
            height             : 200px;
            display            : block;
            background-size    : cover;
            background-repeat  : no-repeat;
            background-position: center center;
            margin-bottom      : 8px;
            border-bottom      : 1px solid var(--border);
        }

        .id {
            color           : var(--color);
            border          : 1px solid var(--border);
            background-color: var(--contentBg);
            font-size       : 0.7em;
            font-weight     : bold;
            left            : -1px;
            top             : -1px;
            position        : absolute;
            padding         : 0px 0.3em;
            opacity         : 0.7;
        }

        .title {
            text-overflow: ellipsis;
            word-wrap    : break-word;
            overflow     : hidden;
            font-size    : 1.2em;
            line-height  : 1.3em;
            max-height   : 5.2em;
            font-weight  : 600;
            padding      : 0 16px;
            color        : var(--color);

            &:first-child {
                margin-top: 16px;
            }

            i {
                color      : var(--colorLink);
                margin-left: 4px;
                font-size  : 14px;
            }
        }

        .excerpt {
            color        : var(--color);
            margin-top   : 8px;
            padding      : 0 16px;
            text-overflow: ellipsis;
            word-wrap    : break-word;
            overflow     : hidden;
            font-size    : 0.9em;
            line-height  : 1.5em;
            max-height   : 10.5em;
        }
    }

    .bookmark-tags {
        display  : flex;
        flex-flow: row wrap;
        margin   : 8px 0 -4px;
        padding  : 0 8px;

        a {
            margin          : 4px;
            padding         : 4px 8px;
            font-size       : 0.8em;
            font-weight     : 600;
            border          : 1px solid var(--border);
            border-radius   : 4px;
            color           : var(--colorLink);
            background-color: var(--contentBg);

            &:hover,
            &:focus {
                color: var(--main);
            }
        }
    }

    .bookmark-menu {
        padding    : 8px 16px 16px;
        display    : flex;
        flex-flow  : row nowrap;
        min-width  : 0;
        min-height : 0;
        align-items: center;

        a {
            color      : var(--colorLink);
            flex-shrink: 0;
            opacity    : 0.8;
            display    : none;
            font-size  : 0.9em;

            &:not(:last-child) {
                margin-right: 12px;
            }

            &:hover,
            &:focus {
                color  : var(--main);
                opacity: 1;
            }
        }

        .url {
            flex         : 1 0;
            opacity      : 1;
            display      : block;
            white-space  : nowrap;
            overflow     : hidden;
            text-overflow: ellipsis;
            line-height  : 21px;

            &:not([href]) {
                cursor: default;
                color : var(--colorLink);
            }
        }

        @media (max-width: 600px) {
            a {
                display: block;
            }
        }
    }
}

.bookmark.list {
    border-top-width   : 0;
    border-bottom-width: 1px;
    padding            : 16px 24px 16px 100px;

    &:first-child {
        border-top-width: 1px;
    }

    .bookmark-link {
        span.thumbnail {
            position     : absolute;
            top          : 0;
            left         : 0;
            width        : 100px;
            height       : 100%;
            margin-bottom: 0;
            border-bottom: 0px;
            border-right : 1px solid var(--border);
        }

        .title {
            margin      : 0;
            padding-left: 24px;
        }
    }

    .excerpt,
    >.spacer {
        display: none;
    }

    .bookmark-tags {
        padding-left : 16px;
        padding-right: 0;
    }

    .bookmark-menu {
        padding    : 8px 0 0 24px;
        align-items: flex-end;
    }

    &.no-thumbnail {
        padding-left : 16px;
        padding-right: 16px;

        .bookmark-link .title {
            padding      : 0;
            margin-bottom: 4px;
        }

        .excerpt {
            margin-top   : 0;
            margin-bottom: 4px;
            padding      : 0;
            display      : block;
        }

        .bookmark-tags {
            padding-left: 0;
            margin      : 0 -4px 0;
        }

        .bookmark-menu {
            padding-top : 0;
            padding-left: 0;
        }
    }

    @media (max-width: 600px) {
        padding            : 8px 16px 8px 70px;
        border-width       : 0 !important;
        border-bottom-width: 1px !important;

        .bookmark-link {
            span.thumbnail {
                width: 70px;
            }

            .title {
                font-size   : 1.1em;
                font-weight : 500;
                padding-left: 16px;
            }
        }

        .bookmark-tags {
            padding-left: 8px;
        }

        .bookmark-menu {
            padding-left: 16px;
        }
    }
}