//...General variables for all presets...

/*------------------------------------
   ?CONTENIDO
------------------------------------*/


/**
   * CONTENIDO...........Lo estás leyendo!!
   * INSTALACIÓN DE FUENTES...........Se instalan las fuentes.
   * CONFIG...........Se definen las variables para la configuración.
   * VARIABLES Moodle...........Se redefinen las variables de Moodle.
   * AJUSTES GENERALES...........Variables de los estilos generales.
   * FRONTPAGE...........Configuración de este template.
   * COURSE...........Configuración de este template.
   * COLUMNS...........Configuración de este template.
   * COMPONENTES...........Configuración de los componentes.
   * AJUSTES GENERALES...........Se configuran los ajustes generales.
**/


/*------------------------------------
   ?INSTALACIÓN DE FUENTES
------------------------------------*/

@font-face {
    font-family: 'Uniform';
    src: url('[[font:theme|Uniform-Regular.woff2]]') format('woff2'), url('[[font:theme|Uniform-Regular.woff]]') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Uniform Medium';
    src: url('[[font:theme|Uniform-Medium.woff2]]') format('woff2'), url('[[font:theme|Uniform-Medium.woff]]') format('woff');
    font-weight: 500;
    font-style: normal;
}


/*------------------------------------
   ?CONFIG
------------------------------------*/

//...Breakpoints...
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1600px;
//...Colores...
$marca-color1: #25294F;
$marca-color2: #EDCA86;
$marca-color3: $marca-color1;
//...Base...
$size-base: 20px;
$font-family-base: "Uniform",
sans-serif;
$font-weight-base: normal;
//...Título...
$font-family-title: "Uniform Medium",
sans-serif;
$font-weight-title: 500;

/*------------------------------------
   ?VARIABLES Moodle
------------------------------------*/

//...Bootstrap variables...
$white: #fff;
$gray-100: hsl(0,
0%,
94%);
$gray-200: hsl(0,
0%,
84%);
$gray-300: hsl(0,
0%,
70%);
$gray-400: hsl(0,
0%,
60%);
$gray-500: hsl(0,
0%,
50%);
$gray-600: hsl(0,
0%,
40%);
$gray-700: hsl(0,
0%,
30%);
$gray-800: hsl(0,
0%,
20%);
$gray-900: hsl(0,
0%,
15%);
$black: hsl(0,
0%,
10%);
$blue: hsl(217,
89%,
24%);
$indigo: #6610f2;
$purple: #613d7c;
$pink: #e83e8c;
$red: #d9534f;
$orange: #f0ad4e;
$yellow: #ff7518;
$green: #5cb85c;
$teal: #20c997;
$cyan: #5bc0de;
$primary: $marca-color1;
$secondary: $marca-color2;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-800;
//backdrop
$brand-color4: #77777A;
$grayBackgroud: #f5f5f5;
//...Options...
$enable-rounded: true;
//...Body...
$body-color: $gray-700;
//...Fonts...
$font-size-base: 0.9375rem;
$headings-font-weight: normal;
//...Input...
$custom-select-focus-border-color: $primary;
$custom-select-focus-box-shadow: none;
//...Breadcrumbs...
$breadcrumb-padding-y: .25rem;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding: .5rem;
$breadcrumb-margin-bottom: 0;
$breadcrumb-bg: transparent;
$breadcrumb-divider: "/";
$breadcrumb-divider-rtl: "/";
//...Alerts...
$alert-border-width: 0;
$card-group-margin: .25rem;
//...stylelint-disable...
$theme-colors: ();
$theme-colors: map-merge((primary: $primary,
secondary: $secondary,
success: $success,
info: $info,
warning: $orange,
danger: $danger,
light: $gray-100,
dark: $gray-800),
$theme-colors);
//...stylelint-enable...
//...Headings...
$headings-color: $marca-color1;
$headings-font-family: $font-family-title;
$headings-font-weight: $font-weight-title;
//...Border radius...
$border-radius: .3rem;

/*------------------------------------
   ?AJUSTES GENERALES
------------------------------------*/

$h1-fontSize: 2rem;

/*------------------------------------
   ?FRONTPAGE
------------------------------------*/

//...Rejilla de cursos...
$courses-grid-columns: 1fr;
$courses-grid-columns--lg: repeat(2,
1fr);
$courses-grid-columns--xxl: repeat(3,
1fr);
$courses-grid-gap: 1rem;
//...Tarjeta de curso...
$courseCard-padding: .5rem;
$courseCard-border: 3px solid $marca-color1;
$courseCard-borderRadius: .5rem;
$courseCard-bgColor: $white;
//Define el alto de la imagen de la tarjeta del curso
$courseCard-title-fontSize: 1.1rem;
$courseCard-image-paddingBottom: 50%;
$courseCard-title-color: $white;
$courseCard-title-bgColor: $marca-color1;
//...Barra de progreso tarjeta...
$courseCard-progressBar-height: 24px;
$courseCard-progressBar-padding: 5px;
$courseCard-progressBar-bgColor: $gray-100;
$courseCard-progressBar-colorBar: $marca-color2;
$courseCard-progressBar-colorBar--completo: $marca-color3;
//...Bloque de bienvenida...
$userWelcomeBlock-bgColor: $marca-color1;
$userWelcomeBlock-bgImage: url([[pix:theme|frontpage/uwb-background]]);
$userWelcomeBlock-bgSize: auto;
$userWelcomeBlock-bgPosition: center;
$userWelcomeBlock-bgRepeat: repeat;
$userWelcomeBlock-greetingText-color: white;
$userWelcomeBlock-greetingName-color: white;
$userWelcomeBlock-body-border-top: 1px solid $marca-color3;
$userWelcomeBlock-body-border-bottom: 1px solid $marca-color3;

/*------------------------------------
   ?COURSE
------------------------------------*/

//...Header (título del curso)...
$course-cardTitle-borderRadius: 0;
$course-cardTitle-border: 0;
$course-cardTitle-borderBottom: 3px solid $marca-color2; //Si el border-bottom debe ser igual a los otros bordes se le pone como valor la variable $course-cardTitle-border
$course-cardTitle-padding: .3rem 0 0;
//...Botones de administración header...
$singlebutton-bgColor: $gray-100;
//...Contenido curso...
$course-regionMain-border: none;
$course-regionMain-padding: 0;
//...Módulos de actividad...
$course-activity-marginBottom: .5rem;
$course-activity-borderBottom: none;
$course-activity-paddingTop: .3rem;
$course-activity-paddingBottom: .3rem;
//...Navegación módulos...
$mod-nav-button-font-size: 1rem;
$mod-nav-button-color: hsl(0,
0%,
90%);
$mod-nav-button-border: 0;
$mod-nav-button-border-radius: 0;
$mod-nav-button-margin: 3px 0 5px;
$mod-nav-button-padding: .4em 1em .5em;
$mod-nav-button-transition: color .15s ease-in-out,
background-color .15s ease-in-out,
border-color .15s ease-in-out,
box-shadow .15s ease-in-out,
transform .15s ease-in-out;
$mod-nav-button-hover-color: $marca-color2;
$mod-nav-button-hover-box-shadow: none;
$mod-nav-button-hover-transform: none;
$mod-nav-button-active-box-shadow: none;
$mod-nav-button-active-transform: scale(1);
$active-mod-nav-button-color: $marca-color2;
$active-mod-nav-button-font-weight: $font-weight-title;
$active-mod-nav-button-background-color: transparent;
$active-mod-nav-button-border: 0;
$active-mod-nav-button-hover-color: $marca-color2;
$active-mod-nav-button-hover-background-color: transparent;
$active-mod-nav-button-hover-border: 0;
$active-mod-nav-button-active-box-shadow: none;
$active-mod-nav-button-active-transform: scale(1);

/*------------------------------------
   ?COLUMNS
------------------------------------*/

//...Foro...
$forum-card-bgColor: $gray-200;
$forum-card-border: 0;
$forum-card-borderRadius: $border-radius;
$forum-card-header-borderBotom: 1px solid $gray-500;

/*------------------------------------
   ?CUESTIONARIO
------------------------------------*/

$questionnaire-form-padding: .5rem;
$questionnaire-form-bgColor: $gray-100;
$questionnaire-form-question-bgColor: $white;
$questionnaire-form-question-padding: 0.5rem;
$questionnaire-form-question-borderRadius: $border-radius;
$questionnaire-form-reply-padding: 0 .8rem .8rem;
//...Navegación por el cuestionario...
$questionnaire-nav-color: $marca-color1;
$questionnaire-nav-fontSize: 20px;
$questionnaire-nav-fontWeight: $font-weight-title;
$questionnaire-nav-border: 1px solid $marca-color1;
$questionnaire-nav-borderRadius: 50%;
$questionnaire-nav-thispageholder-border-width: 3px;
$questionnaire-nav-thispageholder-border-color: $marca-color2;
$questionnaire-nav-complete-bgColor: lighten($marca-color3,
10%);
$questionnaire-nav-flagged-boxShadow: inset 0 0 0 3px $red;
//...Info...
$questionnaire-info-bgColor: transparent;
$questionnaire-info-border: none;
$questionnaire-info-borderRadius: $border-radius;

/*------------------------------------
   ?COMPONENTES
------------------------------------*/

//...Títulos...
$title-container-borderBottom: 3px solid $marca-color2;
$title-container-paddingBottom: 0.3rem;
$title-secondary-bg: none;
$title-secondary-padding: 0.5rem 0.5rem 0.6rem 0;
$title-secondary-fontSize: 1.8rem;
$title-secondary-color: $marca-color2;
$title-secondary-margin-bottom: 0;
$title-secondary-curso-margin-bottom: 0;
//...Botones...
$btn-shadow--hover: 0 4px 4px -3px rgba(0,
0,
0,
0.15),
0 8px 6px 1px rgba(0,
0,
0,
0.08),
0 3px 10px 2px rgba(0,
0,
0,
.10);
$btn-transform--hover: scale(1.02);
$btn-shadow--active: 0 0 3px rgba(0,
0,
0,
0.10);
$btn-transform--active: scale(1);
$btn-link-borderColor: transparent;
$btn-link-bgColor: transparent;
$btn-link-shadow: none;
$btn-primary-border: 1px solid transparent;
$btn-primary-border--hover: 1px solid transparent;
$btn-primary-weight: $font-weight-title;
$btn-primary-color: $white;
$btn-primary-bgColor: $marca-color1;
$btn-primary-bgColor--hover: darken($btn-primary-bgColor,
10%);
$btn-secondary-border: 1px solid transparent;
$btn-secondary-border--hover: 1px solid transparent;
$btn-secondary-weight: $font-weight-title;
$btn-secondary-color: $marca-color1;
$btn-secondary-bgColor: $marca-color2;
$btn-secondary-bgColor--hover: darken($btn-secondary-bgColor,
10%);
//...Imágenes de usuario...
$userImages-border: 3px solid $marca-color2;
$userImages-borderRadius: 50%;
$userImages-padding: 0;
$userImages-boxSizing: content-box;
//...Login...
$login-bgImg: url([[pix:theme|login/login-background-overlay]]),
url([[pix:theme|login/login-background]]);
$loginContainer-max-width: 1140px;
$loginForm-maxWidth: 420px;
$loginForm-radius: .5rem;
$loginForm-border: 3px solid $marca-color2;
$loginForm-padding: 0;
$loginForm-image: $white;
$loginForm-paddingBottom: 5rem;
$loginForm-boxShadow: 0 0 5px hsla(0,
0%,
0%,
.1);
$loginForm-card-border: none;
$loginBanner-padding: 1rem 0 .5rem;
$loginBanner-max-width: 340px;
$loginBanner-marginBottom: 0;
$loginFooter-position: absolute;
$loginFooter-bottom: 0;
$loginFooter-left: 0;
$loginFooter-padding: 1rem 1.6rem;
$loginFooter-textAlign: right;
$loginFooter-color: $white;
$loginFooter-fontWeight: normal;
$loginFooter-fontSize: 1rem;
//...Navbar...
$navbar-dark-hover-color: rgba($white,
1);
$navbar-light-hover-color: rgba($black,
.9);
$navbar-height: initial;
$navbar-bgColor: $marca-color1;
$navbar-bgImg1: none;
$navbar-bgSize1: auto;
$navbar-bgPosition1: center;
$navbar-bgImg2: none;
$navbar-bgSize2: auto;
$navbar-bgPosition2: center;
$navbar-bgRepeat: repeat;
$navbar-border: none;
$navbar-borderGradient: none;
$navbar-boxShadow: 0 5px 12px hsla(0,
0%,
0%,
.4);
$navbar-navlink-color: $marca-color2;
$navbar-usertext-color: $white;
$navbar-usertextCarret-size: .4em;
$navbar-usertextCarret-color: $marca-color2;
$navbar-userpicture-border: 3px solid $marca-color2;
$navbar-userpicture-padding: 0;
$navbar-logo: 260px;
//...Header...
$breadcrumb-fontSize: 0.9rem;
$header-userPicture-tamano: 70px;
//...Botones fijos...
$fixedButtons-bgColor: $marca-color1;
$fixedButtons-radius: $border-radius $border-radius 0 0;
//Ubicación de los botones fijos
$fixedButtons-right: 10px;
$fixedButtons-bottom: 0;
$fixedButtons-btn-caret: 10px solid $marca-color1;
$fixedButtons-icon-color: $marca-color2;
$fixedButtons-icon-bgColor: $fixedButtons-bgColor;
$fixedButtons-icon-tamano: 20px;
$fixedButtons-count-bgColor: $red;
//...Notificaciones (ventana fija)...
$notifications-bottom: 60px;
$notifications-border: 3px solid $marca-color1;
$notifications-borderRadius: $border-radius;
//...Mensajes (ventana fija)...
$messages-height: calc(100% - 80px);
$messages-bottom: $notifications-bottom;
$messages-border: $notifications-border;
$messages-borderRadius: $border-radius;
//...Blocks (Columna de bloques que normalmente está al lado derecho)...
$block-width--md: 36%;
$block-width--lg: 28%;
$block-width--xl: 24%;
$block-fontSize: 18px;
$block-bgColor: $gray-100;
$block-border: 0;
$block-fontSizeTitle: 1.1em;
$block-colorTitle: $marca-color1;
$block-bgColorTitle: transparent;
$block-paddingTitle: 10px;
$block-borderTitle: none;
$block-paddingContent: .8rem;
$block-Depth1TreeItem-color: $marca-color3;
//...Region main...
$regionMain-padding: 0;
$regionMain-padding--md: 0 1.25rem;
$regionMain-border: 0;
//...Footer...
$footer-bgColor: $marca-color1;
$footer-padding: 1.5rem;
$footer-color: $white;
//...Embed...
$embed-bgColor: $marca_color3;
$embed-border: 10px solid $marca_color3;
$embed-border-radius: $border-radius;

/*------------------------------------
   ?AJUSTES GENERALES
------------------------------------*/

:root {
    font-family: $font-family-base;
    font-size: $size-base;
    font-weight: $font-weight-base;
}

*::-moz-selection,
*::selection {
    background-color: $marca-color3;
    color: $white;
}

:focus,
button:focus {
    outline: none !important;
    outline: -webkit-focus-ring-color auto 0 !important;
}