Sidebar looks bigger, 3d cube looks smaller in Multiple page streamlit app

Using Streamlit
1

Versions:
streamlit v1.13.0
python v3.8

When I added the cube-design code to my existing multiple-page code, the side bar appeared larger and the cube and the text on it appeared smaller. How can I make all elements appear proportional and normal?
.

import streamlit as st

# Page config
st.set_page_config(
        page_title= "Multipage App",
        page_icon="📁")


st.title("Main Page")



# Customization for sidebar
st.markdown('<style>div[class="css-6qob1r e1fqkh3o3"] { background: url("https://media2.giphy.com/media/46hpy8xB3MiHfruixn/giphy.gif");background-repeat: no-repeat;background-size:350%;border:1px solid #36454F; border-top:none;} </style>', unsafe_allow_html=True)

# Hiding the Footer
hide_st_style =" <style>footer {visibility: hidden;}</style>"
st.markdown(hide_st_style, unsafe_allow_html=True)  


cube_design="""
<body>
  <div class="cube">
    <div class="top"> </div>
    <div class="bottom"> </div>
    <div class="left">
      <span>Page</span>
    </div>
    <div class="right">
      <span>to</span>
    </div>
    <div class="front">
      <span>Welcome</span>
    </div>
    <div class="back">
      <span>Main</span>
    </div>
  </div>
  <div class="shadow">
  </div>
</body>


<style>
 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 100px;
}

body {
  min-width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  perspective: 20em;
  perspective-origin: 77px 100px;
}

.cube {
  position: relative;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: animate 15s linear infinite;
  height: calc(2em + 20px);
  width: 2em;
}

@keyframes animate {
  to {
    transform: rotateY(-360deg);
  }
}

.shadow {
  position: absolute;
  background: aqua;
  width: 2em;
  height: 2em;
  transform: translateX(-50%) translateZ(-130px) rotateX(90deg) rotateZ(3deg);
  bottom: calc(50% - 2em - 35px);
  left: 50%;
  box-shadow: 0 120px 100px 10px blue, 50px 120px 200px 10px blue;
  filter: blur(100px);
}

.top,
.bottom,
.left,
.right,
.front,
.back {
  height: 2em;
  width: 2em;
  background: aqua;
  position: absolute;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 50px 10px blue inset, 0 0 0 2em aqua inset;
}

.front {
  transform: translateZ(1em);
}

.back {
  transform: translateZ(-1em);
}

.top {
  transform: translateY(-1em) rotateX(90deg);
}

.bottom {
  transform: translateY(1em) rotateX(90deg);
}

.right {
  transform: translateX(1em) rotateY(90deg);
}

.left {
  transform: translateX(-1em) rotateY(90deg);
}

.right>span,
.front>span,
.left>span,
.back>span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.35rem;
  color:#004D40;
  font-family: Lucida Handwriting;
}

.left>span,
.back>span {
  transform: translate(-50%, -50%) rotateY(180deg);
}
			  
</style>
	 

</body>
"""
st.markdown(cube_design, unsafe_allow_html=True)

cube-design as HTML file:

1
11359×619 48.5 KB

cube-design + side bar in streamlit:

2
21363×631 52.8 KB

2

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.