ui/semantic/galette/globals/site.overrides

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