141 lines
No EOL
3.8 KiB
CSS
141 lines
No EOL
3.8 KiB
CSS
@font-face {
|
|
font-family: 'Terminal Grotesque';
|
|
src: url('fonts/terminal-grotesque.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Danzza';
|
|
src: url('fonts/Danzza-Light.woff') format('woff');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Danzza';
|
|
src: url('fonts/Danzza-Regular.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Danzza';
|
|
src: url('fonts/Danzza-Medium.woff') format('woff');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Danzza';
|
|
src: url('fonts/Danzza-Bold.woff') format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root{
|
|
--font-title: 'Terminal Grotesque', sans-serif;
|
|
--font-body: 'Danzza', sans-serif;
|
|
|
|
--font-sans: 'Danzza', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
|
|
--text-h1: 3em;
|
|
|
|
--color-green-perso: #04fea0;
|
|
|
|
--color-black: #0B1632;
|
|
--color-white: #ffffff;
|
|
|
|
--color-gray-200: #BCCAF0;
|
|
--color-gray-100: #BCCAF0;
|
|
--color-gray-250: #8BA3E5;
|
|
--color-gray-300: #7A95E1;
|
|
--color-gray-400: #597BD9;
|
|
--color-gray-500: #3761D2;
|
|
--color-gray-600: #224196;
|
|
--color-gray-700: #1A3274;
|
|
--color-gray-800: #172C64;
|
|
--color-gray-850: #132553;
|
|
--color-gray-900: #0e1e43;
|
|
--color-gray-950: #0d1a38;
|
|
|
|
--button-cancel-filled-color-back: light-dark( var(--color-gray-300), var(--color-gray-950) );
|
|
--color-icon-perso: light-dark( var(--color-gray-700), var(--color-gray-400) );
|
|
|
|
--color-border: light-dark(var(--color-gray-300), var(--color-gray-600));
|
|
--dropdown-color-hr:var(--color-gray-800);
|
|
|
|
--color-focus: var(--color-green-perso);
|
|
|
|
--color-red-h: 355;
|
|
--color-green-h: 152;
|
|
--color-orange-h: 15;
|
|
--color-blue-h: 220;
|
|
}
|
|
|
|
.k-dialog-button-cancel:where([data-variant="filled"]) {
|
|
--button-color-back: var(--button-cancel-filled-color-back);
|
|
}
|
|
|
|
.k-box {
|
|
--icon-color: var(--color-icon-perso);
|
|
}
|
|
|
|
.k-panel-menu-button:hover:not(.k-activation-button):not(.k-panel-menu-search){
|
|
color: var(--color-green-perso);
|
|
}
|
|
|
|
|
|
.k-header-title{
|
|
font-family: var(--font-title);
|
|
}
|
|
.k-panel[data-template="home"] .k-header-title-text, .k-panel[data-template="expertise"] .k-header-title-text,
|
|
.k-panel[data-template="portfolio"] .k-header-title-text, .k-panel[data-template="jouer"] .k-header-title-text,
|
|
.k-panel[data-template="about"] .k-header-title-text, .k-panel[data-template="blog"] .k-header-title-text{
|
|
text-transform: uppercase;
|
|
}
|
|
.k-header-title .k-icon{
|
|
--icon-size: 28px;
|
|
}
|
|
|
|
.k-text a{
|
|
color: var(--color-green-perso);
|
|
}
|
|
|
|
.k-block-container:not(:last-of-type) {
|
|
border-bottom: 1px dashed var(--color-gray-600);
|
|
}
|
|
|
|
/*modif card pour ressembler au site web*/
|
|
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"]{
|
|
display: grid;
|
|
grid-template-columns: 2fr auto 1fr;
|
|
grid-template-rows: auto;
|
|
}
|
|
|
|
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-image{
|
|
grid-column: 3/4;
|
|
grid-row: 1/3;
|
|
}
|
|
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-content{
|
|
grid-column: 1/2;
|
|
grid-row: 1/2;
|
|
}
|
|
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-options{
|
|
grid-column: 2/3;
|
|
grid-row: 1/2;
|
|
align-items: start;
|
|
}
|
|
|
|
/* Logo sur la page de login */
|
|
.k-login-view .k-login-form::before {
|
|
content: '';
|
|
display: block;
|
|
width: 150px;
|
|
height: 150px;
|
|
margin: 0 auto 2rem auto;
|
|
background-image: url('logo-panel.png');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
} |