xref: /template/writr/css/plugins/bloglinks.less (revision e2751be0730058d8d619d3f0b284bcab48ac8bbe) 
1/* =BlogLinks Plugin
2----------------------------------------------- */
3
4.site-main.hideBlogLinksTitle a.wikilink1{
5    font-size: 0;
6}
7
8#plugin_bloglinks__links{
9    width: @ini_content_width;
10    margin-left: -40px;
11    display: flex;
12    justify-content: space-between;
13    align-items: center;
14    > div {
15        width: 50%;
16        display: flex;
17        align-items: center;
18
19        a.wikilink1 {
20            background: @ini_text_alt;
21            color: @ini_background;
22            display: flex;
23            align-items: center;
24            justify-content: space-between;
25            transition: all 0.25s ease-in-out;
26            border-radius: 0px;
27            max-width: 80%;
28            line-height: 16px;
29            padding: 20px;
30            text-decoration: none;
31
32            span.title {
33                display: block;
34                max-width: 90%;
35            }
36
37            span.truncate {
38                display: inline-block !important;
39                white-space: nowrap;
40                overflow: hidden;
41                text-overflow: ellipsis;
42            }
43
44            span.icon {
45                display: inline-block;
46                font-family: 'bootstrap-icons';
47                font-size: 30px;
48                vertical-align: middle;
49            }
50        }
51        a.wikilink1:hover {
52            background: @ini_background;
53            color: @ini_text_alt;
54        }
55    }
56    .plugin_bloglinks__prev {
57
58        a.wikilink1 {
59            padding-left: 10px;
60            border-top-right-radius: 20px;
61            border-bottom-right-radius: 20px;
62
63            span.icon{
64                margin-right: 8px;
65            }
66            span.icon::before{
67                content: "\f284";
68            }
69        }
70    }
71    .plugin_bloglinks__next {
72
73        a.wikilink1 {
74            padding-right: 10px;
75            margin-left: auto;
76            border-top-left-radius: 20px;
77            border-bottom-left-radius: 20px;
78
79            span.icon{
80                margin-left: 8px;
81            }
82            span.icon::before{
83                content: "\f285";
84            }
85        }
86    }
87}
88
89.makeFullWidth #plugin_bloglinks__links{
90  width: ~"calc(100vw - 400px - @{ini_content_border})";
91}
92
93/* 960px > x */
94@media only screen and (max-width: 959px) {
95
96    .makeFullWidth #plugin_bloglinks__links {
97        width: ~"calc(100vw - 40px - 100px)";
98    }
99}
100
101/* 767px > x */
102@media only screen and (max-width: 767px) {
103
104    #plugin_bloglinks__links > div {
105
106      a.wikilink1 {
107
108        span.title {
109          display: none;
110        }
111      }
112    }
113
114    .makeFullWidth #plugin_bloglinks__links {
115      width: 100vw;
116    }
117}
118