MDL-58634 editor_atto: prevent notifications overlapping form fields
[moodle.git] / lib / editor / atto / styles.css
1 .editor_atto_content_wrap {
2     background-color: white;
3     color: #333;
4 }
6 .editor_atto_content {
7     padding: 4px;
8     resize: vertical;
9     overflow: auto;
10 }
12 .editor_atto_content_wrap,
13 .editor_atto + textarea {
14     width: 100%;
15     padding: 0;
16     border: 1px solid #bbb;
17     border-top: none;
18 }
20 .editor_atto + textarea {
21     border-radius: 0;
22     resize: vertical;
23     margin-top: -1px;
24 }
26 div.editor_atto_toolbar {
27     display: block;
28     background: #f2f2f2;
29     min-height: 35px;
30     border: 1px solid #bbb;
31     width: 100%;
32     padding: 0 0 9px 0;
33 }
35 div.editor_atto_toolbar button {
36     padding: 4px 9px;
37     background: none;
38     border: 0;
39     margin: 0;
40     border-radius: 0;
41     cursor: pointer;
42 }
44 div.editor_atto_toolbar button + button {
45     border-left: 1px solid #ccc;
46 }
48 div.editor_atto_toolbar button[disabled] {
49     opacity: .45;
50     background: none;
51     cursor: default;
52 }
54 .editor_atto_toolbar button:hover {
55     background-image: radial-gradient(ellipse at center, #fff 60%, #dfdfdf 100%);
56     background-color: #ebebeb;
57 }
59 .editor_atto_toolbar button:active,
60 .editor_atto_toolbar button.highlight {
61     background-image: radial-gradient(ellipse at center, #fff 40%, #dfdfdf 100%);
62     background-color: #dfdfdf;
63 }
65 /* Make firefox button sizes match other browsers */
66 div.editor_atto_toolbar button::-moz-focus-inner {
67     border: 0;
68     padding: 0;
69 }
71 div.editor_atto_toolbar button .icon {
72     padding: 0;
73     margin: 2px 0;
74 }
76 div.editor_atto_toolbar div.atto_group {
77     display: inline-block;
78     border: 1px solid #ccc;
79     border-bottom: 1px solid #b3b3b3;
80     border-radius: 4px;
81     margin: 9px 0 0 9px;
82     background: #fff;
83 }
85 .editor_atto_content img {
86     resize: both;
87     overflow: auto;
88 }
90 .atto_hasmenu {
91     /* IE8 places the images on top of each other if that is not set. */
92     white-space: nowrap;
93 }
95 .atto_menuentry .icon {
96     width: 16px;
97     height: 16px;
98 }
100 .atto_menuentry {
101     clear: left;
104 .atto_menuentry h1,
105 .atto_menuentry h2,
106 .atto_menuentry p {
107     margin: 4px;
110 .atto_form label.sameline {
111     display: inline-block;
112     min-width: 10em;
115 .atto_form textarea.fullwidth,
116 .atto_form input.fullwidth {
117     width: 100%;
120 .atto_form {
121     padding-left: 30px;
122     padding-right: 30px;
125 .atto_form label {
126     display: block;
127     margin: 0 0 5px 0;
130 .atto_control {
131     position: absolute;
132     right: -6px;
133     bottom: -6px;
134     display: none;
135     cursor: pointer;
138 .atto_control .icon {
139     background-color: white;
142 div.editor_atto_content:focus .atto_control,
143 div.editor_atto_content:hover .atto_control {
144     display: block;
147 .editor_atto_menu.yui3-menu-hidden {
148     display: none;
151 /* Get broken images back in firefox */
152 .editor_atto_content img:-moz-broken {
153     -moz-force-broken-image-icon: 1;
154     min-width: 24px;
155     min-height: 24px;
158 /* Atto menu styling */
159 .moodle-dialogue-base .editor_atto_menu .moodle-dialogue-content .moodle-dialogue-bd {
160     padding: 0;
161     z-index: 1000;
164 .editor_atto_menu .dropdown-menu > li > a {
165     margin: 3px 14px;
168 .editor_atto_menu .open ul.dropdown-menu {
169     padding-top: 5px;
170     padding-bottom: 5px;
173 .editor_atto_wrap {
174     position: relative;
176 /*rtl:ignore*/
177 .editor_atto_wrap textarea {
178     direction: ltr;
181 .editor_atto_notification .atto_info,
182 .editor_atto_notification .atto_warning {
183     display: inline-block;
184     background-color: #f2f2f2;
185     padding: 0.5em;
186     padding-left: 1em;
187     padding-right: 1em;
188     border-bottom-left-radius: 1em;
189     border-bottom-right-radius: 1em;
192 .editor_atto_notification .atto_info {
193     background-color: #f2f2f2;
196 .editor_atto_notification .atto_warning {
197     background-color: #ffd700;
200 .editor_atto_toolbar,
201 .editor_atto_content_wrap,
202 .editor_atto + textarea {
203     box-sizing: border-box;