Bootstap 4 migration: imprint

[people/shoehn/ipfire.org.git] / static / css / style.css

diff --git a/static/css/style.css b/static/css/style.css
index dbc7cd017d7a89e4c727e7c1e04751a3d3e2d304..68f1a09092f111916192bf9b221ccaa7de96b590 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -2327,6 +2327,61 @@ a.badge:focus, a.badge:hover {
   .badge-danger[href]:focus, .badge-danger[href]:hover {
     background-color: #c9302c; }
 
+.alert {
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem; }
+
+.alert-heading {
+  color: inherit; }
+
+.alert-link {
+  font-weight: bold; }
+
+.alert-dismissible .close {
+  position: relative;
+  top: -0.75rem;
+  right: -1.25rem;
+  padding: 0.75rem 1.25rem;
+  color: inherit; }
+
+.alert-success {
+  background-color: #dff0d8;
+  border-color: #d0e9c6;
+  color: #3c763d; }
+  .alert-success hr {
+    border-top-color: #c1e2b3; }
+  .alert-success .alert-link {
+    color: #2b542c; }
+
+.alert-info {
+  background-color: #d9edf7;
+  border-color: #bcdff1;
+  color: #31708f; }
+  .alert-info hr {
+    border-top-color: #a6d5ec; }
+  .alert-info .alert-link {
+    color: #245269; }
+
+.alert-warning {
+  background-color: #fcf8e3;
+  border-color: #faf2cc;
+  color: #8a6d3b; }
+  .alert-warning hr {
+    border-top-color: #f7ecb5; }
+  .alert-warning .alert-link {
+    color: #66512c; }
+
+.alert-danger {
+  background-color: #f2dede;
+  border-color: #ebcccc;
+  color: #a94442; }
+  .alert-danger hr {
+    border-top-color: #e4b9b9; }
+  .alert-danger .alert-link {
+    color: #843534; }
+
 @keyframes progress-bar-stripes {
   from {
     background-position: 1rem 0; }
@@ -5302,7 +5357,6 @@ a.pswp__share--download:hover {
   background-color: white;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
 
-.currency-dropdown,
 .ownamount {
   overflow: hidden;
   width: 95%;
@@ -5311,21 +5365,30 @@ a.pswp__share--download:hover {
   border-radius: 2px;
   border: none; }
 
-.dropdown-wrapper,
 .ownamount {
   background-color: rgba(38, 50, 56, 0.08);
   border-bottom: 2px solid #263238;
   width: 90%; }
 
-.currency-dropdown {
-  background-color: transparent; }
-  .currency-dropdown:focus {
-    outline: none; }
+input.radiobtn:not(old) {
+  display: none; }
+
+input.radiobtn:not(old) + label {
+  display: inline-block;
+  background-image: url("/static/img/icons/icon-radiobtn-off.png");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  padding-left: 38px; }
+
+input.radiobtn:not(old):checked + label {
+  background-image: url("/static/img/icons/icon-radiobtn-on.png"); }
 
 .inline-card {
   border-radius: 8px;
   background-color: #eceff1;
-  padding: 24px; }
+  padding: 24px;
+  position: relative;
+  padding: 24px 20px; }
 
 label.amount {
   width: 84px;
@@ -5336,9 +5399,9 @@ label.amount {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
   font-size: 20px;
   color: #42a5f5;
-  text-align: left;
+  text-align: center;
   margin: 0 8px 16px 8px;
-  padding-top: 8px; }
+  padding: 8px 0 0 0; }
 
 input[name=amount] {
   display: none; }
@@ -5347,6 +5410,28 @@ input[name=amount]:checked + label {
   background-image: linear-gradient(120deg, #4fc3f7, #1976d2);
   color: white; }
 
+.or {
+  display: block;
+  height: 200px;
+  width: 1px;
+  border: 1px solid rgba(38, 50, 56, 0.3);
+  position: absolute;
+  left: 350px;
+  top: 12px; }
+  .or:before {
+    content: "OR";
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(38, 50, 56, 0.3);
+    background-color: #eceff1;
+    display: block;
+    position: absolute;
+    top: 12px;
+    left: -12px;
+    width: 24px;
+    height: 24px; }
+
 body {
   min-height: 100vh;
   display: flex;
@@ -5971,6 +6056,9 @@ button:focus {
 .i_server {
   fill: #ff8f00; }
 
+.i_secure {
+  fill: rgba(38, 50, 56, 0.3); }
+
 .amber-800 {
   color: #ff8f00;
   border-color: #ff8f00; }
@@ -5987,6 +6075,9 @@ button:focus {
   color: #1976d2;
   border-color: #1976d2; }
 
+.blue_grey_300 {
+  color: rgba(38, 50, 56, 0.3); }
+
 .bg-blue-grey-900 {
   background-color: #263238; }