From ab0f5920d21059ebe0fb03f934ad41e6bf60452e Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Thu, 29 Jul 2021 14:12:29 +0200
Subject: [PATCH] moved stylesheets to own folder
---
angular.json | 7 +-
drugstone-test.html | 2 +-
.../analysis-panel.component.html | 70 +++--
.../analysis-panel.component.scss | 4 +-
.../drug-table/drug-table.component.html | 2 +-
.../prot-table/prot-table.component.html | 2 +-
.../dataset-tile/dataset-tile.component.html | 2 +-
.../network-legend.component.scss | 6 +-
.../query-tile/query-tile.component.html | 2 +-
.../task-list/task-list.component.html | 2 +-
.../components/toggle/toggle.component.html | 4 +-
.../add-expressed-proteins.component.html | 6 +-
.../custom-proteins.component.html | 6 +-
.../launch-analysis.component.html | 4 +-
.../explorer-page.component.html | 19 +-
.../explorer-page.component.scss | 3 +-
.../explorer-page/explorer-page.component.ts | 1 -
src/styles.scss | 273 ------------------
src/stylesheets/primeng.scss | 62 ++++
src/stylesheets/styles.scss | 264 +++++++++++++++++
src/stylesheets/theme-styles.scss | 226 +++++++++++++++
src/{ => stylesheets}/theme.css | 2 +-
src/{ => stylesheets}/variables.scss | 0
src/theme-styles.scss | 259 -----------------
24 files changed, 633 insertions(+), 595 deletions(-)
delete mode 100644 src/styles.scss
create mode 100644 src/stylesheets/primeng.scss
create mode 100644 src/stylesheets/styles.scss
create mode 100644 src/stylesheets/theme-styles.scss
rename src/{ => stylesheets}/theme.css (90%)
rename src/{ => stylesheets}/variables.scss (100%)
delete mode 100644 src/theme-styles.scss
diff --git a/angular.json b/angular.json
index 6ac7025b..dc6291f8 100644
--- a/angular.json
+++ b/angular.json
@@ -33,8 +33,8 @@
"src/assets"
],
"styles": [
- "src/theme-styles.scss",
- "src/styles.scss"
+ "src/stylesheets/theme-styles.scss",
+ "src/stylesheets/styles.scss"
],
"scripts": [],
"crossOrigin": "use-credentials",
@@ -199,7 +199,8 @@
],
"styles": [
"node_modules/animate.css/animate.min.css",
- "src/styles.scss"
+ "src/stylesheets/styles.scss",
+ "src/stylesheets/theme-styles.scss"
],
"scripts": []
}
diff --git a/drugstone-test.html b/drugstone-test.html
index 89a6aef0..520fdfe8 100644
--- a/drugstone-test.html
+++ b/drugstone-test.html
@@ -1,6 +1,6 @@
<html lang="en">
<head>
- <link rel="stylesheet" type="text/css" href="src/theme.css">
+ <link rel="stylesheet" type="text/css" href="src/stylesheets/theme.css">
<script src="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.7.9-rc3/uhh/drugsTone.js"></script>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.7.9-rc3/uhh/styles.css">-->
<link rel="stylesheet" type="text/css" href="./drugsTone-build/styles.css">
diff --git a/src/app/components/analysis-panel/analysis-panel.component.html b/src/app/components/analysis-panel/analysis-panel.component.html
index 95d06d24..f2b31d21 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.html
+++ b/src/app/components/analysis-panel/analysis-panel.component.html
@@ -140,23 +140,23 @@
<footer *ngIf="myConfig.showFooter" class="card-footer toolbar network-footer-toolbar">
<div class="network-footer-toolbar-inner-container">
-
+
<ng-container *ngIf="myConfig.showFooterButtonScreenshot">
<button class="button is-primary is-rounded has-tooltip network-footer-toolbar-element"
- pTooltip="Take a screenshot of the current network." tooltipPosition="top" (click)="toImage()">
+ pTooltip="Take a screenshot of the current network." tooltipStyleClass="drgstn" tooltipPosition="top" (click)="toImage()">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
- <span [ngClass]="{'text-normal':smallStyle}">
+ <span [ngClass]="{'text-normal':smallStyle}">
Screenshot
</span>
- </button>
- </ng-container>
+ </button>
+ </ng-container>
<div class="field network-footer-toolbar-element">
<p class="control footer-buttons">
<a [href]="graphmlLink()" class="button is-success is-rounded has-tooltip"
- pTooltip="Export this network as .graphml file." tooltipPosition="top">
+ pTooltip="Export this network as .graphml file." tooltipStyleClass="drgstn" tooltipPosition="top">
<span class="icon">
<i class="fas fa-download" aria-hidden="true"></i>
</span>
@@ -181,20 +181,21 @@
<!-- </p>-->
<!-- </div>-->
- <div class="footer-buttons dropdown is-up network-footer-toolbar-element" [class.is-active]="expressionExpanded">
+ <div class="footer-buttons dropdown is-up network-footer-toolbar-element"
+ [class.is-active]="expressionExpanded">
<div class="dropdown-trigger">
<button (click)="expressionExpanded=!expressionExpanded"
class="button is-rounded is-primary" [class.is-outlined]="!selectedTissue"
aria-haspopup="true" aria-controls="dropdown-menu" [ngClass]="{'button-small':smallStyle}"
- pTooltip="Tissue expression data is provided by the GTEx project." tooltipPosition="top"
- >
+ pTooltip="Tissue expression data is provided by the GTEx project." tooltipStyleClass="drgstn" tooltipPosition="top"
+ >
<div [ngClass]="{'text-small':smallStyle}">
<span *ngIf="!selectedTissue">Tissue</span>
<span *ngIf="selectedTissue">{{selectedTissue.name}}</span>
<span class="icon is-small">
<i class="fas"
- [class.fa-angle-up]="expressionExpanded"
- [class.fa-angle-left]="!expressionExpanded" aria-hidden="true"></i>
+ [class.fa-angle-up]="expressionExpanded"
+ [class.fa-angle-left]="!expressionExpanded" aria-hidden="true"></i>
</span>
</div>
</button>
@@ -203,14 +204,14 @@
<div class="dropdown-content tissue-dropdown" [ngClass]="{'button-small':smallStyle}">
<div class="scroll-area" [ngClass]="{'text-small':smallStyle}">
<a (click)="selectTissue(null)"
- [class.is-active]="!selectedTissue"
- class="dropdown-item">
+ [class.is-active]="!selectedTissue"
+ class="dropdown-item">
None
</a>
<a *ngFor="let tissue of analysis.getTissues()"
- (click)="selectTissue(tissue)"
- [class.is-active]="selectedTissue && tissue.netexId === selectedTissue.netexId"
- class="dropdown-item">
+ (click)="selectTissue(tissue)"
+ [class.is-active]="selectedTissue && tissue.netexId === selectedTissue.netexId"
+ class="dropdown-item">
{{tissue.name}}
</a>
</div>
@@ -219,29 +220,31 @@
</div>
<app-toggle class="footer-buttons network-footer-toolbar-element" textOn="Seeds On" textOff="Off"
- tooltipOn="Highlight seed nodes ON."
- tooltipOff="Highlight seed nodes OFF."
- [smallStyle]="smallStyle"
- [value]="highlightSeeds" (valueChange)="updateHighlightSeeds($event)"></app-toggle>
+ tooltipOn="Highlight seed nodes ON."
+ tooltipOff="Highlight seed nodes OFF."
+ [smallStyle]="smallStyle"
+ [value]="highlightSeeds" (valueChange)="updateHighlightSeeds($event)"></app-toggle>
- <app-toggle *ngIf="task.info.target === 'drug-target'" class="footer-buttons network-footer-toolbar-element" textOn="Drugs On" textOff="Off"
- tooltipOn="Display adjacent drugs ON."
- tooltipOff="Display adjacent drugs OFF."
- [smallStyle]="smallStyle"
- [value]="adjacentDrugs" (valueChange)="updateAdjacentDrugs($event)"></app-toggle>
+ <app-toggle *ngIf="task.info.target === 'drug-target'" class="footer-buttons network-footer-toolbar-element"
+ textOn="Drugs On" textOff="Off"
+ tooltipOn="Display adjacent drugs ON."
+ tooltipOff="Display adjacent drugs OFF."
+ [smallStyle]="smallStyle"
+ [value]="adjacentDrugs" (valueChange)="updateAdjacentDrugs($event)"></app-toggle>
<app-toggle class="footer-buttons network-footer-toolbar-element" textOn="Animation On" textOff="Off"
tooltipOn="Enable the network animation."
tooltipOff="Disable the network animation and freeze nodes."
[smallStyle]="smallStyle"
[value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle>
- </div>
+ </div>
</footer>
</div>
- <div class="content tab-content scrollable table-tab" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
+ <div class="content tab-content scrollable table-tab" *ngIf="task && task.info.done"
+ [class.is-visible]="tab === 'table'">
<div class="field has-addons" *ngIf="tableHasScores && task.info.algorithm !== 'proximity'">
<p class="control">
- <button class="button is-rounded has-tooltip" pTooltip="Normalize the scores" tooltipPosition="top"
+ <button class="button is-rounded has-tooltip" pTooltip="Normalize the scores" tooltipStyleClass="drgstn" tooltipPosition="top"
[class.is-primary]="tableNormalize" (click)="toggleNormalization(true)">
<span class="icon is-small">
<i class="fa fa-ruler-vertical"></i>
@@ -250,7 +253,8 @@
</button>
</p>
<p class="control">
- <button class="button is-rounded has-tooltip" pTooltip="Disable normalization of the scores." tooltipPosition="top"
+ <button class="button is-rounded has-tooltip" pTooltip="Disable normalization of the scores." tooltipStyleClass="drgstn"
+ tooltipPosition="top"
[class.is-primary]="!tableNormalize" (click)="toggleNormalization(false)">
<span>Off</span>
</button>
@@ -270,7 +274,8 @@
<span>Download</span>
</a>
</div>
- <app-drug-table [tableDrugs]="tableDrugs" [tableDrugScoreTooltip]="tableDrugScoreTooltip" [tableHasScores]="tableHasScores"></app-drug-table>
+ <app-drug-table [tableDrugs]="tableDrugs" [tableDrugScoreTooltip]="tableDrugScoreTooltip"
+ [tableHasScores]="tableHasScores"></app-drug-table>
<div *ngIf="tableProteins.length > 0" class="table-header">
<h4 class="is-4">
<span class="icon"><i class="fa fa-dna"></i></span>
@@ -281,7 +286,10 @@
<span>Download</span>
</a>
</div>
- <app-prot-table [tableHasScores]="tableHasScores" [tableProteins]="tableProteins" [tableProteinScoreTooltip]="tableDrugScoreTooltip" [tableProteinSelection]="tableProteinSelection" [tableSelectedProteins]="tableSelectedProteins"></app-prot-table>
+ <app-prot-table [tableHasScores]="tableHasScores" [tableProteins]="tableProteins"
+ [tableProteinScoreTooltip]="tableDrugScoreTooltip"
+ [tableProteinSelection]="tableProteinSelection"
+ [tableSelectedProteins]="tableSelectedProteins"></app-prot-table>
</div>
</div>
</div>
diff --git a/src/app/components/analysis-panel/analysis-panel.component.scss b/src/app/components/analysis-panel/analysis-panel.component.scss
index 34923202..7b9066fe 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.scss
+++ b/src/app/components/analysis-panel/analysis-panel.component.scss
@@ -1,4 +1,4 @@
-@import "../../../variables";
+@import "src/stylesheets/variables";
.analysis {
position: absolute;
@@ -7,7 +7,7 @@
}
.network-view-settings {
- // remove margin from tab header when network is displayed, so that network
+ // remove margin from tab header when network is displayed, so that network
// does not disappear in empty border
padding-left: 0;
padding-right: 0;
diff --git a/src/app/components/analysis-panel/drug-table/drug-table.component.html b/src/app/components/analysis-panel/drug-table/drug-table.component.html
index a89bfeea..28cab88e 100644
--- a/src/app/components/analysis-panel/drug-table/drug-table.component.html
+++ b/src/app/components/analysis-panel/drug-table/drug-table.component.html
@@ -24,7 +24,7 @@
<th *ngIf="tableHasScores" [pSortableColumn]="'score'">
Score
<button class="button is-light has-tooltip tooltip-button"
- [pTooltip]="tableDrugScoreTooltip" tooltipPosition="top">
+ [pTooltip]="tableDrugScoreTooltip" tooltipStyleClass="drgstn" tooltipPosition="top">
<fa-icon [icon]="faQuestionCircle" class="icon"></fa-icon>
</button>
<p-sortIcon [field]="'score'"></p-sortIcon>
diff --git a/src/app/components/analysis-panel/prot-table/prot-table.component.html b/src/app/components/analysis-panel/prot-table/prot-table.component.html
index ad8fcdda..bb10b666 100644
--- a/src/app/components/analysis-panel/prot-table/prot-table.component.html
+++ b/src/app/components/analysis-panel/prot-table/prot-table.component.html
@@ -21,7 +21,7 @@
<th *ngIf="tableHasScores" [pSortableColumn]="'score'">
Score
<button class="button is-light has-tooltip tooltip-button"
- [pTooltip]="tableProteinScoreTooltip" tooltipPosition="top">
+ [pTooltip]="tableProteinScoreTooltip" tooltipStyleClass="drgstn" tooltipPosition="top">
<fa-icon [icon]="faQuestionCircle" class="icon"></fa-icon>
</button>
<p-sortIcon [field]="'score'"></p-sortIcon>
diff --git a/src/app/components/dataset-tile/dataset-tile.component.html b/src/app/components/dataset-tile/dataset-tile.component.html
index 3a5e8c09..9f1e7e7c 100644
--- a/src/app/components/dataset-tile/dataset-tile.component.html
+++ b/src/app/components/dataset-tile/dataset-tile.component.html
@@ -1,6 +1,6 @@
<div class="content">
<ng-select [items]="datasetItems" bindLabel="label" [virtualScroll]="true" class="custom"
- placeholder="Select..." [ngModel]="selectedDataset" (ngModelChange)="select($event)" pTooltip="Choose the dataset you want to explore." tooltipPosition="top">
+ placeholder="Select..." [ngModel]="selectedDataset" (ngModelChange)="select($event)" pTooltip="Choose the dataset you want to explore." tooltipStyleClass="drgstn" tooltipPosition="top">
<ng-template ng-option-tmp let-item="item">
{{item.strains}} <br/>
<small>{{item.datasetNames}}</small>
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index ab78e5e8..bcb83781 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -1,4 +1,4 @@
-@import "~src/variables";
+@import "src/stylesheets/variables";
div.legend {
@@ -73,7 +73,7 @@ div.legend {
border-right: calc(#{$legend-triangle-size} / 2) solid transparent;
border-top: $legend-triangle-height solid black; // default color will be changed by user input
display: inline-block;
- }
+ }
.star {
position: relative;
display: inline-block;
@@ -122,7 +122,7 @@ div.legend {
width: $legend-edge-width;
height: $legend-edge-height;
/* Center edge icon */
- margin: 0 auto;
+ margin: 0 auto;
&.dashes {
border-top: dotted;
background-color: transparent;
diff --git a/src/app/components/query-tile/query-tile.component.html b/src/app/components/query-tile/query-tile.component.html
index df4695b1..aa893a3f 100644
--- a/src/app/components/query-tile/query-tile.component.html
+++ b/src/app/components/query-tile/query-tile.component.html
@@ -1,6 +1,6 @@
<div class="content">
<ng-select [items]="queryItems" bindLabel="label" bindValue="data" [virtualScroll]="true" class="custom"
- placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find nodes in the network." tooltipPosition="top">
+ placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find nodes in the network." tooltipStyleClass="drgstn" tooltipPosition="top">
<ng-template ng-option-tmp let-item="item">
<p>{{item.data.label}}</p>
</ng-template>
diff --git a/src/app/components/task-list/task-list.component.html b/src/app/components/task-list/task-list.component.html
index f69fef21..20d482af 100644
--- a/src/app/components/task-list/task-list.component.html
+++ b/src/app/components/task-list/task-list.component.html
@@ -40,7 +40,7 @@
</p>
<progress class="progress is-success" [value]="task.info.progress * 100" max="100"></progress>
</div>
- <div *ngIf="task.info.done" (click)="open(task.token)" pTooltip="Show analysis results" tooltipPosition="top">
+ <div *ngIf="task.info.done" (click)="open(task.token)" pTooltip="Show analysis results" tooltipStyleClass="drgstn" tooltipPosition="top">
<p>
<span class="is-capitalized"><i class="fa" [class.fa-capsules]="task.info.target === 'drug'"
[class.fa-crosshairs]="task.info.target === 'drug-target'"></i> {{algorithmNames[task.info.algorithm]}}</span>
diff --git a/src/app/components/toggle/toggle.component.html b/src/app/components/toggle/toggle.component.html
index ab187ff8..69eedbc3 100644
--- a/src/app/components/toggle/toggle.component.html
+++ b/src/app/components/toggle/toggle.component.html
@@ -1,6 +1,6 @@
<div class="field has-addons">
<p class="control has-tooltip">
- <button class="button is-rounded has-tooltip" [pTooltip]="tooltipOn" tooltipPosition="top" [class.is-primary]="value" (click)="toggle(true)" [ngClass]="{'button-small':smallStyle}">
+ <button class="button is-rounded has-tooltip" [pTooltip]="tooltipOn" tooltipStyleClass="drgstn" tooltipPosition="top" [class.is-primary]="value" (click)="toggle(true)" [ngClass]="{'button-small':smallStyle}">
<span class="icon is-small">
<i class="fa {{iconOn}}"></i>
</span>
@@ -8,7 +8,7 @@
</button>
</p>
<p class="control">
- <button class="button is-rounded has-tooltip" [pTooltip]="tooltipOff" tooltipPosition="top" [class.is-primary]="!value" (click)="toggle(false)" [ngClass]="{'button-small':smallStyle}">
+ <button class="button is-rounded has-tooltip" [pTooltip]="tooltipOff" tooltipStyleClass="drgstn" tooltipPosition="top" [class.is-primary]="!value" (click)="toggle(false)" [ngClass]="{'button-small':smallStyle}">
<span [ngClass]="{'text-small':smallStyle}">{{textOff}}</span>
<span *ngIf="iconOff" class="icon is-small">
<i class="fa {{iconOff}}"></i>
diff --git a/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.html b/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.html
index 1dbb602b..f477f289 100644
--- a/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.html
+++ b/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.html
@@ -37,7 +37,7 @@
</section>
<footer class="modal-card-foot">
<button (click)="addProteins();" class="button is-success is-rounded has-tooltip"
- pTooltip="Add all to the selection." tooltipPosition="top"
+ pTooltip="Add all to the selection." tooltipStyleClass="drgstn" tooltipPosition="top"
[disabled]="proteins.length === 0 || !selectedTissue || loading">
<span class="icon">
<i class="fas fa-plus"></i>
@@ -47,7 +47,7 @@
</span>
</button>
<button (click)="addVisibleProteins();" class="button is-success is-rounded has-tooltip"
- pTooltip="Add to selection if they appear in the current network." tooltipPosition="top"
+ pTooltip="Add to selection if they appear in the current network." tooltipStyleClass="drgstn" tooltipPosition="top"
[disabled]="proteins.length === 0 || !selectedTissue || loading">
<span class="icon">
<i class="fas fa-expand"></i>
@@ -56,7 +56,7 @@
Select proteins ({{proteins.length}})
</span>
</button>
- <button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipPosition="top">
+ <button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipStyleClass="drgstn" tooltipPosition="top">
Close
</button>
</footer>
diff --git a/src/app/dialogs/custom-proteins/custom-proteins.component.html b/src/app/dialogs/custom-proteins/custom-proteins.component.html
index 30614429..6066e165 100644
--- a/src/app/dialogs/custom-proteins/custom-proteins.component.html
+++ b/src/app/dialogs/custom-proteins/custom-proteins.component.html
@@ -43,7 +43,7 @@
</section>
<footer class="modal-card-foot">
<button (click)="addProteins();" class="button is-success is-rounded has-tooltip"
- pTooltip="Add all to the selection." tooltipPosition="top"
+ pTooltip="Add all to the selection." tooltipStyleClass="drgstn" tooltipPosition="top"
[disabled]="proteins.length === 0 || loading">
<span class="icon">
<i class="fa fa-plus"></i>
@@ -53,7 +53,7 @@
</span>
</button>
<button (click)="addVisibleProteins();" class="button is-success is-rounded has-tooltip"
- pTooltip="Add to selection if they appear in the current network." tooltipPosition="top"
+ pTooltip="Add to selection if they appear in the current network." tooltipStyleClass="drgstn" tooltipPosition="top"
[disabled]="proteins.length === 0 || loading">
<span class="icon">
<i class="fas fa-expand"></i>
@@ -62,7 +62,7 @@
Select
</span>
</button>
- <button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipPosition="top">Close
+ <button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipStyleClass="drgstn" tooltipPosition="top">Close
</button>
</footer>
</div>
diff --git a/src/app/dialogs/launch-analysis/launch-analysis.component.html b/src/app/dialogs/launch-analysis/launch-analysis.component.html
index bb001063..bc735e09 100644
--- a/src/app/dialogs/launch-analysis/launch-analysis.component.html
+++ b/src/app/dialogs/launch-analysis/launch-analysis.component.html
@@ -455,7 +455,7 @@
<footer class="modal-card-foot">
<button (click)="startTask(); close()" class="button is-success is-rounded has-tooltip"
- pTooltip="Run the analysis." tooltipPosition="top"
+ pTooltip="Run the analysis." tooltipStyleClass="drgstn" tooltipPosition="top"
[disabled]="!analysis.canLaunchTask()">
<span class="icon">
<i class="fa fa-rocket"></i>
@@ -464,7 +464,7 @@
Launch
</span>
</button>
- <button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipPosition="top">Close
+ <button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipStyleClass="drgstn" tooltipPosition="top">Close
</button>
</footer>
</div>
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 97633a5b..c534f0f4 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -181,13 +181,14 @@
network-footer-toolbar-element
"
pTooltip="Take a screenshot of the current network."
+ tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
<span [ngClass]="{ 'text-normal': smallStyle }"
- >Screenshot</span
+ >Screenshot</span
>
</button>
</ng-container>
@@ -210,17 +211,18 @@
aria-haspopup="true"
aria-controls="dropdown-menu"
pTooltip="Tissue expression data is provided by the GTEx project."
+ tooltipStyleClass="drgstn"
tooltipPosition="top"
[ngClass]="{ 'button-small': smallStyle }"
>
<span
*ngIf="!selectedTissue"
[ngClass]="{ 'text-small': smallStyle }"
- >Tissue</span
+ >Tissue</span
>
<span *ngIf="selectedTissue">{{
selectedTissue.name
- }}</span>
+ }}</span>
<span *ngIf="expressionExpanded" class="icon is-small">
<i class="fas fa-angle-up" aria-hidden="true"></i>
</span>
@@ -366,6 +368,7 @@
[disabled]="analysis.isLaunchingQuick()"
class="button is-white is-rounded has-tooltip"
pTooltip="Find drugs for all proteins."
+ tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
@@ -395,7 +398,7 @@
</div>
<div>
<span [ngClass]="{ 'text-normal': smallStyle }"
- >Select Proteins</span
+ >Select Proteins</span
>
</div>
</div>
@@ -409,8 +412,9 @@
analysis.getCount() === 0 ||
analysis.isLaunchingQuick()
"
- class="button is-white is-rounded has-tooltip"
+ class="button is-white is-rounded"
pTooltip="Find drugs for the selected proteins."
+ tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
@@ -466,6 +470,7 @@
<div
class="control"
pTooltip="Find drug targets for the selected proteins."
+ tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<button
@@ -492,6 +497,7 @@
<div
class="control"
pTooltip="Find drugs for the selected proteins."
+ tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<button
@@ -527,6 +533,7 @@
has-tooltip
"
pTooltip="Use enrichment analysis via g:Profiler (external)."
+ tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
@@ -545,6 +552,7 @@
has-tooltip
"
pTooltip="Use enrichment analysis via g:Profiler (external)."
+ tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
@@ -600,6 +608,7 @@
"
class="card-footer-item text-danger"
pTooltip="Delete all tasks."
+ tooltipStyleClass="drgstn"
tooltipPosition="top"
>
<span class="icon">
diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss
index bd938d67..b479d616 100644
--- a/src/app/pages/explorer-page/explorer-page.component.scss
+++ b/src/app/pages/explorer-page/explorer-page.component.scss
@@ -1,4 +1,4 @@
-@import "../../../variables";
+@import "src/stylesheets/variables";
.quick-find {
.notification {
@@ -75,3 +75,4 @@
}
+
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 8785ee6f..855cb3d3 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -12,7 +12,6 @@ import {
getDrugNodeId,
getWrapperFromNode,
legendContext,
- NetworkEdge,
Node,
NodeAttributeMap,
NodeInteraction,
diff --git a/src/styles.scss b/src/styles.scss
deleted file mode 100644
index ef29e719..00000000
--- a/src/styles.scss
+++ /dev/null
@@ -1,273 +0,0 @@
-@charset "utf-8";
-
-@import url('https://fonts.googleapis.com/css?family=Varela+Round');
-@import "~bulma/bulma.sass";
-@import '~bulma-tooltip';
-@import "~animate.css/animate.min";
-@import '~primeng/resources/themes/md-dark-deeppurple/theme.css';
-@import "~primeng/resources/primeng.min.css";
-@import "~primeicons/primeicons.css";
-@import "variables";
-
-.fullheight {
- height: 100%;
-}
-
-.canvas-content {
- height: calc(100% - #{$network-footer-height});
- z-index: $explorer-network-z;
-}
-
-// general network settings, some will be overwritten in analysis
-.network-footer-toolbar {
- position: absolute;
- width: 100%;
- bottom: 0;
- height: $network-footer-height;
- &-inner-container{
- width: 100%;
- display: inline-flex;
- overflow-x: auto;
- overflow-y: hidden;
- height: $network-footer-inner-container-height;
- position: absolute;
- bottom: 0;
- }
- &-element {
- position: relative;
- margin-top: calc(#{$network-footer-inner-container-height} - #{$network-footer-height} + #{$network-footer-space-button-to-border});
- }
- .dropdown-menu{
- z-index: $explorer-network-toolbar-dropdown-z;
- .scroll-area{
- height: calc(#{$network-footer-inner-container-height} - #{$network-footer-height});
- }
- }
-}
-
-nav.navbar {
- height: 60px;
-}
-
-img.menu-icon.is-hoverable.navbar-item.logo {
- height: 40px;
- width: 125px;
- padding: 0;
-}
-
-
-.tissue-dropdown {
- padding: 5px;
- background-color: rgba(255.0, 255.0, 255.0, 0.85);
-
- .scroll-area {
- max-height: 600px;
- overflow-y: scroll;
- padding-right: 5px;
- }
-}
-
-div.navbar-menu {
- margin-left: 5px;
-}
-
-span.icon {
- margin-right: 5px;
-}
-
-
-.mb-3 {
- margin-bottom: 10px;
-}
-
-
-img.inline {
- height: 30px;
- align: middle;
-}
-
-button.i {
- margin-left: 5px;
-}
-
-input.checkbox {
- margin-left: 15px;
-}
-
-div.covex.sidebar {
- height: $height;
- overflow-y: auto;
- overflow-x: hidden;
-}
-
-div.covex.bar-left {
- float: left;
- width: $sidebar-left-width;
- max-width: 300px;
- min-width: $sidebar-left-min-width;
- height: 100%;
-}
-
-div.covex.bar-right {
- float: left;
- width: $sidebar-right-width;
- max-width: 450px;
- min-width: $sidebar-right-min-width;
- /* Hide scrollbar for Chrome, Safari and Opera */
- &::-webkit-scrollbar {
- display: none;
- }
-
- /* Hide scrollbar for IE, Edge and Firefox */
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
-
-}
-
-
-div.card.bar-small {
- margin-bottom: 15px;
- word-wrap: break-word;
- height: 130px;
-}
-
-div.card.bar-medium {
- margin-bottom: 15px;
- word-wrap: break-word;
- height: 170px;
-}
-
-div.card.bar-large {
- margin-bottom: 15px;
- max-height: 600px;
-}
-
-div.card-content.overflow {
- overflow: auto;
- max-height: 350px;
-}
-
-div.covex.network {
- height: 100%;
- float: left;
- position: relative;
-
-}
-
-.center-panel {
- width: $main-width;
-
- &.leftgone {
- width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}));
- }
-
- &.rightgone {
- width: calc(#{$main-width} + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
- }
-
- &.rightgone.leftgone {
- width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
- }
-}
-
-div.card.network {
- width: 100%;
- height: $height;
-}
-
-div.parent {
- position: relative;
-}
-
-div.image1 {
- position: relative;
-}
-
-div.center {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-
-div.covex.explorer {
- height: #{$height};
- margin-left: 10px;
- margin-right: 10px;
-}
-
-.analysis-view {
- height: 100%;
- width: 100%;
- position: absolute;
- margin-top: 0;
- z-index: $analysis-view-z;
- .canvas-content {
- z-index: $analysis-network-z;
- }
-}
-
-div.field.has-addons.add-remove-toggle {
- margin-top: 20px;
-}
-
-.fa-spinner {
- color: $light-invert;
-}
-
-.footer-buttons {
- margin-left: 20px;
- margin-right: 10px;
-}
-
-.toolbar {
- padding: 5px;
- border-top: 2px solid #d0d0d0;
-
- .field {
- margin-bottom: 0;
-
- .control {
- margin-bottom: 0;
- }
- }
-}
-
-.p-tooltip-text:before {
- content: '';
- position: absolute;
- display: block;
- width: 0;
- left: 50%;
- bottom: +7px;
- border: 6px solid transparent;
- border-bottom: 0;
- border-top: 6px solid var(--drgstn-tooltip);
- transform: translate(-50%, calc(100% + 3px));
-}
-
-html, #appWindow {
- height: 100%;
-}
-
-#appWindow {
- margin: 0;
- font-family: Roboto, "Helvetica Neue", sans-serif;
-}
-
-// classes for different screen sizes
-.text-small {
- font-size: $text-small-font-size;
-}
-.text-normal{
- font-size: $text-normal-font-size;
-}
-.b-text-small{
- font-size: $b-text-small-font-size;
-}
-.b-text-smaller{
- font-size: $b-text-smaller-font-size;
-}
-.button-small{
- padding: $button-small-padding;
-}
diff --git a/src/stylesheets/primeng.scss b/src/stylesheets/primeng.scss
new file mode 100644
index 00000000..40a48015
--- /dev/null
+++ b/src/stylesheets/primeng.scss
@@ -0,0 +1,62 @@
+@import '../../node_modules/primeng/resources/themes/md-dark-deeppurple/theme.css';
+@import "../../node_modules/primeng/resources/primeng.min.css";
+@import "../../node_modules/primeicons/primeicons.css";
+
+.-datatable .p-sortable-column .p-sortable-column-icon {
+ color: inherit !important;
+}
+
+.p-datatable .p-datatable-tfoot > tr > td, .p-datatable .p-datatable-thead > tr > th {
+ background-color: var(--drgstn-panel) !important;
+ border-color: var(--drgstn-border) !important;
+ color: var(--drgstn-text-primary) !important;
+}
+
+.p-datatable .p-sortable-column.p-highlight, .p-datatable .p-sortable-column:not(.p-highlight):hover, .p-datatable .p-sortable-column.p-highlight:hover {
+ background-color: var(--drgstn-panel) !important;
+ border-color: var(--drgstn-border) !important;
+ color: var(--drgstn-primary) !important;
+}
+
+
+.p-checkbox .p-checkbox-box {
+ border-color: var(--drgstn-text-primary) !important;
+ color: var(--drgstn-text-primary) !important;
+ background-color: var(--drgstn-panel) !important;
+ border-radius: 1px !important;
+ border-style: solid !important;
+ width: 18px !important;
+ height: 18px !important;
+ position: relative !important;
+}
+
+.p-datatable .p-datatable-tbody > tr > td, .button.is-light {
+ border-color: var(--drgstn-border) !important;
+ background-color: var(--drgstn-panel) !important;
+ color: var(--drgstn-text-primary) !important;
+}
+
+
+.drgstn {
+ .p-tooltip-text, .p-tooltip-arrow {
+ background: var(--drgstn-tooltip) !important;
+ border-radius: 2px !important;
+ padding: .5rem 1rem .5rem 1rem !important;
+ color: var(--drgstn-text-secondary) !important;
+ font-size: .75rem !important;
+ }
+
+
+ .p-tooltip-text:before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 0;
+ left: 50%;
+ bottom: +7px;
+ border: 6px solid transparent;
+ border-bottom: 0;
+ border-top: 6px solid var(--drgstn-tooltip);
+ transform: translate(-50%, calc(100% + 3px));
+ }
+}
diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss
new file mode 100644
index 00000000..d488e0be
--- /dev/null
+++ b/src/stylesheets/styles.scss
@@ -0,0 +1,264 @@
+@charset "utf-8";
+
+@import url('https://fonts.googleapis.com/css?family=Varela+Round');
+@import "../../node_modules/bulma/bulma";
+@import "../../node_modules/animate.css/animate.min.css";
+@import "variables";
+@import "primeng";
+
+#appWindow {
+ height: 100%;
+ margin: 0;
+ font-family: Roboto, "Helvetica Neue", sans-serif;
+
+ .fullheight {
+ height: 100%;
+ }
+
+ .canvas-content {
+ height: calc(100% - #{$network-footer-height});
+ z-index: $explorer-network-z;
+ }
+
+ // general network settings, some will be overwritten in analysis
+ .network-footer-toolbar {
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+ height: $network-footer-height;
+
+ &-inner-container {
+ width: 100%;
+ display: inline-flex;
+ overflow-x: auto;
+ overflow-y: hidden;
+ height: $network-footer-inner-container-height;
+ position: absolute;
+ bottom: 0;
+ }
+
+ &-element {
+ position: relative;
+ margin-top: calc(#{$network-footer-inner-container-height} - #{$network-footer-height} + #{$network-footer-space-button-to-border});
+ }
+
+ .dropdown-menu {
+ z-index: $explorer-network-toolbar-dropdown-z;
+
+ .scroll-area {
+ height: calc(#{$network-footer-inner-container-height} - #{$network-footer-height});
+ }
+ }
+ }
+
+ nav.navbar {
+ height: 60px;
+ }
+
+ img.menu-icon.is-hoverable.navbar-item.logo {
+ height: 40px;
+ width: 125px;
+ padding: 0;
+ }
+
+
+ .tissue-dropdown {
+ padding: 5px;
+ background-color: rgba(255.0, 255.0, 255.0, 0.85);
+
+ .scroll-area {
+ max-height: 600px;
+ overflow-y: scroll;
+ padding-right: 5px;
+ }
+ }
+
+ div.navbar-menu {
+ margin-left: 5px;
+ }
+
+ span.icon {
+ margin-right: 5px;
+ }
+
+
+ .mb-3 {
+ margin-bottom: 10px;
+ }
+
+
+ img.inline {
+ height: 30px;
+ align: middle;
+ }
+
+ button.i {
+ margin-left: 5px;
+ }
+
+ input.checkbox {
+ margin-left: 15px;
+ }
+
+ div.covex.sidebar {
+ height: $height;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+
+ div.covex.bar-left {
+ float: left;
+ width: $sidebar-left-width;
+ max-width: 300px;
+ min-width: $sidebar-left-min-width;
+ height: 100%;
+ }
+
+ div.covex.bar-right {
+ float: left;
+ width: $sidebar-right-width;
+ max-width: 450px;
+ min-width: $sidebar-right-min-width;
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* Hide scrollbar for IE, Edge and Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+
+ }
+
+
+ div.card.bar-small {
+ margin-bottom: 15px;
+ word-wrap: break-word;
+ height: 130px;
+ }
+
+ div.card.bar-medium {
+ margin-bottom: 15px;
+ word-wrap: break-word;
+ height: 170px;
+ }
+
+ div.card.bar-large {
+ margin-bottom: 15px;
+ max-height: 600px;
+ }
+
+ div.card-content.overflow {
+ overflow: auto;
+ max-height: 350px;
+ }
+
+ div.covex.network {
+ height: 100%;
+ float: left;
+ position: relative;
+
+ }
+
+ .center-panel {
+ width: $main-width;
+
+ &.leftgone {
+ width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}));
+ }
+
+ &.rightgone {
+ width: calc(#{$main-width} + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
+ }
+
+ &.rightgone.leftgone {
+ width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
+ }
+ }
+
+ div.card.network {
+ width: 100%;
+ height: $height;
+ }
+
+ div.parent {
+ position: relative;
+ }
+
+ div.image1 {
+ position: relative;
+ }
+
+ div.center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+
+ div.covex.explorer {
+ height: #{$height};
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .analysis-view {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ margin-top: 0;
+ z-index: $analysis-view-z;
+
+ .canvas-content {
+ z-index: $analysis-network-z;
+ }
+ }
+
+ div.field.has-addons.add-remove-toggle {
+ margin-top: 20px;
+ }
+
+ .fa-spinner {
+ color: $light-invert;
+ }
+
+ .footer-buttons {
+ margin-left: 20px;
+ margin-right: 10px;
+ }
+
+ .toolbar {
+ padding: 5px;
+ border-top: 2px solid #d0d0d0;
+
+ .field {
+ margin-bottom: 0;
+
+ .control {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+
+ // classes for different screen sizes
+ .text-small {
+ font-size: $text-small-font-size;
+ }
+
+ .text-normal {
+ font-size: $text-normal-font-size;
+ }
+
+ .b-text-small {
+ font-size: $b-text-small-font-size;
+ }
+
+ .b-text-smaller {
+ font-size: $b-text-smaller-font-size;
+ }
+
+ .button-small {
+ padding: $button-small-padding;
+ }
+}
diff --git a/src/stylesheets/theme-styles.scss b/src/stylesheets/theme-styles.scss
new file mode 100644
index 00000000..03427b70
--- /dev/null
+++ b/src/stylesheets/theme-styles.scss
@@ -0,0 +1,226 @@
+:root {
+ --drgstn-primary: #347eee;
+ --drgstn-secondary: #fd6818;
+ --drgstn-success: #48C774;
+ --drgstn-warning: #ffdd00;
+ --drgstn-danger: #c527ff;
+ --drgstn-background: #ffffff;
+ --drgstn-panel: #f8f8f8;
+ --drgstn-info: #61c43d;
+ --drgstn-text-primary: #151515;
+ --drgstn-text-secondary: #eeeeee;
+ --drgstn-border: rgba(0, 0, 0, 0.2);
+ --drgstn-tooltip: rgba(74, 74, 74, 0.9);
+ --drgstn-panel-secondary: #ffffff
+}
+
+#appWindow {
+ background-color: var(--drgstn-background);
+
+
+ .card-header-title, .card-content, .title {
+ color: var(--drgstn-text-primary) !important;
+ }
+
+ .card {
+ background-color: var(--drgstn-panel) !important;
+ }
+
+ .card-footer, .card-footer-item:not(:last-child), .tabs ul, .tabs a .tabs a:hover {
+ border-color: var(--drgstn-border) !important;
+ }
+
+ .tabs a {
+ color: var(--drgstn-text-primary) !important;
+ }
+
+ .tabs.is-toggle a {
+ border-color: var(--drgstn-border) !important;
+ }
+
+ .tabs.is-toggle a:hover {
+ background-color: var(--drgstn-panel) !important;
+ }
+
+ .tabs li.is-active a, .tabs.is-toggle li.is-active a, .tabs a:hover {
+ border-color: var(--drgstn-primary) !important;
+ color: var(--drgstn-primary) !important;
+ }
+
+ .content h4, .content h6 {
+ color: var(--drgstn-text-primary) !important;
+ }
+
+ .has-text-normal, .modal-card-title {
+ color: var(--drgstn-text-primary) !important;
+ }
+
+ .modal-card, .modal-card-body {
+ background-color: var(--drgstn-panel) !important;
+ }
+
+ .modal-card-head, .modal-card-foot {
+ border-color: var(--drgstn-border) !important;
+ background-color: var(--drgstn-border) !important;
+ }
+
+ .modal-card-body {
+ .label {
+ color: var(--drgstn-text-primary) !important;
+ }
+
+ .input, .select select, .textarea, .box {
+ background-color: var(--drgstn-panel) !important;
+ border-color: var(--drgstn-border) !important;
+ color: var(--drgstn-text-primary) !important;
+ }
+ }
+
+
+ .fa-check {
+ color: var(--drgstn-success) !important;
+ }
+
+ app-task-list a, a.card-header-icon {
+ color: var(--drgstn-secondary) !important;
+ }
+
+ a:hover {
+ color: var(--drgstn-primary) !important;
+ }
+
+ .button.is-primary {
+ background-color: var(--drgstn-primary) !important;
+ border-color: transparent !important;
+ color: var(--drgstn-text-secondary) !important;
+ }
+
+ .button.is-primary.is-outlined {
+ background-color: transparent !important;
+ border-color: var(--drgstn-border) !important;
+ color: var(--drgstn-primary) !important;
+ }
+
+
+ .button.is-primary.is-focused, .button.is-primary:focus {
+ background-color: var(--drgstn-primary) !important;
+ border-color: transparent !important;
+ color: var(--drgstn-text-secondary) !important;
+ }
+
+ .button.is-primary.button.is-hovered, .button.is-primary.button:hover {
+ color: var(--drgstn-text-secondary) !important;
+ background-color: var(--drgstn-primary) !important;
+ }
+
+ .button.is-primary.is-focused:not(:active), .button.is-primary:focus:not(:active) {
+ box-shadow: none !important;
+ }
+
+ .button.is-danger.is-outlined {
+ border-color: var(--drgstn-danger) !important;
+ color: var(--drgstn-danger) !important;
+ }
+
+ .button.is-success {
+ background-color: var(--drgstn-success) !important;
+ color: var(--drgstn-text-secondary) !important;
+ }
+
+
+ .text-primary {
+ color: var(--drgstn-primary) !important;
+ }
+
+ footer a .text-danger:focus, footer a .text-danger:hover {
+ color: var(--drgstn-danger) !important;
+ }
+
+ footer .text-danger, a .text-danger {
+ color: var(--drgstn-danger) !important;
+ }
+
+ .is-primary {
+ background-color: var(--drgstn-primary) !important;
+ }
+
+
+ .ng-select .ng-select-container .ng-value-container .ng-input > input {
+ color: var(--drgstn-text-primary) !important;
+ }
+
+ .fa-search.investigational, .fa-pause {
+ color: var(--drgstn-warning) !important;
+ }
+
+
+ .fa-exclamation-triangle, .fa-times, .help, .delete:after, .delete:before, .modal-close:after, .modal-close:before {
+ color: var(--drgstn-danger) !important;
+ }
+
+ .fa-check {
+ color: var(--drgstn-success) !important;
+ }
+
+ .table {
+ background-color: var(--drgstn-panel) !important;
+ color: var(--drgstn-text-primary) !important;
+ }
+
+ .table thead td, .table thead th {
+ color: var(--drgstn-text-primary) !important;
+ }
+
+
+ .button.is-hovered, .button:hover, .button {
+ background-color: var(--drgstn-panel) !important;
+ color: var(--drgstn-text-primary) !important;
+ border-color: var(--drgstn-border) !important;
+ }
+
+ a {
+ color: var(--drgstn-secondary);
+ }
+
+ a:hover {
+ color: var(--drgstn-text-primary)
+ }
+
+
+ ::-webkit-scrollbar {
+ width: 5px;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: var(--scrollbarBG);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: var(--thumbBG);
+ border-radius: 6px;
+ border: 3px solid var(--scrollbarBG);
+ }
+
+ ::-moz-scrollbar-button:decrement,
+ ::-moz-scrollbar-button:increment,
+ ::-webkit-scrollbar-button:decrement,
+ ::-webkit-scrollbar-button:increment {
+ width: 0px;
+ }
+}
+
+// scrolllbar styles
+network-expander {
+ --thumbBG: var(--drgstn-primary);
+ --scrollbarBG: var(--drgstn-background);
+}
+
+network-expander {
+ scrollbar-width: thin;
+ scrollbar-color: var(--thumbBG) var(--scrollbarBG);
+}
+
+
+
+
+
diff --git a/src/theme.css b/src/stylesheets/theme.css
similarity index 90%
rename from src/theme.css
rename to src/stylesheets/theme.css
index 0c2c8ef9..8f68f595 100644
--- a/src/theme.css
+++ b/src/stylesheets/theme.css
@@ -10,6 +10,6 @@
--drgstn-text-primary: #363636;
--drgstn-text-secondary: #FFFFFF;
--drgstn-border: rgba(0, 0, 0, 0.2);
- --drgstn-tooltip: rgba(74,74,74,0.9);
+ --drgstn-tooltip: rgba(74, 74, 74, 0.9);
--drgstn-panel-secondary: #ffffff;
}
diff --git a/src/variables.scss b/src/stylesheets/variables.scss
similarity index 100%
rename from src/variables.scss
rename to src/stylesheets/variables.scss
diff --git a/src/theme-styles.scss b/src/theme-styles.scss
deleted file mode 100644
index cc422201..00000000
--- a/src/theme-styles.scss
+++ /dev/null
@@ -1,259 +0,0 @@
-:root {
- --drgstn-primary: #347eee;
- --drgstn-secondary: #fd6818;
- --drgstn-success: #48C774;
- --drgstn-warning: #ffdd00;
- --drgstn-danger: #c527ff;
- --drgstn-background: #ffffff;
- --drgstn-panel: #f8f8f8;
- --drgstn-info: #61c43d;
- --drgstn-text-primary: #151515;
- --drgstn-text-secondary: #eeeeee;
- --drgstn-border: rgba(0, 0, 0, 0.2);
- --drgstn-tooltip: rgba(74,74,74,0.9);
- --drgstn-panel-secondary: #ffffff
-}
-
-#appWindow {
- background-color: var(--drgstn-background);
-}
-
-.card-header-title, .card-content, .title {
- color: var(--drgstn-text-primary) !important;
-}
-
-.card {
- background-color: var(--drgstn-panel) !important;
-}
-
-.card-footer, .card-footer-item:not(:last-child), .tabs ul, .tabs a .tabs a:hover {
- border-color: var(--drgstn-border) !important;
-}
-
-.tabs a {
- color: var(--drgstn-text-primary) !important;
-}
-
-.tabs.is-toggle a {
- border-color: var(--drgstn-border) !important;
-}
-
-.tabs.is-toggle a:hover {
- background-color: var(--drgstn-panel) !important;
-}
-
-.tabs li.is-active a, .tabs.is-toggle li.is-active a, .tabs a:hover {
- border-color: var(--drgstn-primary) !important;
- color: var(--drgstn-primary) !important;
-}
-
-.content h4, .content h6 {
- color: var(--drgstn-text-primary) !important;
-}
-.has-text-normal, .modal-card-title {
- color: var(--drgstn-text-primary) !important;
-}
-
-.modal-card, .modal-card-body {
- background-color: var(--drgstn-panel) !important;
-}
-
-.modal-card-head, .modal-card-foot {
- border-color: var(--drgstn-border) !important;
- background-color: var(--drgstn-border) !important;
-}
-
-.modal-card-body {
- .label {
- color: var(--drgstn-text-primary) !important;
- }
-
- .input, .select select, .textarea, .box {
- background-color: var(--drgstn-panel) !important;
- border-color: var(--drgstn-border) !important;
- color: var(--drgstn-text-primary) !important;
- }
-}
-
-
-.fa-check {
- color: var(--drgstn-success) !important;
-}
-
-app-task-list a, a.card-header-icon {
- color: var(--drgstn-secondary) !important;
-}
-
-a:hover {
- color: var(--drgstn-primary) !important;
-}
-
-.button.is-primary {
- background-color: var(--drgstn-primary) !important;
- border-color: transparent !important;
- color: var(--drgstn-text-secondary) !important;
-}
-
-.button.is-primary.is-outlined {
- background-color: transparent !important;
- border-color: var(--drgstn-border) !important;
- color: var(--drgstn-primary) !important;
-}
-
-
-.button.is-primary.is-focused, .button.is-primary:focus {
- background-color: var(--drgstn-primary) !important;
- border-color: transparent !important;
- color: var(--drgstn-text-secondary) !important;
-}
-
-.button.is-primary.button.is-hovered, .button.is-primary.button:hover {
- color: var(--drgstn-text-secondary) !important;
- background-color: var(--drgstn-primary) !important;
-}
-
-.button.is-primary.is-focused:not(:active), .button.is-primary:focus:not(:active) {
- box-shadow: none !important;
-}
-
-.button.is-danger.is-outlined {
- border-color: var(--drgstn-danger) !important;
- color: var(--drgstn-danger) !important;
-}
-
-.button.is-success {
- background-color: var(--drgstn-success) !important;
- color: var(--drgstn-text-secondary) !important;
-}
-
-
-.text-primary {
- color: var(--drgstn-primary) !important;
-}
-footer a .text-danger:focus, footer a .text-danger:hover{
- color: var(--drgstn-danger) !important;
-}
-
-footer .text-danger, a .text-danger {
- color: var(--drgstn-danger) !important;
-}
-
-.is-primary {
- background-color: var(--drgstn-primary) !important;
-}
-
-
-.ng-select .ng-select-container .ng-value-container .ng-input > input {
- color: var(--drgstn-text-primary) !important;
-}
-
-.fa-search.investigational, .fa-pause {
- color: var(--drgstn-warning) !important;
-}
-
-
-.fa-exclamation-triangle, .fa-times, .help, .delete:after, .delete:before, .modal-close:after, .modal-close:before {
- color: var(--drgstn-danger) !important;
-}
-
-.fa-check {
- color: var(--drgstn-success) !important;
-}
-
-.table {
- background-color: var(--drgstn-panel) !important;
- color: var(--drgstn-text-primary) !important;
-}
-
-.table thead td, .table thead th {
- color: var(--drgstn-text-primary) !important;
-}
-
-
-.button.is-hovered, .button:hover, .button {
- background-color: var(--drgstn-panel) !important;
- color: var(--drgstn-text-primary) !important;
- border-color: var(--drgstn-border) !important;
-}
-
-a {
- color: var(--drgstn-secondary);
-}
-
-a:hover {
- color: var(--drgstn-text-primary)
-}
-
-
-.p-tooltip-text, .p-tooltip-arrow {
- background: var(--drgstn-tooltip) !important;
- border-radius: 2px !important;
- padding: .5rem 1rem .5rem 1rem !important;
- color: var(--drgstn-text-secondary) !important;
- font-size: .75rem !important;
-}
-
-.p-datatable .p-sortable-column .p-sortable-column-icon{
- color: inherit !important;
-}
-
-.p-datatable .p-datatable-tfoot > tr > td, .p-datatable .p-datatable-thead > tr > th {
- background-color: var(--drgstn-panel) !important;
- border-color: var(--drgstn-border) !important;
- color: var(--drgstn-text-primary) !important;
-}
-
-.p-datatable .p-sortable-column.p-highlight, .p-datatable .p-sortable-column:not(.p-highlight):hover, .p-datatable .p-sortable-column.p-highlight:hover {
- background-color: var(--drgstn-panel) !important;
- border-color: var(--drgstn-border) !important;
- color: var(--drgstn-primary) !important;
-}
-
-
-.p-checkbox .p-checkbox-box {
- border-color: var(--drgstn-text-primary) !important;
- color: var(--drgstn-text-primary) !important;
- background-color: var(--drgstn-panel) !important;
- border-radius: 1px !important;
- border-style: solid !important;
- width: 18px !important;
- height: 18px !important;
- position: relative !important;
-}
-
-.p-datatable .p-datatable-tbody > tr > td, .button.is-light {
- border-color: var(--drgstn-border) !important;
- background-color: var(--drgstn-panel) !important;
- color: var(--drgstn-text-primary) !important;
-}
-
-// scrolllbar styles
-network-expander {
- --thumbBG: var(--drgstn-primary);
- --scrollbarBG: var(--drgstn-background);
-}
-network-expander {
- scrollbar-width: thin;
- scrollbar-color: var(--thumbBG) var(--scrollbarBG);
-}
-::-webkit-scrollbar {
- width: 5px;
-}
-::-webkit-scrollbar-track {
- background: var(--scrollbarBG);
-}
-::-webkit-scrollbar-thumb {
- background: var(--thumbBG);
- border-radius: 6px;
- border: 3px solid var(--scrollbarBG);
-}
-::-moz-scrollbar-button:decrement,
-::-moz-scrollbar-button:increment,
-::-webkit-scrollbar-button:decrement,
-::-webkit-scrollbar-button:increment {
- width: 0px;
-}
-
-
-
-
--
GitLab