css/joomla.css

   1 /* joomla.css: Joomla-specific css directives for CiviCRM. */
   2
   3 /*
   4 ** HTML elements
   5 */
   6 div#toolbar-box .icon-48-generic {
   7   display: none;
   8 }
   9
  10 div#toolbar-box {
  11   height: 26px;
  12 }
  13
  14 fieldset {
  15   margin-bottom: 1em;
  16   padding: .5em;
  17 }
  18 form {
  19   margin: 0;
  20   padding: 0;
  21 }
  22 hr {
  23   height: 1px;
  24   border: 1px solid gray;
  25 }
  26 img {
  27   border: 0;
  28 }
  29 /* Added in CiviCRM 2.0 to alleviate tiny font issues. */
  30 #crm-container tr,
  31 #crm-container tr td {
  32   font-size: 1em;
  33 }
  34
  35 /* Added in CiviCRM 2.1 to overwrite tiny font in TinyMCE editor. */
  36 #crm-container #content table.mceLayout td {
  37   font-size: 0em;
  38 }
  39
  40 th {
  41   text-align: left;
  42   padding-right: 1em;
  43   border-bottom: 3px solid #ccc;
  44   white-space: nowrap;
  45 }
  46 th.active img {
  47   display: inline;
  48 }
  49 tr.dark,
  50 tr.light {
  51   background-color: #eee;
  52   border-bottom: 1px solid #ccc;
  53   padding: 0.1em 0.6em;
  54 }
  55
  56 td.active {
  57   background-color: #ddd;
  58 }
  59
  60 td.label {
  61   background: none;
  62   color: #3e3e3e;
  63   display: table-cell;
  64 }
  65
  66 /*
  67 ** Other common styles
  68 */
  69 .breadcrumb {
  70   padding-bottom: .5em
  71 }
  72 .block ul {
  73   margin: 0;
  74   padding: 0 0 0.25em 1em;
  75 }
  76 br.clear {
  77   clear: both;
  78   height: 0px;
  79 }
  80 .container-inline div {
  81   display: inline;
  82 }
  83 .container-inline .crm-form-submit {
  84   margin: 0;
  85 }
  86 .item-list .icon {
  87   color: #555;
  88   float: right;
  89   padding-left: 0.25em;
  90   clear: right;
  91 }
  92 .item-list .icon a {
  93   color: #000;
  94   text-decoration: none;
  95 }
  96 .item-list .icon a:hover {
  97   color: #000;
  98   text-decoration: none;
  99 }
 100 .item-list .title {
 101   font-weight: bold;
 102 }
 103 .item-list ul {
 104   margin: 0 0 0.75em 0;
 105   padding: 0;
 106 }
 107 .item-list ul li {
 108   margin: 0 0 0.25em 1.5em;
 109   padding: 0;
 110   list-style: disc;
 111 }
 112 /* Override .9em field help size from civicrm.css - CiviCRM 2.0 */
 113 #crm-container div.description,
 114 #crm-container span.description,
 115 #crm-container dd.description {
 116   font-size: 1em;
 117 }
 118 #crm-container div.description,
 119 #crm-container span.description {
 120   margin: 2px 0 15px 0;
 121   display: block;
 122 }
 123 .form-item label {
 124   font-weight: bold;
 125 }
 126 .form-item label.option {
 127   font-weight: normal;
 128 }
 129 .crm-form-submit {
 130   margin: 0.5em 0;
 131 }
 132 .marker,
 133 .form-required {
 134   color: #f00;
 135 }
 136 .more-link {
 137   text-align: right;
 138 }
 139 #pager {
 140   clear: both;
 141   text-align: center;
 142 }
 143 #pager div {
 144   padding: 0.5em;
 145 }
 146 .tips {
 147   margin-top: 0;
 148   margin-bottom: 0;
 149   padding-top: 0;
 150   padding-bottom: 0;
 151   font-size: 0.9em;
 152 }
 153 .more-help-link {
 154   font-size: 0.85em;
 155   text-align: right;
 156 }
 157
 158 /*
 159 ** Page layout blocks / IDs
 160 */
 161 #header,
 162 #content {
 163   width: 100%;
 164 }
 165 #logo {
 166   vertical-align: middle;
 167   border: 0;
 168 }
 169 #logo img {
 170   float: left;
 171   padding: 0em 1.0em 0em 1em;
 172   border: 0;
 173 }
 174 #menu {
 175   padding: 0 0 0 0;
 176   vertical-align: middle;
 177 }
 178 #primary {
 179   font-size: 1.0em;
 180   padding: 0em 0.8em 0.5em 0;
 181   color: #9cf;
 182 }
 183 #primary a {
 184   font-weight: bold;
 185   color: #fff;
 186 }
 187 #secondary {
 188   padding: 0 1em 0.5em 0;
 189   font-size: 0.8em;
 190   color: #9cf;
 191 }
 192 #secondary a {
 193   font-weight: bold;
 194   color: #9cf;
 195 }
 196 #search .form-text,
 197 #search .crm-form-submit {
 198   border: 1px solid #369;
 199   font-size: 1.1em;
 200 }
 201 #search .form-text {
 202   width: 8em;
 203   height: 1.4em;
 204   padding: 0 0.5em 0 0.5em;
 205   margin: 0 0 0.5em 0;
 206 }
 207 #search .crm-form-submit {
 208   height: 1.5em;
 209 }
 210 #main {
 211   /* padding in px not ex because IE messes up 100% width tables otherwise */
 212   padding: 10px;
 213 }
 214 #help {
 215   font-size: 1em;
 216   margin-bottom: 1em;
 217 }
 218 .breadcrumb {
 219   margin-bottom: .5em;
 220 }
 221 .messages {
 222   background-color: #eee;
 223   border: 1px solid #ccc;
 224   padding: 0.3em;
 225   margin-bottom: 1em;
 226 }
 227 .error {
 228   border-color: red;
 229   color: red;
 230 }
 231 #sidebar-left,
 232 #sidebar-right {
 233   background-color: #ddd;
 234   width: 16em;
 235   /* padding in px not ex because IE messes up 100% width tables otherwise */
 236   padding: 20px;
 237   vertical-align: top;
 238 }
 239
 240 #content-right {
 241   background-color: #ffffff;
 242 }
 243
 244 #footer {
 245   padding: 1em;
 246   font-size: 0.8em;
 247 }
 248
 249 /*
 250 ** Common declarations for child classes of node, comment, block, box, etc.
 251 ** If you want any of them styled differently for a specific parent, add
 252 ** additional rules /with only the differing properties!/ to .parent .class.
 253 ** See .comment .title for an example.
 254 */
 255 .title,
 256 .title a {
 257   font-weight: normal;
 258   font-size: 1.6em;
 259   color: #666;
 260   margin: 0 auto 0 auto;  /* decrease default margins for h<x>.title */
 261 }
 262 .block-civicrm #recently-viewed .crm-icon,
 263 .crm-icon {
 264   margin-top: 0 !important;
 265 }
 266 .submitted {
 267   color: #999;
 268   font-size: 0.8em;
 269 }
 270 .links {
 271   color: #999;
 272 }
 273 .links a {
 274   font-weight: bold;
 275 }
 276 .block,
 277 .box {
 278   padding: 0 0 1.5em 0;
 279 }
 280 .block {
 281   min-height: 25px;
 282   border-bottom: 1px solid #bbb;
 283   padding-bottom: 0.75em;
 284   margin-bottom: 1.5em;
 285 }
 286 .block .title {
 287   margin-bottom: .25em;
 288 }
 289 .box .title {
 290   font-size: 1.1em;
 291 }
 292
 293 #module-status,
 294 .version {
 295   font-size: 11px;
 296 }
 297 #module-status a {
 298   font-weight: normal;
 299 }
 300 .main {
 301   text-align: left;
 302 }
 303
 304 /* Joomla Admin Menu alterations */
 305 /* Moved from civicrm.css in v3.2 */
 306
 307
 308 div#toolbar-box div.m {
 309   padding: 0px !important;
 310   min-height: 0;
 311   border: 0;
 312   margin-top: 8px;
 313 }
 314
 315 div#toolbar-box,
 316 div#toolbar-box div.m {
 317   height: auto;
 318 }
 319
 320 .crm-tab-button,
 321 .ui-tabs .ui-tabs-nav li {
 322   border: 1px;
 323   font-size: 110%;
 324 }
 325 .ui-tabs .ui-tabs-nav {
 326   padding: 0.2em 3px 1px;
 327 }
 328 #mainTabContainer li.crm-tab-button {
 329   margin: 0 3px 3px 0;
 330   border: 1px solid #f5f6f1 !important;
 331 }
 332 #mainTabContainer li.crm-tab-button.ui-tabs-selected {
 333   padding-bottom: 0;
 334   border: 1px solid #999 !important;
 335 }
 336 #crm-container {
 337   font-size: 11px;
 338 }
 339 #crm-container .col1 {
 340   margin: 0;
 341 }
 342 #crm-container .footer {
 343   font-size: 1em;
 344 }
 345 .ac_results .ac_odd {
 346   background-color: #444;
 347 }
 348
 349 #crm-notification-container {
 350   top: 100px;
 351 }
 352
 353 .crm-container textarea,
 354 .crm-container input,
 355 .crm-container select {
 356   font-size: 12px;
 357   margin-bottom: auto;
 358   margin-right: 4px;
 359   width: auto;
 360   padding: 2px 4px;
 361 }
 362 .crm-container .select2-search input {
 363   width: 100%;
 364 }
 365 .crm-container textarea,
 366 .crm-container input {
 367   height: auto;
 368 }
 369 .crm-container button[type=submit] {
 370   height: auto;
 371 }
 372
 373 .crm-container .disabled {
 374   font-weight: normal;
 375 }
 376
 377 #crm-container .form-layout td.label,
 378 .crm-container .form-layout td.label {
 379   width: inherit;
 380 }
 381
 382 #crm-container .crm-event-form-fee-block .label {
 383   background-color: inherit;
 384   width: inherit;
 385   display: block;
 386 }
 387
 388 /* dev/core#874 the width:auto styling above causes the menubar colour picker to be squeezed */
 389 .crm-container input.crm-form-color {
 390   width: 3.6em;
 391 }
 392
 393 /* Remove Joomla subhead toolbar & whitespace border */
 394
 395 body.admin.com_civicrm .subhead-collapse {
 396   display: none;
 397 }
 398 body.admin.com_civicrm .container-fluid.container-main {
 399   padding: 0;
 400   border-top: 1px solid #787878;
 401 }
 402 body.admin.com_civicrm.task-civicrmupgrade .container-fluid.container-main {
 403   padding: 10px 25px 25px;
 404 }
 405 body.admin.com_civicrm #crm-nav-menu-container {
 406   padding-bottom: 0 !important;
 407 }
 408 body.admin.com_civicrm #content-right {
 409   padding: 12px;
 410 }
 411
 412 /* Make footer admin bar hide behind popup windows (CRM-15723) */
 413 body.ui-dialog-open #status {
 414   z-index: 100 !important;
 415 }
 416
 417 /* Joomla 4 */
 418
 419 body.admin.com_civicrm.layout-default #content {
 420   padding: 0;
 421 }
 422
 423 body.admin.com_civicrm.layout-default #subhead-container {
 424   display: none;
 425 }
 426
 427 body.admin.com_civicrm.layout-default .crm-container .crm-dashlet {
 428   max-width: 50vw; /* fixes over-wide news dashlet */
 429 }
 430
 431 body.admin.com_civicrm.layout-default .crm-container .content {
 432   padding: inherit; /* overrides J4 duplicated padding */
 433 }
 434
 435 /* J4 Modals */
 436
 437 body.admin.com_civicrm.layout-default .crm-container.ui-dialog.ui-resizable {
 438   z-index: 1021;
 439 }
 440
 441 body.admin.com_civicrm.layout-default .ui-widget-overlay {
 442   z-index: 1;
 443 }
 444
 445 body.admin.com_civicrm.layout-default .crm-container .modal-dialog {
 446   max-width: inherit;
 447   padding: 0;
 448   margin: 0;
 449   overflow: scroll;
 450   pointer-events: all;
 451 }