xref: /template/sprintdoc/css/area_content.less (revision 53c0f991fe17e2f61adce6bdb48fe4289b8008f2) 
1/**
2 * This file provides the design styles for the page content.
3 */
4
5.content .row {
6    > .col-xs-12 {
7        box-shadow: @box-shadow;
8
9        #dokuwiki__content {
10            position: relative;
11
12            &::before {
13                content: '';
14                position: absolute;
15                top: 0;
16                left: 0;
17                height: @page-header_height;
18                box-sizing: border-box;
19                width: 100%;
20                background-color: @ini_background_page_header;
21                border-bottom: 1px solid @ini_border_light;
22            }
23
24            .page-content {
25                padding-top: @page-header_height;
26
27                .msg-area + * {
28                    clear: both;
29                    padding-top: 1em; // as h1
30                }
31            }
32        }
33    }
34}
35
36.main-content > .level2,
37.main-content > .level1,
38.main-content > .level3,
39.main-content > .level4,
40.main-content > .level5,
41.main-content > .level6 {
42    > p,
43    > ul > li .li {
44        a {
45            font-size: inherit;
46        }
47    }
48}
49
50.level1,
51.level2,
52.level3,
53.level4,
54.level5,
55.level6 {
56    line-height: @line-height-default;
57
58    div, p, th, td, textarea,
59    h1, h2, h3, h4, h5, h6,
60    dl, dt, dd, ol, ul, li {
61        line-height: @line-height-default;
62    }
63}
64
65/* Code copy functionality styles */
66.code-wrapper {
67    position: relative;
68    display: inline-block;
69    width: 100%;
70
71    &.has-copy-btn {
72        .code,
73        pre {
74            padding-right: 3rem; // Make room for copy button
75        }
76    }
77}
78
79.code-copy-btn {
80    position: absolute;
81    top: 1.5rem;
82    right: 0.5rem;
83    padding: 0.25rem 0.5rem;
84    background-color: @ini_background;
85    border: 1px solid @ini_border;
86    border-radius: @fix_border-radius;
87    cursor: pointer;
88    opacity: 0.7;
89    transition: opacity @transition, background-color @transition;
90    color: @ini_text;
91    line-height: 1;
92
93    &:hover {
94        opacity: 1;
95        background-color: @ini_background_alt;
96    }
97
98    &:active {
99        transform: translateY(1px);
100    }
101
102    svg {
103        display: block;
104        width: 16px;
105        height: 16px;
106    }
107
108    &.copy-success {
109        background-color: #d4edda;
110        border-color: #c3e6cb;
111        color: #155724;
112    }
113
114    &.copy-error {
115        background-color: #f8d7da;
116        border-color: #f5c6cb;
117        color: #721c24;
118    }
119}
120
121/* Ensure code blocks have proper positioning context */
122.code,
123pre.code,
124pre > code {
125    position: relative;
126}
127
128/* Mobile adjustments */
129@media @screen_max-xs {
130    .code-copy-btn {
131        padding: 0.2rem 0.4rem;
132
133        svg {
134            width: 14px;
135            height: 14px;
136        }
137    }
138}
139