ui/semantic/galette/globals/site.overrides

   1 /*******************************
   2          Galette Overrides
   3 *******************************/
   4
   5 /*---------------
   6      Global
   7 ----------------*/
   8 /* Content using displaynone is ignored by screen readers */
   9 .displaynone {
  10   display: none !important;
  11 }
  12
  13 /* Content using visually-hidden is read by screen readers */
  14 .visually-hidden {
  15   position: absolute !important;
  16   width: 1px;
  17   height: 1px;
  18   clip: rect(1px,1px,1px,1px);
  19   word-wrap: normal;
  20   overflow: hidden;
  21
  22   &.focusable:active,
  23   &.focusable:focus {
  24       position: static !important;
  25       width: auto;
  26       height: auto;
  27       clip: auto;
  28       overflow: visible;
  29   }
  30 }
  31
  32 .exemple,
  33 .disabled,
  34 .disabled a {
  35   color: @unselectedTextColor;
  36 }
  37
  38 .inactive-account {
  39   color: lighten(@grey, 15);
  40   font-style: italic;
  41 }
  42
  43 .language span {
  44   text-transform: uppercase;
  45 }
  46
  47 .error-trace pre {
  48   overflow-x: auto;
  49 }
  50
  51 /*---------------------------------------------------------------
  52      Override outline on links and navigation elements
  53 ----------------------------------------------------------------*/
  54 a,
  55 .ui.button:not(.tertiary),
  56 .compact_menu .ui.dropdown.item,
  57 .ui.dropdown.language,
  58 .infoline .ui.dropdown:not(.tertiary) {
  59     &:focus-visible {
  60         outline: 3px solid @blueFocus;
  61     }
  62 }
  63
  64 /*---------------------------------
  65      Go to main content link
  66 ----------------------------------*/
  67 .skiptocontent {
  68   display: block;
  69   width: 100%;
  70   text-decoration: none;
  71   color: @invertedTextColor;
  72   outline: 0;
  73   background-color: @black;
  74
  75   &.focusable:hover,
  76   &.focusable:focus {
  77     position: absolute !important;
  78     width: 100%;
  79     z-index: 102;
  80     padding: 1rem .5rem;
  81     text-align: center;
  82     outline: none;
  83   }
  84
  85   &.focusable:hover {
  86     color: @invertedTextColor;
  87     text-decoration: underline;
  88   }
  89 }
  90
  91 /*--------------------------------
  92      Base layout and navigation
  93 ---------------------------------*/
  94 html {
  95   overflow: hidden;
  96
  97   &.public_page {
  98     section.vertically.centered {
  99       display: flex;
 100       flex-direction: column;
 101       justify-content: center;
 102       height: 100%;
 103       padding-bottom: 120px;
 104
 105       img.logo {
 106         margin-top: 1rem;
 107       }
 108     }
 109   }
 110 }
 111
 112 body.pushable:not(.loggedin) {
 113   & > .pusher {
 114     display: flex;
 115     justify-content: center;
 116   }
 117   main ~ footer.ui.segment {
 118     margin-top: -120px;
 119     z-index: 2;
 120   }
 121 }
 122
 123 .loggedin #main {
 124   background-image: url(@galetteBackgroundImage);
 125   background-repeat: no-repeat;
 126   background-attachment: fixed;
 127   .main-content {
 128     padding: 1.25rem;
 129   }
 130 }
 131 .loggedin #main.rtl {
 132   background-image: url(@galetteBackgroundImageRtl);
 133   background-position: left top;
 134 }
 135 #top-navbar {
 136   background: @lightGrey;
 137 }
 138
 139 #top-navbar.ui.menu .item img.logo {
 140   margin-right: 1.5rem;
 141   max-height: 2.5rem;
 142   width: auto;
 143 }
 144
 145 #top-navbar div.item a.button:not(:first-child) {
 146   margin-left: .5rem;
 147 }
 148
 149 .ui.grid.align-items-center {
 150   align-items: center;
 151 }
 152
 153 .ui.grid > aside.column:not(.row) {
 154   padding-bottom: 2rem;
 155 }
 156
 157 .ui.fixed.menu + .pusher {
 158   padding-top: 3.8rem;
 159 }
 160
 161 aside.toc,
 162 .ui.segments.header .compact.segment.right {
 163   display: none;
 164 }
 165
 166 aside .ui.vertical.menu {
 167   width: auto;
 168   max-width: 100%;
 169 }
 170
 171 .loggedin .content {
 172   .ui.horizontal.segments.header {
 173     flex-direction: row-reverse;
 174   }
 175 }
 176
 177 footer,
 178 footer .ui.horizontal.list .list > .item,
 179 footer .ui.horizontal.list > .item{
 180   font-size: .95rem;
 181 }
 182
 183 @media only screen and (max-width: @largestMobileScreen) {
 184   html.public_page .ui.ui.ui.container:not(.fluid) {
 185     width: 100%;
 186   }
 187 }
 188
 189 @media only screen and (max-width: 991px) {
 190   #top-navbar nav {
 191     display: none;
 192   }
 193   .sidebar.uncover + .fixed.menu .toc i::before {
 194     content: '\f00d';
 195   }
 196 }
 197
 198 @media only screen and (min-width: 992px) {
 199   html {
 200       overflow-x: visible;
 201       -webkit-overflow-scrolling: auto;
 202   }
 203   .loggedin .ui.top.menu:not(.vertical):not(.tabular):not(.tabs),
 204   .ui.top.menu:not(.vertical):not(.tabular):not(.tabs) .item.header,
 205   .ui.top.menu:not(.vertical):not(.tabular):not(.tabs) .item.toc {
 206     display: none;
 207   }
 208   .loggedin .ui.fixed.menu + .pusher {
 209     padding-top: 0;
 210   }
 211
 212   #sidebarmenu {
 213     display: none;
 214   }
 215   .ui.visible.left.sidebar ~ .pusher {
 216     transform: translate3d(0, 0, 0) !important;
 217     &.dimmed::after {
 218       display: none;
 219     }
 220   }
 221   #top-navbar div.item a.button.darkmode span {
 222     display: none;
 223   }
 224
 225   aside.computer.toc {
 226     background: @galetteNavBackground;
 227   }
 228
 229   aside.toc {
 230     display: block;
 231     position: fixed !important;
 232     height: 100%;
 233     overflow-y: scroll;
 234     width: 260px;
 235     padding: 1.25rem;
 236     &.compact_menu {
 237       z-index: 1001;
 238       width: 85px;
 239       overflow-y: initial;
 240       #logoutmenu {
 241         .ui.dropdown .menu > .item:hover,
 242         .ui.dropdown .menu > .active.item {
 243           background: @white !important;
 244           color: @textColor !important;
 245           font-weight: 400 !important;
 246           cursor: default;
 247         }
 248         .brand.header {
 249           max-width: 500px;
 250           white-space: normal;
 251         }
 252       }
 253       .ui.menu .dropdown.item.active-menu {
 254         background: @lightGaletteColor;
 255       }
 256       .ui.toggle.checkbox {
 257         line-height: 1rem;
 258         input {
 259           width: 3rem;
 260           height: 1rem;
 261           &:checked ~ label::after {
 262             left: 1.35rem;
 263           }
 264         }
 265         label {
 266           min-height: 1rem;
 267           padding-left: 4rem;
 268           &::before {
 269             width: 2.4rem;
 270             height: 1rem;
 271           }
 272           &::after {
 273             width: 1rem;
 274             height: 1rem;
 275           }
 276         }
 277       }
 278     }
 279   }
 280
 281   .ui.segments.header .compact.segment.right {
 282     display: block;
 283   }
 284
 285   html:not(.public_page) body:not(.front-page) main ~ footer.ui.segment,
 286   body:not(.front-page) section.content {
 287     margin-left: 260px;
 288     flex: 1 1 auto;
 289     &.extended {
 290       margin-left: 85px;
 291     }
 292   }
 293
 294   section.desktop .container {
 295     max-width: 695px;
 296     margin: 0 auto;
 297   }
 298
 299   /*
 300    * .pusher doesn't play well with sticky position children.
 301    * It is required for sidebars, which are only used at the moment on
 302    * lower resolutions. So it is safe to reset its overflow property.
 303    *
 304    */
 305   body.pushable > .pusher:not(.overflowing) {
 306     overflow: unset;
 307   }
 308   .position-sticky {
 309     position: sticky;
 310     top: 0px;
 311     z-index: 10;
 312   }
 313 }
 314
 315 @media only screen and (max-width: 1199px) {
 316   aside.computer.toc {
 317     .ui.text.compact.small.fluid.menu {
 318       font-size: .8em;
 319
 320       .ui.buttons .button {
 321         padding: .5em;
 322       }
 323     }
 324   }
 325 }
 326
 327 @media only screen and (min-width: 1200px) {
 328   aside.toc {
 329     width: 350px;
 330   }
 331
 332   html:not(.public_page) body:not(.front-page) main ~ footer.ui.segment,
 333   body:not(.front-page) section.content {
 334     margin-left: 350px;
 335   }
 336
 337   section.desktop .container {
 338     max-width: 850px;
 339   }
 340 }
 341
 342 /*---------------------------------
 343     Desktop main activities
 344 ----------------------------------*/
 345 #main-activities a i {
 346   opacity: .6;
 347 }
 348
 349 #main-activities a:hover i {
 350   opacity: 1;
 351   color: @primaryColor;
 352 }
 353
 354 #main-activities .header {
 355   color: @textColor;
 356 }
 357
 358 /*-------------------------
 359       Spacings
 360 --------------------------*/
 361 .filters .segment .button,
 362 .infoline .segments .fitted.segment .label,
 363 .infoline .segments .fitted.segment .tiny.button,
 364 #groups_field .button {
 365   margin-bottom: 0.75em;
 366 }
 367
 368 /*-----------------------
 369     Sortable items
 370 ------------------------*/
 371 ul.sortable-items {
 372   list-style-type: none;
 373   margin: 0;
 374   padding: 0;
 375 }
 376
 377 .sortable-items {
 378   .ui.segment {
 379     cursor: move;
 380     background-color: @evenLineBackgroundColor;
 381
 382     &:hover {
 383       background-color: @activeLineBackgroundColor;
 384     }
 385   }
 386 }
 387
 388 /*--------------------
 389     Leading dots
 390 ---------------------*/
 391 ul.leaders {
 392   display: block!important;
 393   padding: 0;
 394   overflow-x: hidden;
 395   list-style: none;
 396   overflow: hidden;
 397 }
 398 ul.leaders li {
 399   position: relative;
 400 }
 401 ul.leaders li:before {
 402   width: 100%;
 403   content: "";
 404   border-bottom: 1px dotted @textColor;
 405   height: 1rem;
 406   position: absolute;
 407   bottom: .5rem;
 408   z-index: -1;
 409 }
 410 ul.leaders span:first-child {
 411   padding-right: 0.33em;
 412   background: white
 413 }
 414 ul.leaders span + span {
 415   padding-left: 0.33em;
 416   position: absolute;
 417   background: white;
 418   right: 0;
 419 }
 420
 421 /*-------------------------
 422     Back top top button
 423 --------------------------*/
 424 #back2top {
 425   display: none;
 426   position: fixed;
 427   right: .5rem;
 428   bottom: .5rem;
 429   z-index: 2;
 430   border: 1px solid @borderColor;
 431 }
 432
 433 /*------------------------------------------------
 434     Fix conflicts between SUI and icons classes
 435 -------------------------------------------------*/
 436 .ui.card.icon {
 437   width: auto;
 438   display: inline-block;
 439   margin-right: .25rem;
 440   box-shadow: none !important;
 441 }
 442
 443 /*---------------------------------
 444     Fix Summernote modal display
 445 ----------------------------------*/
 446
 447 .note-modal-backdrop,
 448 .note-modal .note-group-select-from-files {
 449   display: none !important;
 450 }
 451
 452 .note-modal.open {
 453   background: rgba(0,0,0,0.5);
 454 }
 455
 456 .note-modal .note-modal-content {
 457   position: fixed;
 458   top: 50%;
 459   left: 50%;
 460   transform: translateX(-50%) translateY(-50%);
 461   margin: 30px 0;
 462 }
 463
 464 .required .note-editable {
 465   font-weight: normal;
 466 }
 467
 468 .note-modal .note-modal-footer {
 469   height: 62px;
 470 }
 471
 472 .note-modal .note-btn {
 473   padding: 10px;
 474 }
 475
 476 @media only screen and (min-width: 768px) {
 477   .note-modal-content {
 478     margin: 0;
 479   }
 480 }
 481
 482 /*-----------------------------
 483     Summernote display
 484 ------------------------------*/
 485 .field .note-editor.note-frame .note-editing-area .note-editable[contenteditable="false"] {
 486     background-color: #fff;
 487 }
 488 .ui.corner.labeled .note-editor {
 489   width: 100%;
 490 }
 491
 492 /*-------------------------
 493     Print stylesheet
 494 --------------------------*/
 495 @media print {
 496   html,
 497   body.pushable,
 498   body.pushable > .pusher {
 499     overflow: unset;
 500   }
 501
 502   body,
 503   body.pushable {
 504     background: #fff;
 505   }
 506
 507   html.public_page section.vertically.centered {
 508     justify-content: start;
 509   }
 510
 511   .ui.fixed.menu + .pusher {
 512     padding-top: 0;
 513   }
 514
 515   .loggedin #main {
 516     background-image: none;
 517   }
 518   body:not(.loggedin) #main {
 519     width: 100%;
 520   }
 521
 522   .logo {
 523     margin-top: 0 !important;
 524   }
 525
 526   table.listing tbody tr:hover > td {
 527     background-color: inherit !important;
 528   }
 529
 530   .displaynone,
 531   #top-navbar,
 532   aside.toc,
 533   #recup_mailing,
 534   form.filters,
 535   .ui.horizontal.checkboxes.segments,
 536   table input[type=checkbox],
 537   .infoline .button,
 538   .infoline .right.aligned.segment,
 539   .actions_row,
 540   .ui.pagination.menu,
 541   section.content .main-content > footer,
 542   section.content .main-content + footer,
 543   section.vertically.centered .main-content + footer,
 544   #back2top {
 545     display: none !important;
 546   }
 547 }