Untitled
unknown
css
a year ago
3.4 kB
5
Indexable
Never
@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap"); .btn { box-shadow: -2px -2px calc(2px * 2) 0 rgba(111, 111, 111, 0.43), 2px 2px calc(2px * 2) 0 rgba(9, 9, 9, 0.41); background: #555; color: white; border: none; font-size: medium; padding: 0.5em 1em; border-radius: 5px; margin: 1em; cursor: pointer; outline: none; transition: background 0.4s ease; } .btn.btn-link { text-decoration: underline; } .btn:active { box-shadow: inset -2px -2px calc(2px * 2) 0 rgba(111, 111, 111, 0.43), inset 2px 2px calc(2px * 2) 0 rgba(9, 9, 9, 0.41); } body { padding: 0; margin: 0; } body ::selection { background: white; color: #555; text-shadow: none; } .container { overflow: auto; background: #555; display: flex; width: 100vw; height: 100vh; align-items: center; justify-content: center; font-family: "Nunito", "sans-serif"; transition: background 0.4s ease; } .container .outer-card { position: relative; width: 90%; max-width: 700px; min-height: 400px; border-radius: 20px; color: white; display: flex; flex-wrap: wrap; align-content: space-between; box-shadow: -5px -5px calc(5px * 2) 0 rgba(111, 111, 111, 0.43), 5px 5px calc(5px * 2) 0 rgba(9, 9, 9, 0.41); transition: background 0.4s ease; } .container .outer-card .title { max-width: calc(100% - 40px); margin: 0.5em 0 0 0; color: #555; text-shadow: 5px 5px 10px #3c3c3c, -5px -5px 10px #6f6f6f; font-size: 50px; font-weight: 900; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #5b5b5b; padding: 0 1em; box-sizing: border-box; flex-wrap: no-wrap; } .container .outer-card .content { box-shadow: inset -2px -2px calc(2px * 2) 0 rgba(111, 111, 111, 0.43), inset 2px 2px calc(2px * 2) 0 rgba(9, 9, 9, 0.41); padding: 1em; border-radius: 5px; width: 100%; margin: 1em; max-height: 40vh; overflow: auto; } .container .outer-card .buttons { display: flex; width: 100%; justify-content: flex-end; align-items: center; } .container .outer-card .info-card { border-radius: 20px; position: absolute; height: 100%; width: 100%; left: 0; top: 0; box-shadow: inset -2px -2px calc(2px * 2) 0 rgba(111, 111, 111, 0.43), inset 2px 2px calc(2px * 2) 0 rgba(9, 9, 9, 0.41); box-sizing: border-box; background: #555; display: flex; color: #555; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; clip-path: circle(35px at calc(100% - 50px) 50px); transition: clip-path 0.5s ease, color 0.4s ease, background 0.4s ease; background: white; cursor: help; } .container .outer-card .info-card .title { border: none; color: white; text-shadow: none; font-size: xx-large; text-transform: none; } .container .outer-card .info-card .info { margin: 30px 30px 0 0; font-size: larger; font-weight: bold; border: solid 3px #555; height: 25px; width: 25px; text-align: center; border-radius: 50%; padding: 5px; transition: border-color 0.4s ease; } .container .outer-card .info-card .content { width: 100%; margin: 2em; font-size: large; box-shadow: -2px -2px calc(2px * 2) 0 rgba(111, 111, 111, 0.43), 2px 2px calc(2px * 2) 0 rgba(9, 9, 9, 0.41); } .container .outer-card .info-card:hover { clip-path: circle(100%); background: #555; color: white; } .container .outer-card .info-card:hover .info { border-color: white; }