[Summary view] [Print] [Text view]

   1  // Global
   2  
   3  html {
   4    height: 100%;
   5  
   6    &.a11y_font {
   7      font-size: 18px;
   8    }
   9  }
  10  
  11  body {
  12    display: flex;
  13    flex-direction: column;
  14    min-height: 100%;
  15    padding: 0;
  16    margin: 0;
  17    text-align: start;
  18  
  19    &.admin {
  20      background-color: var(--template-bg-dark-5);
  21    }
  22  
  23    &.monochrome {
  24      filter: grayscale(1);
  25      &::after {
  26        position: fixed;
  27        top: 0;
  28        left: 0;
  29        z-index: -1;
  30        width: 100%;
  31        height: 100%;
  32        content: "";
  33        background: var(--template-bg-dark-5);
  34      }
  35    }
  36  
  37    &.a11y_contrast {
  38      filter: contrast(115%);
  39    }
  40  
  41    &.monochrome.a11y_contrast {
  42      filter: grayscale(1) contrast(115%);
  43    }
  44  
  45    &.a11y_highlight {
  46      a,
  47      .header-item-content {
  48        padding: 3px;
  49        text-decoration: underline !important;
  50        border: #f00 dotted 1px;
  51      }
  52  
  53      .joomlaversion {
  54        padding: 0;
  55        text-decoration: none !important;
  56        border: none;
  57      }
  58  
  59      a.page-link {
  60        padding: $pagination-padding-y $pagination-padding-x;
  61      }
  62    }
  63  }
  64  
  65  h1,
  66  h2,
  67  h3,
  68  h4,
  69  h5,
  70  h6 {
  71    font-weight: $font-weight-bold;
  72  }
  73  
  74  h1 {
  75    font-weight: $font-weight-normal;
  76  }
  77  
  78  small,
  79  .small {
  80    font-size: $font-size-sm;
  81  }
  82  
  83  legend {
  84    font-size: 1.2rem;
  85    font-weight: $font-weight-bold;
  86  }
  87  
  88  // focus-visible polyfill rule
  89  .js-focus-visible :focus:not(.focus-visible) {
  90    outline: none;
  91  }
  92  
  93  // Default focus highlighting
  94  a,
  95  button,
  96  input,
  97  textarea {
  98  
  99    &.focus-visible {
 100      outline: auto 2px var(--focus);
 101    }
 102  }
 103  
 104  // Break up text in cells to prevent overflow
 105  .break-word {
 106    word-break: break-all;
 107    word-wrap: break-word;
 108  }
 109  
 110  label,
 111  caption {
 112    font-size: $label-font-size;
 113    text-align: start;
 114  }
 115  
 116  .logo {
 117  
 118    img path {
 119      fill: var(--template-text-dark);
 120    }
 121  }
 122  
 123  .container-main,
 124  .system-debug {
 125    padding-bottom: 50px;
 126  }
 127  
 128  body .container-main {
 129    order: 1;
 130    position: relative;
 131    padding-right: 0;
 132    padding-left: 0;
 133  }
 134  
 135  .content {
 136    padding: 1rem;
 137  
 138    @include media-breakpoint-up(md) {
 139      padding: 0 2rem;
 140  
 141      .subhead + & {
 142        padding-top: 0;
 143      }
 144    }
 145  }
 146  
 147  body:not(.contentpane) .main-card {
 148    background: $white;
 149    border-radius: $border-radius;
 150    box-shadow: 0 2px 10px -8px var(--template-bg-dark-50);
 151  }
 152  
 153  .row-selected {
 154    background-color: var(--toolbar-bg);
 155  }
 156  
 157  // Chosen (TEMPORARY)
 158  .chzn-container-single {
 159    width: auto !important;
 160  }
 161  
 162  // Multiple buttons wrapping
 163  .input-group input {
 164    min-width: 220px;
 165  }
 166  
 167  // Multilingual associations specific
 168  .item-associations {
 169    padding: 0;
 170  }
 171  
 172  .item-associations li {
 173    display: inline-block;
 174    margin-bottom: 3px;
 175    list-style: none;
 176  }
 177  
 178  // Quickicon specific
 179  .message-alert {
 180    text-align: end !important;
 181  }
 182  
 183  // external links with icons
 184  a[target="_blank"]::before {
 185    padding-inline-end: 3px;
 186    font-family: "Font Awesome 5 Free";
 187    font-size: 14px;
 188    font-weight: 900;
 189    content: "\f35d";
 190  }
 191  
 192  #wrapper {
 193    &.d-flex {
 194      @include media-breakpoint-down(sm) {
 195        display: block !important;
 196      }
 197    }
 198  }
 199  
 200  .text-muted {
 201    color: var(--template-text-dark) !important;
 202    opacity: .7;
 203  }
 204  
 205  .card-columns {
 206    display: grid;
 207    grid-gap: 0 15px;
 208    grid-template-columns: 1fr;
 209  
 210    @include media-breakpoint-up(md) {
 211      grid-template-columns: 1fr 1fr;
 212    }
 213  }
 214  
 215  .cpanel-help,
 216  .cpanel-system {
 217  
 218    .card-columns {
 219      @include media-breakpoint-up(md) {
 220        grid-template-columns: 1fr 1fr 1fr;
 221      }
 222    }
 223  }
 224  
 225  .tiny {
 226    font-size: $font-size-vsm;
 227    line-height: 1.4rem;
 228  }
 229  
 230  // details
 231  
 232  details {
 233    padding: .5rem 1rem;
 234    margin: 0 0 2rem;
 235    background: var(--template-bg-dark-3);
 236    border: 1px solid var(--template-bg-dark-10);
 237    border-radius: $border-radius;
 238  
 239    summary {
 240      color: var(--template-link-color);
 241  
 242      ~ * {
 243        margin-top: 1rem;
 244      }
 245    }
 246  }
 247  
 248  // meter element
 249  meter {
 250    width: 100%;
 251  }
 252  
 253  // Bootstrap 4 b/c
 254  .sr-only {
 255    @extend .visually-hidden;
 256  }
 257  
 258  // tab *+* border
 259  @include media-breakpoint-up(md) {
 260    joomla-tab[orientation=horizontal]:not([view=accordion]) {
 261      section > .row {
 262        --gutter-x: 4rem;
 263  
 264        > * + * {
 265          border-inline-start: 1px solid var(--template-bg-dark-10);
 266        }
 267      }
 268    }
 269  }