From 0d2ba69f53f8f916d3758d532bddf0ed1cc69bda Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Wed, 27 Apr 2022 02:18:18 +0200 Subject: Ispravio graph da radi sa razlicitim brojem neurona za svaki sloj, uskladio sve korake na experiment strani, promenio stil navbara, dodao bottom dugmice u folder. Dodao responzivnost na nekim komponentama. --- frontend/src/app/_data/Dataset.ts | 14 +- frontend/src/app/_data/FolderFile.ts | 13 + frontend/src/app/_data/Model.ts | 109 ++++---- .../src/app/_elements/folder/folder.component.css | 73 +++++- .../src/app/_elements/folder/folder.component.html | 44 +++- .../src/app/_elements/folder/folder.component.ts | 34 ++- .../form-dataset/form-dataset.component.css | 38 ++- .../form-dataset/form-dataset.component.html | 81 +++--- .../_elements/form-model/form-model.component.css | 126 +++++++--- .../_elements/form-model/form-model.component.html | 278 ++++++++++----------- .../_elements/form-model/form-model.component.ts | 133 +++------- .../src/app/_elements/graph/graph.component.html | 2 +- .../src/app/_elements/graph/graph.component.ts | 44 ++-- .../src/app/_elements/navbar/navbar.component.html | 8 +- .../app/_pages/experiment/experiment.component.css | 6 + .../_pages/experiment/experiment.component.html | 15 +- .../app/_pages/experiment/experiment.component.ts | 3 + frontend/src/styles/helper.css | 44 ++++ 18 files changed, 617 insertions(+), 448 deletions(-) create mode 100644 frontend/src/app/_data/FolderFile.ts (limited to 'frontend') diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 03060982..9d4b67a9 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -1,15 +1,17 @@ -export default class Dataset { +import { FolderFile } from "./FolderFile"; + +export default class Dataset extends FolderFile { _id: string = ''; constructor( - public name: string = 'Novi izvor podataka', + name: string = 'Novi izvor podataka', public description: string = '', public header: string[] = [], public fileId?: number, public extension: string = '.csv', public isPublic: boolean = false, public accessibleByLink: boolean = false, - public dateCreated: Date = new Date(), - public lastUpdated: Date = new Date(), + dateCreated: Date = new Date(), + lastUpdated: Date = new Date(), public uploaderId: string = '', public delimiter: string = '', public hasHeader: boolean = true, @@ -19,7 +21,9 @@ export default class Dataset { public nullRows: number = 0, public nullCols: number = 0, public preview: string[][] = [[]] - ) { } + ) { + super(name, dateCreated, lastUpdated); + } } export class ColumnInfo { diff --git a/frontend/src/app/_data/FolderFile.ts b/frontend/src/app/_data/FolderFile.ts new file mode 100644 index 00000000..a79eeac5 --- /dev/null +++ b/frontend/src/app/_data/FolderFile.ts @@ -0,0 +1,13 @@ +export class FolderFile { + constructor( + public name: string, + public dateCreated: Date, + public lastUpdated: Date + ) { } +} + + +export enum FolderType { + Dataset, + Model +} \ No newline at end of file diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index a3b86bdf..c1f3d108 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -1,12 +1,13 @@ import { NgIf } from "@angular/common"; +import { FolderFile } from "./FolderFile"; -export default class Model { +export default class Model extends FolderFile { _id: string = ''; constructor( - public name: string = 'Novi model', + name: string = 'Novi model', public description: string = '', - public dateCreated: Date = new Date(), - public lastUpdated: Date = new Date(), + dateCreated: Date = new Date(), + lastUpdated: Date = new Date(), //public experimentId: string = '', // Neural net training settings @@ -15,57 +16,56 @@ export default class Model { public lossFunction: LossFunction = LossFunction.MeanSquaredError, public inputNeurons: number = 1, public hiddenLayers: number = 1, - public batchSize: number = 5, + public batchSize: BatchSize = BatchSize.O3, public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, public uploaderId: string = '', public metrics: string[] = [], // TODO add to add-model form public epochs: number = 5, // TODO add to add-model form - public inputColNum:number=5, - public learningRate:LearningRate=LearningRate.LR1, - public layers:Layer[]=[new Layer()] + public inputColNum: number = 5, + public learningRate: LearningRate = LearningRate.LR1, + public layers: Layer[] = [new Layer()] - ) { } + ) { + super(name, dateCreated, lastUpdated); + } } -export class Layer{ +export class Layer { constructor( - public layerNumber:number=0, - public activationFunction:ActivationFunction=ActivationFunction.Sigmoid, - public neurons:number=1, - public regularisation:Regularisation=Regularisation.L1, - public regularisationRate:RegularisationRate=RegularisationRate.RR1, - - ) - {} - -} -export enum LearningRate{ - LR1='0.00001', - LR2='0.0001', - LR3='0.001', - LR4='0.003', - LR5='0.01', - LR6='0.03', - LR7='0.1', - LR8='0.3', - LR9='1', - LR10='3', - LR11='10', -} -export enum Regularisation{ - L1='l1', - L2='l2' -} -export enum RegularisationRate{ - RR1='0', - RR2='0.001', - RR3='0.003', - RR4='0.01', - RR5='0.03', - RR6='0.1', - RR7='0.3', - RR8='1', - RR9='3', - RR10='10', + public layerNumber: number = 0, + public activationFunction: ActivationFunction = ActivationFunction.Sigmoid, + public neurons: number = 1, + public regularisation: Regularisation = Regularisation.L1, + public regularisationRate: RegularisationRate = RegularisationRate.RR1, + ) { } +} +export enum LearningRate { + LR1 = '0.00001', + LR2 = '0.0001', + LR3 = '0.001', + LR4 = '0.003', + LR5 = '0.01', + LR6 = '0.03', + LR7 = '0.1', + LR8 = '0.3', + LR9 = '1', + LR10 = '3', + LR11 = '10', +} +export enum Regularisation { + L1 = 'l1', + L2 = 'l2' +} +export enum RegularisationRate { + RR1 = '0', + RR2 = '0.001', + RR3 = '0.003', + RR4 = '0.01', + RR5 = '0.03', + RR6 = '0.1', + RR7 = '0.3', + RR8 = '1', + RR9 = '3', + RR10 = '10', } export enum ProblemType { Regression = 'regresioni', @@ -198,4 +198,17 @@ export enum MetricsMultiClassification { Precision = 'precision_score', Recall = 'recall_score', F1 = 'f1_score', +} + +export enum BatchSize { + O1 = '2', + O2 = '4', + O3 = '8', + O4 = '16', + O5 = '32', + O6 = '64', + O7 = '128', + O8 = '256', + O9 = '512', + O10 = '1024' } \ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 3e865576..ce9b9fad 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -8,7 +8,7 @@ display: flex; flex-direction: row; align-items: flex-end; - height: 4rem; + height: 3.1rem; } #tabs>.folder-tab:not(:first-child) { @@ -83,16 +83,15 @@ #search-options { margin-left: auto; - margin-top: 7px; display: flex; flex-direction: row; align-items: center; + height: 100%; } #selected-content { background-color: var(--ns-bg-dark-50); width: 100%; - height: 36rem; /*backdrop-filter: blur(2px);*/ border-color: var(--ns-primary); border-style: solid; @@ -120,4 +119,72 @@ .rounded-bottom { border-top-right-radius: 0; border-top-left-radius: 0; +} + +.separator { + border-left-color: var(--ns-primary); + border-left-width: 1px; + border-left-style: solid; +} + +.list-view { + height: 100%; + overflow-y: auto; +} + +.list-item { + height: 3rem; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid var(--ns-primary); +} + +.list-item:hover { + background-color: var(--ns-bg-dark-100); + box-shadow: 0px 3px 3px var(--ns-primary); +} + +.list-item:hover>.hover-hide { + display: none; +} + +.folder-inside { + width: 100%; + height: 40rem; + overflow-y: auto; +} + +.file-content { + width: 100%; + height: 100%; + position: relative; +} + +.file-bottom-buttons { + position: absolute; + bottom: 15px; + right: 15px; + display: flex; + flex-direction: row-reverse; +} + +.file-button { + position: relative; + color: var(--offwhite); + border-radius: 4px; + border: 1px solid var(--ns-primary); + margin: 5px; + padding: 5px; + cursor: pointer; + z-index: 1001; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.file-button:hover { + background-color: var(--ns-primary); } \ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 95e99911..f0bc409a 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -1,4 +1,4 @@ -
+
add @@ -24,7 +24,6 @@
- timeline Regresioni looks_two @@ -32,19 +31,48 @@ auto_awesome_motion Multiklasifikacioni
-
[sort options here TODO]
- + +
+
+ +
+
+
+ + + +
+ + +
+
+
+
+ {{file.name}} +
+
+ {{file.lastUpdated | date}} +
+
- -
+
+
+ + + + + {{ option }} + + + +
- +
- -
- -
-
- -
-
-
Broj Skrivenih Slojeva
-
add_circle
-
{{newModel.hiddenLayers}}
-
remove_circle
-
-
-
-
- -
- {{item}} -
-
- -
-
+
- Aktivaciona funkcija - - - {{ optionName }} - - - - -
-
-
Broj čvorova
- add_circle -
{{newModel.layers[i].neurons}}
- remove_circle - + Broj uzoraka po iteraciji + + + {{option}} + +
-
- - Regularizacija - - - {{ optionName }} - - - - -
-
- - Stopa regularizacije - - - {{ optionName }} - - - - -
+ +
+
+ + + +
+
+ +
+
Broj Skrivenih Slojeva
+ +
{{newModel.hiddenLayers}}
+ +
+
+
+
+ +
+
+ #{{i+1}} +
+ + + Aktivaciona funkcija + + + {{ optionName }} + + + + +
+
Broj čvorova
+ +
{{newModel.layers[i].neurons}}
+
-
-
- -
\ No newline at end of file + + + Regularizacija + + + {{ optionName }} + + + + + + Stopa regularizacije + + + {{ optionName }} + + + +
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts index c3c73b3e..c29fd0bb 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -1,37 +1,36 @@ -import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angular/core'; -import {FormControl, Validators} from '@angular/forms'; +import { Component, OnInit, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core'; +import { FormControl, Validators } from '@angular/forms'; import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; -import Model, {Layer, ActivationFunction, LossFunction,LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType ,Regularisation,RegularisationRate} from 'src/app/_data/Model'; +import Model, { Layer, ActivationFunction, LossFunction, LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType, Regularisation, RegularisationRate, BatchSize } from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; -import {FormGroupDirective, NgForm} from '@angular/forms'; -import {ErrorStateMatcher} from '@angular/material/core'; +import { FormGroupDirective, NgForm } from '@angular/forms'; +import { ErrorStateMatcher } from '@angular/material/core'; + @Component({ selector: 'app-form-model', templateUrl: './form-model.component.html', styleUrls: ['./form-model.component.css'] }) -export class FormModelComponent implements OnInit { +export class FormModelComponent implements AfterViewInit { @ViewChild(GraphComponent) graph!: GraphComponent; @Input() forExperiment?: Experiment; @Output() selectedModelChangeEvent = new EventEmitter(); - constructor() { - this.newModel.epochs=1; - this.newModel.batchSize=1; -} - - ngOnInit(): void { + constructor() { } + + ngAfterViewInit(): void { } + selectFormControl = new FormControl('', Validators.required); nameFormControl = new FormControl('', [Validators.required, Validators.email]); - selectTypeFormControl=new FormControl('', Validators.required); - selectOptFormControl=new FormControl('', Validators.required); - selectLFFormControl=new FormControl('', Validators.required); - selectLRFormControl=new FormControl('', Validators.required); - selectEpochFormControl=new FormControl('', Validators.required); - selectAFFormControl=new FormControl('', Validators.required); - selectBSFormControl=new FormControl('', Validators.required); + selectTypeFormControl = new FormControl('', Validators.required); + selectOptFormControl = new FormControl('', Validators.required); + selectLFFormControl = new FormControl('', Validators.required); + selectLRFormControl = new FormControl('', Validators.required); + selectEpochFormControl = new FormControl('', Validators.required); + selectAFFormControl = new FormControl('', Validators.required); + selectBSFormControl = new FormControl('', Validators.required); selectActivationFormControl = new FormControl('', Validators.required); selectRegularisationFormControl = new FormControl('', Validators.required); selectRRateFormControl = new FormControl('', Validators.required); @@ -43,92 +42,44 @@ export class FormModelComponent implements OnInit { ProblemType = ProblemType; ActivationFunction = ActivationFunction; - RegularisationRate=RegularisationRate; - Regularisation=Regularisation; + RegularisationRate = RegularisationRate; + Regularisation = Regularisation; metrics: any = Metrics; LossFunction = LossFunction; Optimizer = Optimizer; + BatchSize = BatchSize; Object = Object; document = document; shared = Shared; - LearningRate=LearningRate; - Layer=Layer; - + LearningRate = LearningRate; + Layer = Layer; + term: string = ""; selectedMetrics = []; lossFunction: any = LossFunction; showMyModels: boolean = true; - - hiddenLayers=[]; - - - updateGraph() { + console.log(this.newModel.layers); this.graph.update(); } - removeLayer(){ - if(this.newModel.hiddenLayers>1) - { - this.newModel.layers.splice(this.newModel.layers.length-1,1); - this.newModel.hiddenLayers-=1; + + removeLayer() { + if (this.newModel.hiddenLayers > 1) { + this.newModel.layers.splice(this.newModel.layers.length - 1, 1); + this.newModel.hiddenLayers -= 1; this.updateGraph(); } } - addLayer(){ - if(this.newModel.hiddenLayers<12) - { + addLayer() { + if (this.newModel.hiddenLayers < 128) { this.newModel.layers.push(new Layer(this.newModel.layers.length)); - this.newModel.hiddenLayers+=1; + this.newModel.hiddenLayers += 1; this.updateGraph(); } - - } - removeBatch(){ - if(this.newModel.batchSize>1) - { - this.newModel.batchSize=this.newModel.batchSize/2; - } - else - { - this.newModel.batchSize=this.newModel.batchSize; - } - - } - addBatch(){ - if(this.newModel.batchSize<600) - { - this.newModel.batchSize=this.newModel.batchSize*2; - } - else - { - this.newModel.batchSize=this.newModel.batchSize; - - } - } - removeEpoch(){ - if(this.newModel.epochs>1) - { - this.newModel.epochs=this.newModel.epochs-1; - } - else - { - this.newModel.epochs=this.newModel.epochs; - } - - } - addEpoch(){ - if(this.newModel.epochs<100) - { - this.newModel.epochs=this.newModel.epochs+1; - } - else - { - this.newModel.epochs=this.newModel.epochs; - - } + } /* setNeurons() @@ -140,18 +91,16 @@ export class FormModelComponent implements OnInit { numSequence(n: number): Array { return Array(n); } - - removeNeuron(index:number){ - if(this.newModel.layers[index].neurons>1) - { - this.newModel.layers[index].neurons-=1; + + removeNeuron(index: number) { + if (this.newModel.layers[index].neurons > 1) { + this.newModel.layers[index].neurons -= 1; this.updateGraph(); } } - addNeuron(index:number){ - if(this.newModel.layers[index].neurons<100) - { - this.newModel.layers[index].neurons+=1; + addNeuron(index: number) { + if (this.newModel.layers[index].neurons < 100) { + this.newModel.layers[index].neurons += 1; this.updateGraph(); } } diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 92e9df38..b8220115 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index c20d3dd7..5dec3152 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -1,6 +1,6 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; -import Model,{Layer} from 'src/app/_data/Model'; +import Model, { Layer } from 'src/app/_data/Model'; @Component({ selector: 'app-graph', @@ -22,11 +22,11 @@ export class GraphComponent implements AfterViewInit { @Input() lineColor: string = '#00a8e8'; @Input() nodeColor: string = '#222277'; @Input() borderColor: string = '#00a8e8'; - @Input() inputNodeColor: string = '#ffdd11'; - @Input() outputNodeColor: string = '#44ee22'; + @Input() inputNodeColor: string = '#00a8e8'; + @Input() outputNodeColor: string = '#dfd7d7'; - private ctx?: CanvasRenderingContext2D; - @Input() inputNeurons: number=1; + private ctx!: CanvasRenderingContext2D; + @Input() inputNeurons: number = 1; constructor() { } @@ -51,7 +51,7 @@ export class GraphComponent implements AfterViewInit { let inputNodeIndex = 0; const inputLayer: Node[] = []; while (inputNodeIndex < this.inputCols) { - const x = 0.5 / (this.inputNeurons + 2); + const x = 0.5 / (this.model!.hiddenLayers + 2); const y = (inputNodeIndex + 0.5) / this.inputCols; const node = new Node(x, y, this.inputNodeColor); inputLayer.push(node); @@ -63,9 +63,9 @@ export class GraphComponent implements AfterViewInit { while (layerIndex < this.model!.hiddenLayers + 1) { const newLayer: Node[] = []; let nodeIndex = 0; - while (nodeIndex < this.model!.layers[layerIndex].neurons) { + while (nodeIndex < this.model!.layers[layerIndex - 1].neurons) { const x = (layerIndex + 0.5) / (this.model!.hiddenLayers + 2); - const y = (nodeIndex + 0.5) / this.model!.layers[layerIndex].neurons; + const y = (nodeIndex + 0.5) / this.model!.layers[layerIndex - 1].neurons; const node = new Node(x, y, this.nodeColor); newLayer.push(node); nodeIndex += 1; @@ -81,7 +81,7 @@ export class GraphComponent implements AfterViewInit { } draw() { - this.ctx!.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); + this.ctx.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); let index = 0; while (index < this.layers!.length - 1) { @@ -101,22 +101,22 @@ export class GraphComponent implements AfterViewInit { } drawLine(node1: Node, node2: Node) { - this.ctx!.strokeStyle = this.lineColor; - this.ctx!.lineWidth = this.lineThickness; - this.ctx!.beginPath(); - this.ctx!.moveTo(node1.x * this.width, node1.y * this.height); - this.ctx!.lineTo(node2.x * this.width, node2.y * this.height); - this.ctx!.stroke(); + this.ctx.strokeStyle = this.lineColor; + this.ctx.lineWidth = this.lineThickness; + this.ctx.beginPath(); + this.ctx.moveTo(node1.x * this.width, node1.y * this.height); + this.ctx.lineTo(node2.x * this.width, node2.y * this.height); + this.ctx.stroke(); } drawNode(node: Node) { - this.ctx!.fillStyle = node.color; - this.ctx!.strokeStyle = this.borderColor; - this.ctx!.lineWidth = this.lineThickness; - this.ctx!.beginPath(); - this.ctx!.arc(node.x * this.width, node.y * this.height, this.nodeRadius, 0, 2 * Math.PI); - this.ctx!.fill(); - this.ctx!.stroke(); + this.ctx.fillStyle = node.color; + this.ctx.strokeStyle = this.borderColor; + this.ctx.lineWidth = this.lineThickness; + this.ctx.beginPath(); + this.ctx.arc(node.x * this.width, node.y * this.height, this.nodeRadius, 0, 2 * Math.PI); + this.ctx.fill(); + this.ctx.stroke(); } width = 200; diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 09d83bd1..9a54a9de 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,10 +6,10 @@ diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index 2fde8e7f..aca0562a 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -46,4 +46,10 @@ mat-stepper { flex-direction: row; justify-content: center; align-items: center; +} + +.step-content-inside { + width: 90%; + height: 90%; + overflow-y: auto; } \ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 6200270c..1606adf5 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -22,16 +22,19 @@
- +
+ +
-
- -
+
+ +
- - +
+ +
\ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index ad0f1df2..d80ba70f 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -2,6 +2,7 @@ import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren } from '@ import { StepperSelectionEvent } from '@angular/cdk/stepper'; import { MatStepper } from '@angular/material/stepper'; import Shared from 'src/app/Shared'; +import { FolderType } from 'src/app/_data/FolderFile'; @Component({ selector: 'app-experiment', @@ -86,4 +87,6 @@ export class ExperimentComponent implements AfterViewInit { scrolling: boolean = false; + FolderType = FolderType; + } diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index 875b94f1..08ce6e56 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -74,4 +74,48 @@ flex-direction: row; justify-content: space-between; align-items: center; +} + +.icon-toggle { + color: var(--offwhite); + height: 100%; +} + +.icon-toggle>* { + margin-top: 5px; +} + +.icon-toggle:active { + background-color: var(--ns-primary); +} + +.icon-toggle-on { + background-color: var(--ns-primary); +} + +.icon-toggle-on>* { + transform: scale(1.3); +} + +.force-link { + color: var(--offwhite) !important; + text-decoration: none; + cursor: pointer; +} + +.text-primary { + color: var(--ns-primary) !important; +} + +.btn-icon { + color: var(--offwhite) !important; + background-color: var(--ns-primary); + border-radius: 50%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 3px; + width: 28px; + height: 28px; } \ No newline at end of file -- cgit v1.2.3