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   .core-lists-properties,
 227   .core-fields-properties {
 228     display: none !important;
 229   }
 230   .core-lists-listing,
 231   .core-fields-listing {
 232     i.arrows.alternate {
 233       display: block;
 234       margin: 1rem auto;
 235       &::before {
 236         display: block;
 237       }
 238     }
 239   }
 240   .core-lists-listing {
 241     span[data-prop-label] {
 242       display: block;
 243       text-align: center;
 244       &::before {
 245           display: block;
 246           content: attr(data-prop-label);
 247           text-align: center;
 248           font-weight: bold;
 249       }
 250     }
 251   }
 252   .core-fields-listing {
 253     span[data-prop-label]::before {
 254         display: inline-block;
 255         content: attr(data-prop-label);
 256         width: 10em;
 257         font-weight: bold;
 258     }
 259   }
 260 }
 261
 262 @media only screen and (max-width: 991px) {
 263   #top-navbar nav {
 264     display: none;
 265   }
 266   .sidebar.uncover + .fixed.menu .toc i::before {
 267     content: '\f00d';
 268   }
 269 }
 270
 271 @media only screen and (min-width: 992px) {
 272   html {
 273       overflow-x: visible;
 274       -webkit-overflow-scrolling: auto;
 275   }
 276   .loggedin .ui.top.menu:not(.vertical):not(.tabular):not(.tabs),
 277   .ui.top.menu:not(.vertical):not(.tabular):not(.tabs) .item.header,
 278   .ui.top.menu:not(.vertical):not(.tabular):not(.tabs) .item.toc {
 279     display: none;
 280   }
 281   .loggedin .ui.fixed.menu + .pusher {
 282     padding-top: 0;
 283   }
 284
 285   #sidebarmenu {
 286     display: none;
 287   }
 288   .ui.visible.left.sidebar ~ .pusher {
 289     transform: translate3d(0, 0, 0) !important;
 290     &.dimmed::after {
 291       display: none;
 292     }
 293   }
 294   #top-navbar div.item a.button.darkmode span {
 295     display: none;
 296   }
 297
 298   aside.computer.toc {
 299     background: @galetteNavBackground;
 300   }
 301
 302   aside.toc {
 303     display: block;
 304     position: fixed !important;
 305     height: 100%;
 306     overflow-y: scroll;
 307     width: 260px;
 308     padding: 1.25rem;
 309     &.compact_menu {
 310       z-index: 1001;
 311       width: 85px;
 312       overflow-y: initial;
 313       #logoutmenu {
 314         .ui.dropdown .menu > .item:hover,
 315         .ui.dropdown .menu > .active.item {
 316           background: @white !important;
 317           color: @textColor !important;
 318           font-weight: 400 !important;
 319           cursor: default;
 320         }
 321         .brand.header {
 322           max-width: 500px;
 323           white-space: normal;
 324         }
 325       }
 326       .ui.menu .dropdown.item.active-menu {
 327         background: @lightGaletteColor;
 328       }
 329       .ui.toggle.checkbox {
 330         line-height: 1rem;
 331         input {
 332           width: 3rem;
 333           height: 1rem;
 334           &:checked ~ label::after {
 335             left: 1.35rem;
 336           }
 337         }
 338         label {
 339           min-height: 1rem;
 340           padding-left: 4rem;
 341           &::before {
 342             width: 2.4rem;
 343             height: 1rem;
 344           }
 345           &::after {
 346             width: 1rem;
 347             height: 1rem;
 348           }
 349         }
 350       }
 351     }
 352   }
 353
 354   .ui.segments.header .compact.segment.right {
 355     display: block;
 356   }
 357
 358   html:not(.public_page) body:not(.front-page) footer.page-footer .footer-wrapper,
 359   body:not(.front-page) section.content {
 360     margin-left: 260px;
 361     flex: 1 1 auto;
 362     &.extended {
 363       margin-left: 85px;
 364     }
 365   }
 366
 367   section.desktop .container {
 368     max-width: 695px;
 369     margin: 0 auto;
 370   }
 371
 372   /*
 373    * .pusher doesn't play well with sticky position children.
 374    * It is required for sidebars, which are only used at the moment on
 375    * lower resolutions. So it is safe to reset its overflow property.
 376    *
 377    */
 378   body.pushable > .pusher:not(.overflowing) {
 379     overflow: unset;
 380   }
 381   .position-sticky {
 382     position: sticky;
 383     top: 0px;
 384     z-index: 10;
 385   }
 386 }
 387
 388 @media only screen and (max-width: 1199px) {
 389   aside.computer.toc {
 390     .ui.text.compact.small.fluid.menu {
 391       font-size: .8em;
 392
 393       .ui.buttons .button {
 394         padding: .5em;
 395       }
 396     }
 397   }
 398 }
 399
 400 @media only screen and (min-width: 1200px) {
 401   aside.toc {
 402     width: 350px;
 403   }
 404
 405   html:not(.public_page) body:not(.front-page) footer.page-footer .footer-wrapper,
 406   body:not(.front-page) section.content {
 407     margin-left: 350px;
 408   }
 409
 410   section.desktop .container {
 411     max-width: 850px;
 412   }
 413 }
 414
 415 /*---------------------------------
 416     Desktop main activities
 417 ----------------------------------*/
 418 #main-activities a i {
 419   opacity: .6;
 420 }
 421
 422 #main-activities a:hover i {
 423   opacity: 1;
 424   color: @primaryColor;
 425 }
 426
 427 #main-activities .header {
 428   color: @textColor;
 429 }
 430
 431 /*-------------------------
 432       Spacings
 433 --------------------------*/
 434 .filters .segment .button,
 435 .infoline .segments .fitted.segment .label,
 436 .infoline .segments .fitted.segment .tiny.button,
 437 #groups_field .button {
 438   margin-bottom: 0.75em;
 439 }
 440
 441 /*-----------------------
 442     Sortable items
 443 ------------------------*/
 444 ul.sortable-items {
 445   list-style-type: none;
 446   margin: 0;
 447   padding: 0;
 448 }
 449
 450 .sortable-items {
 451   .ui.segment {
 452     cursor: move;
 453     background-color: @evenLineBackgroundColor;
 454
 455     &:hover {
 456       background-color: @activeLineBackgroundColor;
 457     }
 458   }
 459 }
 460
 461 /*--------------------
 462     Leading dots
 463 ---------------------*/
 464 ul.leaders {
 465   display: block!important;
 466   padding: 0;
 467   overflow-x: hidden;
 468   list-style: none;
 469   overflow: hidden;
 470 }
 471 ul.leaders li {
 472   position: relative;
 473 }
 474 ul.leaders li:before {
 475   width: 100%;
 476   content: "";
 477   border-bottom: 1px dotted @textColor;
 478   height: 1rem;
 479   position: absolute;
 480   bottom: .5rem;
 481   z-index: -1;
 482 }
 483 ul.leaders span:first-child {
 484   padding-right: 0.33em;
 485   background: white
 486 }
 487 ul.leaders span + span {
 488   padding-left: 0.33em;
 489   position: absolute;
 490   background: white;
 491   right: 0;
 492 }
 493
 494 /*-------------------------
 495     Back top top button
 496 --------------------------*/
 497 #back2top {
 498   display: none;
 499   position: fixed;
 500   right: .5rem;
 501   bottom: .5rem;
 502   z-index: 2;
 503   border: 1px solid @borderColor;
 504 }
 505
 506 /*------------------------------------------------
 507     Fix conflicts between SUI and icons classes
 508 -------------------------------------------------*/
 509 .ui.card.icon {
 510   width: auto;
 511   display: inline-block;
 512   margin-right: .25rem;
 513   box-shadow: none !important;
 514 }
 515
 516 /*---------------------------------
 517     Fix Summernote modal display
 518 ----------------------------------*/
 519
 520 .note-modal-backdrop,
 521 .note-modal .note-group-select-from-files {
 522   display: none !important;
 523 }
 524
 525 .note-modal.open {
 526   background: rgba(0,0,0,0.5);
 527 }
 528
 529 .note-modal .note-modal-content {
 530   position: fixed;
 531   top: 50%;
 532   left: 50%;
 533   transform: translateX(-50%) translateY(-50%);
 534   margin: 30px 0;
 535 }
 536
 537 .required .note-editable {
 538   font-weight: normal;
 539 }
 540
 541 .note-modal .note-modal-footer {
 542   height: 62px;
 543 }
 544
 545 .note-modal .note-btn {
 546   padding: 10px;
 547 }
 548
 549 @media only screen and (min-width: 768px) {
 550   .note-modal-content {
 551     margin: 0;
 552   }
 553 }
 554
 555 /*-----------------------------
 556     Summernote display
 557 ------------------------------*/
 558 .field .note-editor.note-frame .note-editing-area .note-editable[contenteditable="false"] {
 559     background-color: #fff;
 560 }
 561 .ui.corner.labeled .note-editor {
 562   width: 100%;
 563 }
 564
 565 /*-------------------------
 566     Print stylesheet
 567 --------------------------*/
 568 @media print {
 569   html,
 570   body.pushable,
 571   body.pushable > .pusher {
 572     overflow: unset;
 573   }
 574
 575   body,
 576   body.pushable {
 577     background: #fff;
 578   }
 579
 580   html.public_page section.vertically.centered {
 581     justify-content: start;
 582   }
 583
 584   .ui.fixed.menu + .pusher {
 585     padding-top: 0;
 586   }
 587
 588   .loggedin #main {
 589     background-image: none;
 590   }
 591   body:not(.loggedin) #main {
 592     width: 100%;
 593   }
 594
 595   .logo {
 596     margin-top: 0 !important;
 597   }
 598
 599   table.listing tbody tr:hover > td {
 600     background-color: inherit !important;
 601   }
 602
 603   .displaynone,
 604   .visually-hidden,
 605   #top-navbar,
 606   aside.toc,
 607   #recup_mailing,
 608   form.filters,
 609   .ui.horizontal.checkboxes.segments,
 610   table input[type=checkbox],
 611   .infoline .button,
 612   .infoline .right.aligned.segment,
 613   .actions_row,
 614   .ui.pagination.menu,
 615   footer.page-footer,
 616   #back2top {
 617     display: none !important;
 618   }
 619 }