diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index bdd4760f78d37310b789227b5e9cc8e282051fe1..c20b9585102d8b5253edf0ec6b477c2296c32c83 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
@@ -5,7 +5,7 @@ mat-card {
max-width: 800px;
min-height: 300px;
max-height: 700px;
- background-color: var(--surface)!important;
+ background-color: var(--surface) !important;
}
mat-card-content > :first-child {
@@ -20,8 +20,9 @@ mat-card-content > :first-child {
width: 100%;
height: 75%;
border-radius: 0;
- color: var(--primary)!important;
+ color: var(--primary) !important;
transition: all 0.3s;
+
&:hover {
transform: scale(1.2)
}
@@ -38,30 +39,30 @@ mat-card-content > :first-child {
line-height: 100%;
}
-.main-icon{
+.main-icon {
font-size: 80px;
height: 80px;
width: 80px;
- line-height: 100%!important;
+ line-height: 100% !important;
}
.smallerIcon {
font-size: 60px;
height: 60px;
width: 60px;
- line-height: 100%!important;
+ line-height: 100% !important;
}
.room-short-id {
font-size: larger;
font-weight: bold;
- color: var(--on-surface)!important;
+ color: var(--on-surface) !important;
margin-top: 7%;
}
mat-grid-list {
margin-top: 0;
- max-height: 250px!important;
+ max-height: 250px !important;
}
.second {
@@ -69,35 +70,35 @@ mat-grid-list {
}
-
mat-card-header {
min-height: 80px;
margin: 0;
- height: 10%!important;
+ height: 10% !important;
}
mat-card-title {
height: 40%;
min-width: 150px;
- color: var(--on-surface)!important;
+ color: var(--on-surface) !important;
}
mat-card-subtitle {
height: 30%;
- color: var(--on-surface)!important;
+ color: var(--on-surface) !important;
}
mat-grid-tile {
height: 100%;
- padding: 2% 0 2% 0!important;
+ padding: 2% 0 2% 0 !important;
}
.mat-figure {
- margin-bottom: 20px!important;
+ margin-bottom: 20px !important;
}
mat-expansion-panel {
- background-color: var(--surface)!important;
+ background-color: var(--surface) !important;
+ color: var(--on-surface) !important;
min-width: 200px;
hyphens: auto;
}
@@ -137,6 +138,11 @@ markdown {
color: var(--on-dialog);
}
+::ng-deep .mat-menu-item .mat-icon {
+ background-color: var(--dialog);
+ color: var(--on-dialog);
+}
+
::ng-deep .mat-badge-content {
background: var(--secondary);
color: var(--on-secondary);
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index ab6c4de10178ae7884d8e64e53b9028e02b00f4a..e3d478ac37522aee96ef79a0e200a5fdafa6ae67 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -117,11 +117,11 @@ app-comment {
}
.beamer-icon {
- color: var(--blue);
+ color: var(--primary);
}
.answered-icon {
- color: var(--on-surface);
+ color: var(--primary);
}
.favorite-icon {
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index f5e4cd35c9ee17ffa22c71da4490cc8c12083fbc..7782d177d1efd0ad012bd574f9f50c5739959454 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -30,7 +30,7 @@ mat-card-content > :first-child {
}
.answered-icon {
- color: blue;
+ color: var(--primary);
}
.correct-icon {
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 4579e5ac295908d0bde2ec7e9ea33e8fe141667b..ae50f7268d439724d61889fd2871b09a5ac5d2b4 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -15,7 +15,7 @@
</h2>
<span class="fill-remaining-space"
*ngIf="router.url.includes('comments') && deviceType === 'desktop'"></span>
- <button *ngIf="router.url.includes('comments') && deviceType === 'desktop'"
+ <button *ngIf="router.url.includes('comments') && (user.role === 0 || user.role === 3) && deviceType === 'desktop'"
mat-raised-button class="question-focus-btn" routerLink="participant/room/{{shortId}}/comments/questionwall">
<mat-icon svgIcon="beamer" class="header-icons beamer-icon"></mat-icon>
<span class="question-focus-btn-txt">{{'header.question-wall' | translate}}</span>
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
index 25ea9a9def0ea71b29322760b302a5414f7b18c3..c3bae1e1240c9ed1c3b3281c52d3dc43b51eab69 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
@@ -1,244 +1,281 @@
-:host{
+:host {
- p,h1,h2,h3,h4,h5{
- padding:0;
- margin:0;
+ p, h1, h2, h3, h4, h5 {
+ padding: 0;
+ margin: 0;
}
- .test{
- width:100%;
- height:250px;
- box-shadow:inset 0 0 0 1px black;
+ .test {
+ width: 100%;
+ height: 250px;
+ box-shadow: inset 0 0 0 1px black;
}
- .icon-svg{
- color:var(--ars-header-color);
- height:18px;
- width:18px;
+ .icon-svg {
+ color: var(--ars-header-color);
+ height: 18px;
+ width: 18px;
}
- .pseudo-button{
- cursor:default;
- >*{
- cursor:default;
+ .pseudo-button {
+ cursor: default;
+
+ > * {
+ cursor: default;
}
}
- .questionwall{
- &-icon{
- font-family:'Material Icons', serif;
- font-weight:normal;
- font-style:normal;
- font-size:18px;
- line-height:18px;
- padding:0;
- margin:0;
- color:var(--ars-header-color);
+ .questionwall {
+ &-icon {
+ font-family: 'Material Icons', serif;
+ font-weight: normal;
+ font-style: normal;
+ font-size: 18px;
+ line-height: 18px;
+ padding: 0;
+ margin: 0;
+ color: var(--ars-header-color);
}
- &-header{
- background-color:var(--ars-foreground-color);
- border-bottom:solid 1px var(--ars-border-color);
- z-index:4;
+
+ &-header {
+ background-color: var(--ars-foreground-color);
+ border-bottom: solid 1px var(--ars-border-color);
+ z-index: 4;
}
- &-footer{
- background-color:var(--ars-foreground-color);
- border-top:solid 1px var(--ars-border-color);
- z-index:54;
- >*{
- height:100%;
- float:left;
+
+ &-footer {
+ background-color: var(--ars-foreground-color);
+ border-top: solid 1px var(--ars-border-color);
+ z-index: 54;
+
+ > * {
+ height: 100%;
+ float: left;
}
}
- &-comment{
- &-meta{
- display:flex;
- justify-content:flex-start;
- flex-direction:row;
- }
- &-border{
- &-on{
- box-shadow:inset 0px 0px 0px 1px var(--ars-button-color-light);
+
+ &-comment {
+ &-meta {
+ display: flex;
+ justify-content: flex-start;
+ flex-direction: row;
+ }
+
+ &-border {
+ &-on {
+ box-shadow: inset 0px 0px 0px 1px var(--ars-button-color-light);
}
- &-off{
- box-shadow:inset 0px 0px 0px 0px var(--ars-button-color-light);
+
+ &-off {
+ box-shadow: inset 0px 0px 0px 0px var(--ars-button-color-light);
}
}
- &-timestamp{
- color:var(--ars-paragraph-color);
- font-size:14px;
- line-height:18px;
- }
- &-user{
- color:var(--ars-header-color);
- font-size:14px;
- padding-right:8px;
- line-height:18px;
- }
- &-body{
- hyphens:auto;
- word-break:break-word;
- color:var(--ars-header-color);
- line-height:22px;
- white-space:normal;
- }
- &-btn{
- >button>*{
- color:var(--ars-button-color-light);
+
+ &-timestamp {
+ color: var(--ars-paragraph-color);
+ font-size: 14px;
+ line-height: 18px;
+ }
+
+ &-user {
+ color: var(--ars-header-color);
+ font-size: 14px;
+ padding-right: 8px;
+ line-height: 18px;
+ }
+
+ &-body {
+ hyphens: auto;
+ word-break: break-word;
+ color: var(--ars-header-color);
+ line-height: 22px;
+ white-space: normal;
+ }
+
+ &-btn {
+ > button > * {
+ color: var(--ars-button-color-light);
}
- >button:hover>*{
- color:var(--ars-button-color);
+
+ > button:hover > * {
+ color: var(--ars-button-color);
}
}
- &-notification{
- font-size:12px;
- text-transform:uppercase;
- letter-spacing:2px;
- line-height:18px;
- font-weight:600;
+
+ &-notification {
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ line-height: 18px;
+ font-weight: 600;
color: #cc4244;
}
}
- &-list{
- box-sizing:border-box;
- border-left:solid 1px var(--ars-border-color);
- &-filter{
- border-top:solid 1px var(--ars-border-color);
- border-bottom:solid 1px var(--ars-border-color);
+
+ &-list {
+ box-sizing: border-box;
+ border-left: solid 1px var(--ars-border-color);
+
+ &-filter {
+ border-top: solid 1px var(--ars-border-color);
+ border-bottom: solid 1px var(--ars-border-color);
}
- &-border-bottom{
- border-bottom:solid 1px var(--ars-border-color);
+
+ &-border-bottom {
+ border-bottom: solid 1px var(--ars-border-color);
}
- &-comments{
+
+ &-comments {
}
- &-scroll{
- width:100%;
- height:100%;
- display:flex;
- flex-direction:column;
- background-color:orange;
+
+ &-scroll {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: orange;
}
}
- &-present{
- font-size:45px;
- padding:16px 32px 16px 32px;
- color:var(--ars-header-color);
+
+ &-present {
+ font-size: 45px;
+ padding: 16px 32px 16px 32px;
+ color: var(--ars-header-color);
hyphens: auto;
- word-break:break-word;
- &-options{
- &-outer{
- width:0;
- height:0;
- position:relative;
+ word-break: break-word;
+
+ &-options {
+ &-outer {
+ width: 0;
+ height: 0;
+ position: relative;
}
- &-inner{
- width:180px;
- height:50px;
- position:relative;
- top:16px;
- left:-212px;
+
+ &-inner {
+ width: 180px;
+ height: 50px;
+ position: relative;
+ top: 16px;
+ left: -212px;
}
- &-slider{
- display:flex;
- flex-grow:1;
- overflow:visible;
+
+ &-slider {
+ display: flex;
+ flex-grow: 1;
+ overflow: visible;
}
}
- &-box{
- &-outer{
- display:flex;
- flex-direction:row;
- justify-content:center;
+
+ &-box {
+ &-outer {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
}
- &-inner{
- width:1000px;
- flex-shrink:1;
+
+ &-inner {
+ width: 1000px;
+ flex-shrink: 1;
}
}
- &-meta{
- padding-top:16px;
- display:flex;
- justify-content:start;
- flex-direction:row;
- :first-child{
- padding-left:32px;
+
+ &-meta {
+ padding-top: 16px;
+ display: flex;
+ justify-content: start;
+ flex-direction: row;
+
+ :first-child {
+ padding-left: 32px;
}
- &-icon{
- font-size:20px;
- line-height:20px;
+
+ &-icon {
+ font-size: 20px;
+ line-height: 20px;
}
- &-user{
- font-family:Roboto, 'sans-serif';
- font-size:18px;
- padding-left:4px;
- padding-right:16px;
- color:var(--ars-header-color);
+
+ &-user {
+ font-family: Roboto, 'sans-serif';
+ font-size: 18px;
+ padding-left: 4px;
+ padding-right: 16px;
+ color: var(--ars-header-color);
}
- &-timestamp{
- font-family:Roboto, 'sans-serif';
- font-size:18px;
- font-weight:400;
- color:var(--ars-paragraph-color);
+
+ &-timestamp {
+ font-family: Roboto, 'sans-serif';
+ font-size: 18px;
+ font-weight: 400;
+ color: var(--ars-paragraph-color);
}
}
- &-introduction{
- &-title{
- font-size:35px;
- padding:32px 32px 0 32px;
- color:var(--ars-header-color);
+
+ &-introduction {
+ &-title {
+ font-size: 35px;
+ padding: 32px 32px 0 32px;
+ color: var(--ars-header-color);
}
- &-desc{
- font-size:18px;
- padding:16px 32px 0 32px;
- color:var(--ars-paragraph-color);
+
+ &-desc {
+ font-size: 18px;
+ padding: 16px 32px 0 32px;
+ color: var(--ars-paragraph-color);
}
}
}
- &-screen{
- background-color:var(--ars-background-color);
+
+ &-screen {
+ background-color: var(--ars-background-color);
}
- &-text{
- &-color{
- color:var(--ars-paragraph-color);
+
+ &-text {
+ &-color {
+ color: var(--ars-paragraph-color);
}
}
}
- .bound img{
- max-width:100%;
+ .bound img {
+ max-width: 100%;
}
- .flex{
- &-column{
- &-center{
- display:flex;
- flex-direction:column;
- justify-content:center;
+ .flex {
+ &-column {
+ &-center {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
}
}
}
- .icon-color{
- color:var(--ars-button-color);
+ .icon-color {
+ color: var(--ars-button-color);
}
}
-:host ::ng-deep{
- .questionwall-present-markdown{
- max-width:100%;
- img{
- width:100%!important;
+:host ::ng-deep {
+ .questionwall-present-markdown {
+ max-width: 100%;
+
+ img {
+ width: 100% !important;
}
}
- .questionwall-present-options-slider{
- .mat-slider-wrapper{
- background-color:var(--ars-button-color-light);
+
+ .questionwall-present-options-slider {
+ .mat-slider-wrapper {
+ background-color: var(--ars-button-color-light);
}
- .mat-slider-thumb{
- background-color:var(--ars-button-color);
+
+ .mat-slider-thumb {
+ background-color: var(--ars-button-color);
}
- .mat-slider-track-fill{
- background-color:var(--ars-button-color);
+
+ .mat-slider-track-fill {
+ background-color: var(--ars-button-color);
}
}
}
diff --git a/src/styles.scss b/src/styles.scss
index cce9ece1896d4c2bc3796b5e216732914a484e35..76d55da714eec0862f4d4172fde7ca9b0d0cec8e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -59,7 +59,7 @@ markdown {
.oldtypo {
&-h2 {
color: var(--on-surface) !important;
- font-size: 18px !important;
+ font-size: 16px !important;
}
&-h3 {