Commit 8d54e1fc authored by Alexandre Delanoë's avatar Alexandre Delanoë

Merge remote-tracking branch 'origin/dev-509-improve-global-theme' into dev

parents c9007420 8f4c57e2
This diff is collapsed.
...@@ -6081,6 +6081,27 @@ h3 { ...@@ -6081,6 +6081,27 @@ h3 {
background-color: white; background-color: white;
} }
.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before {
color: #005a9a;
}
.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before {
color: inherit;
}
.main-topbar .nav-item > a .fa,
.popup-container .card-footer .btn-primary {
color: #f8f9fa !important;
}
.main-topbar .nav-item > a .fa:before,
.popup-container .card-footer .btn-primary:before {
color: #f8f9fa !important;
}
.table .thead-dark th {
background-color: #005a9a;
border-color: #003c67;
}
.b-fieldset { .b-fieldset {
position: relative; position: relative;
border: 1px solid rgba(0, 0, 0, 0.125); border: 1px solid rgba(0, 0, 0, 0.125);
...@@ -6429,6 +6450,10 @@ body { ...@@ -6429,6 +6450,10 @@ body {
background-color: #fff; background-color: #fff;
} }
.font-family-theme {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
pre, pre,
code, code,
kbd, kbd,
...@@ -9294,6 +9319,14 @@ input[type=range]:-moz-focusring { ...@@ -9294,6 +9319,14 @@ input[type=range]:-moz-focusring {
margin-right: 8px; margin-right: 8px;
} }
.dropdown .dropdown-item {
padding-left: 1rem;
}
.dropdown .dropdown-item a span {
min-width: 24px;
text-align: center;
}
.graph-layout { .graph-layout {
position: relative; position: relative;
z-index: 0; z-index: 0;
......
...@@ -5836,6 +5836,27 @@ h3 { ...@@ -5836,6 +5836,27 @@ h3 {
background-color: white; background-color: white;
} }
.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before {
color: #2f3c48;
}
.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before {
color: inherit;
}
.main-topbar .nav-item > a .fa,
.popup-container .card-footer .btn-primary {
color: #eceeec !important;
}
.main-topbar .nav-item > a .fa:before,
.popup-container .card-footer .btn-primary:before {
color: #eceeec !important;
}
.table .thead-dark th {
background-color: #2f3c48;
border-color: #1b2229;
}
.b-fieldset { .b-fieldset {
position: relative; position: relative;
border: 1px solid rgba(0, 0, 0, 0.125); border: 1px solid rgba(0, 0, 0, 0.125);
...@@ -6185,6 +6206,10 @@ body { ...@@ -6185,6 +6206,10 @@ body {
background-color: #fff; background-color: #fff;
} }
.font-family-theme {
font-family: "Muli";
}
pre, pre,
code, code,
kbd, kbd,
...@@ -9054,6 +9079,14 @@ input[type=range]:-moz-focusring { ...@@ -9054,6 +9079,14 @@ input[type=range]:-moz-focusring {
margin-right: 8px; margin-right: 8px;
} }
.dropdown .dropdown-item {
padding-left: 1rem;
}
.dropdown .dropdown-item a span {
min-width: 24px;
text-align: center;
}
.graph-layout { .graph-layout {
position: relative; position: relative;
z-index: 0; z-index: 0;
......
...@@ -6084,6 +6084,27 @@ h3 { ...@@ -6084,6 +6084,27 @@ h3 {
background-color: white; background-color: white;
} }
.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before {
color: #083358;
}
.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before {
color: inherit;
}
.main-topbar .nav-item > a .fa,
.popup-container .card-footer .btn-primary {
color: #F2F2F0 !important;
}
.main-topbar .nav-item > a .fa:before,
.popup-container .card-footer .btn-primary:before {
color: #F2F2F0 !important;
}
.table .thead-dark th {
background-color: #083358;
border-color: #041829;
}
.b-fieldset { .b-fieldset {
position: relative; position: relative;
border: 1px solid rgba(0, 0, 0, 0.125); border: 1px solid rgba(0, 0, 0, 0.125);
...@@ -6433,6 +6454,10 @@ body { ...@@ -6433,6 +6454,10 @@ body {
background-color: #fff; background-color: #fff;
} }
.font-family-theme {
font-family: "Nunito";
}
pre, pre,
code, code,
kbd, kbd,
...@@ -9302,6 +9327,14 @@ input[type=range]:-moz-focusring { ...@@ -9302,6 +9327,14 @@ input[type=range]:-moz-focusring {
margin-right: 8px; margin-right: 8px;
} }
.dropdown .dropdown-item {
padding-left: 1rem;
}
.dropdown .dropdown-item a span {
min-width: 24px;
text-align: center;
}
.graph-layout { .graph-layout {
position: relative; position: relative;
z-index: 0; z-index: 0;
......
...@@ -6085,6 +6085,27 @@ h3 { ...@@ -6085,6 +6085,27 @@ h3 {
background-color: white; background-color: white;
} }
.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before {
color: #222222;
}
.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before {
color: inherit;
}
.main-topbar .nav-item > a .fa,
.popup-container .card-footer .btn-primary {
color: #eceeec !important;
}
.main-topbar .nav-item > a .fa:before,
.popup-container .card-footer .btn-primary:before {
color: #eceeec !important;
}
.table .thead-dark th {
background-color: #222222;
border-color: #090909;
}
.b-fieldset { .b-fieldset {
position: relative; position: relative;
border: 1px solid rgba(0, 0, 0, 0.125); border: 1px solid rgba(0, 0, 0, 0.125);
...@@ -6434,6 +6455,10 @@ body { ...@@ -6434,6 +6455,10 @@ body {
background-color: #fff; background-color: #fff;
} }
.font-family-theme {
font-family: "Montserrat";
}
pre, pre,
code, code,
kbd, kbd,
...@@ -9303,6 +9328,14 @@ input[type=range]:-moz-focusring { ...@@ -9303,6 +9328,14 @@ input[type=range]:-moz-focusring {
margin-right: 8px; margin-right: 8px;
} }
.dropdown .dropdown-item {
padding-left: 1rem;
}
.dropdown .dropdown-item a span {
min-width: 24px;
text-align: center;
}
.graph-layout { .graph-layout {
position: relative; position: relative;
z-index: 0; z-index: 0;
......
...@@ -319,7 +319,7 @@ searchBarCpt = here.component "searchBar" cpt ...@@ -319,7 +319,7 @@ searchBarCpt = here.component "searchBar" cpt
pure unit pure unit
searchButton query queryText' = searchButton query queryText' =
H.button { className: "btn btn-primary" H.button { className: "btn btn-light"
, on: { click: \_ -> T.write_ queryText' query } , on: { click: \_ -> T.write_ queryText' query }
, type: "submit" } , type: "submit" }
[ H.span {className: "fa fa-search"} [] ] [ H.span {className: "fa fa-search"} [] ]
......
...@@ -30,7 +30,10 @@ actionDocCpt = here.component "actionDoc" cpt where ...@@ -30,7 +30,10 @@ actionDocCpt = here.component "actionDoc" cpt where
infoTitle :: NodeType -> R.Element infoTitle :: NodeType -> R.Element
infoTitle nt = H.div { style: {margin: "10px"}} infoTitle nt = H.div { style: {margin: "10px"}}
[ H.h3 {} [H.text "Documentation about " ] [ H.h3 {} [H.text "Documentation about " ]
, H.h3 {className: GT.fldr nt true} [ H.text $ show nt ] , H.h3 {className: GT.fldr nt true}
[ H.span {className: "font-family-theme mx-1"}
[ H.text $ show nt ]
]
] ]
-- | TODO add documentation of all NodeType -- | TODO add documentation of all NodeType
......
...@@ -257,13 +257,14 @@ submitButton action dispatch = ...@@ -257,13 +257,14 @@ submitButton action dispatch =
, title: show action , title: show action
, on: {click: \_ -> launchAff $ dispatch action} , on: {click: \_ -> launchAff $ dispatch action}
} }
[ H.text $ " " <> text action] [ H.span {className: "font-family-theme mx-1"} [ H.text $ " " <> text action] ]
type Href = String type Href = String
submitButtonHref :: Action -> Href -> R.Element submitButtonHref :: Action -> Href -> R.Element
submitButtonHref action href = submitButtonHref action href =
H.a { className, href, target: "_blank" } [ H.text $ " " <> text action ] H.a { className, href, target: "_blank" }
[ H.span {className: "font-family-theme mx-1"} [ H.text $ " " <> text action ] ]
where where
className = "btn btn-primary fa fa-" <> icon action className = "btn btn-primary fa fa-" <> icon action
......
...@@ -101,3 +101,12 @@ ...@@ -101,3 +101,12 @@
.fa .fa
margin-right: space-x(1) margin-right: space-x(1)
.dropdown
.dropdown-item
padding-left: 1rem
a
span
min-width: 24px
text-align: center
...@@ -15,6 +15,10 @@ body { ...@@ -15,6 +15,10 @@ body {
background-color: $body-bg; background-color: $body-bg;
} }
.font-family-theme {
font-family: $font-family-base;
}
/// from "_reboot.scss" /// from "_reboot.scss"
pre, pre,
code, code,
......
...@@ -88,7 +88,6 @@ ...@@ -88,7 +88,6 @@
/// Button /// Button
///----------------------------------------------------------------------------- ///-----------------------------------------------------------------------------
.b-button { .b-button {
$spinner-size: 20px; $spinner-size: 20px;
$self: &; $self: &;
...@@ -237,6 +236,38 @@ ...@@ -237,6 +236,38 @@
} }
} }
/// Simple icons (in Forest action buttons or not clickable or in modal, etc.)
/// ----------------------------------------------------------------------------
.b-icon, .fa {
&:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times) {
&:before {
color: $primary;
}
&:hover:before {
color: inherit;
}
}
}
.main-topbar .nav-item > a .fa,
.popup-container .card-footer .btn-primary {
color: $light !important;
&:before {
color: $light !important;
}
}
/// Table headings with bg color
/// ----------------------------------------------------------------------------
.table .thead-dark th {
background-color: $primary;
border-color: darken($primary, 10%);
}
/// Fieldset /// Fieldset
///----------------------------------------------------------------------------- ///-----------------------------------------------------------------------------
......
...@@ -10,18 +10,165 @@ ...@@ -10,18 +10,165 @@
@import "./abstract"; @import "./abstract";
// Fonts // Fonts
@import url(https://fonts.googleapis.com/css?family=Comfortaa:200,300,400,700); // @import url(https://fonts.googleapis.com/css?family=Comfortaa:200,300,400,700);
/* cyrillic-ext */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QIFqPfE.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4SYFqPfE.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4ToFqPfE.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QoFqPfE.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4Q4FqPfE.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4TYFq.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 400;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QIFqPfE.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 400;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4SYFqPfE.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 400;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4ToFqPfE.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 400;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QoFqPfE.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 400;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4Q4FqPfE.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 400;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4TYFq.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QIFqPfE.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4SYFqPfE.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4ToFqPfE.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QoFqPfE.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4Q4FqPfE.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4TYFq.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
$headings-font-family: "Comfortaa"; $headings-font-family: "Comfortaa";
// Colors // Colors
$primary :#FF550B; $primary :#33A2FF;
$secondary :#303030; $secondary :#52B0FF;
$success :#015668; $success :#015668;
$danger :#FF304F; $danger :#FF304F;
$info :#0F81C7; $info :#0F81C7;
$warning :#0DE2EA; $warning :#0DE2EA;
$light :#e8e8e8; $light :#D1CDC7;
$dark :#000000; $dark :#2C2F31;
$light-secondary: #B5AFA6;
$dark-secondary: #383D3F;
$gray-50 : #121212; // (+) $gray-50 : #121212; // (+)
$gray-100: #212529; $gray-100: #212529;
...@@ -85,7 +232,7 @@ $annotation-field-base-alpha: 15%; ...@@ -85,7 +232,7 @@ $annotation-field-base-alpha: 15%;
// (overriding bootstrap "_variable.scss") // (overriding bootstrap "_variable.scss")
$enable-shadows:true; $enable-shadows:true;
$body-bg:$black; $body-bg:#181A1B;
$body-color:#cccccc; $body-color:#cccccc;
$link-color:#f0f0f0; $link-color:#f0f0f0;
$font-size-base:1.1rem; $font-size-base:1.1rem;
...@@ -158,22 +305,73 @@ $input-disabled-bg: $gray-100; ...@@ -158,22 +305,73 @@ $input-disabled-bg: $gray-100;
@import './_base'; @import './_base';
.dropdown-menu {
a {
color: $light;
}
background-color: $body-bg;
.dropdown-item:hover, .dropdown-item:focus {
background-color: $dark-secondary;
}
.dropdown-divider {
border-top: 1px solid $dark-secondary;
}
}
.forest-layout {
border-right: 2px solid $dark-secondary !important;
}
.forest-layout__action {
.btn-light {
color: $light;
background-color: $dark;
border-color: $dark-secondary;
}
}
.navbar-dark.bg-primary {background-color:#111111 !important;} .navbar-dark.bg-primary {
.table.able {color:#ccccc5} background-color:#111111 !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { .table {
background-color: $gray-300; &.able {
color: $gray-700 color:#ccccc5;
}
th, td {
border-top: 1px solid $dark-secondary;
}
thead th {
border-bottom: 2px solid $dark-secondary;
}
}
.nav-tabs {
border-bottom: 1px solid $dark-secondary;
& .nav-link.active,
& .nav-item.show .nav-link {
background-color: $dark;
color: $light-secondary;
border-color: $dark-secondary;
}
} }
.nav.nav-tabs li a.nav-link.active:hover { .nav.nav-tabs li a.nav-link.active:hover {
color: $gray-900; color: $dark;
} }
.form-control, .form-control,
.form-control:focus{ .form-control:focus{
background-color: $gray-300; background-color: $body-bg;
color: $gray-700; color: $gray-700;
border-color: $dark-secondary;
}
.card-header,
.card-footer {
background-color: $dark;
} }
.card-header { .mainleaf {
background-color: $gray-400; &__version-badge {
background-color: $dark;
border: 1px solid $dark-secondary;
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment