sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-12-24 18:34:18 +00:00
Code Issues Projects Releases Wiki Activity

style and compatibility update

Browse Source
This commit is contained in:
Patrick Jentsch 2024-05-21 10:29:12 +02:00
parent c68286e010
commit cbd0a41bce
91 changed files with 6718 additions and 538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/auth/routes.py
View File

@ -18,14 +18,18 @@ def before_request():
Checks if a user is unconfirmed when visiting specific sites. Redirects to
unconfirmed view if user is unconfirmed.
"""
if current_user.is_authenticated:
current_user.ping()
db.session.commit()
if (not current_user.confirmed
and request.endpoint
and request.blueprint != 'auth'
and request.endpoint != 'static'):
return redirect(url_for('auth.unconfirmed'))
if not current_user.is_authenticated:
return
current_user.ping()
db.session.commit()
if (not current_user.confirmed
and request.endpoint
and request.blueprint != 'auth'
and request.endpoint != 'static'):
return redirect(url_for('auth.unconfirmed'))
if not current_user.terms_of_use_accepted:
return redirect(url_for('main.terms_of_use'))
@bp.route('/register', methods=['GET', 'POST'])

8
app/main/routes.py
View File

@ -40,6 +40,14 @@ def dashboard():
)
@bp.route('/manual')
def manual():
return render_template(
'main/manual.html.j2',
title='Manual'
)
@bp.route('/news')
def news():
return render_template(

290
app/static/css/colors.scss
View File

@ -1,290 +0,0 @@
/// Map deep get
/// @author Kitty Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Key chain
/// @return {*} - Desired value
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
$color: (
"baseline": (
"primary": #00426f,
"primary-variant": #1a5c89,
"secondary": #00426f,
"secondary-variant": #1a5c89,
"background": #ffffff,
"surface": #ffffff,
"error": #b00020
),
"social-area": (
"base": #d6ae86,
"darken": #C98536,
"lighten": #EAE2DB
),
"service": (
"corpus-analysis": (
"base": #aa9cc9,
"darken": #6b3f89,
"lighten": #ebe8f6
),
"file-setup-pipeline": (
"base": #d5dc95,
"darken": #a1b300,
"lighten": #f2f3e1
),
"spacy-nlp-pipeline": (
"base": #98acd2,
"darken": #0064a3,
"lighten": #e5e8f5
),
"tesseract-ocr-pipeline": (
"base": #a9d8c8,
"darken": #00a58b,
"lighten": #e7f4f1
),
"transkribus-htr-pipeline": (
"base": #607d8b,
"darken": #37474f,
"lighten": #cfd8dc
)
),
"status": (
"corpus": (
"UNPREPARED": #9e9e9e,
"QUEUED": #2196f3,
"BUILDING": #ffc107,
"BUILT": #4caf50,
"FAILED": #f44336,
"STARTING_ANALYSIS_SESSION": #2196f3,
"RUNNING_ANALYSIS_SESSION": #4caf50,
"CANCELING_ANALYSIS_SESSION": #ff5722
),
"job": (
"INITIALIZING": #9e9e9e,
"SUBMITTED": #9e9e9e,
"QUEUED": #2196f3,
"RUNNING": #ffc107,
"CANCELING": #ff5722,
"CANCELED": #ff5722,
"COMPLETED": #4caf50,
"FAILED": #f44336
)
),
"s-attr": (
"PERSON": #a6e22d,
"PER": #a6e22d,
"NORP": #ef60b4,
"FACILITY": #43c6fc,
"ORG": #43c6fc,
"GPE": #fd9720,
"LOC": #fd9720,
"PRODUCT": #a99dfb,
"MISC": #a99dfb,
"EVENT": #fc0,
"WORK_OF_ART": #fc0,
"LANGUAGE": #fc0,
"DATE": #2fbbab,
"TIME": #2fbbab,
"PERCENT": #bbb,
"MONEY": #bbb,
"QUANTITY": #bbb,
"ORDINAL": #bbb,
"CARDINAL": #bbb
)
);
@each $key, $color-code in map-get($color, "baseline") {
.#{$key}-color {
background-color: $color-code !important;
}
.#{$key}-color-border {
border-color: $color-code !important;
}
.#{$key}-color-text {
color: $color-code !important;
}
}
@each $key, $color-code in map-get($color, "social-area") {
.social-area-color-#{$key} {
background-color: $color-code !important;
}
.social-area-color-border-#{$key} {
border-color: $color-code !important;
}
}
@each $service-name, $color-palette in map-get($color, "service") {
.service-color[data-service="#{$service-name}"] {
background-color: map-get($color-palette, "base") !important;
&.darken {
background-color: map-get($color-palette, "darken") !important;
}
&.lighten {
background-color: map-get($color-palette, "lighten") !important;
}
}
.service-color-border[data-service="#{$service-name}"] {
border-color: map-get($color-palette, "base") !important;
&.border-darken {
border-color: map-get($color-palette, "darken") !important;
}
&.border-lighten {
border-color: map-get($color-palette, "lighten") !important;
}
}
.service-color-text[data-service="#{$service-name}"] {
color: map-get($color-palette, "base") !important;
&.text-darken {
color: map-get($color-palette, "darken") !important;
}
&.text-lighten {
color: map-get($color-palette, "lighten") !important;
}
}
.service-scheme[data-service="#{$service-name}"] {
background-color: map-get($color-palette, "lighten");
.btn, .btn-small, .btn-large, .btn-floating {
background-color: map-get($color-palette, "darken");
&:hover {
background-color: map-get($color-palette, "base");
}
}
.pagination {
li.active {
background-color: map-get($color-palette, "darken");
}
}
.table-of-contents {
a.active, a:hover {
border-color: map-get($color-palette, "darken");
}
}
.tabs {
.tab {
&.disabled {
a {
color: inherit;
&:hover {
color: change-color(map-get($color-palette, "darken"), $alpha: 0.15);
}
}
}
a {
color: inherit;
&:focus, &:hover, &.active {
color: map-get($color-palette, "darken");
}
&:focus, &.active, &.active:focus {
background-color: change-color(map-get($color-palette, "darken"), $alpha: 0.15);
}
}
}
.indicator {
background-color: map-get($color-palette, "darken");
}
}
}
}
@each $ressource-name, $color-palette in map-get($color, "status") {
@each $key, $color-code in $color-palette {
.#{$ressource-name}-status-color[data-status="#{$key}"] {
background-color: $color-code !important;
}
.#{$ressource-name}-status-color-border[data-status="#{$key}"] {
border-color: $color-code !important;
}
.#{$ressource-name}-status-color-text[data-status="#{$key}"] {
color: $color-code !important;
}
}
}
@each $key, $color-code in map-get($color, "s-attr") {
.chip.s-attr[data-s-attr-type="ent"][data-s-attr-ent-type="#{$key}"] {
background-color: $color-code !important;
}
}
main {
.btn, .btn-small, .btn-large, .btn-floating {
background-color: map-deep-get($color, "baseline", "secondary");
&:hover {
background-color: map-deep-get($color, "baseline", "secondary-variant");
}
}
.pagination {
li.active {
background-color: map-deep-get($color, "baseline", "secondary");
}
}
.table-of-contents {
a.active, a:hover {
border-color: map-deep-get($color, "baseline", "secondary");
}
}
.tabs {
.tab {
&.disabled {
a {
color: inherit;
&:hover {
color: change-color(map-deep-get($color, "baseline", "secondary"), $alpha: 0.15);
}
}
}
a {
color: inherit;
&:focus, &:hover, &.active {
color: map-deep-get($color, "baseline", "secondary");
}
&:focus, &.active, &.active:focus {
background-color: change-color(map-deep-get($color, "baseline", "secondary"), $alpha: 0.15);
}
}
}
.indicator {
background-color: map-deep-get($color, "baseline", "secondary");
}
}
}

8
app/static/css/materialize/fixes.css
View File

@ -1,8 +0,0 @@
.parallax-container .parallax {
z-index: 0;
}
.autocomplete-content {
width: 100% !important;
left: 0 !important;
}

70
app/static/css/style.css
View File

@ -1,70 +0,0 @@
.scroll {overflow: auto;}
.clearfix::after {
display: block;
content: "";
clear: both;
}
/* Change placholdertext color of file uplaod fields */
::placeholder {
color: #9e9e9e;
opacity: 1;
}
/*
* changes preoloader size etc. to fit visually better with the chip status
* indicator of jobs
*/
.status-spinner {
margin-bottom: -10px;
width: 30px !important;
height: 30px !important;
}
#manual-modal .manual-chapter-title {
display: none;
}
.show-if-only-child:not(:only-child) {
display: none !important;
}
.btn-scale-x2 {
transform: scale(2);
}
.btn-scale-x2 .nopaque-icons.service-icons {
font-size: 2.5rem;
}
/* Fix material icon vertical alignment when nested in various elements */
h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons, .tab .nopaque-icons, .tab .material-icons {
line-height: inherit;
}
.corpus-status-text, .job-status-text {text-transform: lowercase;}
.corpus-status-text[data-status]:empty::before, .job-status-text[data-status]:empty::before {content: attr(data-status);}
.service-scheme[data-service="file-setup-pipeline"] .nopaque-icons.service-icons[data-service="inherit"]:empty::before {content: "E";}
.service-scheme[data-service="tesseract-ocr-pipeline"] .nopaque-icons.service-icons[data-service="inherit"]:empty::before {content: "F";}
.service-scheme[data-service="transkribus-htr-pipeline"] .nopaque-icons.service-icons[data-service="inherit"]:empty::before {content: "F";}
.service-scheme[data-service="spacy-nlp-pipeline"] .nopaque-icons.service-icons[data-service="inherit"]:empty::before {content: "G";}
.service-scheme[data-service="corpus-analysis"] .nopaque-icons.service-icons[data-service="inherit"]:empty::before {content: "H";}
.nopaque-icons.service-icons[data-service="file-setup-pipeline"]:empty::before {content: "E";}
.nopaque-icons.service-icons[data-service="tesseract-ocr-pipeline"]:empty::before {content: "F";}
.nopaque-icons.service-icons[data-service="transkribus-htr-pipeline"]:empty::before {content: "F";}
.nopaque-icons.service-icons[data-service="spacy-nlp-pipeline"]:empty::before {content: "G";}
.nopaque-icons.service-icons[data-service="corpus-analysis"]:empty::before {content: "H";}
[draggable="true"] {cursor: move !important;}
.clickable {cursor: pointer !important;}
.chip.s-attr .chip.p-attr {background-color: inherit;}
.width-25 {width: 25%;}
.width-50 {width: 50%;}
.width-75 {width: 75%;}
.width-100 {width: 100%;}

55
app/static/external/materialize/sass/components/_badges.scss vendored Normal file
View File

@ -0,0 +1,55 @@
// Badges
span.badge {
min-width: 3rem;
padding: 0 6px;
margin-left: 14px;
text-align: center;
font-size: 1rem;
line-height: $badge-height;
height: $badge-height;
color: color('grey', 'darken-1');
float: right;
box-sizing: border-box;
&.new {
font-weight: 300;
font-size: 0.8rem;
color: #fff;
background-color: $badge-bg-color;
border-radius: 2px;
}
&.new:after {
content: " new";
}
&[data-badge-caption]::after {
content: " " attr(data-badge-caption);
}
}
// Special cases
nav ul a span.badge {
display: inline-block;
float: none;
margin-left: 4px;
line-height: $badge-height;
height: $badge-height;
-webkit-font-smoothing: auto;
}
// Line height centering
.collection-item span.badge {
margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2});
}
.collapsible span.badge {
margin-left: auto;
}
.sidenav span.badge {
margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
}
table span.badge {
display: inline-block;
float: none;
margin-left: auto;
}

322
app/static/external/materialize/sass/components/_buttons.scss vendored Normal file
View File

@ -0,0 +1,322 @@
// shared styles
.btn,
.btn-flat {
border: $button-border;
border-radius: $button-radius;
display: inline-block;
height: $button-height;
line-height: $button-height;
padding: $button-padding;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent; // Gets rid of tap active state
}
// Disabled shared style
.btn.disabled,
.btn-floating.disabled,
.btn-large.disabled,
.btn-small.disabled,
.btn-flat.disabled,
.btn:disabled,
.btn-floating:disabled,
.btn-large:disabled,
.btn-small:disabled,
.btn-flat:disabled,
.btn[disabled],
.btn-floating[disabled],
.btn-large[disabled],
.btn-small[disabled],
.btn-flat[disabled] {
pointer-events: none;
background-color: $button-disabled-background !important;
box-shadow: none;
color: $button-disabled-color !important;
cursor: default;
&:hover {
background-color: $button-disabled-background !important;
color: $button-disabled-color !important;
}
}
// Shared icon styles
.btn,
.btn-floating,
.btn-large,
.btn-small,
.btn-flat {
font-size: $button-font-size;
outline: 0;
i {
font-size: $button-icon-font-size;
line-height: inherit;
}
}
// Shared focus button style
.btn,
.btn-floating {
&:focus {
background-color: darken($button-raised-background, 10%);
}
}
// Raised Button
.btn {
text-decoration: none;
color: $button-raised-color;
background-color: $button-raised-background;
text-align: center;
letter-spacing: .5px;
@extend .z-depth-1;
transition: background-color .2s ease-out;
cursor: pointer;
&:hover {
background-color: $button-raised-background-hover;
@extend .z-depth-1-half;
}
}
// Floating button
.btn-floating {
&:hover {
background-color: $button-floating-background-hover;
@extend .z-depth-1-half;
}
&:before {
border-radius: 0;
}
&.btn-large {
&.halfway-fab {
bottom: -$button-floating-large-size / 2;
}
width: $button-floating-large-size;
height: $button-floating-large-size;
padding: 0;
i {
line-height: $button-floating-large-size;
}
}
&.btn-small {
&.halfway-fab {
bottom: -$button-floating-small-size / 2;
}
width: $button-floating-small-size;
height: $button-floating-small-size;
i {
line-height: $button-floating-small-size;
}
}
&.halfway-fab {
&.left {
right: auto;
left: 24px;
}
position: absolute;
right: 24px;
bottom: -$button-floating-size / 2;
}
display: inline-block;
color: $button-floating-color;
position: relative;
overflow: hidden;
z-index: 1;
width: $button-floating-size;
height: $button-floating-size;
line-height: $button-floating-size;
padding: 0;
background-color: $button-floating-background;
border-radius: $button-floating-radius;
@extend .z-depth-1;
transition: background-color .3s;
cursor: pointer;
vertical-align: middle;
i {
width: inherit;
display: inline-block;
text-align: center;
color: $button-floating-color;
font-size: $button-large-icon-font-size;
line-height: $button-floating-size;
}
}
// button fix
button.btn-floating {
border: $button-border;
}
// Fixed Action Button
.fixed-action-btn {
&.active {
ul {
visibility: visible;
}
}
// Directions
&.direction-left,
&.direction-right {
padding: 0 0 0 15px;
ul {
text-align: right;
right: 64px;
top: 50%;
transform: translateY(-50%);
height: 100%;
left: auto;
/*width 100% only goes to width of button container */
width: 500px;
li {
display: inline-block;
margin: 7.5px 15px 0 0;
}
}
}
&.direction-right {
padding: 0 15px 0 0;
ul {
text-align: left;
direction: rtl;
left: 64px;
right: auto;
li {
margin: 7.5px 0 0 15px;
}
}
}
&.direction-bottom {
padding: 0 0 15px 0;
ul {
top: 64px;
bottom: auto;
display: flex;
flex-direction: column-reverse;
li {
margin: 15px 0 0 0;
}
}
}
&.toolbar {
&.active {
&>a i {
opacity: 0;
}
}
padding: 0;
height: $button-floating-large-size;
ul {
display: flex;
top: 0;
bottom: 0;
z-index: 1;
li {
flex: 1;
display: inline-block;
margin: 0;
height: 100%;
transition: none;
a {
display: block;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
background-color: transparent;
box-shadow: none;
color: #fff;
line-height: $button-floating-large-size;
z-index: 1;
i {
line-height: inherit;
}
}
}
}
}
position: fixed;
right: 23px;
bottom: 23px;
padding-top: 15px;
margin-bottom: 0;
z-index: 997;
ul {
left: 0;
right: 0;
text-align: center;
position: absolute;
bottom: 64px;
margin: 0;
visibility: hidden;
li {
margin-bottom: 15px;
}
a.btn-floating {
opacity: 0;
}
}
.fab-backdrop {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: $button-floating-size;
height: $button-floating-size;
background-color: $button-floating-background;
border-radius: $button-floating-radius;
transform: scale(0);
}
}
// Flat button
.btn-flat {
box-shadow: none;
background-color: transparent;
color: $button-flat-color;
cursor: pointer;
transition: background-color .2s;
&:focus,
&:hover {
box-shadow: none;
}
&:focus {
background-color: rgba(0, 0, 0, .1);
}
&.disabled,
&.btn-flat[disabled] {
background-color: transparent !important;
color: $button-flat-disabled-color !important;
cursor: default;
}
}
// Large button
.btn-large {
@extend .btn;
height: $button-large-height;
line-height: $button-large-height;
font-size: $button-large-font-size;
padding: 0 28px;
i {
font-size: $button-large-icon-font-size;
}
}
// Small button
.btn-small {
@extend .btn;
height: $button-small-height;
line-height: $button-small-height;
font-size: $button-small-font-size;
i {
font-size: $button-small-icon-font-size;
}
}
// Block button
.btn-block {
display: block;
}

195
app/static/external/materialize/sass/components/_cards.scss vendored Normal file
View File

@ -0,0 +1,195 @@
.card-panel {
transition: box-shadow .25s;
padding: $card-padding;
margin: $element-top-margin 0 $element-bottom-margin 0;
border-radius: 2px;
@extend .z-depth-1;
background-color: $card-bg-color;
}
.card {
position: relative;
margin: $element-top-margin 0 $element-bottom-margin 0;
background-color: $card-bg-color;
transition: box-shadow .25s;
border-radius: 2px;
@extend .z-depth-1;
.card-title {
font-size: 24px;
font-weight: 300;
&.activator {
cursor: pointer;
}
}
// Card Sizes
&.small, &.medium, &.large {
position: relative;
.card-image {
max-height: 60%;
overflow: hidden;
}
.card-image + .card-content {
max-height: 40%;
}
.card-content {
max-height: 100%;
overflow: hidden;
}
.card-action {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
}
&.small {
height: 300px;
}
&.medium {
height: 400px;
}
&.large {
height: 500px;
}
// Horizontal Cards
&.horizontal {
&.small, &.medium, &.large {
.card-image {
height: 100%;
max-height: none;
overflow: visible;
img {
height: 100%;
}
}
}
display: flex;
.card-image {
max-width: 50%;
img {
border-radius: 2px 0 0 2px;
max-width: 100%;
width: auto;
}
}
.card-stacked {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
.card-content {
flex-grow: 1;
}
}
}
// Sticky Action Section
&.sticky-action {
.card-action {
z-index: 2;
}
.card-reveal {
z-index: 1;
padding-bottom: 64px;
}
}
.card-image {
position: relative;
// Image background for content
img {
display: block;
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
}
.card-title {
color: $card-bg-color;
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
padding: $card-padding;
}
}
.card-content {
padding: $card-padding;
border-radius: 0 0 2px 2px;
p {
margin: 0;
}
.card-title {
display: block;
line-height: 32px;
margin-bottom: 8px;
i {
line-height: 32px;
}
}
}
.card-action {
&:last-child {
border-radius: 0 0 2px 2px;
}
background-color: inherit; // Use inherit to inherit color classes
border-top: 1px solid rgba(160,160,160,.2);
position: relative;
padding: 16px $card-padding;
a:not(.btn):not(.btn-large):not(.btn-floating) {
color: $card-link-color;
margin-right: $card-padding;
transition: color .3s ease;
text-transform: uppercase;
&:hover { color: $card-link-color-light; }
}
}
.card-reveal {
padding: $card-padding;
position: absolute;
background-color: $card-bg-color;
width: 100%;
overflow-y: auto;
left: 0;
top: 100%;
height: 100%;
z-index: 3;
display: none;
.card-title {
cursor: pointer;
display: block;
}
}
}

90
app/static/external/materialize/sass/components/_carousel.scss vendored Normal file
View File

@ -0,0 +1,90 @@
.carousel {
&.carousel-slider {
top: 0;
left: 0;
.carousel-fixed-item {
&.with-indicators {
bottom: 68px;
}
position: absolute;
left: 0;
right: 0;
bottom: 20px;
z-index: 1;
}
.carousel-item {
width: 100%;
height: 100%;
min-height: $carousel-height;
position: absolute;
top: 0;
left: 0;
h2 {
font-size: 24px;
font-weight: 500;
line-height: 32px;
}
p {
font-size: 15px;
}
}
}
overflow: hidden;
position: relative;
width: 100%;
height: $carousel-height;
perspective: 500px;
transform-style: preserve-3d;
transform-origin: 0% 50%;
.carousel-item {
visibility: hidden;
width: $carousel-item-width;
height: $carousel-item-height;
position: absolute;
top: 0;
left: 0;
& > img {
width: 100%;
}
}
.indicators {
position: absolute;
text-align: center;
left: 0;
right: 0;
bottom: 0;
margin: 0;
.indicator-item {
&.active {
background-color: #fff;
}
display: inline-block;
position: relative;
cursor: pointer;
height: 8px;
width: 8px;
margin: 24px 4px;
background-color: rgba(255,255,255,.5);
transition: background-color .3s;
border-radius: 50%;
}
}
// Materialbox compatibility
&.scrolling .carousel-item .materialboxed,
.carousel-item:not(.active) .materialboxed {
pointer-events: none;
}
}

90
app/static/external/materialize/sass/components/_chips.scss vendored Normal file
View File

@ -0,0 +1,90 @@
.chip {
&:focus {
outline: none;
background-color: $chip-selected-color;
color: #fff;
}
display: inline-block;
height: 32px;
font-size: 13px;
font-weight: 500;
color: rgba(0,0,0,.6);
line-height: 32px;
padding: 0 12px;
border-radius: 16px;
background-color: $chip-bg-color;
margin-bottom: $chip-margin;
margin-right: $chip-margin;
> img {
float: left;
margin: 0 8px 0 -12px;
height: 32px;
width: 32px;
border-radius: 50%;
}
.close {
cursor: pointer;
float: right;
font-size: 16px;
line-height: 32px;
padding-left: 8px;
}
}
.chips {
border: none;
border-bottom: 1px solid $chip-border-color;
box-shadow: none;
margin: $input-margin;
min-height: 45px;
outline: none;
transition: all .3s;
&.focus {
border-bottom: 1px solid $chip-selected-color;
box-shadow: 0 1px 0 0 $chip-selected-color;
}
&:hover {
cursor: text;
}
.input {
background: none;
border: 0;
color: rgba(0,0,0,.6);
display: inline-block;
font-size: $input-font-size;
height: $input-height;
line-height: 32px;
outline: 0;
margin: 0;
padding: 0 !important;
width: 120px !important;
}
.input:focus {
border: 0 !important;
box-shadow: none !important;
}
// Autocomplete
.autocomplete-content {
margin-top: 0;
margin-bottom: 0;
}
}
// Form prefix
.prefix ~ .chips {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem);
}
.chips:empty ~ label {
font-size: 0.8rem;
transform: translateY(-140%);
}

91
app/static/external/materialize/sass/components/_collapsible.scss vendored Normal file
View File

@ -0,0 +1,91 @@
.collapsible {
border-top: 1px solid $collapsible-border-color;
border-right: 1px solid $collapsible-border-color;
border-left: 1px solid $collapsible-border-color;
margin: $element-top-margin 0 $element-bottom-margin 0;
@extend .z-depth-1;
}
.collapsible-header {
&:focus {
outline: 0
}
display: flex;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
line-height: 1.5;
padding: 1rem;
background-color: $collapsible-header-color;
border-bottom: 1px solid $collapsible-border-color;
i {
width: 2rem;
font-size: 1.6rem;
display: inline-block;
text-align: center;
margin-right: 1rem;
}
}
.keyboard-focused .collapsible-header:focus {
background-color: #eee;
}
.collapsible-body {
display: none;
border-bottom: 1px solid $collapsible-border-color;
box-sizing: border-box;
padding: 2rem;
}
// Sidenav collapsible styling
.sidenav,
.sidenav.fixed {
.collapsible {
border: none;
box-shadow: none;
li { padding: 0; }
}
.collapsible-header {
background-color: transparent;
border: none;
line-height: inherit;
height: inherit;
padding: 0 $sidenav-padding;
&:hover { background-color: rgba(0,0,0,.05); }
i { line-height: inherit; }
}
.collapsible-body {
border: 0;
background-color: $collapsible-header-color;
li a {
padding: 0 (7.5px + $sidenav-padding)
0 (15px + $sidenav-padding);
}
}
}
// Popout Collapsible
.collapsible.popout {
border: none;
box-shadow: none;
> li {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
// transform: scaleX(.92);
margin: 0 24px;
transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
> li.active {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
margin: 16px 0;
// transform: scaleX(1);
}
}

32
app/static/external/materialize/sass/components/_color-classes.scss vendored Normal file
View File

@ -0,0 +1,32 @@
// Color Classes
@each $color_name, $color in $colors {
@each $color_type, $color_value in $color {
@if $color_type == "base" {
.#{$color_name} {
background-color: $color_value !important;
}
.#{$color_name}-text {
color: $color_value !important;
}
}
@else if $color_name != "shades" {
.#{$color_name}.#{$color_type} {
background-color: $color_value !important;
}
.#{$color_name}-text.text-#{$color_type} {
color: $color_value !important;
}
}
}
}
// Shade classes
@each $color, $color_value in $shades {
.#{$color} {
background-color: $color_value !important;
}
.#{$color}-text {
color: $color_value !important;
}
}

370
app/static/external/materialize/sass/components/_color-variables.scss vendored Normal file
View File

@ -0,0 +1,370 @@
// Google Color Palette defined: http://www.google.com/design/spec/style/color.html
$materialize-red: (
"base": #e51c23,
"lighten-5": #fdeaeb,
"lighten-4": #f8c1c3,
"lighten-3": #f3989b,
"lighten-2": #ee6e73,
"lighten-1": #ea454b,
"darken-1": #d0181e,
"darken-2": #b9151b,
"darken-3": #a21318,
"darken-4": #8b1014,
);
$red: (
"base": #F44336,
"lighten-5": #FFEBEE,
"lighten-4": #FFCDD2,
"lighten-3": #EF9A9A,
"lighten-2": #E57373,
"lighten-1": #EF5350,
"darken-1": #E53935,
"darken-2": #D32F2F,
"darken-3": #C62828,
"darken-4": #B71C1C,
"accent-1": #FF8A80,
"accent-2": #FF5252,
"accent-3": #FF1744,
"accent-4": #D50000
);
$pink: (
"base": #e91e63,
"lighten-5": #fce4ec,
"lighten-4": #f8bbd0,
"lighten-3": #f48fb1,
"lighten-2": #f06292,
"lighten-1": #ec407a,
"darken-1": #d81b60,
"darken-2": #c2185b,
"darken-3": #ad1457,
"darken-4": #880e4f,
"accent-1": #ff80ab,
"accent-2": #ff4081,
"accent-3": #f50057,
"accent-4": #c51162
);
$purple: (
"base": #9c27b0,
"lighten-5": #f3e5f5,
"lighten-4": #e1bee7,
"lighten-3": #ce93d8,
"lighten-2": #ba68c8,
"lighten-1": #ab47bc,
"darken-1": #8e24aa,
"darken-2": #7b1fa2,
"darken-3": #6a1b9a,
"darken-4": #4a148c,
"accent-1": #ea80fc,
"accent-2": #e040fb,
"accent-3": #d500f9,
"accent-4": #aa00ff
);
$deep-purple: (
"base": #673ab7,
"lighten-5": #ede7f6,
"lighten-4": #d1c4e9,
"lighten-3": #b39ddb,
"lighten-2": #9575cd,
"lighten-1": #7e57c2,
"darken-1": #5e35b1,
"darken-2": #512da8,
"darken-3": #4527a0,
"darken-4": #311b92,
"accent-1": #b388ff,
"accent-2": #7c4dff,
"accent-3": #651fff,
"accent-4": #6200ea
);
$indigo: (
"base": #3f51b5,
"lighten-5": #e8eaf6,
"lighten-4": #c5cae9,
"lighten-3": #9fa8da,
"lighten-2": #7986cb,
"lighten-1": #5c6bc0,
"darken-1": #3949ab,
"darken-2": #303f9f,
"darken-3": #283593,
"darken-4": #1a237e,
"accent-1": #8c9eff,
"accent-2": #536dfe,
"accent-3": #3d5afe,
"accent-4": #304ffe
);
$blue: (
"base": #2196F3,
"lighten-5": #E3F2FD,
"lighten-4": #BBDEFB,
"lighten-3": #90CAF9,
"lighten-2": #64B5F6,
"lighten-1": #42A5F5,
"darken-1": #1E88E5,
"darken-2": #1976D2,
"darken-3": #1565C0,
"darken-4": #0D47A1,
"accent-1": #82B1FF,
"accent-2": #448AFF,
"accent-3": #2979FF,
"accent-4": #2962FF
);
$light-blue: (
"base": #03a9f4,
"lighten-5": #e1f5fe,
"lighten-4": #b3e5fc,
"lighten-3": #81d4fa,
"lighten-2": #4fc3f7,
"lighten-1": #29b6f6,
"darken-1": #039be5,
"darken-2": #0288d1,
"darken-3": #0277bd,
"darken-4": #01579b,
"accent-1": #80d8ff,
"accent-2": #40c4ff,
"accent-3": #00b0ff,
"accent-4": #0091ea
);
$cyan: (
"base": #00bcd4,
"lighten-5": #e0f7fa,
"lighten-4": #b2ebf2,
"lighten-3": #80deea,
"lighten-2": #4dd0e1,
"lighten-1": #26c6da,
"darken-1": #00acc1,
"darken-2": #0097a7,
"darken-3": #00838f,
"darken-4": #006064,
"accent-1": #84ffff,
"accent-2": #18ffff,
"accent-3": #00e5ff,
"accent-4": #00b8d4
);
$teal: (
"base": #009688,
"lighten-5": #e0f2f1,
"lighten-4": #b2dfdb,
"lighten-3": #80cbc4,
"lighten-2": #4db6ac,
"lighten-1": #26a69a,
"darken-1": #00897b,
"darken-2": #00796b,
"darken-3": #00695c,
"darken-4": #004d40,
"accent-1": #a7ffeb,
"accent-2": #64ffda,
"accent-3": #1de9b6,
"accent-4": #00bfa5
);
$green: (
"base": #4CAF50,
"lighten-5": #E8F5E9,
"lighten-4": #C8E6C9,
"lighten-3": #A5D6A7,
"lighten-2": #81C784,
"lighten-1": #66BB6A,
"darken-1": #43A047,
"darken-2": #388E3C,
"darken-3": #2E7D32,
"darken-4": #1B5E20,
"accent-1": #B9F6CA,
"accent-2": #69F0AE,
"accent-3": #00E676,
"accent-4": #00C853
);
$light-green: (
"base": #8bc34a,
"lighten-5": #f1f8e9,
"lighten-4": #dcedc8,
"lighten-3": #c5e1a5,
"lighten-2": #aed581,
"lighten-1": #9ccc65,
"darken-1": #7cb342,
"darken-2": #689f38,
"darken-3": #558b2f,
"darken-4": #33691e,
"accent-1": #ccff90,
"accent-2": #b2ff59,
"accent-3": #76ff03,
"accent-4": #64dd17
);
$lime: (
"base": #cddc39,
"lighten-5": #f9fbe7,
"lighten-4": #f0f4c3,
"lighten-3": #e6ee9c,
"lighten-2": #dce775,
"lighten-1": #d4e157,
"darken-1": #c0ca33,
"darken-2": #afb42b,
"darken-3": #9e9d24,
"darken-4": #827717,
"accent-1": #f4ff81,
"accent-2": #eeff41,
"accent-3": #c6ff00,
"accent-4": #aeea00
);
$yellow: (
"base": #ffeb3b,
"lighten-5": #fffde7,
"lighten-4": #fff9c4,
"lighten-3": #fff59d,
"lighten-2": #fff176,
"lighten-1": #ffee58,
"darken-1": #fdd835,
"darken-2": #fbc02d,
"darken-3": #f9a825,
"darken-4": #f57f17,
"accent-1": #ffff8d,
"accent-2": #ffff00,
"accent-3": #ffea00,
"accent-4": #ffd600
);
$amber: (
"base": #ffc107,
"lighten-5": #fff8e1,
"lighten-4": #ffecb3,
"lighten-3": #ffe082,
"lighten-2": #ffd54f,
"lighten-1": #ffca28,
"darken-1": #ffb300,
"darken-2": #ffa000,
"darken-3": #ff8f00,
"darken-4": #ff6f00,
"accent-1": #ffe57f,
"accent-2": #ffd740,
"accent-3": #ffc400,
"accent-4": #ffab00
);
$orange: (
"base": #ff9800,
"lighten-5": #fff3e0,
"lighten-4": #ffe0b2,
"lighten-3": #ffcc80,
"lighten-2": #ffb74d,
"lighten-1": #ffa726,
"darken-1": #fb8c00,
"darken-2": #f57c00,
"darken-3": #ef6c00,
"darken-4": #e65100,
"accent-1": #ffd180,
"accent-2": #ffab40,
"accent-3": #ff9100,
"accent-4": #ff6d00
);
$deep-orange: (
"base": #ff5722,
"lighten-5": #fbe9e7,
"lighten-4": #ffccbc,
"lighten-3": #ffab91,
"lighten-2": #ff8a65,
"lighten-1": #ff7043,
"darken-1": #f4511e,
"darken-2": #e64a19,
"darken-3": #d84315,
"darken-4": #bf360c,
"accent-1": #ff9e80,
"accent-2": #ff6e40,
"accent-3": #ff3d00,
"accent-4": #dd2c00
);
$brown: (
"base": #795548,
"lighten-5": #efebe9,
"lighten-4": #d7ccc8,
"lighten-3": #bcaaa4,
"lighten-2": #a1887f,
"lighten-1": #8d6e63,
"darken-1": #6d4c41,
"darken-2": #5d4037,
"darken-3": #4e342e,
"darken-4": #3e2723
);
$blue-grey: (
"base": #607d8b,
"lighten-5": #eceff1,
"lighten-4": #cfd8dc,
"lighten-3": #b0bec5,
"lighten-2": #90a4ae,
"lighten-1": #78909c,
"darken-1": #546e7a,
"darken-2": #455a64,
"darken-3": #37474f,
"darken-4": #263238
);
$grey: (
"base": #9e9e9e,
"lighten-5": #fafafa,
"lighten-4": #f5f5f5,
"lighten-3": #eeeeee,
"lighten-2": #e0e0e0,
"lighten-1": #bdbdbd,
"darken-1": #757575,
"darken-2": #616161,
"darken-3": #424242,
"darken-4": #212121
);
$shades: (
"black": #000000,
"white": #FFFFFF,
"transparent": transparent
);
$colors: (
"materialize-red": $materialize-red,
"red": $red,
"pink": $pink,
"purple": $purple,
"deep-purple": $deep-purple,
"indigo": $indigo,
"blue": $blue,
"light-blue": $light-blue,
"cyan": $cyan,
"teal": $teal,
"green": $green,
"light-green": $light-green,
"lime": $lime,
"yellow": $yellow,
"amber": $amber,
"orange": $orange,
"deep-orange": $deep-orange,
"brown": $brown,
"blue-grey": $blue-grey,
"grey": $grey,
"shades": $shades
) !default;
// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)
@function color($color, $type) {
@if map-has-key($colors, $color) {
$curr_color: map-get($colors, $color);
@if map-has-key($curr_color, $type) {
@return map-get($curr_color, $type);
}
}
@warn "Unknown `#{$color}` - `#{$type}` in $colors.";
@return null;
}

191
app/static/external/materialize/sass/components/_datepicker.scss vendored Normal file
View File

@ -0,0 +1,191 @@
/* Modal */
.datepicker-modal {
max-width: 325px;
min-width: 300px;
max-height: none;
}
.datepicker-container.modal-content {
display: flex;
flex-direction: column;
padding: 0;
}
.datepicker-controls {
display: flex;
justify-content: space-between;
width: 280px;
margin: 0 auto;
.selects-container {
display: flex;
}
.select-wrapper {
input {
&:focus {
border-bottom: none;
}
border-bottom: none;
text-align: center;
margin: 0;
}
.caret {
display: none;
}
}
.select-year input {
width: 50px;
}
.select-month input {
width: 70px;
}
}
.month-prev, .month-next {
margin-top: 4px;
cursor: pointer;
background-color: transparent;
border: none;
}
/* Date Display */
.datepicker-date-display {
flex: 1 auto;
background-color: $secondary-color;
color: #fff;
padding: 20px 22px;
font-weight: 500;
.year-text {
display: block;
font-size: 1.5rem;
line-height: 25px;
color: $datepicker-year;
}
.date-text {
display: block;
font-size: 2.8rem;
line-height: 47px;
font-weight: 500;
}
}
/* Calendar */
.datepicker-calendar-container {
flex: 2.5 auto;
}
.datepicker-table {
width: 280px;
font-size: 1rem;
margin: 0 auto;
thead {
border-bottom: none;
}
th {
padding: 10px 5px;
text-align: center;
}
tr {
border: none;
}
abbr {
text-decoration: none;
color: $datepicker-calendar-header-color;
}
td {
&.is-today {
color: $secondary-color;
}
&.is-selected {
background-color: $secondary-color;
color: #fff;
}
&.is-outside-current-month,
&.is-disabled {
color: $datepicker-disabled-day-color;
pointer-events: none;
}
border-radius: 50%;
padding: 0;
}
}
.datepicker-day-button {
&:focus {
background-color: $datepicker-day-focus;
}
background-color: transparent;
border: none;
line-height: 38px;
display: block;
width: 100%;
border-radius: 50%;
padding: 0 5px;
cursor: pointer;
color: inherit;
}
/* Footer */
.datepicker-footer {
width: 280px;
margin: 0 auto;
padding-bottom: 5px;
display: flex;
justify-content: space-between;
}
.datepicker-cancel,
.datepicker-clear,
.datepicker-today,
.datepicker-done {
color: $secondary-color;
padding: 0 1rem;
}
.datepicker-clear {
color: $error-color;
}
/* Media Queries */
@media #{$medium-and-up} {
.datepicker-modal {
max-width: 625px;
}
.datepicker-container.modal-content {
flex-direction: row;
}
.datepicker-date-display {
flex: 0 1 270px;
}
.datepicker-controls,
.datepicker-table,
.datepicker-footer {
width: 320px;
}
.datepicker-day-button {
line-height: 44px;
}
}

85
app/static/external/materialize/sass/components/_dropdown.scss vendored Normal file
View File

@ -0,0 +1,85 @@
.dropdown-content {
&:focus {
outline: 0;
}
@extend .z-depth-1;
background-color: $dropdown-bg-color;
margin: 0;
display: none;
min-width: 100px;
overflow-y: auto;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: 9999; // TODO: Check if this doesn't break other things
transform-origin: 0 0;
li {
&:hover, &.active {
background-color: $dropdown-hover-bg-color;
}
&:focus {
outline: none;
}
&.divider {
min-height: 0;
height: 1px;
}
& > a, & > span {
font-size: 16px;
color: $dropdown-color;
display: block;
line-height: 22px;
padding: (($dropdown-item-height - 22) / 2) 16px;
}
& > span > label {
top: 1px;
left: 0;
height: 18px;
}
// Icon alignment override
& > a > i {
height: inherit;
line-height: inherit;
float: left;
margin: 0 24px 0 0;
width: 24px;
}
clear: both;
color: $off-black;
cursor: pointer;
min-height: $dropdown-item-height;
line-height: 1.5rem;
width: 100%;
text-align: left;
}
}
body.keyboard-focused {
.dropdown-content li:focus {
background-color: darken($dropdown-hover-bg-color, 8%);
}
}
// Input field specificity bugfix
.input-field.col .dropdown-content [type="checkbox"] + label {
top: 1px;
left: 0;
height: 18px;
transform: none;
}
.dropdown-trigger {
cursor: pointer;
}

769
app/static/external/materialize/sass/components/_global.scss vendored Normal file
View File

@ -0,0 +1,769 @@
//Default styles
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
// display: flex;
// min-height: 100vh;
// flex-direction: column;
}
main {
// flex: 1 0 auto;
}
button,
input,
optgroup,
select,
textarea {
font-family: $font-stack;
}
ul {
&:not(.browser-default) {
padding-left: 0;
list-style-type: none;
& > li {
list-style-type: none;
}
}
}
a {
color: $link-color;
text-decoration: none;
// Gets rid of tap active state
-webkit-tap-highlight-color: transparent;
}
// Positioning
.valign-wrapper {
display: flex;
align-items: center;
}
// classic clearfix
.clearfix {
clear: both;
}
// Z-levels
.z-depth-0 {
box-shadow: none !important;
}
/* 2dp elevation modified*/
.z-depth-1 {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px -2px rgba(0,0,0,0.12),
0 1px 5px 0 rgba(0,0,0,0.2);
}
.z-depth-1-half {
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
/* 6dp elevation modified*/
.z-depth-2 {
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),
0 1px 10px 0 rgba(0,0,0,0.12),
0 2px 4px -1px rgba(0,0,0,0.3);
}
/* 12dp elevation modified*/
.z-depth-3 {
box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),
0 3px 14px 2px rgba(0,0,0,0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
/* 16dp elevation */
.z-depth-4 {
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),
0 6px 30px 5px rgba(0,0,0,0.12),
0 8px 10px -7px rgba(0,0,0,0.2);
}
/* 24dp elevation */
.z-depth-5 {
box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),
0 9px 46px 8px rgba(0,0,0,0.12),
0 11px 15px -7px rgba(0,0,0,0.2);
}
.hoverable {
transition: box-shadow .25s;
&:hover {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
}
// Dividers
.divider {
height: 1px;
overflow: hidden;
background-color: color("grey", "lighten-2");
}
// Blockquote
blockquote {
margin: 20px 0;
padding-left: 1.5rem;
border-left: 5px solid $primary-color;
}
// Icon Styles
i {
line-height: inherit;
&.left {
float: left;
margin-right: 15px;
}
&.right {
float: right;
margin-left: 15px;
}
&.tiny {
font-size: 1rem;
}
&.small {
font-size: 2rem;
}
&.medium {
font-size: 4rem;
}
&.large {
font-size: 6rem;
}
}
// Images
img.responsive-img,
video.responsive-video {
max-width: 100%;
height: auto;
}
// Pagination
.pagination {
li {
display: inline-block;
border-radius: 2px;
text-align: center;
vertical-align: top;
height: 30px;
a {
color: #444;
display: inline-block;
font-size: 1.2rem;
padding: 0 10px;
line-height: 30px;
}
&.active a { color: #fff; }
&.active { background-color: $primary-color; }
&.disabled a {
cursor: default;
color: #999;
}
i {
font-size: 2rem;
}
}
li.pages ul li {
display: inline-block;
float: none;
}
}
@media #{$medium-and-down} {
.pagination {
width: 100%;
li.prev,
li.next {
width: 10%;
}
li.pages {
width: 80%;
overflow: hidden;
white-space: nowrap;
}
}
}
// Breadcrumbs
.breadcrumb {
font-size: 18px;
color: rgba(255,255,255, .7);
i,
[class^="mdi-"], [class*="mdi-"],
i.material-icons {
display: inline-block;
float: left;
font-size: 24px;
}
&:before {
content: '\E5CC';
color: rgba(255,255,255, .7);
vertical-align: top;
display: inline-block;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 25px;
margin: 0 10px 0 8px;
-webkit-font-smoothing: antialiased;
}
&:first-child:before {
display: none;
}
&:last-child {
color: #fff;
}
}
// Parallax
.parallax-container {
position: relative;
overflow: hidden;
height: 500px;
.parallax {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
img {
opacity: 0;
position: absolute;
left: 50%;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translate3d(0,0,0);
transform: translateX(-50%);
}
}
}
// Pushpin
.pin-top, .pin-bottom {
position: relative;
}
.pinned {
position: fixed !important;
}
/*********************
Transition Classes
**********************/
ul.staggered-list li {
opacity: 0;
}
.fade-in {
opacity: 0;
transform-origin: 0 50%;
}
/*********************
Media Query Classes
**********************/
.hide-on-small-only, .hide-on-small-and-down {
@media #{$small-and-down} {
display: none !important;
}
}
.hide-on-med-and-down {
@media #{$medium-and-down} {
display: none !important;
}
}
.hide-on-med-and-up {
@media #{$medium-and-up} {
display: none !important;
}
}
.hide-on-med-only {
@media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
display: none !important;
}
}
.hide-on-large-only {
@media #{$large-and-up} {
display: none !important;
}
}
.hide-on-extra-large-only {
@media #{$extra-large-and-up} {
display: none !important;
}
}
.show-on-extra-large {
@media #{$extra-large-and-up} {
display: block !important;
}
}
.show-on-large {
@media #{$large-and-up} {
display: block !important;
}
}
.show-on-medium {
@media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
display: block !important;
}
}
.show-on-small {
@media #{$small-and-down} {
display: block !important;
}
}
.show-on-medium-and-up {
@media #{$medium-and-up} {
display: block !important;
}
}
.show-on-medium-and-down {
@media #{$medium-and-down} {
display: block !important;
}
}
// Center text on mobile
.center-on-small-only {
@media #{$small-and-down} {
text-align: center;
}
}
// Footer
.page-footer {
padding-top: 20px;
color: $footer-font-color;
background-color: $footer-bg-color;
.footer-copyright {
overflow: hidden;
min-height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0px;
color: $footer-copyright-font-color;
background-color: $footer-copyright-bg-color;
}
}
// Tables
table, th, td {
border: none;
}
table {
width:100%;
display: table;
border-collapse: collapse;
border-spacing: 0;
&.striped {
tr {
border-bottom: none;
}
> tbody {
> tr:nth-child(odd) {
background-color: $table-striped-color;
}
> tr > td {
border-radius: 0;
}
}
}
&.highlight > tbody > tr {
transition: background-color .25s ease;
&:hover {
background-color: $table-striped-color;
}
}
&.centered {
thead tr th, tbody tr td {
text-align: center;
}
}
}
tr {
border-bottom: 1px solid $table-border-color;
}
td, th{
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px;
}
// Responsive Table
@media #{$medium-and-down} {
table.responsive-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
td:empty:before {
content: '\00a0';
}
th,
td {
margin: 0;
vertical-align: top;
}
th { text-align: left; }
thead {
display: block;
float: left;
tr {
display: block;
padding: 0 10px 0 0;
th::before {
content: "\00a0";
}
}
}
tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
tr {
display: inline-block;
vertical-align: top;
}
}
th {
display: block;
text-align: right;
}
td {
display: block;
min-height: 1.25em;
text-align: left;
}
tr {
border-bottom: none;
padding: 0 10px;
}
/* sort out borders */
thead {
border: 0;
border-right: 1px solid $table-border-color;
}
}
}
// Collections
.collection {
margin: $element-top-margin 0 $element-bottom-margin 0;
border: 1px solid $collection-border-color;
border-radius: 2px;
overflow: hidden;
position: relative;
.collection-item {
background-color: $collection-bg-color;
line-height: $collection-line-height;
padding: 10px 20px;
margin: 0;
border-bottom: 1px solid $collection-border-color;
// Avatar Collection
&.avatar {
min-height: 84px;
padding-left: 72px;
position: relative;
// Don't style circles inside preloader classes.
&:not(.circle-clipper) > .circle,
:not(.circle-clipper) > .circle {
position: absolute;
width: 42px;
height: 42px;
overflow: hidden;
left: 15px;
display: inline-block;
vertical-align: middle;
}
i.circle {
font-size: 18px;
line-height: 42px;
color: #fff;
background-color: #999;
text-align: center;
}
.title {
font-size: 16px;
}
p {
margin: 0;
}
.secondary-content {
position: absolute;
top: 16px;
right: 16px;
}
}
&:last-child {
border-bottom: none;
}
&.active {
background-color: $collection-active-bg-color;
color: $collection-active-color;
.secondary-content {
color: #fff;
}
}
}
a.collection-item{
display: block;
transition: .25s;
color: $collection-link-color;
&:not(.active) {
&:hover {
background-color: $collection-hover-bg-color;
}
}
}
&.with-header {
.collection-header {
background-color: $collection-bg-color;
border-bottom: 1px solid $collection-border-color;
padding: 10px 20px;
}
.collection-item {
padding-left: 30px;
}
.collection-item.avatar {
padding-left: 72px;
}
}
}
// Made less specific to allow easier overriding
.secondary-content {
float: right;
color: $secondary-color;
}
.collapsible .collection {
margin: 0;
border: none;
}
// Responsive Videos
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
iframe, object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
// Progress Bar
.progress {
position: relative;
height: 4px;
display: block;
width: 100%;
background-color: lighten($progress-bar-color, 40%);
border-radius: 2px;
margin: $element-top-margin 0 $element-bottom-margin 0;
overflow: hidden;
.determinate {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: $progress-bar-color;
transition: width .3s linear;
}
.indeterminate {
background-color: $progress-bar-color;
&:before {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left:0;
bottom: 0;
will-change: left, right;
// Custom bezier
animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
}
&:after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left:0;
bottom: 0;
will-change: left, right;
// Custom bezier
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
animation-delay: 1.15s;
}
}
}
@keyframes indeterminate {
0% {
left: -35%;
right:100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
/*******************
Utility Classes
*******************/
.hide {
display: none !important;
}
// Text Align
.left-align {
text-align: left;
}
.right-align {
text-align: right
}
.center, .center-align {
text-align: center;
}
.left {
float: left !important;
}
.right {
float: right !important;
}
// No Text Select
.no-select {
user-select: none;
}
.circle {
border-radius: 50%;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.truncate {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.no-padding {
padding: 0 !important;
}

156
app/static/external/materialize/sass/components/_grid.scss vendored Normal file
View File

@ -0,0 +1,156 @@
.container {
margin: 0 auto;
max-width: 1280px;
width: 90%;
}
@media #{$medium-and-up} {
.container {
width: 85%;
}
}
@media #{$large-and-up} {
.container {
width: 70%;
}
}
.col .row {
margin-left: (-1 * $gutter-width / 2);
margin-right: (-1 * $gutter-width / 2);
}
.section {
padding-top: 1rem;
padding-bottom: 1rem;
&.no-pad {
padding: 0;
}
&.no-pad-bot {
padding-bottom: 0;
}
&.no-pad-top {
padding-top: 0;
}
}
// Mixins to eliminate code repitition
@mixin reset-offset {
margin-left: auto;
left: auto;
right: auto;
}
@mixin grid-classes($size, $i, $perc) {
&.offset-#{$size}#{$i} {
margin-left: $perc;
}
&.pull-#{$size}#{$i} {
right: $perc;
}
&.push-#{$size}#{$i} {
left: $perc;
}
}
.row {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
// Clear floating children
&:after {
content: "";
display: table;
clear: both;
}
.col {
float: left;
box-sizing: border-box;
padding: 0 $gutter-width / 2;
min-height: 1px;
&[class*="push-"],
&[class*="pull-"] {
position: relative;
}
$i: 1;
@while $i <= $num-cols {
$perc: unquote((100 / ($num-cols / $i)) + "%");
&.s#{$i} {
width: $perc;
@include reset-offset;
}
$i: $i + 1;
}
$i: 1;
@while $i <= $num-cols {
$perc: unquote((100 / ($num-cols / $i)) + "%");
@include grid-classes("s", $i, $perc);
$i: $i + 1;
}
@media #{$medium-and-up} {
$i: 1;
@while $i <= $num-cols {
$perc: unquote((100 / ($num-cols / $i)) + "%");
&.m#{$i} {
width: $perc;
@include reset-offset;
}
$i: $i + 1
}
$i: 1;
@while $i <= $num-cols {
$perc: unquote((100 / ($num-cols / $i)) + "%");
@include grid-classes("m", $i, $perc);
$i: $i + 1;
}
}
@media #{$large-and-up} {
$i: 1;
@while $i <= $num-cols {
$perc: unquote((100 / ($num-cols / $i)) + "%");
&.l#{$i} {
width: $perc;
@include reset-offset;
}
$i: $i + 1;
}
$i: 1;
@while $i <= $num-cols {
$perc: unquote((100 / ($num-cols / $i)) + "%");
@include grid-classes("l", $i, $perc);
$i: $i + 1;
}
}
@media #{$extra-large-and-up} {
$i: 1;
@while $i <= $num-cols {
$perc: unquote((100 / ($num-cols / $i)) + "%");
&.xl#{$i} {
width: $perc;
@include reset-offset;
}
$i: $i + 1;
}
$i: 1;
@while $i <= $num-cols {
$perc: unquote((100 / ($num-cols / $i)) + "%");
@include grid-classes("xl", $i, $perc);
$i: $i + 1;
}
}
}
}

5
app/static/external/materialize/sass/components/_icons-material-design.scss vendored Normal file
View File

@ -0,0 +1,5 @@
/* This is needed for some mobile phones to display the Google Icon font properly */
.material-icons {
text-rendering: optimizeLegibility;
font-feature-settings: 'liga';
}

43
app/static/external/materialize/sass/components/_materialbox.scss vendored Normal file
View File

@ -0,0 +1,43 @@
.materialboxed {
&:hover {
&:not(.active) {
opacity: .8;
}
}
display: block;
cursor: zoom-in;
position: relative;
transition: opacity .4s;
-webkit-backface-visibility: hidden;
&.active {
cursor: zoom-out;
}
}
#materialbox-overlay {
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #292929;
z-index: 1000;
will-change: opacity;
}
.materialbox-caption {
position: fixed;
display: none;
color: #fff;
line-height: 50px;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 0% 15%;
height: 50px;
z-index: 1000;
-webkit-font-smoothing: antialiased;
}

94
app/static/external/materialize/sass/components/_modal.scss vendored Normal file
View File

@ -0,0 +1,94 @@
.modal {
&:focus {
outline: none;
}
@extend .z-depth-5;
display: none;
position: fixed;
left: 0;
right: 0;
background-color: #fafafa;
padding: 0;
max-height: 70%;
width: 55%;
margin: auto;
overflow-y: auto;
border-radius: 2px;
will-change: top, opacity;
@media #{$medium-and-down} {
width: 80%;
}
h1,h2,h3,h4 {
margin-top: 0;
}
.modal-content {
padding: 24px;
}
.modal-close {
cursor: pointer;
}
.modal-footer {
border-radius: 0 0 2px 2px;
background-color: #fafafa;
padding: 4px 6px;
height: 56px;
width: 100%;
text-align: right;
.btn, .btn-flat {
margin: 6px 0;
}
}
}
.modal-overlay {
position: fixed;
z-index: 999;
top: -25%;
left: 0;
bottom: 0;
right: 0;
height: 125%;
width: 100%;
background: #000;
display: none;
will-change: opacity;
}
// Modal with fixed action footer
.modal.modal-fixed-footer {
padding: 0;
height: 70%;
.modal-content {
position: absolute;
height: calc(100% - 56px);
max-height: 100%;
width: 100%;
overflow-y: auto;
}
.modal-footer {
border-top: 1px solid rgba(0,0,0,.1);
position: absolute;
bottom: 0;
}
}
// Modal Bottom Sheet Style
.modal.bottom-sheet {
top: auto;
bottom: -100%;
margin: 0;
width: 100%;
max-height: 45%;
border-radius: 0;
will-change: bottom, opacity;
}

208
app/static/external/materialize/sass/components/_navbar.scss vendored Normal file
View File

@ -0,0 +1,208 @@
nav {
&.nav-extended {
height: auto;
.nav-wrapper {
min-height: $navbar-height-mobile;
height: auto;
}
.nav-content {
position: relative;
line-height: normal;
}
}
color: $navbar-font-color;
@extend .z-depth-1;
background-color: $primary-color;
width: 100%;
height: $navbar-height-mobile;
line-height: $navbar-line-height-mobile;
a { color: $navbar-font-color; }
i,
[class^="mdi-"], [class*="mdi-"],
i.material-icons {
display: block;
font-size: 24px;
height: $navbar-height-mobile;
line-height: $navbar-line-height-mobile;
}
.nav-wrapper {
position: relative;
height: 100%;
}
@media #{$large-and-up} {
a.sidenav-trigger { display: none; }
}
// Collapse button
.sidenav-trigger {
float: left;
position: relative;
z-index: 1;
height: $navbar-height-mobile;
margin: 0 18px;
i {
height: $navbar-height-mobile;
line-height: $navbar-line-height-mobile;
}
}
// Logo
.brand-logo {
position: absolute;
color: $navbar-font-color;
display: inline-block;
font-size: $navbar-brand-font-size;
padding: 0;
&.center {
left: 50%;
transform: translateX(-50%);
}
@media #{$medium-and-down} {
left: 50%;
transform: translateX(-50%);
&.left, &.right {
padding: 0;
transform: none;
}
&.left { left: 0.5rem; }
&.right {
right: 0.5rem;
left: auto;
}
}
&.right {
right: 0.5rem;
padding: 0;
}
i,
[class^="mdi-"], [class*="mdi-"],
i.material-icons {
float: left;
margin-right: 15px;
}
}
// Title
.nav-title {
display: inline-block;
font-size: 32px;
padding: 28px 0;
}
// Navbar Links
ul {
margin: 0;
li {
transition: background-color .3s;
float: left;
padding: 0;
&.active {
background-color: rgba(0,0,0,.1);
}
}
a {
transition: background-color .3s;
font-size: $navbar-font-size;
color: $navbar-font-color;
display: block;
padding: 0 15px;
cursor: pointer;
&.btn, &.btn-large, &.btn-flat, &.btn-floating {
margin-top: -2px;
margin-left: 15px;
margin-right: 15px;
& > .material-icons {
height: inherit;
line-height: inherit;
}
}
&:hover {
background-color: rgba(0,0,0,.1);
}
}
&.left {
float: left;
}
}
// Navbar Search Form
form {
height: 100%;
}
.input-field {
margin: 0;
height: 100%;
input {
height: 100%;
font-size: 1.2rem;
border: none;
padding-left: 2rem;
&:focus, &[type=text]:valid, &[type=password]:valid,
&[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
border: none;
box-shadow: none;
}
}
label {
top: 0;
left: 0;
i {
color: rgba(255,255,255,.7);
transition: color .3s;
}
&.active i { color: $navbar-font-color; }
}
}
}
// Fixed Navbar
.navbar-fixed {
position: relative;
height: $navbar-height-mobile;
z-index: 997;
nav {
position: fixed;
}
}
@media #{$medium-and-up} {
nav.nav-extended .nav-wrapper {
min-height: $navbar-height;
}
nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
height: $navbar-height;
line-height: $navbar-line-height;
}
.navbar-fixed {
height: $navbar-height;
}
}

447
app/static/external/materialize/sass/components/_normalize.scss vendored Normal file
View File

@ -0,0 +1,447 @@
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}

334
app/static/external/materialize/sass/components/_preloader.scss vendored Normal file
View File

@ -0,0 +1,334 @@
/*
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
* Constants:
* STROKEWIDTH = 3px
* ARCSIZE = 270 degrees (amount of circle the arc takes up)
* ARCTIME = 1333ms (time it takes to expand and contract arc)
* ARCSTARTROT = 216 degrees (how much the start location of the arc
* should rotate each time, 216 gives us a
* 5 pointed star shape (it's 360/5 * 3).
* For a 7 pointed star, we might do
* 360/7 * 3 = 154.286)
* CONTAINERWIDTH = 28px
* SHRINK_TIME = 400ms
*/
.preloader-wrapper {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
&.small {
width: 36px;
height: 36px;
}
&.big {
width: 64px;
height: 64px;
}
&.active {
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
-webkit-animation: container-rotate 1568ms linear infinite;
animation: container-rotate 1568ms linear infinite;
}
}
@-webkit-keyframes container-rotate {
to { -webkit-transform: rotate(360deg) }
}
@keyframes container-rotate {
to { transform: rotate(360deg) }
}
.spinner-layer {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
border-color: $spinner-default-color;
}
.spinner-blue,
.spinner-blue-only {
border-color: #4285f4;
}
.spinner-red,
.spinner-red-only {
border-color: #db4437;
}
.spinner-yellow,
.spinner-yellow-only {
border-color: #f4b400;
}
.spinner-green,
.spinner-green-only {
border-color: #0f9d58;
}
/**
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
*
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
* guarantee that the animation will start _exactly_ after that value. So we avoid using
* animation-delay and instead set custom keyframes for each color (as redundant as it
* seems).
*
* We write out each animation in full (instead of separating animation-name,
* animation-duration, etc.) because under the polyfill, Safari does not recognize those
* specific properties properly, treats them as -webkit-animation, and overrides the
* other animation rules. See https://github.com/Polymer/platform/issues/53.
*/
.active .spinner-layer.spinner-blue {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-red {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-yellow {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer.spinner-green {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .spinner-layer,
.active .spinner-layer.spinner-blue-only,
.active .spinner-layer.spinner-red-only,
.active .spinner-layer.spinner-yellow-only,
.active .spinner-layer.spinner-green-only {
/* durations: 4 * ARCTIME */
opacity: 1;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
@-webkit-keyframes fill-unfill-rotate {
12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
}
@keyframes fill-unfill-rotate {
12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
}
@-webkit-keyframes blue-fade-in-out {
from { opacity: 1; }
25% { opacity: 1; }
26% { opacity: 0; }
89% { opacity: 0; }
90% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes blue-fade-in-out {
from { opacity: 1; }
25% { opacity: 1; }
26% { opacity: 0; }
89% { opacity: 0; }
90% { opacity: 1; }
100% { opacity: 1; }
}
@-webkit-keyframes red-fade-in-out {
from { opacity: 0; }
15% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 1; }
51% { opacity: 0; }
}
@keyframes red-fade-in-out {
from { opacity: 0; }
15% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 1; }
51% { opacity: 0; }
}
@-webkit-keyframes yellow-fade-in-out {
from { opacity: 0; }
40% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 1; }
76% { opacity: 0; }
}
@keyframes yellow-fade-in-out {
from { opacity: 0; }
40% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 1; }
76% { opacity: 0; }
}
@-webkit-keyframes green-fade-in-out {
from { opacity: 0; }
65% { opacity: 0; }
75% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes green-fade-in-out {
from { opacity: 0; }
65% { opacity: 0; }
75% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
/**
* Patch the gap that appear between the two adjacent div.circle-clipper while the
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
*/
.gap-patch {
position: absolute;
top: 0;
left: 45%;
width: 10%;
height: 100%;
overflow: hidden;
border-color: inherit;
}
.gap-patch .circle {
width: 1000%;
left: -450%;
}
.circle-clipper {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
border-color: inherit;
.circle {
width: 200%;
height: 100%;
border-width: 3px; /* STROKEWIDTH */
border-style: solid;
border-color: inherit;
border-bottom-color: transparent !important;
border-radius: 50%;
-webkit-animation: none;
animation: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
&.left .circle {
left: 0;
border-right-color: transparent !important;
-webkit-transform: rotate(129deg);
transform: rotate(129deg);
}
&.right .circle {
left: -100%;
border-left-color: transparent !important;
-webkit-transform: rotate(-129deg);
transform: rotate(-129deg);
}
}
.active .circle-clipper.left .circle {
/* duration: ARCTIME */
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
.active .circle-clipper.right .circle {
/* duration: ARCTIME */
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}
@-webkit-keyframes left-spin {
from { -webkit-transform: rotate(130deg); }
50% { -webkit-transform: rotate(-5deg); }
to { -webkit-transform: rotate(130deg); }
}
@keyframes left-spin {
from { transform: rotate(130deg); }
50% { transform: rotate(-5deg); }
to { transform: rotate(130deg); }
}
@-webkit-keyframes right-spin {
from { -webkit-transform: rotate(-130deg); }
50% { -webkit-transform: rotate(5deg); }
to { -webkit-transform: rotate(-130deg); }
}
@keyframes right-spin {
from { transform: rotate(-130deg); }
50% { transform: rotate(5deg); }
to { transform: rotate(-130deg); }
}
#spinnerContainer.cooldown {
/* duration: SHRINK_TIME */
-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
@-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}

34
app/static/external/materialize/sass/components/_pulse.scss vendored Normal file
View File

@ -0,0 +1,34 @@
.pulse {
&::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: inherit;
border-radius: inherit;
transition: opacity .3s, transform .3s;
animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
z-index: -1;
}
overflow: visible;
position: relative;
}
@keyframes pulse-animation {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0;
transform: scale(1.5);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}

216
app/static/external/materialize/sass/components/_sidenav.scss vendored Normal file
View File

@ -0,0 +1,216 @@
.sidenav {
position: fixed;
width: $sidenav-width;
left: 0;
top: 0;
margin: 0;
transform: translateX(-100%);
height: 100%;
height: calc(100% + 60px);
height: -moz-calc(100%); //Temporary Firefox Fix
padding-bottom: 60px;
background-color: $sidenav-bg-color;
z-index: 999;
overflow-y: auto;
will-change: transform;
backface-visibility: hidden;
transform: translateX(-105%);
@extend .z-depth-1;
// Right Align
&.right-aligned {
right: 0;
transform: translateX(105%);
left: auto;
transform: translateX(100%);
}
.collapsible {
margin: 0;
}
li {
float: none;
line-height: $sidenav-line-height;
&.active { background-color: rgba(0,0,0,.05); }
}
li > a {
color: $sidenav-font-color;
display: block;
font-size: $sidenav-font-size;
font-weight: 500;
height: $sidenav-item-height;
line-height: $sidenav-line-height;
padding: 0 ($sidenav-padding * 2);
&:hover { background-color: rgba(0,0,0,.05);}
&.btn, &.btn-large, &.btn-flat, &.btn-floating {
margin: 10px 15px;
}
&.btn,
&.btn-large,
&.btn-floating { color: $button-raised-color; }
&.btn-flat { color: $button-flat-color; }
&.btn:hover,
&.btn-large:hover { background-color: lighten($button-raised-background, 5%); }
&.btn-floating:hover { background-color: $button-raised-background; }
& > i,
& > [class^="mdi-"], li > a > [class*="mdi-"],
& > i.material-icons {
float: left;
height: $sidenav-item-height;
line-height: $sidenav-line-height;
margin: 0 ($sidenav-padding * 2) 0 0;
width: $sidenav-item-height / 2;
color: rgba(0,0,0,.54);
}
}
.divider {
margin: ($sidenav-padding / 2) 0 0 0;
}
.subheader {
&:hover {
background-color: transparent;
}
cursor: initial;
pointer-events: none;
color: rgba(0,0,0,.54);
font-size: $sidenav-font-size;
font-weight: 500;
line-height: $sidenav-line-height;
}
.user-view {
position: relative;
padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
margin-bottom: $sidenav-padding / 2;
& > a {
&:hover { background-color: transparent; }
height: auto;
padding: 0;
}
.background {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.circle, .name, .email {
display: block;
}
.circle {
height: 64px;
width: 64px;
}
.name,
.email {
font-size: $sidenav-font-size;
line-height: $sidenav-line-height / 2;
}
.name {
margin-top: 16px;
font-weight: 500;
}
.email {
padding-bottom: 16px;
font-weight: 400;
}
}
}
// Touch interaction
.drag-target {
// Right Align
&.right-aligned {
right: 0;
}
height: 100%;
width: 10px;
position: fixed;
top: 0;
z-index: 998;
}
// Fixed Sidenav shown
.sidenav.sidenav-fixed {
// Right Align
&.right-aligned {
right: 0;
left: auto;
}
left: 0;
transform: translateX(0);
position: fixed;
}
// Fixed Sidenav hide on smaller
@media #{$medium-and-down} {
.sidenav {
&.sidenav-fixed {
transform: translateX(-105%);
&.right-aligned {
transform: translateX(105%);
}
}
> a {
padding: 0 $sidenav-padding;
}
.user-view {
padding: $sidenav-padding $sidenav-padding 0;
}
}
}
.sidenav .collapsible-body > ul:not(.collapsible) > li.active,
.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
background-color: $primary-color;
a {
color: $sidenav-bg-color;
}
}
.sidenav .collapsible-body {
padding: 0;
}
.sidenav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 0;
height: 120vh;
background-color: rgba(0,0,0,.5);
z-index: 997;
display: none;
}

92
app/static/external/materialize/sass/components/_slider.scss vendored Normal file
View File

@ -0,0 +1,92 @@
.slider {
position: relative;
height: 400px;
width: 100%;
// Fullscreen slider
&.fullscreen {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
ul.slides {
height: 100%;
}
ul.indicators {
z-index: 2;
bottom: 30px;
}
}
.slides {
background-color: $slider-bg-color;
margin: 0;
height: 400px;
li {
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: inherit;
overflow: hidden;
img {
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
}
.caption {
color: #fff;
position: absolute;
top: 15%;
left: 15%;
width: 70%;
opacity: 0;
p { color: $slider-bg-color-light; }
}
&.active {
z-index: 2;
}
}
}
.indicators {
position: absolute;
text-align: center;
left: 0;
right: 0;
bottom: 0;
margin: 0;
.indicator-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 16px;
width: 16px;
margin: 0 12px;
background-color: $slider-bg-color-light;
transition: background-color .3s;
border-radius: 50%;
&.active {
background-color: $slider-indicator-color;
}
}
}
}

33
app/static/external/materialize/sass/components/_table_of_contents.scss vendored Normal file
View File

@ -0,0 +1,33 @@
/***************
Nav List
***************/
.table-of-contents {
&.fixed {
position: fixed;
}
li {
padding: 2px 0;
}
a {
display: inline-block;
font-weight: 300;
color: #757575;
padding-left: 16px;
height: 1.5rem;
line-height: 1.5rem;
letter-spacing: .4;
display: inline-block;
&:hover {
color: lighten(#757575, 20%);
padding-left: 15px;
border-left: 1px solid $primary-color;
}
&.active {
font-weight: 500;
padding-left: 14px;
border-left: 2px solid $primary-color;
}
}
}

99
app/static/external/materialize/sass/components/_tabs.scss vendored Normal file
View File

@ -0,0 +1,99 @@
.tabs {
&.tabs-transparent {
background-color: transparent;
.tab a,
.tab.disabled a,
.tab.disabled a:hover {
color: rgba(255,255,255,0.7);
}
.tab a:hover,
.tab a.active {
color: #fff;
}
.indicator {
background-color: #fff;
}
}
&.tabs-fixed-width {
display: flex;
.tab {
flex-grow: 1;
}
}
position: relative;
overflow-x: auto;
overflow-y: hidden;
height: 48px;
width: 100%;
background-color: $tabs-bg-color;
margin: 0 auto;
white-space: nowrap;
.tab {
display: inline-block;
text-align: center;
line-height: 48px;
height: 48px;
padding: 0;
margin: 0;
text-transform: uppercase;
a {
&:focus,
&:focus.active {
background-color: transparentize($tabs-underline-color, .8);
outline: none;
}
&:hover,
&.active {
background-color: transparent;
color: $tabs-text-color;
}
color: rgba($tabs-text-color, .7);
display: block;
width: 100%;
height: 100%;
padding: 0 24px;
font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
transition: color .28s ease, background-color .28s ease;
}
&.disabled a,
&.disabled a:hover {
color: rgba($tabs-text-color, .4);
cursor: default;
}
}
.indicator {
position: absolute;
bottom: 0;
height: 2px;
background-color: $tabs-underline-color;
will-change: left, right;
}
}
// Fixed Sidenav hide on smaller
@media #{$medium-and-down} {
.tabs {
display: flex;
.tab {
flex-grow: 1;
a {
padding: 0 12px;
}
}
}
}

103
app/static/external/materialize/sass/components/_tapTarget.scss vendored Normal file
View File

@ -0,0 +1,103 @@
.tap-target-wrapper {
width: 800px;
height: 800px;
position: fixed;
z-index: 1000;
visibility: hidden;
transition: visibility 0s .3s;
}
.tap-target-wrapper.open {
visibility: visible;
transition: visibility 0s;
.tap-target {
transform: scale(1);
opacity: .95;
transition:
transform .3s cubic-bezier(.42,0,.58,1),
opacity .3s cubic-bezier(.42,0,.58,1);
}
.tap-target-wave::before {
transform: scale(1);
}
.tap-target-wave::after {
visibility: visible;
animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
transition:
opacity .3s,
transform .3s,
visibility 0s 1s;
}
}
.tap-target {
position: absolute;
font-size: 1rem;
border-radius: 50%;
background-color: $primary-color;
box-shadow: 0 20px 20px 0 rgba(0,0,0,0.14), 0 10px 50px 0 rgba(0,0,0,0.12), 0 30px 10px -20px rgba(0,0,0,0.2);
width: 100%;
height: 100%;
opacity: 0;
transform: scale(0);
transition:
transform .3s cubic-bezier(.42,0,.58,1),
opacity .3s cubic-bezier(.42,0,.58,1);
}
.tap-target-content {
position: relative;
display: table-cell;
}
.tap-target-wave {
&::before,
&::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #ffffff;
}
&::before {
transform: scale(0);
transition: transform .3s;
}
&::after {
visibility: hidden;
transition:
opacity .3s,
transform .3s,
visibility 0s;
z-index: -1;
}
position: absolute;
border-radius: 50%;
z-index: 10001;
}
.tap-target-origin {
&:not(.btn),
&:not(.btn):hover {
background: none;
}
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 10002;
position: absolute !important;
}
@media only screen and (max-width: 600px) {
.tap-target, .tap-target-wrapper {
width: 600px;
height: 600px;
}
}

183
app/static/external/materialize/sass/components/_timepicker.scss vendored Normal file
View File

@ -0,0 +1,183 @@
/* Timepicker Containers */
.timepicker-modal {
max-width: 325px;
max-height: none;
}
.timepicker-container.modal-content {
display: flex;
flex-direction: column;
padding: 0;
}
.text-primary {
color: rgba(255, 255, 255, 1);
}
/* Clock Digital Display */
.timepicker-digital-display {
flex: 1 auto;
background-color: $secondary-color;
padding: 10px;
font-weight: 300;
}
.timepicker-text-container {
font-size: 4rem;
font-weight: bold;
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-weight: 400;
position: relative;
user-select: none;
}
.timepicker-span-hours,
.timepicker-span-minutes,
.timepicker-span-am-pm div {
cursor: pointer;
}
.timepicker-span-hours {
margin-right: 3px;
}
.timepicker-span-minutes {
margin-left: 3px;
}
.timepicker-display-am-pm {
font-size: 1.3rem;
position: absolute;
right: 1rem;
bottom: 1rem;
font-weight: 400;
}
/* Analog Clock Display */
.timepicker-analog-display {
flex: 2.5 auto;
}
.timepicker-plate {
background-color: $timepicker-clock-plate-bg;
border-radius: 50%;
width: 270px;
height: 270px;
overflow: visible;
position: relative;
margin: auto;
margin-top: 25px;
margin-bottom: 5px;
user-select: none;
}
.timepicker-canvas,
.timepicker-dial {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.timepicker-minutes {
visibility: hidden;
}
.timepicker-tick {
border-radius: 50%;
color: $timepicker-clock-color;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
position: absolute;
cursor: pointer;
font-size: 15px;
}
.timepicker-tick.active,
.timepicker-tick:hover {
background-color: transparentize($secondary-color, .75);
}
.timepicker-dial {
transition: transform 350ms, opacity 350ms;
}
.timepicker-dial-out {
&.timepicker-hours {
transform: scale(1.1, 1.1);
}
&.timepicker-minutes {
transform: scale(.8, .8);
}
opacity: 0;
}
.timepicker-canvas {
transition: opacity 175ms;
line {
stroke: $secondary-color;
stroke-width: 4;
stroke-linecap: round;
}
}
.timepicker-canvas-out {
opacity: 0.25;
}
.timepicker-canvas-bearing {
stroke: none;
fill: $secondary-color;
}
.timepicker-canvas-bg {
stroke: none;
fill: $secondary-color;
}
/* Footer */
.timepicker-footer {
margin: 0 auto;
padding: 5px 1rem;
display: flex;
justify-content: space-between;
}
.timepicker-clear {
color: $error-color;
}
.timepicker-close {
color: $secondary-color;
}
.timepicker-clear,
.timepicker-close {
padding: 0 20px;
}
/* Media Queries */
@media #{$medium-and-up} {
.timepicker-modal {
max-width: 600px;
}
.timepicker-container.modal-content {
flex-direction: row;
}
.timepicker-text-container {
top: 32%;
}
.timepicker-display-am-pm {
position: relative;
right: auto;
bottom: auto;
text-align: center;
margin-top: 1.2rem;
}
}

58
app/static/external/materialize/sass/components/_toast.scss vendored Normal file
View File

@ -0,0 +1,58 @@
#toast-container {
display:block;
position: fixed;
z-index: 10000;
@media #{$small-and-down} {
min-width: 100%;
bottom: 0%;
}
@media #{$medium-only} {
left: 5%;
bottom: 7%;
max-width: 90%;
}
@media #{$large-and-up} {
top: 10%;
right: 7%;
max-width: 86%;
}
}
.toast {
@extend .z-depth-1;
border-radius: 2px;
top: 35px;
width: auto;
margin-top: 10px;
position: relative;
max-width:100%;
height: auto;
min-height: $toast-height;
line-height: 1.5em;
background-color: $toast-color;
padding: 10px 25px;
font-size: 1.1rem;
font-weight: 300;
color: $toast-text-color;
display: flex;
align-items: center;
justify-content: space-between;
cursor: default;
.toast-action {
color: $toast-action-color;
font-weight: 500;
margin-right: -25px;
margin-left: 3rem;
}
&.rounded{
border-radius: 24px;
}
@media #{$small-and-down} {
width: 100%;
border-radius: 0;
}
}

32
app/static/external/materialize/sass/components/_tooltip.scss vendored Normal file
View File

@ -0,0 +1,32 @@
.material-tooltip {
padding: 10px 8px;
font-size: 1rem;
z-index: 2000;
background-color: transparent;
border-radius: 2px;
color: #fff;
min-height: 36px;
line-height: 120%;
opacity: 0;
position: absolute;
text-align: center;
max-width: calc(100% - 4px);
overflow: hidden;
left: 0;
top: 0;
pointer-events: none;
visibility: hidden;
background-color: #323232;
}
.backdrop {
position: absolute;
opacity: 0;
height: 7px;
width: 14px;
border-radius: 0 0 50% 50%;
background-color: #323232;
z-index: -1;
transform-origin: 50% 0%;
visibility: hidden;
}

13
app/static/external/materialize/sass/components/_transitions.scss vendored Normal file
View File

@ -0,0 +1,13 @@
// Scale transition
.scale-transition {
&.scale-out {
transform: scale(0);
transition: transform .2s !important;
}
&.scale-in {
transform: scale(1);
}
transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
}

60
app/static/external/materialize/sass/components/_typography.scss vendored Normal file
View File

@ -0,0 +1,60 @@
a {
text-decoration: none;
}
html{
line-height: 1.5;
@media only screen and (min-width: 0) {
font-size: 14px;
}
@media only screen and (min-width: $medium-screen) {
font-size: 14.5px;
}
@media only screen and (min-width: $large-screen) {
font-size: 15px;
}
font-family: $font-stack;
font-weight: normal;
color: $off-black;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.3;
}
// Header Styles
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 1.5) 0 ($h1-fontsize / 2.5) 0;}
h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 1.5) 0 ($h2-fontsize / 2.5) 0;}
h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 1.5) 0 ($h3-fontsize / 2.5) 0;}
h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 1.5) 0 ($h4-fontsize / 2.5) 0;}
h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 1.5) 0 ($h5-fontsize / 2.5) 0;}
h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 1.5) 0 ($h6-fontsize / 2.5) 0;}
// Text Styles
em { font-style: italic; }
strong { font-weight: 500; }
small { font-size: 75%; }
.light { font-weight: 300; }
.thin { font-weight: 200; }
.flow-text{
$i: 0;
@while $i <= $intervals {
@media only screen and (min-width : 360 + ($i * $interval-size)) {
font-size: 1.2rem * (1 + (.02 * $i));
}
$i: $i + 1;
}
// Handle below 360px screen
@media only screen and (max-width: 360px) {
font-size: 1.2rem;
}
}

349
app/static/external/materialize/sass/components/_variables.scss vendored Normal file
View File

@ -0,0 +1,349 @@
// ==========================================================================
// Materialize variables
// ==========================================================================
//
// Table of Contents:
//
// 1. Colors
// 2. Badges
// 3. Buttons
// 4. Cards
// 5. Carousel
// 6. Collapsible
// 7. Chips
// 8. Date + Time Picker
// 9. Dropdown
// 10. Forms
// 11. Global
// 12. Grid
// 13. Navigation Bar
// 14. Side Navigation
// 15. Photo Slider
// 16. Spinners | Loaders
// 17. Tabs
// 18. Tables
// 19. Toasts
// 20. Typography
// 21. Footer
// 22. Flow Text
// 23. Collections
// 24. Progress Bar
// 1. Colors
// ==========================================================================
$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;
// 2. Badges
// ==========================================================================
$badge-bg-color: $secondary-color !default;
$badge-height: 22px !default;
// 3. Buttons
// ==========================================================================
// Shared styles
$button-border: none !default;
$button-background-focus: lighten($secondary-color, 4%) !default;
$button-font-size: 14px !default;
$button-icon-font-size: 1.3rem !default;
$button-height: 36px !default;
$button-padding: 0 16px !default;
$button-radius: 2px !default;
// Disabled styles
$button-disabled-background: #DFDFDF !default;
$button-disabled-color: #9F9F9F !default;
// Raised buttons
$button-raised-background: $secondary-color !default;
$button-raised-background-hover: lighten($button-raised-background, 5%) !default;
$button-raised-color: #fff !default;
// Large buttons
$button-large-font-size: 15px !default;
$button-large-icon-font-size: 1.6rem !default;
$button-large-height: $button-height * 1.5 !default;
$button-floating-large-size: 56px !default;
// Small buttons
$button-small-font-size: 13px !default;
$button-small-icon-font-size: 1.2rem !default;
$button-small-height: $button-height * .9 !default;
$button-floating-small-size: $button-height * .9 !default;
// Flat buttons
$button-flat-color: #343434 !default;
$button-flat-disabled-color: lighten(#999, 10%) !default;
// Floating buttons
$button-floating-background: $secondary-color !default;
$button-floating-background-hover: $button-floating-background !default;
$button-floating-color: #fff !default;
$button-floating-size: 40px !default;
$button-floating-radius: 50% !default;
// 4. Cards
// ==========================================================================
$card-padding: 24px !default;
$card-bg-color: #fff !default;
$card-link-color: color("orange", "accent-2") !default;
$card-link-color-light: lighten($card-link-color, 20%) !default;
// 5. Carousel
// ==========================================================================
$carousel-height: 400px !default;
$carousel-item-height: $carousel-height / 2 !default;
$carousel-item-width: $carousel-item-height !default;
// 6. Collapsible
// ==========================================================================
$collapsible-height: 3rem !default;
$collapsible-line-height: $collapsible-height !default;
$collapsible-header-color: #fff !default;
$collapsible-border-color: #ddd !default;
// 7. Chips
// ==========================================================================
$chip-bg-color: #e4e4e4 !default;
$chip-border-color: #9e9e9e !default;
$chip-selected-color: #26a69a !default;
$chip-margin: 5px !default;
// 8. Date + Time Picker
// ==========================================================================
$datepicker-display-font-size: 2.8rem;
$datepicker-calendar-header-color: #999;
$datepicker-weekday-color: rgba(0, 0, 0, .87) !default;
$datepicker-weekday-bg: darken($secondary-color, 7%) !default;
$datepicker-date-bg: $secondary-color !default;
$datepicker-year: rgba(255, 255, 255, .7) !default;
$datepicker-focus: rgba(0,0,0, .05) !default;
$datepicker-selected: $secondary-color !default;
$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
$datepicker-day-focus: transparentize(desaturate($secondary-color, 5%), .75) !default;
$datepicker-disabled-day-color: rgba(0, 0, 0, .3) !default;
$timepicker-clock-color: rgba(0, 0, 0, .87) !default;
$timepicker-clock-plate-bg: #eee !default;
// 9. Dropdown
// ==========================================================================
$dropdown-bg-color: #fff !default;
$dropdown-hover-bg-color: #eee !default;
$dropdown-color: $secondary-color !default;
$dropdown-item-height: 50px !default;
// 10. Forms
// ==========================================================================
// Text Inputs + Textarea
$input-height: 3rem !default;
$input-border-color: color("grey", "base") !default;
$input-border: 1px solid $input-border-color !default;
$input-background: #fff !default;
$input-error-color: $error-color !default;
$input-success-color: $success-color !default;
$input-focus-color: $secondary-color !default;
$input-font-size: 16px !default;
$input-margin-bottom: 8px;
$input-margin: 0 0 $input-margin-bottom 0 !default;
$input-padding: 0 !default;
$label-font-size: .8rem !default;
$input-disabled-color: rgba(0,0,0, .42) !default;
$input-disabled-solid-color: #949494 !default;
$input-disabled-border: 1px dotted $input-disabled-color !default;
$input-invalid-border: 1px solid $input-error-color !default;
$input-icon-size: 2rem;
$placeholder-text-color: lighten($input-border-color, 20%) !default;
// Radio Buttons
$radio-fill-color: $secondary-color !default;
$radio-empty-color: #5a5a5a !default;
$radio-border: 2px solid $radio-fill-color !default;
// Range
$range-height: 14px !default;
$range-width: 14px !default;
$track-height: 3px !default;
// Select
$select-border: 1px solid #f2f2f2 !default;
$select-background: rgba(255, 255, 255, 0.90) !default;
$select-focus: 1px solid lighten($secondary-color, 47%) !default;
$select-option-hover: rgba(0,0,0,.08) !default;
$select-option-focus: rgba(0,0,0,.08) !default;
$select-option-selected: rgba(0,0,0,.03) !default;
$select-padding: 5px !default;
$select-radius: 2px !default;
$select-disabled-color: rgba(0,0,0,.3) !default;
// Switches
$switch-bg-color: $secondary-color !default;
$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%) !default;
$switch-unchecked-bg: #F1F1F1 !default;
$switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
$switch-radius: 15px !default;
// 11. Global
// ==========================================================================
// Media Query Ranges
$small-screen-up: 601px !default;
$medium-screen-up: 993px !default;
$large-screen-up: 1201px !default;
$small-screen: 600px !default;
$medium-screen: 992px !default;
$large-screen: 1200px !default;
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
// 12. Grid
// ==========================================================================
$num-cols: 12 !default;
$gutter-width: 1.5rem !default;
$element-top-margin: $gutter-width/3 !default;
$element-bottom-margin: ($gutter-width*2)/3 !default;
// 13. Navigation Bar
// ==========================================================================
$navbar-height: 64px !default;
$navbar-line-height: $navbar-height !default;
$navbar-height-mobile: 56px !default;
$navbar-line-height-mobile: $navbar-height-mobile !default;
$navbar-font-size: 1rem !default;
$navbar-font-color: #fff !default;
$navbar-brand-font-size: 2.1rem !default;
// 14. Side Navigation
// ==========================================================================
$sidenav-width: 300px !default;
$sidenav-font-size: 14px !default;
$sidenav-font-color: rgba(0,0,0,.87) !default;
$sidenav-bg-color: #fff !default;
$sidenav-padding: 16px !default;
$sidenav-item-height: 48px !default;
$sidenav-line-height: $sidenav-item-height !default;
// 15. Photo Slider
// ==========================================================================
$slider-bg-color: color('grey', 'base') !default;
$slider-bg-color-light: color('grey', 'lighten-2') !default;
$slider-indicator-color: color('green', 'base') !default;
// 16. Spinners | Loaders
// ==========================================================================
$spinner-default-color: $secondary-color !default;
// 17. Tabs
// ==========================================================================
$tabs-underline-color: $primary-color-light !default;
$tabs-text-color: $primary-color !default;
$tabs-bg-color: #fff !default;
// 18. Tables
// ==========================================================================
$table-border-color: rgba(0,0,0,.12) !default;
$table-striped-color: rgba(242, 242, 242, 0.5) !default;
// 19. Toasts
// ==========================================================================
$toast-height: 48px !default;
$toast-color: #323232 !default;
$toast-text-color: #fff !default;
$toast-action-color: #eeff41;
// 20. Typography
// ==========================================================================
$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
$off-black: rgba(0, 0, 0, 0.87) !default;
// Header Styles
$h1-fontsize: 4.2rem !default;
$h2-fontsize: 3.56rem !default;
$h3-fontsize: 2.92rem !default;
$h4-fontsize: 2.28rem !default;
$h5-fontsize: 1.64rem !default;
$h6-fontsize: 1.15rem !default;
// 21. Footer
// ==========================================================================
$footer-font-color: #fff !default;
$footer-bg-color: $primary-color !default;
$footer-copyright-font-color: rgba(255,255,255,.8) !default;
$footer-copyright-bg-color: rgba(51,51,51,.08) !default;
// 22. Flow Text
// ==========================================================================
$range : $large-screen - $small-screen !default;
$intervals: 20 !default;
$interval-size: $range / $intervals !default;
// 23. Collections
// ==========================================================================
$collection-border-color: #e0e0e0 !default;
$collection-bg-color: #fff !default;
$collection-active-bg-color: $secondary-color !default;
$collection-active-color: lighten($secondary-color, 55%) !default;
$collection-hover-bg-color: #ddd !default;
$collection-link-color: $secondary-color !default;
$collection-line-height: 1.5rem !default;
// 24. Progress Bar
// ==========================================================================
$progress-bar-color: $secondary-color !default;

114
app/static/external/materialize/sass/components/_waves.scss vendored Normal file
View File

@ -0,0 +1,114 @@
/*!
* Waves v0.6.0
* http://fian.my.id/Waves
*
* Copyright 2014 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/
.waves-effect {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 1;
transition: .3s ease-out;
.waves-ripple {
position: absolute;
border-radius: 50%;
width: 20px;
height: 20px;
margin-top:-10px;
margin-left:-10px;
opacity: 0;
background: rgba(0,0,0,0.2);
transition: all 0.7s ease-out;
transition-property: transform, opacity;
transform: scale(0);
pointer-events: none;
}
// Waves Colors
&.waves-light .waves-ripple {
background-color: rgba(255, 255, 255, 0.45);
}
&.waves-red .waves-ripple {
background-color: rgba(244, 67, 54, .70);
}
&.waves-yellow .waves-ripple {
background-color: rgba(255, 235, 59, .70);
}
&.waves-orange .waves-ripple {
background-color: rgba(255, 152, 0, .70);
}
&.waves-purple .waves-ripple {
background-color: rgba(156, 39, 176, 0.70);
}
&.waves-green .waves-ripple {
background-color: rgba(76, 175, 80, 0.70);
}
&.waves-teal .waves-ripple {
background-color: rgba(0, 150, 136, 0.70);
}
// Style input button bug.
input[type="button"], input[type="reset"], input[type="submit"] {
border: 0;
font-style: normal;
font-size: inherit;
text-transform: inherit;
background: none;
}
img {
position: relative;
z-index: -1;
}
}
.waves-notransition {
transition: none #{"!important"};
}
.waves-circle {
transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
.waves-input-wrapper {
border-radius: 0.2em;
vertical-align: bottom;
.waves-button-input {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
}
.waves-circle {
text-align: center;
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
border-radius: 50%;
-webkit-mask-image: none;
}
.waves-block {
display: block;
}
/* Firefox Bug: link not triggered */
.waves-effect .waves-ripple {
z-index: -1;
}

200
app/static/external/materialize/sass/components/forms/_checkboxes.scss vendored Normal file
View File

@ -0,0 +1,200 @@
/* Checkboxes
========================================================================== */
/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
opacity: 0;
pointer-events: none;
}
// Checkbox Styles
[type="checkbox"] {
// Text Label Style
+ span:not(.lever) {
position: relative;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
font-size: 1rem;
user-select: none;
}
/* checkbox aspect */
+ span:not(.lever):before,
&:not(.filled-in) + span:not(.lever):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
z-index: 0;
border: 2px solid $radio-empty-color;
border-radius: 1px;
margin-top: 3px;
transition: .2s;
}
&:not(.filled-in) + span:not(.lever):after {
border: 0;
transform: scale(0);
}
&:not(:checked):disabled + span:not(.lever):before {
border: none;
background-color: $input-disabled-color;
}
// Focused styles
&.tabbed:focus + span:not(.lever):after {
transform: scale(1);
border: 0;
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(0,0,0,.1);
background-color: rgba(0,0,0,.1);
}
}
[type="checkbox"]:checked {
+ span:not(.lever):before {
top: -4px;
left: -5px;
width: 12px;
height: 22px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: $radio-border;
border-bottom: $radio-border;
transform: rotate(40deg);
backface-visibility: hidden;
transform-origin: 100% 100%;
}
&:disabled + span:before {
border-right: 2px solid $input-disabled-color;
border-bottom: 2px solid $input-disabled-color;
}
}
/* Indeterminate checkbox */
[type="checkbox"]:indeterminate {
+ span:not(.lever):before {
top: -11px;
left: -12px;
width: 10px;
height: 22px;
border-top: none;
border-left: none;
border-right: $radio-border;
border-bottom: none;
transform: rotate(90deg);
backface-visibility: hidden;
transform-origin: 100% 100%;
}
// Disabled indeterminate
&:disabled + span:not(.lever):before {
border-right: 2px solid $input-disabled-color;
background-color: transparent;
}
}
// Filled in Style
[type="checkbox"].filled-in {
// General
+ span:not(.lever):after {
border-radius: 2px;
}
+ span:not(.lever):before,
+ span:not(.lever):after {
content: '';
left: 0;
position: absolute;
/* .1s delay is for check animation */
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
z-index: 1;
}
// Unchecked style
&:not(:checked) + span:not(.lever):before {
width: 0;
height: 0;
border: 3px solid transparent;
left: 6px;
top: 10px;
transform: rotateZ(37deg);
transform-origin: 100% 100%;
}
&:not(:checked) + span:not(.lever):after {
height: 20px;
width: 20px;
background-color: transparent;
border: 2px solid $radio-empty-color;
top: 0px;
z-index: 0;
}
// Checked style
&:checked {
+ span:not(.lever):before {
top: 0;
left: 1px;
width: 8px;
height: 13px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid $input-background;
border-bottom: 2px solid $input-background;
transform: rotateZ(37deg);
transform-origin: 100% 100%;
}
+ span:not(.lever):after {
top: 0;
width: 20px;
height: 20px;
border: 2px solid $secondary-color;
background-color: $secondary-color;
z-index: 0;
}
}
// Focused styles
&.tabbed:focus + span:not(.lever):after {
border-radius: 2px;
border-color: $radio-empty-color;
background-color: rgba(0,0,0,.1);
}
&.tabbed:checked:focus + span:not(.lever):after {
border-radius: 2px;
background-color: $secondary-color;
border-color: $secondary-color;
}
// Disabled style
&:disabled:not(:checked) + span:not(.lever):before {
background-color: transparent;
border: 2px solid transparent;
}
&:disabled:not(:checked) + span:not(.lever):after {
border-color: transparent;
background-color: $input-disabled-solid-color;
}
&:disabled:checked + span:not(.lever):before {
background-color: transparent;
}
&:disabled:checked + span:not(.lever):after {
background-color: $input-disabled-solid-color;
border-color: $input-disabled-solid-color;
}
}

44
app/static/external/materialize/sass/components/forms/_file-input.scss vendored Normal file
View File

@ -0,0 +1,44 @@
/* File Input
========================================================================== */
.file-field {
position: relative;
.file-path-wrapper {
overflow: hidden;
padding-left: 10px;
}
input.file-path { width: 100%; }
.btn {
float: left;
height: $input-height;
line-height: $input-height;
}
span {
cursor: pointer;
}
input[type=file] {
// Needed to override webkit button
&::-webkit-file-upload-button {
display: none;
}
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
}

22
app/static/external/materialize/sass/components/forms/_forms.scss vendored Normal file
View File

@ -0,0 +1,22 @@
// Remove Focus Boxes
select:focus {
outline: $select-focus;
}
button:focus {
outline: none;
background-color: $button-background-focus;
}
label {
font-size: $label-font-size;
color: $input-border-color;
}
@import 'input-fields';
@import 'radio-buttons';
@import 'checkboxes';
@import 'switches';
@import 'select';
@import 'file-input';
@import 'range';

354
app/static/external/materialize/sass/components/forms/_input-fields.scss vendored Normal file
View File

@ -0,0 +1,354 @@
/* Text Inputs + Textarea
========================================================================== */
/* Style Placeholders */
::placeholder {
color: $placeholder-text-color;
}
/* Text inputs */
input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
// General Styles
background-color: transparent;
border: none;
border-bottom: $input-border;
border-radius: 0;
outline: none;
height: $input-height;
width: 100%;
font-size: $input-font-size;
margin: $input-margin;
padding: $input-padding;
box-shadow: none;
box-sizing: content-box;
transition: box-shadow .3s, border .3s;
// Disabled input style
&:disabled,
&[readonly="readonly"] {
color: $input-disabled-color;
border-bottom: $input-disabled-border;
}
// Disabled label style
&:disabled+label,
&[readonly="readonly"]+label {
color: $input-disabled-color;
}
// Focused input style
&:focus:not([readonly]) {
border-bottom: 1px solid $input-focus-color;
box-shadow: 0 1px 0 0 $input-focus-color;
}
// Focused label style
&:focus:not([readonly])+label {
color: $input-focus-color;
}
// Hide helper text on data message
&.valid ~ .helper-text[data-success],
&:focus.valid ~ .helper-text[data-success],
&.invalid ~ .helper-text[data-error],
&:focus.invalid ~ .helper-text[data-error] {
@extend %hidden-text;
}
// Valid Input Style
&.valid,
&:focus.valid {
@extend %valid-input-style;
}
// Custom Success Message
&.valid ~ .helper-text:after,
&:focus.valid ~ .helper-text:after {
@extend %custom-success-message;
}
&:focus.valid ~ label {
color: $input-success-color;
}
// Invalid Input Style
&.invalid,
&:focus.invalid {
@extend %invalid-input-style;
}
// Custom Error message
&.invalid ~ .helper-text:after,
&:focus.invalid ~ .helper-text:after {
@extend %custom-error-message;
}
&:focus.invalid ~ label {
color: $input-error-color;
}
// Full width label when using validate for error messages
&.validate + label {
width: 100%;
}
// Form Message Shared Styles
& + label:after {
@extend %input-after-style;
}
}
/* Validation Sass Placeholders */
%valid-input-style {
border-bottom: 1px solid $input-success-color;
box-shadow: 0 1px 0 0 $input-success-color;
}
%invalid-input-style {
border-bottom: $input-invalid-border;
box-shadow: 0 1px 0 0 $input-error-color;
}
%hidden-text {
color: transparent;
user-select: none;
pointer-events: none;
}
%custom-success-message {
content: attr(data-success);
color: $input-success-color;
}
%custom-error-message {
content: attr(data-error);
color: $input-error-color;
}
%input-after-style {
display: block;
content: "";
position: absolute;
top: 100%;
left: 0;
opacity: 0;
transition: .2s opacity ease-out, .2s color ease-out;
}
// Styling for input field wrapper
.input-field {
// Inline styles
&.inline {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
input,
.select-dropdown {
margin-bottom: 1rem;
}
}
// Gutter spacing
&.col {
label {
left: $gutter-width / 2;
}
.prefix ~ label,
.prefix ~ .validate ~ label {
width: calc(100% - 3rem - #{$gutter-width});
}
}
position: relative;
margin-top: 1rem;
margin-bottom: 1rem;
& > label {
color: $input-border-color;
position: absolute;
top: 0;
left: 0;
font-size: 1rem;
cursor: text;
transition: transform .2s ease-out, color .2s ease-out;
transform-origin: 0% 100%;
text-align: initial;
transform: translateY(12px);
&:not(.label-icon).active {
transform: translateY(-14px) scale(.8);
transform-origin: 0 0;
}
}
// Autofill + date + time inputs
& > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
& > input[type=date]:not(.browser-default) + label,
& > input[type=time]:not(.browser-default) + label {
transform: translateY(-14px) scale(.8);
transform-origin: 0 0;
}
.helper-text {
&::after {
opacity: 1;
position: absolute;
top: 0;
left: 0;
}
position: relative;
min-height: 18px;
display: block;
font-size: 12px;
color: rgba(0,0,0,.54);
}
// Prefix Icons
.prefix {
position: absolute;
width: $input-height;
font-size: $input-icon-size;
transition: color .2s;
top: ($input-height - $input-icon-size) / 2;
&.active { color: $input-focus-color; }
}
.prefix ~ input,
.prefix ~ textarea,
.prefix ~ label,
.prefix ~ .validate ~ label,
.prefix ~ .helper-text,
.prefix ~ .autocomplete-content {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem);
}
.prefix ~ label { margin-left: 3rem; }
@media #{$medium-and-down} {
.prefix ~ input {
width: 86%;
width: calc(100% - 3rem);
}
}
@media #{$small-and-down} {
.prefix ~ input {
width: 80%;
width: calc(100% - 3rem);
}
}
}
/* Search Field */
.input-field input[type=search] {
display: block;
line-height: inherit;
transition: .3s background-color;
.nav-wrapper & {
height: inherit;
padding-left: 4rem;
width: calc(100% - 4rem);
border: 0;
box-shadow: none;
}
&:focus:not(.browser-default) {
background-color: $input-background;
border: 0;
box-shadow: none;
color: #444;
& + label i,
& ~ .mdi-navigation-close,
& ~ .material-icons {
color: #444;
}
}
& + .label-icon {
transform: none;
left: 1rem;
}
& ~ .mdi-navigation-close,
& ~ .material-icons {
position: absolute;
top: 0;
right: 1rem;
color: transparent;
cursor: pointer;
font-size: $input-icon-size;
transition: .3s color;
}
}
/* Textarea */
// Default textarea
textarea {
width: 100%;
height: $input-height;
background-color: transparent;
&.materialize-textarea {
line-height: normal;
overflow-y: hidden; /* prevents scroll bar flash */
padding: .8rem 0 .8rem 0; /* prevents text jump on Enter keypress */
resize: none;
min-height: $input-height;
box-sizing: border-box;
}
}
// For textarea autoresize
.hiddendiv {
visibility: hidden;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
padding-top: 1.2rem; /* prevents text jump on Enter keypress */
// Reduces repaints
position: absolute;
top: 0;
z-index: -1;
}
/* Autocomplete */
.autocomplete-content {
li {
.highlight { color: #444; }
img {
height: $dropdown-item-height - 10;
width: $dropdown-item-height - 10;
margin: 5px 15px;
}
}
}
/* Character Counter */
.character-counter {
min-height: 18px;
}

115
app/static/external/materialize/sass/components/forms/_radio-buttons.scss vendored Normal file
View File

@ -0,0 +1,115 @@
/* Radio Buttons
========================================================================== */
// Remove default Radio Buttons
[type="radio"]:not(:checked),
[type="radio"]:checked {
position: absolute;
opacity: 0;
pointer-events: none;
}
[type="radio"]:not(:checked) + span,
[type="radio"]:checked + span {
position: relative;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
font-size: 1rem;
transition: .28s ease;
user-select: none;
}
[type="radio"] + span:before,
[type="radio"] + span:after {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 4px;
width: 16px;
height: 16px;
z-index: 0;
transition: .28s ease;
}
/* Unchecked styles */
[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after,
[type="radio"]:checked + span:before,
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
border-radius: 50%;
}
[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after {
border: 2px solid $radio-empty-color;
}
[type="radio"]:not(:checked) + span:after {
transform: scale(0);
}
/* Checked styles */
[type="radio"]:checked + span:before {
border: 2px solid transparent;
}
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
border: $radio-border;
}
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
background-color: $radio-fill-color;
}
[type="radio"]:checked + span:after {
transform: scale(1.02);
}
/* Radio With gap */
[type="radio"].with-gap:checked + span:after {
transform: scale(.5);
}
/* Focused styles */
[type="radio"].tabbed:focus + span:before {
box-shadow: 0 0 0 10px rgba(0,0,0,.1);
}
/* Disabled Radio With gap */
[type="radio"].with-gap:disabled:checked + span:before {
border: 2px solid $input-disabled-color;
}
[type="radio"].with-gap:disabled:checked + span:after {
border: none;
background-color: $input-disabled-color;
}
/* Disabled style */
[type="radio"]:disabled:not(:checked) + span:before,
[type="radio"]:disabled:checked + span:before {
background-color: transparent;
border-color: $input-disabled-color;
}
[type="radio"]:disabled + span {
color: $input-disabled-color;
}
[type="radio"]:disabled:not(:checked) + span:before {
border-color: $input-disabled-color;
}
[type="radio"]:disabled:checked + span:after {
background-color: $input-disabled-color;
border-color: $input-disabled-solid-color;
}

161
app/static/external/materialize/sass/components/forms/_range.scss vendored Normal file
View File

@ -0,0 +1,161 @@
/* Range
========================================================================== */
.range-field {
position: relative;
}
input[type=range],
input[type=range] + .thumb {
@extend .no-select;
cursor: pointer;
}
input[type=range] {
position: relative;
background-color: transparent;
border: none;
outline: none;
width: 100%;
margin: 15px 0;
padding: 0;
&:focus {
outline: none;
}
}
input[type=range] + .thumb {
position: absolute;
top: 10px;
left: 0;
border: none;
height: 0;
width: 0;
border-radius: 50%;
background-color: $radio-fill-color;
margin-left: 7px;
transform-origin: 50% 50%;
transform: rotate(-45deg);
.value {
display: block;
width: 30px;
text-align: center;
color: $radio-fill-color;
font-size: 0;
transform: rotate(45deg);
}
&.active {
border-radius: 50% 50% 50% 0;
.value {
color: $input-background;
margin-left: -1px;
margin-top: 8px;
font-size: 10px;
}
}
}
// Shared
@mixin range-track {
height: $track-height;
background: #c2c0c2;
border: none;
}
@mixin range-thumb {
border: none;
height: $range-height;
width: $range-width;
border-radius: 50%;
background: $radio-fill-color;
transition: box-shadow .3s;
}
// WebKit
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
@include range-track;
}
input[type=range]::-webkit-slider-thumb {
@include range-thumb;
-webkit-appearance: none;
background-color: $radio-fill-color;
transform-origin: 50% 50%;
margin: -5px 0 0 0;
}
.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
}
// FireFox
input[type=range] {
/* fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
}
input[type=range]::-moz-range-track {
@include range-track;
}
input[type=range]::-moz-focus-inner {
border: 0;
}
input[type=range]::-moz-range-thumb {
@include range-thumb;
margin-top: -5px;
}
// hide the outline behind the border
input[type=range]:-moz-focusring {
outline: 1px solid #fff;
outline-offset: -1px;
}
.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
}
// IE 10+
input[type=range]::-ms-track {
height: $track-height;
// remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
background: transparent;
// leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
}
input[type=range]::-ms-thumb {
@include range-thumb;
}
.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
}

180
app/static/external/materialize/sass/components/forms/_select.scss vendored Normal file
View File

@ -0,0 +1,180 @@
/* Select Field
========================================================================== */
select { display: none; }
select.browser-default { display: block; }
select {
background-color: $select-background;
width: 100%;
padding: $select-padding;
border: $select-border;
border-radius: $select-radius;
height: $input-height;
}
.select-label {
position: absolute;
}
.select-wrapper {
&.valid .helper-text[data-success],
&.invalid ~ .helper-text[data-error] {
@extend %hidden-text;
}
&.valid {
& > input.select-dropdown {
@extend %valid-input-style;
}
& ~ .helper-text:after {
@extend %custom-success-message;
}
}
&.invalid {
& > input.select-dropdown,
& > input.select-dropdown:focus {
@extend %invalid-input-style;
}
& ~ .helper-text:after {
@extend %custom-error-message;
}
}
&.valid + label,
&.invalid + label {
width: 100%;
pointer-events: none;
}
& + label:after {
@extend %input-after-style;
}
position: relative;
input.select-dropdown {
&:focus {
border-bottom: 1px solid $input-focus-color;
}
position: relative;
cursor: pointer;
background-color: transparent;
border: none;
border-bottom: $input-border;
outline: none;
height: $input-height;
line-height: $input-height;
width: 100%;
font-size: $input-font-size;
margin: $input-margin;
padding: 0;
display: block;
user-select:none;
z-index: 1;
}
.caret {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto 0;
z-index: 0;
fill: rgba(0,0,0,.87);
}
& + label {
position: absolute;
top: -26px;
font-size: $label-font-size;
}
}
// Disabled styles
select:disabled {
color: $input-disabled-color;
}
.select-wrapper.disabled {
+ label {
color: $input-disabled-color;
}
.caret {
fill: $input-disabled-color;
}
}
.select-wrapper input.select-dropdown:disabled {
color: $input-disabled-color;
cursor: default;
user-select: none;
}
.select-wrapper i {
color: $select-disabled-color;
}
.select-dropdown li.disabled,
.select-dropdown li.disabled > span,
.select-dropdown li.optgroup {
color: $select-disabled-color;
background-color: transparent;
}
body.keyboard-focused {
.select-dropdown.dropdown-content li:focus {
background-color: $select-option-focus;
}
}
.select-dropdown.dropdown-content {
li {
&:hover {
background-color: $select-option-hover;
}
&.selected {
background-color: $select-option-selected;
}
}
}
// Prefix Icons
.prefix ~ .select-wrapper {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem);
}
.prefix ~ label { margin-left: 3rem; }
// Icons
.select-dropdown li {
img {
height: $dropdown-item-height - 10;
width: $dropdown-item-height - 10;
margin: 5px 15px;
float: right;
}
}
// Optgroup styles
.select-dropdown li.optgroup {
border-top: 1px solid $dropdown-hover-bg-color;
&.selected > span {
color: rgba(0, 0, 0, .7);
}
& > span {
color: rgba(0, 0, 0, .4);
}
& ~ li.optgroup-option {
padding-left: 1rem;
}
}

89
app/static/external/materialize/sass/components/forms/_switches.scss vendored Normal file
View File

@ -0,0 +1,89 @@
/* Switch
========================================================================== */
.switch,
.switch * {
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.switch label {
cursor: pointer;
}
.switch label input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
&:checked + .lever {
background-color: $switch-checked-lever-bg;
&:before, &:after {
left: 18px;
}
&:after {
background-color: $switch-bg-color;
}
}
}
.switch label .lever {
content: "";
display: inline-block;
position: relative;
width: 36px;
height: 14px;
background-color: $switch-unchecked-lever-bg;
border-radius: $switch-radius;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
margin: 0 16px;
&:before, &:after {
content: "";
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
left: 0;
top: -3px;
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
}
&:before {
background-color: transparentize($switch-bg-color, .85);
}
&:after {
background-color: $switch-unchecked-bg;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
}
// Switch active style
input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
transform: scale(2.4);
background-color: transparentize($switch-bg-color, .85);
}
input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
transform: scale(2.4);
background-color: rgba(0,0,0,.08);
}
// Disabled Styles
.switch input[type=checkbox][disabled] + .lever {
cursor: default;
background-color: rgba(0,0,0,.12);
}
.switch label input[type=checkbox][disabled] + .lever:after,
.switch label input[type=checkbox][disabled]:checked + .lever:after {
background-color: $input-disabled-solid-color;
}

41
app/static/external/materialize/sass/materialize.scss vendored Normal file
View File

@ -0,0 +1,41 @@
@charset "UTF-8";
// Color
@import "components/color-variables";
@import "components/color-classes";
// Variables;
@import "components/variables";
// Reset
@import "components/normalize";
// components
@import "components/global";
@import "components/badges";
@import "components/icons-material-design";
@import "components/grid";
@import "components/navbar";
@import "components/typography";
@import "components/transitions";
@import "components/cards";
@import "components/toast";
@import "components/tabs";
@import "components/tooltip";
@import "components/buttons";
@import "components/dropdown";
@import "components/waves";
@import "components/modal";
@import "components/collapsible";
@import "components/chips";
@import "components/materialbox";
@import "components/forms/forms";
@import "components/table_of_contents";
@import "components/sidenav";
@import "components/preloader";
@import "components/slider";
@import "components/carousel";
@import "components/tapTarget";
@import "components/pulse";
@import "components/datepicker";
@import "components/timepicker";

10
app/static/js/resource-displays/corpus-display.js
View File

@ -86,15 +86,7 @@ nopaque.resource_displays.CorpusDisplay = class CorpusDisplay extends nopaque.re
}
elements = this.displayElement.querySelectorAll('.corpus-status');
for (let element of elements) {
element.dataset.status = status;
}
elements = this.displayElement.querySelectorAll('.corpus-status-spinner');
for (let element of elements) {
if (['SUBMITTED', 'QUEUED', 'BUILDING', 'STARTING_ANALYSIS_SESSION', 'CANCELING_ANALYSIS_SESSION'].includes(status)) {
element.classList.remove('hide');
} else {
element.classList.add('hide');
}
element.dataset.corpusStatus = status;
}
}

10
app/static/js/resource-displays/job-display.js
View File

@ -61,15 +61,7 @@ nopaque.resource_displays.JobDisplay = class JobDisplay extends nopaque.resource
setStatus(status) {
let elements = this.displayElement.querySelectorAll('.job-status');
for (let element of elements) {
element.dataset.status = status;
}
elements = this.displayElement.querySelectorAll('.job-status-spinner');
for (let element of elements) {
if (['COMPLETED', 'FAILED'].includes(status)) {
element.classList.add('hide');
} else {
element.classList.remove('hide');
}
element.dataset.jobStatus = status;
}
elements = this.displayElement.querySelectorAll('.job-log-trigger');
for (let element of elements) {

4
app/static/js/resource-lists/corpus-file-list.js
View File

@ -41,8 +41,8 @@ nopaque.resource_lists.CorpusFileList = class CorpusFileList extends nopaque.res
<td><span class="publishing-year"></span></td>
<td class="right-align">
<a class="list-action-trigger btn-floating red waves-effect waves-light ${this.hasPermissionManageFiles ? '' : 'hide'}" data-list-action="delete"><i class="material-icons">delete</i></a>
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light ${this.hasPermissionView ? '' : 'hide'}" data-list-action="download" data-service="corpus-analysis"><i class="material-icons">file_download</i></a>
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light ${this.hasPermissionManageFiles ? '' : 'hide'}" data-list-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
<a class="list-action-trigger btn-floating waves-effect waves-light ${this.hasPermissionView ? '' : 'hide'}" data-list-action="download"><i class="material-icons">file_download</i></a>
<a class="list-action-trigger btn-floating waves-effect waves-light ${this.hasPermissionManageFiles ? '' : 'hide'}" data-list-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim();

18
app/static/js/resource-lists/corpus-list.js
View File

@ -60,19 +60,27 @@ nopaque.resource_lists.CorpusList = class CorpusList extends nopaque.resource_li
return (values) => {
return `
<tr class="list-item clickable hoverable">
<td class="hide">
<time class="creation-date"></span>
</td>
<td>
<label class="list-action-trigger" data-list-action="select">
<input class="select-checkbox" type="checkbox">
<span class="disable-on-click"></span>
</label>
</td>
<td><b class="title"></b><br><i class="description"></i></td>
<td><span class="owner"></span></td>
<td>
<b class="title"></b><br>
<i class="description"></i>
</td>
<td>
<span class="owner"></span>
</td>
<td><span class="status badge new corpus-status-color corpus-status-text" data-badge-caption=""></span></td>
<td>${values['current-user-is-following'] ? '<span><i class="left material-icons">visibility</i>Following</span>' : ''}</td>
<td class="right-align">
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light" data-list-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim();
@ -82,8 +90,8 @@ nopaque.resource_lists.CorpusList = class CorpusList extends nopaque.resource_li
get valueNames() {
return [
{data: ['id']},
{data: ['creation-date']},
{name: 'status', attr: 'data-status'},
{name: 'creation-date', attr: 'datetime'},
{name: 'status', attr: 'data-corpus-status'},
'description',
'title',
'owner',

8
app/static/js/resource-lists/job-list.js
View File

@ -25,16 +25,16 @@ nopaque.resource_lists.JobList = class JobList extends nopaque.resource_lists.Re
get item() {
return `
<tr class="list-item service-scheme clickable hoverable">
<tr class="list-item clickable hoverable">
<td>
<label class="list-action-trigger" data-list-action="select">
<input class="select-checkbox" type="checkbox">
<span class="disable-on-click"></span>
</label>
</td>
<td><a class="btn-floating"><i class="nopaque-icons service-icons" data-service="inherit"></i></a></td>
<td><a class="btn-floating service-color darken" data-service="inherit"><i class="nopaque-icons service-icons" data-service="inherit"></i></a></td>
<td><b class="title"></b><br><i class="description"></i></td>
<td><span class="badge new job-status-color job-status-text status" data-badge-caption=""></span></td>
<td><span class="status badge new job-status-color job-status-text" data-badge-caption=""></span></td>
<td class="right-align">
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
<a class="list-action-trigger btn-floating darken waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
@ -48,7 +48,7 @@ nopaque.resource_lists.JobList = class JobList extends nopaque.resource_lists.Re
{data: ['id']},
{data: ['creation-date']},
{data: ['service']},
{name: 'status', attr: 'data-status'},
{name: 'status', attr: 'data-job-status'},
'description',
'title'
];

12
app/static/nopaque-materialize.scss Normal file
View File

@ -0,0 +1,12 @@
@import "sass/abstracts/base-color-variables";
$primary-color: map-get($base-color-palette, "primary");
$primary-color-light: map-get($base-color-palette, "primary-light");
$primary-color-dark: map-get($base-color-palette, "primary-dark");
$secondary-color: map-get($base-color-palette, "secondary");
$success-color: map-get($base-color-palette, "success");
$error-color: map-get($base-color-palette, "error");
$link-color: map-get($base-color-palette, "link");
@import "external/materialize/sass/materialize";

10
app/static/sass/abstracts/_base-color-variables.scss Normal file
View File

@ -0,0 +1,10 @@
$base-color-palette: (
"primary": #00426f,
"primary-light": #006fbc, // primary lightened by 15%
"primary-dark": #001523, // primary darkened by 15%
// "secondary": #1a5c89,
"secondary": #00426f,
"success": #4caf50,
"error": #f44336,
"link": #039be5
);

10
app/static/sass/abstracts/_corpus-status-color-variables.scss Normal file
View File

@ -0,0 +1,10 @@
$corpus-status-color-palette: (
"UNPREPARED": #9e9e9e,
"QUEUED": #2196f3,
"BUILDING": #ffc107,
"BUILT": #4caf50,
"FAILED": #f44336,
"STARTING_ANALYSIS_SESSION": #2196f3,
"RUNNING_ANALYSIS_SESSION": #4caf50,
"CANCELING_ANALYSIS_SESSION": #ff5722
);

10
app/static/sass/abstracts/_job-status-color-variables.scss Normal file
View File

@ -0,0 +1,10 @@
$job-status-color-palette: (
"INITIALIZING": #9e9e9e,
"SUBMITTED": #9e9e9e,
"QUEUED": #2196f3,
"RUNNING": #ffc107,
"CANCELING": #ff5722,
"CANCELED": #ff5722,
"COMPLETED": #4caf50,
"FAILED": #f44336
);

25
app/static/sass/abstracts/_s-attr-color-variables.scss Normal file
View File

@ -0,0 +1,25 @@
$ent-type-color-palette: (
"PERSON": #a6e22d,
"PER": #a6e22d,
"NORP": #ef60b4,
"FACILITY": #43c6fc,
"ORG": #43c6fc,
"GPE": #fd9720,
"LOC": #fd9720,
"PRODUCT": #a99dfb,
"MISC": #a99dfb,
"EVENT": #fc0,
"WORK_OF_ART": #fc0,
"LANGUAGE": #fc0,
"DATE": #2fbbab,
"TIME": #2fbbab,
"PERCENT": #bbb,
"MONEY": #bbb,
"QUANTITY": #bbb,
"ORDINAL": #bbb,
"CARDINAL": #bbb
);
$s-attr-color-palettes: (
"ent_type": $ent-type-color-palette
);

38
app/static/sass/abstracts/_service-color-variables.scss Normal file
View File

@ -0,0 +1,38 @@
$file-setup-pipeline-color-palette: (
"base": #d5dc95,
"darken": #a1b300,
"lighten": #f2f3e1
);
$tesseract-ocr-pipeline-color-palette: (
"base": #a9d8c8,
"darken": #00a58b,
"lighten": #e7f4f1
);
$transkribus-htr-pipeline-color-palette: (
"base": #607d8b,
"darken": #37474f,
"lighten": #cfd8dc
);
$spacy-nlp-pipeline-color-palette: (
"base": #98acd2,
"darken": #0064a3,
"lighten": #e5e8f5
);
$corpus-analysis-color-palette: (
"base": #aa9cc9,
"darken": #6b3f89,
"lighten": #ebe8f6
);
$service-color-palettes: (
"file-setup-pipeline": $file-setup-pipeline-color-palette,
"tesseract-ocr-pipeline": $tesseract-ocr-pipeline-color-palette,
"transkribus-htr-pipeline": $transkribus-htr-pipeline-color-palette,
"spacy-nlp-pipeline": $spacy-nlp-pipeline-color-palette,
"corpus-analysis": $corpus-analysis-color-palette
);

7
app/static/sass/abstracts/_service-icon-variables.scss Normal file
View File

@ -0,0 +1,7 @@
$service-icon-letters: (
"file-setup-pipeline": "E",
"tesseract-ocr-pipeline": "F",
"transkribus-htr-pipeline": "F",
"spacy-nlp-pipeline": "G",
"corpus-analysis": "H"
);

22
app/static/sass/abstracts/_spacing-variables.scss Normal file
View File

@ -0,0 +1,22 @@
$spacing-shortcuts: (
"margin": "m",
"padding": "p"
);
$spacing-directions: (
"top": "t",
"right": "r",
"bottom": "b",
"left": "l"
);
$spacing-values: (
"0": 0,
"1": 0.25rem,
"2": 0.5rem,
"3": 0.75rem,
"4": 1rem,
"5": 1.5rem,
"6": 3rem,
"auto": auto
);

84
app/static/sass/components/_base-colors.scss Normal file
View File

@ -0,0 +1,84 @@
.primary-color {
background-color: map-get($base-color-palette, "primary") !important;
}
.primary-color-border {
border-color: map-get($base-color-palette, "primary") !important;
}
.primary-color-text {
color: map-get($base-color-palette, "primary") !important;
}
.primary-color.lighten {
background-color: map-get($base-color-palette, "primary-light") !important;
}
.primary-color-border.border-lighten {
border-color: map-get($base-color-palette, "primary-light") !important;
}
.primary-color-text.text-lighten {
color: map-get($base-color-palette, "primary-light") !important;
}
.primary-color.darken {
background-color: map-get($base-color-palette, "primary-dark") !important;
}
.primary-color-border.border-darken {
border-color: map-get($base-color-palette, "primary-dark") !important;
}
.primary-color-text.text-darken {
color: map-get($base-color-palette, "primary-dark") !important;
}
.secondary-color {
background-color: map-get($base-color-palette, "secondary") !important;
}
.secondary-color-border {
border-color: map-get($base-color-palette, "secondary") !important;
}
.secondary-color-text {
color: map-get($base-color-palette, "secondary") !important;
}
.success-color {
background-color: map-get($base-color-palette, "success") !important;
}
.success-color-border {
border-color: map-get($base-color-palette, "success") !important;
}
.success-color-text {
color: map-get($base-color-palette, "success") !important;
}
.error-color {
background-color: map-get($base-color-palette, "error") !important;
}
.error-color-border {
border-color: map-get($base-color-palette, "error") !important;
}
.error-color-text {
color: map-get($base-color-palette, "error") !important;
}
.link-color {
background-color: map-get($base-color-palette, "link") !important;
}
.link-color-border {
border-color: map-get($base-color-palette, "link") !important;
}
.link-color-text {
color: map-get($base-color-palette, "link") !important;
}

5
app/static/sass/components/_clearfix.scss Normal file
View File

@ -0,0 +1,5 @@
.clearfix::after {
clear: both;
content: "";
display: block;
}

13
app/static/sass/components/_corpus-status-color.scss Normal file
View File

@ -0,0 +1,13 @@
@each $corpus-status, $corpus-status-color in $corpus-status-color-palette {
.corpus-status-color[data-corpus-status="#{$corpus-status}"] {
background-color: $corpus-status-color !important;
}
.corpus-status-color-border[data-corpus-status="#{$corpus-status}"] {
border-color: $corpus-status-color !important;
}
.corpus-status-color-text[data-corpus-status="#{$corpus-status}"] {
color: $corpus-status-color !important;
}
}

11
app/static/sass/components/_helpers.scss Normal file
View File

@ -0,0 +1,11 @@
.clickable {
cursor: pointer !important;
}
.show-if-only-child:not(:only-child) {
display: none !important;
}
[draggable="true"] {
cursor: move !important;
}

13
app/static/sass/components/_job-status-color.scss Normal file
View File

@ -0,0 +1,13 @@
@each $job-status, $job-status-color in $job-status-color-palette {
.job-status-color[data-job-status="#{$job-status}"] {
background-color: $job-status-color !important;
}
.job-status-color-border[data-job-status="#{$job-status}"] {
border-color: $job-status-color !important;
}
.job-status-color-text[data-job-status="#{$job-status}"] {
color: $job-status-color !important;
}
}

4
app/static/sass/components/_placeholder.scss Normal file
View File

@ -0,0 +1,4 @@
::placeholder {
color: #9e9e9e;
opacity: 1;
}

19
app/static/sass/components/_s-attr-color.scss Normal file
View File

@ -0,0 +1,19 @@
@each $s-attr, $s-attr-color-palette in $s-attr-color-palettes {
@each $s-attr-value, $s-attr-value-color in $s-attr-color-palette {
.s-attr-color[data-s-attr="#{$s-attr}"][data-s-attr-value="#{$s-attr-value}"] {
background-color: $s-attr-value-color !important;
}
.s-attr-color-text[data-s-attr="#{$s-attr}"][data-s-attr-value="#{$s-attr-value}"] {
background-color: $s-attr-value-color !important;
}
.s-attr-color-border[data-s-attr="#{$s-attr}"][data-s-attr-value="#{$s-attr-value}"] {
background-color: $s-attr-value-color !important;
}
}
}
.s-attr .p-attr {
background-color: inherit;
}

40
app/static/sass/components/_service-color.scss Normal file
View File

@ -0,0 +1,40 @@
@each $service, $color-palette in $service-color-palettes {
.service-color[data-service="#{$service}"],
[data-service="#{$service}"] .service-color[data-service="inherit"] {
background-color: map-get($color-palette, "base") !important;
&.darken {
background-color: map-get($color-palette, "darken") !important;
}
&.lighten {
background-color: map-get($color-palette, "lighten") !important;
}
}
.service-color-border[data-service="#{$service}"],
[data-service="#{$service}"] .service-color-border[data-service="inherit"] {
border-color: map-get($color-palette, "base") !important;
&.border-darken {
border-color: map-get($color-palette, "darken") !important;
}
&.border-lighten {
border-color: map-get($color-palette, "lighten") !important;
}
}
.service-color-text[data-service="#{$service}"],
[data-service="#{$service}"] .service-color-text[data-service="inherit"] {
color: map-get($color-palette, "base") !important;
&.text-darken {
color: map-get($color-palette, "darken") !important;
}
&.text-lighten {
color: map-get($color-palette, "lighten") !important;
}
}
}

6
app/static/sass/components/_service-icon.scss Normal file
View File

@ -0,0 +1,6 @@
@each $service, $letter in $service-icon-letters {
.nopaque-icons.service-icons[data-service="#{$service}"]:empty::before,
[data-service="#{$service}"] .nopaque-icons.service-icons[data-service="inherit"]:empty::before {
content: "#{$letter}";
}
}

10
app/static/css/helpers.scss → app/static/sass/components/_spacing.scss
View File

@ -1,26 +1,22 @@
/*
* Spacing
*/
$spacing-shortcuts: ("margin": "m", "padding": "p");
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l");
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto);
@each $spacing-shortcut-name, $spacing-shortcut-value in $spacing-shortcuts {
@each $spacing-name, $spacing-value in $spacing-values {
// All directions
.#{$spacing-shortcut-value}-#{$spacing-name} {
#{$spacing-shortcut-name}: $spacing-value !important;
}
// Horizontal axis
.#{$spacing-shortcut-value}x-#{$spacing-name} {
#{$spacing-shortcut-name}-left: $spacing-value !important;
#{$spacing-shortcut-name}-right: $spacing-value !important;
}
// Vertical axis
.#{$spacing-shortcut-value}y-#{$spacing-name} {
#{$spacing-shortcut-name}-top: $spacing-value !important;
#{$spacing-shortcut-name}-bottom: $spacing-value !important;
}
// Cardinal directions
@each $spacing-direction-name, $spacing-direction-value in $spacing-directions {
.#{$spacing-shortcut-value}#{$spacing-direction-value}-#{$spacing-name} {

9
app/static/sass/components/_status-spinner.scss Normal file
View File

@ -0,0 +1,9 @@
/*
* changes preoloader size etc. to fit visually better with the chip status
* indicator of jobs
*/
.status-spinner {
margin-bottom: -10px;
width: 30px !important;
height: 30px !important;
}

12
app/static/sass/components/_status-text.scss Normal file
View File

@ -0,0 +1,12 @@
.corpus-status-text,
.job-status-text {
text-transform: lowercase;
}
.corpus-status-text[data-corpus-status]:empty::before {
content: attr(data-corpus-status);
}
.job-status-text[data-job-status]:empty::before {
content: attr(data-job-status);
}

0
app/static/css/materialize/sidenav-fixed.css → app/static/sass/layout/_sidenav-fixed.scss
View File

0
app/static/css/materialize/sticky-footer.css → app/static/sass/layout/_sticky-footer.scss
View File

28
app/static/sass/main.scss Normal file
View File

@ -0,0 +1,28 @@
// Abstracts
@import "abstracts/base-color-variables";
@import "abstracts/corpus-status-color-variables";
@import "abstracts/job-status-color-variables";
@import "abstracts/s-attr-color-variables";
@import "abstracts/service-color-variables";
@import "abstracts/service-icon-variables";
@import "abstracts/spacing-variables";
// Components
@import "components/base-colors";
@import "components/clearfix";
@import "components/corpus-status-color";
@import "components/helpers.scss";
@import "components/job-status-color";
@import "components/placeholder";
@import "components/s-attr-color";
@import "components/service-color";
@import "components/service-icon";
@import "components/spacing";
@import "components/status-spinner";
@import "components/status-text";
// Layout
@import "layout/sticky-footer";
/// Pages
/// Site specific styles are be imported with Jinja in HTML

1
app/static/sass/pages/corpora/analysis.scss Normal file
View File

@ -0,0 +1 @@
@import "analysis/query-builder";

0
app/static/css/queryBuilder.css → app/static/sass/pages/corpora/analysis/_query-builder.scss
View File

4
app/static/sass/pages/corpora/corpus.scss Normal file
View File

@ -0,0 +1,4 @@
#invite-user-modal-search .dropdown-content {
width: 100% !important;
left: 0 !important;
}

1
app/static/sass/sidenav-fixed.scss Normal file
View File

@ -0,0 +1 @@
@import "layout/sidenav-fixed";

8
app/templates/_base/footer.html.j2
View File

@ -21,7 +21,7 @@
</div>
</div>
</div>
<div class="footer-copyright primary-color">
<div class="footer-copyright">
<div class="container">
<div class="row" style="margin-bottom: 0;">
<div class="col s12 m3">
@ -31,9 +31,9 @@
<span class="right"><b>Version {{ config.NOPAQUE_VERSION }}</b></span>
</div>
<div class="col s12 m7 right-align">
<a class="btn-small primary-variant-color waves-effect waves-light" href="{{ url_for('main.faq') }}"><i class="left material-icons">info_outline</i>Frequently Asked Questions</a>
<a class="btn-small primary-variant-color waves-effect waves-light" href="mailto:{{ config.NOPAQUE_SERVICE_DESK }}"><i class="left material-icons">mail</i>Report an issue</a>
<a class="btn-small primary-variant-color waves-effect waves-light" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque" target="_blank"><i class="left material-icons">code</i>GitLab</a>
<a class="btn-small waves-effect waves-light" href="{{ url_for('main.faq') }}"><i class="left material-icons">info_outline</i>Frequently Asked Questions</a>
<a class="btn-small waves-effect waves-light" href="mailto:{{ config.NOPAQUE_SERVICE_DESK }}"><i class="left material-icons">mail</i>Report an issue</a>
<a class="btn-small waves-effect waves-light" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque" target="_blank"><i class="left material-icons">code</i>GitLab</a>
</div>
</div>
</div>

10
app/templates/_base/sidenav.html.j2
View File

@ -39,21 +39,21 @@
{# processes & services items #}
<li><div class="divider"></div></li>
<li><a class="subheader">Processes & Services</a></li>
<li class="service-color service-color-border border-darken" data-service="file-setup-pipeline" style="border-left: 10px solid; margin-top: 5px;">
<li class="service-color service-color-border border-darken" data-service="file-setup-pipeline" style="border-left: 10px solid;">
<a class="waves-effect" href="{{ url_for('services.file_setup_pipeline') }}"><i class="nopaque-icons service-icons" data-service="file-setup-pipeline"></i>File setup</a>
</li>
<li class="service-color service-color-border border-darken" data-service="tesseract-ocr-pipeline" style="border-left: 10px solid; margin-top: 5px;">
<li class="service-color service-color-border border-darken mt-1" data-service="tesseract-ocr-pipeline" style="border-left: 10px solid;">
<a class="waves-effect" href="{{ url_for('services.tesseract_ocr_pipeline') }}"><i class="nopaque-icons service-icons" data-service="tesseract-ocr-pipeline"></i>OCR</a>
</li>
{% if config.NOPAQUE_TRANSKRIBUS_ENABLED %}
<li class="service-color service-color-border border-darken" data-service="transkribus-htr-pipeline" style="border-left: 10px solid; margin-top: 5px;">
<li class="service-color service-color-border border-darken mt-1" data-service="transkribus-htr-pipeline" style="border-left: 10px solid;">
<a class="waves-effect" href="{{ url_for('services.transkribus_htr_pipeline') }}"><i class="nopaque-icons service-icons" data-service="transkribus-htr-pipeline"></i>HTR</a>
</li>
{% endif %}
<li class="service-color service-color-border border-darken" data-service="spacy-nlp-pipeline" style="border-left: 10px solid; margin-top: 5px;">
<li class="service-color service-color-border border-darken mt-1" data-service="spacy-nlp-pipeline" style="border-left: 10px solid;">
<a class="waves-effect" href="{{ url_for('services.spacy_nlp_pipeline') }}"><i class="nopaque-icons service-icons" data-service="spacy-nlp-pipeline"></i>NLP</a>
</li>
<li class="service-color service-color-border border-darken" data-service="corpus-analysis" style="border-left: 10px solid; margin-top: 5px;">
<li class="service-color service-color-border border-darken mt-1" data-service="corpus-analysis" style="border-left: 10px solid;">
<a class="waves-effect" href="{{ url_for('services.corpus_analysis') }}"><i class="nopaque-icons service-icons" data-service="corpus-analysis"></i>Corpus Analysis</a>
</li>

32
app/templates/_base/stylesheets.html.j2
View File

@ -1,18 +1,26 @@
<link href="{{ url_for('static', filename='external/material-design-icons/css/material-icons.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='external/materialize/css/materialize.min.css') }}" rel="stylesheet">
{% if current_user.is_authenticated -%}
<link href="{{ url_for('static', filename='css/materialize/sidenav-fixed.css') }}" rel="stylesheet">
{% endif -%}
<link href="{{ url_for('static', filename='css/materialize/sticky-footer.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/materialize/fixes.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='nopaque-icons/css/nopaque-icons.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/queryBuilder.css') }}" rel="stylesheet">
{# <link href="{{ url_for('static', filename='external/materialize/css/materialize.min.css') }}" rel="stylesheet"> #}
{% assets
filters='pyscss',
output='gen/app.%(version)s.css',
'css/colors.scss',
'css/helpers.scss',
'css/style.css'
output='gen/nopaque-materialize.%(version)s.css',
'nopaque-materialize.scss'
-%}
<link href="{{ ASSET_URL }}" rel="stylesheet">
{% endassets -%}
{% if current_user.is_authenticated -%}
{% assets
filters='pyscss',
output='gen/sidenav-fixed.%(version)s.css',
'sass/sidenav-fixed.scss'
-%}
<link href="{{ ASSET_URL }}" rel="stylesheet">
{% endassets -%}
{% endif -%}
<link href="{{ url_for('static', filename='nopaque-icons/css/nopaque-icons.css') }}" rel="stylesheet">
{% assets
filters='pyscss',
output='gen/nopaque.%(version)s.css',
'sass/main.scss'
-%}
<link href="{{ ASSET_URL }}" rel="stylesheet">
{% endassets -%}

8
app/templates/base.html.j2
View File

@ -40,13 +40,13 @@
{% endif %}
<nav {% block navbar_attribs %}{% if navbar_extended %}class="nav-extended"{% endif %}{% endblock navbar_attribs %}>
{% block navbar %}
<div {% block navbar_primary_content_attribs %}class="nav-wrapper primary-color"{% endblock navbar_primary_content_attribs %}>
<div {% block navbar_primary_content_attribs %}class="nav-wrapper"{% endblock navbar_primary_content_attribs %}>
{% block navbar_primary_content %}
{% include "_base/navbar_primary_content.html.j2" %}
{% endblock navbar_primary_content %}
</div>
{% if navbar_extended %}
<div {% block navbar_secondary_content_attribs %}class="nav-content primary-variant-color"{% endblock navbar_secondary_content_attribs %}>
<div {% block navbar_secondary_content_attribs %}class="nav-content"{% endblock navbar_secondary_content_attribs %}>
{% block navbar_secondary_content %}
{% endblock navbar_secondary_content %}
</div>
@ -64,7 +64,7 @@
{% endblock header %}
</header>
<main {% block main_attribs %}class="background-color"{% endblock main_attribs %}>
<main {% block main_attribs %}{% endblock main_attribs %}>
{% block main %}
{% block page_content %}{% endblock page_content %}
{% endblock main %}
@ -82,7 +82,7 @@
</div>
</main>
<footer {% block footer_attribs %}class="page-footer primary-variant-color"{% endblock footer_attribs %}>
<footer {% block footer_attribs %}class="page-footer"{% endblock footer_attribs %}>
{% block footer %}
{% include "_base/footer.html.j2" %}
{% endblock footer %}

44
app/templates/corpora/analysis.html.j2
View File

@ -5,22 +5,40 @@
{% import 'corpora/_analysis/static_visualization.html.j2' as static_visualization_extension %}
{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-container"{% endblock main_attribs %}
{% set navbar_extended = true %}
{% block stylesheets %}
{{ super() }}
{% assets
filters='pyscss',
output='gen/pages/corpora/analysis.%(version)s.css',
'sass/pages/corpora/analysis.scss'
-%}
<link href="{{ ASSET_URL }}" rel="stylesheet">
{% endassets -%}
{% endblock stylesheets %}
{% block navbar_secondary_content %}
<ul class="tabs tabs-transparent no-autoinit" id="corpus-analysis-extension-tabs">
<li class="tab">
<a class="active" href="#corpus-analysis-home-container"><i class="nopaque-icons service-icons left" data-service="corpus-analysis" style="line-height: inherit;"></i>Corpus analysis</a>
</li>
<li class="tab">
<a href="#corpus-analysis-concordance-container"><i class="material-icons left" style="line-height: inherit;">{{ concordance_extension.icon }}</i>{{ concordance_extension.name }}</a>
</li>
<li class="tab">
<a href="#corpus-analysis-reader-container"><i class="material-icons left" style="line-height: inherit;">{{ reader_extension.icon }}</i>{{ reader_extension.name }}</a>
</li>
</ul>
{% endblock navbar_secondary_content %}
{% block main_attribs %} class="service-color lighten" data-service="corpus-analysis" id="corpus-analysis-container" style="margin-top: 48px;"{% endblock main_attribs %}
{% block page_content %}
<ul class="row tabs no-autoinit" id="corpus-analysis-extension-tabs">
<li class="tab col s3">
<a class="active" href="#corpus-analysis-home-container"><i class="nopaque-icons service-icons left" data-service="corpus-analysis"></i>Corpus analysis</a>
</li>
<li class="tab col s3">
<a href="#corpus-analysis-concordance-container"><i class="material-icons left">{{ concordance_extension.icon }}</i>{{ concordance_extension.name }}</a>
</li>
<li class="tab col s3">
<a href="#corpus-analysis-reader-container"><i class="material-icons left">{{ reader_extension.icon }}</i>{{ reader_extension.name }}</a>
</li>
</ul>
<div id="corpus-analysis-home-container">
<h1>{{ title }}</h1>

28
app/templates/corpora/corpus.html.j2
View File

@ -1,7 +1,20 @@
{% extends "base.html.j2" %}
{% import "wtf.html.j2" as wtf %}
{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
{% block stylesheets %}
{{ super() }}
{% assets
filters='pyscss',
output='gen/pages/corpora/corpus.%(version)s.css',
'sass/pages/corpora/corpus.scss'
-%}
<link href="{{ ASSET_URL }}" rel="stylesheet">
{% endassets -%}
{% endblock stylesheets %}
{% block main_attribs %} class="service-color lighten" data-service="corpus-analysis"{% endblock main_attribs %}
{% block page_content %}
<div class="container">
@ -14,19 +27,6 @@
<div class="card service-color-border border-darken" data-service="corpus-analysis" style="border-top: 10px solid">
<div class="card-content">
<span class="chip corpus-status corpus-status-color corpus-status-text white-text"></span>
<div class="active preloader-wrapper small corpus-status-spinner">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="input-field">

2
app/templates/corpora/public_corpus.html.j2
View File

@ -15,7 +15,7 @@
{% if corpus.status.name in ['SUBMITTED', 'QUEUED', 'BUILDING'] %}
<a class="btn-floating btn-small waves-effect waves-light" id="refresh-button"><i class="material-icons">refresh</i></a>
{% endif %}
<span class="chip corpus-status-text corpus-status-color white-text" data-status="{{ corpus.status.name }}"></span>
<span class="chip corpus-status-text corpus-status-color white-text" data-corpus-status="{{ corpus.status.name }}"></span>
<div class="row">
<div class="col s12">

13
app/templates/jobs/job.html.j2
View File

@ -14,19 +14,6 @@
<p>&nbsp;</p>
<p>&nbsp;</p>
<span class="chip job-status job-status-text job-status-color white-text"></span>
<div class="active preloader-wrapper small job-status-spinner">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>

62
app/templates/main/index.html.j2
View File

@ -20,22 +20,22 @@
<div class="col s12">
<div class="row">
<div class="col s12 m6 l3 center-align">
<i class="large nopaque-icons secondary-color-text">A</i><br>
<i class="large nopaque-icons primary-color-text">A</i><br>
<b class="primary-color-text">Speeds up your work</b>
<p class="light">All tools provided by nopaque are carefully selected to provide a complete tool suite without being held up by compatibility issues.</p>
</div>
<div class="col s12 m6 l3 center-align">
<i class="large nopaque-icons secondary-color-text">B</i><br>
<i class="large nopaque-icons primary-color-text">B</i><br>
<b class="primary-color-text">Cloud infrastructure</b>
<p class="light">All computational work is processed within nopaque’s cloud infrastructure. You don't need to install any software. Great, right?</p>
</div>
<div class="col s12 m6 l3 center-align">
<i class="large nopaque-icons secondary-color-text">C</i><br>
<i class="large nopaque-icons primary-color-text">C</i><br>
<b class="primary-color-text">User friendly</b>
<p class="light">You can start right away without having to read mile-long manuals. All services come with default settings that make it easy for you to just get going. Also great, right?</p>
</div>
<div class="col s12 m6 l3 center-align">
<i class="large nopaque-icons secondary-color-text">D</i><br>
<i class="large nopaque-icons primary-color-text">D</i><br>
<b class="primary-color-text">Meshing processes</b>
<p class="light">No matter where you step in, nopaque facilitates and accompanies your research. Its workflow perfectly ties in with your research process.</p>
</div>
@ -74,48 +74,40 @@
<div class="col s12">
<div class="row">
<div class="col s12 m6 l3 center-align">
<p>&nbsp;</p>
<a href="{{ url_for('services.file_setup_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service-color darken service-icons" data-service="file-setup-pipeline"></i>
</a>
<br><br>
<p class="service-color-text text-darken" data-service="file-setup-pipeline"><b>File setup</b></p>
<a href="{{ url_for('services.file_setup_pipeline') }}">
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="file-setup-pipeline"></i>
</a><br>
<b class="service-color-text text-darken" data-service="file-setup-pipeline">File setup</b>
<p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing and the application of other services.</p>
</div>
<div class="col s12 m6 l3 center-align">
<p>&nbsp;</p>
<a href="{{ url_for('services.tesseract_ocr_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service-color darken service-icons" data-service="tesseract-ocr-pipeline"></i>
</a>
<br><br>
<p class="service-color-text text-darken" data-service="tesseract-ocr-pipeline"><b>Optical Character Recognition</b></p>
<a href="{{ url_for('services.tesseract_ocr_pipeline') }}">
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="tesseract-ocr-pipeline"></i>
</a><br>
<b class="service-color-text text-darken" data-service="tesseract-ocr-pipeline">Optical Character Recognition</b>
<p class="light">nopaque converts your image data – like photos or scans – into text data through OCR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
</div>
{% if config.NOPAQUE_TRANSKRIBUS_ENABLED %}
<div class="col s12 m6 l3 center-align">
<p>&nbsp;</p>
<a href="{{ url_for('services.transkribus_htr_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service-color darken service-icons" data-service="transkribus-htr-pipeline"></i>
</a>
<br><br>
<p class="service-color-text text-darken" data-service="transkribus-htr-pipeline"><b>Transkribus HTR Pipeline</b></p>
<a href="{{ url_for('services.transkribus_htr_pipeline') }}">
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="transkribus-htr-pipeline"></i>
</a><br>
<b class="service-color-text text-darken" data-service="transkribus-htr-pipeline">Transkribus HTR Pipeline</b>
<p class="light">nopaque converts your image data – like photos or scans – into text data through HTR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
</div>
{% endif %}
<div class="col s12 m6 l3 center-align">
<p>&nbsp;</p>
<a href="{{ url_for('services.spacy_nlp_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service-color darken service-icons" data-service="spacy-nlp-pipeline"></i>
</a>
<br><br>
<p class="service-color-text text-darken" data-service="spacy-nlp-pipeline"><b>Natural Language Processing</b></p>
<a href="{{ url_for('services.spacy_nlp_pipeline') }}">
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="spacy-nlp-pipeline"></i>
</a><br>
<b class="service-color-text text-darken" data-service="spacy-nlp-pipeline">Natural Language Processing</b>
<p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
</div>
<div class="col s12 m6 l3 center-align">
<p>&nbsp;</p>
<a href="{{ url_for('services.corpus_analysis') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service-color darken service-icons" data-service="corpus-analysis"></i>
</a>
<br><br>
<p class="service-color-text text-darken" data-service="corpus-analysis"><b>Corpus analysis</b></p>
<a href="{{ url_for('services.corpus_analysis') }}">
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="corpus-analysis"></i>
</a><br>
<b class="service-color-text text-darken" data-service="corpus-analysis">Corpus analysis</b>
<p class="light">nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags.</p>
</div>
</div>
@ -161,7 +153,7 @@
{{ form.hidden_tag() }}
{{ wtf.render_field(form.user, material_icon='person') }}
{{ wtf.render_field(form.password, material_icon='vpn_key') }}
<div class="row" style="margin-bottom: 0;">
<div class="row mb-0">
<div class="col s6 left-align">
<a href="{{ url_for('auth.reset_password_request') }}">Forgot your password?</a>
</div>

6
app/templates/services/corpus_analysis.html.j2
View File

@ -1,6 +1,6 @@
{% extends "base.html.j2" %}
{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
{% block main_attribs %}class="service-color lighten" data-service="corpus-analysis"{% endblock main_attribs %}
{% block page_content %}
<div class="container">
@ -11,9 +11,7 @@
<div class="col s12 m3 push-m9">
<div class="center-align">
<a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service-color darken service-icons" data-service="corpus-analysis"></i>
</a>
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="corpus-analysis"></i>
</div>
</div>

8
app/templates/services/file_setup_pipeline.html.j2
View File

@ -1,7 +1,7 @@
{% extends "base.html.j2" %}
{% import "wtf.html.j2" as wtf %}
{% block main_attribs %} class="service-scheme" data-service="file-setup-pipeline"{% endblock main_attribs %}
{% block main_attribs %}class="service-color lighten" data-service="file-setup-pipeline"{% endblock main_attribs %}
{% block page_content %}
<div class="container">
@ -14,9 +14,7 @@
<div class="center-align">
<p class="hide-on-small-only">&nbsp;</p>
<p class="hide-on-small-only">&nbsp;</p>
<a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service-color darken service-icons" data-service="file-setup-pipeline"></i>
</a>
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="file-setup-pipeline"></i>
</div>
</div>
@ -49,7 +47,7 @@
{{ wtf.render_field(form.description, material_icon='description') }}
</div>
<div class="col s12 l9">
{{ wtf.render_field(form.images, accept='image/jpeg, image/png, image/tiff', placeholder='Choose JPEG, PNG or TIFF files') }}
{{ wtf.render_field(form.images, accept='image/jpeg, image/png, image/tiff', class_='file-setup-pipeline-color darken', placeholder='Choose JPEG, PNG or TIFF files') }}
</div>
<div class="col s12 l3">
{{ wtf.render_field(form.version, material_icon='apps') }}

10
app/templates/services/spacy_nlp_pipeline.html.j2
View File

@ -1,7 +1,7 @@
{% extends "base.html.j2" %}
{% import "wtf.html.j2" as wtf %}
{% block main_attribs %} class="service-scheme" data-service="spacy-nlp-pipeline"{% endblock main_attribs %}
{% block main_attribs %}class="service-color lighten" data-service="spacy-nlp-pipeline"{% endblock main_attribs %}
{% block page_content %}
<div class="container">
@ -14,9 +14,7 @@
<div class="center-align">
<p class="hide-on-small-only">&nbsp;</p>
<p class="hide-on-small-only">&nbsp;</p>
<a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service-color darken service-icons" data-service="spacy-nlp-pipeline"></i>
</a>
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="spacy-nlp-pipeline"></i>
</div>
</div>
@ -75,8 +73,8 @@
{{ form.model() }}
{{ form.model.label }}
<span class="helper-text">
<a class="modal-trigger tooltipped" href="#models-modal" data-position="bottom" data-tooltip="See more information about models"><i class="material-icons" style="color:#0064A3;">help_outline</i></a>
<a class="tooltipped" href="{{ url_for('contributions.create_spacy_nlp_pipeline_model') }}" data-position="bottom" data-tooltip="Add your own spaCy NLP models"><i class="material-icons" style="color:#0064A3">new_label</i></a>
<a class="modal-trigger tooltipped" href="#models-modal" data-position="bottom" data-tooltip="See more information about models"><i class="material-icons">help_outline</i></a>
<a class="tooltipped" href="{{ url_for('contributions.create_spacy_nlp_pipeline_model') }}" data-position="bottom" data-tooltip="Add your own spaCy NLP models"><i class="material-icons">new_label</i></a>
</span>
</div>
</div>

10
app/templates/services/tesseract_ocr_pipeline.html.j2
View File

@ -1,7 +1,7 @@
{% extends "base.html.j2" %}
{% import "wtf.html.j2" as wtf %}
{% block main_attribs %} class="service-scheme" data-service="tesseract-ocr-pipeline"{% endblock main_attribs %}
{% block main_attribs %}class="service-color lighten" data-service="tesseract-ocr-pipeline"{% endblock main_attribs %}
{% block page_content %}
<div class="container">
@ -14,9 +14,7 @@
<div class="center-align">
<p class="hide-on-small-only">&nbsp;</p>
<p class="hide-on-small-only">&nbsp;</p>
<a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service-color darken service-icons" data-service="tesseract-ocr-pipeline"></i>
</a>
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="tesseract-ocr-pipeline"></i>
</div>
</div>
@ -57,8 +55,8 @@
{{ form.model() }}
{{ form.model.label }}
<span class="helper-text">
<a class="modal-trigger tooltipped" href="#models-modal" data-position="bottom" data-tooltip="See more information about models"><i class="material-icons" style="color:#00A58B;">help_outline</i></a>
<a class="tooltipped" href="{{ url_for('contributions.create_tesseract_ocr_pipeline_model') }}" data-position="bottom" data-tooltip="Add your own Tesseract OCR models"><i class="material-icons" style="color:#00A58B">new_label</i></a>
<a class="modal-trigger tooltipped" href="#models-modal" data-position="bottom" data-tooltip="See more information about models"><i class="material-icons">help_outline</i></a>
<a class="tooltipped" href="{{ url_for('contributions.create_tesseract_ocr_pipeline_model') }}" data-position="bottom" data-tooltip="Add your own Tesseract OCR models"><i class="material-icons">new_label</i></a>
</span>
{% for error in form.model.errors %}
<span class="helper-text error-color-text">{{ error }}</span>

6
app/templates/services/transkribus_htr_pipeline.html.j2
View File

@ -1,7 +1,7 @@
{% extends "base.html.j2" %}
{% import "wtf.html.j2" as wtf %}
{% block main_attribs %} class="service-scheme" data-service="transkribus-htr-pipeline"{% endblock main_attribs %}
{% block main_attribs %}class="service-color lighten" data-service="transkribus-htr-pipeline"{% endblock main_attribs %}
{% block page_content %}
<div class="container">
@ -14,9 +14,7 @@
<div class="center-align">
<p class="hide-on-small-only">&nbsp;</p>
<p class="hide-on-small-only">&nbsp;</p>
<a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
<i class="nopaque-icons service-color darken service-icons" data-service="transkribus-htr-pipeline"></i>
</a>
<i class="large nopaque-icons service-icons service-color-text text-darken" data-service="transkribus-htr-pipeline"></i>
</div>
</div>