CSS zum Erzielen einer Schließen-Schaltfläche zum Vergrößern und Verkleinern (Beispielcode)

<Vorlage>
  <div Klasse="FensterAktion">
    <button class="min">Verkleinern</button>
    <button class="fullpage">Vergrößern</button>
    <button class="close">Schließen</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      flag_fullpageWebView: 1
    };
  }
};
</Skript>

<style lang="scss" scoped>
.windowAction {
  Rand oben: -5px;
  -webkit-app-region: kein Ziehen;
  Mindestbreite: 70px;
  Textausrichtung: rechts;
  Taste {
    &:schweben {
      Farbe: #a8aabd;
    }
  }
  .min {
    Breite: 14px;
    Höhe: 14px;
    Hintergrundfarbe: transparent;
    Schriftgröße: 0;
    Rand rechts: 18px;
    Position: relativ;
    Farbe: #878896;
    &:nach {
      Inhalt: "";
      Breite: 100 %;
      Position: absolut;
      links: 0;
      unten: 0;
      Rahmen unten: 2px durchgezogen;
    }
  }
  .volle Seite {
    Breite: 16px;
    Höhe: 16px;
    Farbe: #878896;
    Rand: 2px durchgezogen;
    Hintergrundfarbe: transparent;
    Schriftgröße: 0;
    Rand rechts: 18px;
  }
  .schließen {
    Breite: 18px;
    Höhe: 18px;
    Schriftgröße: 0;
    Hintergrundfarbe: transparent;
    Position: relativ;
    Farbe: #878896;
    transformieren: drehen (45 Grad) verschieben (-2px, 2px);
    &:vor,
    &:nach {
      Inhalt: "";
      Position: absolut;
    }
    &:vor {
      Breite: 100 %;
      links: 0;
      oben: 50 %;
      transformieren: verschiebeY(-50%);
      Rahmen oben: 2px durchgezogen;
    }
    &:nach {
      Höhe: 100%;
      links: 50%;
      oben: 0;
      transformieren: übersetzenX(-50%);
      Rahmen links: 2px durchgezogen;
    }
  }
}
</Stil>