| 1 | /********** |
| 2 | * Frames * |
| 3 | **********/ |
| 4 | frame > border, |
| 5 | .frame { |
| 6 | box-shadow: none; |
| 7 | margin: 0; |
| 8 | padding: 0; |
| 9 | border-radius: 0; |
| 10 | border: 1px solid $borders_color; |
| 11 | |
| 12 | &.flat { border-style: none; } |
| 13 | |
| 14 | &:backdrop { border-color: $backdrop_borders_color; } |
| 15 | } |
| 16 | |
| 17 | actionbar > revealer > box { |
| 18 | padding: 6px; |
| 19 | border-top: 1px solid $borders_color; |
| 20 | |
| 21 | &:backdrop { border-color: $backdrop_borders_color; } |
| 22 | } |
| 23 | |
| 24 | scrolledwindow { |
| 25 | viewport.frame { // avoid double borders when viewport inside scrolled window |
| 26 | border-style: none; |
| 27 | } |
| 28 | |
| 29 | // This is used when content is touch-dragged past boundaries. |
| 30 | // draws a box on top of the content, the size changes programmatically. |
| 31 | overshoot { |
| 32 | &.top { |
| 33 | @include overshoot(top); |
| 34 | |
| 35 | &:backdrop { @include overshoot(top, backdrop); } |
| 36 | } |
| 37 | |
| 38 | &.bottom { |
| 39 | @include overshoot(bottom); |
| 40 | |
| 41 | &:backdrop { @include overshoot(bottom, backdrop); } |
| 42 | } |
| 43 | |
| 44 | &.left { |
| 45 | @include overshoot(left); |
| 46 | |
| 47 | &:backdrop { @include overshoot(left, backdrop); } |
| 48 | } |
| 49 | |
| 50 | &.right { |
| 51 | @include overshoot(right); |
| 52 | |
| 53 | &:backdrop { @include overshoot(right, backdrop); } |
| 54 | } |
| 55 | } |
| 56 | |
| 57 | // Overflow indication, works similarly to the overshoot, the size if fixed tho. |
| 58 | undershoot { |
| 59 | &.top { @include undershoot(top); } |
| 60 | |
| 61 | &.bottom { @include undershoot(bottom); } |
| 62 | |
| 63 | &.left { @include undershoot(left); } |
| 64 | |
| 65 | &.right { @include undershoot(right); } |
| 66 | } |
| 67 | |
| 68 | junction { // the small square between two scrollbars |
| 69 | border-color: transparent; |
| 70 | // the border image is used to add the missing dot between the borders, details, details, details... |
| 71 | border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch; |
| 72 | background-color: $scrollbar_bg_color; |
| 73 | |
| 74 | &:dir(rtl) { border-image-slice: 0 1 0 0; } |
| 75 | |
| 76 | &:backdrop { |
| 77 | border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px); |
| 78 | background-color: $backdrop_scrollbar_bg_color; |
| 79 | transition: $backdrop_transition; |
| 80 | } |
| 81 | } |
| 82 | } |
| 83 | |
| 84 | //vbox and hbox separators |
| 85 | separator { |
| 86 | background: transparentize(black, 0.9); |
| 87 | } |