weekly release 4.0dev
[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;
113 }*/
115 .atto_form textarea.fullwidth,
116 .atto_form input.fullwidth {
117     width: 100%;
120 .atto_form {
121     padding: 0.5rem;
124 /*.atto_form label {
125     display: block;
126     margin: 0 0 5px 0;
127 }*/
129 .atto_control {
130     position: absolute;
131     right: -6px;
132     bottom: -6px;
133     display: none;
134     cursor: pointer;
137 .atto_control .icon {
138     background-color: white;
141 div.editor_atto_content:focus .atto_control,
142 div.editor_atto_content:hover .atto_control {
143     display: block;
146 .editor_atto_menu.yui3-menu-hidden {
147     display: none;
150 /* Get broken images back in firefox */
151 .editor_atto_content img:-moz-broken {
152     -moz-force-broken-image-icon: 1;
153     min-width: 24px;
154     min-height: 24px;
157 /* Atto menu styling */
158 .moodle-dialogue-base .editor_atto_menu .moodle-dialogue-content .moodle-dialogue-bd {
159     padding: 0;
160     z-index: 1000;
163 .editor_atto_menu .dropdown-menu > li > a {
164     margin: 3px 14px;
167 .editor_atto_menu .open ul.dropdown-menu {
168     padding-top: 5px;
169     padding-bottom: 5px;
172 .editor_atto_wrap {
173     position: relative;
175 /*rtl:ignore*/
176 .editor_atto_wrap textarea {
177     direction: ltr;
180 .editor_atto_notification .atto_info,
181 .editor_atto_notification .atto_warning {
182     display: inline-block;
183     background-color: #f2f2f2;
184     padding: 0.5em;
185     padding-left: 1em;
186     padding-right: 1em;
187     border-bottom-left-radius: 1em;
188     border-bottom-right-radius: 1em;
191 .editor_atto_notification .atto_info {
192     background-color: #f2f2f2;
195 .editor_atto_notification .atto_warning {
196     background-color: #ffd700;
199 .editor_atto_toolbar,
200 .editor_atto_content_wrap,
201 .editor_atto + textarea {
202     box-sizing: border-box;