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