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;
            }
        }

        .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: 4px 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);

            &: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;
            }

            @media (max-width: 800px) {
                display: block;

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

        .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);
            }
        }
    }

    &.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;
                white-space: nowrap;
            }
        }

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

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

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