wix-style-react/src/MobilePreviewWidget/MobilePreviewWidget.st.css

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D60, D80, D10-20, D10-30;
}

:import{
  -st-from: "../PreviewWidget/PreviewWidget.st.css";
  -st-default: PreviewWidget;

}

:import {
  -st-from: '../Foundation/stylable/default-scroll-bar.st.css';
  -st-named: defaultScrollBar;
}

:vars {
  mobileContentHeight: 480px;
  mobileContentWidth: 320px;
  mobileFooterHeight: 60px;
  mobileHeaderHeight: 60px;
}

.root {
  -st-extends: PreviewWidget;
}

.root::contentArea{
  border-radius: 36px;
  position: relative;
}

.root::contentArea::after{
  border-radius: inherit;
  content: '';
  position: absolute;
  display: block;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  box-shadow: inset 0 0 6px 0 value(D10-20);
  /* Added this to make the "content" div is scrollable */
  pointer-events: none;
}

.header{
  height: value(mobileHeaderHeight);
  background-color: value(D80);
  border-bottom: 1px solid value(D60) ;
  position: relative;
}

.camera{
  width: 12px;
  height: 12px;
  border-radius: 6px;
  box-shadow: inset 0 0 4px 0 value(D10-30);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: calc(50% - 36px);
}

.speaker{
  width: 48px;
  height: 6px;
  border-radius: 4px;
  box-shadow: inset 0 0 4px 0 value(D10-30);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content{
  -st-mixin: defaultScrollBar;
  height: value(mobileContentHeight);
  width: value(mobileContentWidth);
  overflow-y: auto;
  background-color: value(D80);
}

.footer{
  height: value(mobileFooterHeight);
  background-color: value(D80);
  border-top: 1px solid value(D60) ;
}