diff --git a/public/main.css b/public/main.css deleted file mode 100644 index 702d640..0000000 --- a/public/main.css +++ /dev/null @@ -1,116 +0,0 @@ -* { - box-sizing: border-box; -} - -html, body { - margin: 0px; - height: 100%; -} - -.modal.background { - background-image: url('/tip.jpg'); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - height: 100%; - width: 100%; - position: absolute; -} - -.modal.box { - background-color: #A9D0F5; - border-radius: 15px; - border-style: solid; - border-color: #FFFFFF; - text-align: center; - width: 50%; - padding: 1em; - -webkit-animation-name: from_top; - -webkit-animation-duration: 1.5s; - animation-name: from_top; - animation-duration: 1.5s; - position: absolute; - left: 25%; - top: 25%; - z-index: 10; -} - -.modal.button { - border-radius: 5px; - border: solid; - color: #FFFFFF; - font-size: 1em; - padding: 15px 25px; - text-align: center; - transition-duration: 0.3s; -} - -.modal.button:hover { - background-color: #FFFFFF; - border: solid; - color: #000000; - cursor: pointer; -} - -.modal.button.accept { - /* background-color: #04B404; */ -} - -.modal.button.decline { - background-color: #FF4D4D; -} - -#video { - background-image: url('/willpower.gif'); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - height: 100%; - width: 100%; - z-index: 255; - position: absolute; - display: none; -} - -.modal.loader { - border: 16px solid #C9C9C9; - border-top: 16px solid #000000; - border-radius: 50%; - width: 120px; - height: 120px; - animation: spin 2s linear infinite; - margin: -4em auto auto -4em; - display: flex; - top: 50%; - left: 50%; - position: absolute; -} - -@-webkit-keyframes from_top { - from { - top: -25%; - opacity: 0; - } - - to { - top: 25%; - opacity: 1; - } -} - -@keyframes from_top { - from { - top: -25%; - opacity: 0; - } - - to { - top: 25%; - opacity: 1; - } -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} diff --git a/public/willpower.css b/public/willpower.css index 6335624..256c28d 100644 --- a/public/willpower.css +++ b/public/willpower.css @@ -16,6 +16,9 @@ html, body { height: 100%; width: 100%; position: absolute; + display: flex; + align-items: center; + justify-content: center; } .modal.box { @@ -24,26 +27,31 @@ html, body { border-style: solid; border-color: #FFFFFF; text-align: center; - width: 50%; + width: 70%; padding: 1em; -webkit-animation-name: from_top; -webkit-animation-duration: 1.5s; animation-name: from_top; animation-duration: 1.5s; position: absolute; - left: 25%; - top: 25%; z-index: 10; } +.modal.buttons { + display: flex; + gap: 2em; +} + .modal.button { border-radius: 5px; border: solid; color: #000000; - font-size: 1em; - padding: 15px 25px; + padding: 15px 0; text-align: center; transition-duration: 0.3s; + font-weight: bold; + font-size: 1em; + flex: 1; } .modal.button:hover { diff --git a/views/index.erb b/views/index.erb index ada2b66..dbd46b2 100644 --- a/views/index.erb +++ b/views/index.erb @@ -9,13 +9,14 @@ automatically through cookies or similar technology.

For further information please visit allaboutcookies.org.

- -   - +