Skip to content

P
purescript-gargantext
Commit f3298186 authored by Alexandre Delanoë's avatar Alexandre Delanoë
Browse files
Options

[CSS] Themes added: darkster + herbie

parent e690be6b
Show whitespace changes
Inline Side-by-side
Showing with 17755 additions and 2 deletions
dist/styles/bootstrap-dark.css 0 → 100644
View file @ f3298186
body {
background-color: #303030;
color: #fff;
}
a {
color: #007bff;
}
.bg-dark {
background-color: #212121 !important;
}
.text-dark {
color: #fff !important;
}
.text-muted {
color: #9e9e9e !important;
}
.dropdown-menu {
background-color: #343a40;
color: #fff;
}
.dropdown-item {
color: inherit;
}
.dropdown-item:hover, .dropdown-item.active {
color: inherit;
background-color: #4b545c;
}
.breadcrumb {
background-color: #343a40;
}
.breadcrumb-item.active {
color: #fff;
}
.nav-tabs {
border-bottom-color: #454d55;
}
.nav-tabs .nav-link {
color: #fff;
background-color: #343a40;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link.active {
color: inherit;
background-color: #43494E;
border-color: #454d55;
}
.card {
background-color: #424242;
}
.card.bg-light {
color: #383d41;
}
.modal-content {
background-color: #424242;
}
.close {
color: #fff;
}
.close:hover {
color: #fff;
}
.jumbotron {
background-color: #212121;
}
.form-control,
.form-control:active,
.form-control:focus {
border-color: #454d55;
background-color: #343a40;
color: #fff;
/*Change text in autofill textbox */
}
.form-control:-webkit-autofill,
.form-control:active:-webkit-autofill,
.form-control:focus:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px #343a40 inset;
/* Change the color to your own background color */
-webkit-text-fill-color: #fff;
}
.form-control::-webkit-input-placeholder,
.form-control:active::-webkit-input-placeholder,
.form-control:focus::-webkit-input-placeholder {
color: #888;
}
.form-control:-ms-input-placeholder,
.form-control:active:-ms-input-placeholder,
.form-control:focus:-ms-input-placeholder {
color: #888;
}
.form-control::-ms-input-placeholder,
.form-control:active::-ms-input-placeholder,
.form-control:focus::-ms-input-placeholder {
color: #888;
}
.form-control::placeholder,
.form-control:active::placeholder,
.form-control:focus::placeholder {
color: #888;
}
.custom-select {
border-color: #454d55;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23fff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
background-color: #343a40;
color: #fff;
}
.custom-control-label::before {
background-color: #343a40;
}
.input-group-text {
border-color: #454d55;
background-color: #4b545c;
color: #fff;
}
.list-group-item {
background-color: #343a40;
}
.list-group-item-action {
color: inherit;
}
.list-group-item-action:not(.active):hover {
color: inherit;
background-color: #43494E;
}
.list-group-item-action.disabled {
background-color: #343a40;
}
.page-link {
background-color: #343a40;
border-color: #454d55;
}
.page-link:hover {
border-color: #454d55;
background-color: #43494E;
}
.page-item.disabled .page-link {
background-color: #343a40;
border-color: #454d55;
}
.progress {
background-color: #343a40;
}
/*# sourceMappingURL=bootstrap-dark.css.map */
\ No newline at end of file
dist/styles/bootstrap-darkster.css 0 → 100644
View file @ f3298186
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/styles/bootstrap-herbie.css 0 → 100644
View file @ f3298186
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ f3298186
......@@ -7,7 +7,7 @@
"install-ps": "psc-package install",
"compile": "pulp build",
"build": "pulp browserify -t dist/bundle.js",
"css": "sass src/sass/sass.sass:dist/styles/sass.css && sass src/sass/bootstrap/default.sass:dist/styles/bootstrap-default.css && cp node_modules/bootstrap-dark/src/bootstrap-dark.css dist/styles/bootstrap-dark.css && sass src/sass/bootstrap/greyson.scss:dist/styles/bootstrap-greyson.css && sass src/sass/bootstrap/monotony.scss:dist/styles/bootstrap-monotony.css",
"css": "sass src/sass/sass.sass:dist/styles/sass.css && sass src/sass/bootstrap/default.sass:dist/styles/bootstrap-default.css && cp node_modules/bootstrap-dark/src/bootstrap-dark.css dist/styles/bootstrap-dark.css && sass src/sass/bootstrap/greyson.scss:dist/styles/bootstrap-greyson.css && sass src/sass/bootstrap/monotony.scss:dist/styles/bootstrap-monotony.css && sass src/sass/bootstrap/darkster.scss:dist/styles/bootstrap-darkster.css && sass src/sass/bootstrap/herbie.scss:dist/styles/bootstrap-herbie.css",
"docs": "pulp docs -- --format html",
"repl": "pulp repl",
"clean": "rm -Rf output node_modules",
......
src/Gargantext/Components/Themes.purs
View file @ f3298186
......@@ -36,8 +36,16 @@ monotonyTheme :: Theme
monotonyTheme = Theme { name: "monotony"
, location: "styles/bootstrap-monotony.css" }
herbieTheme :: Theme
herbieTheme = Theme { name: "herbie"
, location: "styles/bootstrap-herbie.css" }
darksterTheme :: Theme
darksterTheme = Theme { name: "darkster (bêta)"
, location: "styles/bootstrap-darkster.css" }
allThemes :: Array Theme
allThemes = [ defaultTheme, greysonTheme, monotonyTheme ]
allThemes = [ defaultTheme, greysonTheme, monotonyTheme, herbieTheme, darksterTheme]
switchTheme :: Theme -> Effect Unit
switchTheme (Theme { location }) = do
......
src/sass/bootstrap/darkster.scss 0 → 100644
View file @ f3298186
/*! Themestr.app `Darkster` Bootstrap 4.3.1 theme */
@import url(https://fonts.googleapis.com/css?family=Comfortaa:200,300,400,700);
$headings-font-family:Comfortaa;
$enable-grid-classes:false;
$primary:#FF550B;
$secondary:#303030;
$success:#015668;
$danger:#FF304F;
$info:#0F81C7;
$warning:#0DE2EA;
$light:#e8e8e8;
$dark:#000000;
/*! Import Bootstrap 4 variables */
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
$enable-shadows:true;
$gray-300:#000000;
$gray-800:#555555;
$body-bg:$black;
$body-color:#cccccc;
$link-color:#f0f0f0;
$link-hover-color:darken($link-color,20%);
$font-size-base:1.1rem;
$table-accent-bg: rgba($white,.05);
$table-hover-bg:rgba($white,.075);
$table-border-color:rgba($white, 0.3);
$table-dark-border-color: $table-border-color;
$table-dark-color:$white;
$input-bg:$gray-300;
$input-disabled-bg: #ccc;
$dropdown-bg:$gray-800;
$dropdown-divider-bg:rgba($black,.15);
$dropdown-link-color:$body-color;
$dropdown-link-hover-color:$white;
$dropdown-link-hover-bg:$body-bg;
$nav-tabs-border-color:rgba($white, 0.3);
$nav-tabs-link-hover-border-color:$nav-tabs-border-color;
$nav-tabs-link-active-bg:transparent;
$nav-tabs-link-active-border-color:$nav-tabs-border-color;
$navbar-dark-hover-color:$white;
$navbar-light-hover-color:$gray-800;
$navbar-light-active-color:$gray-800;
$pagination-color:$white;
$pagination-bg:transparent;
$pagination-border-color:rgba($black, 0.6);
$pagination-hover-color:$white;
$pagination-hover-bg:transparent;
$pagination-hover-border-color:rgba($black, 0.6);
$pagination-active-bg:transparent;
$pagination-active-border-color:rgba($black, 0.6);
$pagination-disabled-bg:transparent;
$pagination-disabled-border-color:rgba($black, 0.6);
$jumbotron-bg:darken($gray-900, 5%);
$card-border-color:rgba($black, 0.6);
$card-cap-bg:lighten($gray-800, 10%);
$card-bg:lighten($body-bg, 5%);
$modal-content-bg:lighten($body-bg,5%);
$modal-header-border-color:rgba(0,0,0,.2);
$progress-bg:darken($gray-900,5%);
$progress-bar-color:$gray-600;
$list-group-bg:lighten($body-bg,5%);
$list-group-border-color:rgba($black,0.6);
$list-group-hover-bg:lighten($body-bg,10%);
$list-group-active-color:$white;
$list-group-active-bg:$list-group-hover-bg;
$list-group-active-border-color:$list-group-border-color;
$list-group-disabled-color:$gray-800;
$list-group-disabled-bg:$black;
$list-group-action-color:$white;
$breadcrumb-active-color:$gray-500;
@import "../../../node_modules/bootstrap/scss/bootstrap";
// Add SASS theme customizations here..
.navbar-dark.bg-primary {background-color:#111111 !important;}
src/sass/bootstrap/herbie.scss 0 → 100644
View file @ f3298186
/*! Themestr.app `Herbie` Bootstrap 4.3.1 theme */
@import url(https://fonts.googleapis.com/css?family=Nunito:200,300,400,700);
$font-family-base:Nunito;
@import url(https://fonts.googleapis.com/css?family=Crete+Round:200,300,400,700);
$headings-font-family:Crete Round;
$enable-grid-classes:false;
$primary:#083358;
$secondary:#F67280;
$success:#0074E4;
$danger:#FF4057;
$info:#74DBEF;
$warning:#FC3C3C;
$light:#F2F2F0;
$dark:#072247;
@import "../../../node_modules/bootstrap/scss/bootstrap";
// Add SASS theme customizations here..
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