Files
martinfencl.eu/css/index.css
T
2026-11-10 09:49:46 +01:00

819 lines
16 KiB
CSS
Executable File
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
* {
}
a {
text-decoration: none;
color: inherit;
}
video {
z-index: -1;
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
opacity: 0.8;
}
img {
display: block;
}
body {
margin: 0px;
padding: 0px;
/ / font-family: 'Roboto', sans-serif;
font-family: Ubuntu, sans-serif;
overflow-x: hidden;
background-color: black;
background-repeat: no-repeat;
background-size: cover;
}
.video-controls {
display: flex;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
align-items: center;
justify-content: center;
}
.video-controls-inside {
color: white;
background: rgba(0, 0, 0, 0.7);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 1px 1px 7px 4px rgba(0, 0, 0, 0.3);
padding: 15px;
display: flex;
}
.video-controls .label {
display: flex;
flex: 1;
font-weight: bold;
}
.video-controls .controls ul {
list-style: none;
margin: 0;
display: flex;
padding: 0 0 0 50px;
}
.video-controls .controls ul li:not(:last-child) {
margin-right: 10px;
}
.video-controls .controls ul li:hover {
cursor: pointer;
transition: 0.3s;
opacity: 0.7;
}
#Page_table {
position: absolute;
width: 100%;
height: 100%;
padding-top: 60px;
}
#Page_title {
border-radius: 4px;
display: inline-block;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.4);
font-size: 36px;
margin-bottom: 200px;
}
#social {
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn { /* global button class */
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
/ / box-shadow: 0 2 px 2 px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
/* facebook button class*/
.facebookBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.facebookBtn:before { /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover {
background: #333;
}
/* facebook button class*/
.diasporaBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.diasporaBtn:before { /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f791"; /* add facebook icon */
}
.diasporaBtn:hover {
background: #333;
}
/* twitter button class*/
.twitterBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.twitterBtn:before {
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover {
background: #333;
}
/* google plus button class*/
.googleplusBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.googleplusBtn:before {
font-family: "FontAwesome";
content: "\f0d5"; /* add googleplus icon */
}
.googleplusBtn:hover {
background: #333;
}
/* linkedin button class*/
.instagramBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.instagramBtn:before {
font-family: "FontAwesome";
content: "\f16d"; /* add linkedin icon */
}
.instagramBtn:hover {
background: #333;
}
/* pinterest button class*/
.pinterestBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.pinterestBtn:before {
font-family: "FontAwesome";
content: "\f0d3"; /* add pinterest icon */
}
.pinterestBtn:hover {
background: #333;
}
.githubBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.githubBtn:before {
font-family: "FontAwesome";
content: "\f092"; /* add linkedin icon */
}
.githubBtn:hover {
background: #333;
}
.linkedinBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.linkedinBtn:before {
font-family: "FontAwesome";
content: "\f08c"; /* add linkedin icon */
}
.linkedinBtn:hover {
background: #333;
}
.foursquareBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.foursquareBtn:before {
font-family: "FontAwesome";
content: "\f180"; /* add linkedin icon */
}
.foursquareBtn:hover {
background: #333;
}
.lockBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.lockBtn:before {
font-family: "FontAwesome";
content: "\f13e"; /* add linkedin icon */
}
.lockBtn:hover {
background: #333;
}
/
/
test new btn
(
jakub
)
.blogBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.blogBtn:before {
font-family: "FontAwesome";
content: "\f035"; /* add linkedin icon */
}
.blogBtn:hover {
background: #333;
}
.gravBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.gravBtn:before {
font-family: "FontAwesome";
content: "\f2d6"; /* add linkedin icon */
}
.gravBtn:hover {
background: #333;
}
/* telegram button class */
.telegramBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.telegramBtn:before {
font-family: "FontAwesome";
content: "\f2c6"; /* add tumblr icon */
}
.telegramBtn:hover {
background: #333;
}
/* tumblr button class*/
.mailBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.mailBtn:before {
font-family: "FontAwesome";
content: "\f003"; /* add tumblr icon */
}
.mailBtn:hover {
background: #333;
}
/* tumblr button class*/
.phoneBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.phoneBtn:before {
font-family: "FontAwesome";
content: "\f095"; /* add tumblr icon */
}
.phoneBtn:hover {
background: #333;
}
/* tumblr button class*/
.bankBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
padding-left: 1px;
}
.bankBtn:before {
font-family: "FontAwesome";
content: "\f19c"; /* add tumblr icon */
}
.bankBtn:hover {
background: #333;
}
/* tumblr button class*/
.publicKeyBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
padding-left: 1px;
}
.publicKeyBtn:before {
font-family: "FontAwesome";
content: "\f084"; /* add tumblr icon */
}
.publicKeyBtn:hover {
background: #333;
}
/* homarr dashboard button class*/
.dashboardBtn {
background: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.dashboardBtn:before {
font-family: "FontAwesome";
content: "\f0e4"; /* add dashboard icon */
}
.dashboardBtn:hover {
background: #333;
}
.GlobalBtn {
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
/ / box-shadow: 0 2 px 2 px #999;
/ / padding: 0 px;
text-decoration: none;
text-align: center;
color: white;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background-color: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.GlobalBtn img {
width: 30px;
}
.GlobalBtnTable {
width: 100%;
height: 100%;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-style: inherit;
}
.GlobalBtn:hover {
background-color: #333;
}
#GlobalBtns {
position: absolute;
cursor: pointer;
width: 30px;
height: 30px;
/ / box-shadow: 0 2 px 2 px #999;
/ / padding: 0 px;
text-decoration: none;
text-align: center;
color: white;
font-size: 18px;
font-weight: normal;
line-height: 2em;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background-color: black;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
left: 25px;
top: -25px;
}
#Page_info, #Bank_info {
position: relative;
display: inline-block;
}
#Page_info_ext, #Bank_info_ext {
position: absolute;
left: -120px;
top: -140px;
width: 300px;
min-height: 60px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 15px;
color: rgb(238, 238, 255);
text-align: center;
padding: 15px;
font-family: Lucida Console, Lucida Sans Typewriter, monaco, Bitstream Vera Sans Mono, monospace;
line-height: 25px;
}
#Page_info_ext_arrow, #Bank_info_ext_arrow {
position: absolute;
left: 80px;
top: 90px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid rgba(0, 0, 0, 0.7);
}
#Page_info_ext_arrow_rotate, #Bank_info_ext_arrow_rotate {
position: absolute;
left: 80px;
top: 90px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid rgba(0, 0, 0, 0.7);
}
#Bank_info_ext {
top: +30px;
left: -245px;
width: 240px;
}
#Bank_info_ext_arrow_rotate {
left: 205px;
top: -10px;
transform: rotate(58deg);
}
#Bank_info_ext_arrow {
left: 205px;
top: 319px;
}
#Bank_info img {
margin: 10px;
width: 220px;
}
#Qr_home {
position: fixed;
right: 0px;
display: block;
bottom: 0px;
padding: 5px;
display: block;
background-color: rgba(0, 0, 0, 0.9);
border-top-left-radius: 20px;
}
#Qr_home img {
margin: 10px;
width: 150px;
}
#Qr_title {
color: rgb(238, 238, 255);
text-align: center;
margin-left: 10px;
font-family: Lucida Console, Lucida Sans Typewriter, monaco, Bitstream Vera Sans Mono, monospace;
line-height: 25px;
margin-top: 5px;
}
html, body {
min-height: 100%;
}
/*
#name_font{
font-family: 'Alfa Slab One', cursive;
font-style: italic;
text-align: center;
font-size: 80px;
color: rgb(252, 250, 255);
background-color: rgba(0, 0, 0, 0);
text-shadow: rgb(111, 97, 158) 5px 4px 0px;
}
*/
#tittle_wapper{
font-family: 'Alfa Slab One', cursive;
font-style: italic;
z-index: 1;
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0);
text-align: center;
font-size: 80px; text-shadow:rgb(111, 97, 158) 5px 4px 0px;
overflow:hidden;
letter-spacing: .20em;
animation: typing 1s steps(20, end), blink-caret .65s step-end 4;
white-space: nowrap;
border-right: .1em solid transparent;
width:750px;
}
@keyframes typing {
from { width: 0 }
to { width: 750px }
}
@keyframes blink-caret {
from, to { border-color: orange }
50% { border-color: transparent; }
}
button {
width: 180px;
height: 40px;
cursor: pointer;
font-family: 'Alfa Slab One', cursive;
/*font-style: italic;*/
font-size: 20px;
/*font-weight: bold;*/
color: black;
/*color: rgb(111, 97, 158);*/
background: white;
border: 1.5px solid black;
border-color: rgb(111, 97, 158);
box-shadow: 4px 4px 0 #6f619e,
-4px -4px 0 #6f619e,
-4px 4px 0 #6f619e,
4px -4px 0 #6f619e;
transition: 500ms ease-in-out;
}
button:hover {
/*box-shadow: 20px 5px 0 black, -20px -5px 0 black;*/
box-shadow: 20px 4px 0 #6f619e, -20px -4px 0 #6f619e;
}
button:focus {
outline: none;
}
/* "other" – half-size twin of the "about me" button, opens a link list above itself */
#Other_wrap {
position: relative;
display: inline-block;
margin-top: 18px;
}
#Other_btn {
width: 90px;
height: 20px;
padding: 0;
font-size: 10px;
line-height: 1;
border-width: 1px;
box-shadow: 2px 2px 0 #6f619e,
-2px -2px 0 #6f619e,
-2px 2px 0 #6f619e,
2px -2px 0 #6f619e;
}
#Other_btn:hover,
#Other_btn[aria-expanded="true"] {
box-shadow: 10px 2px 0 #6f619e, -10px -2px 0 #6f619e;
}
#Other_list {
display: none;
position: absolute;
bottom: calc(100% + 10px); /* low enough to fully cover the "about me" button while open */
left: 50%;
transform: translateX(-50%);
z-index: 5;
width: 300px;
max-width: calc(100vw - 32px);
box-sizing: border-box;
padding: 15px 20px;
background-color: rgba(0, 0, 0, 0.95);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: 15px;
color: rgb(238, 238, 255);
text-align: left;
font-family: Lucida Console, Lucida Sans Typewriter, monaco, Bitstream Vera Sans Mono, monospace;
font-size: 15px;
line-height: 25px;
}
#Other_list .other-section {
margin-top: 12px;
font-size: 11px;
letter-spacing: .15em;
text-transform: uppercase;
color: #a99fd0;
}
#Other_list .other-section:first-child {
margin-top: 0;
}
#Other_list ul {
list-style: none;
margin: 0;
padding: 0;
}
#Other_list a {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
margin: 0 -8px;
padding: 1px 8px;
border-radius: 6px;
transition: background-color 0.2s ease;
}
#Other_list a:hover,
#Other_list a:focus-visible {
background-color: rgba(111, 97, 158, 0.55);
outline: none;
}
#Other_list .other-note {
font-size: 12px;
color: rgba(238, 238, 255, 0.55);
}
#Other_list_arrow {
position: absolute;
left: 50%;
bottom: -7px;
width: 0;
height: 0;
margin-left: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 7px solid rgba(0, 0, 0, 0.95);
}