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