This repository has been archived on 2023-12-29. You can view files and clone it, but cannot push or open issues or pull requests.
dogstats/web/css/dogstats.css
2023-11-20 20:18:03 +01:00

155 lines
3.2 KiB
CSS

:root {
--white: #fefefd;
--lightblue: #47cafe;
--blue: #2ca6fc;
--darkblue: #021135;
--lightgreen: #cadc57;
--darkgreen: #788f08;
--lightbrown: #eddbb6;
--darkbrown: #ab8f5f;
--grey: #c5cbe9;
--black: #150d05;
}
@font-face {
font-family: 'Kalam-Light';
src: url(../webfonts/kalam/Kalam-Light.woff2) format('woff2');
}
@font-face {
font-family: 'Kalam-Regular';
src: url(../webfonts/kalam/Kalam-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'Kalam-Bold';
src: url(../webfonts/kalam/Kalam-Bold.woff2) format('woff2');
}
h1, h2, h3 {
font-family: 'Kalam-Bold', sans-serif;
}
h4, h5, h6 {
font-family: 'Kalam-Regular', sans-serif;
}
.btn-primary {
--bs-btn-bg: var(--blue);
--bs-btn-border-color: var(--blue);
--bs-btn-hover-bg: var(--lightblue);
--bs-btn-hover-border-color: var(--lightblue);
--bs-btn-active-bg: var(--lightblue);
--bs-btn-disabled-color: var(--grey);
--bs-btn-disabled-bg: var(--blue);
--bs-btn-disabled-border-color: var(--blue);
}
.btn-secondary {
--bs-btn-bg: var(--darkgreen);
--bs-btn-border-color: var(--darkgreen);
--bs-btn-hover-bg: var(--lightgreen);
--bs-btn-hover-border-color: var(--lightgreen);
--bs-btn-active-bg: var(--lightgreen);
--bs-btn-active-border-color: var(--lightgreen);
--bs-btn-disabled-bg: var(--darkgreen);
--bs-btn-disabled-border-color: var(--darkgreen);
}
main>.container {
padding: 60px 15px 0;
}
.tooltipp {
position: relative;
/* making the .tooltipp span a container for the tooltipp text */
border-bottom: 1px dashed #000;
/* little indicater to indicate it's hoverable */
}
.tooltipp:before {
content: attr(data-text);
/* here's the magic */
position: absolute;
/* vertically center */
top: 50%;
transform: translateY(-50%);
/* move to right */
left: 100%;
margin-left: 15px;
/* and add a small left margin */
/* basic styles */
width: 200px;
padding: 10px;
border-radius: 10px;
background: #000;
color: #fff;
text-align: center;
display: none;
/* hide by default */
opacity: 0;
transition: .3s opacity;
}
.tooltipp:hover:before {
display: block;
opacity: 1;
}
.tooltipp:after {
opacity: 0;
transition: .3s;
}
.tooltipp:hover:after {
opacity: 1;
}
/* Dropzone overrides */
.dropzone {
min-height: 150px;
border: 2px solid rgba(0,0,0,.3);
padding: 20px 20px;
}
/* XDEBUG */
.xdebug-error th
{
font-family:monospace;
font-weight:normal;
font-size:15px;
padding: 6px 6px 6px 6px;
border:1px solid black;
background: #FFCC99;
color:#000000;
}
.xdebug-error > tr:first-child > th:first-child,
.xdebug-error > tbody > tr:first-child > th:first-child
{
line-height:1.6em;
padding: 10px 10px 10px 10px;
border:1px solid #000000;
background: #000000;
color:#FFFFFF;
}
.xdebug-error td
{
font-size:14px;
padding: 6px 6px 6px 6px;
border:1px solid green;
background: #D1FFE8;
color:#000000;
}
#dog-data {
padding: 1rem 1rem 1rem 6rem;
border: 2px solid var(--blue);
}
#dog-data .dog-image {
position: absolute;
left: -50px;
top: -35px;
border: 1px solid var(--grey);
}