publiccode.si/site/static/css/custom.css

370 lines
7.1 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/* GENERAL STYLING */
.bg-primary a {
color: #fff;
}
.subpage h2 {
margin-top: 30px;
margin-bottom: 20px;
}
blockquote p {
font-size: 17.5px;
}
/* SUBPAGES */
.subpage {
background-image: url(../img/header_subpage.jpg);
background-size: cover;
color: #fff;
min-height: 90%
}
.subpage h1 {
text-align: center;
}
/* ABOUT SECTION w/ video */
#about video {
width: 100% !important;
height: auto !important;
margin-bottom: 20px;
}
/* ARGUMENTS SECTION */
#arguments #arguments-followup p {
margin-top: 50px;
font-size: 18px;
}
/* LANGUAGE SECTION */
#language {
color: #fff;
background-color: #333;
padding: 20px;
}
#language p {
margin-bottom: 5px;
}
#language ul {
padding: 0px;
}
#language li {
display: inline-block;
margin-right: 10px;
}
#language li::before {
content: " ";
}
/* LEGAL SECTION */
#legal {
color: #fff;
background-color: #367836;
padding: 10px;
margin: 0px;
}
#legal p {
padding: 0px;
margin: 0px;
font-size: 1em;
}
#legal a {
color: #CCC;
}
#legal a:hover {
color: #EEE;
}
/* ORGANISATIONS SECTION */
#organisations ul {
display: block;
position: relative;
list-style: none;
text-align: center;
padding: 0;
}
#organisations ul li {
display: inline-block;
position: relative;
list-style: none;
}
#organisations ul li a {
display: block;
position: relative;
width: 12vw;
height: 8vw;
max-width: 120px;
max-height: 80px;
min-width: 120px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transform: scale(0.8);
opacity: 1;
transition: opacity .5s, transform .5s, background-color .5s, filter .5s;
}
#organisations ul li a:hover {
opacity: 1;
transform: scale(0.9);
z-index: 5;
}
/* SIGN FORM */
#action a {
color: #CCC;
}
#action a:hover {
color: #EEE;
}
#action form {
color: #fff;
font-size: 18px;
}
#action form label {
font-weight: 400;
margin: 5px 3px;
}
.sign-input {
position: relative;
color: #555;
}
.sign-input:before {
font-family: "FontAwesome";
font-size: 20px;
position: absolute;
left: 10px;
top: 2px;
}
.sign-input input, .sign-input select {
background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
border-radius: 20px;
padding: 0 0 0 36px;
width: 270px;
height: 34px;
font-weight: 600;
}
.sign-input.form-co input {
width: 554px;
}
@media screen and (max-width:586px) {
.sign-input.form-co input {
max-width: 100%;
}
label.sign-input.form-co {
max-width: 80%;
min-width: 270px;
}
}
.form-na:before {
content: "\f2c3";
}
.form-em:before {
content: "\f003";
}
.form-cn select {
padding-left: 30px !important;
background-color: #ffffff;
}
.form-cn select option:first-child {
color: #AAA;
}
.form-cn:before {
content: "\f041";
padding-left: 4px;
}
.form-zp:before {
content: "\f08d";
padding-left: 3px;
}
.form-co:before {
content: "\f27a";
padding-left: 3px;
}
p.form-pe {
text-align: left;
max-width: 530px; /* to not let the checkboxed go far more left than the input boxes above */
margin: 0 auto;
}
p.form-pe a {
color: inherit;
}
#honey {
display: none;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #AAA;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #AAA;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #AAA;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #AAA;
}
/* SIGNATURE TABLE */
table#sigtable {
display: table;
width: 100%;
margin-bottom: 20px;
}
table#sigtable thead, table#sigtable tbody {
width: 100%;
}
table#sigtable td:nth-child(1), table#sigtable th:nth-child(1) {
width: 25%;
}
table#sigtable td:nth-child(2), table#sigtable th:nth-child(2) {
width: 25%;
}
table#sigtable td:nth-child(3), table#sigtable th:nth-child(3) {
width: 50%;
}
table#sigtable thead {
display: table;
background-color: rgba(230, 230, 230, 0.3);
}
table#sigtable th {
text-transform: uppercase;
}
table#sigtable tr {
width: 100%;
display: table;
text-align: left;
}
table#sigtable th, table#sigtable td {
border-bottom: 1px solid darkgrey;
text-align: left;
padding: 5px;
}
table#sigtable tr:nth-child(even) {
background-color: rgba(230, 230, 230, 0.05);
}
table#sigtable tr:hover {
background-color: rgba(230, 230, 230, 0.1);
}
/* SPECIAL LINK UNDERLINE EFFECT */
a:not(.btn):not(.hiddenlink) {
box-shadow: 0 0 1px transparent;
display: inline-block;
overflow: hidden;
position: relative;
transform: perspective(1px) translateZ(0px);
vertical-align: middle;
margin-top: -3px;
}
a:not(.btn):not(.hiddenlink)::before {
background: #006d9e none repeat scroll 0 0;
bottom: 2px;
content: "";
height: 1px;
left: 50%;
position: absolute;
right: 50%;
transition-duration: 0.3s;
transition-property: left, right;
transition-timing-function: ease-out;
z-index: -1;
}
a:not(.btn):not(.hiddenlink):hover::before, a:not(.btn):not(.hiddenlink):focus::before, a:not(.btn):not(.hiddenlink):active::before {
left: 0;
right: 0;
}
/* Bouncing down arrow */
.arrow-bounce {
text-align: center;
margin: -60px 0 -20px 0;
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
.arrow-bounce a {
color: #168EC1;
padding: 30px;
}
.arrow-bounce a:hover {
color: #0F5E80;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
/* Scroll to top arrow */
#scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
text-decoration: none;
border-radius: 50%;
}
#scroll-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
}
/* DEFINITION BOX */
.definition {
margin: 20px 10px;
padding: 0px;
background-image: linear-gradient(white, white),
linear-gradient(white, white),
linear-gradient(white, white),
linear-gradient(white, white),
linear-gradient(rgba(288, 288, 288, 0.3), rgba(288, 288, 288, 0.3));
background-repeat: no-repeat;
background-size: 4px 30px, 30px 4px, 4px 30px, 30px 4px, calc(100% - 8px) calc(100% - 8px);
background-position: left top, left top, right bottom, right bottom, 4px 4px;
}
.definition.blue {
background-image: linear-gradient(#2093C4, #2093C4),
linear-gradient(#2093C4, #2093C4),
linear-gradient(#2093C4, #2093C4),
linear-gradient(#2093C4, #2093C4),
linear-gradient(rgba(32, 147, 196, 0.2), rgba(32, 147, 196, 0.2));
}
.definition p {
margin: 0;
padding: 20px 30px;
font-style: italic;
}
/* FLOATING SIGNATURE BOX */
#action-box {
position: fixed;
top: 60px;
left: 0px;
background: rgba(64,166,46,0.8);
color: #fff;
max-width: 250px;
padding: 10px;
border-radius: 0px 15px 15px 0px;
border: 1px solid #2F7423;
border-left: none;
text-align: center;
font-size: 1.1em;
}
@media screen and (max-width: 767px) {
#action-box {
display: none;
}
}