]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_pages.scss
Updated page pointer to sit near mouse location and extracted page js into browserify...
[bookstack] / resources / assets / sass / _pages.scss
1 .page-editor {
2   display: flex;
3   flex-direction: column;
4   align-items: stretch;
5   .faded-small {
6     height: auto;
7   }
8   .edit-area {
9     flex: 1;
10     flex-direction: column;
11   }
12 }
13
14 .page-style.editor {
15   padding: 0 !important;
16 }
17
18 .page-content {
19   max-width: 840px;
20   overflow-wrap: break-word;
21   .align-left {
22     text-align: left;
23   }
24   img.align-left, table.align-left {
25     float: left !important;
26     margin: $-xs $-s $-xs 0;
27   }
28   .align-right {
29     float: right !important;
30   }
31   img.align-right, table.align-right {
32     text-align: right;
33     margin: $-xs 0 $-xs $-s;
34   }
35   .align-center {
36     text-align: center;
37   }
38   img {
39     max-width: 100%;
40     height:auto;
41   }
42   h1, h2, h3, h4, h5, h6 {
43     clear: both;
44   }
45   hr {
46     clear: both;
47     margin: $-m 0;
48   }
49   table {
50     word-break: break-all;
51     word-break: break-word;
52     hyphens: auto;
53   }
54 }
55
56 // Page content pointers
57 .pointer-container {
58   position: relative;
59   display: none;
60   left: 0;
61 }
62 .pointer {
63   border: 1px solid #CCC;
64   display: inline-block;
65   padding: $-xs $-s;
66   border-radius: 4px;
67   box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35);
68   position: absolute;
69   top: -60px;
70   background-color:#FFF;
71   width: 272px;
72   &:before {
73     position: absolute;
74     left: 50%;
75     bottom: -9px;
76     width: 16px;
77     height: 16px;
78     margin-left: -8px;
79     content: '';
80     display: block;
81     background-color:#FFF;
82     transform: rotate(45deg);
83     transform-origin: 50% 50%;
84     border-bottom: 1px solid #CCC;
85     border-right: 1px solid #CCC;
86     z-index: 1;
87   }
88   input {
89     background-color: #FFF;
90     border: 1px solid #DDD;
91     color: #666;
92     width: 180px;
93     z-index: 40;
94   }
95   input, button {
96     position: relative;
97     border-radius: 0;
98     height: 28px;
99     font-size: 12px;
100   }
101   > i {
102     color: #888;
103     font-size: 18px;
104     padding-top: 4px;
105   }
106   .button {
107     line-height: 1;
108     margin: 0 0 0 -4px;
109     box-shadow: none;
110   }
111 }
112
113 h1, h2, h3, h4, h5, h6 {
114   &:hover a.link-hook {
115     opacity: 1;
116     transform: translate3d(0, 0, 0);
117   }
118 }