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