[BUGFIX] Display FlashMessage in View Module
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / module / _viewpage.scss
1 //
2 // Viewpage
3 // ========
4 //
5
6 //
7 // Variables
8 //
9 $viewpage-bg: #494949;
10 $viewpage-resizable-size: 5px;
11 $viewpage-item-bg: #292929;
12 $viewpage-item-color: #fafafa;
13 $viewpage-topbar-height: 40px;
14
15 //
16 // Module
17 //
18 .typo3-module-viewpage {
19 background-color: $viewpage-bg;
20
21 .module {
22 background-color: transparent;
23 }
24
25 .module-body {
26 text-align: center;
27
28 .typo3-messages {
29 text-align: left;
30 }
31 }
32
33 .ui-resizable-w {
34 left: -$viewpage-resizable-size;
35 height: 100%;
36 width: $viewpage-resizable-size;
37 }
38
39 .ui-resizable-s {
40 bottom: -$viewpage-resizable-size;
41 height: $viewpage-resizable-size;
42 }
43
44 .ui-resizable-e {
45 right: -$viewpage-resizable-size;
46 height: 100%;
47 width: $viewpage-resizable-size;
48 }
49
50 .ui-resizable-se,
51 .ui-resizable-sw {
52 height: $viewpage-resizable-size;
53 width: $viewpage-resizable-size;
54 background-image: none;
55 bottom: -$viewpage-resizable-size;
56 }
57
58 .ui-resizable-sw {
59 left: -$viewpage-resizable-size;
60 }
61
62 .ui-resizable-se {
63 right: -$viewpage-resizable-size;
64 }
65 }
66
67 //
68 // Item
69 //
70 .viewpage-item {
71 position: relative;
72 display: inline-block;
73 background-color: $viewpage-item-bg;
74 box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
75 color: $viewpage-item-color;
76
77 a {
78 color: $viewpage-item-color;
79 }
80
81 iframe {
82 display: block;
83 }
84 }
85
86 //
87 // Topbar
88 //
89 .viewpage-topbar {
90 height: $viewpage-topbar-height;
91 flex-shrink: 0;
92 padding: 0.75em 1em;
93 display: flex;
94 flex-direction: row;
95 justify-content: space-between;
96 align-items: center;
97 }
98
99 .viewpage-topbar-orientation {
100 a {
101 opacity: 0.5;
102 transition: all 0.2s ease-in-out;
103
104 &:hover {
105 opacity: 1;
106 }
107 }
108 }
109
110 .viewpage-topbar-preset {
111 button {
112 background-color: transparent;
113 border: none;
114 padding-left: 20px;
115 padding-right: 20px;
116
117 span {
118 vertical-align: middle;
119 }
120 }
121 }
122
123 .viewpage-topbar-size {
124 input {
125 background-color: transparent;
126 padding-left: 0;
127 padding-right: 0;
128 border: 0;
129 border-bottom: 1px solid rgba($brand-primary, 0.5);
130 transition: all 0.5s ease-in-out;
131
132 &:focus,
133 &:hover {
134 outline: 0;
135 border-bottom-color: rgba($brand-primary, 1);
136 }
137 }
138 }
139
140 //
141 // Resizeable
142 //
143 .viewpage-resizeable {
144 background-color: #fafafa;
145 }
146
147 //
148 // Preset Item
149 //
150 .viewpage-preset-item {
151 display: flex;
152 }
153
154 .viewpage-preset-item-icon {
155 padding-right: 0.5em;
156 }
157
158 .viewpage-preset-item-label {
159 flex: 1 1 auto;
160 }
161
162 .viewpage-preset-item-size {
163 padding-left: 1em;
164 opacity: 0.5;
165 }