alchemy_cms/app/stylesheets/alchemy/admin/preview_window.scss at 17608d694f1c3e65e05bd2c8c6ce92fe38997d46 · AlchemyCMS/alchemy_cms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@use "../variables" as vars;

:root {
  --preview-window-min-width: 0px;

  @media screen and (min-width: vars.$large-screen-break-point) {
    --preview-window-min-width: 240px;
  }
}

#alchemy_preview_window {
  position: absolute;
  left: var(--main-menu-width);
  top: 75px;
  width: calc(
    100vw - var(--main-menu-width) - var(--elements-window-width) +
      var(--border-width_small)
  );
  min-width: var(--preview-window-min-width);
  max-width: calc(100vw - var(--main-menu-width));
  height: calc(100vh - var(--top-menu-height));
  border: 0 none;

  // This seems weird, but the correct way to create iframes that handle light/dark themes.
  // https://fvsch.com/transparent-iframes
  background-color: white;
  color-scheme: light;

  border-right: var(--border-default);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--elements-window-transition-easing);
  transition-property: width, max-width;

  .elements-window-visible & {
    max-width: calc(
      100vw - var(--main-menu-width) - var(--elements-window-min-width) +
        var(--border-width_small)
    );
  }
}

@media (prefers-color-scheme: dark) {
  #alchemy_preview_window {
    color-scheme: dark;
  }
}