Ottenere il CSS dopo transform: scale() e transform-origin

di
fede220
il
9 risposte
F
fede220
Pochi posts
Iscritto da
mar, 2020
Messaggi:
32

Ottenere il CSS dopo transform: scale() e transform-origin

Salve a tutti in una pagina web ho un CSS con transform: scale() e transform-origin. Ho letto su internet che esiste Element.getBoundingClientRect() ma fa ottenere solo le dimensioni e le posizioni degli elementi relativi alla viewport. Chiedo a qualcuno se è possibile tramite Element.getBoundingClientRect() ottenere il CSS con i valori (anche font-size, ecc) dopo transform: scale() e transform-origin implementando nella pagina web codice JavaScript apposito per ottenere il CSS nella console del browser. Spero che esiste un modo per ottenere per ottenere il CSS perchè ho già provato ma non so come farlo (non riesco ad ottenere il CSS con i valori dopo le trasformazioni).

9 Risposte

  • andreadev
    andreadev
    Utente Attivo
    Iscritto da
    ago, 2020
    Messaggi:
    94

    Re: Ottenere il CSS dopo transform: scale() e transform-origin

    Ciao Fede,
    Quando applichi i valori transform, il css non viene modificato.
    Il modo più sicuro che conosco per ottenere il css è usare la funzione getComputedStyle: 
    
let element = document.getElementById(...);
let style = window.getComputedStyle(element);
    Comunque, anche questa tecnica non ti mostrerà alcuna differenza fra i css prima e dopo l'applicazione del transform.
    Facendo dei test, ho comunque notato che il metodo getBoundingClientRect dell'elemento ti consente di ottenere almeno le dimensioni (altezza / larghezza) considerando anche l'ingrandimento.
    Per altre cose, come la dimensione del font e altro, dovrai calcolarlo in base al fattore di ingrandimento. Per esempio: 
    
let element = document.getElementById(...);
let style = window.getComputedStyle(element);

// Se il css è: transform: scale(2);
let scaleFactor = 2;
let newFontSize = parseFloat(style.fontSize) * scaleFactor;
    Unico problema, non c'è un modo semplice per ottenere il valore della proprietà transform, quindi questo codice è utile più che altro se hai già quella variabile nel codice javascript.
    In alternativa, potrai controllare la differenza fra la larghezza (o l'altezza) dell'elemento prima e dopo il transform. Con getComputedStyle hai le dimensioni originali e con getBoundingClientRect quelle modificate. A questo punto puoi ottenere il fattore di ingrandimento confrontando le dimensioni. In pratica il codice assomiglierebbe a questo: 
    
// Otteniamo gli stili originali e modificati
let style = getComputedStyle(element);
let rect = element.getBoundingClientRect();

// Otteniamo i vari dati
let oldHeight = parseFloat(style.height);
let newHeight = rect.height;
let oldFontSize = parseFloat(style.fontSize);

// Otteniamo l'ingrandimento
let scaleFactor = newHeight / oldHeight;

// Calcoliamo il valore modificato del font-size
let newFontSize = oldFontSize * scaleFactor;
    Questo esempio è per la dimensione del font, ma può funzionare anche per altre proprietà. Probabilmente varrebbe la pena creare una funzione per questo codice.

    Spero di esserti stato utile
  • F
    fede220
    Pochi posts
    Iscritto da
    mar, 2020
    Messaggi:
    32

    Re: Ottenere il CSS dopo transform: scale() e transform-origin

    Ciao scusa se rispondo adesso ma il codice visualizza i valori dopo le trasformazioni nella console degli strumenti di sviluppo del browser? Lo devo inserire dentro il tag head o nel body? Non essendo esperto di programmazione non saprei come creare la funzione per il codice. Grazie per la cordialità.
  • andreadev
    andreadev
    Utente Attivo
    Iscritto da
    ago, 2020
    Messaggi:
    94

    Re: Ottenere il CSS dopo transform: scale() e transform-origin

    Figurati, non c'è di che.
    Per il codice, quello è solo un esempio funzionante che ti può dare una dritta.
    Non posso dare codice "pronto all'uso" al 100% perché non conosco tutti i dettagli della tua situazione.

    Comunque, quello che ti posso dire al riguardo è che se il codice va ad intaccare (o anche solo a leggere) il DOM (cioè gli elementi HTML della pagina) allora andrebbe messo come ultimo elemento della pagina. Questo perché il codice javascript viene eseguito appena dopo essere stato letto.

    Ovviamente ci sono diversi modi per evitare di metterlo in fondo, ma questa è senz'altro la soluzione più semplice.

    Per quanto riguarda il codice sopra, attualmente crea solo una variabile chiamata "newFontSize" con il valore della grandezza del font tenendo conto dell'ingrandimento.

    Se ti stai affacciando per la prima volta a javascript, allora ti consiglio di iniziare guardando alcune guide di base sul linguaggio, così riuscirai ad avere più dimestichezza

    Questo potrebbe essere un buon punto di partenza nel caso.

  • F
    fede220
    Pochi posts
    Iscritto da
    mar, 2020
    Messaggi:
    32

    Re: Ottenere il CSS dopo transform: scale() e transform-origin

    Ok grazie ti incollo il codice CSS per farti capire quello che voglio fare. 
    html, body, select { width:400%;
height:400%;
transform: scale(5);
transform-origin: 0 0;
background:#181a1b;
color:#e8e6e3;
}
* { margin:0; padding:0; }



/* Few resets for within the kiwi container */
#kiwi {
    overflow:hidden; position:relative;
    height:100%;
}
#kiwi * { margin:0px; padding:0px; }
#kiwi p { margin:0.5em 0; }
#kiwi a { color:#e8e6e3; text-decoration:none; cursor:pointer; }
#kiwi a img { border:none; }
#kiwi .format_span a { color: inherit; background-color: inherit; text-decoration: inherit; font-style: inherit; font-weight: inherit;}

#kiwi h1,
#kiwi h2,
#kiwi h3 {
    margin-top: 22px;
    margin-bottom: 11px;
}
#kiwi h4,
#kiwi h5,
#kiwi h6 {
    margin-top: 11px;
    margin-bottom: 11px;
}
#kiwi h1 { font-size: 46px; }
#kiwi h2 { font-size: 40px; }
#kiwi h3 { font-size: 34px; }
#kiwi h4 { font-size: 28px; }
#kiwi h5 { font-size: 22px; }
#kiwi h6 { font-size: 16px; }


/**
 * Main layout blocks
 */
#kiwi .toolbar { position:absolute; top:0px; width:100%; display:none; z-index:1; }
#kiwi .panels { position:absolute; left:0px; right:200px; bottom:100px; top:100px; }
#kiwi .right_bar { position:absolute; right:0px; width:200px; bottom:100px; top:100px; overflow:visible; }
#kiwi .right-bar-content { position:relative; height:100%; z-index:0; }
#kiwi .controlbox { position: absolute; bottom:0px; width:100%; z-index: 1; display:none; }
#kiwi .memberlists_resize_handle {
    position: absolute; width:10px; z-index:1; cursor:w-resize;
}


#kiwi .toolbar .tabs { margin-right: 200px; overflow: hidden; }
#kiwi .toolbar .panellist {
    overflow: hidden;
    display:block;
}
#kiwi .toolbar .panellist li {
    list-style: none;
    display:inline-block; position:relative;
    padding:5px; margin:3px;
    cursor: pointer;
}

#kiwi .toolbar .panellist .active { padding-right:23px; }
#kiwi .toolbar .panellist .alert_highlight { font-weight: bold; }
#kiwi .toolbar .panellist .alert_activity { font-weight: bold; }
#kiwi .toolbar .panellist .alert_action { font-weight: bold; }

#kiwi .toolbar .panellist li { width: auto; text-align: left; }
#kiwi .toolbar .panellist li .part { position: absolute; top: 7px; right: 5px; }
#kiwi .toolbar .panellist li .part:before { content:"[x]"; }
#kiwi .toolbar .panellist li .part:hover { color: #ff6161; }
#kiwi .toolbar .panellist li img.icon { left:5px; top:2px; height:auto; width:auto; }

#kiwi .toolbar .connections { overflow:hidden; }
#kiwi .toolbar .connections .connection { float:left; }
#kiwi.chanlist_treeview .toolbar .connections .connection { float:none; }
#kiwi .toolbar .connections .panellist { display:block; }
#kiwi .toolbar .connections .panellist:after { content:""; }

#kiwi .status_message {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    background: #FFF;
    border-bottom: 1px solid;
    text-align: center;
}

#kiwi .channel_tools {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}
#kiwi .channel_tools i {
    width: 32%;
	color: #aba499;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

#kiwi .panel_container { overflow:auto; height:100%; }
#kiwi .panel {
    overflow:auto;
    border:none; display: none;
}

#kiwi .messages a {}
#kiwi .messages.active { display:block; }

#kiwi .messages .msg {}
#kiwi .messages .msg .time { display:inline; }
#kiwi .messages .msg .nick { display:inline; cursor: pointer; }
#kiwi .messages .msg .text { display:inline; }

#kiwi .messages .msg.action .nick { display:none; }
#kiwi .messages .msg.action .text { }
#kiwi .messages .msg.action.join { }
#kiwi .messages .msg.action.part .text { }
#kiwi .messages .msg.action.quit .text { }
#kiwi .messages .msg.action.kick .text { }
#kiwi .messages .msg.status .nick { display:none; }
#kiwi .messages .msg.status .text { }
#kiwi .messages .msg.topic .nick { display:none; }
#kiwi .messages .msg.topic .text { }
#kiwi .messages .msg.motd { }
#kiwi .messages .msg.motd .nick { }
#kiwi .messages .msg.motd .text { }
#kiwi .messages .msg.whois .nick { }
#kiwi .messages .msg.whois .text { }
#kiwi .messages .msg.error .text { }

#kiwi .messages .msg.global_nick_highlight { }
#kiwi .messages .msg.highlight { }

#kiwi .messages .msg .media .media_content { white-space: normal; }


#kiwi .right_bar { border-left: 1px solid #8A8A8A; }
#kiwi .right_bar.disabled { width:0; }
#kiwi .right_bar.disabled .channel_tools,
#kiwi .right_bar.disabled .memberlists { display:none; }

#kiwi .right-bar-toggle {
    position: absolute;
    top: 10px;
    left: -2.3em;
    width: 1.5em;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5em;
    background: #282b2d;
    border: 1px solid;
    cursor: pointer;

    /*
        Some mobile browsers only support long-hand border-radius, and using large
        px values instead of 50% ensures the circle
    */
    -webkit-border-top-left-radius: 500px;
    -webkit-border-top-right-radius: 500px;
    -webkit-border-bottom-left-radius: 500px;
    -webkit-border-bottom-right-radius: 500px;
    border-top-left-radius: 500px;
    border-top-right-radius: 500px;
    border-bottom-left-radius: 500px;
    border-bottom-right-radius: 500px;
}

/* The active channels nicklist */
#kiwi .memberlists {
    position: absolute;
	background: #1d2021;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    overflow-y: auto;
    padding-top: 50px;
}
#kiwi .memberlists > div { display:none; }
#kiwi .memberlists > div.active { display:block; }
#kiwi .memberlists ul li { overflow-y:auto; overflow-x:hidden; cursor:pointer; }
#kiwi .memberlists ul li a.nick { }

/* The userbox shown when clicking a nick */
#kiwi .userbox { position:relative; width:100px; }
#kiwi .userbox a { }
#kiwi .userbox a i { width:1em; text-align:center; }


/* Emoticons */
#kiwi .emoticon {
    display: inline-block;
    height: 15px; width: 17px;
    overflow: hidden;
    font-size: 0;
    background: url(kiwi/assets/img/emoticons.png) no-repeat;
}
#kiwi .emoticon.smile { background-position:0px 0; }
#kiwi .emoticon.sad { background-position:-25px 0; }
#kiwi .emoticon.lion { background-position:-50px 0; }
#kiwi .emoticon.winky_lion { background-position:-75px 0; }
#kiwi .emoticon.confused { background-position:-100px 0; }
#kiwi .emoticon.cry { background-position:-125px 0; }
#kiwi .emoticon.wink { background-position:-150px 0; }
#kiwi .emoticon.wink_happy { background-position:-175px 0; }
#kiwi .emoticon.tongue { background-position:-200px 0; }
#kiwi .emoticon.cringe_tongue { background-position:-225px 0; }
#kiwi .emoticon.shocked { background-position:-250px 0; }
#kiwi .emoticon.happy { background-position:-275px 0; }
#kiwi .emoticon.eyebrows { background-position:-300px 0; }
#kiwi .emoticon.heart { background-position:-325px 0; }
#kiwi .emoticon.doh { background-position:-373px 0; }
#kiwi .emoticon.big_grin { background-position:-398px 0; }
#kiwi .emoticon.wide_eye_right { background-position:-423px 0; }
#kiwi .emoticon.wide_eye_left { background-position:-448px 0; }
#kiwi .emoticon.unsure { background-position:-473px 0; }


/**
 * Auto complete UI
 */
#kiwi .autocomplete {
    position: absolute;
    box-sizing: border-box;
    left: 12em;
    right: 4em;
    bottom: 100%;
    overflow-y: auto;
    display: none;
}
#kiwi .autocomplete-header {
    overflow: hidden;
}
#kiwi.narrow .autocomplete-header {
    display: none;
}
#kiwi .autocomplete-header-help {
    float: right;
}
#kiwi .autocomplete-list {
    overflow-y: auto;
}
#kiwi.narrow .autocomplete {
    left: 0;
    right: 0;
}
#kiwi .autocomplete-item {
    list-style: none;
    overflow: hidden;
}
#kiwi .autocomplete-item .matches {
    margin-left: 2em;
}
#kiwi.narrow .autocomplete-item .matches {
    display: none;
}
#kiwi .autocomplete-item .actions {
    float: right; margin-right: 2em;
}
#kiwi .autocomplete-item .description {
    float: right;
}


/**
 * Control box
 */
#kiwi .controlbox .input {
    height:1.7em; position:relative;
}

/* The nick label */
#kiwi .controlbox .input .nick { cursor: pointer; }
#kiwi .controlbox .input .nick a { }

/* Wrapper div around the text area input */
#kiwi .controlbox .input .input_wrap { display:inline; }

/* Nick change dialog showed when clicking the nick label */
#kiwi .controlbox .nickchange {
    position: absolute;
    background: #FFF;
}
#kiwi .controlbox .nickchange input { }
#kiwi .controlbox .nickchange button { }

/* Plugin tools */
#kiwi .controlbox .input_tools { float:right; }
#kiwi .controlbox .input_tools .tool { margin:0 1em; display:inline; }



/**
 * Topic bar
 */
#kiwi .toolbar .topic { position:relative; height:2em; }
#kiwi .toolbar .topic div {
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    overflow: hidden;
}





/**
 * Server selection dialog
 */
#kiwi .server_select { position:relative; width:320px; margin:0 auto; overflow:hidden; }
#kiwi .server_select.initial { margin-top: 3em; }
#kiwi .server_select .more { display: none; }
#kiwi .server_select button {  }
#kiwi .server_select input { }
#kiwi .server_select label { }
#kiwi .server_select br { clear:both; }
#kiwi .server_select .basic input { }
#kiwi .server_select .basic label { }
#kiwi .server_select .basic { border-bottom: 1px solid gray; margin-bottom:1em; }
#kiwi .server_select .basic .show_more { }
#kiwi .server_select .basic tr.pass { display:none; }
#kiwi .server_select .basic tr.key { display:none; }
#kiwi .server_select.single_server .basic { border:none; }
#kiwi .server_select .status {  }

/* Channel key icon */
#kiwi .server_select .basic tr.channel td { position: relative; }
#kiwi .server_select .basic tr.channel .fa-key {
    position: absolute;
    top: 0.4em;
    right: 0.6em;
    font-size: 1.3em;
    cursor: pointer;
}
#kiwi .server_select .basic tr.have_key { display:none; }

/* When connected to an IRC server, .ok is set on the status div */
#kiwi .server_select .status.ok { }

/* IRC server connection error, .error is set on the status div */
#kiwi .server_select .status.error { }



/* Logo and title in the server selection dialog */
#kiwi .server_select .kiwi_logo { text-align: center; display:block; }
#kiwi .server_select .kiwi_logo h1 { }
#kiwi .server_select .kiwi_logo img { }



/* Icons in the top right corner */
#kiwi .toolbar .app_tools { float:right; }
#kiwi .toolbar .app_tools ul li {
    display:inline; cursor:pointer;
}
#kiwi .toolbar .app_tools img { height:25px; width:25px; margin: 6px 0.7em 0 0; }



/* Settings applet */

/* Some of these styles will move to global styling later */
#kiwi .settings_container {
    padding: 25px;
}

#kiwi .settings_container .settings-category {
    display: none;
    margin-left: 130px;
    padding: 2em;
}

#kiwi .settings_container .settings-category.active {
    display: block;
}
#kiwi .settings_container .settings-category-list {
    float: left;
    width: 130px;
}
#kiwi .settings_container .settings-category-list a {
    display: block;
    line-height: 2.5em;
    padding: 0 1em;
    width: 100%;
}

#kiwi .settings_container .thumbnails:before {
    content: ' ';
    display: table;
}
#kiwi .settings_container .thumbnails:after {
    content: ' ';
    display: table;
    clear: both;
}

#kiwi .settings_container .thumbnails {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#kiwi .settings_container .thumbnails > li {
    display: inline-block;
}

#kiwi .settings_container label {
    cursor: pointer;
}

#kiwi_ form label { display: block; }
#kiwi form input,
#kiwi form select,
#kiwi form textarea {
    /*width: 100%;
    box-sizing: border-box;*/
}

#kiwi form input[size],
#kiwi form select[size],
#kiwi form textarea[size] {
    width: auto;
}

#kiwi form input[type="file"],
#kiwi form input[type="image"],
#kiwi form input[type="submit"],
#kiwi form input[type="reset"],
#kiwi form input[type="button"] {
    width: auto;
}

#kiwi form input[type="radio"] {
    width: auto;
    cursor: pointer;
    margin-top: 2px;
}

#kiwi form input[type="checkbox"] {
    width: auto;
    cursor: pointer;
    margin-top: 3px;
}

#kiwi form .radio,
#kiwi form .checkbox {
    margin-bottom: 10px;
    padding-left: 20px;
}

#kiwi form .radio:last-child,
#kiwi form .checkbox:last-child {
    margin-bottom: 0;
}

#kiwi form .radio input[type="radio"],
#kiwi form .checkbox input[type="checkbox"] {
    float: left;
    margin-left: -20px;
}

#kiwi form .radio+.radio,
#kiwi form .checkbox+.checkbox {
    margin-top: -7px;
}

#kiwi .settings_container .thumbnail {
    float: left;
    margin-right: 15px;
    text-align: center;
}

#kiwi .settings_container .thumbnail > .thumbnail_wrapper {
    border-radius: 3px;
    padding: 3px;
}

#kiwi .settings_container .thumbnail > img {
    border-radius: 2px;
}

#kiwi .settings_container .thumbnail.active > .thumbnail_wrapper {
    background-color: #a6c42c;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a6c42c), color-stop(100%, #76bd2b));
    background-image: -webkit-linear-gradient(#a6c42c, #76bd2b);
    background-image: linear-gradient(#a6c42c, #76bd2b);
}

#kiwi .settings_container section {
    padding-bottom: 20px;
}

#kiwi .settings_container .theme_color {
    border-radius: 2px;
    height: 75px;
    width: 75px;
}

#kiwi .control-group {
    margin: 0 0 20px 20px;
}

#kiwi .control-group:last-child {
    margin-bottom: 0;
}

#kiwi .settings_container section.language select { width:300px; }

@media screen and (max-width: 768px) {
    #kiwi .settings_container {
        padding: 25px;
    }
}


#kiwi .channel_info label { display: block; }
#kiwi .channel_info .channel_url {
    display: none;
}
#kiwi .channel_info .channel-banlist table { display: none; }
#kiwi .channel_info .remove-ban { cursor: pointer; }







/**
 * Reusable componants
 */

#kiwi .divider-verticle {
    border-left: 1px solid #CFCFCF;
    border-right: 1px solid #FFFFFF;
    position: absolute;
    top:25px; bottom:25px;
    right:0;
    width:0;
}

#kiwi .divider-horizontal {
    border-top: 1px solid #CFCFCF;
    border-bottom: 1px solid #FFFFFF;
    position: absolute;
    left:25px; right:25px;
    bottom:0;
    height:0;
}



#kiwi .loader {
    background:url(kiwi/assets/img/loader.gif) no-repeat;
    width:43px; height:11px;
    display:inline-block;
}




#kiwi .ui_menu {
    padding: 0;
    z-index:10;
    position: absolute;
    top: 100px; left: 100px;
    background: #181a1b;
    border: 1px solid #43494c;
    background-clip: padding-box;
}
#kiwi .ui_menu .ui_menu_title {
    padding: 5px 10px 5px 10px; font-weight: bold; overflow:hidden; background:#2b2f31;
}
#kiwi .ui_menu .ui_menu_content { padding: 5px 10px 5px 10px; background:#181a1b; border-top:1px solid #363b3d; overflow:hidden; position:relative; }
#kiwi .ui_menu .ui_menu_content > a { display: block; }
#kiwi .ui_menu .ui_menu_content > a[class^="fa-"]:before,
#kiwi .ui_menu .ui_menu_content > a[class*=" fa-"]:before { margin-right: 5px; color:#666; }
#kiwi .ui_menu .ui_menu_foot {
    padding: 5px; border-top:1px solid #363b3d; background:#2b2f31; overflow:hidden;
}
#kiwi .ui_menu .ui_menu_foot .close { }

#kiwi .applet .applet_chanlist .fa-sort-asc:before, #kiwi .applet .applet_chanlist .fa-sort-desc:before {
    padding-left: 1em;
}
#kiwi .applet .applet_chanlist td {
    min-width: 120px;
}


#kiwi .notification {
    z-index: 1;
    position:absolute;
    top:3px; right:3px;
    width: 300px;
    max-width: 90%;

    /* .show class reveals this element */
    display: none;
}
#kiwi .notification.show { display: block; }
#kiwi .notification-inner {
    position:relative;
    padding:0 10px 23px 10px;
}
#kiwi .notification .close {
    position:absolute;
    bottom: 10px;
    left: 10px;
    margin: -10px;
    cursor:pointer;
    width: 40px;
}

#kiwi {
    background: #181a1b;
    color: #aba499;
}
#kiwi,
#kiwi input,
#kiwi button,
#kiwi textarea {
    font-family:Roboto;
    font-size:14px; line-height:1.4em;
}
#kiwi button {
    border-radius: 2px;
    border: none;
    background: #6e9238;
    cursor: pointer;
    color: #ccc7c1;
}
#kiwi button:disabled { color: #464646; background:#9cc164; }
#kiwi button, #kiwi input { padding: 3px 7px; }
#kiwi input, #kiwi textarea {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5),0 1px 0px rgba(255, 255, 255, 0.3);
    border: none;
	background: #181a1b;
	color: #e8e6e3;
    border-radius: 3px;
}
#kiwi .toolbar {
    background-color:#222426;
    font-size:0.9em;
    z-index: 1;
}
#kiwi .controlbox {
    background:#222426;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid #3e4446;
}
#kiwi .memberlists_resize_handle {
}

#kiwi .toolbar .connections { list-style: none; /*float: left*/}
#kiwi .toolbar .panellist {
    /*background: #2b2b2b*/;
    color: #a5a5a5;
    float: left;
}
#kiwi .toolbar .panellist.applets { }
#kiwi .toolbar .panellist li {
    vertical-align: middle;
    display: list-item;
    float: left;
    border: none;
    background: #3b4042;
    padding: 8px;
    color: #d1cdc7;
    border-right: 1px solid #7e7567;
    margin: 2px;
    box-shadow: 0px 1px 3px #1a1c1d;
}

#kiwi .toolbar .panellist .alert_highlight { font-weight:normal; }
#kiwi .toolbar .panellist .alert_activity { font-weight:normal; }
#kiwi .toolbar .panellist .alert_action { font-weight:normal; }

#kiwi .toolbar .panellist .active { padding-right:23px; padding-top:7px; border-top:1px solid #CB0000; border-bottom:none; background: #1d1f20; color: #c8c3bc}
#kiwi .toolbar .panellist li .part:before { font-family: FontAwesome; content:"\f00d"; }

#kiwi .toolbar .panellist li.server span { padding-left: 5px; font-weight: bold; font-family: Roboto; }
#kiwi.connected .toolbar .panellist li.server:before { content: "\f0ec"; color:#7dcf71; }
#kiwi .toolbar .panellist li.server:before { content: "\f06a"; color:#ff6161; font-size:1.5em; line-height:1em; vertical-align:middle; }

/* Tab texts are within a span */
#kiwi .toolbar .panellist li span  { line-height:20px; vertical-align:middle; display:inline-block; }

#kiwi .toolbar .panellist li.active .activity { display:none; }
#kiwi .toolbar .panellist li .activity.zero { visibility:hidden; }
#kiwi .toolbar .panellist li .activity {
    padding: 1px 3px; margin-left:1em;
    border-radius: 4px;
    background: #327728; color:#e8e6e3;
    text-align: center; font-size: 10px;
    display:inline-block;
    width:2.5em;
    line-height: 1.7em;
    font-family: Roboto;
}
#kiwi .toolbar .panellist li.alert_highlight .activity {
    color: #fff; background: #a60400;
}

#kiwi .status_message {
    background: #FEEFB3; color: #9F6000;
    border-bottom: 1px solid #d7bb71;
    padding: 0.9em;
    text-align: center; font-size:1.1em;
}
#kiwi .status_message.err { color:#D8000C; background:#FFBABA; }

#kiwi .channel_tools {
    border-bottom: 1px solid #3a3e41;
	background: #1d2021;
    margin-bottom: 10px;
    padding: 0 5%;
}
#kiwi .channel_tools i {
    width: 30%;
    font-size: 1.6em;
    line-height: 1.6em;
}
#kiwi .channel_tools i:hover {
    transition: color 0.3s;
    color: #88C56A;
}

#kiwi .messages { color: #c8c3bc; background-color: #181a1b; padding-bottom: 10px;}
#kiwi .messages.active { }
#kiwi .messages a { text-decoration:none; }

#kiwi .messages .msg { border-bottom: 1px solid #333739; padding: 0px; font-family:Roboto; /*font-size:0.9em;*/; min-height: 20px; }
#kiwi .messages .msg .time { float:right; margin-top: 3px; color:#999; padding:1px 5px 0 0; display:none; font-size: 11px; width: 6em; text-align:right; }
#kiwi .messages .msg .nick { width: 8em; float:left; font-size:12px; font-family:Roboto; text-align:right; padding: 4px; overflow:hidden; white-space: nowrap; line-height: 20px; }
#kiwi .messages .msg .text { min-height: 20px; display:block; margin-left:8em; white-space:pre-wrap; word-wrap:break-word; font-family:Roboto; padding:4px; padding-left: 10px; border-left: 1px solid #393e40; line-height: 20px; }

#kiwi .messages .msg.action .nick { }
#kiwi .messages .msg.action .text { color:#61ff61; font-style:italic; }
#kiwi .messages .msg.action.join { color:#61ff61; }
#kiwi .messages .msg.action.part .text { color:#ff6161; }
#kiwi .messages .msg.action.quit .text { color:#ff6161; }
#kiwi .messages .msg.action.kick .text { color:#ff6161; }
#kiwi .messages .msg.status .nick { }
#kiwi .messages .msg.status .text { color:#990000; margin-left:9em; border-left:none; font-weight:bold; }
#kiwi .messages .msg.topic { margin: 10px; background: #655900; border: 1px solid #885c0c; border-radius: 5px; }
#kiwi .messages .msg.topic .time { display:none; }
#kiwi .messages .msg.topic .nick { display:none; }
#kiwi .messages .msg.topic .text { color:#61ff61; margin-left:0; font-style: italic; border:none; }
#kiwi .messages .msg.motd { border:none; }
/*#kiwi .messages .msg.motd .nick { display:none; }*/
#kiwi .messages .msg.motd .text { color:#666; font-family:Roboto; }
#kiwi .messages .msg.whois .nick { font-weight:normal; }
#kiwi .messages .msg.whois .text { padding-left:1em; border-left-width:5px; }
#kiwi .messages .msg.error .text {
    border:1px solid #A33F3F; background-color:#D28A8A;
    padding:0.5em; margin-top:1em; margin-bottom:1em; margin-right:2em;
}

#kiwi.timestamps .messages .msg .time { display:block; }
#kiwi.timestamps .messages .msg .text { margin-right: 5em;}

#kiwi .messages .msg.global_nick_highlight,
#kiwi .messages .msg.highlight { background:#2d3133; }
#kiwi .messages .msg.repeated_nick .nick { visibility:hidden; }

/* Narrow styling (window width < 420px) */
#kiwi.narrow .messages .msg .time { display:none; }
#kiwi.narrow .messages .msg .nick { display:block; float:none; text-align:left; padding-bottom:0;}
#kiwi.narrow .messages .msg .text { display:block; white-space:pre-wrap; word-wrap:break-word; padding-top:0; margin:0;}
#kiwi.narrow .messages .msg.action .text { }
#kiwi.narrow .messages .msg.repeated_nick .nick { display:none; }


#kiwi .messages .msg .media { margin-left:0.5em; }
#kiwi .messages .msg .media .media_close { font-size:0.9em; }
#kiwi .messages .msg .media .media_content { margin:10px 0 0 10px; overflow:hidden; }
#kiwi .messages .msg .media .media_content img { padding:3px; border:1px solid gray; }
#kiwi .messages .msg .media .media_content > .content {
    background: white;
    overflow: hidden;
    padding: 10px;
    border: #DDD 1px solid;
    border-top-color: #EEE;
    border-bottom-color: #BBB;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    float: left;
}

#kiwi .messages .msg .media.twitter .media_content > .content {
    background: transparent;
    border:none;
    overflow: hidden;
    box-shadow: none;
    padding: 0;
}
#kiwi .messages .msg .media.reddit .thumbnail_nsfw {
    display: inline-block;
    float: left;
}
#kiwi .messages .msg .media.reddit .thumbnail { float:left; margin-right: 0.5em; }

#kiwi .messages .last_seen {
    border-bottom-color: #B0CF82;
}

#kiwi .right_bar {
    background-color: #f6f6f6;
    border-left: 1px solid #ddd;
}
#kiwi.narrow .right_bar { width:100%; }
#kiwi.narrow .right_bar.disabled { width:0; }

#kiwi .memberlists {
    margin-top: 36px;
    padding-top: 14px;
}
#kiwi .memberlists .meta {
    border-bottom: 1px solid #3a3e41;
    font-size: 0.9em;
    margin-bottom: 10px;
    padding-bottom: 10px;
    text-align: center;
}

#kiwi .memberlists ul { list-style: none; }
#kiwi .memberlists ul.active { }
#kiwi .memberlists ul li { padding: 0.2em 1em; }
#kiwi.narrow .memberlists ul li {
    padding: 0.5em 1em;
    border-bottom: 1px solid lightgray;
    text-align: center;
}
#kiwi.touch .memberlists ul li {
    padding: 1em 0.5em;
}
#kiwi .memberlists ul li:hover {
    border-left: 5px solid #46762e;
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}
#kiwi .memberlists ul li a.nick { display:block; color:#e8e6e3; }

#kiwi .userbox { margin:4px 1em 5px 1em; padding-bottom:0.7em; font-size:.9em; }
#kiwi .userbox a { display:block; text-decoration:none; margin-bottom:2px; }
#kiwi .userbox a i { font-size:1.1em; margin-right:5px; }

/* User mode styles */
#kiwi .memberlists ul li .prefix {
    display:none;
    width:20px; height:20px;
    border-radius: 5px;
    margin: 0 7px 0 0;
    font-size:12px; text-align: center;
    color: #d6d3cd;
}
/* Most important modes towards the bottom - they override the top ones! */
#kiwi .memberlists ul li.mode.v .prefix { display:inline-block; background:#43484b; }
#kiwi .memberlists ul li.mode.h .prefix { display:inline-block; background:#919039; }
#kiwi .memberlists ul li.mode.o .prefix { display:inline-block; background:#399139; }
#kiwi .memberlists ul li.mode.a .prefix { display:inline-block; background:#913939; }
#kiwi .memberlists ul li.mode.q .prefix { display:inline-block; background:#6a3991; }
#kiwi .memberlists ul li.mode.Y .prefix { display:inline-block; background:#8547b5; }
#kiwi .memberlists ul li.mode.y .prefix { display:inline-block; background:#8547b5; }

#kiwi .autocomplete {
    box-shadow: 0 1px 15px rgba(64, 54, 63, 0.25);
    border: 1px solid #CCC;
    background: #eee;
}
#kiwi .autocomplete-header {
    background: #DADADA none repeat scroll 0 0 padding-box;
    border-bottom: 1px solid #CCC;
    color: #8A8A8A;
    font-size: 12px;
    padding: 5px 10px 4px;
}
#kiwi .autocomplete-header-label {
    font-weight: bold;
}
#kiwi .autocomplete-item {
    border-bottom: 1px solid #CCC;
    background: #fff;
    padding: 5px 20px;
}
#kiwi .autocomplete-item.selected { background: #D1EACD; }
#kiwi .autocomplete-item .word { font-weight: bold; }
#kiwi .autocomplete-item .matches { font-size: 0.9em; }
#kiwi .autocomplete-item .actions { font-size: 0.9em; }
#kiwi .autocomplete-item .actions a { margin-left: 1em; }
#kiwi .autocomplete-item .description {
    margin-right: 1em;
    font-style: italic;
}

#kiwi .controlbox .input {
    background:#181a1b;
    margin:3px;
    margin-top: 0px;
    margin-left: 0.5em;
    margin-right: 0.5em;
    height:1.7em;
    padding: 3px;
    border: 1px solid #3e4446;

}
#kiwi .controlbox .input .nick a { text-decoration:none; color:black; }
#kiwi .controlbox .input .nick {
    overflow: hidden;
    padding-right: 5px;
    padding-left: 5px;
    margin-right: 5px;
    display: block;
    font-size: 12px;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    float: left;
    height: 100%;
    width: 10.4em;
    background: #1d2021;
}

#kiwi.narrow .controlbox .input .nick { display:none; }
#kiwi.narrow .controlbox .input .input_wrap { left:7px; }

#kiwi .controlbox .input .input_wrap {
    position:absolute;
    float: left;
    right:7px;
    left: 10.4em;
    height:1.7em;
}
#kiwi .controlbox .input .inp {
    line-height:1.7em;
    border: medium none;
    box-shadow: none;
    border-radius: 0;
    outline:none; resize:none;
    overflow:hidden;
    position:relative;
    height:100%; width:100%;
    display: block;
}


#kiwi .controlbox .nickchange {
    padding:10px; left: 0px;
    background: #383838; color:#DADADA;
}
#kiwi .controlbox .nickchange input { padding:0.3em 0.5em; margin-left: 0.5em; width: 165px; }
#kiwi .controlbox .nickchange button { padding:0.5em; margin: 0 0.5em 0 1em; }



#kiwi .toolbar .topic { background-color:#2b2f31; padding-bottom:2px; /*border-top: 1px solid #ddd*/}
#kiwi .toolbar .topic div {
    padding: 0.2em 1em;
    text-align: center;
    box-shadow: none;
    border-radius: 0;
    background-color:#1d1f20;
    overflow: hidden;
    outline: none;
    white-space: nowrap;
    margin-bottom: 1px;
    padding-top: 0.51em;
    color: #9a9284;
}
#kiwi .toolbar .topic:hover div {
    min-height:1.5em;
    white-space:pre-wrap; word-wrap:break-word;
    overflow:visible;
    background:#181a1b;
    z-index: 10;
    height:auto; bottom:auto;
    border-bottom: 2px solid #837a6c;
}


#kiwi .toolbar .app_tools { width:200px; text-align: center; color:#cdc8c2; }
#kiwi.narrow .toolbar .tabs { margin-right:0; }
#kiwi.narrow .toolbar .app_tools { width:auto; }
#kiwi .toolbar .app_tools ul li {
    font-size:26px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    margin-left:10px;
}
#kiwi .toolbar .app_tools ul li:hover { color:#88C56A; }
#kiwi .toolbar .app_tools img { }


/* The server select dialog */
#kiwi .server_select { margin-left:auto; margin-right:auto; }
#kiwi .server_select.initial:before {
    /* Hacky, but this allows us to set a different page background on the initial connect screen */
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    content: " ";
    position: fixed;
}
#kiwi .server_select .more { display: none; width:270px; margin:0 auto; }
#kiwi .server_select table tr td { padding:5px; }
#kiwi .server_select button {
    /*padding: 10px 25px;*/
    padding: 0.5em 1em;
    font-size: 1.1em;
    width: 196px;
    margin: 20px auto;
    display: block;
}
#kiwi .server_select input { padding:3px 7px; width:150px; }
#kiwi .server_select label { }
#kiwi .server_select br { clear:both; }
#kiwi .server_select .basic input, .server_select .basic button { font-size:1em; padding:0.5em 1em; }
#kiwi .server_select .basic input { width:170px; }
#kiwi .server_select .basic label { font-size:1.3em; margin-top:4px; }
#kiwi .server_select .basic tr.have_pass { font-size:0.8em; }
#kiwi .server_select .basic tr.have_key { font-size:0.8em; }
#kiwi .server_select .basic tr.channel td { padding-top:1em; }
#kiwi .server_select .basic { border-bottom: 1px dashed gray; margin-bottom:1em; }
#kiwi .server_select .basic .show_more { display: block; width:110px; margin:10px 0 0 0; font-size:0.8em; }
#kiwi .server_select.single_server .basic { border:none; }
#kiwi .server_select .status { text-align: center; font-weight: bold; padding:1em; }
#kiwi .server_select .status.ok { }
#kiwi .server_select .status.error {
    border:1px solid #A33F3F; background-color:#D28A8A;
    padding:0.5em; margin-top:1em; margin-bottom:1em; margin-right:2em;
}
#kiwi .server_select .show_server { margin-left: 1em; font-size:0.9em; color: #555555; }


#kiwi .server_select .kiwi_logo { margin-top:30px; }
#kiwi .server_select .kiwi_logo h1 span {
    font-size:14px;
    line-height:24px; vertical-align: middle;
    color: #b2aca2;
}
#kiwi .server_select .kiwi_logo img { display:inline; width:24px; }


#kiwi.chanlist_treeview .panels { left:160px; }
#kiwi.chanlist_treeview .toolbar { position:static; }
#kiwi.chanlist_treeview .toolbar .app_tools { float:none; width: 160px; }
#kiwi.chanlist_treeview .toolbar > div { margin-left:0px; }
#kiwi.chanlist_treeview .toolbar .tabs { position:absolute; left:0px; bottom:0px; top:0px; margin:0; width:160px; background:#383838; overflow-y:auto; }
#kiwi.chanlist_treeview .toolbar .panellist { float: none; display: block;}
#kiwi.chanlist_treeview .tabs ul li { display:block; float:none; margin-right: 0px; /*border-bottom: 1px solid #666*/ }
#kiwi.chanlist_treeview .tabs ul li .activity { position:absolute; right:5px; }
#kiwi.chanlist_treeview .toolbar .panellist li { }
#kiwi.chanlist_treeview .toolbar .panellist .active { padding-left: 6px; padding-right:23px; border:none; border-left:2px solid #df6b26; border-bottom:none; }
#kiwi.chanlist_treeview .tabs ul li.active { margin-right:0; border-right-width:0}
#kiwi.chanlist_treeview .toolbar .topic { margin-left: 160px;}

#kiwi .applet_chanlist {
    margin: 0.5em 1em;
}
#kiwi .applet_chanlist table {
    border-collapse: collapse;
    width: 100%;
}
#kiwi .applet_chanlist thead {
    text-align: center;
}
#kiwi .applet_chanlist tbody td {
    border: 1px solid #C4C4C4;
    padding: 0.3em 1em;
}
#kiwi .applet_chanlist .chanlist_name, #kiwi .applet_chanlist .chanlist_num_users {
    border-width: 0 1px 0 0;
}
#kiwi .applet_chanlist .chanlist_topic {
    border-width: 0;
}
#kiwi .applet_chanlist tr:nth-child(even) {
    background: none repeat scroll 0 0 #DBDBDB;
}


#kiwi .applet > div.settings button.save {
    padding:1em 2em;
    border:1px solid gray; border-radius:3px;
}
#kiwi .applet > div.settings tr {
    border-bottom: 1px dashed black;
}

#kiwi .applet > div.settings td.label {
    font-weight: bold;
}
#kiwi .applet > div.settings tr.save {
    text-align: right;
}


#kiwi .ui_menu {
    border-radius: 3px;
    color: #c8c3bc;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
#kiwi .ui_menu .ui_menu_title {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
#kiwi .ui_menu .ui_menu_content { }
#kiwi .ui_menu .ui_menu_content.hover:hover { background:#1d1f20; }
#kiwi .ui_menu .ui_menu_foot {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
#kiwi .ui_menu .ui_menu_foot .close { float:right; font-size:0.9em; margin-right:1em; color: #999; }
#kiwi .ui_menu .ui_menu_foot .close:hover { color: #222; }


#kiwi .channel_info .channel_url {
    display: block;
    margin: 5px 1em;
    font-style: italic;
}
#kiwi .channel_info .channel-banlist table { margin-top: 10px; border-spacing: 10px 3px; }
#kiwi .channel_info .channel-banlist thead { font-style: italic; }
#kiwi .channel_info .remove-ban:hover { color: #900; }


#kiwi .notification {
    /* .show class reveals this element */
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
    transition: max-height 1s;

    display: block;

    color: #DBDBDB;
    text-shadow: 0 -1px black;
    background: rgba(65, 65, 65, 0.95);
    background-clip: padding-box;
    border: 1px solid;
    border-color: rgba(17, 17, 17, 0.6) rgba(17, 17, 17, 0.7) rgba(17, 17, 17, 0.9);
    border-radius: 5px;

    background-image: -webkit-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
    background-image: -moz-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
    background-image: -o-linear-gradient(top, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
    background-image: linear-gradient(to bottom, rgba(242, 242, 242, 0.3), rgba(221, 221, 221, 0.01) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3));
    -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);


}
#kiwi .notification.show { max-height: 500px; }
#kiwi .notification .close {
    font-size:16px;
    border:1px solid #1b1b1b;
    border-left: none;
    border-bottom: none;
    border-radius: 0 8px 0 0;
    line-height: 20px;
    text-align: center;
    color: #747474;
    background-image: -webkit-linear-gradient(top, #383838, #111111);
    background-image: -moz-linear-gradient(top, #383838, #111111);
    background-image: -o-linear-gradient(top, #383838, #111111);
    background-image: linear-gradient(to bottom, #383838, #111111);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
}
#kiwi .notification .close:hover { color: #DBDBDB; }


#kiwi .settings_container .settings-category {
    background-color: #181a1b;
}
#kiwi .settings_container .settings-category > h5 {
    border-bottom: 1px solid #A5C42C;
    padding-bottom: 20px;
    margin-bottom: 20px;
    margin-top: 0;
    padding-top: 15px;
}
#kiwi .settings_container .settings-category-list {
    background: #FFF;
    margin-top: 3.4em;
}
#kiwi .settings_container .settings-category-list a {
    line-height: 2.5em;
    background: #181a1b;
    border-left: solid 4px #303436;
    color: #a8a095;
}
#kiwi .settings_container .settings-category-list a.active {
    border-left: solid 4px #7f9522;
    color: #5c98d6;
}
    Nel codice c'è transform: scale(5) e quello che vorrei fare è ottenere il css con i valori dopo il transform: scale(5). Grazie di nuovo per la cordialità.
  • andreadev
    andreadev
    Utente Attivo
    Iscritto da
    ago, 2020
    Messaggi:
    94

    Re: Ottenere il CSS dopo transform: scale() e transform-origin

    Quindi tu vorresti avere i css modificati per poterli salvare al posto di quelli che hai nel file?

    Sinceramente non mi sembra una cosa molto efficace... l'obiettivo finale quale sarebbe? E quale sarebbe il problema?

    Magari riusciamo a trovare una soluzione meno problematica...
    Anche perché come ti dicevo i css non vengono modificati dalla proprietà "transform". Il codice che ti ho inviato è utilizzabile se avevi bisogno di un solo valore (o alcuni) durante il runtime, non per ricreare un nuovo foglio di stile.
  • F
    fede220
    Pochi posts
    Iscritto da
    mar, 2020
    Messaggi:
    32

    Re: Ottenere il CSS dopo transform: scale() e transform-origin

    Il motivo è per la compatibilità con Internet explorer 8 che non lo supporta e anche perchè alcuni menu non funzionano e non si aprono con la trasformazione. Quindi stavo cercando se ci fosse un modo tramite JavaScript di ottenere il CSS con i valori dopo transform: scale(5).
  • andreadev
    andreadev
    Utente Attivo
    Iscritto da
    ago, 2020
    Messaggi:
    94

    Re: Ottenere il CSS dopo transform: scale() e transform-origin

    Ok,
    Purtroppo non c'è un metodo per fare quello che chiedi in javascript. In verità, le proprietà "transform" andrebbero utilizzate solo per piccole modifiche a singoli elementi, in genere per le animazioni, e non per fare grosse modifiche ai layout. Te lo dico così in futuro non ci farai su troppo affidamento

    Se è proprio necessario supportare IE8 (e purtroppo in alcuni casi lo è) mi sa che dovrai eliminare i transform e riadattare i CSS in modo che vadano bene sui vari dispositivi
  • F
    fede220
    Pochi posts
    Iscritto da
    mar, 2020
    Messaggi:
    32

    Re: Ottenere il CSS dopo transform: scale() e transform-origin

    Ok grazie per il consiglio, modificherò manualmente i valori del CSS per adattarli anche se ci vorrà del tempo. Grazie per la cordialità.
  • andreadev
    andreadev
    Utente Attivo
    Iscritto da
    ago, 2020
    Messaggi:
    94

    Re: Ottenere il CSS dopo transform: scale() e transform-origin

    Figurati, mi spiace di non poter essere stato di maggior aiuto
    Buon lavoro
Devi accedere o registrarti per scrivere nel forum
9 risposte