MDL-58634 editor_atto: prevent notifications overlapping form fields
[moodle.git] / lib / editor / atto / styles.css
CommitLineData
adca7326
DW
1.editor_atto_content_wrap {
2 background-color: white;
4c37c1f4 3 color: #333;
adca7326 4}
bc33e9bd 5
adca7326
DW
6.editor_atto_content {
7 padding: 4px;
f3319803
AD
8 resize: vertical;
9 overflow: auto;
adca7326
DW
10}
11
12.editor_atto_content_wrap,
13.editor_atto + textarea {
14 width: 100%;
15 padding: 0;
bc33e9bd 16 border: 1px solid #bbb;
adca7326
DW
17 border-top: none;
18}
19
20.editor_atto + textarea {
21 border-radius: 0;
22 resize: vertical;
23 margin-top: -1px;
24}
25
26div.editor_atto_toolbar {
27 display: block;
bc33e9bd 28 background: #f2f2f2;
adca7326 29 min-height: 35px;
bc33e9bd 30 border: 1px solid #bbb;
adca7326
DW
31 width: 100%;
32 padding: 0 0 9px 0;
33}
34
35div.editor_atto_toolbar button {
079c3a94 36 padding: 4px 9px;
adca7326 37 background: none;
4c37c1f4 38 border: 0;
adca7326
DW
39 margin: 0;
40 border-radius: 0;
41 cursor: pointer;
bc33e9bd 42}
adca7326
DW
43
44div.editor_atto_toolbar button + button {
bc33e9bd 45 border-left: 1px solid #ccc;
adca7326
DW
46}
47
48div.editor_atto_toolbar button[disabled] {
49 opacity: .45;
50 background: none;
51 cursor: default;
52}
53
54.editor_atto_toolbar button:hover {
aea8eaec 55 background-image: radial-gradient(ellipse at center, #fff 60%, #dfdfdf 100%);
adca7326
DW
56 background-color: #ebebeb;
57}
58
bc33e9bd
DP
59.editor_atto_toolbar button:active,
60.editor_atto_toolbar button.highlight {
aea8eaec 61 background-image: radial-gradient(ellipse at center, #fff 40%, #dfdfdf 100%);
adca7326
DW
62 background-color: #dfdfdf;
63}
64
8095505e
DW
65/* Make firefox button sizes match other browsers */
66div.editor_atto_toolbar button::-moz-focus-inner {
bc33e9bd
DP
67 border: 0;
68 padding: 0;
8095505e
DW
69}
70
d3d2f09c 71div.editor_atto_toolbar button .icon {
99fe296e 72 padding: 0;
62467795 73 margin: 2px 0;
adca7326
DW
74}
75
adca7326
DW
76div.editor_atto_toolbar div.atto_group {
77 display: inline-block;
bc33e9bd
DP
78 border: 1px solid #ccc;
79 border-bottom: 1px solid #b3b3b3;
adca7326 80 border-radius: 4px;
4c37c1f4 81 margin: 9px 0 0 9px;
bc33e9bd 82 background: #fff;
adca7326
DW
83}
84
85.editor_atto_content img {
bc33e9bd
DP
86 resize: both;
87 overflow: auto;
adca7326
DW
88}
89
4c37c1f4
FM
90.atto_hasmenu {
91 /* IE8 places the images on top of each other if that is not set. */
92 white-space: nowrap;
93}
94
d3d2f09c 95.atto_menuentry .icon {
adca7326
DW
96 width: 16px;
97 height: 16px;
98}
99
adca7326 100.atto_menuentry {
adca7326
DW
101 clear: left;
102}
103
104.atto_menuentry h1,
105.atto_menuentry h2,
106.atto_menuentry p {
107 margin: 4px;
108}
109
adca7326
DW
110.atto_form label.sameline {
111 display: inline-block;
8095505e 112 min-width: 10em;
adca7326 113}
bc33e9bd 114
adca7326
DW
115.atto_form textarea.fullwidth,
116.atto_form input.fullwidth {
117 width: 100%;
118}
bc33e9bd 119
adca7326
DW
120.atto_form {
121 padding-left: 30px;
122 padding-right: 30px;
123}
bc33e9bd 124
adca7326
DW
125.atto_form label {
126 display: block;
23cead68 127 margin: 0 0 5px 0;
adca7326
DW
128}
129
adca7326
DW
130.atto_control {
131 position: absolute;
132 right: -6px;
133 bottom: -6px;
134 display: none;
135 cursor: pointer;
136}
bc33e9bd 137
d3d2f09c 138.atto_control .icon {
adca7326
DW
139 background-color: white;
140}
bc33e9bd 141
adca7326
DW
142div.editor_atto_content:focus .atto_control,
143div.editor_atto_content:hover .atto_control {
144 display: block;
145}
146
9b2fc574 147.editor_atto_menu.yui3-menu-hidden {
adca7326
DW
148 display: none;
149}
18ce3fe4
JF
150
151/* Get broken images back in firefox */
152.editor_atto_content img:-moz-broken {
bc33e9bd
DP
153 -moz-force-broken-image-icon: 1;
154 min-width: 24px;
155 min-height: 24px;
62467795
AN
156}
157
ee616cff 158/* Atto menu styling */
62467795 159.moodle-dialogue-base .editor_atto_menu .moodle-dialogue-content .moodle-dialogue-bd {
ee616cff 160 padding: 0;
62467795 161 z-index: 1000;
62467795
AN
162}
163
ee616cff 164.editor_atto_menu .dropdown-menu > li > a {
d3d2f09c 165 margin: 3px 14px;
62467795
AN
166}
167
ee616cff
AN
168.editor_atto_menu .open ul.dropdown-menu {
169 padding-top: 5px;
170 padding-bottom: 5px;
62467795 171}
bc33e9bd 172
369a63ac 173.editor_atto_wrap {
75c86d13 174 position: relative;
369a63ac 175}
ed7844b5
FM
176/*rtl:ignore*/
177.editor_atto_wrap textarea {
b555d94d
NK
178 direction: ltr;
179}
bc33e9bd 180
369a63ac
DC
181.editor_atto_notification .atto_info,
182.editor_atto_notification .atto_warning {
75c86d13 183 display: inline-block;
bc33e9bd 184 background-color: #f2f2f2;
75c86d13
DW
185 padding: 0.5em;
186 padding-left: 1em;
187 padding-right: 1em;
369a63ac
DC
188 border-bottom-left-radius: 1em;
189 border-bottom-right-radius: 1em;
190}
bc33e9bd 191
369a63ac 192.editor_atto_notification .atto_info {
bc33e9bd 193 background-color: #f2f2f2;
75c86d13 194}
bc33e9bd 195
75c86d13 196.editor_atto_notification .atto_warning {
bc33e9bd 197 background-color: #ffd700;
369a63ac 198}
bc33e9bd 199
369a63ac
DC
200.editor_atto_toolbar,
201.editor_atto_content_wrap,
202.editor_atto + textarea {
203 box-sizing: border-box;
75c86d13 204}