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   footer.page-footer {
 118     position: relative;
 119     z-index: 2;
 120     margin-top: -120px;
 121   }
 122 }
 123
 124 .loggedin #main {
 125   background-image: url(@galetteBackgroundImage);
 126   background-repeat: no-repeat;
 127   background-attachment: fixed;
 128   .main-content {
 129     padding: 1.25rem;
 130   }
 131 }
 132 .loggedin #main.rtl {
 133   background-image: url(@galetteBackgroundImageRtl);
 134   background-position: left top;
 135 }
 136 #top-navbar {
 137   background: @lightGrey;
 138 }
 139
 140 #top-navbar.ui.menu .item img.logo {
 141   margin-right: 1.5rem;
 142   max-height: 2.5rem;
 143   width: auto;
 144 }
 145
 146 #top-navbar div.item a.button:not(:first-child) {
 147   margin-left: .5rem;
 148 }
 149
 150 .ui.grid.align-items-center {
 151   align-items: center;
 152 }
 153
 154 .ui.grid > aside.column:not(.row) {
 155   padding-bottom: 2rem;
 156 }
 157
 158 .ui.fixed.menu + .pusher {
 159   padding-top: 3.8rem;
 160 }
 161
 162 aside.toc,
 163 .ui.segments.header .compact.segment.right {
 164   display: none;
 165 }
 166
 167 aside .ui.vertical.menu {
 168   width: auto;
 169   max-width: 100%;
 170 }
 171
 172 .loggedin .content {
 173   .ui.horizontal.segments.header {
 174     flex-direction: row-reverse;
 175   }
 176 }
 177
 178 footer,
 179 footer .ui.horizontal.list .list > .item,
 180 footer .ui.horizontal.list > .item{
 181   font-size: .95rem;
 182 }
 183 footer.page-footer {
 184   position: relative;
 185   background-color: @pageBackground;
 186 }
 187 main.pusher ~ footer.page-footer {
 188   transition: transform .5s ease;
 189   &:after {
 190     position: absolute;
 191     top: 0;
 192     right: 0;
 193     content: "";
 194     background: @lightTextColor;
 195     overflow: hidden;
 196     opacity: 0;
 197     transition: all .5s;
 198     will-change: opacity;
 199   }
 200 }
 201 main.pusher.dimmed {
 202   & ~ footer.page-footer {
 203     transform: translate3d(260px, 0, 0);
 204     &:after {
 205       width: 100% !important;
 206       height: 100% !important;
 207       opacity: 1 !important;
 208     }
 209   }
 210   &.closing ~ footer.page-footer {
 211     transform: translate3d(0, 0, 0);
 212     z-index: 1;
 213     &:after {
 214       opacity: 0 !important;
 215     }
 216   }
 217 }
 218 body:not(.loggedin) main.pusher.dimmed.closing ~ footer.page-footer {
 219   z-index: 2;
 220 }
 221
 222 @media only screen and (max-width: @largestMobileScreen) {
 223   html.public_page .ui.ui.ui.container:not(.fluid) {
 224     width: 100%;
 225   }
 226 }
 227
 228 @media only screen and (max-width: 991px) {
 229   #top-navbar nav {
 230     display: none;
 231   }
 232   .sidebar.uncover + .fixed.menu .toc i::before {
 233     content: '\f00d';
 234   }
 235 }
 236
 237 @media only screen and (min-width: 992px) {
 238   html {
 239       overflow-x: visible;
 240       -webkit-overflow-scrolling: auto;
 241   }
 242   .loggedin .ui.top.menu:not(.vertical):not(.tabular):not(.tabs),
 243   .ui.top.menu:not(.vertical):not(.tabular):not(.tabs) .item.header,
 244   .ui.top.menu:not(.vertical):not(.tabular):not(.tabs) .item.toc {
 245     display: none;
 246   }
 247   .loggedin .ui.fixed.menu + .pusher {
 248     padding-top: 0;
 249   }
 250
 251   #sidebarmenu {
 252     display: none;
 253   }
 254   .ui.visible.left.sidebar ~ .pusher {
 255     transform: translate3d(0, 0, 0) !important;
 256     &.dimmed::after {
 257       display: none;
 258     }
 259   }
 260   #top-navbar div.item a.button.darkmode span {
 261     display: none;
 262   }
 263
 264   aside.computer.toc {
 265     background: @galetteNavBackground;
 266   }
 267
 268   aside.toc {
 269     display: block;
 270     position: fixed !important;
 271     height: 100%;
 272     overflow-y: scroll;
 273     width: 260px;
 274     padding: 1.25rem;
 275     &.compact_menu {
 276       z-index: 1001;
 277       width: 85px;
 278       overflow-y: initial;
 279       #logoutmenu {
 280         .ui.dropdown .menu > .item:hover,
 281         .ui.dropdown .menu > .active.item {
 282           background: @white !important;
 283           color: @textColor !important;
 284           font-weight: 400 !important;
 285           cursor: default;
 286         }
 287         .brand.header {
 288           max-width: 500px;
 289           white-space: normal;
 290         }
 291       }
 292       .ui.menu .dropdown.item.active-menu {
 293         background: @lightGaletteColor;
 294       }
 295       .ui.toggle.checkbox {
 296         line-height: 1rem;
 297         input {
 298           width: 3rem;
 299           height: 1rem;
 300           &:checked ~ label::after {
 301             left: 1.35rem;
 302           }
 303         }
 304         label {
 305           min-height: 1rem;
 306           padding-left: 4rem;
 307           &::before {
 308             width: 2.4rem;
 309             height: 1rem;
 310           }
 311           &::after {
 312             width: 1rem;
 313             height: 1rem;
 314           }
 315         }
 316       }
 317     }
 318   }
 319
 320   .ui.segments.header .compact.segment.right {
 321     display: block;
 322   }
 323
 324   html:not(.public_page) body:not(.front-page) footer.page-footer .footer-wrapper,
 325   body:not(.front-page) section.content {
 326     margin-left: 260px;
 327     flex: 1 1 auto;
 328     &.extended {
 329       margin-left: 85px;
 330     }
 331   }
 332
 333   section.desktop .container {
 334     max-width: 695px;
 335     margin: 0 auto;
 336   }
 337
 338   /*
 339    * .pusher doesn't play well with sticky position children.
 340    * It is required for sidebars, which are only used at the moment on
 341    * lower resolutions. So it is safe to reset its overflow property.
 342    *
 343    */
 344   body.pushable > .pusher:not(.overflowing) {
 345     overflow: unset;
 346   }
 347   .position-sticky {
 348     position: sticky;
 349     top: 0px;
 350     z-index: 10;
 351   }
 352 }
 353
 354 @media only screen and (max-width: 1199px) {
 355   aside.computer.toc {
 356     .ui.text.compact.small.fluid.menu {
 357       font-size: .8em;
 358
 359       .ui.buttons .button {
 360         padding: .5em;
 361       }
 362     }
 363   }
 364 }
 365
 366 @media only screen and (min-width: 1200px) {
 367   aside.toc {
 368     width: 350px;
 369   }
 370
 371   html:not(.public_page) body:not(.front-page) footer.page-footer .footer-wrapper,
 372   body:not(.front-page) section.content {
 373     margin-left: 350px;
 374   }
 375
 376   section.desktop .container {
 377     max-width: 850px;
 378   }
 379 }
 380
 381 /*---------------------------------
 382     Desktop main activities
 383 ----------------------------------*/
 384 #main-activities a i {
 385   opacity: .6;
 386 }
 387
 388 #main-activities a:hover i {
 389   opacity: 1;
 390   color: @primaryColor;
 391 }
 392
 393 #main-activities .header {
 394   color: @textColor;
 395 }
 396
 397 /*-------------------------
 398       Spacings
 399 --------------------------*/
 400 .filters .segment .button,
 401 .infoline .segments .fitted.segment .label,
 402 .infoline .segments .fitted.segment .tiny.button,
 403 #groups_field .button {
 404   margin-bottom: 0.75em;
 405 }
 406
 407 /*-----------------------
 408     Sortable items
 409 ------------------------*/
 410 ul.sortable-items {
 411   list-style-type: none;
 412   margin: 0;
 413   padding: 0;
 414 }
 415
 416 .sortable-items {
 417   .ui.segment {
 418     cursor: move;
 419     background-color: @evenLineBackgroundColor;
 420
 421     &:hover {
 422       background-color: @activeLineBackgroundColor;
 423     }
 424   }
 425 }
 426
 427 /*--------------------
 428     Leading dots
 429 ---------------------*/
 430 ul.leaders {
 431   display: block!important;
 432   padding: 0;
 433   overflow-x: hidden;
 434   list-style: none;
 435   overflow: hidden;
 436 }
 437 ul.leaders li {
 438   position: relative;
 439 }
 440 ul.leaders li:before {
 441   width: 100%;
 442   content: "";
 443   border-bottom: 1px dotted @textColor;
 444   height: 1rem;
 445   position: absolute;
 446   bottom: .5rem;
 447   z-index: -1;
 448 }
 449 ul.leaders span:first-child {
 450   padding-right: 0.33em;
 451   background: white
 452 }
 453 ul.leaders span + span {
 454   padding-left: 0.33em;
 455   position: absolute;
 456   background: white;
 457   right: 0;
 458 }
 459
 460 /*-------------------------
 461     Back top top button
 462 --------------------------*/
 463 #back2top {
 464   display: none;
 465   position: fixed;
 466   right: .5rem;
 467   bottom: .5rem;
 468   z-index: 2;
 469   border: 1px solid @borderColor;
 470 }
 471
 472 /*------------------------------------------------
 473     Fix conflicts between SUI and icons classes
 474 -------------------------------------------------*/
 475 .ui.card.icon {
 476   width: auto;
 477   display: inline-block;
 478   margin-right: .25rem;
 479   box-shadow: none !important;
 480 }
 481
 482 /*---------------------------------
 483     Fix Summernote modal display
 484 ----------------------------------*/
 485
 486 .note-modal-backdrop,
 487 .note-modal .note-group-select-from-files {
 488   display: none !important;
 489 }
 490
 491 .note-modal.open {
 492   background: rgba(0,0,0,0.5);
 493 }
 494
 495 .note-modal .note-modal-content {
 496   position: fixed;
 497   top: 50%;
 498   left: 50%;
 499   transform: translateX(-50%) translateY(-50%);
 500   margin: 30px 0;
 501 }
 502
 503 .required .note-editable {
 504   font-weight: normal;
 505 }
 506
 507 .note-modal .note-modal-footer {
 508   height: 62px;
 509 }
 510
 511 .note-modal .note-btn {
 512   padding: 10px;
 513 }
 514
 515 @media only screen and (min-width: 768px) {
 516   .note-modal-content {
 517     margin: 0;
 518   }
 519 }
 520
 521 /*-----------------------------
 522     Summernote display
 523 ------------------------------*/
 524 .field .note-editor.note-frame .note-editing-area .note-editable[contenteditable="false"] {
 525     background-color: #fff;
 526 }
 527 .ui.corner.labeled .note-editor {
 528   width: 100%;
 529 }
 530
 531 /*-------------------------
 532     Print stylesheet
 533 --------------------------*/
 534 @media print {
 535   html,
 536   body.pushable,
 537   body.pushable > .pusher {
 538     overflow: unset;
 539   }
 540
 541   body,
 542   body.pushable {
 543     background: #fff;
 544   }
 545
 546   html.public_page section.vertically.centered {
 547     justify-content: start;
 548   }
 549
 550   .ui.fixed.menu + .pusher {
 551     padding-top: 0;
 552   }
 553
 554   .loggedin #main {
 555     background-image: none;
 556   }
 557   body:not(.loggedin) #main {
 558     width: 100%;
 559   }
 560
 561   .logo {
 562     margin-top: 0 !important;
 563   }
 564
 565   table.listing tbody tr:hover > td {
 566     background-color: inherit !important;
 567   }
 568
 569   .displaynone,
 570   .visually-hidden,
 571   #top-navbar,
 572   aside.toc,
 573   #recup_mailing,
 574   form.filters,
 575   .ui.horizontal.checkboxes.segments,
 576   table input[type=checkbox],
 577   .infoline .button,
 578   .infoline .right.aligned.segment,
 579   .actions_row,
 580   .ui.pagination.menu,
 581   footer.page-footer,
 582   #back2top {
 583     display: none !important;
 584   }
 585 }