12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151 |
- // @import './node_modules/@mdi/font/scss/materialdesignicons.scss';
- @import "./base.scss";
- @import "./colors.scss";
- @import "./common.scss";
- @import "./layout.scss";
- @import "./fonts/snap_it/snap_it.css";
- @import "./fonts/avara/avara.css";
- @import "./fonts/public-sans/public-sans.css";
- body{
- background-color: $back;
- font-family: 'public_sans';
- font-weight: 300;
- font-size: 16px;
- }
- // #app{
- // min-width: 1280px;
- // min-height: 800px;
- // }
- #app>header#header{
- // background-color: $front;
- pointer-events: none;
- display: flex;
- flex-direction: row;
- align-items: baseline;
- .row{
- display: flex;
- flex-direction: row;
- pointer-events: none;
- margin: 0;
- padding: 0;
- >*{
- margin-right: 1em;
- pointer-events: all;
- }
- // &.top{
- // }
- }
- div.row.title{
- padding: 0 0 0 1em;
- h1{
- font-family: "avara";
- margin: 0 1em 0 0;
- a{
- margin: 0;
- span.title{
- font-size: 2em;
- }
-
- }
- }
- }
- .row.top{
- >*{
- label,a{
- padding: 0;
- span{
- display:none;
- }
- }
- }
- }
- }
- #main-content{
- #map-backgrounds{
- .map-bg-canvas{
- mix-blend-mode: multiply;
- // filter: contrast(170%);
- &.gradient{
- // filter: blur(10px);
- }
- &.trame{
- // display:none;
- }
- }
-
- }
- #map-concernements{
- div.loading{
- position: absolute;
- top:50%;
- left:50%;
- z-index: 200;
- transform: translateX(-50%) translateY(-50%);
- width: 150px;
- display: block;
- text-align: center;
- // font-weight: 600;
- font-size: 1.134em;
- &::after{
- background: url(../assets/Ellipsis-5s-100px.svg);
- background-clip: content-box;
- background-size: contain;
- background-position: center;
- background-repeat: no-repeat;
- display: inline-block;
- width: 150px; height: 30px;
- border: #01ffe2;
- content: " ";
- }
- }
- }
- #map-nav{
- pointer-events: none;
- ul{
- display: flex;
- flex-flow: row;
- // gap: 1em;
- pointer-events: none;
- li{
- list-style: none;
- pointer-events: all;
- margin-right: 1em;
- a{
- @include btn();
- display: block;
- // line-height: 2.1;
- line-height: 1.7;
- &.active{
- // color: red;
- span.icon{
- background-color: rgba(255, 255, 255, 0.6);
- }
- }
- &.disabled{
- pointer-events: none;
- opacity: 0.4;
- cursor: default;
- }
- @media screen and (max-width: 1500px) {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- }
- }
- }
-
- }
- @media screen and (max-width: 1500px) {
- ul{
- gap: 0.5em;
- li{
- margin:0;
- a{
- span.label{
- display: none;
- }
- span.icon {
- width:2em;
- height:2em;
- border-radius: 1em;
- }
- }
- }
- }
- }
- @media screen and (max-width: 880px) {
- ul{
- flex-flow: column;
- width:fit-content;
- margin: 0;
- li{
- a{
- span.icon{}
- }
- }
- }
- }
- }
- $cartouch_width_full : 450px;
- $cartouch_width_medium: 350px;
- $cartouch_width_small: 250px;
- @mixin font_questions{
- font-size: 1em;
- font-weight: 500;
- line-height: 1.4;
- @media screen and (max-width: 1500px) {
- font-size: 0.882em;
- }
- @media screen and (max-width: 880px) {
- font-size: 0.756em;
- }
- }
- @mixin font_reponses{
- @include font_questions();
- font-weight: 100;
- // font-weight: 100;
- // font-size: 0.882em;
- // line-height: 1.4;
- // @media screen and (max-width: 1500px) {
- // font-size: 0.756em;
- // }
- // @media screen and (max-width: 880px) {
- // font-size: 0.693em;
- // }
- }
- #content{
- display: flex;
- gap: 0.5rem;
- @mixin main-cartouche{
- background-color: rgba(255, 255, 255, 1);
- box-sizing: border-box;
- width:$cartouch_width_full;
- height: 100%;
- padding: 2rem 2rem 1rem;
- overflow-y: auto;
- overflow-x: hidden;
- //
- display: flex;
- flex-direction: column;
- @media screen and (max-width: 1500px) {
- width: $cartouch_width_medium;
- padding: 1rem 1rem 0.5rem;
- }
- @media screen and (max-width: 880px) {
- width: $cartouch_width_small;
- padding: 0.5rem 0.5rem 0.5rem;
- }
- }
- section.static{
- @include main-cartouche();
- h2{
- font-weight: 400;
- font-size: 1.323em;
- padding: 1em 0;
- }
- p:not(:last-of-type){
- margin-bottom: 1em;
- }
- img{
- width: 100%;
- }
- iframe{
- width: 100%;
- aspect-ratio: 4 / 3;
- }
- }
- section.concernement{
- @include main-cartouche();
- justify-content: flex-end;
- // layout
- >header{
- flex: 0 0 auto;
- padding: 0 0 1em 0;
- }
- >main{
- flex: 1 1 auto;
- }
- >footer{
- flex: 0 0 auto;
- padding: 0.5em 0 0;
- margin: 1.5em 0 0;
- border-top: #01ffe2 solid 0.5px;
- }
-
- >header{
- flex: 0 0 auto;
- }
- // contents
- $gradpad: 20px;
- >header{
- display: flex;
- // height: 8rem;
- flex-direction: column;
- justify-content: flex-end;
-
- // gradiaent over scroll
- position: relative;
- &:before{
- content: ' ';
- display: block;
- position:absolute;
- width: 100%; height:$gradpad;
- z-index: 500;
- bottom: 0; left: 0; margin-bottom: - $gradpad;
- // background-color: #01ffe2;
- background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
- }
- div.entite{
- // min-height: 10em;
- // display: flex;
- // flex-direction: column;
- // justify-content: flex-end;
- padding-bottom: 0.5em;
- label, h3{
- // height: 70px;
- box-sizing: border-box;
- // padding: 0 0 1em 0;
- // flex-grow: auto;
- }
- h3{
- font-weight: 400;
- font-size: 1.323em;
- position: relative;
- overflow: visible;
- &::before{
- content:"\2022";
- color: #01ffe2;
- position:absolute;
- left:-0.45em;
- font-weight: bold;
- }
- }
- // span.menacemaintient{
- // display: block;
- // font-weight: 100;
- // font-size: 0.882em;
- // padding: 1em 0;
- // }
- }
- div.concernement-cartouche-icons{
- h2{
- font-weight: 400;
- font-size: 1.512em;
- // &.faded{
- // font-weight: 100;
- // }
- padding-bottom: 0.5em;
- overflow: hidden;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 20;
- max-height: 20em;
- transition: -webkit-line-clamp 0.5s ease-in-out, max-height 0.5s ease-in-out;
- &.ellipsed{
- max-height: 2em;
- -webkit-line-clamp: 2;
- }
- }
- // nav.icons{
- // ul{
- // display: flex;
- // flex-direction: row;
- // li{
- // margin: 0.4em 0.6em 0 0;
- // >svg{
- // display: inline-block;
- // $d: 35px;
- // width:$d; height:$d;
- // border-radius: $d * 0.5;
- // background-color: #fff;
- // padding: 2px;
- // box-sizing: border-box;
- // color: #333;
- // // font-size: 2em;
- // }
- // }
- // }
- // }
- }
- label{
- display: block;
- height:auto;
- transition: max-height 0.5s ease-in-out,padding 0.5s ease-in-out;
- max-height: 100px;
- overflow: hidden;
- &.hidden{
- max-height: 0;
- padding-bottom: 0;
- }
- }
- }
-
- >main{
- overflow-y: auto;
- padding-top: $gradpad;
- >section:not(:last-of-type),
- .multiple >section:not(:last-of-type){
- padding-bottom: 2em;
- }
- figure{
- margin:0.5em 0;
- img{
- max-width: 100%;
- }
- }
- section.entite{
- >section{
- padding-bottom: 2em;
- }
- // >section.image{
- figure{
- // border: #333 1px solid;
- position: relative;
- img{
- max-width: 100%;
- }
- figcaption{
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- @include font_reponses();
- background-color: rgba(0,0,0,0.8);
- // opacity: 0.8;
- color: #fff;
- padding: 0.3em;
- opacity: 0;
- transition: all 0.2s ease-in-out;
- }
- &:hover figcaption{
- opacity: 1;
- }
- }
- // }
- .sources{
- // padding-top: 1em;
- .source{
- padding-top: 0.5em;
- >section{
- padding-bottom: 0.5em;
- }
- // div.date{
- // display: block;
- // font-weight: 100;
- // font-size: 0.882em;
- // padding: 0 0 0.5em 0;
- // }
- >section.description{
- >div{
- // @include font_reponses();
- font-size: inherit;
- // padding-bottom: 1em;
- }
- }
- section.audio{
- padding:1em 0;
- label{
- padding: 0;
- }
- div.plyr__controls{
- padding:0;
- }
- }
- section.liens{
- a{
- text-decoration: underline;
- @include font_reponses();
- }
- }
- }
- }
- }
- // PUISSANCE D'AGIR
- ul.besoins{
- li.besoin{
- position: relative;
- label.mdi:before{
- font-size: 0.8em;
- padding-right: 0.2em;
- }
- svg.open-btn{
- position: absolute;
- right:0; top:0;
- cursor: pointer;
- }
- >header{
- padding: 0 0 0 0;
- cursor: pointer;
- >label{
- padding:0.3em 0 0.5em 0;
- svg{
- width:0.7em; height:0.7em;
- }
- &.hover{
- svg{
- color:#01ffe2;
- }
- }
- }
- h4.besoin-description{
- font-weight: 400;
- font-size: 1.2em;
- // padding: 0.5em 0;
- }
- }
- ul.reponses{
- overflow: hidden;
- max-height: 1px;
- transition: all 0.7s ease-in-out;
- li.reponse{
- padding:0.5em 0 0;
- &:last-of-type{
- padding: 0.5em 0 1em;
- }
- >label{
- padding:0 0 0.5em 0;
- svg{
- width:0.7em;height:0.7em;
- }
- &.hover{
- svg{
- color:#01ffe2;
- }
- }
- }
- section{
- &:not(:last-of-type){
- padding: 0 0 0.5em 0;
- }
- label{ padding:0; }
- p{margin:0;}
- }
- }
- }
- a.contribute-link{
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- align-items:flex-end;
- font-weight: 100;
- font-size: 0.882em;
- svg{
- width:1em; height:1em; margin-right: 0.5em;
- }
- }
- &.opened{
- ul.reponses{
- max-height: 1000px;
- }
- }
- padding-bottom: 0.5em;
- border-bottom: #aaa 1px solid;
- margin-bottom: 1em;
- }
- }
- // CERCLE POLITIQUE
- section.content-doleances{
- >main{
- padding: 1em 0;
- h5{
- margin: 0 0 0.5em 0;
- }
- }
- label{
- margin:0;
- padding:0 0 0.5em 0;
- }
- p{
- margin:0;
- padding:0 0 0.5em 0;
- }
- ul{
- // padding:0 0 0 1em;
- }
-
- // .v-select{
- // input.vs__search{
- // display: none;
- // }
- // div.vs__dropdown-toggle{
- // border-radius: 0;
- // border: none;
- // }
- // div.vs__selected-options{
- // padding: 0;
- // span.vs__selected{
- // padding: 0;
- // margin: 0;
- // font-weight: 400;
- // font-size: 1.323em;
- // color:inherit;
- // line-height: 1.15;
- // }
- // }
- // ul.vs__dropdown-menu{
- // border-radius: 0;
- // border: none;
- // li.vs__dropdown-option{
- // white-space:normal;
- // padding:1em 1em 0 1em;
- // &:last-of-type{
- // padding:1em;
- // }
- // color: #aaa;
- // transition: color 0.2s ease-in-out;
- // &.vs__dropdown-option--highlight{
- // color:#000;
- // background-color: #fff;
- // }
- // }
- // }
- // }
- }
- }
- >footer{
- section.infos{
- position: relative;
- svg.open-btn{
- position: absolute;
- right:0;
- top: 0;
- cursor: pointer;
- }
- div.wrapper{
- overflow-y: hidden;
- max-height: 0.1px;
- transition: all 0.5s ease-in-out;
- &.opened{
- max-height: 200px;
- }
- }
- div.info{
- font-size: 0.882em;
- font-weight: 100;
- // white-space:nowrap;
- &.author{
- cursor: pointer;
- }
- >span.label{
- font-weight: 100;
- }
- p{
- // display: inline-block;
- font-size: inherit;
- font-weight: inherit;
- }
- }
- }
- section.sliders{
- padding: 1em 0 0.5em;
- section.historique,
- section.details{
- >label{
- padding:0;
- }
- }
- .vue-slider-process{
- background-color: #01ffe2;
- height: 2px!important;
- top:calc(50% - 1px)!important;
- }
- }
- }
-
- h3{
- font-weight: 400;
- font-size: 1.2em;
- }
- h4{
- font-weight: 400;
- font-size: 1.2em;
- }
- h5{
- font-weight: 400;
- font-size: 1.1em;
- }
- section>div, p{
- // font-size: 1em;
- // font-weight: 300;
- // line-height: 1.40;
- @include font_reponses();
- }
- label,
- span.date{
- @include font_questions();
- display: block;
- padding: 0 0 1em 0;
- }
- ul, li{
- padding:0; margin:0;
- list-style: none;
- }
- p{
- white-space: pre-line;
- }
-
- }
- section.search{
- @include main-cartouche();
- header{
- flex: 0 0 auto;
- padding: 1em 0;
- h2{
- font-weight: 400;
- font-size: 1.323em;
- padding: 0 0 0.5em;
- }
- form{
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- &>*{
- flex: 0 1 auto;
- }
-
- .content-type-checkboxes{
- padding:1em 0;
- display: flex;
- flex-direction: row;
- label{
- padding: 0 1em 0 0.2em;
- }
- }
- }
- }
- main{
- flex: 1 1 auto;
- overflow-y: auto;
- section.results{
- ul{
- margin:0;
- padding:0;
- li{
- margin:0;
- padding:0 0 1em 0;
- list-style: none;
-
- h1{
- // font-weight: 400;
- // font-size: 1.323em;
- font-size: 1em;
- font-weight: 300;
- // line-height: 1.4;
- //
- margin: 0;
- cursor: pointer;
- }
- h2 {
- font-size: 0.882em;
- font-weight: 100;
- margin: 0;
- padding: 0;
- cursor: pointer;
- }
- }
- }
- }
- }
- footer{
- flex: 0 0 auto;
- }
- }
- &.recit-opened {
- padding-bottom: 3rem;
- }
- p{
- a{
- text-decoration: underline;
- }
- }
- nav.doleance-switch{
- position: fixed;
- pointer-events: none;
- overflow: hidden;
- top: 0; left: 0;
- width: calc(100vw - $cartouch_width_full - 0.5rem);
- height: 100vh;
- div{
- pointer-events: all;
- $height:60vh;
- position: absolute;
- top: calc((100vh - $height) * 0.51);
- cursor: pointer;
- width:605px;
- height: $height;
- background-image: url(../assets/cercle_politique.png);
- background-size: cover;
-
- visibility: hidden;
-
- &.visible{
- visibility: visible;
- }
-
- &:hover:not(.animeleft):not(.animeright){
- background-image: url(../assets/cercle_politique-hover.png);
- }
- &.prev{
- left: calc(-605px + 150px);
- background-position: right;
- }
- &.next{
- right:calc(-605px + 150px);
- }
- transition: opacity 1s ease-in-out;
- transform: translateX(0);
- &.animeleft,
- &.animeright{
- // animation-duration: 1.5s;
- $duration: 0.9s;
- $delay: 0.4s;
- transition: opacity $duration ease-in-out $delay,transform $duration ease-in-out $delay;
- opacity: 0;
- }
- &.animeleft{
- // animation-name: animeleft;
- transform: translateX(calc(-100vw / 2));
- }
- &.animeright{
- // animation-name: animeright;
- transform: translateX(calc(100vw / 2));
- }
- // @keyframes animeleft {
- // from {
- // transform: translateX(0);
- // opacity: 1;
- // }
- // to {
- // transform: translateX(calc(-100vw / 2));
- // opacity: 0;
- // }
- // }
- // @keyframes animeright {
- // from {
- // transform: translateX(0);
- // opacity: 1;
- // }
- // to {
- // transform: translateX(calc(100vw / 2));
- // opacity: 0;
- // }
- // }
- }
- }
- }
- #recit-player{
- --plyr-color-main: #01ffe2;
- --plyr-control-icon-size: 14px;
- --plyr-audio-controls-background: rgba(255,255,255,0.4);
- --plyr-control-spacing: 4px;
- --plyr-range-track-height: 2px;
- // --plyr-control-radius: 10px;
- >div.plyr{
- width:450px;
- >div.plyr__controls{
- border-radius: 3px;
- // border: #fff 1px solid;
- }
- @media screen and (max-width: 1500px) {
- width: $cartouch_width_medium
- }
- @media screen and (max-width: 880px) {
- width: $cartouch_width_small;
- }
- }
- &:not(.visible){
- display: none;
- }
- }
- #map-popup{
- position: absolute;
- z-index: 10;
- pointer-events: none;
- // outline: 1px solid red;
- // top:0;
- // left: 0;
- .popup-content-wrapper{
- // display: flex;
- // flex-direction: row;
- // align-items:center;
- position: relative;
- .concernement-map-popup{
- background-color: white;
- padding: 0.5em;
- border-radius: 3px;
- max-width: 30em;
- div.info.author{
- font-size: 0.882em;
- font-weight: 100;
- // white-space:nowrap;
- }
- ul.icons{
- display: flex;
- flex-direction: row;
- padding: 0.5em 0 0;
- margin: 0;
- li{
- list-style:none;
- padding:0;
- margin:0 1em 0 0;
- }
- }
- }
- .concernement-map-popup-recit{
- padding-left: 0.8em;
- position: absolute;
- top:3px;
- left:100%;
- >svg{
- display: inline-block;
- $d: 55px;
- width:$d; height:$d;
- border-radius: $d * 0.5;
- background-color: #fff;
- padding: 10px;
- box-sizing: border-box;
- color: #333;
- // font-size: 2em;
- }
- }
- .entite-map-popup,
- .entite-proximite-reference-map-popup,
- .besoin-map-popup,
- .reponse-map-popup{
- background-color: white;
- padding: 0.5em;
- border-radius: 3px;
- max-width: 30em;
- >div{
- margin-bottom: 0.5em;
- label{
- display: block;
- font-weight: 100;
- font-size: 0.882em;
- }
- }
- }
- .entite-map-popup{
- span.point{
- font-weight: 900;
- color: #01ffe2;
- }
- }
- .entite-proximite-reference-map-popup{
- span.point{
- font-weight: 900;
- }
- h1.ref-entite span.point{
- color: #01ffe2;
- }
- div.conjunction,h2{
- font-size: 0.756em;
- font-weight: 400;
- margin: 0.5em
- }
- }
- h1, h2, span, div{
- font-size: 1em;
- font-weight: 400;
- }
- // h1{
- // padding-bottom: 0.5em;
- // }
- }
- &:before{
- content: "";
- display: block;
- height: 0;
- width: 2.9em;
- border-top: 1px solid #01ffe2;
- position: absolute;
- }
- &[pos="top-right"]{
- padding: 0 0 2em 2em;
- &:before{
- bottom: 0;
- left: 0;
- transform-origin: 0 0;
- transform: rotate(-45deg);
- }
- }
- &[pos="bottom-right"]{
- padding: 2em 0 0 2em;
- &:before{
- top: 0;
- left: 0;
- transform-origin: 0 0;
- transform: rotate(45deg);
- }
- }
- &[pos="top-left"]{
- padding: 0 2em 2em 0;
- &:before{
- bottom: 0;
- right: 0;
- transform-origin: right bottom;
- transform: rotate(45deg);
- }
- .popup-content-wrapper{
- flex-direction:row-reverse;
- .concernement-map-popup-recit{
- padding-right: 0.8em;
- }
- }
- }
- &[pos="bottom-left"]{
- padding: 2em 2em 0 0;
- &:before{
- top: 0;
- right: 0;
- transform-origin: right top;
- transform: rotate(-45deg);
- }
- .popup-content-wrapper{
- flex-direction:row-reverse;
- .concernement-map-popup-recit{
- padding-right: 0.8em;
- }
- }
- }
- }
- }
- *[contenteditable="true"] {
- background: #eee;
- border: #eee 2px solid;
- border-radius: 5px;
- $p:0.3em;
- padding:$p;
- margin:0 0 0 -$p;
- box-sizing: border-box;
- transition: all 0.2s ease-in-out;
- &:focus{
- outline: none;
- border: #01ffe2 2px solid;
- }
- }
- .editable{
- background: #eee;
- border: #eee 2px solid;
- border-radius: 5px;
- padding: 0.3em!important;
- margin: 1em 0 0;
- font-size: 0.756em;
- &>*{
- display: inline-block!important;
- padding: 0!important;
- cursor: pointer;
- }
- }
- div.editable-image,
- div.editable-video,
- div.editable-audios{
- background: #eee;
- max-width: 100%;
- div.file-btn{
- border: #eee 2px solid;
- border-radius: 5px;
- margin: 1em 0 0;
- font-size: 1em;
- width: 100%;
- height: 100px;
- line-height:100px;
- text-align: center;
- transition: all 0.2s ease-in-out;
- position: relative;
- >svg{
- display: inline-block;
- vertical-align: middle;
- width:50px; height:50px;
- color: #333;
- }
- cursor: pointer;
- box-sizing: border-box;
- &:hover{
- border: #01ffe2 2px solid;
- }
- }
- div.video-btn{
- cursor: pointer;
- }
- div.editable-wrapper{
- padding:0.3em 0.5em;
- margin:0.5em 0;
- }
- div.delete-btn{
- cursor: pointer;
- }
- input[type="file"]{
- display: none;
- }
- &.can-update{
- .plyr--audio{
- .plyr__controls{
- background-color: transparent;
- }
- }
- }
- }
- li.link-editable{
- // background-color: #eee;
- // border: #eee 2px solid;
- display: flex;
- flex-direction: row;
- vertical-align: middle;
- margin: 0.5em 0!important;
- gap: 0.5em;
- >input{
- background-color: #eee;
- border: #eee 2px solid;
- overflow: hidden;
- text-wrap:nowrap;
- width: 40%;
- &:focus{
- outline: none;
- border: #01ffe2 2px solid;
- }
- &.title{
- flex: 0 0 auto;
- }
- &.url{
- flex: 1 0 auto;
- }
- }
- div.delete-btn{
- flex: 0 0 auto;
- }
- }
|