]> git.ipfire.org Git - people/shoehn/ipfire.org.git/blobdiff - static/css/style.css
Bootstap 4 migration: imprint
[people/shoehn/ipfire.org.git] / static / css / style.css
index 6b635f55e02c300a882b4a9848ccff348efdd6ee..68f1a09092f111916192bf9b221ccaa7de96b590 100644 (file)
@@ -1248,6 +1248,250 @@ mark,
   .offset-xl-11 {
     margin-left: 91.6666666667%; } }
 
+.form-control {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #464a4c;
+  background-color: #fff;
+  background-image: none;
+  background-clip: padding-box;
+  border: 2px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
+  .form-control::-ms-expand {
+    background-color: transparent;
+    border: 0; }
+  .form-control:focus {
+    color: #464a4c;
+    background-color: #fff;
+    border-color: #5cb3fd;
+    outline: none; }
+  .form-control::placeholder {
+    color: #636c72;
+    opacity: 1; }
+  .form-control:disabled, .form-control[readonly] {
+    background-color: #eceeef;
+    opacity: 1; }
+  .form-control:disabled {
+    cursor: not-allowed; }
+
+select.form-control:not([size]):not([multiple]) {
+  height: calc(2.25rem + 4px); }
+
+select.form-control:focus::-ms-value {
+  color: #464a4c;
+  background-color: #fff; }
+
+.form-control-file,
+.form-control-range {
+  display: block; }
+
+.col-form-label {
+  padding-top: calc(0.5rem - 2px * 2);
+  padding-bottom: calc(0.5rem - 2px * 2);
+  margin-bottom: 0; }
+
+.col-form-label-lg {
+  padding-top: calc(0.75rem - 2px * 2);
+  padding-bottom: calc(0.75rem - 2px * 2);
+  font-size: 20px; }
+
+.col-form-label-sm {
+  padding-top: calc(0.25rem - 2px * 2);
+  padding-bottom: calc(0.25rem - 2px * 2);
+  font-size: 0.875rem; }
+
+.col-form-legend {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-bottom: 0;
+  font-size: 1rem; }
+
+.form-control-static {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-bottom: 0;
+  line-height: 1.25;
+  border: solid transparent;
+  border-width: 2px 0; }
+  .form-control-static.form-control-sm, .form-control-static.form-control-lg {
+    padding-right: 0;
+    padding-left: 0; }
+
+.form-control-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.2rem; }
+
+select.form-control-sm:not([size]):not([multiple]) {
+  height: 1.8125rem; }
+
+.form-control-lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 20px;
+  border-radius: 0.3rem; }
+
+select.form-control-lg:not([size]):not([multiple]) {
+  height: 3.1666666667rem; }
+
+.form-group {
+  margin-bottom: 1rem; }
+
+.form-text {
+  display: block;
+  margin-top: 0.25rem; }
+
+.form-check {
+  position: relative;
+  display: block;
+  margin-bottom: 0.5rem; }
+  .form-check.disabled .form-check-label {
+    color: #636c72;
+    cursor: not-allowed; }
+
+.form-check-label {
+  padding-left: 1.25rem;
+  margin-bottom: 0;
+  cursor: pointer; }
+
+.form-check-input {
+  position: absolute;
+  margin-top: 0.25rem;
+  margin-left: -1.25rem; }
+  .form-check-input:only-child {
+    position: static; }
+
+.form-check-inline {
+  display: inline-block; }
+  .form-check-inline .form-check-label {
+    vertical-align: middle; }
+  .form-check-inline + .form-check-inline {
+    margin-left: 0.75rem; }
+
+.form-control-feedback {
+  margin-top: 0.25rem; }
+
+.form-control-success,
+.form-control-warning,
+.form-control-danger {
+  padding-right: 2.25rem;
+  background-repeat: no-repeat;
+  background-position: center right 0.5625rem;
+  background-size: 1.125rem 1.125rem; }
+
+.has-success .form-control-feedback,
+.has-success .form-control-label,
+.has-success .col-form-label,
+.has-success .form-check-label,
+.has-success .custom-control {
+  color: #5cb85c; }
+
+.has-success .form-control {
+  border-color: #5cb85c; }
+
+.has-success .input-group-addon {
+  color: #5cb85c;
+  border-color: #5cb85c;
+  background-color: #eaf6ea; }
+
+.has-success .form-control-success {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"); }
+
+.has-warning .form-control-feedback,
+.has-warning .form-control-label,
+.has-warning .col-form-label,
+.has-warning .form-check-label,
+.has-warning .custom-control {
+  color: #f0ad4e; }
+
+.has-warning .form-control {
+  border-color: #f0ad4e; }
+
+.has-warning .input-group-addon {
+  color: #f0ad4e;
+  border-color: #f0ad4e;
+  background-color: white; }
+
+.has-warning .form-control-warning {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"); }
+
+.has-danger .form-control-feedback,
+.has-danger .form-control-label,
+.has-danger .col-form-label,
+.has-danger .form-check-label,
+.has-danger .custom-control {
+  color: #d9534f; }
+
+.has-danger .form-control {
+  border-color: #d9534f; }
+
+.has-danger .input-group-addon {
+  color: #d9534f;
+  border-color: #d9534f;
+  background-color: #fdf7f7; }
+
+.has-danger .form-control-danger {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"); }
+
+.form-inline {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center; }
+  .form-inline .form-check {
+    width: 100%; }
+  @media (min-width: 576px) {
+    .form-inline label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0; }
+    .form-inline .form-group {
+      display: flex;
+      flex: 0 0 auto;
+      flex-flow: row wrap;
+      align-items: center;
+      margin-bottom: 0; }
+    .form-inline .form-control {
+      display: inline-block;
+      width: auto;
+      vertical-align: middle; }
+    .form-inline .form-control-static {
+      display: inline-block; }
+    .form-inline .input-group {
+      width: auto; }
+    .form-inline .form-control-label {
+      margin-bottom: 0;
+      vertical-align: middle; }
+    .form-inline .form-check {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: auto;
+      margin-top: 0;
+      margin-bottom: 0; }
+    .form-inline .form-check-label {
+      padding-left: 0; }
+    .form-inline .form-check-input {
+      position: relative;
+      margin-top: 0;
+      margin-right: 0.25rem;
+      margin-left: 0; }
+    .form-inline .custom-control {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-left: 0; }
+    .form-inline .custom-control-indicator {
+      position: static;
+      display: inline-block;
+      margin-right: 0.25rem;
+      vertical-align: text-bottom; }
+    .form-inline .has-feedback .form-control-feedback {
+      top: 0; } }
+
 .btn {
   display: inline-block;
   font-weight: 600;
@@ -2083,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; }
@@ -5053,6 +5352,86 @@ a.pswp__share--download:hover {
 .pswp--minimal--dark .pswp__top-bar {
   background: none; }
 
+.donation-card {
+  border-radius: 4px;
+  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); }
+
+.ownamount {
+  overflow: hidden;
+  width: 95%;
+  height: 48px;
+  padding: 0 16px;
+  border-radius: 2px;
+  border: none; }
+
+.ownamount {
+  background-color: rgba(38, 50, 56, 0.08);
+  border-bottom: 2px solid #263238;
+  width: 90%; }
+
+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;
+  position: relative;
+  padding: 24px 20px; }
+
+label.amount {
+  width: 84px;
+  height: 48px;
+  display: block;
+  background-color: white;
+  border-radius: 2px;
+  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: center;
+  margin: 0 8px 16px 8px;
+  padding: 8px 0 0 0; }
+
+input[name=amount] {
+  display: none; }
+
+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;
@@ -5677,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; }
@@ -5693,6 +6075,15 @@ button:focus {
   color: #1976d2;
   border-color: #1976d2; }
 
+.blue_grey_300 {
+  color: rgba(38, 50, 56, 0.3); }
+
+.bg-blue-grey-900 {
+  background-color: #263238; }
+
+.bg-blue-grey-50 {
+  background-color: #eceff1; }
+
 img.img-fluid {
   width: 100%;
   max-width: 100%;